:root{
  --bg:#f3f4f6;--surface:#fff;--text:#0d0e11;--muted:#686c75;--line:#dfe2e8;--dark:#0d0e11;--accent:#315cff;--radius:26px;--max:1440px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.page-glow{position:fixed;width:46vw;height:46vw;border-radius:50%;filter:blur(130px);opacity:.08;pointer-events:none;z-index:-1}.glow-a{background:#315cff;right:-22vw;top:-15vw}.glow-b{background:#8c5cff;left:-28vw;top:42vh}.nav{width:min(var(--max),calc(100% - 48px));margin:0 auto;min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:32px;border-bottom:1px solid var(--line);position:relative;z-index:20}.brand{font-weight:900;letter-spacing:-.055em;font-size:20px}.nav-links{display:flex;gap:30px;font-size:14px}.nav-links a{color:var(--muted)}.button{border:0;background:var(--dark);color:#fff;min-height:52px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;cursor:pointer;font-weight:750;transition:transform .22s ease,opacity .22s ease,background .22s ease,box-shadow .22s ease}.button:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.12)}.button-small{min-height:44px;padding:0 20px;font-size:14px}.button-secondary{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}.nav-actions{display:flex;align-items:center;gap:10px}.nav-actions .client-login{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}.nav-actions .client-login:hover{background:#fff}

.hero{width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:105px 0 115px;display:grid;grid-template-columns:.86fr 1.14fr;gap:76px;align-items:center;min-height:820px}.eyebrow{margin:0 0 22px;font-size:11px;letter-spacing:.17em;font-weight:850}.hero h1{margin:0;max-width:680px;font-size:clamp(66px,7.6vw,120px);line-height:.88;letter-spacing:-.075em}.hero h1 span{display:block;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.06em}.hero-description{max-width:590px;margin:32px 0 0;color:var(--muted);font-size:19px;line-height:1.65}.hero-actions{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}.hero-meta{margin-top:26px;display:flex;gap:22px;flex-wrap:wrap;color:var(--muted);font-size:12px}.hero-meta span+span:before{content:"•";margin-right:22px;color:#aaa}.hero-machine{position:relative}.machine-topline{display:flex;justify-content:space-between;align-items:center;margin:0 7px 11px;font-size:10px;letter-spacing:.14em;color:var(--muted);font-weight:800}.hero-browser{background:#111318;padding:12px;border-radius:30px;box-shadow:0 36px 120px rgba(0,0,0,.22);transform:rotate(1deg);position:relative}.browser-top{height:46px;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;padding:0 11px}.browser-dots{display:flex;gap:7px}.browser-dots span{width:8px;height:8px;border-radius:50%;background:#474b55}.browser-address{justify-self:center;background:#1c1f26;color:#717684;padding:7px 18px;border-radius:999px;font-size:10px}.browser-status{justify-self:end;color:#6f7480;font-size:9px;letter-spacing:.14em}.hero-demo{min-height:590px;border-radius:20px;overflow:hidden;position:relative;background:radial-gradient(circle at 70% 25%,rgba(49,92,255,.28),transparent 25%),linear-gradient(135deg,#0b0e18,#12182a 46%,#0b0d13);color:#fff;padding:52px}.hero-demo-grid,.visual-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 88%)}.hero-demo-copy{position:absolute;left:50px;bottom:54px;max-width:520px;z-index:2}.hero-demo-copy p{font-size:10px;letter-spacing:.18em;color:#9aa8d0}.hero-demo-copy h2{font-size:clamp(48px,5vw,80px);line-height:.92;letter-spacing:-.065em;margin:14px 0 30px;max-width:520px}.hero-demo-actions{display:flex;gap:18px;align-items:center;font-size:12px}.hero-demo-actions strong{padding:12px 16px;border-radius:999px;background:#fff;color:#111}.floating-card{position:absolute;z-index:3;min-width:130px;padding:15px 17px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(16,20,31,.72);backdrop-filter:blur(18px);box-shadow:0 12px 40px rgba(0,0,0,.22);animation:float 5s ease-in-out infinite}.floating-card small{display:block;font-size:8px;letter-spacing:.15em;color:#8c94a8;margin-bottom:8px}.floating-card strong{font-size:13px}.card-one{right:38px;top:38px}.card-two{right:115px;top:150px;animation-delay:-1.6s}.card-three{right:42px;top:265px;animation-delay:-3s}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.modes-section,.builder-section,.handoff-section,.why-section,.pricing-section{width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:125px 0;border-top:1px solid var(--line)}.section-heading h2,.builder-intro h2,.handoff-copy h2,.pricing-copy h2,.ownership-section h2{margin:0;font-size:clamp(50px,6vw,92px);line-height:.94;letter-spacing:-.07em}.split-heading{display:grid;grid-template-columns:1fr .65fr;gap:80px;align-items:end}.split-heading>p{margin:0 0 8px;color:var(--muted);line-height:1.65;font-size:17px;max-width:520px}.mode-showcase{margin-top:65px;display:grid;grid-template-columns:290px 1fr;gap:18px}.mode-rail{display:flex;flex-direction:column;gap:8px;position:sticky;top:18px;align-self:start}.mode-tab{border:1px solid var(--line);background:rgba(255,255,255,.5);padding:20px 18px;text-align:left;cursor:pointer;display:grid;grid-template-columns:34px 1fr;grid-template-areas:"num name" ". desc";gap:4px 8px;min-height:94px;transition:transform .22s ease,background .22s ease,color .22s ease,border-color .22s ease}.mode-tab:hover{transform:translateX(4px)}.mode-tab span{grid-area:num;font-size:10px;color:var(--muted);margin-top:3px}.mode-tab strong{grid-area:name;font-size:18px;letter-spacing:-.025em}.mode-tab small{grid-area:desc;color:var(--muted);font-size:11px}.mode-tab.active{background:#0d0e11;color:#fff;border-color:#0d0e11}.mode-tab.active span,.mode-tab.active small{color:#989da8}.mode-stage{min-height:750px;border-radius:30px;background:#0b0d14;color:#fff;padding:28px;transition:background .55s cubic-bezier(.2,.8,.2,1),color .55s ease;overflow:hidden}.mode-stage-header{display:flex;justify-content:space-between;gap:28px;align-items:flex-end;margin-bottom:22px}.mode-stage-header div{display:flex;gap:14px;align-items:baseline}.mode-stage-header span{font-size:12px;color:#77809a}.mode-stage-header strong{font-size:28px;letter-spacing:-.04em}.mode-stage-header p{margin:0;color:#81899e;font-size:13px}.mode-browser{background:#171a22;border:1px solid rgba(255,255,255,.09);border-radius:22px;padding:9px;box-shadow:0 30px 80px rgba(0,0,0,.32)}.mode-window-bar{height:42px;display:flex;align-items:center;gap:7px;padding:0 10px;color:#676e7f}.mode-window-bar>span{width:7px;height:7px;border-radius:50%;background:#555c69}.mode-window-bar em{font-style:normal;font-size:9px;margin-left:auto;margin-right:auto;color:#707889}.mode-preview{height:575px;border-radius:15px;overflow:hidden;position:relative;background:radial-gradient(circle at 75% 35%,rgba(49,92,255,.34),transparent 26%),linear-gradient(135deg,#0d111c,#11182b);transition:background .55s ease,color .55s ease,font-family .45s ease,border-radius .45s ease}.preview-nav{height:72px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:3;border-bottom:1px solid rgba(255,255,255,.09)}.preview-nav div{display:flex;gap:22px;font-size:10px}.preview-nav button{border:0;border-radius:999px;padding:11px 15px;background:#fff;color:#111;font-size:9px;font-weight:750}.preview-hero{height:442px;display:grid;grid-template-columns:1fr .9fr;align-items:center;padding:46px;position:relative}.preview-copy{position:relative;z-index:2}.preview-copy>p:first-child{font-size:9px;letter-spacing:.18em;color:#8e9bc1}.preview-copy h3{margin:12px 0 18px;font-size:clamp(48px,5vw,78px);line-height:.9;letter-spacing:-.065em;max-width:560px}.preview-sub{max-width:430px;color:#aeb5c6;line-height:1.55;font-size:13px}.preview-cta{display:flex;align-items:center;gap:18px;margin-top:28px}.preview-cta button{border:0;border-radius:999px;background:#fff;padding:12px 16px;font-size:10px;font-weight:750}.preview-cta span{font-size:10px;color:#aab1c0}.preview-art{position:relative;height:330px}.art-core{position:absolute;width:145px;height:145px;border-radius:34px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(18deg);background:linear-gradient(135deg,#315cff,#7d8fff);box-shadow:0 0 80px rgba(49,92,255,.5)}.art-orbit{position:absolute;border:1px solid rgba(255,255,255,.16);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.orbit-a{width:260px;height:260px}.orbit-b{width:330px;height:330px}.art-stat{position:absolute;padding:14px 16px;border:1px solid rgba(255,255,255,.13);background:rgba(12,15,22,.6);backdrop-filter:blur(15px);border-radius:15px}.art-stat small{display:block;font-size:7px;color:#7f8799;letter-spacing:.15em}.art-stat strong{display:block;font-size:17px;margin-top:4px}.stat-a{left:12px;top:55px}.stat-b{right:0;bottom:42px}.preview-strip{height:61px;border-top:1px solid rgba(255,255,255,.09);display:grid;grid-template-columns:repeat(4,1fr)}.preview-strip span{display:flex;align-items:center;padding:0 18px;border-right:1px solid rgba(255,255,255,.09);font-size:9px;color:#8e95a4}.mode-stage-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}.mode-dots{display:flex;gap:7px}.mode-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}.mode-dots i.active{background:#fff;width:22px;border-radius:999px}
.mode-stage[data-mode="editorial"]{background:#ece7df;color:#1c1814}.mode-stage[data-mode="editorial"] .mode-stage-header span,.mode-stage[data-mode="editorial"] .mode-stage-header p{color:#766e65}.mode-stage[data-mode="editorial"] .mode-browser{background:#d7d0c5;border-color:#c6beb1}.mode-stage[data-mode="editorial"] .mode-window-bar{color:#777}.mode-stage[data-mode="editorial"] .mode-preview{background:#f6f0e7;color:#1f1b17;font-family:Georgia,"Times New Roman",serif}.mode-stage[data-mode="editorial"] .preview-nav{border-color:#c9c0b5}.mode-stage[data-mode="editorial"] .preview-nav div,.mode-stage[data-mode="editorial"] .preview-nav button{font-family:Inter,sans-serif}.mode-stage[data-mode="editorial"] .preview-nav button,.mode-stage[data-mode="editorial"] .preview-cta button{background:#1e1b18;color:#fff;border-radius:0}.mode-stage[data-mode="editorial"] .preview-copy>p:first-child,.mode-stage[data-mode="editorial"] .preview-sub,.mode-stage[data-mode="editorial"] .preview-cta span{color:#6f665e;font-family:Inter,sans-serif}.mode-stage[data-mode="editorial"] .art-core{border-radius:50%;background:#a7886a;box-shadow:none}.mode-stage[data-mode="editorial"] .art-orbit{border-color:#b8a996}.mode-stage[data-mode="editorial"] .art-stat{background:#f6f0e7;border:1px solid #bfb5a8;border-radius:0;color:#1f1b17;font-family:Inter,sans-serif}.mode-stage[data-mode="editorial"] .preview-strip{border-color:#c9c0b5}.mode-stage[data-mode="editorial"] .preview-strip span{color:#655c54;border-color:#c9c0b5;font-family:Inter,sans-serif}
.mode-stage[data-mode="precision"]{background:#fff;color:#111}.mode-stage[data-mode="precision"] .mode-stage-header span,.mode-stage[data-mode="precision"] .mode-stage-header p{color:#858585}.mode-stage[data-mode="precision"] .mode-browser{background:#ececec;border-color:#ddd}.mode-stage[data-mode="precision"] .mode-preview{background:#f7f7f7;color:#111}.mode-stage[data-mode="precision"] .preview-nav{border-color:#e2e2e2}.mode-stage[data-mode="precision"] .preview-nav button,.mode-stage[data-mode="precision"] .preview-cta button{background:#111;color:#fff}.mode-stage[data-mode="precision"] .preview-copy>p:first-child,.mode-stage[data-mode="precision"] .preview-sub,.mode-stage[data-mode="precision"] .preview-cta span{color:#747474}.mode-stage[data-mode="precision"] .art-core{border-radius:50%;background:linear-gradient(145deg,#d9dde8,#fff);box-shadow:0 25px 70px rgba(0,0,0,.12)}.mode-stage[data-mode="precision"] .art-orbit{border-color:#ddd}.mode-stage[data-mode="precision"] .art-stat{background:rgba(255,255,255,.85);border-color:#ddd;color:#111}.mode-stage[data-mode="precision"] .preview-strip{border-color:#e2e2e2}.mode-stage[data-mode="precision"] .preview-strip span{color:#777;border-color:#e2e2e2}
.mode-stage[data-mode="studio"]{background:#ff6b3d;color:#171717}.mode-stage[data-mode="studio"] .mode-stage-header span,.mode-stage[data-mode="studio"] .mode-stage-header p{color:#5d2a1d}.mode-stage[data-mode="studio"] .mode-browser{background:#232323}.mode-stage[data-mode="studio"] .mode-preview{background:#f2e8db;color:#171717}.mode-stage[data-mode="studio"] .preview-nav{border-color:#111}.mode-stage[data-mode="studio"] .preview-nav button,.mode-stage[data-mode="studio"] .preview-cta button{background:#ff5f36;color:#111;border:2px solid #111;border-radius:0}.mode-stage[data-mode="studio"] .preview-copy h3{font-size:clamp(55px,5.5vw,90px);font-weight:900;letter-spacing:-.08em}.mode-stage[data-mode="studio"] .preview-copy>p:first-child,.mode-stage[data-mode="studio"] .preview-sub,.mode-stage[data-mode="studio"] .preview-cta span{color:#4a3d34}.mode-stage[data-mode="studio"] .art-core{border-radius:0;background:#ff5f36;border:3px solid #111;box-shadow:18px 18px 0 #315cff}.mode-stage[data-mode="studio"] .art-orbit{border-color:#111}.mode-stage[data-mode="studio"] .art-stat{background:#f2e8db;border:2px solid #111;color:#111;border-radius:0;box-shadow:6px 6px 0 #111}.mode-stage[data-mode="studio"] .preview-strip{border-color:#111}.mode-stage[data-mode="studio"] .preview-strip span{color:#111;border-color:#111;font-weight:750}
.mode-stage[data-mode="executive"]{background:#16231f;color:#f2eee5}.mode-stage[data-mode="executive"] .mode-stage-header span,.mode-stage[data-mode="executive"] .mode-stage-header p{color:#9eaa9f}.mode-stage[data-mode="executive"] .mode-browser{background:#0e1714}.mode-stage[data-mode="executive"] .mode-preview{background:linear-gradient(145deg,#19342b,#0e1915);color:#f2eee5}.mode-stage[data-mode="executive"] .preview-copy h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.05em}.mode-stage[data-mode="executive"] .preview-nav button,.mode-stage[data-mode="executive"] .preview-cta button{background:#e9dfca;color:#1a241f}.mode-stage[data-mode="executive"] .preview-copy>p:first-child,.mode-stage[data-mode="executive"] .preview-sub,.mode-stage[data-mode="executive"] .preview-cta span{color:#a8b6aa}.mode-stage[data-mode="executive"] .art-core{border-radius:8px;background:#b59b6d;box-shadow:0 0 0 1px #d5c49f,0 30px 80px rgba(0,0,0,.3)}.mode-stage[data-mode="executive"] .art-orbit{border-color:#52665d}.mode-stage[data-mode="executive"] .art-stat{background:#12241e;border-color:#52665d;color:#f2eee5}.mode-stage[data-mode="executive"] .preview-strip span{color:#9aa99f}
.mode-stage[data-mode="impact"]{background:#e8ff43;color:#111}.mode-stage[data-mode="impact"] .mode-stage-header span,.mode-stage[data-mode="impact"] .mode-stage-header p{color:#4b5312}.mode-stage[data-mode="impact"] .mode-browser{background:#111}.mode-stage[data-mode="impact"] .mode-preview{background:#ff5b37;color:#111}.mode-stage[data-mode="impact"] .preview-nav{border-color:#111;border-bottom-width:2px}.mode-stage[data-mode="impact"] .preview-nav button,.mode-stage[data-mode="impact"] .preview-cta button{background:#111;color:#fff;border-radius:0}.mode-stage[data-mode="impact"] .preview-copy h3{font-size:clamp(60px,6.5vw,105px);line-height:.78;font-weight:950;letter-spacing:-.09em;text-transform:uppercase}.mode-stage[data-mode="impact"] .preview-copy>p:first-child,.mode-stage[data-mode="impact"] .preview-sub,.mode-stage[data-mode="impact"] .preview-cta span{color:#111}.mode-stage[data-mode="impact"] .art-core{border-radius:0;background:#e8ff43;box-shadow:16px 16px 0 #111}.mode-stage[data-mode="impact"] .art-orbit{border:2px solid #111}.mode-stage[data-mode="impact"] .art-stat{background:#e8ff43;border:2px solid #111;color:#111;border-radius:0}.mode-stage[data-mode="impact"] .preview-strip{border:2px solid #111;border-left:0;border-right:0}.mode-stage[data-mode="impact"] .preview-strip span{color:#111;border-color:#111;font-weight:900}
.builder-intro{display:grid;grid-template-columns:1fr .65fr;gap:80px;align-items:end}.builder-intro>p:last-child{margin:0 0 8px;color:var(--muted);font-size:17px;line-height:1.65}.builder-shell{margin-top:68px;display:grid;grid-template-columns:390px 1fr;gap:14px;background:#0d0e11;padding:14px;border-radius:34px;box-shadow:0 30px 100px rgba(0,0,0,.16)}.builder-controls{background:#f7f7f8;border-radius:23px;padding:22px;max-height:850px;overflow:auto}.builder-progress{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:26px}.builder-progress span{font-size:8px;letter-spacing:.11em;color:#a0a3aa;border-top:2px solid #dedfe3;padding-top:9px}.builder-progress span.active{color:#111;border-color:#111}.control-block{padding:20px 0;border-top:1px solid #dddfe4}.control-block:first-of-type{border-top:0}.control-label{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;margin-bottom:11px;color:#525660}.control-title-row{display:flex;align-items:center;justify-content:space-between}.control-title-row output{font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#666}.builder-controls input[type="text"],.builder-controls select{width:100%;height:48px;border:1px solid #d8dae0;background:#fff;padding:0 13px;outline:none;border-radius:10px}.builder-controls input[type="text"]:focus,.builder-controls select:focus{border-color:#8c93a0}.two-col-control{display:grid;grid-template-columns:1fr 1fr;gap:10px}.select-wrap{position:relative}.color-picker-row{display:grid;grid-template-columns:80px 1fr;gap:12px;align-items:center}.color-picker-row input[type="color"]{width:80px;height:54px;border:0;border-radius:14px;padding:0;overflow:hidden;background:transparent;cursor:pointer}.color-swatch-preview{display:grid;grid-template-columns:repeat(4,1fr);height:54px;border-radius:14px;overflow:hidden;border:1px solid #d7d9df}.color-swatch-preview span:nth-child(1){background:var(--picker-primary,#315cff)}.color-swatch-preview span:nth-child(2){background:var(--picker-dark,#172a7a)}.color-swatch-preview span:nth-child(3){background:var(--picker-light,#dce3ff)}.color-swatch-preview span:nth-child(4){background:var(--picker-soft,#f2f5ff)}.tone-toggle{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}.tone-toggle button,.device-toggle button{border:1px solid #d8dae0;background:#fff;min-height:38px;border-radius:999px;font-size:10px;cursor:pointer}.tone-toggle button.active,.device-toggle button.active{background:#111;color:#fff;border-color:#111}.layout-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.layout-choice{border:1px solid #d8dae0;background:#fff;border-radius:12px;padding:8px;text-align:left;cursor:pointer}.layout-choice.active{border-color:#111;box-shadow:inset 0 0 0 1px #111}.layout-choice strong{font-size:10px;display:block;margin:6px 2px 2px}.layout-mini{height:53px;border-radius:7px;background:#eef0f4;display:grid;padding:6px;gap:5px}.layout-mini i{display:block;background:#bcc1ca;border-radius:3px}.mini-split{grid-template-columns:1fr 1fr}.mini-center{grid-template-rows:1fr 1fr}.mini-center i:first-child{width:70%;justify-self:center}.mini-poster{grid-template-rows:2fr 1fr}.mini-poster i:first-child{width:92%}.section-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px}.section-toggles label{font-size:11px;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #dddfe4;border-radius:9px;padding:10px}.builder-preview-wrap{min-width:0;background:#15171c;border-radius:23px;padding:14px;display:flex;flex-direction:column}.preview-toolbar{height:50px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#8e929b;font-size:9px;letter-spacing:.12em;padding:0 5px 0 10px}.preview-toolbar>div:first-child{display:flex;align-items:center;gap:8px}.status-dot{width:7px;height:7px;border-radius:50%;background:#71f1a3;box-shadow:0 0 14px rgba(113,241,163,.7)}.device-toggle{display:flex;gap:5px}.device-toggle button{border-color:#2c2f36;background:#1d2026;color:#969aa5;min-height:34px;padding:0 14px}.device-toggle button.active{background:#fff;color:#111;border-color:#fff}.builder-device{flex:1;background:#0c0e12;border-radius:17px;padding:13px;display:flex;align-items:stretch;justify-content:center;min-height:690px;overflow:auto;position:relative}.builder-site{--site-accent:#315cff;--site-accent-dark:#172a7a;--site-accent-light:#dce3ff;width:100%;min-width:650px;background:#0c1120;color:#fff;border-radius:11px;overflow:hidden;position:relative;transition:all .45s cubic-bezier(.2,.8,.2,1)}.site-nav{height:76px;padding:0 29px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1);position:relative;z-index:2}.site-nav strong{font-size:13px;letter-spacing:.01em}.site-nav div{display:flex;gap:22px;font-size:9px}.site-nav button,.site-actions button{border:0;background:var(--site-accent);color:#fff;padding:11px 15px;border-radius:999px;font-size:9px;font-weight:750}.site-hero{min-height:485px;padding:48px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;position:relative;background:radial-gradient(circle at 78% 24%,color-mix(in srgb,var(--site-accent) 28%,transparent),transparent 28%),linear-gradient(145deg,#0c1120,#11192b)}.site-copy{position:relative;z-index:2}.site-copy>p:first-child{font-size:9px;letter-spacing:.18em;color:color-mix(in srgb,var(--site-accent-light) 70%,#a5a7ae)}.site-copy h3{font-size:clamp(48px,5vw,78px);line-height:.9;letter-spacing:-.07em;margin:12px 0 18px;max-width:610px}.site-copy>p:nth-of-type(2){max-width:470px;color:#abb1be;line-height:1.6;font-size:13px}.site-actions{margin-top:28px;display:flex;gap:17px;align-items:center}.site-actions span{font-size:10px;color:#a4a9b4}.site-visual{position:relative;height:320px;border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--site-accent) 14%,#121727),#0b0d12);border:1px solid rgba(255,255,255,.08);overflow:hidden}.visual-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:130px;font-weight:900;letter-spacing:-.1em;color:var(--site-accent);text-shadow:0 0 45px color-mix(in srgb,var(--site-accent) 55%,transparent)}.visual-card{position:absolute;right:18px;bottom:18px;padding:14px 16px;border-radius:14px;background:rgba(11,14,20,.7);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px)}.visual-card small{display:block;font-size:7px;letter-spacing:.14em;color:#828895}.visual-card strong{display:block;font-size:15px;margin-top:4px}.site-sections{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.1)}.site-sections>div{min-height:105px;padding:22px;border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;justify-content:space-between}.site-sections small{font-size:8px;color:#78808d}.site-sections strong{font-size:16px}.preview-summary{display:flex;gap:8px;flex-wrap:wrap;padding:12px 4px 0}.preview-summary span{padding:8px 10px;border-radius:999px;background:#1e2127;color:#a5a9b1;font-size:9px}.builder-device.mobile .builder-site{width:390px;min-width:390px}.builder-device.mobile .site-nav{height:64px;padding:0 17px}.builder-device.mobile #siteNavLinks{display:none}.builder-device.mobile .site-hero{grid-template-columns:1fr;min-height:640px;padding:28px 22px;gap:28px}.builder-device.mobile .site-copy h3{font-size:54px}.builder-device.mobile .site-visual{height:240px}.builder-device.mobile .site-sections{grid-template-columns:1fr}.builder-device.mobile .site-sections>div{min-height:74px}.builder-site[data-layout="center"] .site-hero{grid-template-columns:1fr;text-align:center}.builder-site[data-layout="center"] .site-copy{max-width:780px;margin:auto}.builder-site[data-layout="center"] .site-copy>p:nth-of-type(2){margin-left:auto;margin-right:auto}.builder-site[data-layout="center"] .site-actions{justify-content:center}.builder-site[data-layout="center"] .site-visual{display:none}.builder-site[data-layout="poster"] .site-hero{grid-template-columns:1fr;align-items:end;min-height:590px;background:linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,.06)),radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--site-accent) 52%,#111),#0a0b0e 60%)}.builder-site[data-layout="poster"] .site-copy h3{font-size:clamp(70px,8vw,118px);max-width:1000px}.builder-site[data-layout="poster"] .site-visual{display:none}
.builder-site[data-mode="editorial"]{background:#f5efe6;color:#1d1915;font-family:Georgia,"Times New Roman",serif}.builder-site[data-mode="editorial"] .site-nav{border-color:#cbc1b5}.builder-site[data-mode="editorial"] .site-nav div,.builder-site[data-mode="editorial"] .site-nav button,.builder-site[data-mode="editorial"] .site-actions,.builder-site[data-mode="editorial"] .site-copy>p,.builder-site[data-mode="editorial"] .site-sections{font-family:Inter,sans-serif}.builder-site[data-mode="editorial"] .site-nav button,.builder-site[data-mode="editorial"] .site-actions button{background:#1d1915;border-radius:0}.builder-site[data-mode="editorial"] .site-hero{background:#f5efe6}.builder-site[data-mode="editorial"] .site-copy>p:first-child,.builder-site[data-mode="editorial"] .site-copy>p:nth-of-type(2),.builder-site[data-mode="editorial"] .site-actions span{color:#6b625b}.builder-site[data-mode="editorial"] .site-visual{background:var(--site-accent-light);border-color:#cfc6bc;border-radius:0}.builder-site[data-mode="editorial"] .visual-mark{color:var(--site-accent-dark);text-shadow:none;font-family:Georgia,serif;font-weight:400}.builder-site[data-mode="editorial"] .visual-card{background:#f5efe6;color:#1d1915;border-color:#cfc6bc;border-radius:0}.builder-site[data-mode="editorial"] .site-sections{border-color:#cbc1b5}.builder-site[data-mode="editorial"] .site-sections>div{border-color:#cbc1b5}
.builder-site[data-mode="precision"]{background:#fff;color:#111}.builder-site[data-mode="precision"] .site-nav{border-color:#e5e5e5}.builder-site[data-mode="precision"] .site-nav button,.builder-site[data-mode="precision"] .site-actions button{background:#111}.builder-site[data-mode="precision"] .site-hero{background:#fafafa}.builder-site[data-mode="precision"] .site-copy>p:first-child,.builder-site[data-mode="precision"] .site-copy>p:nth-of-type(2),.builder-site[data-mode="precision"] .site-actions span{color:#777}.builder-site[data-mode="precision"] .site-visual{background:linear-gradient(145deg,#fff,#eef1f6);border-color:#e1e4ea}.builder-site[data-mode="precision"] .visual-mark{color:var(--site-accent);text-shadow:0 16px 40px color-mix(in srgb,var(--site-accent) 24%,transparent)}.builder-site[data-mode="precision"] .visual-card{background:rgba(255,255,255,.86);color:#111;border-color:#ddd}.builder-site[data-mode="precision"] .site-sections{border-color:#e5e5e5}.builder-site[data-mode="precision"] .site-sections>div{border-color:#e5e5e5}.builder-site[data-mode="precision"] .site-sections small{color:#999}
.builder-site[data-mode="studio"]{background:#f2e8db;color:#111}.builder-site[data-mode="studio"] .site-nav{border-color:#111;border-bottom-width:2px}.builder-site[data-mode="studio"] .site-nav button,.builder-site[data-mode="studio"] .site-actions button{background:var(--site-accent);color:#111;border:2px solid #111;border-radius:0}.builder-site[data-mode="studio"] .site-hero{background:#f2e8db}.builder-site[data-mode="studio"] .site-copy h3{font-weight:950;letter-spacing:-.085em}.builder-site[data-mode="studio"] .site-copy>p:first-child,.builder-site[data-mode="studio"] .site-copy>p:nth-of-type(2),.builder-site[data-mode="studio"] .site-actions span{color:#403831}.builder-site[data-mode="studio"] .site-visual{border:2px solid #111;border-radius:0;background:var(--site-accent-light);box-shadow:14px 14px 0 #111}.builder-site[data-mode="studio"] .visual-mark{color:var(--site-accent-dark);text-shadow:none}.builder-site[data-mode="studio"] .visual-card{background:#f2e8db;color:#111;border:2px solid #111;border-radius:0}.builder-site[data-mode="studio"] .site-sections{border-color:#111;border-top-width:2px}.builder-site[data-mode="studio"] .site-sections>div{border-color:#111}
.builder-site[data-mode="executive"]{background:#13231d;color:#f0eadf}.builder-site[data-mode="executive"] .site-nav{border-color:#385247}.builder-site[data-mode="executive"] .site-nav button,.builder-site[data-mode="executive"] .site-actions button{background:#e7dcc5;color:#18211d}.builder-site[data-mode="executive"] .site-hero{background:linear-gradient(145deg,#18342a,#0e1c17)}.builder-site[data-mode="executive"] .site-copy h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.045em}.builder-site[data-mode="executive"] .site-copy>p:first-child,.builder-site[data-mode="executive"] .site-copy>p:nth-of-type(2),.builder-site[data-mode="executive"] .site-actions span{color:#a4b3aa}.builder-site[data-mode="executive"] .site-visual{background:#0f211a;border-color:#385247}.builder-site[data-mode="executive"] .visual-mark{color:#c7ad7d;text-shadow:none;font-family:Georgia,serif;font-weight:400}.builder-site[data-mode="executive"] .visual-card{background:#173126;border-color:#385247}.builder-site[data-mode="executive"] .site-sections{border-color:#385247}.builder-site[data-mode="executive"] .site-sections>div{border-color:#385247}
.builder-site[data-mode="impact"]{background:#ff5b37;color:#111}.builder-site[data-mode="impact"] .site-nav{border-color:#111;border-bottom-width:2px}.builder-site[data-mode="impact"] .site-nav button,.builder-site[data-mode="impact"] .site-actions button{background:#111;color:#fff;border-radius:0}.builder-site[data-mode="impact"] .site-hero{background:#ff5b37}.builder-site[data-mode="impact"] .site-copy h3{font-weight:950;text-transform:uppercase;line-height:.78;letter-spacing:-.09em}.builder-site[data-mode="impact"] .site-copy>p:first-child,.builder-site[data-mode="impact"] .site-copy>p:nth-of-type(2),.builder-site[data-mode="impact"] .site-actions span{color:#111}.builder-site[data-mode="impact"] .site-visual{background:var(--site-accent);border:2px solid #111;border-radius:0;box-shadow:16px 16px 0 #111}.builder-site[data-mode="impact"] .visual-mark{color:#111;text-shadow:none}.builder-site[data-mode="impact"] .visual-card{background:#e8ff43;color:#111;border:2px solid #111;border-radius:0}.builder-site[data-mode="impact"] .site-sections{border:2px solid #111;border-left:0;border-right:0}.builder-site[data-mode="impact"] .site-sections>div{border-color:#111}
.builder-site.tone-light:not([data-mode="editorial"]):not([data-mode="precision"]):not([data-mode="studio"]):not([data-mode="impact"]){background:#f7f8fb;color:#111}.builder-site.tone-light:not([data-mode="editorial"]):not([data-mode="precision"]):not([data-mode="studio"]):not([data-mode="impact"]) .site-hero{background:linear-gradient(145deg,#fff,var(--site-accent-light))}.builder-site.tone-light:not([data-mode="editorial"]):not([data-mode="precision"]):not([data-mode="studio"]):not([data-mode="impact"]) .site-copy>p:nth-of-type(2),.builder-site.tone-light:not([data-mode="editorial"]):not([data-mode="precision"]):not([data-mode="studio"]):not([data-mode="impact"]) .site-actions span{color:#656a74}.builder-site.tone-light:not([data-mode="editorial"]):not([data-mode="precision"]):not([data-mode="studio"]):not([data-mode="impact"]) .site-nav,.builder-site.tone-light:not([data-mode="editorial"]):not([data-mode="precision"]):not([data-mode="studio"]):not([data-mode="impact"]) .site-sections{border-color:#ddd}.builder-site.tone-light:not([data-mode="editorial"]):not([data-mode="precision"]):not([data-mode="studio"]):not([data-mode="impact"]) .site-sections>div{border-color:#ddd}
.handoff-section{display:grid;grid-template-columns:.82fr 1fr;gap:90px;align-items:start}.handoff-copy>p:not(.eyebrow){color:var(--muted);font-size:17px;line-height:1.65;max-width:560px}.handoff-preview-card{margin-top:34px;border:1px solid var(--line);background:#fff;padding:23px;border-radius:18px}.handoff-preview-card span{font-size:9px;letter-spacing:.14em;color:var(--muted)}.handoff-preview-card strong{display:block;font-size:21px;margin:10px 0 5px}.handoff-preview-card p{margin:0!important;font-size:12px!important}.lead-form{background:#fff;padding:32px;border-radius:24px;display:grid;grid-template-columns:1fr 1fr;gap:17px;box-shadow:0 16px 60px rgba(0,0,0,.06)}.lead-form label{display:flex;flex-direction:column;gap:9px;font-size:11px;font-weight:700}.lead-form input,.lead-form textarea{width:100%;border:1px solid var(--line);background:#fafafa;min-height:50px;padding:13px;outline:none;border-radius:10px}.lead-form textarea{resize:vertical}.lead-form input:focus,.lead-form textarea:focus{border-color:#8e94a0}.full-width{grid-column:1/-1}.form-status{margin:0;grid-column:1/-1;color:var(--muted)}.why-grid{margin-top:65px;display:grid;grid-template-columns:repeat(3,1fr)}.why-grid article{min-height:265px;padding:28px;border-top:1px solid var(--line);border-right:1px solid var(--line)}.why-grid article:last-child{border-right:0}.why-grid span{font-size:10px;color:var(--muted)}.why-grid h3{font-size:25px;letter-spacing:-.04em;margin-top:70px}.why-grid p{color:var(--muted);line-height:1.6;max-width:320px}.pricing-section{display:grid;grid-template-columns:1fr .78fr;gap:100px;align-items:start}.pricing-copy>p:last-child{max-width:620px;color:var(--muted);font-size:17px;line-height:1.65}.pricing-card{background:#0d0e11;color:#fff;padding:42px;border-radius:var(--radius)}.pricing-label{font-size:10px;letter-spacing:.14em;color:#858995}.price{margin:28px 0;display:flex;align-items:end;gap:12px}.price span{font-size:78px;letter-spacing:-.08em;font-weight:780}.price small{margin-bottom:13px;color:#8e9299}.pricing-card ul{list-style:none;padding:0;margin:0 0 32px}.pricing-card li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.13)}.pricing-card .button{width:100%;background:#fff;color:#111}.pricing-note{font-size:11px;line-height:1.5;color:#888}.ownership-section{min-height:610px;background:#0d0e11;color:#fff;width:100%;padding:120px max(24px,calc((100% - 1440px)/2));display:flex;flex-direction:column;justify-content:center}.ownership-section p:last-child{font-size:18px;color:#858995}.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}.reveal.visible{opacity:1;transform:none}footer{width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:42px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:30px;align-items:center;font-size:12px}footer p{margin:0;color:var(--muted)}footer div{display:flex;gap:20px}.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}.lead-form button:disabled{opacity:.55;cursor:wait;transform:none}.form-status.success{color:#17733a}.form-status.error{color:#b42318}
@media(max-width:1120px){.nav-links{display:none}.hero,.builder-intro,.handoff-section,.pricing-section,.split-heading{grid-template-columns:1fr}.hero{gap:70px}.mode-showcase{grid-template-columns:1fr}.mode-rail{position:static;display:grid;grid-template-columns:repeat(3,1fr)}.builder-shell{grid-template-columns:1fr}.builder-controls{max-height:none}.builder-device{min-height:650px}.why-grid{grid-template-columns:1fr}.why-grid article{border-right:0}.why-grid h3{margin-top:30px}}
@media(max-width:720px){.nav-actions>.button:not(.client-login){display:none}.nav-actions .client-login{min-height:40px;padding:0 14px;font-size:12px}.nav,.hero,.modes-section,.builder-section,.handoff-section,.why-section,.pricing-section,footer{width:min(100% - 30px,var(--max))}.nav{min-height:72px}.nav>.button{display:none}.hero{padding:78px 0 92px;min-height:0}.hero h1{font-size:66px}.hero-description{font-size:16px}.hero-browser{transform:none;padding:7px;border-radius:20px}.hero-demo{min-height:480px;padding:28px}.hero-demo-copy{left:28px;bottom:32px}.hero-demo-copy h2{font-size:51px}.floating-card{display:none}.browser-address,.browser-status{display:none}.modes-section,.builder-section,.handoff-section,.why-section,.pricing-section{padding:90px 0}.mode-rail{grid-template-columns:1fr 1fr}.mode-tab{min-height:90px}.mode-stage{padding:16px;border-radius:22px;min-height:0}.mode-stage-header{align-items:flex-start;flex-direction:column;gap:8px}.mode-browser{padding:6px}.mode-preview{height:580px}.preview-nav div{display:none}.preview-hero{grid-template-columns:1fr;padding:28px;height:480px}.preview-copy h3{font-size:56px}.preview-art{display:none}.preview-strip{grid-template-columns:1fr 1fr}.mode-stage-footer{align-items:flex-start;flex-direction:column}.builder-shell{padding:8px;border-radius:24px}.builder-controls{border-radius:18px}.two-col-control{grid-template-columns:1fr}.builder-preview-wrap{border-radius:18px;padding:8px}.builder-device{min-height:620px;padding:8px;justify-content:flex-start}.builder-site{min-width:760px}.builder-device.mobile{justify-content:center}.layout-options{grid-template-columns:1fr 1fr 1fr}.section-toggles{grid-template-columns:1fr}.lead-form{grid-template-columns:1fr;padding:22px}.full-width{grid-column:auto}.section-heading h2,.builder-intro h2,.handoff-copy h2,.pricing-copy h2,.ownership-section h2{font-size:50px}.ownership-section{min-height:480px;padding-top:90px;padding-bottom:90px}footer{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.button,.mode-tab,.mode-stage,.mode-preview,.builder-site{transition:none}.floating-card{animation:none}}

/* SiteRemade brand mark */
.brand-logo{display:inline-flex;align-items:center;justify-content:center;width:82px;height:72px;flex:0 0 auto}
.brand-logo img{display:block;width:76px;height:68px;object-fit:contain}
footer .footer-logo{width:78px;height:68px}
footer .footer-logo img{width:72px;height:64px}
@media(max-width:720px){.brand-logo{width:68px;height:60px}.brand-logo img{width:62px;height:56px}}


/* ===== Full-colour customizer ===== */
.full-color-grid{display:grid;grid-template-columns:1fr;gap:9px}
.mini-color-control{display:block;background:#fff;border:1px solid #dddfe4;border-radius:12px;padding:11px 12px}
.mini-color-control>span{display:block;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:#686c75;font-weight:800;margin-bottom:9px}
.mini-color-control>div{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:10px}
.mini-color-control input[type="color"]{width:54px;height:40px;padding:0;border:0;border-radius:9px;overflow:hidden;background:transparent;cursor:pointer}
.mini-color-control output{font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#3f434a}
.color-swatch-preview{margin-top:10px}
.reset-colors{width:100%;margin-top:9px;min-height:38px;border:1px solid #d8dae0;background:#fff;border-radius:999px;font-size:10px;cursor:pointer}
.reset-colors:hover{border-color:#111}

/* The chosen colours now control the entire preview, not just accents. */
.builder-site{
  background:var(--site-bg)!important;
  color:var(--site-text)!important;
}
.builder-site .site-nav{
  background:var(--site-bg)!important;
  color:var(--site-text)!important;
  border-color:color-mix(in srgb,var(--site-text) 18%,transparent)!important;
}
.builder-site .site-nav strong,
.builder-site .site-nav div,
.builder-site .site-copy h3,
.builder-site .site-sections strong{
  color:var(--site-text)!important;
}
.builder-site .site-hero{
  background:
    radial-gradient(circle at 78% 24%,color-mix(in srgb,var(--site-accent) 26%,transparent),transparent 30%),
    linear-gradient(145deg,var(--site-bg-light),var(--site-bg))!important;
  color:var(--site-text)!important;
}
.builder-site .site-copy>p:first-child{color:color-mix(in srgb,var(--site-accent) 78%,var(--site-text))!important}
.builder-site .site-copy>p:nth-of-type(2),
.builder-site .site-actions span{color:var(--site-muted)!important}
.builder-site .site-nav button,
.builder-site .site-actions button{
  background:var(--site-accent)!important;
  color:var(--site-text)!important;
}
.builder-site .site-visual{
  background:linear-gradient(145deg,color-mix(in srgb,var(--site-accent) 18%,var(--site-bg-light)),var(--site-bg-dark))!important;
  border-color:color-mix(in srgb,var(--site-text) 16%,transparent)!important;
}
.builder-site .visual-mark{color:var(--site-accent)!important}
.builder-site .visual-card{
  background:color-mix(in srgb,var(--site-bg) 82%,transparent)!important;
  color:var(--site-text)!important;
  border-color:color-mix(in srgb,var(--site-text) 18%,transparent)!important;
}
.builder-site .visual-card small,
.builder-site .site-sections small{color:var(--site-muted)!important}
.builder-site .site-sections{
  background:var(--site-bg)!important;
  border-color:color-mix(in srgb,var(--site-text) 18%,transparent)!important;
}
.builder-site .site-sections>div{border-color:color-mix(in srgb,var(--site-text) 18%,transparent)!important}

/* V8.2: real in-preview page navigation -- minimum necessary UI, matching
   the existing decorative nav labels it replaces once a direction genuinely
   has more than one page. */
.site-nav-link{
  background:none!important;border:0;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;opacity:.72;transition:opacity .2s ease;
}
.site-nav-link:hover{opacity:1}
.site-nav-link.active{opacity:1;font-weight:800;text-decoration:underline;text-underline-offset:4px}
.site-brand-lockup{cursor:pointer}
.site-page-header{
  padding:56px 48px 36px;
  background:linear-gradient(145deg,var(--site-bg-light),var(--site-bg))!important;
  color:var(--site-text)!important;
}
.site-page-header-kicker{
  font-size:9px;letter-spacing:.18em;margin:0 0 10px;text-transform:uppercase;
  color:color-mix(in srgb,var(--site-accent) 78%,var(--site-text))!important;
}
.site-page-header-title{font-size:clamp(32px,3.6vw,48px);line-height:1.04;letter-spacing:-.04em;margin:0 0 10px}
.site-page-header-sub{max-width:560px;color:var(--site-muted)!important;line-height:1.6;font-size:13px;margin:0}
.site-section-intro{color:var(--site-muted)!important;line-height:1.6;font-size:13px;margin:6px 0 18px;max-width:560px}
.builder-device.mobile .site-page-header{padding:32px 22px 24px}

/* Keep each style's personality while letting the colours fully change. */
.builder-site[data-mode="editorial"] .site-nav button,
.builder-site[data-mode="editorial"] .site-actions button,
.builder-site[data-mode="studio"] .site-nav button,
.builder-site[data-mode="studio"] .site-actions button,
.builder-site[data-mode="impact"] .site-nav button,
.builder-site[data-mode="impact"] .site-actions button{color:var(--site-text)!important}

.builder-site[data-mode="studio"] .site-visual,
.builder-site[data-mode="impact"] .site-visual{
  box-shadow:14px 14px 0 color-mix(in srgb,var(--site-text) 92%,transparent)!important;
  border-color:var(--site-text)!important;
}
.builder-site[data-mode="studio"] .site-nav,
.builder-site[data-mode="studio"] .site-sections,
.builder-site[data-mode="impact"] .site-nav,
.builder-site[data-mode="impact"] .site-sections{border-color:var(--site-text)!important}
.builder-site[data-mode="studio"] .site-sections>div,
.builder-site[data-mode="impact"] .site-sections>div{border-color:var(--site-text)!important}

/* Fix crushed / overlapping headlines. */
.builder-site .site-copy h3{
  line-height:.96!important;
  letter-spacing:-.045em!important;
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
}
.builder-site[data-mode="studio"] .site-copy h3{
  font-size:clamp(46px,4.65vw,72px)!important;
  line-height:.94!important;
  letter-spacing:-.05em!important;
}
.builder-site[data-mode="impact"] .site-copy h3{
  font-size:clamp(48px,5.15vw,82px)!important;
  line-height:.88!important;
  letter-spacing:-.055em!important;
}
.builder-site[data-layout="poster"] .site-copy h3{
  font-size:clamp(62px,7vw,104px)!important;
  line-height:.91!important;
  letter-spacing:-.05em!important;
}
.builder-device.mobile .builder-site .site-copy h3{
  font-size:46px!important;
  line-height:.96!important;
  letter-spacing:-.04em!important;
}


/* ===== Business logo upload / preview ===== */
.logo-uploader{border:1px solid #d8dae0;background:#fff;border-radius:14px;padding:12px}
.logo-uploader>input{display:none}
.logo-upload-preview{display:grid;grid-template-columns:92px 1fr;gap:13px;align-items:center}
.logo-preview-box{width:92px;height:72px;border:1px dashed #c9ccd3;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#f7f8fa;cursor:pointer;overflow:hidden}
.logo-preview-box span{font-size:10px;color:#8a8e97}
.logo-preview-box img{display:none;max-width:78px;max-height:54px;width:auto;height:auto;object-fit:contain}
.logo-preview-box img.active{display:block}
.logo-upload-copy{min-width:0}
.logo-upload-copy strong{display:block;font-size:12px;margin-bottom:4px}
.logo-upload-copy small{display:block;font-size:10px;line-height:1.4;color:#747983}
.logo-upload-actions{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.logo-upload-button,.logo-remove-button{min-height:34px;border-radius:999px;padding:0 12px;font-size:9px;cursor:pointer}
.logo-upload-button{border:0;background:#111;color:#fff}
.logo-remove-button{border:1px solid #d8dae0;background:#fff;color:#444}

/* Clean logo placement inside every website style. */
.site-brand-lockup{display:flex;align-items:center;min-width:0}
.site-brand-lockup #siteLogo{display:none;max-width:150px;max-height:38px;width:auto;height:auto;object-fit:contain;object-position:left center}
.site-brand-lockup #siteLogo.active{display:block}
.site-brand-lockup #siteBusiness.logo-active{display:none}

/* Give logos a little more breathing room in styles with larger navigation. */
.builder-site[data-mode="editorial"] .site-brand-lockup #siteLogo.active,
.builder-site[data-mode="executive"] .site-brand-lockup #siteLogo.active{max-height:40px;max-width:160px}
.builder-site[data-mode="studio"] .site-brand-lockup #siteLogo.active,
.builder-site[data-mode="impact"] .site-brand-lockup #siteLogo.active{max-height:36px;max-width:145px}

/* Mobile stays balanced instead of letting a wide logo take over the header. */
.builder-device.mobile .site-brand-lockup #siteLogo.active{max-width:112px;max-height:32px}

@media(max-width:680px){
  .logo-upload-preview{grid-template-columns:76px 1fr}
  .logo-preview-box{width:76px;height:64px}
  .logo-preview-box img{max-width:64px;max-height:46px}
}

/* ========================================================================== */
/* MOBILE RESPONSIVE SAFETY LAYER                                             */
/* Added only to make the existing SiteRemade interface usable on phones.     */
/* No existing desktop rules, components, content, or functionality removed. */
/* ========================================================================== */

@media (max-width: 720px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  body { min-width:0; }
  img, svg, video, canvas { max-width:100%; }

  .nav,
  .hero,
  .modes-section,
  .builder-section,
  .handoff-section,
  .why-section,
  .pricing-section,
  footer { width:calc(100% - 30px); max-width:100%; }

  .nav { gap:12px; }
  .brand-logo { flex:0 0 auto; }

  .hero { grid-template-columns:minmax(0,1fr); gap:48px; }
  .hero-copy,
  .hero-machine { min-width:0; width:100%; }
  .hero h1 { font-size:clamp(49px,14.5vw,66px); line-height:.9; overflow-wrap:break-word; }
  .hero-description { max-width:100%; }
  .hero-actions { width:100%; }
  .hero-actions .button { min-width:0; }
  .hero-machine { overflow:hidden; }
  .hero-browser { width:100%; max-width:100%; }
  .hero-demo { min-width:0; width:100%; min-height:440px; }
  .hero-demo-copy { right:24px; max-width:calc(100% - 52px); }
  .hero-demo-copy h2 { font-size:clamp(38px,12vw,51px); overflow-wrap:break-word; }

  .split-heading,
  .builder-intro,
  .handoff-section,
  .pricing-section { grid-template-columns:minmax(0,1fr); gap:36px; }
  .section-heading h2,
  .builder-intro h2,
  .handoff-copy h2,
  .pricing-copy h2,
  .ownership-section h2 { font-size:clamp(42px,13vw,50px); overflow-wrap:break-word; }

  .mode-showcase { grid-template-columns:minmax(0,1fr); width:100%; min-width:0; }
  .mode-rail { grid-template-columns:1fr 1fr; width:100%; min-width:0; }
  .mode-tab { min-width:0; padding:16px 12px; }
  .mode-tab strong,
  .mode-tab small { min-width:0; overflow-wrap:anywhere; }
  .mode-stage-wrap,
  .mode-stage,
  .mode-browser,
  .mode-preview { width:100%; min-width:0; max-width:100%; }
  .mode-stage { overflow:hidden; }
  .mode-stage-header > * { min-width:0; }
  .mode-stage-header p { max-width:100%; }
  .mode-window-bar em { max-width:62%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mode-preview { height:auto; min-height:520px; }
  .preview-nav { height:64px; padding:0 18px; }
  .preview-nav strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .preview-nav button { flex:0 0 auto; }
  .preview-hero { height:auto; min-height:400px; padding:24px 20px; }
  .preview-copy { min-width:0; }
  .preview-copy h3 { font-size:clamp(42px,13vw,56px); overflow-wrap:break-word; }
  .preview-sub { max-width:100%; }
  .preview-cta { flex-wrap:wrap; }
  .preview-strip { height:auto; min-height:61px; }
  .preview-strip span { min-width:0; min-height:52px; padding:10px 12px; }

  .builder-shell { width:100%; min-width:0; grid-template-columns:minmax(0,1fr); }
  .builder-controls,
  .builder-preview-wrap { width:100%; min-width:0; max-width:100%; }
  .builder-controls { padding:18px; overflow:visible; }
  .builder-progress { overflow:hidden; }
  .builder-progress span { min-width:0; font-size:7px; letter-spacing:.07em; }
  .control-block,
  .two-col-control,
  .full-color-grid,
  .layout-options,
  .section-toggles { min-width:0; }
  .builder-controls input[type="text"],
  .builder-controls select,
  .lead-form input,
  .lead-form textarea { font-size:16px; } /* prevents iOS focus zoom */
  .layout-choice { min-width:0; }
  .layout-choice strong { white-space:nowrap; }

  .preview-toolbar { height:auto; min-height:50px; padding:8px 5px 8px 8px; flex-wrap:wrap; }
  .preview-toolbar > div:first-child { min-width:0; }
  .device-toggle { margin-left:auto; }

  /* The old mobile rule intentionally kept a 760px desktop preview. On an
     actual phone that forced the whole builder sideways. This only changes
     the phone viewport; the Desktop/Mobile preview toggle still works. */
  .builder-device,
  .builder-device.mobile,
  .builder-device.tablet { width:100%; min-width:0; max-width:100%; min-height:0; padding:7px; overflow:hidden; justify-content:center; }
  .builder-site,
  .builder-device.mobile .builder-site,
  .builder-device.tablet .builder-site { width:100%!important; min-width:0!important; max-width:100%; }

  .builder-site .site-nav { height:62px; padding:0 14px; gap:10px; }
  .builder-site .site-nav > div:nth-child(2) { display:none; }
  .builder-site .site-nav button { padding:10px 14px; font-size:13px; min-height:40px; white-space:nowrap; } /* was 8px: unreadable on a phone */
  .site-brand-lockup { max-width:55%; overflow:hidden; }
  .site-brand-lockup #siteBusiness { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
  .site-brand-lockup #siteLogo.active { max-width:104px; max-height:30px; }

  .builder-site .site-hero,
  .builder-site[data-layout="split"] .site-hero { min-height:0; grid-template-columns:minmax(0,1fr)!important; padding:28px 20px!important; gap:24px; }
  .builder-site .site-copy { min-width:0; max-width:100%; }
  .builder-site .site-copy h3,
  .builder-site[data-mode="studio"] .site-copy h3,
  .builder-site[data-mode="impact"] .site-copy h3,
  .builder-site[data-layout="poster"] .site-copy h3 { font-size:clamp(38px,12vw,48px)!important; line-height:.94!important; letter-spacing:-.045em!important; max-width:100%; overflow-wrap:break-word; }
  .builder-site .site-copy > p:nth-of-type(2) { max-width:100%; }
  .builder-site .site-actions { flex-wrap:wrap; gap:12px; }
  .builder-site .site-visual { width:100%; height:230px; min-height:0; }
  .builder-site .visual-mark { font-size:76px; }
  .builder-site .visual-card { right:12px; bottom:12px; }

  .builder-site[data-layout="center"] .site-hero,
  .builder-site[data-layout="poster"] .site-hero { grid-template-columns:minmax(0,1fr)!important; }
  .builder-site[data-layout="center"] .site-copy { max-width:100%; }
  .builder-site[data-layout="poster"] .site-hero { min-height:500px; }

  .builder-site .site-sections { grid-template-columns:1fr!important; }
  .builder-site .site-sections > div { min-height:78px; border-right:0!important; border-bottom:1px solid color-mix(in srgb,var(--site-text) 18%,transparent); }
  .builder-site .site-sections > div:last-child { border-bottom:0; }

  .preview-summary { flex-wrap:wrap; gap:7px; }
  .preview-summary span { min-width:0; }

  .handoff-copy,
  .lead-form,
  .pricing-card { min-width:0; width:100%; }
  .handoff-preview-card { overflow:hidden; }
  .handoff-preview-card strong,
  .handoff-preview-card p { overflow-wrap:anywhere; }
  .lead-form { grid-template-columns:minmax(0,1fr); }
  .lead-form .full-width,
  .form-status { grid-column:1; }
  .lead-form .button { width:100%; }

  .why-grid { grid-template-columns:minmax(0,1fr); }
  .why-grid article { min-width:0; padding:24px 0; }
  .pricing-card { padding:30px 24px; }
  .price { flex-wrap:wrap; }
  .price span { font-size:clamp(58px,18vw,78px); }

  .ownership-section { padding-left:20px; padding-right:20px; }
  footer { gap:18px; }
  footer div { flex-wrap:wrap; }

  /* Mobile QA pass: readable builder text on phones -- the interface's labels, notes and buttons were 9-11px.
     (The pictured browser mock at the top of the page is an illustration and keeps its miniature type.) */
  .control-label, .editor-hero-select-label, .hero-layer-focal-label, .editor-page-tab, output { font-size:12px; }
  .asset-block-note, .generator-ai-hint, .editor-home-note, .account-save-status, .example-chip, .hero-layer-replace, .starter-replace { font-size:12.5px; }
  :is(.builder-controls, .account-panel, .section-toggles, .editor-control-block) label:not(.control-label),
  .tone-toggle button, .device-toggle button, .reset-colors, .asset-add-button, .logo-upload-button, .link-button, .client-login, .builder-section summary { font-size:13px; }
  footer div { gap:4px 18px; }
}

/* Mobile QA pass: text fields of 16px or more on tablets and touch screens -- iOS zooms the whole page when a smaller
   field gets focus. The builder's fields, the auth gate, the Creative studio, and the forms on generated websites. */
@media (max-width: 1024px), (pointer: coarse) {
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea) { font-size:16px!important; }

  /* Finger-sized controls (44px, Apple HIG / WCAG 2.5.5) across the builder's own interface on phones and tablets --
     the generator box, example chips, editor (reorder arrows included), account panel, purchase and handoff, the auth
     gate, the Creative studio. The generated website preview (.builder-site) keeps the website's own design; the
     editor's own Replace buttons laid over it are controls, so they are included. */
  :is(.nav, .hero, .builder-section, .purchase-section, .handoff-section, footer, .generation-gate-overlay, #creativeStudio) :is(button, select, summary, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file])):not(.builder-site *),
  .builder-site :is(.starter-replace, .hero-layer-replace) { min-height:44px; }
  [data-action$="-up"], [data-action$="-down"] { min-width:44px; }
  :is(.nav, .hero, .builder-section, .purchase-section, .handoff-section, footer) :is(.link-button, .client-login, footer a):not(.builder-site *) { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; }

  /* Generated websites on tablets and phones: the site's small print was sized for the builder's scaled-down preview
     frame (9px buttons -- the hero's .hero-cta-btn 13px lost to .site-actions button 9px -- 11px form labels and
     card text). Real devices get readable sizes; the desktop design is unchanged. */
  .builder-site .site-actions :is(button, a) { font-size:14px; }
  .builder-site .module-field label { font-size:13px; }
  .builder-site :is(.service-card, .feature-card, .icon-led-row-body) p { font-size:13px; }
  .builder-site .site-nav-link { font-size:13px; }
}

@media (max-width: 430px) {
  .nav,
  .hero,
  .modes-section,
  .builder-section,
  .handoff-section,
  .why-section,
  .pricing-section,
  footer { width:calc(100% - 24px); }

  .hero { padding-top:56px; padding-bottom:72px; }
  .hero h1 { font-size:clamp(46px,14vw,58px); }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .hero-actions .button { width:100%; }
  .hero-meta { gap:10px 16px; }
  .hero-meta span+span:before { margin-right:16px; }
  .hero-demo { min-height:410px; padding:20px; }
  .hero-demo-copy { left:20px; right:20px; bottom:24px; max-width:none; }
  .hero-demo-actions { flex-wrap:wrap; }

  .modes-section,
  .builder-section,
  .handoff-section,
  .why-section,
  .pricing-section { padding:72px 0; }
  .mode-showcase,
  .builder-shell { margin-top:44px; }
  .mode-rail { grid-template-columns:1fr; }
  .mode-tab { min-height:78px; }
  .mode-stage { padding:12px; border-radius:18px; }
  .mode-stage-header strong { font-size:24px; }
  .mode-preview { min-height:500px; }
  .preview-nav { padding:0 14px; }
  .preview-nav button { padding:9px 10px; }
  .preview-hero { min-height:385px; padding:22px 16px; }
  .preview-copy h3 { font-size:clamp(39px,13vw,50px); }
  .preview-strip { grid-template-columns:1fr 1fr; }

  .builder-shell { padding:6px; border-radius:20px; }
  .builder-controls { padding:15px; border-radius:15px; }
  .builder-preview-wrap { padding:6px; border-radius:15px; }
  .builder-progress { grid-template-columns:repeat(2,1fr); gap:8px 4px; }
  .layout-options { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .layout-choice { padding:5px; }
  .layout-mini { height:45px; padding:5px; }
  .layout-choice strong { font-size:9px; }
  .logo-upload-preview { grid-template-columns:64px minmax(0,1fr); }
  .logo-preview-box { width:64px; height:60px; }
  .logo-preview-box img { max-width:54px; max-height:42px; }
  .logo-upload-actions { flex-direction:column; align-items:stretch; }
  .logo-upload-button,
  .logo-remove-button { width:100%; }

  .preview-toolbar { align-items:flex-start; }
  .device-toggle { width:100%; margin:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); } /* Desktop / Tablet / Mobile on one row */
  .device-toggle button { width:100%; }
  .builder-site .site-nav { padding:0 11px; }
  .builder-site .site-nav button { padding:8px 12px; }
  .builder-site .site-hero,
  .builder-site[data-layout="split"] .site-hero { padding:24px 16px!important; }
  .builder-site .site-copy h3,
  .builder-site[data-mode="studio"] .site-copy h3,
  .builder-site[data-mode="impact"] .site-copy h3,
  .builder-site[data-layout="poster"] .site-copy h3 { font-size:clamp(34px,11.5vw,44px)!important; }
  .builder-site .site-actions { align-items:flex-start; flex-direction:column; }
  .builder-site .site-visual { height:205px; }
  .builder-site[data-layout="poster"] .site-hero { min-height:455px; }

  .lead-form { padding:18px; }
  .pricing-card { padding:26px 20px; }
  .price { gap:8px; }
  footer { padding:30px 0; }
}


/* ==========================================================
   SAFARI / MOBILE REVEAL FAILSAFE
   Keeps all existing SiteRemade code and animation behavior
   untouched on desktop. On phones/tablets, content is never
   allowed to remain permanently hidden if IntersectionObserver
   or the page script is delayed/blocked by Safari.
   ========================================================== */
@media (max-width: 720px) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* Mobile/tablet landing-page hardening */
html,body{max-width:100%;overflow-x:hidden}
@media(max-width:900px){
  .nav,.hero,.modes-section,.builder-section,.handoff-section,.why-section,.pricing-section,footer{width:min(100% - 28px,var(--max))}
  .hero{gap:48px;padding-top:62px}
  .hero h1{font-size:clamp(54px,9vw,82px)}
  .hero-machine{min-width:0}
  .mode-showcase{gap:16px}
  .mode-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
  .builder-shell{grid-template-columns:1fr}
  .builder-preview-wrap{min-width:0}
  .builder-device{min-width:0;width:100%;overflow:hidden}
  .handoff-section{gap:30px}
}
@media(max-width:720px){
  .nav{width:calc(100% - 20px);min-height:64px;padding:0 2px}
  .brand-logo{width:56px;height:52px}
  .brand-logo img{width:52px;height:48px}
  .nav-actions{gap:6px}
  .nav-actions .client-login{min-height:44px;padding:0 12px;font-size:13px}
  .hero,.modes-section,.builder-section,.handoff-section,.why-section,.pricing-section,footer{width:calc(100% - 22px)}
  .hero{padding:56px 0 64px;gap:36px}
  .hero-copy{text-align:left}
  .hero h1{font-size:clamp(46px,14vw,62px);line-height:.92;letter-spacing:-.055em}
  .hero h1 span{display:block}
  .hero-description{font-size:14px;line-height:1.6}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:9px}
  .hero-actions .button{width:100%;justify-content:center}
  .hero-meta{display:grid;grid-template-columns:1fr;gap:7px}
  .hero-browser{padding:5px;border-radius:16px}
  .browser-top{padding:8px 10px}
  .hero-demo{min-height:340px;padding:18px}
  .hero-demo-copy{left:18px;right:18px;bottom:22px}
  .hero-demo-copy h2{font-size:clamp(35px,11vw,46px);line-height:.94}
  .hero-demo-actions{flex-wrap:wrap;gap:8px}
  .modes-section,.builder-section,.handoff-section,.why-section,.pricing-section{padding:66px 0}
  .split-heading{gap:16px}
  .section-heading h2,.builder-intro h2,.handoff-copy h2,.pricing-copy h2,.ownership-section h2{font-size:clamp(38px,11vw,48px);line-height:.98}
  .mode-rail{display:flex;overflow-x:auto;gap:8px;padding-bottom:4px;scroll-snap-type:x proximity;scrollbar-width:none}
  .mode-rail::-webkit-scrollbar{display:none}
  .mode-tab{flex:0 0 155px;min-height:82px;scroll-snap-align:start;padding:12px}
  .mode-stage{padding:10px;border-radius:18px}
  .mode-stage-header{padding:4px 3px 10px}
  .mode-browser{padding:4px;border-radius:14px}
  .mode-preview{height:390px}
  .preview-nav{padding:12px 14px}
  .preview-nav strong{font-size:10px}
  .preview-nav button{padding:8px 10px;font-size:8px}
  .preview-hero{height:305px;padding:20px}
  .preview-copy h3{font-size:clamp(38px,11vw,48px)}
  .preview-copy .preview-sub{font-size:11px;max-width:260px}
  .preview-strip{grid-template-columns:1fr 1fr;font-size:8px}
  .mode-stage-footer{gap:12px}
  .mode-stage-footer .button{width:100%;justify-content:center}
  .builder-shell{padding:0;background:transparent;border:0}
  .builder-controls,.builder-preview-wrap{border-radius:18px}
  .builder-controls{padding:16px}
  .builder-progress{overflow-x:auto;gap:12px;scrollbar-width:none}
  .builder-progress::-webkit-scrollbar{display:none}
  .builder-progress span{white-space:nowrap}
  .layout-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .layout-choice{min-width:0;padding:9px 6px}
  .logo-upload-preview{grid-template-columns:72px 1fr}
  .logo-preview-box{width:72px;height:62px}
  .full-color-grid{grid-template-columns:1fr}
  .builder-preview-wrap{padding:7px}
  .preview-toolbar{gap:8px;align-items:flex-start;flex-direction:column}
  .device-toggle{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} /* Desktop / Tablet / Mobile on one row */
  .device-toggle button{width:100%}
  .builder-device{min-height:0;padding:0;display:block;overflow:hidden;border-radius:14px}
  .builder-site{min-width:0!important;width:100%!important;transform:none!important;border-radius:12px}
  .builder-device:not(.mobile):not(.tablet) .builder-site{width:760px!important;transform:scale(calc((100vw - 40px)/760))!important;transform-origin:top left!important;margin-bottom:calc(-1 * (760px - (100vw - 40px)) * .45)}
  .builder-device.mobile{display:flex;justify-content:center;padding:8px}
  .builder-device.mobile .builder-site{width:360px!important;max-width:100%!important;min-width:0!important}
  .preview-summary{display:flex;overflow-x:auto;gap:7px;scrollbar-width:none}
  .preview-summary::-webkit-scrollbar{display:none}
  .preview-summary span{flex:0 0 auto}
  .handoff-section{grid-template-columns:1fr}
  .lead-form{padding:17px;border-radius:18px}
  .lead-form input,.lead-form textarea,.lead-form select{font-size:16px}
  .why-grid{grid-template-columns:1fr}
  .why-grid article{padding:24px 0}
  .pricing-section{gap:24px}
}
@media(max-width:430px){
  .nav-actions .client-login{padding:0 12px;font-size:13px} /* was 9px */
  .hero{padding-top:42px}
  .hero h1{font-size:clamp(42px,13.5vw,54px)}
  .hero-demo{min-height:300px}
  .hero-demo-copy h2{font-size:36px}
  .mode-tab{flex-basis:142px}
  .mode-preview{height:350px}
  .preview-hero{height:270px;padding:16px}
  .preview-copy h3{font-size:38px}
  .layout-options{grid-template-columns:1fr}
  .logo-upload-preview{grid-template-columns:1fr}
  .logo-preview-box{width:100%;height:86px}
  .builder-controls{padding:13px}
}


/* Mobile Client Login tap hardening */
.client-login{
  position:relative;
  z-index:50;
  pointer-events:auto!important;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}
@media(max-width:720px){
  .nav{isolation:isolate;overflow:visible}
  .nav-actions{position:relative;z-index:40;pointer-events:auto}
  .nav-actions .client-login{
    display:inline-flex!important;
    min-width:94px;
    min-height:42px;
    padding:0 14px;
    pointer-events:auto!important;
    transform:none!important;
  }
  .nav-actions .client-login:hover,
  .nav-actions .client-login:active{
    transform:none!important;
    box-shadow:none;
  }
}


/* Mobile scroll-performance pass */
@media(max-width:720px){
  /* Do not keep the entire long landing page rendered in memory at once. */
  .modes-section,
  .builder-section,
  .handoff-section,
  .why-section,
  .pricing-section,
  .ownership-section,
  footer{
    content-visibility:auto;
    contain-intrinsic-size:auto 900px;
  }

  /* Mobile reveal should not create extra compositing work while scrolling. */
  .reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  /* Expensive effects removed only on phones. */
  .page-glow{
    display:none!important;
  }
  .hero-browser,
  .mode-browser,
  .builder-shell,
  .pricing-card{
    box-shadow:none!important;
  }
  .art-stat,
  .floating-card{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .art-core,
  .status-dot{
    box-shadow:none!important;
  }

  /* Avoid animating huge preview surfaces while scrolling. */
  .mode-stage,
  .mode-preview,
  .builder-site,
  .builder-site *,
  .button,
  .mode-tab{
    transition:none!important;
  }

  /* Keep the builder isolated so style changes don't repaint the whole page. */
  .builder-shell,
  .builder-preview-wrap,
  .builder-device,
  .builder-site,
  .mode-stage,
  .mode-preview{
    contain:layout paint;
  }

  /* Large background grids are visually minor but costly on mobile. */
  .hero-demo-grid,
  .visual-grid{
    background-size:56px 56px;
    opacity:.55;
  }
}
@media(max-width:430px){
  .modes-section,
  .builder-section,
  .handoff-section,
  .why-section,
  .pricing-section,
  .ownership-section,
  footer{
    contain-intrinsic-size:auto 760px;
  }
}


/* Mobile builder order: preview first, options second */
@media(max-width:720px){
  .builder-shell{display:flex!important;flex-direction:column!important}
  .builder-preview-wrap{order:1}
  .builder-controls{order:2}
}

/* ==========================================================================
   GENERATOR V2 -- hero generator input, generation progress, refine lock,
   and the new refinement controls (tone / suggestions / regenerate).
   Additive only: nothing above this block is modified.
   ========================================================================== */

/* ---- Hero generator form ---- */
.generator-form{margin-top:36px;max-width:600px}
.generator-label{display:block;font-size:11px;letter-spacing:.13em;font-weight:850;margin-bottom:10px;color:var(--muted);text-transform:uppercase}
.generator-form textarea{width:100%;min-height:104px;resize:vertical;border:1px solid var(--line);background:#fff;border-radius:18px;padding:16px 18px;font-size:16px;line-height:1.5;outline:none;box-shadow:0 12px 30px rgba(0,0,0,.04);transition:border-color .2s ease,box-shadow .2s ease}
.generator-form textarea:focus{border-color:#8c93a0;box-shadow:0 12px 30px rgba(0,0,0,.07)}
.generator-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;flex-wrap:wrap}
.generator-examples{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.example-chip-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.example-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 13px;font-size:11px;color:var(--text);cursor:pointer;transition:border-color .18s ease,transform .18s ease}
.example-chip:hover{border-color:#111;transform:translateY(-1px)}
.generator-submit{min-width:210px}
.generator-submit:disabled{opacity:.6;cursor:wait;transform:none}

/* ---- Hero live micro-preview + generation progress overlay ---- */
.hero-demo-copy{transition:opacity .3s ease}
.generation-progress{display:none!important}
.generation-eyebrow{margin:0 0 16px;font-size:9px;letter-spacing:.18em;font-weight:850;color:#9aa8d0}
#generationSteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
#generationSteps li{display:grid;grid-template-columns:16px 1fr;gap:5px 12px;align-items:baseline;opacity:.4;transition:opacity .3s ease}
#generationSteps li i{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);grid-row:1/3;align-self:center;position:relative}
#generationSteps li span{font-size:15px;letter-spacing:-.01em}
#generationSteps li small{grid-column:2;font-size:11px;color:#9aa8d0;min-height:14px}
#generationSteps li.active{opacity:1}
#generationSteps li.active i{border-color:#fff;background:conic-gradient(#fff 0turn,transparent 0turn);animation:spin .9s linear infinite}
#generationSteps li.done{opacity:.85}
#generationSteps li.done i{border-color:#71f1a3;background:#71f1a3}
@keyframes spin{to{transform:rotate(1turn)}}

/* ---- Dedicated generation gate -----------------------------------------
   Lives inside #builderDevice as an overlay sibling of #builderSite (see
   index.html): the demo/generated site stays rendered and blurred
   underneath (.builder-device.gate-active #builderSite below), the gate
   sits above it as a translucent blocker/checklist. Nothing outside the
   preview device is touched or hidden. ---- */
.generation-gate{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:48px;background:rgba(9,10,13,.88);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);color:#f7f8fb;border-radius:17px;overflow:auto}
.generation-gate[hidden]{display:none}
.generation-gate-inner{width:min(100%,620px)}
.generation-gate-inner[hidden]{display:none}
.generation-gate-eyebrow{margin:0 0 18px;color:#8f9bb5;font-size:10px;letter-spacing:.2em;font-weight:800}
.generation-gate h2{margin:0 0 20px;font-size:clamp(34px,5vw,62px);line-height:.98;letter-spacing:-.045em;font-weight:650}
.generation-gate-building h2{margin-bottom:34px}
.generation-gate-idle-copy{margin:0 0 30px;color:#c7cdda;font-size:15px;line-height:1.6;max-width:420px}
.generation-gate-cta{background:#000;color:#fff}
.generation-gate-steps{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.generation-gate-steps li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:center;opacity:.38}
.generation-gate-steps li i{width:14px;height:14px;border:1px solid #65708a;border-radius:50%;display:block;grid-row:1/3}
.generation-gate-steps li span{font-size:15px;line-height:1.25}
.generation-gate-steps li small{grid-column:2;min-height:14px;color:#9eabc6;font-size:11px}
.generation-gate-steps li.active,.generation-gate-steps li.done{opacity:1}
.generation-gate-steps li.active i{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.08);animation:gatePulse 1.2s ease-in-out infinite}
.generation-gate-steps li.done i{border-color:#73e6a0;background:#73e6a0}
.generation-gate-status{margin:34px 0 0;color:#9eabc6;font-size:13px}
.generation-gate-cost{margin:6px 0 0;color:#6b7794;font-size:12px}
.generation-gate-cost:empty{display:none}
.generation-gate-retry{margin-top:24px;background:#f7f8fb!important;color:#111!important}
@keyframes gatePulse{50%{opacity:.42;transform:scale(.78)}}

/* The preview itself: blurred/dimmed underneath the gate whenever the gate
   is active (idle-demo, generating, or failed -- toggled alongside
   #generationGate's visibility, never on a timer). Reuses this codebase's
   own existing blur convention (see the vestigial .locked rules below). */
.builder-device.gate-active #builderSite{filter:blur(7px);pointer-events:none;user-select:none}

/* ---- Refine lock (shown until a direction has been generated) ---- */
.builder-shell{position:relative}
.refine-lock{display:none}
.builder-shell.locked .refine-lock{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  position:absolute;inset:14px;z-index:10;border-radius:26px;
  background:rgba(13,14,17,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  color:#fff;padding:32px;justify-content:center;
}
.refine-lock p{margin:0;font-size:15px;line-height:1.6;max-width:360px;color:#dfe1e6}
.refine-lock strong{font-size:18px;color:#fff}
.builder-shell.locked .builder-controls,
.builder-shell.locked .builder-preview-wrap{filter:blur(7px);pointer-events:none;user-select:none}

/* ---- Refine-panel additions: suggestions, tone toggle, regenerate ---- */
.suggestions-block{padding-top:0!important}
.suggestion-chips{display:flex;flex-wrap:wrap;gap:7px}
.suggestion-chip{border:1px solid #d8dae0;background:#fff;border-radius:999px;padding:9px 14px;font-size:11px;cursor:pointer;transition:border-color .18s ease}
.suggestion-chip:hover{border-color:#111}
#shuffleServices{margin-top:12px}

/* ---- Handoff description note ---- */
.handoff-description-note{margin-top:10px!important;font-size:11px!important;color:var(--muted);font-style:italic;line-height:1.5}

@media(prefers-reduced-motion:reduce){
  .hero-demo-copy{transition:none}
  #generationSteps li{transition:none}
  #generationSteps li.active i{animation:none}
  .generation-gate-steps li.active i{animation:none}
}

@media(max-width:720px){
  .generator-form{margin-top:26px;max-width:100%}
  .generator-form textarea{border-radius:16px;padding:14px 15px}
  .generator-row{flex-direction:column;align-items:stretch}
  .generator-submit{width:100%;min-width:0}
  .generator-examples{gap:6px}
  .generation-progress{left:20px;right:20px;bottom:22px}
  #generationSteps li span{font-size:13px}
  .generation-gate{padding:28px 22px;border-radius:14px}
  .generation-gate h2{margin-bottom:28px}
  .generation-gate-steps li span{font-size:14px}
  .refine-lock{padding:22px;inset:8px}
  .refine-lock p{font-size:13px}
}

/* ==========================================================================
   STYLE SYSTEM V3 -- dimension-based architecture.
   A style is now a *combination* of reusable design dimensions (hero
   treatment / typography / navigation / cards / imagery / CTA / colour
   behaviour / motion / spacing / section pattern) plus a palette, applied
   as data-* attributes on .builder-site (see script.js "STYLE REGISTRY").
   Each dimension below is one shared rule-set reused by every style that
   selects it -- a new style is a ~10-line registry entry, not a new CSS
   block. See STYLE-SYSTEM-V3.md for the full architecture writeup.

   This also replaces the old six-mode "browse and pick a finished output"
   showcase (.mode-showcase/.mode-tab/.mode-stage, now removed from the
   markup) with a compact optional style picker next to the generator input,
   and turns the refine panel into: a slim result-actions row, the generated
   preview as the dominant element, and an Advanced panel collapsed by
   default. Rules below for classes that no longer exist in the markup
   (the old .builder-controls two-column layout, .mode-* showcase styles)
   are simply inert and can be pruned in a future pass -- nothing here
   depends on them.
   ========================================================================== */

/* ---- Builder shell: vertical stack, each child owns its own frame ---- */
.builder-shell{margin-top:68px;display:flex;flex-direction:column;gap:18px;background:transparent;padding:0;border-radius:0;box-shadow:none;position:relative}
.builder-shell.locked .result-actions,
.builder-shell.locked .builder-preview-wrap,
.builder-shell.locked .advanced-panel{filter:blur(7px);pointer-events:none;user-select:none}

/* ---- Style picker (hero, optional, compact -- not a browse-heavy showcase) ---- */
.style-picker{margin-top:20px;max-width:600px}
.style-picker-label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;font-weight:750}

/* V4: the row alone gave desktop mouse users no visible/discoverable way to
   scroll horizontally (overflow-x:auto + scrollbar-width:none hides the only
   affordance). The scroller wraps the row with prev/next buttons, and the
   row itself also supports wheel-to-horizontal and click-drag (see script.js). */
.style-swatch-scroller{display:flex;align-items:center;gap:6px}
.style-swatch-row{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;flex:1 1 auto;min-width:0;cursor:grab;scroll-behavior:smooth}
.style-swatch-row::-webkit-scrollbar{display:none}
.style-swatch-row.dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
.style-swatch-row.dragging .style-swatch{pointer-events:none}
.swatch-scroll-btn{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--text);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .18s ease,opacity .18s ease}
.swatch-scroll-btn:hover:not(:disabled){border-color:#111}
.swatch-scroll-btn:disabled{opacity:.32;cursor:default}
.style-swatch{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px 7px 7px;font-size:11px;color:var(--text);cursor:pointer;transition:border-color .18s ease}
.style-swatch:hover{border-color:#111}
.style-swatch.active{border-color:#111;background:#111;color:#fff}
.swatch-dot{width:16px;height:16px;border-radius:50%;background:var(--swatch-color,#999);flex:0 0 auto;border:1px solid rgba(0,0,0,.08)}
.swatch-auto{background:conic-gradient(from 0deg,#315cff,#8c5cff,#ff6b3d,#e8ff43,#315cff)}

/* Short-height desktop windows: the picker's own margins/padding shouldn't
   eat vertical space the generator and preview need more. */
@media(max-width:1120px) and (max-height:760px){
  .style-picker{margin-top:14px}
}

/* ---- Result actions: light, primary refine controls above the preview ---- */
.result-actions{background:#f7f7f8;border-radius:22px;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.result-actions-primary{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.quick-edit{display:flex;gap:8px;flex:1 1 320px;min-width:0}
.quick-edit input[type="text"],.quick-edit select{height:44px;border:1px solid #d8dae0;background:#fff;border-radius:10px;padding:0 12px;font-size:13px;min-width:0;flex:1;outline:none}
.quick-edit input[type="text"]:focus,.quick-edit select:focus{border-color:#8c93a0}
.result-actions-primary .tone-toggle{margin-top:0;width:220px;flex:0 0 auto}
#regenerateButton{white-space:nowrap;flex:0 0 auto}
.result-actions .suggestions-block{padding:0}

/* ---- Preview: dominant, full-width element ---- */
.builder-preview-wrap.dominant{width:100%}

/* ---- Advanced panel: collapsed by default, secondary ---- */
.advanced-panel{background:#f7f7f8;border-radius:22px;overflow:hidden}
.advanced-panel summary{cursor:pointer;list-style:none;padding:18px 20px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#525660;display:flex;align-items:center;justify-content:space-between}
.advanced-panel summary::-webkit-details-marker{display:none}
.advanced-panel summary:after{content:"Show ▾";font-weight:700;letter-spacing:0;text-transform:none;font-size:12px}
.advanced-panel[open] summary:after{content:"Hide ▴"}
.advanced-panel[open] summary{border-bottom:1px solid #e2e3e7}
.advanced-grid{padding:20px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.advanced-grid .control-block{border-top:0;padding:16px;background:#fff;border:1px solid #dddfe4;border-radius:14px}

@media(max-width:900px){
  .advanced-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .result-actions-primary{flex-direction:column;align-items:stretch}
  .quick-edit{flex-direction:column}
  .result-actions-primary .tone-toggle{width:100%}
  #regenerateButton{width:100%}
  .style-picker{margin-top:16px}
}

/* ---- Typography presets ---- */
.builder-site[data-type="geo-sans"]{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.builder-site[data-type="geo-sans"] .site-copy h3{font-weight:800}
.builder-site[data-type="serif-editorial"]{font-family:Georgia,"Times New Roman",serif}
.builder-site[data-type="serif-editorial"] .site-nav,.builder-site[data-type="serif-editorial"] .site-sections,.builder-site[data-type="serif-editorial"] .site-actions{font-family:Inter,sans-serif}
.builder-site[data-type="serif-editorial"] .site-copy h3{font-weight:400;letter-spacing:-.02em!important}
.builder-site[data-type="display-condensed"] .site-copy h3{font-weight:900;letter-spacing:-.06em!important}
.builder-site[data-type="classic-serif-mix"] .site-copy h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.03em!important}
.builder-site[data-type="classic-serif-mix"] .site-nav,.builder-site[data-type="classic-serif-mix"] .site-actions{font-family:Inter,sans-serif}
.builder-site[data-type="humanist"] .site-copy h3{font-weight:700}
.builder-site[data-type="mono-technical"] .site-nav strong,.builder-site[data-type="mono-technical"] .visual-card strong,.builder-site[data-type="mono-technical"] .site-sections small{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---- Expanded controlled composition dimensions ----------------------- */
.builder-site[data-content-width="contained"] .site-section,.builder-site[data-content-width="contained"] .site-hero{max-width:900px;margin-left:auto;margin-right:auto}
.builder-site[data-content-width="wide"] .site-section,.builder-site[data-content-width="wide"] .site-hero{max-width:1180px;margin-left:auto;margin-right:auto}
.builder-site[data-content-width="edge-to-edge"] .site-section{padding-left:0;padding-right:0}
.builder-site[data-image-dominance="dominant"] .editorial-visual,.builder-site[data-image-dominance="dominant"] .product-frame{height:480px}
.builder-site[data-image-dominance="supporting"] .editorial-visual,.builder-site[data-image-dominance="supporting"] .product-frame{height:260px}
.builder-site[data-image-arrangement="mosaic"] .gallery-grid{grid-template-columns:2fr 1fr 1fr}
.builder-site[data-image-arrangement="rail"] .gallery-grid{grid-template-columns:repeat(4,minmax(150px,1fr));overflow-x:auto}
.builder-site[data-section-rhythm="alternating"] .site-section:nth-of-type(even){background:color-mix(in srgb,var(--site-accent) 6%,var(--site-bg))}
.builder-site[data-section-rhythm="feature-band"] .site-section:nth-of-type(3n){background:color-mix(in srgb,var(--site-accent) 14%,var(--site-bg));padding-top:68px;padding-bottom:68px}
.builder-site[data-section-rhythm="editorial"] .site-section{border-top:0;padding-top:62px;padding-bottom:62px}
.builder-site[data-section-alignment="center"] .site-section{text-align:center}
.builder-site[data-section-alignment="center"] .site-section-label,.builder-site[data-section-alignment="center"] .site-section-intro{margin-left:auto;margin-right:auto}
.builder-site[data-section-alignment="split"] .site-section{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(0,1.3fr);gap:28px;align-items:start}
.builder-site[data-typography-scale="compact"] .site-section h4,.builder-site[data-typography-scale="compact"] .site-section-label{font-size:90%}
.builder-site[data-typography-scale="display"] .site-section h4{font-size:clamp(28px,4vw,52px);line-height:.95}
.builder-site[data-heading-width="narrow"] .site-copy h3,.builder-site[data-heading-width="narrow"] .site-section-label{max-width:420px}
.builder-site[data-heading-width="wide"] .site-copy h3{max-width:1000px}
.builder-site[data-card-density="compact"] .features-grid,.builder-site[data-card-density="compact"] .site-services-cards,.builder-site[data-card-density="compact"] .pricing-tiers{gap:8px}
.builder-site[data-card-density="airy"] .features-grid,.builder-site[data-card-density="airy"] .site-services-cards,.builder-site[data-card-density="airy"] .pricing-tiers{gap:26px}
.builder-site[data-card-shape="square"] .feature-card,.builder-site[data-card-shape="square"] .service-card,.builder-site[data-card-shape="square"] .gallery-tile{border-radius:2px}
.builder-site[data-card-shape="pill"] .feature-card,.builder-site[data-card-shape="pill"] .service-card{border-radius:28px}
.builder-site[data-split-ratio="text-heavy"] .site-hero{grid-template-columns:1.4fr .6fr}
.builder-site[data-split-ratio="media-heavy"] .site-hero{grid-template-columns:.7fr 1.3fr}

/* ---- Per-section width/alignment overrides (Generation Strengthening pass):
   same CSS values as data-content-width/data-section-alignment above, but
   stamped per-section by applySectionRhythmPositions() so a single page can
   mix contained/wide/edge-to-edge sections per pageRhythm + section intent
   instead of only ever being uniform across the whole page. Deliberately no
   "split" value here -- split's 2-column grid assumes about's own markup
   shape and would misplace children if forced onto an arbitrary section. ---- */
.site-section[data-section-width="contained"]{max-width:900px;margin-left:auto;margin-right:auto}
.site-section[data-section-width="wide"]{max-width:1180px;margin-left:auto;margin-right:auto}
.site-section[data-section-width="edge-to-edge"]{padding-left:0;padding-right:0;max-width:none}
.site-section[data-section-align="center"]{text-align:center}
.site-section[data-section-align="center"] .site-section-label,.site-section[data-section-align="center"] .site-section-intro{margin-left:auto;margin-right:auto}

/* ---- Hero treatment variants ---- */
.builder-site[data-hero="centered"] .site-hero{grid-template-columns:1fr;text-align:center}
.builder-site[data-hero="centered"] .site-copy{max-width:760px;margin:0 auto}
.builder-site[data-hero="centered"] .site-actions{justify-content:center}
.builder-site[data-hero="centered"] .site-visual{display:none}

.builder-site[data-hero="stacked-image-below"] .site-hero{grid-template-columns:1fr;text-align:left}
.builder-site[data-hero="stacked-image-below"] .site-copy{max-width:640px}
.builder-site[data-hero="stacked-image-below"] .site-visual{margin-top:8px;height:220px}

.builder-site[data-hero="asymmetric-offset"] .site-hero{grid-template-columns:1.4fr .6fr;align-items:start;padding-top:64px}
.builder-site[data-hero="asymmetric-offset"] .site-visual{margin-top:40px;height:260px}

.builder-site[data-hero="fullbleed-image"] .site-hero{grid-template-columns:1fr;min-height:520px;align-items:flex-end}
.builder-site[data-hero="fullbleed-image"] .site-copy{max-width:640px;position:relative;z-index:2}
.builder-site[data-hero="fullbleed-image"] .site-visual{position:absolute;inset:0;height:auto;border-radius:0;z-index:1;opacity:.9}

.builder-site[data-hero="minimal-text-only"] .site-hero{grid-template-columns:1fr;padding-top:70px;padding-bottom:70px}
.builder-site[data-hero="minimal-text-only"] .site-copy{max-width:720px}
.builder-site[data-hero="minimal-text-only"] .site-visual{display:none}

/* ---- Navigation variants ---- */
.builder-site[data-nav="boxed-pill"] .site-nav{margin:14px;border-radius:999px;border-bottom:0;background:color-mix(in srgb,var(--site-bg) 90%,var(--site-text) 10%)}
.builder-site[data-nav="minimal-until-scroll"] .site-nav{border-bottom:0;background:transparent}
.builder-site[data-nav="minimal-until-scroll"] .site-nav div{opacity:.7}
.builder-site[data-nav="sidebar"] .site-nav{flex-direction:column;align-items:flex-start;height:auto!important;padding:22px!important;gap:16px;border-bottom:0;border-right:1px solid color-mix(in srgb,var(--site-text) 18%,transparent)}
.builder-site[data-nav="sidebar"] .site-nav div{flex-direction:column;gap:12px}
.builder-site[data-nav="centered-logo"] .site-nav{justify-content:center;flex-direction:column;gap:10px;height:auto!important;padding:22px 0!important}
.builder-site[data-nav="centered-logo"] .site-nav div{order:2}
.builder-site[data-nav="centered-logo"] .site-brand-lockup{order:1}
.builder-site[data-nav="centered-logo"] .site-nav button{order:3}

/* ---- Card / section-block variants ---- */
.builder-site[data-card="flat"] .site-sections>div{background:transparent}
.builder-site[data-card="bordered"] .site-sections>div{border-right-width:1px}
.builder-site[data-card="elevated-shadow"] .site-sections>div{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--site-text) 10%,transparent)}
.builder-site[data-card="image-led"] .site-sections>div{background:linear-gradient(160deg,color-mix(in srgb,var(--site-accent) 16%,var(--site-bg)),var(--site-bg))}
.builder-site[data-card="numbered-editorial"] .site-sections>div small{font-size:11px;letter-spacing:.14em}
.builder-site[data-card="outline-ghost"] .site-sections>div{border-right-style:dashed}

/* ---- CTA treatment variants ---- */
/* DESIGN INTELLIGENCE PASS (part 10/11): these 5 real CTA treatments
   previously only ever reached the hero/nav buttons -- every OTHER button
   in a generated site (.module-cta-btn: banner/contact/newsletter/action
   CTAs, .module-submit-btn: every form submit) always rendered as the same
   flat solid pill regardless of the project's own `cta` dimension. That's
   the concrete cause of "one universal turquoise-pill feeling across
   unrelated businesses" -- a real, working 5-variant system already
   existed, it just wasn't wired to most of the buttons on the page. Now it
   is, everywhere a button appears. */
.builder-site[data-cta="sharp-block"] .site-nav button,.builder-site[data-cta="sharp-block"] .site-actions button,
.builder-site[data-cta="sharp-block"] .module-cta-btn,.builder-site[data-cta="sharp-block"] .module-submit-btn{border-radius:0}
.builder-site[data-cta="outline-ghost"] .site-nav button,.builder-site[data-cta="outline-ghost"] .site-actions button,
.builder-site[data-cta="outline-ghost"] .module-cta-btn,.builder-site[data-cta="outline-ghost"] .module-submit-btn{background:transparent!important;border:1.5px solid var(--site-accent);color:var(--site-accent)!important}
.builder-site[data-cta="underline-link"] .site-nav button,.builder-site[data-cta="underline-link"] .site-actions button,
.builder-site[data-cta="underline-link"] .module-cta-btn,.builder-site[data-cta="underline-link"] .module-submit-btn{background:transparent!important;color:var(--site-text)!important;border:0;border-bottom:2px solid var(--site-accent);border-radius:0;padding-left:3px;padding-right:3px}
.builder-site[data-cta="floating-badge"] .site-actions button,
.builder-site[data-cta="floating-badge"] .module-cta-btn,.builder-site[data-cta="floating-badge"] .module-submit-btn{border-radius:999px;box-shadow:0 10px 30px color-mix(in srgb,var(--site-accent) 45%,transparent)}
.builder-site[data-cta="outline-ghost"] .module-submit-btn:disabled{color:color-mix(in srgb,var(--site-accent) 60%,transparent)!important}

/* CTA arrow (part 10) -- a small trailing icon on primary CTA buttons,
   suppressed for the underline-link/text treatment (which already reads as
   a link, not a button, and a heavy arrow fights that restraint) and for a
   disabled button. Icon itself is rendered inline by renderCtaButton. */
.cta-btn-icon{flex:0 0 auto;transition:transform .18s ease}
.module-cta-btn:hover .cta-btn-icon,.module-submit-btn:hover .cta-btn-icon{transform:translateX(2px)}
.builder-site[data-cta="underline-link"] .cta-btn-icon{display:none}
/* Secondary/paired CTA (part 10 -- "paired primary/secondary CTA") -- an
   outline companion button next to a primary one, e.g. hero secondary
   action or a banner's "or call us" line. */
.module-cta-btn-secondary{background:transparent!important;border:1.5px solid color-mix(in srgb,var(--site-text) 30%,transparent)!important;color:var(--site-text)!important}
.builder-site[data-cta="outline-ghost"] .module-cta-btn-secondary{border-color:color-mix(in srgb,var(--site-text) 22%,transparent)!important}

/* ---- Colour behaviour variants ---- */
.builder-site[data-color-behavior="warm-earth-multi-tone"] .site-hero{background:radial-gradient(circle at 80% 20%,color-mix(in srgb,var(--site-accent-2) 30%,transparent),transparent 32%),linear-gradient(150deg,var(--site-bg-light),var(--site-bg))!important}
.builder-site[data-color-behavior="dark-luxury-metallic"] .visual-mark{background:linear-gradient(135deg,var(--site-accent),var(--site-accent-2));-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:none}
.builder-site[data-color-behavior="neutral-single-accent"] .site-visual{background:color-mix(in srgb,var(--site-bg) 92%,var(--site-text) 8%)!important}
.builder-site[data-color-behavior="high-contrast-mono-accent"] .visual-mark{text-shadow:0 0 50px color-mix(in srgb,var(--site-accent) 60%,transparent)}

/* ---- Motion variants (always overridden to none under reduced-motion, set in JS too) ---- */
.builder-site[data-motion="none"] .site-visual,.builder-site[data-motion="none"] .site-nav button,.builder-site[data-motion="none"] .site-actions button{transition:none!important}
.builder-site[data-motion="expressive"] .site-visual{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.builder-site[data-motion="expressive"]:hover .site-visual{transform:translateY(-4px) rotate(-1deg)}
.builder-site[data-motion="expressive"] .site-nav button,.builder-site[data-motion="expressive"] .site-actions button{transition:transform .25s ease}
.builder-site[data-motion="expressive"] .site-actions button:hover{transform:translateY(-2px)}

/* ---- FINAL BASELINE POLISH pass, parts 4/5/6: micro-motion system ----
   Layered ADDITIVELY on top of the motion rules just above -- the
   pre-existing per-CATEGORY `[data-motion]` (none/subtle/expressive) stays
   exactly as it was (an explicit category-level kill switch some
   categories already rely on); `[data-motion-character]` is a NEW,
   archetype-derived axis (part 5) that only ever scales the FEEL of
   already-permitted motion (reveal distance/speed, hover lift, stagger
   timing) via custom properties, never re-enables what data-motion="none"
   turned off (see the override block at the end of this section). 6
   characters, one per the brief's own named examples. */
.builder-site{--reveal-y:14px;--reveal-dur:.5s;--hover-lift:-3px;--stagger-step:60ms;--img-hover-scale:1.03}
.builder-site[data-motion-character="restrained"]{--reveal-y:8px;--reveal-dur:.7s;--hover-lift:-2px;--stagger-step:90ms;--img-hover-scale:1.015}
.builder-site[data-motion-character="direct"]{--reveal-y:10px;--reveal-dur:.32s;--hover-lift:-2px;--stagger-step:30ms;--img-hover-scale:1.02}
.builder-site[data-motion-character="tactile"]{--reveal-y:14px;--reveal-dur:.42s;--hover-lift:-4px;--stagger-step:50ms;--img-hover-scale:1.045}
.builder-site[data-motion-character="structured"]{--reveal-y:12px;--reveal-dur:.4s;--hover-lift:-3px;--stagger-step:40ms;--img-hover-scale:1.025}
.builder-site[data-motion-character="typographic"]{--reveal-y:6px;--reveal-dur:.6s;--hover-lift:-1px;--stagger-step:70ms;--img-hover-scale:1.015}
.builder-site[data-motion-character="soft"]{--reveal-y:16px;--reveal-dur:.6s;--hover-lift:-2px;--stagger-step:70ms;--img-hover-scale:1.03}

/* SECTION REVEAL (part 4) -- opacity 0->1 + a short translateY, driven by
   `.sr-reveal`/`.sr-revealed` (added by initSiteMotion in script.js and its
   export-side counterpart in SITE_RUNTIME_JS, lib/export-compiler.js). An
   element that never receives `.sr-reveal` at all (motion disabled, or JS
   didn't run) simply has no transition and reads as always-visible --
   never a layout-affecting change either way (transform/opacity only). */
.sr-reveal{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--reveal-dur) cubic-bezier(.2,.8,.2,1),transform var(--reveal-dur) cubic-bezier(.2,.8,.2,1)}
.sr-reveal.sr-revealed{opacity:1;transform:none}
/* PROCESS stagger (part 4's "steps may stagger in") -- pure CSS, no second
   observer: a step only starts revealing once its OWN ancestor section has
   `.sr-revealed`, with each successive step delayed by one more
   `--stagger-step` -- reads as a real sequence, not a simultaneous flash.
   Six nth-child rules covers every process variant's step count (always
   4) with headroom for a longer future one. */
.sr-reveal .process-flow>*{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.sr-reveal.sr-revealed .process-flow>*{opacity:1;transform:none}
.sr-reveal.sr-revealed .process-flow>*:nth-child(2){transition-delay:calc(var(--stagger-step) * 1)}
.sr-reveal.sr-revealed .process-flow>*:nth-child(3){transition-delay:calc(var(--stagger-step) * 2)}
.sr-reveal.sr-revealed .process-flow>*:nth-child(4){transition-delay:calc(var(--stagger-step) * 3)}
.sr-reveal.sr-revealed .process-flow>*:nth-child(5){transition-delay:calc(var(--stagger-step) * 4)}
.sr-reveal.sr-revealed .process-flow>*:nth-child(6){transition-delay:calc(var(--stagger-step) * 5)}

/* CARDS (part 4) -- a small lift + a soft shadow response on hover, scaled
   by --hover-lift (typographic archetypes get a near-zero lift -- "minimal
   card hover" is a real, intentional choice, not a missing feature). No
   scaling anywhere (part 4 explicitly rules out "excessive scaling"). */
.service-card,.testimonial-card,.gallery-icon-card,.feature-card,.pricing-tier,.process-compact-card,.team-card,.product-panel{transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease}
.service-card:hover,.testimonial-card:hover,.gallery-icon-card:hover,.feature-card:hover,.pricing-tier:hover,.process-compact-card:hover,.team-card:hover,.product-panel:hover{transform:translateY(var(--hover-lift));box-shadow:0 12px 28px color-mix(in srgb,var(--site-text) 9%,transparent)}

/* BUTTONS (part 4) -- subtle background/border response + a hair of scale
   (max 1.02, per the brief's own ceiling); the arrow/icon's own translate
   is already handled above (`.cta-btn-icon`, 7px flex gap + translateX on
   hover). */
.module-cta-btn,.module-submit-btn{transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.module-cta-btn:hover,.module-submit-btn:hover{transform:scale(1.02)}
.module-cta-btn:active,.module-submit-btn:active{transform:scale(.99)}

/* ICONS (part 4) -- a small, quiet transform/color response, never a spin
   or bounce. Card-hover already moves the WHOLE card; this adds a slightly
   larger, independent nudge to the icon inside it so the icon itself reads
   as responsive too. */
.sr-icon-tile,.service-card-icon,.gallery-icon-card-icon,.proof-icon,.process-compact-icon{transition:transform .2s ease,color .2s ease}
.service-card:hover .service-card-icon,.gallery-icon-card:hover .gallery-icon-card-icon,.process-compact-card:hover .process-compact-icon{transform:translateY(-2px)}

/* IMAGES (part 4) -- "when images exist: subtle scale/crop transition."
   Scoped to a real resolved image only (`.site-visual-img`, never the
   art-directed `.visual-generated` CSS placeholder, which has no photo to
   crop into) inside its own overflow:hidden frame, so the scale never
   spills past the frame's rounded corners. */
.site-visual-img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.site-visual:hover .site-visual-img,.product-frame:hover .site-visual-img,.about-visual:hover .site-visual-img,.team-card:hover .site-visual-img,.editorial-visual:hover .site-visual-img,.gallery-tile:hover .site-visual-img{transform:scale(var(--img-hover-scale))}

/* Belt-and-suspenders overrides (part 6): prefers-reduced-motion is always
   honored even if JS never ran or was blocked, and the pre-existing
   data-motion="none" kill switch reaches every NEW motion-bearing element
   added by this pass too, not just the original .site-visual/nav/actions
   trio. Reduced-motion/motion-off both mean the SAME thing here: every
   element renders directly in its final state, nothing animates. */
@media (prefers-reduced-motion: reduce){
  .sr-reveal,.sr-reveal .process-flow>*{opacity:1!important;transform:none!important;transition:none!important}
  .service-card,.testimonial-card,.gallery-icon-card,.feature-card,.pricing-tier,.process-compact-card,.team-card,.product-panel,
  .module-cta-btn,.module-submit-btn,.sr-icon-tile,.service-card-icon,.gallery-icon-card-icon,.proof-icon,.process-compact-icon,.site-visual-img{transition:none!important}
  .service-card:hover,.testimonial-card:hover,.gallery-icon-card:hover,.feature-card:hover,.pricing-tier:hover,.process-compact-card:hover,.team-card:hover,.product-panel:hover,
  .module-cta-btn:hover,.module-submit-btn:hover,.module-cta-btn:active,.module-submit-btn:active,
  .site-visual:hover .site-visual-img,.product-frame:hover .site-visual-img,.about-visual:hover .site-visual-img,.team-card:hover .site-visual-img,.editorial-visual:hover .site-visual-img,.gallery-tile:hover .site-visual-img{transform:none!important}
}
.builder-site[data-motion="none"] .sr-reveal,.builder-site[data-motion="none"] .sr-reveal .process-flow>*{opacity:1!important;transform:none!important;transition:none!important}
.builder-site[data-motion="none"] .service-card,.builder-site[data-motion="none"] .testimonial-card,.builder-site[data-motion="none"] .gallery-icon-card,.builder-site[data-motion="none"] .feature-card,.builder-site[data-motion="none"] .pricing-tier,.builder-site[data-motion="none"] .process-compact-card,.builder-site[data-motion="none"] .team-card,.builder-site[data-motion="none"] .product-panel,
.builder-site[data-motion="none"] .module-cta-btn,.builder-site[data-motion="none"] .module-submit-btn,.builder-site[data-motion="none"] .sr-icon-tile,.builder-site[data-motion="none"] .site-visual-img{transition:none!important}
.builder-site[data-motion="none"] .service-card:hover,.builder-site[data-motion="none"] .testimonial-card:hover,.builder-site[data-motion="none"] .gallery-icon-card:hover,.builder-site[data-motion="none"] .feature-card:hover,.builder-site[data-motion="none"] .pricing-tier:hover,.builder-site[data-motion="none"] .process-compact-card:hover,.builder-site[data-motion="none"] .team-card:hover,.builder-site[data-motion="none"] .product-panel:hover,
.builder-site[data-motion="none"] .module-cta-btn:hover,.builder-site[data-motion="none"] .module-submit-btn:hover{transform:none!important}

/* ---- Spacing scale ---- */
.builder-site[data-spacing="compact"] .site-hero{padding:32px}
.builder-site[data-spacing="compact"] .site-nav{height:64px;padding:0 22px}
.builder-site[data-spacing="standard"] .site-hero{padding:48px}
.builder-site[data-spacing="airy"] .site-hero{padding:64px}
.builder-site[data-spacing="airy"] .site-nav{height:84px}
.builder-site[data-spacing="generous"] .site-hero{padding:80px 64px}
.builder-site[data-spacing="generous"] .site-nav{height:92px}

/* ---- Imagery direction (no image-generation backend -- always an honest,
   art-directed placeholder treatment, never a fabricated photo) ---- */
.builder-site[data-imagery="photo-led-placeholder"] .site-visual{background:linear-gradient(160deg,color-mix(in srgb,var(--site-accent) 30%,var(--site-bg)),color-mix(in srgb,var(--site-accent-2) 20%,var(--site-bg-dark)))}
.builder-site[data-imagery="photo-led-placeholder"] .visual-mark{display:none}
.builder-site[data-imagery="photo-led-placeholder"] .site-visual:after{content:"Photography direction";position:absolute;left:16px;bottom:16px;font-size:9px;letter-spacing:.14em;color:color-mix(in srgb,var(--site-text) 75%,transparent);text-transform:uppercase}
.builder-site[data-imagery="illustration"] .visual-mark{border-radius:50%;background:color-mix(in srgb,var(--site-accent) 70%,transparent);width:150px;height:150px;display:flex;align-items:center;justify-content:center;font-size:52px;left:auto;right:24px;top:24px;transform:none}
.builder-site[data-imagery="illustration"] .site-visual{background:color-mix(in srgb,var(--site-bg) 96%,var(--site-accent) 4%)}
.builder-site[data-imagery="texture-organic"] .site-visual{background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--site-accent) 22%,transparent),transparent 55%),radial-gradient(circle at 75% 70%,color-mix(in srgb,var(--site-accent-2) 20%,transparent),transparent 55%),var(--site-bg)}
.builder-site[data-imagery="texture-organic"] .visual-mark{opacity:.6}
.builder-site[data-imagery="grid-mosaic"] .site-visual{background-image:linear-gradient(color-mix(in srgb,var(--site-text) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--site-text) 8%,transparent) 1px,transparent 1px);background-size:26px 26px;background-color:var(--site-bg)}
.builder-site[data-imagery="grid-mosaic"] .visual-mark{font-size:90px}

/* ---- Section pattern note (portfolio-first / proof-first / story-first) ---- */
.site-pattern-note{margin:0;padding:14px 22px 0;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--site-muted)}

/* ---- Per-style flourishes: a handful of lines each for the one or two
   truly signature details a dimension combination alone can't express.
   This is the whole "custom" surface per style -- everything else above
   is shared. ---- */
.builder-site[data-style="studio"] .site-visual{box-shadow:14px 14px 0 var(--site-text)}
.builder-site[data-style="impact"] .site-copy h3{text-transform:uppercase;line-height:.86!important}
.builder-site[data-style="impact"] .site-visual{box-shadow:16px 16px 0 var(--site-text)}
.builder-site[data-style="monolith"] .site-copy h3{font-size:clamp(52px,6vw,92px)!important}
.builder-site[data-style="paper"] .site-nav{border-bottom-width:2px}
.builder-site[data-style="kinetic"] .site-hero{background:linear-gradient(115deg,var(--site-bg) 55%,color-mix(in srgb,var(--site-accent) 20%,var(--site-bg)) 55%)!important}
.builder-site[data-style="foundry"] .site-visual{border-radius:4px}
.builder-site[data-style="civic"] .site-nav{border-bottom-width:2px;border-color:color-mix(in srgb,var(--site-accent-2) 60%,transparent)!important}
.builder-site[data-style="ledger"] .site-sections>div{border-right-style:dotted}
.builder-site[data-style="aviator"] .site-nav{border-bottom-color:color-mix(in srgb,var(--site-accent-2) 55%,transparent)}

/* ---- Mobile: hero already collapses to one column everywhere (existing
   rule above), these cover the variants that need an extra nudge. ---- */
@media(max-width:720px){
  .builder-site[data-content-width="contained"] .site-section,.builder-site[data-content-width="wide"] .site-section{max-width:none}
  .builder-site[data-section-alignment="split"] .site-section{display:block}
  .site-section[data-section-width="contained"],.site-section[data-section-width="wide"]{max-width:none}
  .builder-site[data-image-arrangement="rail"] .gallery-grid{grid-template-columns:repeat(4,minmax(150px,1fr));overflow-x:auto}
  .builder-site[data-image-dominance="dominant"] .editorial-visual,.builder-site[data-image-dominance="dominant"] .product-frame{height:300px}
  .builder-site[data-typography-scale="display"] .site-copy h3,.builder-site[data-heading-width="wide"] .site-copy h3{max-width:100%;overflow-wrap:anywhere}
  .builder-site[data-hero="fullbleed-image"] .site-visual{position:relative;inset:auto;height:200px;order:-1}
  .builder-site[data-nav="sidebar"] .site-nav{flex-direction:row;align-items:center;border-right:0}
  .builder-site[data-nav="sidebar"] .site-nav div{flex-direction:row}
  .builder-site[data-nav="centered-logo"] .site-nav{flex-direction:row}
  .builder-site[data-nav="centered-logo"] .site-nav div,.builder-site[data-nav="centered-logo"] .site-brand-lockup,.builder-site[data-nav="centered-logo"] .site-nav button{order:0}
  .builder-site[data-spacing="generous"] .site-hero,.builder-site[data-spacing="airy"] .site-hero{padding:28px 20px!important}
  .style-swatch{font-size:10px;padding:6px 11px 6px 6px}
  .style-swatch-scroller{gap:4px}
  .swatch-scroll-btn{width:26px;height:26px;font-size:13px}
}

@media(prefers-reduced-motion:reduce){
  .builder-site[data-motion="expressive"] .site-visual,
  .builder-site[data-motion="expressive"] .site-nav button,
  .builder-site[data-motion="expressive"] .site-actions button{transition:none}
  .builder-site[data-motion="expressive"]:hover .site-visual{transform:none}
}

/* ==========================================================================
   V5 -- WEBSITE PROJECT MODEL: compositional section system + user assets.
   The old .site-sections was one fixed 3-box grid. Sections are now built
   per-project by script.js from an ordered list of section *types*, each
   themed entirely through the existing --site-* custom properties so any
   composed palette/style already works with zero per-style overrides here.
   See SITE-PROJECT-V5.md.
   ========================================================================== */

/* ---- Hero image (when a real asset fills the hero role) ---- */
.site-visual-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* ---- Generic section rhythm ---- */
/* FINAL BASELINE POLISH pass, part 7: these two rules were fully shadowed
   by later, identically-specific `.site-section{...}`/`.site-section-label
   {...}` declarations further down this file (same 0,1,0 specificity, CSS
   cascade order decides the tie) -- dead code that never actually applied,
   and the exact kind of trap that let the OTHER (winning) `.site-section`
   rule ship an invisible-on-light-theme border for who knows how long
   without anyone noticing a themed alternative already existed right here.
   Removed rather than left in place; see the winning declarations (now
   themed correctly) further down for the real, active rule. */

/* ---- Services: "described" variant (numbered variant reuses .site-sections) ---- */
.site-section-services[data-variant="numbered"]{padding:0}
.site-section-services[data-variant="numbered"] .site-sections{border-top:0}
.site-services-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.service-card{padding:18px;border-radius:12px;background:color-mix(in srgb,var(--site-bg) 92%,var(--site-text) 8%);border:1px solid color-mix(in srgb,var(--site-text) 12%,transparent)}
.service-card strong{display:block;font-size:14px;margin-bottom:8px}
.service-card p{margin:0;font-size:11px;line-height:1.55;color:var(--site-muted)}
.service-card-icon{color:var(--site-accent);display:block;margin-bottom:12px}
.builder-site[data-icon-density="minimal"] .service-card-icon{display:none}

/* ---- Proof / stats strip ---- */
.site-proof-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:center}
.site-proof-stats strong{display:block;font-size:26px;letter-spacing:-.03em}
.site-proof-stats small{display:block;margin-top:6px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--site-muted)}
.site-proof-statement{margin:0;text-align:center;font-size:14px;line-height:1.6;color:var(--site-muted);max-width:520px;margin-left:auto;margin-right:auto}

/* ---- Gallery ---- */
.gallery-grid{display:grid;gap:10px}
.gallery-grid.gallery-layout-grid{grid-template-columns:repeat(4,1fr)}
.gallery-grid.gallery-layout-featured{grid-template-columns:2fr 1fr 1fr}
.gallery-tile{border-radius:12px;overflow:hidden;aspect-ratio:1/1;position:relative;background:color-mix(in srgb,var(--site-accent) 16%,var(--site-bg-light))}
.gallery-tile-featured{grid-row:span 2;aspect-ratio:auto}
.gallery-tile.has-image img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-tile-placeholder{background:linear-gradient(150deg,color-mix(in srgb,var(--site-accent) 26%,var(--site-bg-light)),color-mix(in srgb,var(--site-accent-2) 16%,var(--site-bg-dark)))}
/* Brand-experience pass: when a gallery has no real (uploaded or
   generated-and-ready) image yet, every tile falls back to the same
   art-directed `visual-generated` treatment for its imagery direction --
   already a real designed pattern, never a blank rectangle, but 3-4
   identical tiles side by side still reads as tiled placeholder rather
   than a considered gallery. A subtle per-position tint keeps the shared
   language while breaking up the repetition; it never applies to a tile
   that actually has a real image. */
.gallery-tile:nth-child(2) .visual-generated{filter:brightness(1.08) saturate(1.06)}
.gallery-tile:nth-child(3) .visual-generated{filter:brightness(.93)}
.gallery-tile:nth-child(4) .visual-generated{filter:brightness(1.03) saturate(.9)}
/* IMAGE COHERENCE PASS: reconcileImageSupplyWithSections (script.js) can
   now shrink a gallery's rendered tile count below its variant's normal 4
   (grid) / 3 (featured) when the image budget can't fill that many --
   these overrides make the grid track count match exactly, so 2 tiles
   read as a deliberate 2-up layout instead of 2 real tiles floating in a
   4-column track with visible empty columns beside them. */
.gallery-grid[data-tile-count="2"].gallery-layout-grid{grid-template-columns:repeat(2,1fr)}
.gallery-grid[data-tile-count="3"].gallery-layout-grid{grid-template-columns:repeat(3,1fr)}
.gallery-grid[data-tile-count="2"].gallery-layout-featured{grid-template-columns:1.3fr 1fr}
/* PLACEHOLDER/COMPOSITION FIX: a section with truly ZERO real imagery
   (see reconcileImageSupplyWithSections's ZERO_SUPPLY_TILE_COUNT) collapses
   to exactly one tile, always rendered with the gallery-tile-featured
   class (see renderGallery) -- these two rules give that lone tile an
   explicit, deliberate wide/banner shape instead of depending on
   gallery-tile-featured's normal `grid-row:span 2` (which assumes a second
   row exists to span into, which it does not here). */
.gallery-grid[data-tile-count="1"]{grid-template-columns:1fr}
.gallery-grid[data-tile-count="1"] .gallery-tile-featured{grid-row:auto;aspect-ratio:21/9}

/* ---- Testimonial ---- */
/* FINAL BASELINE POLISH pass, part 7: the single-quote 'centered' variant
   was a bare <blockquote> on the plain page background -- nothing anchored
   it visually, the literal "testimonials floating alone" complaint. A
   decorative quotation mark (pure CSS content, no new icon asset --
   'quote' isn't in the curated Phosphor vocabulary and this pass adds no
   new icon keys) plus a tinted surface and real vertical room give it the
   same kind of deliberate "held" presence the product panel/gallery-icon
   composition already have, instead of type floating in raw whitespace. */
.site-section-testimonial[data-variant="centered"]{background:color-mix(in srgb,var(--site-accent) 4%,transparent);padding-top:64px;padding-bottom:64px}
.site-section-testimonial[data-variant="centered"] blockquote::before{content:"\201C";display:block;font-family:Georgia,"Times New Roman",serif;font-size:56px;line-height:1;color:color-mix(in srgb,var(--site-accent) 40%,transparent);margin-bottom:4px}
.site-section-testimonial blockquote{margin:0;max-width:620px;margin-left:auto;margin-right:auto;text-align:center;font-size:17px;line-height:1.5;letter-spacing:-.01em}
.site-section-testimonial blockquote cite{display:block;margin-top:16px;font-style:normal;font-size:11px;color:var(--site-muted)}
.testimonial-card{max-width:420px;padding:22px;border-radius:14px;background:color-mix(in srgb,var(--site-bg) 92%,var(--site-text) 8%);border:1px solid color-mix(in srgb,var(--site-text) 12%,transparent)}
.testimonial-card p{margin:0 0 12px;font-size:14px;line-height:1.55}
.testimonial-card span{font-size:11px;color:var(--site-muted)}

/* ---- About ---- */
.site-section-about[data-variant="split"]{display:grid;grid-template-columns:.8fr 1.2fr;gap:22px;align-items:center}
.about-visual{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--site-accent) 18%,var(--site-bg-light))}
.about-visual img{width:100%;height:100%;object-fit:cover;display:block}
.about-avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;color:var(--site-accent)}
.about-copy p:last-child{margin:0;font-size:13px;line-height:1.6;color:var(--site-muted)}
.about-statement-text{margin:0;font-size:14px;line-height:1.65;color:var(--site-muted);max-width:600px}

/* ---- Closing CTA banner ---- */
.site-section-cta-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.site-section-cta-banner p{margin:0;font-size:18px;letter-spacing:-.02em;max-width:420px}
.site-section-cta-banner button{border:0;border-radius:999px;padding:13px 20px;font-size:12px;font-weight:750;background:var(--site-accent);color:var(--site-text)}
.cta-banner-accent{background:color-mix(in srgb,var(--site-accent) 14%,var(--site-bg))}

/* ---- In-preview footer (distinct from the real SiteRemade <footer>) ---- */
/* DESIGN INTELLIGENCE PASS (part 13): more generous, deliberate padding
   plus a subtle top accent line, so the closing section reads as a
   composed part of the page instead of trailing whitespace after the last
   real section. */
.site-footer{display:flex;flex-direction:column;gap:18px;padding-top:40px;padding-bottom:40px;position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:48px;right:48px;height:1px;background:linear-gradient(90deg,var(--site-accent),transparent 60%)}
.site-footer-brand{display:flex;flex-direction:column;gap:8px}
.site-footer-brand strong{font-size:14px}
.site-footer-logo-img{max-height:30px;max-width:140px;object-fit:contain}
.site-footer-location{display:flex;align-items:center;gap:6px;margin:0;font-size:11px;color:var(--site-muted)}
.site-footer-location .sr-icon{color:var(--site-accent)}
.site-footer-columns{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.site-footer-columns small{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--site-muted);margin-bottom:8px}
.site-footer-columns span{display:block;font-size:11px;margin-bottom:5px;color:var(--site-muted)}
.site-footer-copy{margin:0;font-size:10px;color:var(--site-muted)}

@media(max-width:720px){
  .site-section{padding:26px 20px}
  .site-services-cards{grid-template-columns:1fr}
  .site-proof-stats{grid-template-columns:1fr}
  .gallery-grid.gallery-layout-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid.gallery-layout-featured{grid-template-columns:1fr 1fr}
  .gallery-tile-featured{grid-column:span 2;grid-row:auto;aspect-ratio:16/9}
  .site-section-about[data-variant="split"]{grid-template-columns:1fr}
  .about-visual{max-width:220px}
  .site-section-cta-banner{flex-direction:column;align-items:flex-start}
  .site-footer-columns{grid-template-columns:1fr}
}

/* ---- Advanced panel: asset uploaders + project data (V5) ---- */
.asset-block-note{margin:0 0 12px;font-size:11px;line-height:1.5;color:#6b6f78}
.asset-uploader-grid{display:grid;grid-template-columns:1fr;gap:10px}
.asset-uploader{border:1px solid #d8dae0;background:#fff;border-radius:14px;padding:12px}
.asset-add-button{width:100%;text-align:left;border:1px dashed #c9ccd3;background:#f7f8fa;border-radius:10px;padding:10px 12px;font-size:11px;font-weight:700;color:#3f434a;cursor:pointer}
.asset-add-button:hover{border-color:#111}
.asset-thumb-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
/* HERO STORYBOARD: one row per hero image in the editor */
.hero-layer-list{display:grid;gap:8px;margin-top:4px}
.hero-layer-row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 10px;align-items:center;border:1px solid #e3e5ea;border-radius:10px;padding:8px}
.hero-layer-thumb{width:52px;height:52px;border-radius:8px;overflow:hidden;background:#eef0f3;display:grid;place-items:center;grid-row:span 2}
.hero-layer-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.hero-layer-drawn{font-size:20px;color:#8a8f99}
.hero-layer-meta{display:grid;gap:1px;min-width:0}
.hero-layer-meta strong{font-size:11px;letter-spacing:.02em;color:#1d2230}
.hero-layer-meta span{font-size:11px;color:#3f434a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-layer-meta small{font-size:10px;color:#8a8f99}
.hero-layer-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hero-layer-actions button{border:1px solid #c9ccd3;background:#fff;border-radius:8px;padding:5px 9px;font-size:10.5px;font-weight:700;color:#23262d;cursor:pointer}
.hero-layer-actions button:hover{border-color:#111}
.hero-layer-focal-label{font-size:10.5px;color:#5b6070;display:flex;gap:4px;align-items:center}
.hero-layer-focal{font-size:10.5px;border:1px solid #c9ccd3;border-radius:6px;padding:3px 4px;background:#fff}
.asset-thumb{position:relative;width:56px;height:56px;border-radius:9px;overflow:hidden;border:1px solid #d8dae0}
.asset-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.asset-thumb-remove{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;border:0;background:rgba(17,17,17,.75);color:#fff;font-size:10px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.project-data-block .asset-block-note{margin-bottom:12px}
.project-data-actions{display:flex;gap:8px;flex-wrap:wrap}
.project-data-status{margin:9px 0 0;font-size:11px;color:#525660;min-height:14px}

/* V8.5: account / durable-sync controls -------------------------------- */
.account-block .asset-block-note{margin-bottom:10px}
.account-auth-fields{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.account-auth-fields input{width:100%;height:44px;border:1px solid #d8dae0;background:#fff;padding:0 12px;outline:none;border-radius:10px;font-size:13px}
.account-auth-fields input:focus{border-color:#8c93a0}
.account-auth-actions{display:flex;gap:8px}
.account-auth-actions .reset-colors{margin-top:0}
.account-status{margin:9px 0 0;font-size:11px;color:#525660;min-height:14px}
.account-status.error{color:#b42318}
.account-status.success{color:#17733a}
.account-identity{font-size:12px;color:#525660;margin:0 0 12px}
.account-identity strong{color:var(--text,#111)}
.account-project-name-label{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6b6f78;margin-bottom:12px}
.account-project-name-label input{width:100%;height:42px;border:1px solid #d8dae0;background:#fff;padding:0 12px;outline:none;border-radius:10px;font-size:13px;margin-top:6px}
.account-save-status{font-size:11px;color:#525660;margin:0 0 10px;display:flex;align-items:center;gap:7px}
.account-save-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#b7bac2;flex:none}
.account-save-status[data-state="dirty"]::before{background:#e0a92a}
.account-save-status[data-state="saving"]::before{background:#2c61f2;animation:accountSavePulse 1s ease-in-out infinite}
.account-save-status[data-state="saved"]::before{background:#17733a}
.account-save-status[data-state="failed"]::before{background:#b42318}
.account-save-status[data-state="conflict"]::before{background:#b42318}
@keyframes accountSavePulse{0%,100%{opacity:1}50%{opacity:.35}}
.account-conflict{background:#fff4f2;border:1px solid #f3c8c0;border-radius:10px;padding:10px 12px;margin:0 0 12px;font-size:12px}
.account-conflict p{margin:0 0 8px;color:#8a2f22}
.account-conflict .reset-colors{margin-top:0;display:inline-block;width:auto;padding:0 12px}
.account-owned-projects-label{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#6b6f78;margin-bottom:10px}
.account-owned-projects-label select{width:100%;height:42px;border:1px solid #d8dae0;background:#fff;padding:0 12px;outline:none;border-radius:10px;font-size:13px;margin-top:6px}
.purchase-ownership-badge{margin:10px 0 0;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:6px 10px;border-radius:999px;display:inline-block;background:#eef0f4;color:#525660}
.purchase-ownership-badge[data-status="purchased"]{background:#e5f6ec;color:#17733a}
.purchase-ownership-badge[data-status="checkout_pending"]{background:#fff4e0;color:#8a5a10}

/* V15 (Phase 2: unified login + linking UX) -- shared-identity CTA, the
   connect-your-account button, the "already connected" state, and the
   dual-proof confirm panel. Reuses the existing .button/.button-secondary/
   .reset-colors/.purchase-ownership-badge visual language throughout --
   this is deliberately not a separate visual system (see this file's own
   V8.5-era comment on that same discipline). */
.shared-identity-cta{width:100%;margin:12px 0 10px;min-height:48px}
.shared-identity-divider{position:relative;text-align:center;margin:4px 0 14px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#8a8f99}
.shared-identity-divider::before,.shared-identity-divider::after{content:"";position:absolute;top:50%;width:calc(50% - 70px);border-top:1px solid var(--line,#e4e6ea)}
.shared-identity-divider::before{left:0}
.shared-identity-divider::after{right:0}
.shared-identity-divider span{background:var(--panel,#fff);padding:0 8px;position:relative}
.account-open-app-link{display:inline-block;margin:10px 0 0;font-size:12px;font-weight:700;color:var(--accent,#2c61f2)}
.account-open-app-link:hover{text-decoration:underline}
#identityConnectBtn{margin-top:10px}
#identityConnectStatus:empty{display:none}
.identity-confirm-panel{margin:12px 0;padding:14px;border:1px solid var(--line,#e4e6ea);border-radius:12px;background:#f7f8fa}
.identity-confirm-panel h3{margin:0 0 8px;font-size:14px}
.identity-confirm-copy{margin:0 0 10px;font-size:12px;color:#525660;line-height:1.5}
.identity-confirm-warning{margin:0 0 10px;padding:8px 10px;border-radius:8px;background:#fff4e0;color:#8a5a10;font-size:11px}
.identity-confirm-actions{display:flex;gap:8px}
.identity-confirm-actions .button{min-height:42px;padding:0 18px;font-size:13px}
.identity-confirm-actions .button-secondary{background:#fff}

/* UNIFIED ACCOUNT / AUTH-GATED GENERATION pass: the daily-credit indicator
   near the Generate button, and its restrained echo in the account panel.
   Deliberately plain -- a bordered pill with an icon and a number, the same
   visual language as .purchase-ownership-badge/.snapshot-badge above, never
   a progress ring, coin animation, or gamified/crypto-style treatment (spec:
   "restrained, professional, never gamified/crypto-like"). Hidden outright
   for a signed-out visitor (see script.js renderCreditsUI). */
.credit-indicator{display:inline-flex;align-items:center;gap:7px;margin:10px 0 0;padding:6px 12px;border-radius:999px;background:#eef0f4;border:1px solid var(--line);font-size:12px;font-weight:600;color:#3f434a}
.credit-indicator[hidden]{display:none}
.credit-indicator-icon{display:inline-flex;color:#525660}
.credit-indicator-icon svg{display:block}
.last-generation-cost{margin:8px 0 0;font-size:12px;color:#6b7794}
.last-generation-cost[hidden]{display:none}
.credit-indicator-low{background:#fff4e0;border-color:#f0dcae;color:#8a5a10}
.credit-indicator-low .credit-indicator-icon{color:#8a5a10}
.account-credits-line{margin:0 0 12px;font-size:11px;color:#525660}

/* Credit-architecture fix (UI clause): a small, always-visible pill
   distinguishing an immutable purchased snapshot/download from the live
   editable draft -- used both in the export panel (#exportSnapshotBadge)
   and on every My Websites row, so the distinction never depends on a
   conditional (e.g. "you have newer edits") to become visible. */
.snapshot-badge{margin:10px 0 0!important;font-size:10px!important;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:6px 10px;border-radius:999px;display:inline-block;background:#e9edff;color:#28399e}

/* Product-flow pass: My Websites (account-wide purchased-site list) +
   post-purchase hosting choice. Additive only, reusing the same tokens as
   the account/purchase blocks above rather than introducing new ones. */
.my-websites-panel{margin-top:18px;padding-top:18px;border-top:1px solid #dddfe4}
.my-websites-list{display:flex;flex-direction:column;gap:10px}
.my-website-item{border:1px solid #dddfe4;background:#fff;border-radius:12px;padding:12px 14px}
.my-website-item strong{display:block;font-size:13px}
.my-website-item small{display:block;font-size:10px;color:#8a8e97;margin-top:2px}
.my-website-hosting{margin:8px 0 0!important;font-size:11px!important;color:#525660}
.my-website-actions{display:flex;gap:14px;align-items:center;margin-top:10px;flex-wrap:wrap}
.my-website-actions .link-button{font-size:11px}
.my-website-snapshot-note{margin:8px 0 0!important;font-size:10px!important;font-style:italic;color:var(--muted)}
.my-website-status{margin:6px 0 0!important;font-size:11px!important;color:var(--muted)}
.hosting-choice-block{margin-top:16px;padding-top:16px;border-top:1px solid #eceef1}
.hosting-choice-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:10px}
.hosting-choice-actions .link-button{font-size:11px}

/* ==========================================================================
   V6 -- Generate -> Inspect -> Buy. Additive only, same convention as the
   V5 block above: nothing before this point is modified. See
   SITE-PROJECT-V6.md for the full writeup.
   ========================================================================== */

/* ---- Hero form: Generate button directly under the textarea, "Try:" row
   demoted to a small secondary line below it instead of sharing the primary
   row. ---- */
.generator-form .generator-submit{width:100%;margin-top:14px;min-width:0}
/* Brand-experience pass: pre-generation image upload -- attach/drag/paste,
   right in the same box, before the business is even generated. Reuses the
   existing .asset-thumb/.asset-thumb-remove treatment from the post-
   generation editor (see asset-uploader-grid) so a staged upload here and
   an uploaded asset there look like the same real feature, not two. */
.generator-upload{margin-top:12px;border:1px dashed var(--line);border-radius:14px;padding:10px 12px;transition:border-color .15s ease,background .15s ease}
.generator-upload.is-dragover{border-color:#8c93a0;background:color-mix(in srgb,var(--accent) 5%,transparent)}
.generator-upload-btn{display:block;width:100%;text-align:left;background:none;border:0;padding:0;font-size:12px;font-weight:650;color:var(--muted);cursor:pointer}
.generator-upload-btn span{font-weight:400;color:var(--muted);opacity:.75}
.generator-upload .asset-thumb-row{margin-top:9px}
.generator-examples-secondary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;font-size:11px;color:var(--muted)}
.generator-examples-secondary .example-chip{padding:6px 11px;font-size:10.5px}
/* V8: honest, low-key meter for the 3 free AI-planned directions -- never
   shown at all when AI planning isn't configured in this environment. */
.generator-ai-hint{margin:10px 0 0;font-size:11px;color:var(--muted)}

/* ---- Builder intro: small, always-reachable "load saved project" link
   replacing the old full-panel dead-looking lock overlay. ---- */
.load-project-hint{margin:14px 0 0;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.link-button{border:0;background:none;padding:0;font:inherit;color:var(--text);text-decoration:underline;cursor:pointer}
.link-button:hover{color:var(--accent)}
.load-project-hint .project-data-status{margin:0;font-size:11px;color:var(--muted)}

/* ---- V8.1: explicit Direction 1/2/3 switcher. Hidden until a second
   direction exists (renderDirectionSwitcher). Switching is pure client-side
   state -- no loading affordance needed, it's instant. ---- */
.direction-switcher{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0 0}
.direction-pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}
.direction-pill:hover{border-color:#8c93a0;color:var(--text)}
.direction-pill.active{background:var(--text);border-color:var(--text);color:#fff}
/* V8.1.1: UX-only cue while a generation transaction is in flight -- the
   real enforcement is the generationInFlight lock in script.js, not this. */
.direction-switcher-locked{opacity:.5;pointer-events:none}

/* ---- Purchase section: the primary ending. Same structural idiom as
   .handoff-section/.pricing-section (two-column, card on the right) but its
   own classes so nothing shared with the demoted contact section below. ---- */
.purchase-section{width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:125px 0;border-top:1px solid var(--line)}
.purchase-shell{display:grid;grid-template-columns:.82fr 1fr;gap:90px;align-items:start}
.purchase-copy h2{margin:0;font-size:clamp(50px,6vw,92px);line-height:.94;letter-spacing:-.07em}
.purchase-copy>p:not(.eyebrow){color:var(--muted);font-size:17px;line-height:1.65;max-width:560px;margin:20px 0 0}
.purchase-points{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:520px}
.purchase-points li{padding-left:22px;position:relative;color:var(--muted);font-size:14px;line-height:1.55}
.purchase-points li:before{content:"→";position:absolute;left:0;color:var(--text)}
.purchase-card{border:1px solid var(--line);background:#fff;padding:28px;border-radius:22px;box-shadow:0 16px 60px rgba(0,0,0,.06)}
.purchase-card>span{font-size:9px;letter-spacing:.14em;color:var(--muted)}
.purchase-card strong{display:block;font-size:23px;margin:10px 0 5px}
.purchase-card>p{margin:0!important;font-size:12px!important}
.purchase-price{display:flex;align-items:baseline;gap:8px;margin:22px 0}
.purchase-price span{font-size:40px;font-weight:800;letter-spacing:-.04em}
.purchase-price small{color:var(--muted);font-size:12px}
#buyButton:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.purchase-status{margin:12px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.purchase-status.success{color:#17733a}
.purchase-status.error{color:#b42318}
/* Phase 9 (SITE-PROJECT ticket §6): "Continue editing" / "Open in
   Workplace" after a fulfilled purchase. Same .button/.button-secondary
   language as everywhere else in this file (see the V15 comment above on
   why this is deliberate, not a new visual system). */
.purchase-complete-actions{display:flex;gap:8px;margin:12px 0 0;flex-wrap:wrap}
.purchase-complete-actions .button{min-height:44px;padding:0 18px;font-size:13px;flex:1 1 auto}

/* ---- Demoted "talk to a human first" contact section: same markup/class
   as before (.handoff-section) so all existing responsive rules keep
   working untouched; this only lightens its visual weight now that it is
   no longer the primary ending. ---- */
.handoff-section.secondary-contact{padding-top:80px;padding-bottom:80px}
.handoff-section.secondary-contact .handoff-copy h2{font-size:clamp(34px,4vw,52px)}

@media(max-width:1120px){
  .purchase-shell{grid-template-columns:1fr}
}
@media(max-width:720px){
  .purchase-section{padding:70px 0}
  .purchase-shell{gap:30px}
  .purchase-card{padding:20px;border-radius:18px}
  .generator-examples-secondary{gap:6px}
}

/* ==========================================================================
   V7 -- generator quality / visual differentiation. See SITE-PROJECT-V7.md.
   Additive-only, same convention as the V6 block above: new hero layouts,
   new section types and the designed-imagery fallback all live here rather
   than editing the V3-V6 rules above them.
   ========================================================================== */

/* ---- UI polish (part 7) -------------------------------------------------- */
.generator-examples-secondary{margin-top:30px;padding-top:16px;border-top:1px solid var(--line)}
.load-project-hint{margin:22px 0 0}
.load-project-hint .link-button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-size:11px;color:var(--muted);cursor:pointer;transition:border-color .2s ease,color .2s ease}
.load-project-hint .link-button:hover{border-color:#8c93a0;color:var(--text)}
.purchase-shell{max-width:1180px;margin:0 auto}
.conversation-refinement{margin:0 auto 22px;max-width:900px;padding:18px 20px;border:1px solid color-mix(in srgb,var(--line) 80%,transparent);background:color-mix(in srgb,#fff 92%,var(--accent) 8%);border-radius:12px}
.conversation-refinement label{display:block;font-size:11px;font-weight:750;margin-bottom:8px}
.refinement-row{display:flex;gap:10px;align-items:flex-end}
.refinement-row textarea{flex:1;min-height:52px;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit;font-size:13px}
.refinement-status{min-height:16px;margin:8px 0 0;font-size:11px;color:var(--muted)}
@media(max-width:720px){.refinement-row{display:block}.refinement-row textarea,.refinement-row input{width:100%;box-sizing:border-box}.refinement-row button{width:100%;margin-top:8px}}
.purchase-price{gap:10px}
.purchase-price span{letter-spacing:-.03em}
.purchase-price small{letter-spacing:.04em}

/* ---- Hero layouts (part 4) -- each a structurally distinct DOM shape, not
   a CSS reskin of one shape. Selected by the composed `hero` dimension
   (see composeStyleFromAnalysis / categoryDimensionDefaults in script.js). */
.builder-site .site-hero.hero-centered-oversized{grid-template-columns:1fr;text-align:center;padding:96px 48px;display:flex;flex-direction:column;align-items:center}
.hero-kicker-center{font-size:10px;letter-spacing:.2em;color:color-mix(in srgb,var(--site-text) 72%,transparent)}
.hero-headline-oversized{font-size:clamp(56px,8vw,132px);line-height:.86;letter-spacing:-.08em;max-width:1000px;margin:16px 0}
.hero-sub-center{max-width:560px;color:color-mix(in srgb,var(--site-text) 65%,transparent);font-size:14px;line-height:1.6}
.site-actions.center{justify-content:center}

.builder-site .site-hero.hero-fullbleed{grid-template-columns:1fr;min-height:560px;padding:0;align-items:flex-end;position:relative}
.hero-fullbleed-media{position:absolute;inset:0;z-index:0}
.hero-fullbleed-media .visual-generated,.hero-fullbleed-media img{width:100%;height:100%}
.hero-fullbleed-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.06) 60%)}
.hero-fullbleed-copy{position:relative;z-index:2;padding:56px;max-width:680px}
/* BUG FIX: these five hero layouts only ever had a MOBILE headline size (the
   @container site (max-width:480px) rule below) -- on desktop their <h3>
   fell back to the browser's default ~20px, so the most image-led heroes
   (full-bleed, collage) carried the smallest headline on the page. Same
   display scale the split hero's .site-copy h3 already uses; the mobile
   rule's !important still wins on phones. */
.hero-fullbleed-copy h3,.hero-collage-copy h3,.hero-stacked-copy h3,.hero-asym-headline h3,.hero-editorial-copy h3{font-size:clamp(44px,6.2cqw,92px);line-height:.9;letter-spacing:-.06em;margin:12px 0 18px;text-wrap:balance}

.builder-site .site-hero.hero-stacked{grid-template-columns:1fr;padding:56px 48px 0}
.hero-stacked-copy{max-width:680px;margin:0 auto;text-align:center}
.hero-stacked-visual{margin:36px -48px 0;height:clamp(300px,42vw,520px)}
.hero-stacked-visual .visual-generated{border-radius:0}

.builder-site .site-hero.hero-asymmetric{grid-template-columns:1.3fr .7fr;grid-template-rows:auto auto;padding:56px 48px;align-items:start;gap:20px 32px}
.hero-asym-headline{grid-column:1;grid-row:1}
.hero-asym-visual{grid-column:2;grid-row:1/3;height:100%;min-height:260px;border-radius:18px;overflow:hidden}
.hero-asym-meta{grid-column:1;grid-row:2;max-width:480px}

.builder-site .site-hero.hero-minimal{grid-template-columns:1fr;padding:96px 56px;text-align:left}
.hero-minimal h3{max-width:820px}

.builder-site .site-hero.hero-grid-dashboard{grid-template-columns:.9fr 1.1fr}
.hero-dash-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;height:320px}
.dash-panel{border-radius:12px;background:color-mix(in srgb,var(--site-accent) 10%,var(--site-bg-dark));border:1px solid color-mix(in srgb,var(--site-text) 10%,transparent)}
.dash-panel:first-child{background:color-mix(in srgb,var(--site-accent) 24%,var(--site-bg-dark))}
/* The primary dashboard panel carries the real hero visual (user upload,
   generated image, or the designed CSS fallback) -- see renderHero's
   'grid-dashboard' case in script.js. */
.dash-panel-visual{padding:0;overflow:hidden}
.dash-panel-visual .visual-generated,.dash-panel-visual .site-visual-img{width:100%;height:100%}

.builder-site .site-hero.hero-poster{grid-template-columns:1fr;padding:70px 40px;text-align:center;background:linear-gradient(160deg,color-mix(in srgb,var(--site-accent) 16%,var(--site-bg)),var(--site-bg))!important}
.hero-poster-headline{font-size:clamp(64px,9vw,150px);line-height:.84;letter-spacing:-.085em;margin:14px 0 26px}
.hero-poster-row{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}

.builder-site .site-hero.hero-collage{grid-template-columns:1.1fr .9fr}
.hero-collage-stack{position:relative;height:320px}
.collage-card{position:absolute;width:72%;height:62%;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.collage-card-1{left:0;top:0;z-index:1}
.collage-card-2{right:0;bottom:0;z-index:2;border:3px solid var(--site-bg)}

.builder-site .site-hero.hero-product-screenshot{grid-template-columns:1fr;padding:64px 48px 0;text-align:center}
.hero-product-screenshot .site-copy.center{max-width:680px;margin:0 auto}
.builder-site .site-hero.hero-editorial-rail{grid-template-columns:.8fr 1.2fr;align-items:stretch;padding:0;min-height:520px}
.hero-editorial-copy{padding:64px 48px;display:flex;flex-direction:column;justify-content:center}
.hero-editorial-copy h3{max-width:520px}
.hero-editorial-visual{min-height:520px;overflow:hidden}
.hero-editorial-visual .visual-generated,.hero-editorial-visual .site-visual-img{width:100%;height:100%;border-radius:0}
.hero-product-frame{margin:32px -48px 0;border-radius:16px 16px 0 0;overflow:hidden;box-shadow:0 -20px 60px rgba(0,0,0,.2);background:var(--site-bg-dark)}
.hero-product-chrome{display:flex;gap:6px;padding:12px 16px;background:color-mix(in srgb,var(--site-bg-dark) 80%,#000)}
.hero-product-chrome span{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--site-text) 30%,transparent)}
.hero-product-body{height:280px;overflow:hidden}
/* Carries the real hero visual, same as .dash-panel-visual above -- see
   renderHero's 'product-screenshot' case in script.js. */
.hero-product-body .visual-generated,.hero-product-body .site-visual-img{width:100%;height:100%}

.builder-site .site-hero.hero-demo-shell{background:linear-gradient(150deg,#151821,#0c0d10)!important}
.builder-site .site-hero.hero-demo-shell .site-copy>p:first-child{color:#6c7180;letter-spacing:.22em}
.builder-site .site-hero.hero-demo-shell .site-visual{opacity:.7}
.visual-generated[data-imagery="demo-shell"]{background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 14px);border:1px dashed rgba(255,255,255,.14)}

/* ---- Designed-fallback imagery (part 2) -- art-directed CSS compositions,
   keyed to the composed `imagery` dimension + live palette variables. Never
   a fabricated photo. This is the "designed" tier of the image-provider
   priority (user upload > generated > sourced > designed); see
   renderVisualSlot / buildImagePlan in script.js and the provider audit in
   SITE-PROJECT-V7.md part 2/10. */
.visual-generated{position:relative;width:100%;height:100%;min-height:140px;border-radius:inherit;overflow:hidden;background:linear-gradient(145deg,color-mix(in srgb,var(--site-accent) 14%,var(--site-bg-dark)),var(--site-bg-dark))}
.site-visual-generated-img{animation:visualGeneratedIn .5s ease both}
@keyframes visualGeneratedIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}
/* V7.1: an in-flight real image request. Shown only while
   resolveImagePlanAssets (script.js) is actually waiting on
   POST /api/generate-image for this exact slot -- an honest progress state,
   not decorative loading chrome, and it's automatically removed the moment
   the request resolves (to the real image) or fails (back to the plain
   designed treatment above). */
.visual-generated.visual-generating{animation:visualGeneratingPulse 1.8s ease-in-out infinite}
@keyframes visualGeneratingPulse{0%,100%{opacity:.85}50%{opacity:1}}
.visual-generating-label{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:.72rem;letter-spacing:.02em;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--site-bg-dark) 78%,transparent);color:var(--site-text);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.visual-generating-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--site-accent);animation:visualGeneratingDot 1s ease-in-out infinite}
@keyframes visualGeneratingDot{0%,100%{opacity:.3}50%{opacity:1}}
.visual-generated[data-imagery="technical-network"]{background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--site-accent) 35%,transparent),transparent 45%),radial-gradient(circle at 75% 65%,color-mix(in srgb,var(--site-accent-2) 30%,transparent),transparent 45%),var(--site-bg-dark);background-image:linear-gradient(color-mix(in srgb,var(--site-accent) 22%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--site-accent) 22%,transparent) 1px,transparent 1px),radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--site-accent) 35%,transparent),transparent 45%),var(--site-bg-dark);background-size:34px 34px,34px 34px,auto,auto}
.visual-generated[data-imagery="editorial-bold"]{background:linear-gradient(115deg,var(--site-bg) 0 55%,color-mix(in srgb,var(--site-accent) 65%,var(--site-bg)) 55%)}
.visual-generated[data-imagery="atmospheric-warm"]{background:radial-gradient(circle at 25% 25%,color-mix(in srgb,var(--site-accent) 40%,transparent),transparent 55%),radial-gradient(circle at 80% 75%,color-mix(in srgb,var(--site-accent-2) 32%,transparent),transparent 55%),var(--site-bg-light)}
.visual-generated[data-imagery="trade-proof"]{background-image:linear-gradient(color-mix(in srgb,var(--site-text) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--site-text) 9%,transparent) 1px,transparent 1px);background-size:20px 20px;background-color:var(--site-bg-dark);border-left:6px solid var(--site-accent)}
.visual-generated[data-imagery="chart-financial"]{background:linear-gradient(0deg,color-mix(in srgb,var(--site-accent) 20%,var(--site-bg)) 0 30%,transparent 30%),repeating-linear-gradient(90deg,color-mix(in srgb,var(--site-accent) 30%,transparent) 0 4%,transparent 4% 9%);background-color:var(--site-bg)}
.visual-generated[data-imagery="nature-cause"]{background:radial-gradient(ellipse at 50% 120%,color-mix(in srgb,var(--site-accent) 45%,transparent),transparent 60%),var(--site-bg-light)}
.visual-generated[data-imagery="creative-collage"]{background:conic-gradient(from 45deg,color-mix(in srgb,var(--site-accent) 30%,var(--site-bg)),color-mix(in srgb,var(--site-accent-2) 30%,var(--site-bg)),var(--site-bg))}
.visual-generated[data-imagery="dashboard-ui"]{background-image:linear-gradient(color-mix(in srgb,var(--site-text) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--site-text) 7%,transparent) 1px,transparent 1px);background-size:22px 22px;background-color:var(--site-bg-dark)}
/* PLACEHOLDER/COMPOSITION FIX (multi-model image router pass): a slot that
   was never going to get a real photo this render (see renderVisualSlot's
   `unfunded` distinction -- either never planned for paid generation, or a
   real attempt failed) no longer wears the same full-strength, photo-like
   `data-imagery` gradient as a slot that's actively generating or already
   has a real image. This rule's specificity intentionally matches the
   per-data-imagery swatches above and comes AFTER them in source order, so
   it always wins regardless of which imagery direction is set -- a subtle,
   low-contrast dot pattern plus a small centered accent mark that reads as
   "an intentional decorative touch," not "a broken/missing photo." Most of
   the actual SIZE reduction for the biggest offenders (hero, about-split)
   happens structurally instead (see reconcileImageSupplyWithSections's
   heroDisplayVariant/imageDisplayVariant overrides) -- this rule handles
   the smaller, already-bounded containers (product frame, editorial
   visual) that don't have an equivalent text-only layout to fall back to. */
.visual-generated.visual-generated-unfunded{
  min-height:56px;
  background:
    radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--site-accent) 22%,transparent) 0 3px,transparent 4px) 12px 12px/28px 28px,
    color-mix(in srgb,var(--site-bg) 95%,var(--site-accent) 5%);
}
.visual-generated.visual-generated-unfunded::before{
  content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);
  border-radius:50%;border:1.5px solid color-mix(in srgb,var(--site-accent) 45%,transparent);
}
/* FINAL BASELINE POLISH pass, part 2: real root cause of the "enormous
   dotted placeholder rectangle" bug -- this shrink rule (`:has()`,
   specificity 0,2,0) was silently losing to
   `[data-image-dominance="dominant"] .product-frame{height:480px}`
   (specificity 0,3,0) for every archetype that defaults to
   imageDominance:'dominant' (6 of 11, including retail's own
   'ecommerce-showcase') -- exactly the businesses most likely to hit this
   path. `!important` here is deliberate: an actual "no image" state must
   always win over a static per-archetype sizing preference, regardless of
   selector specificity anywhere else in this file, present or future.
   renderProductShowcase/renderImageLedEditorial no longer even reach this
   rule in practice (zero real supply now renders an entirely different,
   non-image-shaped composition -- see .product-panel/
   .editorial-statement-composition above/below), so this is defense in
   depth for any other consumer of these two container classes, not the
   primary fix. */
.product-frame:has(.visual-generated-unfunded),
.editorial-visual:has(.visual-generated-unfunded){height:140px!important}
/* DESIGN INTELLIGENCE PASS: the unfunded-shrink treatment previously only
   applied to product-frame/editorial-visual -- about-split and team tiles
   now collapse the same way when they hold an unfunded slot, instead of
   silently holding a full-size box open for an image that was never
   coming (gallery itself no longer uses this at all once it has zero real
   supply -- see gallery-icon-composition below, which replaces the image
   grid outright). */
.about-visual:has(.visual-generated-unfunded){aspect-ratio:auto;min-height:120px}
.team-card-placeholder{position:relative;min-height:64px;border-radius:12px;background:color-mix(in srgb,var(--site-accent) 10%,var(--site-bg));display:flex;align-items:center;justify-content:center}
.team-card-placeholder::before{content:"";width:22px;height:22px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--site-accent) 45%,transparent)}

/* ---- DESIGN INTELLIGENCE PASS: local icon system (parts 1-3) ------------- */
.sr-icon{display:inline-block;flex-shrink:0;vertical-align:middle}
.sr-icon-tile{display:inline-flex;align-items:center;gap:8px;color:var(--site-text)}
.sr-icon-tile .sr-icon{color:var(--site-accent)}
.sr-icon-tile-label{font-size:12px;font-weight:650;letter-spacing:-.005em}
.sr-icon-tile-tinted-tile{padding:10px;border-radius:11px;background:color-mix(in srgb,var(--site-accent) 13%,var(--site-bg))}
.sr-icon-tile-outlined-square{padding:10px;border-radius:9px;border:1px solid color-mix(in srgb,var(--site-text) 18%,transparent)}
.sr-icon-tile-rounded-square{padding:11px;border-radius:999px;background:color-mix(in srgb,var(--site-accent) 11%,var(--site-bg))}
.sr-icon-tile-badge{padding:7px 14px 7px 10px;border-radius:999px;background:color-mix(in srgb,var(--site-accent) 9%,var(--site-bg));border:1px solid color-mix(in srgb,var(--site-text) 10%,transparent)}
.sr-icon-tile-badge .sr-icon-tile-label{font-size:11px;letter-spacing:.01em;color:var(--site-muted)}
.sr-icon-tile-oversized .sr-icon{width:40px!important;height:40px!important}
.sr-icon-tile-above-heading{flex-direction:column;align-items:flex-start;gap:12px}
.sr-icon-tile-bare .sr-icon-tile-label{font-weight:600}

/* Icon-led service/feature rows -- part 3's "icon-led-service-row" variant.
   A left-aligned icon block beside heading+body, used when the archetype's
   iconPresentation is 'icon-led-row' (see resolveIconDirection). */
.icon-led-row{display:flex;gap:14px;align-items:flex-start}
.icon-led-row .sr-icon-tile{flex-shrink:0;padding:10px;border-radius:10px;background:color-mix(in srgb,var(--site-accent) 12%,var(--site-bg))}
.icon-led-row-body strong{display:block;font-size:14px;margin-bottom:4px}
.icon-led-row-body p{margin:0;font-size:12.5px;color:var(--site-muted);line-height:1.5}

/* Gallery icon composition (part 7) -- replaces an image grid entirely
   when a gallery has zero real photography, instead of shrinking the same
   photo-shaped placeholder down. Reuses the section's normal padding/label
   styling (site-section/site-section-label above), just a different body. */
.gallery-icon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:6px}
.gallery-icon-card{display:flex;flex-direction:column;gap:12px;padding:22px 18px;border-radius:14px;background:color-mix(in srgb,var(--site-accent) 6%,var(--site-bg));border:1px solid color-mix(in srgb,var(--site-text) 9%,transparent)}
.gallery-icon-card-icon{color:var(--site-accent)}
.gallery-icon-card span{font-size:12.5px;font-weight:650;letter-spacing:-.005em}

/* Proof/metrics icon badges -- pairs an icon with the existing stat number
   instead of a bare number floating in whitespace. */
.site-section-proof .proof-icon,.site-section-metrics .proof-icon{color:var(--site-accent);margin-bottom:8px;display:block}

/* ---- DESIGN INTELLIGENCE PASS: local decorative primitive library (part 4)
   Pure CSS/pseudo-element primitives, keyed off [data-decorative-motif] on
   .builder-site (same archetype-derived attribute pattern as data-cta/
   data-card/etc, see applyDesignDataset/export-compiler dataAttrs) --
   zero new markup, so they apply to every existing .site-section-label /
   .site-hero without any renderer needing to change. They inherit brand
   color via var(--site-accent)/color-mix, and are restrained by design:
   a thin rule, a few dots, a corner bracket -- never a busy pattern.
   Purpose (part 4/6): make an image-light page still feel composed. */
.decor-dots,.decor-corner,.decor-grid-motif,.decor-wave,.decor-divider{pointer-events:none}
.builder-site[data-decorative-motif="lines"] .site-section-label,
.builder-site[data-decorative-motif="rule"] .site-section-label{position:relative;padding-left:18px}
.builder-site[data-decorative-motif="lines"] .site-section-label::before,
.builder-site[data-decorative-motif="rule"] .site-section-label::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:1.5px;background:var(--site-accent)}
.builder-site[data-decorative-motif="dots"] .site-section-label{position:relative;padding-left:16px}
.builder-site[data-decorative-motif="dots"] .site-section-label::before{content:"";position:absolute;left:0;top:.35em;width:6px;height:6px;border-radius:50%;background:var(--site-accent)}
.builder-site[data-decorative-motif="divider"] .site-section-label{position:relative;padding-left:20px}
.builder-site[data-decorative-motif="divider"] .site-section-label::before{content:"";position:absolute;left:0;top:.4em;width:8px;height:8px;border:1.5px solid var(--site-accent);border-radius:50%;background:transparent}
.builder-site[data-decorative-motif="corners"] .service-card,
.builder-site[data-decorative-motif="corners"] .testimonial-card,
.builder-site[data-decorative-motif="corners"] .gallery-icon-card,
.builder-site[data-decorative-motif="corners"] .product-panel{position:relative}
.builder-site[data-decorative-motif="corners"] .service-card::before,
.builder-site[data-decorative-motif="corners"] .testimonial-card::before,
.builder-site[data-decorative-motif="corners"] .gallery-icon-card::before,
.builder-site[data-decorative-motif="corners"] .product-panel::before{content:"";position:absolute;top:8px;left:8px;width:9px;height:9px;border-top:1.5px solid var(--site-accent);border-left:1.5px solid var(--site-accent);opacity:.65}
.builder-site[data-decorative-motif="grid"] .site-section:nth-of-type(odd){background-image:linear-gradient(color-mix(in srgb,var(--site-text) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--site-text) 5%,transparent) 1px,transparent 1px);background-size:26px 26px}
.builder-site[data-decorative-motif="waves"] .site-footer::before{background:repeating-linear-gradient(90deg,var(--site-accent) 0 6px,transparent 6px 12px)}

/* Icon density (part 2/19) -- 'minimal' archetypes (premium-consultancy,
   editorial-brand, portfolio) suppress the icon-led service row entirely
   in favour of plain numbered/text rows, restraint being the actual design
   choice those archetypes call for (part 20's "almost no icons" guidance). */
.builder-site[data-icon-density="minimal"] .icon-led-row .sr-icon-tile{display:none}
.builder-site[data-icon-density="minimal"] .icon-led-row{gap:0}

/* ---- New section types (part 5) ------------------------------------------ */
/* FINAL BASELINE POLISH pass, part 7 -- real, previously-undiscovered bug:
   this rule (later in source order, same 0,1,0 specificity as the earlier
   theme-aware `.site-section{border-top:1px solid color-mix(...)}` near
   the top of this file) was WINNING the cascade site-wide, and its border
   was a hardcoded near-white rgba(255,255,255,.08) -- essentially
   invisible on any light-themed site (the earlier, correctly theme-aware
   declaration was dead code, silently overridden). That is the literal
   mechanism behind "weak transitions between sections": on every
   light-palette generation, section boundaries had no visible divider at
   all, so a whole page could read as one undifferentiated scroll. Fixed to
   the same color-mix token pattern already used throughout this file, and
   bumped slightly (12%->15%) for a genuinely visible, still-subtle
   division regardless of theme. */
.site-section{padding:44px 48px;border-top:1px solid color-mix(in srgb,var(--site-text) 15%,transparent)}
.site-section-label{margin:0 0 18px;font-size:10px;letter-spacing:.16em;color:color-mix(in srgb,var(--site-text) 55%,transparent);text-transform:uppercase}

/* ---- Headline-role hierarchy (brand-experience fix) ----------------------
   section.intent/headlineRole (planSectionGrammar -- derived from section
   TYPE + POSITION, see sectionTypeIntent/intentHeadlineRole in script.js)
   were computed and stored on every section but never read by any
   renderer. renderSectionHeader now stamps a `data-headline-role`
   attribute on the SAME .site-section-label/.site-section-intro elements
   it always returned (no new wrapper -- several rules above key off
   .site-section's direct children being CSS grid items, e.g.
   [data-section-alignment="split"] .site-section{display:grid;...} and
   .site-section-about[data-variant="split"]{display:grid;...} -- a
   wrapper would have changed which element receives grid placement).
   5 distinct buckets (intentHeadlineRole's own vocabulary), each a real,
   visible hierarchy change using only the existing --site-* custom
   properties already threaded through every palette:
   - declarative (introduce: the first/orienting section on a page) --
     a larger, weightier "statement" label with more room under it, and a
     narrower, quieter support line underneath.
   - explanatory (explain/educate) -- the baseline reading hierarchy,
     just a wider intro measure for genuinely descriptive copy.
   - benefit-led (compare/demonstrate/convert -- pricing, product,
     conversion-adjacent sections) -- intro copy is tightened and quieted
     so it doesn't compete with the CTA/price/demo that follows.
   - proof-led (prove/reassure -- proof, testimonials, FAQ) -- the label
     itself recedes further (smaller, quieter) so the evidence that
     follows (numbers, quotes, answers) carries the visual weight, not
     its own setup line.
   - editorial (showcase/narrate -- gallery, image-led, case studies) --
     a bigger, heavier label matching those sections' more expressive,
     art-directed character. */
.site-section-label[data-headline-role="declarative"]{font-size:13px;letter-spacing:.02em;text-transform:none;font-weight:750;color:var(--site-text);margin-bottom:24px}
.site-section-intro[data-headline-role="declarative"]{max-width:420px;opacity:.72}
.site-section-intro[data-headline-role="explanatory"]{max-width:640px}
.site-section-intro[data-headline-role="benefit-led"]{max-width:360px;font-size:12px;opacity:.85}
.site-section-label[data-headline-role="proof-led"]{font-size:9px;opacity:.7;margin-bottom:10px}
.site-section-label[data-headline-role="editorial"]{font-size:12px;letter-spacing:.05em;font-weight:800;color:var(--site-text)}
/* OUTPUT QUALITY PASS: HEADLINE_ROLE_KEYS has always allowed 7 values --
   only 5 had CSS treatment (contrast/question were silent no-ops despite
   being schema-valid choices Claude could legitimately make). */
.site-section-label[data-headline-role="contrast"]{font-size:13px;font-weight:800;color:var(--site-accent);letter-spacing:.01em}
.site-section-intro[data-headline-role="contrast"]{font-size:15px;font-weight:600;opacity:.92;max-width:520px}
.site-section-label[data-headline-role="question"]{font-size:12px;font-style:italic;font-weight:600;opacity:.8}
.site-section-intro[data-headline-role="question"]{font-style:italic;max-width:480px}
/* CREATIVE DIRECTOR V2 -- page rhythm. `.site-section` previously had one
   flat padding value site-wide (see the base rule above); nothing today
   varies it by position on the page. `data-rhythm-position` (open/build/
   proof/close, stamped per section in applySectionRhythmPositions from
   the section's EXISTING `intent`) and `data-page-rhythm` (on the
   `.builder-site` root, from creativeDirection.pageRhythm) together give
   real per-position density without a mechanical alternating pattern --
   the position comes from what the section is actually doing (introduce/
   explain/prove/convert), not from its index parity. Only padding is
   touched; no new dimension, no Claude-authored CSS. */
.site-section[data-rhythm-position="open"]{padding-top:64px}
.site-section[data-rhythm-position="proof"]{padding-top:28px;padding-bottom:28px}
.site-section[data-rhythm-position="close"]{padding-top:56px;padding-bottom:64px}
.builder-site[data-page-rhythm="steady-editorial"] .site-section{padding-top:52px;padding-bottom:52px}
.builder-site[data-page-rhythm="steady-editorial"] .site-section[data-rhythm-position="proof"]{padding-top:44px;padding-bottom:44px}
.builder-site[data-page-rhythm="dense-proof-compressed"] .site-section{padding-top:30px;padding-bottom:30px}
.builder-site[data-page-rhythm="dense-proof-compressed"] .site-section[data-rhythm-position="proof"]{padding-top:18px;padding-bottom:18px}
.builder-site[data-page-rhythm="dense-proof-compressed"] .site-section[data-rhythm-position="close"]{padding-top:34px;padding-bottom:44px}
.builder-site[data-page-rhythm="expressive-alternating"] .site-section[data-rhythm-position="open"]{padding-top:72px}
.builder-site[data-page-rhythm="expressive-alternating"] .site-section[data-rhythm-position="build"]{padding-top:50px;padding-bottom:50px}
.builder-site[data-page-rhythm="expressive-alternating"] .site-section[data-rhythm-position="close"]{padding-top:64px;padding-bottom:76px}
@media (max-width:720px){
  .site-section[data-rhythm-position="open"],.site-section[data-rhythm-position="close"],
  .builder-site[data-page-rhythm="expressive-alternating"] .site-section[data-rhythm-position="open"],
  .builder-site[data-page-rhythm="expressive-alternating"] .site-section[data-rhythm-position="close"]{padding-top:34px;padding-bottom:34px}
}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.feature-card{padding:20px;border-radius:14px;background:color-mix(in srgb,var(--site-bg-dark) 60%,transparent);border:1px solid rgba(255,255,255,.08)}
.feature-mark{display:inline-flex;width:28px;height:28px;border-radius:8px;background:var(--site-accent);color:#fff;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-bottom:10px}
.feature-card strong{display:block;font-size:14px;margin-bottom:6px}
.feature-card p{margin:0;font-size:12px;color:color-mix(in srgb,var(--site-text) 65%,transparent);line-height:1.5}
.site-section-product h4{margin:0 0 18px;font-size:22px}
/* V7.1: needs a real height, not just min-height -- the designed CSS
   fallback (a plain div) happened to collapse to min-height harmlessly,
   but a real <img> (a replaced element) computes its own height from its
   intrinsic ratio against the frame's full width when no ancestor height
   is definite, ballooning the frame to roughly its own width (this
   section runs full-bleed, so aspect-ratio:4/3 here would mean ~930px
   tall on a wide screen -- not what "product screenshot strip" should
   look like). A fixed height + object-fit:cover, the same pattern
   .site-visual/.editorial-visual/.hero-stacked-visual already use, keeps
   this section's proportions stable regardless of image size. */
.product-frame{border-radius:14px;overflow:hidden;height:340px}
.product-frame .visual-generated,.product-frame .site-visual-img{width:100%;height:100%}
/* Brand-experience pass: a dashboard/product-UI screenshot (the
   `dashboard-ui` imagery direction, product-led-saas' natural home) is a
   flat rectangle with real edges and on-screen text -- object-fit:cover
   crops its chrome unpredictably depending on the asset's own aspect
   ratio. A real photograph (any other imagery direction) still wants the
   fixed-height/cover treatment explained above, so this override is
   scoped to dashboard-ui only, reusing the existing composed `imagery`
   dimension rather than adding new per-image metadata. */
.builder-site[data-imagery="dashboard-ui"] .product-frame .site-visual-img,
.builder-site[data-imagery="dashboard-ui"] .dash-panel-visual .site-visual-img,
.builder-site[data-imagery="dashboard-ui"] .hero-product-body .site-visual-img{object-fit:contain;background:color-mix(in srgb,var(--site-bg-dark) 90%,var(--site-accent) 10%)}
.product-caption{margin:16px 0 0;font-size:12px;color:color-mix(in srgb,var(--site-text) 65%,transparent);max-width:520px}
/* FINAL BASELINE POLISH pass, part 2: the zero-image product composition
   (renderProductIconComposition) -- a real content panel (business mark +
   real category service data as an icon-led spec stack + the real product
   module when configured), never an image-shaped box, on a tinted brand
   surface so it still reads as a deliberate section, not a fallback. */
.product-panel{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:start;padding:34px;border-radius:18px;background:color-mix(in srgb,var(--site-accent) 6%,var(--site-bg));border:1px solid color-mix(in srgb,var(--site-text) 9%,transparent)}
.product-panel-mark{display:flex;align-items:center;justify-content:center;width:84px;height:84px;flex-shrink:0;border-radius:16px;font-size:36px;font-weight:800;letter-spacing:-.03em;color:var(--site-accent);background:color-mix(in srgb,var(--site-accent) 15%,var(--site-bg))}
/* No-image product composition: the business name as an oversized
   typographic block on the accent colour (replaces the single-letter mark
   that used to sit where the product photo goes). Wraps rather than
   overflows for long names. */
.product-panel:has(.product-panel-wordmark){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:stretch}
.product-panel-wordmark{display:flex;align-items:flex-end;margin:0;min-height:220px;padding:28px 30px;border-radius:14px;font-size:clamp(40px,5.4vw,84px);line-height:.88;font-weight:900;letter-spacing:-.05em;text-transform:uppercase;overflow-wrap:anywhere;color:var(--site-on-accent,#fff);background:radial-gradient(circle at 80% 15%,color-mix(in srgb,var(--site-accent) 70%,#fff) 0,transparent 55%),var(--site-accent)}
.product-panel-body h4{margin:0 0 8px;font-size:19px;letter-spacing:-.01em;font-weight:750}
.product-panel-rows{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.product-panel-row .sr-icon-tile{width:100%}
.product-icon-composition .module-product-cta,.product-icon-composition .module-cta-btn{margin-top:18px}
/* Zero-image editorial composition (renderEditorialStatementComposition):
   an image-led section with no real image leans into what it still
   genuinely has -- its own copy, set at real display scale, rather than a
   text-only afterthought under an empty box. */
.site-section-editorial.editorial-statement-composition{padding:64px 48px} /* compound selector: .site-section-editorial{padding:0} below has equal specificity and came later, zeroing this */
.editorial-statement-text{margin:0;max-width:820px;font-size:clamp(26px,3.4vw,44px);line-height:1.2;letter-spacing:-.02em;font-weight:640;color:var(--site-text)}
.integration-chips{display:flex;flex-wrap:wrap;gap:10px}
.integration-chip{padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-size:11px;color:color-mix(in srgb,var(--site-text) 80%,transparent)}
.pricing-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.pricing-tier{padding:22px;border-radius:14px;border:1px solid rgba(255,255,255,.1)}
.pricing-tier strong{display:block;font-size:15px;margin-bottom:6px}
.pricing-tier p{margin:0 0 16px;font-size:12px;color:color-mix(in srgb,var(--site-text) 65%,transparent)}
.faq-list{display:flex;flex-direction:column;gap:14px;max-width:640px}
.faq-item strong{display:block;font-size:13px;margin-bottom:6px}
.faq-item p{margin:0;font-size:12px;color:color-mix(in srgb,var(--site-text) 65%,transparent);line-height:1.5}
.process-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}
.process-steps small{display:block;font-size:9px;color:color-mix(in srgb,var(--site-text) 55%,transparent);margin-bottom:8px}
.process-steps strong{font-size:13px}
.process-steps p{margin:6px 0 0;font-size:12px;line-height:1.55;color:color-mix(in srgb,var(--site-text) 68%,transparent)}

/* FINAL BASELINE POLISH pass, part 3: six real process/"how it works"
   presentation variants (see archetypeProcessVariant/renderProcessSteps in
   script.js and lib/site-render.js), replacing the single flat "0N + bold
   label" grid every archetype used to share. Each is horizontal-by-default
   on desktop where that reads as a sequence (numbered/connected-icon/
   compact-cards) and collapses to a clean single column at the mobile tier
   below (alternating/vertical-editorial/large-number are already vertical
   by design, so they need no such collapse). */
.process-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
/* PREMIUM_GENERATION_V7: a grid item's default min-width is 'auto' (its own content's min-content size), so a long
   grounded label ("Walk a prospective buyer through...") or a single long word can force the item wider than its
   1fr share and bleed into the next column -- exactly a "number/label overlaps the next step" collision. min-width:0
   lets the item shrink to the track and word-break lets a long label wrap instead of forcing the column wider. */
.process-flow>*{min-width:0}
.process-flow-numbered .process-flow-step strong,.process-flow-icons .process-flow-step strong{overflow-wrap:anywhere;word-break:break-word}
/* numbered-horizontal: a connector line running behind the row, numbered
   circles sitting on top of it -- a real "track", not a bare grid. */
.process-flow-numbered{position:relative;padding-top:6px}
.process-flow-track{position:absolute;top:19px;left:0;right:0;height:1px;background:color-mix(in srgb,var(--site-text) 14%,transparent)}
.process-flow-numbered .process-flow-step{position:relative;display:flex;flex-direction:column;gap:10px}
.process-flow-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;background:var(--site-bg);border:1.5px solid var(--site-accent);color:var(--site-accent)}
.process-flow-numbered .process-flow-step strong{font-size:13px}
/* connected-icon: an icon node per step with a connector line running
   THROUGH the row of nodes (drawn on the row itself, behind the nodes). */
.process-flow-icons{position:relative;padding-top:4px}
.process-flow-icons::before{content:"";position:absolute;top:23px;left:23px;right:23px;height:1px;background:color-mix(in srgb,var(--site-text) 14%,transparent)}
.process-flow-icons .process-flow-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.process-icon-node{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--site-bg);border:1.5px solid color-mix(in srgb,var(--site-accent) 55%,transparent);color:var(--site-accent)}
.process-flow-icons .process-flow-step strong{font-size:13px}
/* vertical-editorial: large quiet numerals, a stacked list, a hairline
   between rows -- restrained typography instead of icons or connectors
   (premium-consultancy/portfolio/editorial-brand's own posture). */
.process-flow-editorial{display:flex;flex-direction:column}
.process-editorial-row{display:flex;align-items:baseline;gap:26px;padding:22px 0;border-top:1px solid color-mix(in srgb,var(--site-text) 10%,transparent)}
.process-editorial-row:first-child{border-top:0}
.process-editorial-num{font-size:36px;font-weight:300;line-height:1;color:color-mix(in srgb,var(--site-accent) 55%,var(--site-text) 15%);flex-shrink:0;min-width:52px}
.process-editorial-row strong{font-size:15px;font-weight:600;letter-spacing:-.005em}
/* alternating: a vertical rail with steps alternating indent -- a real
   narrative sequence rather than a checklist (hospitality/community-
   nonprofit's storytelling tone). */
.process-flow-alternating{position:relative;padding-left:4px}
.process-flow-alternating::before{content:"";position:absolute;left:15px;top:6px;bottom:6px;width:1px;background:color-mix(in srgb,var(--site-text) 15%,transparent)}
.process-alt-row{position:relative;display:flex;align-items:flex-start;gap:16px;padding:14px 0 14px 40px}
.process-alt-row:nth-child(even){padding-left:76px}
.process-alt-dot{position:absolute;left:11px;top:19px;width:9px;height:9px;border-radius:50%;background:var(--site-accent)}
.process-alt-body small{display:block;font-size:9px;color:color-mix(in srgb,var(--site-text) 55%,transparent);margin-bottom:4px}
.process-alt-body strong{font-size:13px}
/* compact-cards: tight tactile cards, number + icon + label -- punchy,
   retail-appropriate (ecommerce-showcase). */
.process-flow-compact{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.process-compact-card{display:flex;flex-direction:column;gap:9px;padding:16px;border-radius:12px;background:color-mix(in srgb,var(--site-accent) 6%,var(--site-bg));border:1px solid color-mix(in srgb,var(--site-text) 8%,transparent)}
.process-compact-num{font-size:9px;font-weight:800;letter-spacing:.08em;color:color-mix(in srgb,var(--site-text) 55%,transparent)}
.process-compact-card strong{font-size:12px}
/* large-number: one bold digit per row -- blunt and direct, no ornament
   (local-conversion/launch-campaign's urgency). */
.process-flow-large-number{display:flex;flex-direction:column}
.process-large-row{display:flex;align-items:center;gap:22px;padding:16px 0;border-bottom:1px solid color-mix(in srgb,var(--site-text) 9%,transparent)}
.process-large-row:last-child{border-bottom:0}
.process-large-num{font-size:52px;font-weight:900;line-height:1;letter-spacing:-.03em;color:var(--site-accent);flex-shrink:0;min-width:64px}
.process-large-row strong{font-size:14px}
/* Brand-experience pass: features' restrained/editorial composition mode
   (see pickVariant's 'features' case) -- wider columns and more air than
   the default card grid, since it's chosen specifically for archetypes
   that want a quieter, text-led treatment. */
.features-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:34px 28px;margin-top:6px}
.menu-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:22px}
.menu-group strong{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.menu-group p{margin:0;color:color-mix(in srgb,var(--site-text) 66%,transparent);font-size:12px;line-height:1.5}
.menu-line{display:block;height:9px;border-radius:5px;background:color-mix(in srgb,var(--site-text) 12%,transparent);margin-bottom:9px;width:88%}
.menu-line:nth-child(3){width:65%}
.site-section-reservation{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.site-section-reservation p{margin:0;font-size:20px}
.areas-statement{font-size:15px;color:color-mix(in srgb,var(--site-text) 75%,transparent)}
.site-section-contact button{margin-top:14px}
.contact-facts{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.contact-facts span{padding:7px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--site-text) 16%,transparent);font-size:11px;letter-spacing:.04em;color:color-mix(in srgb,var(--site-text) 75%,transparent)}
/* DESIGN INTELLIGENCE PASS (part 13): a contained surface instead of a
   paragraph + bare input floating in section whitespace. */
.newsletter-surface{max-width:480px;padding:32px;border-radius:16px;background:color-mix(in srgb,var(--site-accent) 7%,var(--site-bg))}
.newsletter-icon{color:var(--site-accent);margin-bottom:14px;display:block}
.newsletter-surface p{margin:0;font-size:16px;letter-spacing:-.01em}
.newsletter-row{display:flex;gap:10px;margin-top:16px;max-width:420px}
.newsletter-row input{flex:1;border-radius:999px;border:1px solid color-mix(in srgb,var(--site-text) 20%,transparent);background:transparent;color:inherit;padding:0 16px;height:44px}
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.testimonials-grid .testimonial-card{padding:20px;border-radius:14px;background:color-mix(in srgb,var(--site-bg-dark) 55%,transparent);border:1px solid rgba(255,255,255,.08)}
.testimonials-grid .testimonial-card p{margin:0 0 10px;font-size:13px;line-height:1.5}
.testimonials-grid .testimonial-card span{font-size:11px;color:color-mix(in srgb,var(--site-text) 60%,transparent)}
.site-section-editorial{padding:0}
.editorial-visual{height:420px}
.editorial-caption{padding:22px 48px;margin:0;font-size:14px;max-width:640px;color:color-mix(in srgb,var(--site-text) 70%,transparent)}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:14px}
.team-card{aspect-ratio:1;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--site-accent) 12%,var(--site-bg-dark))}
.team-card img{width:100%;height:100%;object-fit:cover}
.site-proof-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:18px}
.site-proof-stats strong{display:block;font-size:30px;letter-spacing:-.03em}
.site-proof-stats small{font-size:10px;color:color-mix(in srgb,var(--site-text) 60%,transparent)}
/* OUTPUT QUALITY PASS -- proof's one new variant: a quiet inline line
   instead of a boxed stat grid, for when avoid:generic-cards applies. */
.site-proof-statement{margin:0;font-size:18px;line-height:1.5;font-weight:500;max-width:720px}
.site-proof-statement strong{font-weight:800;color:var(--site-text)}

@media (max-width:900px){
  .builder-site .site-hero.hero-asymmetric{grid-template-columns:1fr;grid-template-rows:auto;padding:32px 22px}
  .hero-asym-visual{grid-column:1;grid-row:auto;min-height:200px}
  .hero-asym-meta{grid-column:1;grid-row:auto}
  .builder-site .site-hero.hero-grid-dashboard{grid-template-columns:1fr}
  .hero-dash-grid{height:220px;margin-top:20px}
  .builder-site .site-hero.hero-collage{grid-template-columns:1fr}
  .hero-collage-stack{height:220px;margin-top:20px}
  .builder-site .site-hero.hero-editorial-rail{grid-template-columns:1fr;min-height:0}
  .hero-editorial-copy{padding:32px 22px}
  .hero-editorial-visual{min-height:240px}
  .hero-product-frame{margin:24px -22px 0}
  .editorial-visual{height:260px}
}

/* ---- V8.3: page/section editor -------------------------------------------
   Lives inside the existing "Advanced customization" collapsible drawer
   (see SITE-PROJECT-V8.3.md part 8) -- deliberately not an overlay on the
   live site preview, so the generated-site preview keeps reading as a real
   website rather than gaining permanent editor chrome. */
.editor-control-block{grid-column:1/-1}
.editor-toolbar{display:flex;gap:8px;margin-bottom:14px}
.editor-toolbar button{border:1px solid #d8dae0;background:#fff;border-radius:999px;font-size:10px;min-height:34px;padding:0 14px;cursor:pointer}
.editor-toolbar button:disabled{opacity:.4;cursor:default}
.editor-toolbar #editorAddPageBtn{margin-left:auto}
.editor-hero-select-label{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#525660;margin-bottom:14px}
.editor-hero-select-label select{width:100%;height:40px;border:1px solid #d8dae0;background:#fff;border-radius:9px;margin-top:6px;padding:0 10px}
.editor-page-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.editor-page-tab{border:1px solid #d8dae0;background:#fff;border-radius:999px;font-size:10px;min-height:32px;padding:0 13px;cursor:pointer}
.editor-page-tab.active{background:#111;color:#fff;border-color:#111}
.editor-page-detail{background:#f7f7f8;border:1px solid #dddfe4;border-radius:12px;padding:14px;margin-bottom:14px}
.editor-page-detail-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.editor-page-detail-row label{font-size:10px;letter-spacing:.05em;color:#6b6f78}
.editor-page-detail-row input{width:100%;height:38px;border:1px solid #d8dae0;background:#fff;border-radius:8px;margin-top:5px;padding:0 10px;font-size:12px}
.editor-slug-row{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid #d8dae0;border-radius:8px;margin-top:5px;padding:0 8px}
.editor-slug-row span{color:#9a9ea7;font-size:12px}
.editor-slug-row input{border:0;height:36px;padding:0;margin:0}
.editor-page-detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.editor-page-detail-actions button{border:1px solid #d8dae0;background:#fff;border-radius:999px;font-size:10px;min-height:32px;padding:0 12px;cursor:pointer}
.editor-page-detail-actions button:disabled{opacity:.4;cursor:default}
.editor-page-detail-actions .editor-danger{border-color:#e3b3ad;color:#a3352a}
.editor-home-note{font-size:11px;color:#6b6f78;align-self:center}
.editor-section-list{display:flex;flex-direction:column;gap:10px}
.editor-section-card{border:1px solid #dddfe4;border-radius:12px;padding:12px;background:#fff}
.editor-section-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.editor-section-card-head strong{font-size:12px}
.editor-section-card-controls{display:flex;gap:5px}
.editor-section-card-controls button{border:1px solid #d8dae0;background:#fff;border-radius:8px;font-size:10px;min-height:28px;padding:0 9px;cursor:pointer}
.editor-section-card-controls button:disabled{opacity:.35;cursor:default}
.editor-section-card-controls .editor-danger{border-color:#e3b3ad;color:#a3352a}
.editor-section-card-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.editor-section-card-row label{font-size:10px;color:#6b6f78}
.editor-section-card-row select{width:100%;height:36px;border:1px solid #d8dae0;background:#fff;border-radius:8px;margin-top:4px;padding:0 8px;font-size:11px}
.editor-section-copy-fields{display:grid;gap:8px;margin-top:10px}
.editor-section-copy-fields label{font-size:10px;color:#6b6f78;display:block}
.editor-section-copy-fields input,.editor-section-copy-fields textarea{width:100%;border:1px solid #d8dae0;background:#fbfbfc;border-radius:8px;margin-top:4px;padding:7px 9px;font-size:12px;font-family:inherit;resize:vertical}
.editor-empty-note{font-size:11px;color:#6b6f78;margin:0}
.editor-import{margin-top:14px;padding-top:14px;border-top:1px solid #dddfe4}
.editor-import label{display:block;font-size:10px;color:#6b6f78;margin-bottom:10px}
.editor-import select{width:100%;height:38px;border:1px solid #d8dae0;background:#fff;border-radius:8px;margin-top:5px;padding:0 10px}
.editor-import>button{border:1px solid #d8dae0;background:#fff;border-radius:999px;font-size:10px;min-height:32px;padding:0 12px;cursor:pointer;margin-bottom:10px}
.editor-import-list{display:flex;flex-direction:column;gap:6px}
.editor-import-row{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;background:#f7f7f8;border-radius:8px;padding:8px 10px}
.editor-import-row button{border:1px solid #d8dae0;background:#fff;border-radius:999px;font-size:10px;min-height:26px;padding:0 10px;cursor:pointer}
@media (max-width:720px){
  .editor-page-detail-row{grid-template-columns:1fr}
  .editor-section-card-row{grid-template-columns:1fr}
}

/* ---- V8.4: functionality module rendering + CTA targeting ----------------
   Module widgets render inside the normal .site-section flow (see
   renderFormModuleWidget/renderLocationModuleWidget/renderActionModuleWidget/
   renderProductModuleWidget in script.js) -- real, interactive form/CTA
   elements, not decorative content, so they use the same --site-accent/
   --site-text theme tokens every other section already uses rather than a
   separate visual style bolted on top. This is a functionality pass, not a
   visual-direction pass: module widgets get one consistent, accessible
   treatment across every generated visual direction rather than 21
   direction-specific skins. */
/* DESIGN INTELLIGENCE PASS (part 12): a contained surface behind the form
   itself (not just a max-width on the section) -- "forms that technically
   work but visually feel unfinished" was mostly this: labels/inputs/button
   sitting directly on the page background with nothing framing them. */
.site-section-module{max-width:560px}
.module-form{display:flex;flex-direction:column;gap:16px;margin-top:10px;padding:26px;border-radius:14px;background:color-mix(in srgb,var(--site-accent) 5%,var(--site-bg));border:1px solid color-mix(in srgb,var(--site-text) 8%,transparent)}
.module-field{display:flex;flex-direction:column;gap:5px}
.module-field label{font-size:11px;color:color-mix(in srgb,var(--site-text) 72%,transparent)}
.module-required-mark{color:#ff7a7a}
/* Field border and fill come from the site's own palette: a fixed white-on-dark border (rgba(255,255,255,.16)) made every
   field invisible on a light site -- the form showed labels over blank space. Dark sites look as before. */
.module-field input,.module-field select,.module-field textarea{
  width:100%;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--site-text) 20%,transparent);background:color-mix(in srgb,var(--site-bg) 92%,var(--site-text) 8%);
  color:inherit;border-radius:9px;padding:12px 13px;font-size:13px;font-family:inherit;outline:none
}
.module-field textarea{resize:vertical;min-height:90px}
.module-field input:focus,.module-field select:focus,.module-field textarea:focus{border-color:var(--site-accent)}
.module-field-error input,.module-field-error select,.module-field-error textarea{border-color:#ff6b6b}
.module-field-err{font-size:11px;color:#ff9a9a;min-height:14px}
.module-field-err:empty{display:none}
.module-submit-btn{align-self:flex-start;border:0;border-radius:999px;padding:13px 22px;min-height:44px;font-size:12px;font-weight:750;background:var(--site-accent);color:#fff;cursor:pointer}
.module-submit-btn:disabled{opacity:.6;cursor:default}
.module-submit-error{font-size:12px;color:#ff9a9a;margin:0}
.module-success{padding:22px 0}
.module-success p{margin:0 0 8px;font-size:15px}
.module-success .module-preview-note{font-size:11px!important;color:color-mix(in srgb,var(--site-text) 55%,transparent)!important;margin:0!important}
.module-map-placeholder{min-height:160px;border-radius:14px;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;margin-top:12px;background:color-mix(in srgb,var(--site-accent) 10%,var(--site-bg-dark));border:1px solid rgba(255,255,255,.08)}
.module-map-note{font-size:13px;color:color-mix(in srgb,var(--site-text) 82%,transparent)}
.module-empty-note{font-size:11px;color:color-mix(in srgb,var(--site-text) 55%,transparent);margin:10px 0 0}
/* FINAL BASELINE POLISH pass, part 1: explicit min-height (not just padding)
   so the button keeps real presence at any font-metrics edge case, and a
   real gap for the trailing icon (was a bare 2px margin -- read as the icon
   crowding the label rather than a deliberately placed arrow). */
.module-cta-btn{border:0;border-radius:999px;padding:13px 22px;min-height:44px;font-size:12px;font-weight:750;background:var(--site-accent);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none}
.module-cta-btn:disabled,.module-cta-btn[disabled]{opacity:.5;cursor:default}
/* The primary hero CTA is the single most important action on the page --
   it gets real elevation over an ordinary module button (bigger min-height,
   more generous padding, slightly larger type) so it always reads as THE
   primary action regardless of which `[data-cta]` ornamental variant the
   Creative Director picks for this archetype (sharp-block/outline-ghost/
   underline-link/floating-badge/solid-pill, below). Even underline-link --
   the most deliberately quiet of the five, used by e.g. premium-consultancy
   and editorial-brand -- only trims horizontal padding (see
   `[data-cta="underline-link"]`), so it still keeps this full vertical
   presence rather than collapsing to inline text. This directly fixes the
   reported bug where a retail hero's real "Shop Now ↗" action rendered as a
   near-invisible link-like sliver (root cause: a since-removed
   `.minimal-link` class that zeroed out all button chrome -- see
   renderHero's minimal-text-only case in script.js/lib/site-render.js). */
.hero-cta-btn{min-height:52px;padding:16px 28px;font-size:13px;letter-spacing:.01em}
.module-product-cta{margin-top:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.module-product-price{margin:0;font-size:14px;font-weight:700}
/* The hero CTA can now render as a real <a href="tel:/mailto:/https:">
   instead of a plain <button> once a CTA target is configured (see
   renderCtaButton) -- this rule gives that link the same base pill
   treatment the button form already gets from `.module-cta-btn`/
   `.hero-cta-btn` above. Direction-specific ornamental variants (sharp-block
   corners, outline-ghost, underline-link, floating-badge shadow, hover
   motion) stay scoped to `button` as before -- reproducing every one of
   those for an <a> element too is a visual-polish concern outside this
   pass's scope, noted here deliberately rather than silently left
   inconsistent. */
a.hero-cta-btn{text-decoration:none}

/* ---- V8.4: module + CTA editor controls -----------------------------------
   Lives inside the same editor-section-card as V8.3's copy/variant fields
   (see renderModuleEditorHtml/renderCtaTargetEditorHtml) -- reuses that
   card's own spacing/border conventions rather than introducing a new
   container style. */
.editor-module-block{margin-top:12px;padding-top:12px;border-top:1px solid #e4e6ea}
.editor-module-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.editor-module-toggle{display:flex;align-items:center;gap:6px;font-size:11px;color:#40444d}
.editor-module-header select{height:34px;border:1px solid #d8dae0;background:#fff;border-radius:8px;padding:0 8px;font-size:11px}
.editor-module-fields{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.editor-module-field-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:#f7f7f8;border-radius:8px;padding:6px 8px}
.editor-module-field-row .editor-module-field-label{flex:1;min-width:100px;height:30px;border:1px solid #d8dae0;background:#fff;border-radius:6px;padding:0 8px;font-size:11px}
.editor-module-field-required{display:flex;align-items:center;gap:4px;font-size:10px;color:#6b6f78;white-space:nowrap}
.editor-module-field-row button{border:1px solid #d8dae0;background:#fff;border-radius:6px;font-size:10px;min-height:26px;min-width:26px;padding:0 6px;cursor:pointer}
.editor-module-field-row button:disabled{opacity:.35;cursor:default}
.editor-module-block>label,.editor-module-block>.editor-module-config-row>label{display:block;font-size:10px;color:#6b6f78;margin-top:8px}
.editor-module-block textarea,.editor-module-block input[type="text"],.editor-module-block select{
  width:100%;border:1px solid #d8dae0;background:#fbfbfc;border-radius:8px;margin-top:4px;padding:7px 9px;font-size:12px;font-family:inherit;resize:vertical
}
.editor-cta-target{margin-top:12px;padding-top:12px;border-top:1px solid #e4e6ea;display:grid;gap:8px}
.editor-cta-target label{font-size:10px;color:#6b6f78;display:block}
.editor-cta-target select,.editor-cta-target input{width:100%;height:36px;border:1px solid #d8dae0;background:#fff;border-radius:8px;margin-top:4px;padding:0 9px;font-size:11px}
@media (max-width:720px){
  .editor-module-field-row{flex-direction:column;align-items:stretch}
  .editor-module-field-row .editor-module-field-label{width:100%}
}


/* CREATIVE DIRECTOR V2 -- the compact creative-direction summary shown
   right after generation, using real creativeBrief values (Mood/Design
   idea/Page behavior/Avoiding), matching the preview-summary chip row's
   own dark, quiet visual language rather than inventing a new style. */
.creative-direction-summary{margin:10px 4px 0;padding:16px 18px;border-radius:16px;background:#15171c;border:1px solid rgba(255,255,255,.08)}
.cds-eyebrow{margin:0 0 12px;font-size:9px;letter-spacing:.16em;color:#7d8290}
.cds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cds-grid small{display:block;font-size:9px;letter-spacing:.06em;color:#7d8290;margin-bottom:5px}
.cds-grid strong{display:block;font-size:12px;line-height:1.4;color:#e7e8ec;font-weight:600}
@media (max-width:720px){
  .cds-grid{grid-template-columns:1fr 1fr;gap:14px}
}

/* ==========================================================================
   RESPONSIVE RELIABILITY PASS (V9.1)
   The generated website (#builderSite / .builder-site) renders directly in
   THIS page's own DOM and shares THIS stylesheet -- there is no iframe, no
   sandboxed document. Before this pass, its "mobile" treatment for most
   properties was driven either by an ancestor CLASS (.builder-device.mobile
   -- works at any real window width, but only ~9 selectors had one) or by
   real @media queries keyed to the REAL BROWSER viewport (the
   ".site-services-cards / .site-proof-stats / .gallery-grid /
   .site-footer-columns" rules above, and the "MOBILE RESPONSIVE SAFETY
   LAYER" hero/nav rules earlier in this file). A real @media query cannot
   see .builder-site's own rendered width -- only the actual browser
   window's -- so switching the in-app Desktop/Tablet/Mobile toggle (which
   only changes .builder-site's own pixel width; see the device-mode rules
   just below) never made those rules fire. That mismatch -- container width
   vs. page viewport width -- was the root cause of "Mobile preview still
   looks like a zoomed desktop site": most generated content kept its full
   desktop grid/typography squeezed into a narrow box instead of actually
   reflowing.
   Below, the same responsive treatment is re-declared with CSS container
   queries (@container) against .builder-site's own inline size. A container
   query measures the element's real layout box -- never the page viewport,
   and never any transform applied to an ancestor (the narrow-real-browser
   "shrink desktop preview to fit" hack above is a pure paint-time
   transform:scale, which never changes the box container queries measure)
   -- so these rules correctly fire in BOTH places that matter:
     (a) inside the builder preview, at whatever width Desktop/Tablet/Mobile
         sets on .builder-site (see below), regardless of the real browser
         window's own size;
     (b) in a real exported/purchased site (lib/export-compiler.js writes
         this exact same styles.css into every export -- see its own
         comment), where .builder-site simply fills the real page, so its
         container width IS the real viewport width there.
   One responsive system, driving the live preview and every export alike.
   Nothing above is removed or overridden away -- the existing class- and
   @media-based rules keep doing exactly what they did (harmless, identical-
   value duplication where they already overlap); this section only adds
   the coverage that was missing. */

.builder-site{container-type:inline-size;container-name:site}

/* ---- Device-mode container widths (script.js applyDeviceMode) ---- */
/* Desktop: no forced width -- .builder-site keeps filling whatever the
   preview panel naturally gives it, unchanged from existing behavior.
   Guarded to real browser widths above the "MOBILE RESPONSIVE SAFETY
   LAYER" breakpoint (721px+) so a genuinely small physical screen keeps
   getting that layer's own full-width/scale-to-fit treatment for the
   builder UI itself instead of a hard-coded 768px box overflowing it --
   see the .builder-device.tablet addition to that layer, above. */
@media (min-width:721px){
  .builder-device.tablet .builder-site{width:768px!important;min-width:0!important;max-width:100%}
  .builder-device.mobile .builder-site{width:390px!important;min-width:0!important;max-width:100%}
}

/* ---- Compact tier (~Tablet, container <=860px): intermediate collapse,
   not desktop, not mobile ---- */
@container site (max-width:860px){
  .site-nav{padding:0 22px}
  .site-nav div{gap:14px;font-size:8px}
  .site-hero{padding:40px 32px;gap:32px}
  .site-copy h3{font-size:clamp(38px,7cqw,58px)!important}
  .site-page-header{padding:44px 32px 28px}
  .site-page-header-title{font-size:clamp(28px,6cqw,40px)}
  .site-services-cards{grid-template-columns:repeat(2,1fr)!important}
  .site-sections{grid-template-columns:repeat(2,1fr)!important}
  .gallery-grid.gallery-layout-grid{grid-template-columns:repeat(2,1fr)!important}
  .gallery-grid.gallery-layout-featured{grid-template-columns:1fr 1fr!important}
  .site-proof-stats{grid-template-columns:repeat(2,1fr)!important}
  .site-footer-columns{grid-template-columns:repeat(2,1fr)!important}
  .hero-collage-stack{grid-template-columns:1fr 1fr}
  .hero-dash-grid{grid-template-columns:1fr 1fr}
  /* FINAL BASELINE POLISH pass, part 3: "desktop may use horizontal
     progression; tablet/mobile should convert cleanly to stacked/vertical
     progression" -- tablet gets the same single-column collapse as mobile
     for process's horizontal-by-default variants (the already-vertical
     ones need no change at any width). */
  .process-flow-numbered,.process-flow-icons,.process-flow-compact{grid-template-columns:1fr!important}
  .process-flow-track,.process-flow-icons::before{display:none}
}

/* ---- Mobile tier (container <=480px): full single-column collapse ---- */
@container site (max-width:480px){
  .site-nav{height:64px;padding:0 17px}
  /* #siteNavLinks specifically -- NOT ".site-nav div", which would also
     match .site-brand-lockup (the business name/logo is a div too) and
     hide the business name at mobile width. Caught by this pass's own
     Playwright harness (v9-responsive-test.js check #11), which found the
     PRE-EXISTING .builder-device.mobile rule had the exact same bug. */
  #siteNavLinks{display:none}
  .site-brand-lockup #siteLogo.active{max-width:112px;max-height:32px}

  .site-page-header{padding:32px 22px 24px}
  .site-page-header-title{font-size:clamp(26px,9cqw,36px)!important}
  .site-page-header-sub{font-size:12px}

  .site-hero{grid-template-columns:1fr!important;min-height:0!important;padding:28px 22px!important;gap:28px}
  .site-copy h3{font-size:46px!important;line-height:.96!important;letter-spacing:-.04em!important}
  .site-visual{height:230px;min-height:0}
  .site-actions{flex-wrap:wrap;gap:12px}
  .visual-mark{font-size:76px}

  .hero-fullbleed-copy,.hero-collage-copy,.hero-stacked-copy{padding-left:4px;padding-right:4px}
  .hero-asymmetric{display:flex;flex-direction:column;gap:18px}
  .hero-collage-stack{grid-template-columns:1fr 1fr}
  .hero-dash-grid{grid-template-columns:1fr 1fr}
  .hero-product-frame{width:100%}
  .hero-poster-headline{font-size:clamp(40px,14cqw,64px)!important}
  .hero-headline-oversized{font-size:clamp(34px,13cqw,54px)!important}
  .hero-asym-headline h3,.hero-collage-copy h3,.hero-fullbleed-copy h3,.hero-stacked-copy h3{font-size:clamp(32px,11cqw,48px)!important}

  .site-sections{grid-template-columns:1fr!important}
  .site-sections>div{border-right:0!important;border-bottom:1px solid color-mix(in srgb,var(--site-text) 18%,transparent)}
  .site-sections>div:last-child{border-bottom:0}

  .site-section{padding:26px 20px}
  .site-services-cards{grid-template-columns:1fr!important}
  .site-proof-stats{grid-template-columns:1fr!important}
  .gallery-grid.gallery-layout-grid{grid-template-columns:repeat(2,1fr)!important}
  .gallery-grid.gallery-layout-featured{grid-template-columns:1fr 1fr!important}
  .gallery-tile-featured{grid-column:span 2;grid-row:auto;aspect-ratio:16/9}
  .site-section-about[data-variant="split"]{grid-template-columns:1fr!important}
  .about-visual{max-width:220px}
  .site-section-cta-banner{flex-direction:column;align-items:flex-start}
  .site-footer-columns{grid-template-columns:1fr!important}

  .features-grid,.testimonials-grid,.team-grid,.process-steps,.menu-groups,.pricing-tiers{grid-template-columns:1fr!important}
  .product-frame,.editorial-visual{height:220px}
  .dash-panel{min-height:80px}
  .product-panel{grid-template-columns:1fr;padding:22px;gap:18px}
  .product-panel:has(.product-panel-wordmark){grid-template-columns:1fr}
  .product-panel-mark{width:56px;height:56px;font-size:26px;border-radius:12px}
  .product-panel-wordmark{min-height:150px;padding:20px 22px;font-size:clamp(34px,11vw,54px)}
  .site-section-editorial.editorial-statement-composition{padding:40px 22px}
  .editorial-statement-text{font-size:clamp(24px,7cqw,32px)}

  /* FINAL BASELINE POLISH pass, part 3: process's horizontal-by-default
     variants convert cleanly to a single stacked column (part 3's explicit
     responsive requirement) -- the already-vertical variants (editorial/
     alternating/large-number) need no override here. */
  .process-flow-numbered,.process-flow-icons,.process-flow-compact{grid-template-columns:1fr!important}
  .process-flow-track,.process-flow-icons::before{display:none}
  .process-alt-row,.process-alt-row:nth-child(even){padding-left:36px}

  .module-form{gap:12px}
  .module-field input,.module-field select,.module-field textarea{width:100%;box-sizing:border-box;font-size:16px}
  .module-submit-btn{width:100%}
  .newsletter-row{flex-direction:column;align-items:stretch}
  .newsletter-row input,.newsletter-row button{width:100%;box-sizing:border-box}

  .site-footer-brand,.site-footer-columns,.site-footer-copy{max-width:100%;overflow-wrap:anywhere}
  .site-footer::before{left:20px;right:20px}
  .site-footer{padding-top:28px;padding-bottom:28px}

  /* DESIGN INTELLIGENCE PASS: new icon/decorative/gallery-composition
     systems, verified at the mobile tier -- single column, no oversized
     icon tiles, decorative primitives shrink or hide rather than crowd a
     390px-wide box (part 16). */
  .gallery-icon-grid{grid-template-columns:1fr!important}
  .icon-led-row{gap:10px}
  .icon-led-row .sr-icon-tile{padding:8px}
  .sr-icon-tile-oversized .sr-icon{width:30px!important;height:30px!important}
  .decor-corner,.decor-grid-motif{display:none}
  .decor-dots{opacity:.5}
}

/* Belt-and-braces: whatever tier fires above, a generated site should
   never itself force the page wider than its own box (item 8's hard
   horizontal-overflow invariant). */
.builder-site,.site-hero,.site-section,.site-nav,.site-footer{max-width:100%}
.builder-site img,.builder-site svg{max-width:100%}

/* UNIFIED ACCOUNT / AUTH-GATED GENERATION pass: the pre-generation sign-in/
   sign-up gate. A plain, full-page overlay + centered card -- the same
   card/button/input tokens used everywhere else on this page (border-radius,
   var(--line), .button/.button-secondary), not a separate visual language.
   z-index sits above .nav (20) since it must cover the header too; body
   scroll is locked (.generation-gate-open) while it's shown. */
.generation-gate-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(13,14,17,.55);backdrop-filter:blur(2px)}
.generation-gate-overlay[hidden]{display:none}
body.generation-gate-open{overflow:hidden}
.generation-gate-card{position:relative;width:100%;max-width:440px;max-height:calc(100vh - 48px);overflow-y:auto;background:#fff;border-radius:var(--radius);padding:34px 30px;box-shadow:0 30px 80px rgba(0,0,0,.28)}
.generation-gate-card h2{margin:0 0 12px;font-size:24px;letter-spacing:-.03em}
.generation-gate-copy{margin:0 0 20px;font-size:14px;line-height:1.55;color:#525660}
.generation-gate-copy strong{color:var(--text)}
.generation-gate-fields{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.generation-gate-fields input{width:100%;height:48px;border:1px solid #d8dae0;background:#fff;padding:0 14px;outline:none;border-radius:10px;font-size:14px;box-sizing:border-box}
.generation-gate-fields input:focus{border-color:#8c93a0}
.generation-gate-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.generation-gate-actions .button{width:100%}
.generation-gate-status{margin:10px 0 0;font-size:12px;color:#525660;min-height:15px}
.generation-gate-status.error{color:#b42318}
.generation-gate-note{margin:14px 0 0;font-size:11px;color:#8a8e97}
.generation-gate-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#525660}
.generation-gate-close:hover{background:#f3f4f6}
@media(max-width:430px){.generation-gate-card{padding:26px 20px 22px;border-radius:20px}.generation-gate-card h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){.generation-gate-overlay{backdrop-filter:none}}
/* ---- PREMIUM_GENERATION_V1 design-token layer -----------------------------------------------------------------
   One coherent system per generated site: type pairing, heading scale, line length, section rhythm, radius.
   Everything is inert unless the container carries data-premium="1" (set from project.design.premiumTokens, in the live
   preview AND in the purchased export), so existing projects render exactly as before. Sizes use container units (cqw)
   because the site lays itself out by container queries, not by viewport. */
.builder-site[data-premium="1"]{font-family:var(--site-font-body);line-height:var(--site-body-line)}
.builder-site[data-premium="1"] :is(.site-hero,.site-page-header,.site-copy,.hero-stacked-copy) :is(h1,h2,h3){font-family:var(--site-font-heading);font-weight:var(--site-heading-weight);letter-spacing:var(--site-heading-tracking);line-height:var(--site-heading-line);text-wrap:balance}
.builder-site[data-premium="1"] :is(.site-hero,.site-copy,.hero-stacked-copy) h3{font-size:var(--site-h1)!important;max-width:var(--site-measure)}
/* quality pass: every hero layout (asymmetric, full-bleed, collage, editorial, minimal, poster ...) gets the display headline scale, not the browser-default h3 (18px) */
.builder-site[data-premium="1"] :is(.hero-fullbleed-copy,.hero-collage-copy,.hero-editorial-copy,.hero-asym-headline,.hero-minimal,.hero-poster) h3,.builder-site[data-premium="1"] .site-hero.hero-minimal>h3{max-width:var(--site-measure)}
.builder-site[data-premium="1"] :is(.hero-fullbleed-copy,.hero-collage-copy,.hero-editorial-copy,.hero-asym-meta)>p:not(:first-child),.builder-site[data-premium="1"] .hero-minimal>p:not(:first-child){max-width:var(--site-measure);font-size:var(--site-body-size);line-height:var(--site-body-line)}
.builder-site[data-premium="1"] :is(.hero-fullbleed-copy,.hero-collage-copy,.hero-editorial-copy,.hero-asym-headline)>p:first-child,.builder-site[data-premium="1"] .hero-minimal>p:first-child{color:color-mix(in srgb,var(--site-accent) 78%,var(--site-text));letter-spacing:.14em;font-size:12px;text-transform:uppercase}
.builder-site[data-premium="1"] .site-page-header-title{font-size:var(--site-h1)!important}
.builder-site[data-premium="1"] :is(.site-copy,.hero-stacked-copy)>p:not(:first-child){max-width:var(--site-measure);font-size:var(--site-body-size);line-height:var(--site-body-line)}
.builder-site[data-premium="1"] .site-section-label{font-family:var(--site-font-heading);font-size:var(--site-h2);font-weight:var(--site-heading-weight);letter-spacing:var(--site-heading-tracking);line-height:1.15;text-transform:none;text-wrap:balance;color:var(--site-text);opacity:1}
.builder-site[data-premium="1"] .site-section-intro{max-width:var(--site-measure);font-size:var(--site-body-size);line-height:var(--site-body-line);text-wrap:pretty}
.builder-site[data-premium="1"] h4{font-family:var(--site-font-heading);letter-spacing:-.01em}
.builder-site[data-premium="1"] :is(.feature-card,.faq-item,.sr-icon-tile,.site-visual,.gallery-tile){border-radius:var(--site-radius)}
@container site (min-width:481px){
  .builder-site[data-premium="1"] .site-section{padding-top:var(--site-space-major);padding-bottom:var(--site-space-major)}
  .builder-site[data-premium="1"] .site-hero{padding-top:calc(var(--site-space-hero) * .55);padding-bottom:calc(var(--site-space-hero) * .55)}
}
@container site (max-width:480px){
  .builder-site[data-premium="1"] .site-section{padding-top:calc(var(--site-space-major) * .55);padding-bottom:calc(var(--site-space-major) * .55)}
}
/* ---- PREMIUM_COMPOSITION_V2: page-level composition ---------------------------------------------------------------
   The page is planned as one visual sequence (lib/premium/composition.js) and stamped onto sections as data-comp-* attributes,
   in the live preview and in the purchased export. Everything is scoped to .builder-site[data-comp="v2"], so projects without
   it render exactly as before. Surface tones work by overriding the site's own colour variables on the section, so every
   existing rule that reads --site-text / --site-bg / --site-accent adapts without being rewritten. */
.builder-site[data-comp="v2"] .site-section{border-top:0}
.builder-site[data-comp="v2"] [data-comp-tone="alt"]{background:var(--site-comp-alt-bg)}
.builder-site[data-comp="v2"] [data-comp-tone="contrast"]{--site-bg:var(--site-comp-contrast-bg);--site-text:var(--site-comp-contrast-ink);--site-muted:var(--site-comp-contrast-muted);--site-accent:var(--site-comp-contrast-accent);--comp-btn-bg:var(--site-comp-contrast-accent);--comp-btn-ink:var(--site-comp-contrast-bg);background:var(--site-comp-contrast-bg);color:var(--site-comp-contrast-ink)}
.builder-site[data-comp="v2"] [data-comp-tone="brand"]{--site-bg:var(--site-comp-brand-bg);--site-text:var(--site-comp-brand-ink);--site-muted:var(--site-comp-brand-muted);--site-accent:var(--site-comp-brand-ink);--comp-btn-bg:var(--site-comp-brand-ink);--comp-btn-ink:var(--site-comp-brand-bg);background:var(--site-comp-brand-bg);color:var(--site-comp-brand-ink)}
.builder-site[data-comp="v2"] :is([data-comp-tone="contrast"],[data-comp-tone="brand"]) :is(.module-cta-btn,.module-submit-btn){background:var(--comp-btn-bg);color:var(--comp-btn-ink)}
.builder-site[data-comp="v2"] :is([data-comp-tone="contrast"],[data-comp-tone="brand"]) :is(p,li,span,small){color:inherit}
.builder-site[data-comp="v2"] :is([data-comp-tone="contrast"],[data-comp-tone="brand"]) :is(input,textarea,select){background:color-mix(in srgb,var(--site-text) 9%,transparent);border:1px solid color-mix(in srgb,var(--site-text) 26%,transparent);color:var(--site-text)}
.builder-site[data-comp="v2"] :is([data-comp-tone="contrast"],[data-comp-tone="brand"]) label{color:var(--site-muted)}

/* toned surfaces run edge to edge (a section-width rule would otherwise leave them as inset boxes); content keeps the site's measure via padding */
.builder-site[data-comp="v2"] :is([data-comp-tone="alt"],[data-comp-tone="contrast"],[data-comp-tone="brand"]){max-width:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;padding-left:max(clamp(24px,6cqw,72px),calc((100% - var(--site-content-width,1120px)) / 2))!important;padding-right:max(clamp(24px,6cqw,72px),calc((100% - var(--site-content-width,1120px)) / 2))!important;border-radius:0}
/* visual weight sets vertical presence */
@container site (min-width:481px){
  .builder-site[data-comp="v2"] [data-comp-weight="strong"]{padding-top:calc(var(--site-space-major) * 1.3);padding-bottom:calc(var(--site-space-major) * 1.3)}
  .builder-site[data-comp="v2"] [data-comp-weight="quiet"]{padding-top:calc(var(--site-space-major) * .78);padding-bottom:calc(var(--site-space-major) * .78)}
}

/* moments */
.builder-site[data-comp="v2"] [data-comp-moment="fullbleed"]{padding-left:0;padding-right:0}
.builder-site[data-comp="v2"] [data-comp-moment="fullbleed"] :is(.site-section-label,.site-section-intro){padding-left:clamp(24px,6cqw,72px);padding-right:clamp(24px,6cqw,72px)}
.builder-site[data-comp="v2"] [data-comp-moment="fullbleed"] :is(.gallery-grid,.editorial-grid){gap:6px}
.builder-site[data-comp="v2"] [data-comp-moment="fullbleed"] :is(.gallery-tile,.site-visual,.editorial-visual){border-radius:0}
.builder-site[data-comp="v2"] [data-comp-moment="fullbleed"] :is(.gallery-tile,.site-visual,.editorial-visual) img{min-height:clamp(220px,34cqw,440px)}
.builder-site[data-comp="v2"] [data-comp-moment="statement"]{text-align:center}
.builder-site[data-comp="v2"] [data-comp-moment="statement"] .site-section-label{font-size:calc(var(--site-h2) * 1.45);max-width:22ch;margin-left:auto;margin-right:auto;justify-content:center}
.builder-site[data-comp="v2"] [data-comp-moment="statement"] :is(.about-statement-text,.areas-statement,.site-section-intro,.about-copy>p:not(.site-section-label)){font-size:clamp(1.1rem,2.6cqw,1.55rem);line-height:1.5;max-width:44ch;margin-left:auto;margin-right:auto;color:var(--site-muted)}
.builder-site[data-comp="v2"] [data-comp-moment="contrastband"] .site-section-label{font-size:calc(var(--site-h2) * 1.2)}
.builder-site[data-comp="v2"] .site-section-about[data-comp-layout="offset"]{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5cqw,64px);align-items:center}
.builder-site[data-comp="v2"] [data-comp-layout="offset"] .about-visual{transform:translateY(-14px)}
/* the step NUMBERS only -- a substring match ([class*="-num"]) also caught the list containers (process-flow-large-number,
   process-flow-numbered), so every step title inherited the numbers' 42px size and -.04em tracking as a fixed -1.7px:
   "Reach out" rendered as "Reachout" */
.builder-site[data-comp="v2"] [data-comp-layout="large-steps"] :is(.process-flow-num,.process-large-num,.process-editorial-num,.process-compact-num,.process-icon-node){font-size:clamp(2.6rem,7cqw,4.6rem);line-height:.9;font-weight:800;letter-spacing:-.04em;color:var(--site-accent);opacity:.95}
.builder-site[data-comp="v2"] [data-comp-layout="quiet-air"]{padding-top:calc(var(--site-space-major) * 1.05);padding-bottom:calc(var(--site-space-major) * 1.05)}

/* open composition: repeated-unit sections keep their frame, everything else loses the box */
.builder-site[data-comp="v2"] [data-comp-open="1"] :is(.faq-item,.testimonial-card,.proof-card,.process-compact-card,.sr-icon-tile,.site-service-card){background:transparent;box-shadow:none;border-radius:0;border-left:0;border-right:0;border-bottom:0;border-top:1px solid var(--site-comp-line)}

/* closing CTA band */
.builder-site[data-comp="v2"] [data-comp-cta="band"]{padding-left:clamp(24px,6cqw,72px);padding-right:clamp(24px,6cqw,72px)}
.builder-site[data-comp="v2"] .site-section-cta-banner[data-comp-cta="band"]{display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:clamp(20px,4cqw,48px);align-items:center;text-align:left}
.builder-site[data-comp="v2"] .site-section-cta-banner[data-comp-cta="band"]>p{font-family:var(--site-font-heading);font-weight:var(--site-heading-weight);letter-spacing:var(--site-heading-tracking);font-size:calc(var(--site-h2) * 1.25);line-height:1.12;margin:0;max-width:22ch;text-wrap:balance}
.builder-site[data-comp="v2"] .site-section-cta-banner[data-comp-cta="band"] :is(.module-cta-btn,button){justify-self:end;padding:1em 1.7em;font-size:1rem}
.builder-site[data-comp="v2"] [data-comp-cta="band"] .module-form{max-width:none}

/* forms: tighter, related to the surface, two short fields per row */
.builder-site[data-comp="v2"] [data-comp-form="1"]{padding-left:clamp(24px,6cqw,72px);padding-right:clamp(24px,6cqw,72px)}
.builder-site[data-comp="v2"] [data-comp-form="1"] .module-form{max-width:720px;margin:0 auto;background:transparent;border:0;box-shadow:none;padding:0}
@container site (min-width:700px){
  .builder-site[data-comp="v2"] [data-comp-form="1"] .module-form{display:grid;grid-template-columns:1fr 1fr;column-gap:20px}
  .builder-site[data-comp="v2"] [data-comp-form="1"] .module-form>:is(.site-section-label,textarea,.module-submit-btn,.module-submit-error){grid-column:1/-1}
}

/* footer: resolves the page */
.builder-site[data-comp="v2"] .site-footer[data-comp-footer="resolved"]{padding:clamp(40px,6cqw,72px) clamp(24px,6cqw,72px) 28px;display:block}
.builder-site[data-comp="v2"] .site-footer-main{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid color-mix(in srgb,var(--site-text) 18%,transparent)}
.builder-site[data-comp="v2"] .site-footer-brand strong{font-family:var(--site-font-heading);font-size:calc(var(--site-h2) * 1.15);font-weight:var(--site-heading-weight);letter-spacing:var(--site-heading-tracking)}
.builder-site[data-comp="v2"] .site-footer-descriptor{margin:8px 0 0;font-size:.95rem;color:var(--site-muted)}
.builder-site[data-comp="v2"] .site-footer .footer-cta-btn{padding:.95em 1.6em}
.builder-site[data-comp="v2"] .site-footer-copy{margin:20px 0 0;font-size:.85rem;color:var(--site-muted)}

/* mobile: every composition collapses to one calm column */
@container site (max-width:700px){
  .builder-site[data-comp="v2"] .site-section-cta-banner[data-comp-cta="band"]{grid-template-columns:1fr}
  .builder-site[data-comp="v2"] .site-section-cta-banner[data-comp-cta="band"] :is(.module-cta-btn,button){justify-self:start}
  .builder-site[data-comp="v2"] .site-section-about[data-comp-layout="offset"]{grid-template-columns:1fr}
  .builder-site[data-comp="v2"] [data-comp-layout="offset"] .about-visual{transform:none}
  .builder-site[data-comp="v2"] [data-comp-moment="statement"] .site-section-label{font-size:calc(var(--site-h2) * 1.15)}
  .builder-site[data-comp="v2"] [data-comp-moment="fullbleed"] :is(.site-section-label,.site-section-intro){padding-left:22px;padding-right:22px}
  .builder-site[data-comp="v2"] .site-footer-main{flex-direction:column;align-items:flex-start}
}

/* ==== PREMIUM_VISUALS_V4: starter visuals (deterministic SVG). Themed entirely from the site's own tokens. ==== */
.visual-starter{position:relative;width:100%;height:100%;min-height:160px;overflow:hidden;border-radius:inherit;background:var(--site-bg)!important;border:0!important;animation:none!important}
.visual-starter::before,.visual-starter::after{content:none!important}
.visual-starter .starter-svg{display:block;width:100%;height:100%;min-height:inherit}
.starter-svg .sv-bg{fill:color-mix(in srgb,var(--site-accent) 7%,var(--site-bg))}
.starter-svg .sv-soft{fill:color-mix(in srgb,var(--site-accent) 14%,transparent)}
.starter-svg .sv-panel{fill:color-mix(in srgb,var(--site-text) 5%,var(--site-bg));stroke:color-mix(in srgb,var(--site-text) 14%,transparent);stroke-width:1}
.starter-svg .sv-panel-top{fill:color-mix(in srgb,var(--site-text) 9%,var(--site-bg))}
.starter-svg .sv-side{fill:color-mix(in srgb,var(--site-text) 7%,var(--site-bg))}
.starter-svg .sv-card{fill:color-mix(in srgb,var(--site-text) 7%,var(--site-bg));stroke:color-mix(in srgb,var(--site-text) 13%,transparent);stroke-width:1}
.starter-svg .sv-card-hi{fill:color-mix(in srgb,var(--site-accent) 16%,var(--site-bg));stroke:color-mix(in srgb,var(--site-accent) 55%,transparent);stroke-width:1.2}
.starter-svg .sv-row{fill:color-mix(in srgb,var(--site-text) 5%,var(--site-bg))}
.starter-svg .sv-bar{fill:color-mix(in srgb,var(--site-text) 26%,var(--site-bg))}
.starter-svg .sv-bar-dim{fill:color-mix(in srgb,var(--site-text) 14%,var(--site-bg))}
.starter-svg .sv-accent{fill:var(--site-accent)}
.starter-svg .sv-dot{fill:var(--site-accent)}
.starter-svg .sv-dot-dim{fill:color-mix(in srgb,var(--site-text) 30%,var(--site-bg))}
.starter-svg .sv-line{stroke:color-mix(in srgb,var(--site-text) 20%,transparent);stroke-width:1;fill:none}
.starter-svg .sv-grid{stroke:color-mix(in srgb,var(--site-text) 8%,transparent);stroke-width:1}
.starter-svg .sv-path{stroke:var(--site-accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.starter-svg .sv-area{fill:color-mix(in srgb,var(--site-accent) 18%,transparent)}
.starter-svg .sv-label{fill:color-mix(in srgb,var(--site-text) 78%,transparent);font:600 14px var(--site-font-body,system-ui,sans-serif)}
.starter-svg .sv-label-sm{fill:color-mix(in srgb,var(--site-text) 55%,transparent);font:600 11px var(--site-font-body,system-ui,sans-serif);letter-spacing:.04em}
.starter-svg .sv-lift{filter:drop-shadow(0 16px 26px color-mix(in srgb,#000 38%,transparent))}
.starter-svg .sv-mono{fill:var(--site-bg);font:700 64px var(--site-font-heading,system-ui,sans-serif)}
.starter-svg .sv-stop-a{stop-color:var(--site-accent);stop-opacity:.28}
.starter-svg .sv-stop-b{stop-color:var(--site-accent-2,var(--site-accent));stop-opacity:.22}
.starter-svg .sv-stop-0{stop-color:var(--site-bg);stop-opacity:0}
/* the starter fills whatever frame its slot already has; product/hero frames must not collapse the way an empty slot did */
.product-frame:has(.visual-starter),.editorial-visual:has(.visual-starter){height:auto!important;aspect-ratio:16/10}
.about-visual:has(.visual-starter){aspect-ratio:4/3;min-height:180px}
.hero-product-body:has(.visual-starter){height:auto!important;overflow:hidden}
.hero-product-body .visual-starter{aspect-ratio:8/5;height:auto;max-height:640px}
.dash-panel-visual .visual-starter{aspect-ratio:16/10;height:auto}
.site-visual:has(.visual-starter){aspect-ratio:16/10}
/* customizer only (preview, never the export): replace affordance on starter media */
.builder-site .visual-starter[data-replaceable]{cursor:pointer}
.starter-replace{position:absolute;right:10px;bottom:10px;z-index:3;padding:6px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--site-text) 25%,transparent);background:color-mix(in srgb,var(--site-bg) 82%,transparent);color:var(--site-text);font:600 12px system-ui,sans-serif;opacity:0;transition:opacity .15s;backdrop-filter:blur(6px);cursor:pointer}
.visual-starter:hover .starter-replace,.starter-replace:focus-visible{opacity:1}
@media (hover:none){.starter-replace{opacity:.92}}

/* quality pass: full-bleed heroes must stay legible over any image (real photo or starter graphic); menu/reservation sections get the site gutter */
.builder-site[data-premium="1"] .hero-fullbleed-scrim{background:linear-gradient(90deg,rgba(8,6,4,.8),rgba(8,6,4,.46) 58%,rgba(8,6,4,.14)),linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 55%)}
.builder-site[data-premium="1"] .hero-fullbleed-copy,.builder-site[data-premium="1"] .hero-fullbleed-copy h3,.builder-site[data-premium="1"] .hero-fullbleed-copy>p{color:#fff!important;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.builder-site[data-premium="1"] .hero-fullbleed-copy>p:first-child{color:rgba(255,255,255,.82)!important}
.builder-site .site-section-menu,.builder-site .site-section-reservation{padding-left:clamp(20px,5vw,56px);padding-right:clamp(20px,5vw,56px)}

/* ==== PREMIUM_PHOTO_LED_V6: editorial feature sections (alternating image / text, full-bleed image, editorial quote) ==== */
.builder-site .site-section-feature{display:grid;align-items:center;overflow:hidden;width:100%!important;max-width:none!important}
.builder-site .site-section-feature .feature-copy{text-align:left}
.builder-site .site-section-feature .feature-copy .feature-headline,.builder-site .site-section-feature .feature-copy .feature-body{text-align:left;margin-left:0}
.builder-site .site-section-feature[data-variant="image-left"],.builder-site .site-section-feature[data-variant="image-right"]{grid-template-columns:1.08fr .92fr;gap:clamp(28px,5.5vw,80px);padding:clamp(36px,6vw,88px) clamp(20px,5vw,64px)}
.builder-site .site-section-feature[data-variant="image-right"] .feature-visual{order:2}
.builder-site .site-section-feature .feature-visual{position:relative;border-radius:var(--site-radius,18px);overflow:hidden;aspect-ratio:4/5;min-height:340px;max-height:640px;background:color-mix(in srgb,var(--site-accent) 10%,var(--site-bg))}
.builder-site .site-section-feature .feature-visual .visual-generated,.builder-site .site-section-feature .feature-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.builder-site .site-section-feature .feature-headline{margin:0 0 16px;font-size:var(--site-h2,clamp(30px,3.4vw,46px));line-height:1.08;letter-spacing:-.02em;font-family:var(--site-font-heading);font-weight:var(--site-heading-weight,600);text-wrap:balance;color:var(--site-text)}
.builder-site .site-section-feature .feature-body{margin:0;max-width:44ch;font-size:var(--site-body-size,17px);line-height:1.65;color:color-mix(in srgb,var(--site-text) 78%,transparent)}
.builder-site .site-section-feature[data-variant="full"]{position:relative;padding:0}
.builder-site .site-section-feature[data-variant="full"] .feature-visual{aspect-ratio:21/9;min-height:420px;max-height:none;border-radius:0}
.builder-site .site-section-feature .feature-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,6,4,.72),rgba(8,6,4,.12) 58%,transparent);z-index:1;pointer-events:none}
.builder-site .site-section-feature[data-variant="full"] .feature-overlay{position:absolute;left:clamp(20px,5vw,64px);right:clamp(20px,5vw,64px);bottom:clamp(24px,4vw,56px);z-index:2;max-width:640px}
.builder-site .site-section-feature[data-variant="full"] .feature-headline,.builder-site .site-section-feature[data-variant="full"] .feature-body{color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.builder-site .site-section-feature[data-variant="quote"]{padding:clamp(56px,9vw,120px) clamp(20px,8vw,120px);text-align:center}
.builder-site .site-section-feature .feature-quote{margin:0 auto;max-width:900px}
.builder-site .site-section-feature .feature-quote p{margin:0;font-family:var(--site-font-heading);font-size:clamp(28px,4.2vw,54px);line-height:1.15;letter-spacing:-.02em;font-weight:var(--site-heading-weight,500);text-wrap:balance;color:var(--site-text)}
.builder-site .site-section-feature .feature-quote cite{display:block;margin-top:22px;font-style:normal;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--site-accent) 75%,var(--site-text))}
/* editorial statement (about/philosophy): large, calm, centred */
.builder-site[data-premium="1"] .site-section-about[data-variant="statement"] .about-statement-text{font-family:var(--site-font-heading);font-size:clamp(24px,3vw,40px);line-height:1.25;letter-spacing:-.015em;max-width:26em;text-wrap:balance}
@media (max-width:820px){
  .builder-site .site-section-feature[data-variant="image-left"],.builder-site .site-section-feature[data-variant="image-right"]{grid-template-columns:1fr;gap:24px;padding:28px 20px}
  .builder-site .site-section-feature[data-variant="image-right"] .feature-visual{order:0}
  .builder-site .site-section-feature .feature-visual{aspect-ratio:4/3;min-height:240px}
  .builder-site .site-section-feature[data-variant="full"] .feature-visual{aspect-ratio:4/3;min-height:320px}
}
.builder-device.mobile .builder-site .site-section-feature[data-variant="image-left"],.builder-device.mobile .builder-site .site-section-feature[data-variant="image-right"]{grid-template-columns:1fr;gap:24px;padding:28px 20px}
.builder-device.mobile .builder-site .site-section-feature[data-variant="image-right"] .feature-visual{order:0}
.builder-device.mobile .builder-site .site-section-feature .feature-visual{aspect-ratio:4/3;min-height:240px}
/* V6: FAQ / first-visit steps read as real content, not fine print */
.builder-site[data-premium="1"] .site-section-faq .faq-list{max-width:820px;margin:0 auto;display:grid;gap:0}
.builder-site[data-premium="1"] .site-section-faq .faq-item{padding:22px 0;border-top:1px solid color-mix(in srgb,var(--site-text) 14%,transparent)}
.builder-site[data-premium="1"] .site-section-faq .faq-item strong{display:block;font-family:var(--site-font-heading);font-size:clamp(18px,1.8vw,22px);line-height:1.3;color:var(--site-text)}
.builder-site[data-premium="1"] .site-section-faq .faq-item p{margin:8px 0 0;font-size:var(--site-body-size,17px);line-height:1.6;color:color-mix(in srgb,var(--site-text) 74%,transparent);max-width:60ch}
.builder-site[data-premium="1"] .process-editorial-row strong,.builder-site[data-premium="1"] .process-large-row strong{font-size:clamp(18px,2vw,24px)}
.builder-site[data-premium="1"] .site-section-faq .faq-item,.builder-site[data-premium="1"] .site-section-faq .faq-item *{text-align:left}
.site-services-cards,.features-grid,.menu-groups,.testimonials-grid,.team-grid{min-width:0}
.site-services-cards>*,.features-grid>*,.menu-groups>*,.testimonials-grid>*,.team-grid>*{min-width:0;overflow-wrap:anywhere}

/* ==== SITEREMADE_VISUAL_ENGINE_V1: 3 new hero families (PRODUCT_STAGE, FLOATING_MEDIA, QUIET_LUXURY) + the
   MEDIA_COMPOSITION / SURFACE_TEXTURE vocabulary applied to editorial features. Every existing hero (fullbleed,
   collage, poster, product-screenshot, editorial-rail, split) also now carries data-hero-family/data-depth. ==== */

/* ---- PRODUCT_STAGE: a centred, staged object with real depth (rings + shadow), not a flat rectangle ---- */
.builder-site .site-hero.hero-product-stage{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;padding:clamp(48px,7vw,96px) clamp(20px,6vw,64px)}
.hero-stage-frame{position:relative;width:min(440px,72vw);aspect-ratio:1;display:grid;place-items:center}
.hero-stage-ring{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--site-accent) 30%,transparent);pointer-events:none}
.hero-stage-ring-a{inset:0}
.hero-stage-ring-b{inset:9%;border-color:color-mix(in srgb,var(--site-accent) 18%,transparent)}
.hero-stage-object{position:relative;z-index:2;width:76%;aspect-ratio:4/5;border-radius:var(--site-radius,16px);overflow:hidden;box-shadow:0 40px 70px -28px rgba(0,0,0,.4),0 10px 24px -12px rgba(0,0,0,.25);background:var(--site-bg-dark)}
.hero-stage-object .visual-generated,.hero-stage-object .site-visual-img{width:100%;height:100%;object-fit:cover}
.hero-stage-headline{margin:0;max-width:16ch;font-size:var(--site-h1,clamp(34px,4.4vw,58px));line-height:1.05;letter-spacing:-.02em}
.hero-stage-sub{margin:0;max-width:44ch;color:color-mix(in srgb,var(--site-text) 72%,transparent)}
@media (max-width:720px){.hero-stage-frame{width:min(320px,84vw)}.hero-stage-object{box-shadow:0 24px 40px -20px rgba(0,0,0,.35)}}
.builder-device.mobile .hero-stage-frame{width:min(280px,78vw)}

/* ---- FLOATING_MEDIA: 2-3 overlapping cards with a real depth hierarchy (back < mid < front, in scale/shadow/blur) ---- */
.builder-site .site-hero.hero-floating-media{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:clamp(48px,7vw,96px) clamp(20px,6vw,64px)}
.hero-float-stack{position:relative;min-height:340px}
.hero-float-card{position:absolute;border-radius:var(--site-radius,14px);overflow:hidden;background:var(--site-bg-dark);width:66%;aspect-ratio:4/3}
.hero-float-card .visual-generated,.hero-float-card .site-visual-img,.hero-float-card .visual-starter{width:100%;height:100%}
.hero-float-card-back{top:0;left:0;opacity:.55;filter:saturate(.75) brightness(.92);box-shadow:0 16px 30px -18px rgba(0,0,0,.3);transform:scale(.86)}
.hero-float-card-mid{top:14%;right:0;width:58%;box-shadow:0 24px 44px -20px rgba(0,0,0,.35);transform:scale(.94)}
.hero-float-card-front{bottom:0;left:8%;width:70%;box-shadow:0 34px 60px -22px rgba(0,0,0,.42);z-index:2}
@media (max-width:900px){.builder-site .site-hero.hero-floating-media{grid-template-columns:1fr}.hero-float-stack{min-height:260px;margin-top:8px}.hero-float-card{width:60%}.hero-float-card-mid{width:54%}.hero-float-card-front{width:64%}}
.builder-device.mobile .site-hero.hero-floating-media{grid-template-columns:1fr}
.builder-device.mobile .hero-float-stack{min-height:220px}

/* ---- QUIET_LUXURY: restrained -- generous whitespace, small type, one soft image, no dense elements ---- */
.builder-site .site-hero.hero-quiet-luxury{display:grid;grid-template-columns:1fr .9fr;gap:clamp(40px,6vw,96px);align-items:center;padding:clamp(64px,9vw,128px) clamp(20px,7vw,80px)}
.hero-quiet-eyebrow{margin:0 0 18px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--site-accent) 70%,var(--site-text))}
.hero-quiet-headline{margin:0 0 20px;font-size:clamp(28px,3.2vw,44px);line-height:1.18;letter-spacing:-.01em;max-width:16ch;font-weight:var(--site-heading-weight,500)}
.hero-quiet-sub{margin:0 0 28px;max-width:42ch;color:color-mix(in srgb,var(--site-text) 68%,transparent);line-height:1.7}
.hero-quiet-visual{border-radius:var(--site-radius,10px);overflow:hidden;aspect-ratio:4/5;min-height:280px}
.hero-quiet-visual .visual-generated,.hero-quiet-visual .site-visual-img,.hero-quiet-visual .visual-starter{width:100%;height:100%}
@media (max-width:820px){.builder-site .site-hero.hero-quiet-luxury{grid-template-columns:1fr}.hero-quiet-visual{order:-1;min-height:220px}}
.builder-device.mobile .site-hero.hero-quiet-luxury{grid-template-columns:1fr}
.builder-device.mobile .hero-quiet-visual{order:-1;min-height:200px}

/* ---- MEDIA_COMPOSITION treatments (Part 5), applied to editorialFeature's existing image-left/image-right frame ---- */
.site-section-feature .feature-visual.media-oversized{aspect-ratio:16/10;margin:0 -24px}
.site-section-feature .feature-visual.media-offset{aspect-ratio:4/5;transform:translateY(-18px)}
.site-section-feature .feature-visual.media-vertical{aspect-ratio:3/4;max-width:420px}
@media (max-width:720px){.site-section-feature .feature-visual.media-oversized{margin:0}.site-section-feature .feature-visual.media-offset{transform:none}}

/* ---- SURFACE_TEXTURE (Part 7): a tasteful pattern layered on top of whichever tone a section already resolved to.
   Deliberately restrained -- see lib/premium/visual-engine.js's surfaceTextureFor comment on how rarely this is used. */
[data-surface-texture="radial-field"]{background-image:radial-gradient(circle at 18% 20%,color-mix(in srgb,var(--site-accent) 12%,transparent),transparent 45%),radial-gradient(circle at 85% 80%,color-mix(in srgb,var(--site-accent-2,var(--site-accent)) 10%,transparent),transparent 45%)}
[data-surface-texture="grid-technical"]{background-image:linear-gradient(color-mix(in srgb,var(--site-text) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--site-text) 6%,transparent) 1px,transparent 1px);background-size:32px 32px}
[data-surface-texture="editorial-paper"]{background-image:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--site-text) 4%,transparent),transparent 60%)}

/* ==== SITEREMADE_VISUAL_ENGINE_V1.1: depth-per-section, remaining media compositions, surface activation ==== */

/* Part 8: real per-section depth, driven by the page's own composition pacing (data-depth, stamped by comp-stamp.js).
   Only ever applied to a section that carries a media treatment (editorialFeature) -- a plain text/FAQ/process
   section never receives a depth attribute at all, so it is never affected here. */
.site-section-feature[data-depth="DRAMATIC"] .feature-visual{box-shadow:0 42px 70px -26px rgba(0,0,0,.4);transform:translateY(-6px)}
.site-section-feature[data-depth="LAYERED"] .feature-visual{box-shadow:0 26px 46px -22px rgba(0,0,0,.3)}
.site-section-feature[data-depth="SUBTLE"] .feature-visual{box-shadow:0 12px 24px -16px rgba(0,0,0,.2)}
.site-section-feature[data-depth="FLAT"] .feature-visual{box-shadow:none}
@media (max-width:720px){.site-section-feature[data-depth] .feature-visual{transform:none}}

/* Part 6: OVERLAPPING_PAIR -- a small echo of the hero's own image overlapping the corner (zero new image spend) */
.site-section-feature .feature-visual.media-overlap-pair{position:relative;overflow:visible}
.feature-visual-echo{position:absolute;left:-10%;bottom:-12%;width:46%;aspect-ratio:1;border-radius:var(--site-radius,12px);overflow:hidden;box-shadow:0 20px 36px -18px rgba(0,0,0,.35);border:3px solid var(--site-bg);z-index:2}
.feature-visual-echo .visual-generated,.feature-visual-echo .site-visual-img,.feature-visual-echo .visual-starter{width:100%;height:100%}
@media (max-width:720px){.feature-visual-echo{width:38%;left:-6%;bottom:-8%}}

/* FULL_WIDTH_BAND (renamed from the plain "oversized" treatment on the full-bleed feature variant) */
.site-section-feature .feature-visual.media-full-band{aspect-ratio:21/9}

/* VISUAL_QUOTE already renders as .feature-quote; data-media-comp="VISUAL_QUOTE" is present for instrumentation only */

/* Part 7: activated surface textures on a real section (not just the hero) -- same texture classes V1 defined,
   scoped here to whichever element actually carries the attribute (a .site-section-feature in practice). */
.site-section-feature[data-surface-texture]{border-radius:var(--site-radius,14px)}

/* =====================================================================
   SITEREMADE MOTION ENGINE V1
   Additive only -- every rule below is scoped to a NEW attribute
   (data-reveal/data-stagger/data-hero-motion/data-depth-motion/
   data-sticky) this pass introduces, or generalises an EXISTING mechanism
   (.sr-reveal/.sr-revealed, --stagger-step) to more values. Nothing above
   this block is edited. Every animated property below is transform/
   opacity/clip-path only (Part 22) -- never width/height/top/left. Every
   rule here is also covered by the reduced-motion/data-motion="none"
   overrides at the end of this block (Part 20).
   ===================================================================== */

/* ---- Reveal vocabulary (Parts 3, 7, 10, 11) --------------------------
   `.sr-reveal` (existing, unchanged) is the RISE default -- these
   `[data-reveal]` variants override its transform/transition for a
   section that asked for something else. FADE/NONE are strictly
   quieter than the default and so need no override of their own transform
   beyond what's written here; SLIDE/SCALE/MASK are genuinely different
   treatments. */
.sr-reveal[data-reveal="FADE"]{transform:none}
.sr-reveal[data-reveal="NONE"]{opacity:1;transform:none;transition:none}
.sr-reveal[data-reveal="SLIDE"]{transform:translateX(calc(var(--reveal-y) * 1.6))}
.sr-reveal[data-reveal="SLIDE"].sr-revealed{transform:none}
.sr-reveal[data-reveal="SCALE"]{transform:scale(.96)}
.sr-reveal[data-reveal="SCALE"].sr-revealed{transform:scale(1)}
/* MASK (Part 10/11): the section's own text still just fades in place
   (clipping copy would read as a bug, not a premium effect) -- the wipe
   is scoped to the section's OWN media element only, so "reveal from
   crop" reads on the photograph without ever touching the layout. */
.sr-reveal[data-reveal="MASK"] .feature-visual,
.sr-reveal[data-reveal="MASK"] .gallery-tile,
.sr-reveal[data-reveal="MASK"] .site-visual{clip-path:inset(0 100% 0 0);transition:clip-path var(--reveal-dur) cubic-bezier(.2,.8,.2,1)}
.sr-reveal[data-reveal="MASK"].sr-revealed .feature-visual,
.sr-reveal[data-reveal="MASK"].sr-revealed .gallery-tile,
.sr-reveal[data-reveal="MASK"].sr-revealed .site-visual{clip-path:inset(0 0 0 0)}

/* ---- Stagger, generalised (Part 8) ------------------------------------
   Exactly the same delay ladder already built for `.process-flow>*`,
   applied to ANY container the motion engine marked `[data-stagger]`
   (card grids, stats, logo lists, media clusters) -- capped at 6 real
   steps; anything past the 6th shares the 6th's own delay rather than
   queuing indefinitely (Part 8's explicit "not 20 elements one by one"). */
.sr-reveal[data-stagger]>*{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.sr-reveal.sr-revealed[data-stagger]>*{opacity:1;transform:none}
.sr-reveal.sr-revealed[data-stagger]>*:nth-child(2){transition-delay:calc(var(--stagger-step) * 1)}
.sr-reveal.sr-revealed[data-stagger]>*:nth-child(3){transition-delay:calc(var(--stagger-step) * 2)}
.sr-reveal.sr-revealed[data-stagger]>*:nth-child(4){transition-delay:calc(var(--stagger-step) * 3)}
.sr-reveal.sr-revealed[data-stagger]>*:nth-child(5){transition-delay:calc(var(--stagger-step) * 4)}
.sr-reveal.sr-revealed[data-stagger]>*:nth-child(n+6){transition-delay:calc(var(--stagger-step) * 5)}

/* ---- Hero motion (Part 6) ----------------------------------------------
   One entrance treatment per hero-motion pattern, always GPU-safe
   (transform/opacity). A CONTINUOUS loop (the "slow float/drift" the
   brief asks for) only ever runs at MODERATE/EXPRESSIVE -- Part 4's own
   point that visual intensity and motion intensity are independent axes
   means a SUBTLE business gets the one-shot entrance and stops there. */
.site-hero[data-hero-motion]{--hero-in-dur:1.1s}
.site-hero[data-hero-motion] .hero-stage-object,
.site-hero[data-hero-motion] .hero-quiet-visual,
.site-hero[data-hero-motion] .hero-fullbleed-media,
.site-hero[data-hero-motion] .hero-product-frame,
.site-hero[data-hero-motion] .hero-editorial-visual,
.site-hero[data-hero-motion] .site-visual{opacity:0;transform:scale(.97);transition:opacity var(--hero-in-dur) cubic-bezier(.2,.8,.2,1),transform var(--hero-in-dur) cubic-bezier(.2,.8,.2,1)}
.site-hero[data-hero-motion].sr-revealed .hero-stage-object,
.site-hero[data-hero-motion].sr-revealed .hero-quiet-visual,
.site-hero[data-hero-motion].sr-revealed .hero-fullbleed-media,
.site-hero[data-hero-motion].sr-revealed .hero-product-frame,
.site-hero[data-hero-motion].sr-revealed .hero-editorial-visual,
.site-hero[data-hero-motion].sr-revealed .site-visual{opacity:1;transform:none}
/* Copy reveals a beat after the media (Part 6: "text reveal separate from
   object") -- never the reverse, so the media always reads as the lead. */
.site-hero[data-hero-motion] .hero-stage-headline,.site-hero[data-hero-motion] .hero-stage-sub,
.site-hero[data-hero-motion] .hero-quiet-headline,.site-hero[data-hero-motion] .hero-quiet-sub,
.site-hero[data-hero-motion] .hero-fullbleed-copy,.site-hero[data-hero-motion] .site-copy{opacity:0;transform:translateY(10px);transition:opacity .8s ease .15s,transform .8s ease .15s}
.site-hero[data-hero-motion].sr-revealed .hero-stage-headline,.site-hero[data-hero-motion].sr-revealed .hero-stage-sub,
.site-hero[data-hero-motion].sr-revealed .hero-quiet-headline,.site-hero[data-hero-motion].sr-revealed .hero-quiet-sub,
.site-hero[data-hero-motion].sr-revealed .hero-fullbleed-copy,.site-hero[data-hero-motion].sr-revealed .site-copy{opacity:1;transform:none}

/* STAGE_REVEAL (PRODUCT_STAGE): rings drift slowly; object gets a tiny
   continuous float. Ring drift is the "background object drift" Part 6/12
   ask for -- never a bounce, never a spin. */
@keyframes heroStageRingDrift{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(3deg) scale(1.03)}}
@keyframes heroStageFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.site-hero[data-hero-motion="STAGE_REVEAL"][data-motion-intensity="MODERATE"].sr-revealed .hero-stage-ring,
.site-hero[data-hero-motion="STAGE_REVEAL"][data-motion-intensity="EXPRESSIVE"].sr-revealed .hero-stage-ring{animation:heroStageRingDrift 9s ease-in-out infinite}
.site-hero[data-hero-motion="STAGE_REVEAL"][data-motion-intensity="EXPRESSIVE"].sr-revealed .hero-stage-object{animation:heroStageFloat 7s ease-in-out infinite}

/* FLOAT (FLOATING_MEDIA/COLLAGE): staggered depth entrance, back-to-front
   (Part 6: "staggered card entry, slight parallax between layers"); a
   continuous drift only at EXPRESSIVE, each layer on its own phase so the
   stack never moves as one rigid block. */
.site-hero[data-hero-motion="FLOAT"] .hero-float-card,.site-hero[data-hero-motion="FLOAT"] .collage-card{opacity:0;transform:translateY(16px) scale(.97);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.site-hero[data-hero-motion="FLOAT"].sr-revealed .hero-float-card,.site-hero[data-hero-motion="FLOAT"].sr-revealed .collage-card{opacity:1;transform:none}
.site-hero[data-hero-motion="FLOAT"].sr-revealed .hero-float-card-mid,.site-hero[data-hero-motion="FLOAT"].sr-revealed .collage-card-2{transition-delay:.12s}
.site-hero[data-hero-motion="FLOAT"].sr-revealed .hero-float-card-front{transition-delay:.24s}
@keyframes heroFloatDriftA{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes heroFloatDriftB{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.site-hero[data-hero-motion="FLOAT"][data-motion-intensity="EXPRESSIVE"].sr-revealed .hero-float-card-back{animation:heroFloatDriftB 8s ease-in-out infinite}
.site-hero[data-hero-motion="FLOAT"][data-motion-intensity="EXPRESSIVE"].sr-revealed .hero-float-card-front{animation:heroFloatDriftA 6.5s ease-in-out infinite}

/* PARALLAX (FULL_BLEED_CINEMATIC): a slow, controlled Ken-Burns scale on
   the image itself -- "slow image scale or controlled pan" (Part 6),
   never a hard zoom. Runs continuously at MODERATE+ only; SUBTLE keeps
   just the shared entrance fade above. */
@keyframes heroCinematicScale{0%{transform:scale(1.06)}100%{transform:scale(1.14)}}
.site-hero[data-hero-motion="PARALLAX"][data-motion-intensity="MODERATE"] .hero-fullbleed-media .site-visual-img,
.site-hero[data-hero-motion="PARALLAX"][data-motion-intensity="EXPRESSIVE"] .hero-fullbleed-media .site-visual-img{animation:heroCinematicScale 18s ease-out infinite alternate}

/* EDITORIAL_REVEAL (EDITORIAL_SPLIT/FRAME_WITHIN_FRAME): the image leads,
   the copy offsets slightly against it (Part 6: "restrained text offset,
   subtle opposing motion") -- both already covered by the shared entrance
   rule above; this adds only the "opposing" horizontal nuance. */
.site-hero[data-hero-motion="EDITORIAL_REVEAL"] .site-copy,.site-hero[data-hero-motion="EDITORIAL_REVEAL"] .hero-editorial-copy{transform:translateY(10px) translateX(-6px)}
.site-hero[data-hero-motion="EDITORIAL_REVEAL"].sr-revealed .site-copy,.site-hero[data-hero-motion="EDITORIAL_REVEAL"].sr-revealed .hero-editorial-copy{transform:none}

/* ---- Depth motion / restrained parallax (Part 9) ----------------------
   PARALLAX is the only depth-motion level driven by scroll position (a
   single shared, passive scroll listener updates --parallax-y only for
   whatever is currently in view -- see SITE_RUNTIME_JS/initSiteMotion);
   SUBTLE/LAYERED keep Visual Engine's existing STATIC box-shadow depth and
   add no scroll-linked transform of their own. Never applied to a form,
   FAQ or dense text block (depthForSection already refuses those a depth
   value at all, so the attribute is simply absent there). */
[data-depth-motion="PARALLAX"]{transform:translateY(var(--parallax-y,0px))}
@media (max-width:640px){[data-depth-motion="PARALLAX"]{transform:none!important}}

/* ---- Sticky / pinned-light feature (Part 15) --------------------------
   At most one per page (editorial.js's own pickStickySection guarantees
   this structurally); the media column holds while its own copy scrolls
   past it. Reverts to the normal stacked flow below tablet width (Part 21:
   "no 500vh nonsense", "mobile: normal stacked flow"). */
@media (min-width:900px){
  .site-section-feature[data-sticky="LIGHT"]{align-items:flex-start}
  .site-section-feature[data-sticky="LIGHT"] .feature-visual{position:sticky;top:32px;align-self:start}
}

/* ---- Header motion (Part 18) ------------------------------------------
   Wired onto the EXISTING `data-nav="minimal-until-scroll"` style choice,
   which until this pass was a purely static, always-transparent look with
   no scroll behaviour behind its own name. A shared scroll listener (see
   SITE_RUNTIME_JS/initSiteMotion) toggles `data-nav-scrolled` past a small
   threshold; every other nav style is untouched. */
.builder-site[data-nav="minimal-until-scroll"] .site-nav{transition:background-color .3s ease,border-color .3s ease,backdrop-filter .3s ease}
.builder-site[data-nav="minimal-until-scroll"] .site-nav[data-nav-scrolled="1"]{background:color-mix(in srgb,var(--site-bg) 92%,transparent)!important;border-bottom-color:color-mix(in srgb,var(--site-text) 14%,transparent)!important;backdrop-filter:saturate(1.1) blur(8px)}

/* ---- Final CTA / footer motion (Part 19) ------------------------------
   The footer already reveals like any other `.site-section`; this gives
   the FINAL cta band a very slightly stronger entrance so the page reads
   as ending with intent rather than just stopping. */
.site-section-cta.sr-reveal{transform:translateY(calc(var(--reveal-y) * 1.3))}

/* ---- Mobile simplification (Part 21) -----------------------------------
   Depth-motion parallax already turns off above (640px). Hero drift/float
   loops are a desktop-only refinement -- disabling them on narrow screens
   is "simplify", not "turn everything off": the one-shot entrance reveals
   above are untouched and still play on every width. */
@media (max-width:640px){
  .site-hero[data-hero-motion] .hero-stage-ring,.site-hero[data-hero-motion] .hero-stage-object,
  .site-hero[data-hero-motion] .hero-float-card-back,.site-hero[data-hero-motion] .hero-float-card-front,
  .site-hero[data-hero-motion] .hero-fullbleed-media .site-visual-img{animation:none!important}
}

/* ---- Reduced motion / kill switch (Part 20) ---------------------------
   Same belt-and-suspenders pattern as the existing FINAL BASELINE POLISH
   overrides above: every animated property this whole block introduces is
   named again here, so prefers-reduced-motion and the pre-existing
   data-motion="none" switch both fully neutralise it, not just the parts
   that happen to share a selector with the older system. */
@media (prefers-reduced-motion:reduce){
  .sr-reveal[data-reveal],.sr-reveal[data-stagger]>*,
  .site-hero[data-hero-motion] .hero-stage-object,.site-hero[data-hero-motion] .hero-quiet-visual,.site-hero[data-hero-motion] .hero-fullbleed-media,.site-hero[data-hero-motion] .hero-product-frame,.site-hero[data-hero-motion] .hero-editorial-visual,.site-hero[data-hero-motion] .site-visual,
  .site-hero[data-hero-motion] .hero-stage-headline,.site-hero[data-hero-motion] .hero-stage-sub,.site-hero[data-hero-motion] .hero-quiet-headline,.site-hero[data-hero-motion] .hero-quiet-sub,.site-hero[data-hero-motion] .hero-fullbleed-copy,.site-hero[data-hero-motion] .site-copy,
  .site-hero[data-hero-motion] .hero-float-card,.site-hero[data-hero-motion] .collage-card,
  .site-section-cta.sr-reveal{opacity:1!important;transform:none!important;transition:none!important;clip-path:none!important}
  .site-hero[data-hero-motion] .hero-stage-ring,.site-hero[data-hero-motion] .hero-float-card-back,.site-hero[data-hero-motion] .hero-float-card-front,.site-hero[data-hero-motion] .hero-fullbleed-media .site-visual-img{animation:none!important}
  [data-depth-motion="PARALLAX"]{transform:none!important}
  .site-section-feature[data-sticky="LIGHT"] .feature-visual{position:static!important}
}
.builder-site[data-motion="none"] .sr-reveal[data-reveal],.builder-site[data-motion="none"] .sr-reveal[data-stagger]>*,
.builder-site[data-motion="none"] .site-hero[data-hero-motion] .hero-stage-object,.builder-site[data-motion="none"] .site-hero[data-hero-motion] .hero-quiet-visual,.builder-site[data-motion="none"] .site-hero[data-hero-motion] .hero-fullbleed-media,.builder-site[data-motion="none"] .site-hero[data-hero-motion] .hero-product-frame,.builder-site[data-motion="none"] .site-hero[data-hero-motion] .hero-editorial-visual,.builder-site[data-motion="none"] .site-hero[data-hero-motion] .site-visual,
.builder-site[data-motion="none"] .site-hero[data-hero-motion] .hero-float-card,.builder-site[data-motion="none"] .site-hero[data-hero-motion] .collage-card,
.builder-site[data-motion="none"] .site-section-cta.sr-reveal{opacity:1!important;transform:none!important;transition:none!important;clip-path:none!important}
.builder-site[data-motion="none"] .site-hero[data-hero-motion] .hero-stage-ring,.builder-site[data-motion="none"] .site-hero[data-hero-motion] .hero-float-card-back,.builder-site[data-motion="none"] .site-hero[data-hero-motion] .hero-float-card-front,.builder-site[data-motion="none"] .site-hero[data-hero-motion] .hero-fullbleed-media .site-visual-img{animation:none!important}
.builder-site[data-motion="none"] [data-depth-motion="PARALLAX"]{transform:none!important}
/* ==== HERO DIRECTION: art-directed moving hero ==========================================================
   Markup: lib/premium/hero-direction.js renderCinemaHero (shared by the live preview and the export).
   Motion rules: transform/opacity only (compositor-friendly); every loop is `alternate` + ease-in-out so it
   reverses smoothly instead of jumping; the one-shot intro lives on the .cinema-cam WRAPPER and the loop on its
   child, so the two never fight over one transform; the headline itself never moves. prefers-reduced-motion
   stops everything (bottom of this block). The site-wide data-motion="none" switch keeps governing section
   reveals and hovers; the hero camera stays on at its gentle strength (it is the hero's point). */
.builder-site .site-hero.hero-cinema{display:block;position:relative;overflow:hidden;max-width:none;margin:0;padding:0!important;min-height:0;isolation:isolate;align-items:stretch;justify-content:flex-start;text-align:left;grid-template-columns:none;grid-template-rows:none;gap:0}
/* the root carries the planner's classic hero choice as data-hero="..." (e.g. fullbleed-image sets align-items:flex-end); the reset above keeps those rules from reshaping a directed hero */
.hero-cinema .cinema-media{position:relative}
.hero-cinema .cinema-cam{position:absolute;inset:0;overflow:hidden;animation:sr-cam-intro 1.8s cubic-bezier(.16,.84,.24,1) both}
.hero-cinema .cinema-cam>*{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;border-radius:0;object-fit:cover;transform-origin:var(--cam-origin,50% 50%);will-change:transform;backface-visibility:hidden}
.hero-cinema .cinema-cam>.visual-generated{min-height:0}
.hero-cinema .cinema-copy>*{animation:sr-copy-in .9s cubic-bezier(.2,.7,.2,1) both}
/* live preview: re-rendered on every edit -- after the first render the intro is skipped and the loop resumes at its current phase (renderSections sets --cam-phase) */
.hero-cinema.cinema-no-intro .cinema-cam,.hero-cinema.cinema-no-intro .cinema-copy>*{animation:none}
.hero-cinema .cinema-copy>*:nth-child(2){animation-delay:.12s}.hero-cinema .cinema-copy>*:nth-child(3){animation-delay:.24s}.hero-cinema .cinema-copy>*:nth-child(4){animation-delay:.36s}.hero-cinema .cinema-copy>*:nth-child(5){animation-delay:.5s}
.hero-cinema .cinema-copy h3{font-size:clamp(40px,5.4cqw,86px);line-height:.94;letter-spacing:-.045em;margin:14px 0 18px;max-width:13ch;text-wrap:balance}
.hero-cinema .cinema-kicker{font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin:0;font-weight:700}
.hero-cinema .cinema-sub{font-size:clamp(15px,1.35cqw,19px);line-height:1.55;max-width:44ch;margin:0}
.hero-cinema .site-actions{margin-top:28px}

/* camera loops (full strength; [data-camera-strength="gentle"] swaps to the slower, smaller set) */
@keyframes sr-cam-intro{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}
@keyframes sr-copy-in{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes sr-cam-push{from{transform:scale(1.06) translate3d(1.5%,1%,0)}to{transform:scale(1.24) translate3d(-3.5%,-2.5%,0)}}
@keyframes sr-cam-push-g{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.2%,-.9%,0)}}
@keyframes sr-cam-pan{from{transform:scale(1.22) translate3d(-7%,1%,0)}to{transform:scale(1.22) translate3d(7%,-1.5%,0)}}
@keyframes sr-cam-pan-g{from{transform:scale(1.11) translate3d(-3.2%,0,0)}to{transform:scale(1.11) translate3d(3.2%,-.6%,0)}}
@keyframes sr-cam-rise{from{transform:scale(1.18) translate3d(0,5%,0)}to{transform:scale(1.18) translate3d(0,-5%,0)}}
@keyframes sr-cam-sink{from{transform:scale(1.9) translate3d(3.5%,-4%,0)}to{transform:scale(1.9) translate3d(-3.5%,4%,0)}}
@keyframes sr-cam-breathe{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.17) translate3d(0,-2.5%,0)}}
@keyframes sr-cam-scroll{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.15) translate3d(0,-6%,0)}}
@keyframes sr-drift-y{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-14px,0)}}
@keyframes sr-drift-y2{from{transform:translate3d(0,-6px,0)}to{transform:translate3d(0,10px,0)}}
@keyframes sr-device-tilt{from{transform:perspective(1400px) rotateX(9deg) rotateY(-9deg) translate3d(0,0,0)}to{transform:perspective(1400px) rotateX(4deg) rotateY(-3deg) translate3d(0,-10px,0)}}
@keyframes sr-sweep{0%{transform:translate3d(-130%,0,0) skewX(-18deg)}38%,100%{transform:translate3d(260%,0,0) skewX(-18deg)}}
@keyframes sr-glow{from{transform:scale(.92);opacity:.75}to{transform:scale(1.08);opacity:1}}
@keyframes sr-light-drift{from{transform:translate3d(-8%,0,0)}to{transform:translate3d(10%,4%,0)}}
@keyframes sr-halo-spin{to{transform:rotate(360deg)}}
@keyframes sr-orb-a{from{transform:translate3d(-8%,-6%,0) scale(1)}to{transform:translate3d(14%,10%,0) scale(1.25)}}
@keyframes sr-orb-b{from{transform:translate3d(10%,8%,0) scale(1.15)}to{transform:translate3d(-12%,-6%,0) scale(.9)}}
@keyframes sr-orb-c{from{transform:translate3d(0,12%,0) scale(.9)}to{transform:translate3d(8%,-10%,0) scale(1.2)}}
@keyframes sr-ticker{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.hero-cinema[data-camera="push"] .cinema-cam>*{animation:sr-cam-push 11s cubic-bezier(.45,0,.55,1) var(--cam-phase,0s) infinite alternate}
.hero-cinema[data-camera="push"][data-camera-strength="gentle"] .cinema-cam>*{animation:sr-cam-push-g 20s ease-in-out var(--cam-phase,0s) infinite alternate}
.hero-cinema[data-camera="pan"] .cinema-cam>*{animation:sr-cam-pan 14s cubic-bezier(.45,0,.55,1) var(--cam-phase,0s) infinite alternate}
.hero-cinema[data-camera="pan"][data-camera-strength="gentle"] .cinema-cam>*{animation:sr-cam-pan-g 24s ease-in-out var(--cam-phase,0s) infinite alternate}
.hero-cinema[data-camera="parallax"] .cinema-frame-main .cinema-cam>*{animation:sr-cam-rise 12s ease-in-out var(--cam-phase,0s) infinite alternate}
.hero-cinema .cinema-cam-detail>*{transform:scale(1.9)} /* the detail crop stays a detail crop when motion is off */
.hero-cinema[data-camera="parallax"] .cinema-cam-detail>*{--cam-origin:50% 62%;animation:sr-cam-sink 12s ease-in-out infinite alternate}
.hero-cinema[data-camera="breathe"] .cinema-cam>*{animation:sr-cam-breathe 12s ease-in-out var(--cam-phase,0s) infinite alternate}
.hero-cinema[data-camera="float"] .cinema-cam>*{animation:sr-cam-scroll 11s ease-in-out var(--cam-phase,0s) infinite alternate}

/* -- PRODUCT_CLOSEUP: the product, close and lit, on a dark brand-tinted stage; the range beside it -- */
.builder-site .site-hero.hero-cinema-product{background:radial-gradient(120% 90% at 72% 48%,color-mix(in srgb,var(--site-accent) 34%,#0b0b0e) 0,color-mix(in srgb,var(--site-accent) 12%,#08080a) 48%,#060607 100%)!important;color:#fff!important;min-height:clamp(560px,50cqw,760px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.hero-cinema-product .cinema-stage{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-cinema-product .cinema-glow{position:absolute;right:8%;top:12%;width:58%;height:76%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--site-accent) 70%,transparent),transparent);filter:blur(30px);animation:sr-glow 7s ease-in-out infinite alternate}
.hero-cinema-product .cinema-media{position:absolute;top:0;right:0;bottom:0;width:62%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 100%)}
.hero-cinema-product .cinema-cam>*{--cam-origin:58% 52%}
.hero-cinema-product .cinema-sweep{position:absolute;top:-10%;bottom:-10%;left:0;width:22%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);mix-blend-mode:screen;animation:sr-sweep 9s cubic-bezier(.45,0,.2,1) 1.6s infinite;pointer-events:none}
.hero-cinema-product .cinema-copy{position:relative;z-index:2;padding:clamp(40px,6cqw,88px) 0 clamp(40px,6cqw,88px) clamp(28px,5.5cqw,84px)}
.hero-cinema-product .cinema-kicker{color:color-mix(in srgb,var(--site-accent) 55%,#fff)!important}
.hero-cinema-product .cinema-copy h3{color:#fff!important;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero-cinema-product .cinema-sub{color:rgba(255,255,255,.78)!important}
.hero-cinema-product .cinema-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0;padding:0}
.hero-cinema-product .cinema-chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:12px;font-weight:650;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-cinema-product .cinema-chip-dot{width:8px;height:8px;border-radius:50%;background:var(--site-accent);box-shadow:0 0 10px var(--site-accent)}
.hero-cinema-product .cinema-chips li:nth-child(2) .cinema-chip-dot{background:var(--site-accent-2,var(--site-accent));filter:hue-rotate(35deg)}
.hero-cinema-product .cinema-chips li:nth-child(3) .cinema-chip-dot{filter:hue-rotate(80deg)}
.hero-cinema-product .cinema-chips li:nth-child(4) .cinema-chip-dot{filter:hue-rotate(160deg)}

/* -- FINISHED_WORK: the finished result, full-bleed, the camera panning across it; services along the bottom -- */
.builder-site .site-hero.hero-cinema-panorama{background:#0c0d0c!important;color:#fff!important;min-height:clamp(600px,56cqw,860px);display:flex;flex-direction:column;justify-content:flex-end}
.hero-cinema-panorama .cinema-media{position:absolute;inset:0;z-index:-1}
.hero-cinema-panorama .cinema-cam>*{--cam-origin:50% 45%}
.hero-cinema-panorama .cinema-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,8,7,.78) 0,rgba(6,8,7,.5) 36%,rgba(6,8,7,.06) 68%),linear-gradient(0deg,rgba(6,8,7,.72) 0,rgba(6,8,7,0) 48%)}
.hero-cinema-panorama .cinema-light{position:absolute;inset:-20% -10% auto auto;width:70%;height:90%;background:radial-gradient(closest-side,rgba(255,214,150,.28),transparent);mix-blend-mode:screen;animation:sr-light-drift 22s ease-in-out infinite alternate;pointer-events:none}
.hero-cinema-panorama .cinema-copy{position:relative;padding:0 clamp(28px,5.5cqw,84px) clamp(28px,3.5cqw,52px);max-width:760px}
.hero-cinema-panorama .cinema-kicker{color:rgba(255,255,255,.85)!important}
.hero-cinema-panorama .cinema-copy h3{color:#fff!important;text-shadow:0 2px 28px rgba(0,0,0,.5);max-width:12ch}
.hero-cinema-panorama .cinema-sub{color:rgba(255,255,255,.86)!important;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.hero-cinema-panorama .cinema-strip{position:relative;display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:0;padding:16px clamp(28px,5.5cqw,84px);border-top:1px solid rgba(255,255,255,.16);background:rgba(8,10,9,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:12px;color:rgba(255,255,255,.9)}
.hero-cinema-panorama .cinema-strip-place{font-weight:750;letter-spacing:.14em;text-transform:uppercase;font-size:10px;color:#fff}
.hero-cinema-panorama .cinema-strip ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0}
.hero-cinema-panorama .cinema-strip li{position:relative;padding-left:14px}
.hero-cinema-panorama .cinema-strip li::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--site-accent)}

/* -- ATMOSPHERE: a tall frame of the room and a close detail of the same shot, drifting against each other -- */
.builder-site .site-hero.hero-cinema-layered{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,4cqw,64px);align-items:center;padding:clamp(40px,5.5cqw,84px) clamp(28px,5.5cqw,84px)!important}
.hero-cinema-layered .cinema-kicker{color:color-mix(in srgb,var(--site-accent) 75%,var(--site-text))!important}
.hero-cinema-layered .cinema-sub{color:var(--site-muted)!important}
.hero-cinema-layered .cinema-note{margin:26px 0 0;font-size:13px;letter-spacing:.02em;color:var(--site-text);opacity:.8}
.hero-cinema-layered .cinema-media{height:clamp(420px,44cqw,640px)}
.hero-cinema-layered .cinema-frame{position:absolute;overflow:hidden;border-radius:var(--site-radius,18px);box-shadow:0 30px 70px -30px rgba(0,0,0,.45)}
.hero-cinema-layered .cinema-frame-main{top:0;right:0;bottom:8%;left:14%}
.hero-cinema-layered .cinema-frame-detail{left:0;bottom:0;width:40%;aspect-ratio:4/5;border:6px solid var(--site-bg);animation:sr-drift-y 9s ease-in-out infinite alternate}
.hero-cinema-layered .cinema-tag{position:absolute;top:18px;right:18px;padding:8px 13px;border-radius:999px;background:color-mix(in srgb,var(--site-bg) 82%,transparent);color:var(--site-text);font-size:11px;font-weight:650;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:sr-drift-y2 11s ease-in-out infinite alternate}

/* -- CARE: calm and human -- an arched frame breathing slowly, what they treat as a short checklist -- */
.builder-site .site-hero.hero-cinema-portrait{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4cqw,72px);align-items:center;padding:clamp(40px,5.5cqw,84px) clamp(28px,5.5cqw,84px)!important;background:linear-gradient(160deg,var(--site-bg-light,var(--site-bg)),var(--site-bg))!important}
.hero-cinema-portrait .cinema-kicker{color:color-mix(in srgb,var(--site-accent) 75%,var(--site-text))!important}
.hero-cinema-portrait .cinema-sub{color:var(--site-muted)!important}
.hero-cinema-portrait .cinema-checks{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:10px 26px;font-size:14px;color:var(--site-text)}
.hero-cinema-portrait .cinema-checks li{display:flex;align-items:center;gap:10px}
.hero-cinema-portrait .cinema-check{width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:color-mix(in srgb,var(--site-accent) 18%,transparent);position:relative}
.hero-cinema-portrait .cinema-check::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid var(--site-accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.hero-cinema-portrait .cinema-media{height:clamp(440px,46cqw,660px);display:flex;align-items:center;justify-content:center}
.hero-cinema-portrait .cinema-arch{position:relative;width:min(100%,460px);height:100%;overflow:hidden;border-radius:999px 999px 28px 28px;box-shadow:0 40px 80px -40px rgba(0,0,0,.4)}
.hero-cinema-portrait .cinema-halo{position:absolute;width:min(112%,520px);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--site-accent) 40%,transparent),transparent 30%,color-mix(in srgb,var(--site-accent) 22%,transparent) 55%,transparent 80%);filter:blur(18px);opacity:.7;animation:sr-halo-spin 40s linear infinite}

/* -- INTERFACE: the product on a floating screen, its capabilities drifting around it -- */
.builder-site .site-hero.hero-cinema-interface{background:radial-gradient(90% 70% at 50% 100%,color-mix(in srgb,var(--site-accent) 30%,#0a0b10) 0,#08090d 70%)!important;color:#fff!important;padding:clamp(44px,5.5cqw,84px) clamp(28px,5.5cqw,84px) 0!important;text-align:center}
.hero-cinema-interface .cinema-copy{max-width:820px;margin:0 auto}
.hero-cinema-interface .cinema-copy h3{color:#fff!important;max-width:16ch;margin-left:auto;margin-right:auto}
.hero-cinema-interface .cinema-kicker{color:color-mix(in srgb,var(--site-accent) 55%,#fff)!important}
.hero-cinema-interface .cinema-sub{color:rgba(255,255,255,.76)!important;margin:0 auto}
.hero-cinema-interface .site-actions{justify-content:center}
.hero-cinema-interface .cinema-media{max-width:980px;margin:clamp(34px,4cqw,56px) auto 0;height:clamp(300px,34cqw,460px)}
.hero-cinema-interface .cinema-device{position:absolute;inset:0 6% -12% 6%;border-radius:18px 18px 0 0;background:#111319;border:1px solid rgba(255,255,255,.12);box-shadow:0 -20px 90px -20px color-mix(in srgb,var(--site-accent) 60%,transparent);overflow:hidden;transform-origin:50% 100%;animation:sr-device-tilt 12s ease-in-out infinite alternate}
.hero-cinema-interface .cinema-device-bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.hero-cinema-interface .cinema-device-bar span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.hero-cinema-interface .cinema-device-screen{position:absolute;top:30px;left:0;right:0;bottom:0}
.hero-cinema-interface .cinema-float{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:rgba(20,22,30,.78);border:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:650;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.hero-cinema-interface .cinema-float-dot{width:8px;height:8px;border-radius:50%;background:var(--site-accent)}
.hero-cinema-interface .cinema-float-1{left:0;top:22%;animation:sr-drift-y 7s ease-in-out infinite alternate}
.hero-cinema-interface .cinema-float-2{right:0;top:12%;animation:sr-drift-y2 9s ease-in-out infinite alternate}
.hero-cinema-interface .cinema-float-3{right:4%;bottom:14%;animation:sr-drift-y 8s ease-in-out -3s infinite alternate}

/* -- STATEMENT: no hero image -- oversized type over a slowly moving light field, the offerings on a ticker -- */
.builder-site .site-hero.hero-cinema-statement{min-height:clamp(520px,44cqw,720px);display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,6cqw,96px) clamp(28px,5.5cqw,84px) 0!important;background:var(--site-bg)!important}
.hero-cinema-statement .cinema-field{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-cinema-statement .cinema-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.hero-cinema-statement .cinema-orb-a{width:48%;aspect-ratio:1;right:-6%;top:-14%;background:var(--site-accent);animation:sr-orb-a 17s ease-in-out infinite alternate}
.hero-cinema-statement .cinema-orb-b{width:34%;aspect-ratio:1;right:24%;bottom:-18%;background:var(--site-accent-2,var(--site-accent));opacity:.32;animation:sr-orb-b 21s ease-in-out infinite alternate}
.hero-cinema-statement .cinema-orb-c{width:26%;aspect-ratio:1;left:-8%;top:30%;background:color-mix(in srgb,var(--site-accent) 50%,var(--site-bg));opacity:.28;animation:sr-orb-c 25s ease-in-out infinite alternate}
.hero-cinema-statement .cinema-copy h3{font-size:clamp(52px,7.4cqw,120px);max-width:14ch}
.hero-cinema-statement .cinema-kicker{color:color-mix(in srgb,var(--site-accent) 75%,var(--site-text))!important}
.hero-cinema-statement .cinema-sub{color:var(--site-muted)!important}
.hero-cinema-statement .cinema-ticker{margin:clamp(40px,5cqw,72px) calc(-1 * clamp(28px,5.5cqw,84px)) 0;padding:18px 0;border-top:1px solid color-mix(in srgb,var(--site-text) 14%,transparent);overflow:hidden;white-space:nowrap}
.hero-cinema-statement .cinema-ticker-track{display:inline-flex;animation:sr-ticker 38s linear infinite}
.hero-cinema-statement .cinema-ticker span{font-size:clamp(20px,2.4cqw,34px);font-weight:700;letter-spacing:-.02em;padding:0 28px;color:var(--site-text);opacity:.85}
.hero-cinema-statement .cinema-ticker span::after{content:"";display:inline-block;width:8px;height:8px;margin-left:56px;border-radius:50%;background:var(--site-accent);vertical-align:middle}

/* -- narrow screens: every treatment stacks media above copy and keeps the headline off the moving image -- */
@container site (max-width:700px){
  .builder-site .site-hero.hero-cinema-product{display:flex;flex-direction:column;min-height:0}
  .hero-cinema-product .cinema-media{position:relative;width:100%;height:86cqw;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
  .hero-cinema-product .cinema-copy{padding:0 22px 40px;margin-top:-10cqw}
  .builder-site .site-hero.hero-cinema-panorama{min-height:150cqw}
  .hero-cinema-panorama .cinema-scrim{background:linear-gradient(0deg,rgba(6,8,7,.86) 0,rgba(6,8,7,.55) 45%,rgba(6,8,7,.1) 75%)}
  .hero-cinema-panorama .cinema-copy{padding:0 22px 22px}
  .hero-cinema-panorama .cinema-strip{padding:14px 22px;gap:10px}
  .builder-site .site-hero.hero-cinema-layered,.builder-site .site-hero.hero-cinema-portrait{grid-template-columns:1fr;padding:32px 22px 44px!important}
  .hero-cinema-layered .cinema-media{order:-1;height:112cqw}
  .hero-cinema-portrait .cinema-media{order:-1;height:104cqw}
  .hero-cinema-portrait .cinema-arch{width:78%}
  .hero-cinema-portrait .cinema-checks{grid-template-columns:1fr}
  .builder-site .site-hero.hero-cinema-interface{padding:40px 22px 0!important}
  .hero-cinema-interface .cinema-media{height:78cqw}
  .hero-cinema-interface .cinema-device{inset:0 0 -10% 0}
  .hero-cinema-interface .cinema-float{font-size:11px;padding:8px 11px}
  .hero-cinema-interface .cinema-float-3{display:none}
  .builder-site .site-hero.hero-cinema-statement{min-height:0;padding:56px 22px 0!important}
  .hero-cinema-statement .cinema-ticker{margin-left:-22px;margin-right:-22px}
  .hero-cinema .cinema-copy h3{font-size:clamp(36px,11.5cqw,56px)}
}

/* the export runtime (lib/export-compiler.js) marks a hero scrolled out of view; nothing moves off screen */
.hero-cinema.is-offscreen *,.hero-cinema.is-offscreen *::before,.hero-cinema.is-offscreen *::after{animation-play-state:paused!important}
/* the visitor asked for stillness: every hero element rests at its natural frame, fully visible */
@media (prefers-reduced-motion:reduce){
  .hero-cinema *,.hero-cinema *::before,.hero-cinema *::after{animation:none!important;transition:none!important}
  .hero-cinema-interface .cinema-device{transform:perspective(1400px) rotateX(6deg) rotateY(-6deg)}
}

/* OFFERING COPY: the menu is the business's own offerings, each with one honest line (lib/premium/offering-copy.js) */
.builder-site .menu-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 56px}
.builder-site .menu-item{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 14px}
.builder-site .menu-item strong{font-size:19px;letter-spacing:-.01em;color:var(--site-text)}
.builder-site .menu-item-rule{border-bottom:1px dotted color-mix(in srgb,var(--site-text) 30%,transparent);transform:translateY(-4px)}
.builder-site .menu-item p{grid-column:1 / -1;margin:0;color:var(--site-muted);font-size:14px;line-height:1.55;max-width:46ch}
@container site (max-width:700px){.builder-site .menu-list{grid-template-columns:1fr;gap:20px}}
/* a gallery that would only have repeated the offerings listed above it (see offeringsListedElsewhere) */
.builder-site .site-section[data-variant="omitted"]{display:none!important}
/* ==== HERO STORYBOARD: the multi-image moving hero ======================================================
   Markup: lib/premium/hero-storyboard.js renderStoryboardHero (the live preview and the export render the same
   HTML). Each .sb-layer is a separately generated image with its OWN motion track: its placement and its frame
   track (--fx/--fy/--fs/--fr -> --tx/--ty/--ts/--tr) and content track (--ix0.. -> --ix1..) arrive as custom
   properties, and every layer runs the same two keyframes on the same loop length (--sb-loop) from its own phase
   (--delay), so the whole composition repeats exactly once per loop. Transform/opacity/clip-path only. The copy sits
   in its own copy-safe area and never moves on a loop. prefers-reduced-motion: every image still shown, resting in
   its composed position. */
.builder-site .site-hero.hero-cinema.hero-storyboard{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(20px,3.6cqw,60px);align-items:center;padding:clamp(40px,5cqw,84px) clamp(24px,5.2cqw,84px)!important;min-height:clamp(580px,52cqw,800px);color:var(--site-text)}
.hero-storyboard .sb-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(90% 80% at 70% 45%,color-mix(in srgb,var(--site-accent) 14%,var(--site-bg)) 0,var(--site-bg) 70%)}
.hero-storyboard[data-tone="dark"] .sb-backdrop{background:radial-gradient(110% 90% at 68% 45%,color-mix(in srgb,var(--site-accent) 30%,#0b0b0e) 0,color-mix(in srgb,var(--site-accent) 10%,#08080a) 50%,#060607 100%)}
.builder-site .site-hero.hero-storyboard[data-tone="dark"]{background:#07070a!important;color:#fff!important}
.hero-storyboard .sb-glow{position:absolute;right:6%;top:10%;width:62%;height:80%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--site-accent) 55%,transparent),transparent);filter:blur(40px);opacity:.7;animation:sr-glow var(--sb-loop) ease-in-out calc(var(--cam-phase,0s)) infinite alternate}
.hero-storyboard .sb-copy{position:relative;z-index:70;min-width:0}
.hero-storyboard .sb-copy h3{max-width:13ch}
/* specific headlines are longer than slogans: a step down in size, a little wider, never five lines deep */
.hero-storyboard .sb-copy h3[data-len="long"]{font-size:clamp(36px,4.4cqw,70px);max-width:15ch}
.hero-storyboard .sb-copy h3[data-len="longer"]{font-size:clamp(32px,3.7cqw,58px);max-width:18ch}
.hero-storyboard .sb-copy .cinema-kicker{color:color-mix(in srgb,var(--site-accent) 75%,var(--site-text))!important}
.hero-storyboard .sb-copy .cinema-sub{color:var(--site-muted)!important}
.hero-storyboard[data-tone="dark"] .sb-copy h3{color:#fff!important;text-shadow:0 2px 26px rgba(0,0,0,.45)}
.hero-storyboard[data-tone="dark"] .sb-copy .cinema-kicker{color:color-mix(in srgb,var(--site-accent) 55%,#fff)!important}
.hero-storyboard[data-tone="dark"] .sb-copy .cinema-sub{color:rgba(255,255,255,.8)!important}
.hero-storyboard .sb-offers{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0}
.hero-storyboard .sb-offers li{padding:7px 13px;border-radius:999px;font-size:12px;font-weight:650;background:color-mix(in srgb,var(--site-text) 7%,transparent);border:1px solid color-mix(in srgb,var(--site-text) 14%,transparent)}
.hero-storyboard[data-tone="dark"] .sb-offers li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
/* the CTA's ink follows the stage it sits on (the generic `.site-actions button` rule inks it with body text, which
   is unreadable on the accent fill and on a dark stage) */
.builder-site .hero-storyboard .sb-copy .site-actions .module-cta-btn{color:var(--site-on-accent,#fff)!important}
.builder-site:is([data-cta="underline-link"],[data-cta="outline-ghost"]) .hero-storyboard .sb-copy .site-actions .module-cta-btn{color:var(--site-text)!important}
.builder-site:is([data-cta="underline-link"],[data-cta="outline-ghost"]) .hero-storyboard:is([data-tone="dark"],[data-copy="bottom-left"]) .sb-copy .site-actions .module-cta-btn{color:#fff!important}
.hero-storyboard .sb-stage{position:relative;height:clamp(440px,45cqw,680px);min-width:0}
/* layers: placement + the frame track */
.hero-storyboard .sb-layer{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);z-index:var(--z);margin:0;transform:translate3d(var(--fx),var(--fy),0) scale(var(--fs)) rotate(var(--fr));animation:sb-track var(--sb-loop) cubic-bezier(.45,0,.55,1) calc(var(--delay) + var(--cam-phase,0s)) infinite;will-change:transform;backface-visibility:hidden}
@keyframes sb-track{0%,100%{transform:translate3d(var(--fx),var(--fy),0) scale(var(--fs)) rotate(var(--fr))}50%{transform:translate3d(var(--tx),var(--ty),0) scale(var(--ts)) rotate(var(--tr))}}
.hero-storyboard .sb-frame{position:absolute;inset:0;overflow:hidden;border-radius:18px;background:color-mix(in srgb,var(--site-text) 8%,transparent);box-shadow:0 34px 70px -34px rgba(0,0,0,.6);animation:sb-reveal-rise 1.3s cubic-bezier(.16,.84,.24,1) var(--rvd) both;isolation:isolate;will-change:transform}
/* (isolation + its own layer: without it Chromium leaves a 1px column of the panning picture outside the rounded clip) */
/* the content track: the picture moving inside its frame */
.hero-storyboard .sb-media{position:absolute;inset:-7%;transform:translate3d(var(--ix0),var(--iy0),0) scale(var(--is0));animation:sb-pan var(--sb-loop) ease-in-out calc(var(--delay) + var(--cam-phase,0s)) infinite;will-change:transform}
@keyframes sb-pan{0%,100%{transform:translate3d(var(--ix0),var(--iy0),0) scale(var(--is0))}50%{transform:translate3d(var(--ix1),var(--iy1),0) scale(var(--is1))}}
.hero-storyboard .sb-media>img,.hero-storyboard .sb-media>*{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;border-radius:0;object-fit:cover;display:block}
/* a photo's framing per view (hero-storyboard.js: the owner's focus, else its middle kept clear of what covers it) */
.hero-storyboard .sb-media>img{object-position:var(--op,50% 50%)}
/* reveals (one-shot, staggered per layer) */
.hero-storyboard [data-reveal="wipe-left"] .sb-frame{animation-name:sb-reveal-wipe-left}
.hero-storyboard [data-reveal="wipe-right"] .sb-frame{animation-name:sb-reveal-wipe-right}
.hero-storyboard [data-reveal="wipe-up"] .sb-frame{animation-name:sb-reveal-wipe-up}
.hero-storyboard [data-reveal="iris"] .sb-frame{animation-name:sb-reveal-iris}
.hero-storyboard [data-reveal="scale"] .sb-frame{animation-name:sb-reveal-scale}
@keyframes sb-reveal-rise{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}}
/* the wipes/iris end beyond the frame (negative inset) so they never trim its drop shadow */
@keyframes sb-reveal-wipe-left{from{clip-path:inset(-90px -90px -90px 100%)}to{clip-path:inset(-90px)}}
@keyframes sb-reveal-wipe-right{from{clip-path:inset(-90px 100% -90px -90px)}to{clip-path:inset(-90px)}}
@keyframes sb-reveal-wipe-up{from{clip-path:inset(100% -90px -90px -90px)}to{clip-path:inset(-90px)}}
@keyframes sb-reveal-iris{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(120% at 50% 50%)}}
@keyframes sb-reveal-scale{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
/* frame shapes */
.hero-storyboard .sb-shape-soft .sb-frame{border-radius:28px}
.hero-storyboard .sb-shape-circle{height:auto;aspect-ratio:1}
.hero-storyboard .sb-shape-circle .sb-frame{border-radius:50%}
.hero-storyboard .sb-shape-arch .sb-frame{border-radius:999px 999px 26px 26px}
.hero-storyboard .sb-shape-frame .sb-frame{border-radius:12px;border:6px solid color-mix(in srgb,var(--site-bg) 92%,#fff);box-shadow:0 26px 60px -24px rgba(0,0,0,.65)}
.hero-storyboard .sb-shape-full .sb-frame{border-radius:0;box-shadow:none}
.hero-storyboard .sb-shape-device .sb-frame{border-radius:16px;border:1px solid rgba(255,255,255,.14);background:#111319;padding-top:28px}
.hero-storyboard .sb-shape-device .sb-frame::before{content:"";position:absolute;left:14px;top:10px;width:44px;height:8px;z-index:2;background:radial-gradient(circle at 4px 4px,rgba(255,255,255,.3) 3.5px,transparent 4px) 0 0/16px 8px repeat-x}
.hero-storyboard .sb-shape-device .sb-media{top:28px}
/* drawn layers (lib/premium/hero-art-kinds.js): the illustration fills its frame like a photo would */
.hero-storyboard .ha-art{position:absolute;inset:0}
.hero-storyboard .ha-art>svg,.hero-storyboard .ha-ui>svg{width:100%;height:100%;display:block}
.hero-storyboard .ha-ui{position:absolute;inset:0;background:#111319}
.hero-storyboard .ha-ui-compact{display:none!important}
/* a drawing framed separately for the phone frame (hero-framing.js): one of the two shows */
.hero-storyboard .ha-phone{display:none!important}
/* a drawn interface is read, not panned: no oversize, no content move, the whole screen visible */
.hero-storyboard .sb-media:has(>.ha-art[data-art="interface"]){inset:0;animation:none;transform:none}
.hero-storyboard .sb-shape-device .sb-media:has(>.ha-art[data-art="interface"]){top:28px}
/* light moving across the whole stage */
.hero-storyboard .sb-light{position:absolute;inset:-10% -30%;z-index:60;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 48%,rgba(255,255,255,.04) 54%,transparent 62%);mix-blend-mode:screen;animation:sb-light var(--sb-loop) ease-in-out calc(var(--cam-phase,0s)) infinite}
.hero-storyboard[data-light="none"] .sb-light,.hero-storyboard[data-light="glow"] .sb-light{display:none}
@keyframes sb-light{0%,100%{transform:translate3d(-35%,0,0)}50%{transform:translate3d(35%,0,0)}}
/* copy on the right */
.builder-site .site-hero.hero-storyboard[data-copy="right"]{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)}
.hero-storyboard[data-copy="right"] .sb-copy{order:2}
/* full-bleed lead, copy bottom-left over a scrim, the other images framed on the right */
.builder-site .site-hero.hero-storyboard[data-copy="bottom-left"]{display:block;padding:0!important;min-height:clamp(620px,58cqw,880px)}
.hero-storyboard[data-copy="bottom-left"] .sb-stage{position:absolute;inset:0;height:auto}
.hero-storyboard[data-copy="bottom-left"] .sb-stage::after{content:"";position:absolute;inset:0;z-index:25;pointer-events:none;background:linear-gradient(90deg,rgba(6,8,7,.8) 0,rgba(6,8,7,.45) 38%,rgba(6,8,7,0) 66%),linear-gradient(0deg,rgba(6,8,7,.72) 0,rgba(6,8,7,0) 52%)}
.hero-storyboard[data-copy="bottom-left"] .sb-copy{position:absolute;left:clamp(24px,5.2cqw,84px);bottom:clamp(28px,4.5cqw,68px);max-width:min(620px,44%)}
.hero-storyboard[data-copy="bottom-left"] .sb-copy h3{color:#fff!important;text-shadow:0 2px 28px rgba(0,0,0,.5)}
.hero-storyboard[data-copy="bottom-left"] .sb-copy .cinema-kicker,.hero-storyboard[data-copy="bottom-left"] .sb-copy .cinema-sub{color:rgba(255,255,255,.88)!important}
.hero-storyboard[data-copy="bottom-left"] .sb-offers li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#fff}
/* copy centred on top, the product stage below it */
.builder-site .site-hero.hero-storyboard[data-copy="top"]{display:block;text-align:center}
.hero-storyboard[data-copy="top"] .sb-copy{max-width:820px;margin:0 auto}
.hero-storyboard[data-copy="top"] .sb-copy h3{max-width:16ch;margin-left:auto;margin-right:auto;font-size:clamp(38px,4.6cqw,72px)}
.hero-storyboard[data-copy="top"] .cinema-sub{margin:0 auto}
.hero-storyboard[data-copy="top"] .site-actions,.hero-storyboard[data-copy="top"] .sb-offers{justify-content:center}
.hero-storyboard[data-copy="top"] .site-actions{margin-top:22px}
.hero-storyboard[data-copy="top"] .sb-offers{margin-top:18px}
/* the product stage rises into the first screen instead of starting below the fold */
.builder-site .site-hero.hero-storyboard[data-copy="top"]{padding-top:clamp(30px,3.4cqw,56px)!important}
.hero-storyboard[data-copy="top"] .sb-stage{max-width:1060px;margin:clamp(22px,2.6cqw,40px) auto 0;height:clamp(330px,33cqw,480px)}
/* phones: the images first, then the copy; each layer takes its phone placement */
@container site (max-width:700px){
  .builder-site .site-hero.hero-cinema.hero-storyboard{display:flex;flex-direction:column;align-items:stretch;gap:26px;padding:24px 18px 40px!important;min-height:0}
  .hero-storyboard .sb-stage{order:-1;height:112cqw}
  /* (a centred `margin:auto` stage in the phone's flex column would shrink to zero width -- every image gone) */
  .hero-storyboard[data-copy="top"] .sb-stage{order:0;height:96cqw;width:100%;max-width:none;margin:4px 0 0}
  .hero-storyboard[data-copy="top"] .site-actions{justify-content:center;align-items:center}
  .hero-storyboard .sb-layer{left:calc(var(--mx) * 1%);top:calc(var(--my) * 1%);width:calc(var(--mw) * 1%);height:calc(var(--mh) * 1%)}
  .hero-storyboard .sb-shape-circle{height:auto}
  /* phones read the compact interface: fewer, larger labels */
  .hero-storyboard .ha-ui-wide{display:none!important}
  .hero-storyboard .ha-ui-compact{display:block!important}
  .hero-storyboard .sb-media>img{object-position:var(--op-m,var(--op,50% 50%))}
  .hero-storyboard .ha-desk{display:none!important}
  .hero-storyboard .ha-phone{display:block!important}
  .hero-storyboard .sb-copy h3{font-size:clamp(36px,11cqw,54px)}
  .hero-storyboard .sb-copy h3[data-len="long"]{font-size:clamp(31px,9cqw,46px);max-width:none}
  .hero-storyboard .sb-copy h3[data-len="longer"]{font-size:clamp(28px,7.8cqw,40px);max-width:none}
  .builder-site .site-hero.hero-storyboard[data-copy="bottom-left"]{display:flex;padding:0!important;min-height:0}
  .hero-storyboard[data-copy="bottom-left"] .sb-stage{position:relative;inset:auto;height:120cqw}
  .hero-storyboard[data-copy="bottom-left"] .sb-stage::after{background:linear-gradient(0deg,rgba(6,8,7,.55) 0,rgba(6,8,7,0) 40%)}
  .hero-storyboard[data-copy="bottom-left"] .sb-copy{position:relative;left:auto;bottom:auto;max-width:none;padding:0 18px 36px}
  .hero-storyboard[data-copy="bottom-left"]:not([data-tone="dark"]) .sb-copy h3{color:var(--site-text)!important;text-shadow:none}
  .hero-storyboard[data-copy="bottom-left"]:not([data-tone="dark"]) .sb-copy .cinema-kicker{color:color-mix(in srgb,var(--site-accent) 75%,var(--site-text))!important}
  .hero-storyboard[data-copy="bottom-left"]:not([data-tone="dark"]) .sb-copy .cinema-sub{color:var(--site-muted)!important}
  .hero-storyboard[data-copy="bottom-left"]:not([data-tone="dark"]) .sb-offers li{background:color-mix(in srgb,var(--site-text) 7%,transparent);border-color:color-mix(in srgb,var(--site-text) 14%,transparent);color:var(--site-text)}
  .builder-site:is([data-cta="underline-link"],[data-cta="outline-ghost"]) .hero-storyboard[data-copy="bottom-left"]:not([data-tone="dark"]) .sb-copy .site-actions .module-cta-btn{color:var(--site-text)!important}
}
/* live preview re-renders on every edit: no replayed reveal after the first render (see keepCinemaHeroContinuous) */
.hero-cinema.cinema-no-intro .sb-frame{animation:none}
/* the visitor asked for stillness: every image shown, resting where the composition placed it */
@media (prefers-reduced-motion:reduce){
  .hero-storyboard .sb-layer,.hero-storyboard .sb-media{animation:none!important;transform:none!important}
  .hero-storyboard .sb-frame{animation:none!important;clip-path:none!important;opacity:1!important}
  .hero-storyboard .sb-light{display:none}
}
/* OWNERSHIP + CREDITS: two one-time website prices and the credits note; credit packs in the account panel */
.pricing-section{grid-template-columns:1fr .78fr .78fr}.pricing-credits{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px;max-width:760px;color:var(--muted);line-height:1.6}.pricing-credits p{margin:0 0 6px}
@media(max-width:1100px){.pricing-section{grid-template-columns:minmax(0,1fr)}}
.account-credit-packs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}.account-credit-packs-label,.account-credit-pack-status{flex-basis:100%;margin:0;font-size:12px;color:var(--muted)}.account-credit-pack{min-height:36px;padding:0 12px;font-size:12px}

/* SiteRemade's two services (Websites | Property Videos): the switch every page's header carries */
.nav-mid{display:flex;align-items:center;gap:30px}
.svc-switch{display:inline-flex;padding:4px;gap:2px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.62);backdrop-filter:blur(10px)}
.svc-switch a{padding:9px 16px;border-radius:999px;font-size:13px;font-weight:750;color:var(--muted);white-space:nowrap;transition:background .2s ease,color .2s ease}
.svc-switch a:hover{color:var(--text)}
.svc-switch a[aria-current="page"]{background:var(--dark);color:#fff}
.svc-switch.on-dark{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.svc-switch.on-dark a{color:rgba(255,255,255,.62)}.svc-switch.on-dark a:hover{color:#fff}
.svc-switch.on-dark a[aria-current="page"]{background:#f4efe6;color:#0d0e11}
@media(max-width:720px){.nav.has-svc{flex-wrap:wrap;row-gap:0;padding-bottom:12px}.nav.has-svc .nav-mid{order:3;width:100%;justify-content:center}.svc-switch{width:100%}.svc-switch a{flex:1;text-align:center;padding:10px 8px;font-size:13px}}