/* Vizwalk design system (docs/DESIGN.md): one dark theme, the world of the walkthrough viewer. Tokens, type, the
   full-screen chapter system, media and scrims, header, menu sheet, footer, sticky contact and every shared component.
   Mobile first (390 px), then 768, 900, 1024 and 1200. Logical properties only, so Arabic pages can mirror later.
   --accent and the colours made from it are printed in the head of every page from the admin's setting (accent_tokens()). */
@font-face{font-family:'Inter Variable';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:'Manrope Variable';font-style:normal;font-weight:200 800;font-display:swap;src:url(../fonts/manrope-latin.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope Fallback';src:local('Arial');size-adjust:103%;ascent-override:104%;descent-override:29%;line-gap-override:0%}
@font-face{font-family:'Cairo Variable';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/cairo-arabic.woff2) format('woff2-variations');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'Cairo Variable';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/cairo-latin.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Tokens (docs/DESIGN.md "Tokens"; every text pair is AA, numbers there) ---- */
:root{
  --accent:#D5B58D;--accent-hover:#E5C9A4;--accent-soft:#3A3A31;--accent-ink:#7A5A2B;--accent-link:#D5B58D;--on-accent:#0D1211;
  --bg:#0D1211;--bg-2:#131A18;--bg-3:#1A2321;--bg-4:#222C29;--night:#080B0A;
  --ink:#F5F2EB;--ink-2:#D5D1C8;--soft:#A7ADA6;--line:rgba(245,242,235,.1);--line-2:#6E7771;
  --paper:#F4F1EA;--paper-2:#E9E4D9;--paper-ink:#17201D;--paper-soft:#5A615C;
  --ok-bg:#15301F;--ok-ink:#9FE0B0;--warn-bg:#33280F;--warn-ink:#F0CF7A;--bad-bg:#3A1A17;--bad-ink:#F4A79B;--info-bg:#15283A;--info-ink:#9CC8F0;--danger:#F4A79B;
  --dark:#080B0A;--dark-2:#1A2321;
  --scrim-top:linear-gradient(to bottom,rgba(10,14,13,.62),rgba(10,14,13,0));
  --scrim-bottom:linear-gradient(to top,rgba(10,14,13,.82) 0%,rgba(10,14,13,.5) 38%,rgba(10,14,13,0) 68%);
  --scrim-center:radial-gradient(ellipse at center,rgba(10,14,13,.55),rgba(10,14,13,.15) 70%);
  --dim:rgba(10,14,13,.22);
  --r-sm:4px;--r:8px;--r-lg:14px;--r-pill:999px;--shadow:0 20px 80px rgba(0,0,0,.45);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
  --gutter:max(16px,env(safe-area-inset-left));--wrap:1280px;--chapter-pad:clamp(64px,12vh,128px);--head-h:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:'Inter Variable','Inter Fallback',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-display:'Manrope Variable','Manrope Fallback','Inter Variable','Inter Fallback',system-ui,Arial,sans-serif;
  color-scheme:dark;
}
@media (min-width:768px){:root{--gutter:max(24px,env(safe-area-inset-left))}}
@media (min-width:900px){:root{--head-h:76px}}
@media (min-width:1200px){:root{--gutter:48px}}
html[lang=ar]{--font:'Cairo Variable',system-ui,'Segoe UI',Tahoma,Arial,sans-serif;--font-display:var(--font)}
/* The raised reading surface (was a light "paper" band; owner, 6 Oct 2026: one consistent dark site). A slightly lifted
   panel with a soft top light, so the reading chapters still stand apart from the night chapters around them. */
.fs-paper,.paper{--bg:#141C1A;--bg-2:#18211F;--bg-3:#1D2725;--bg-4:#24302D;--line:rgba(245,242,235,.1);
  --paper:#0D1211;--paper-ink:var(--accent);--accent-ink:var(--accent-link);
  background:radial-gradient(120% 70% at 50% 0%,rgba(213,181,141,.07),rgba(213,181,141,0) 60%),linear-gradient(180deg,#151D1B,#0F1615);
  color:var(--ink);color-scheme:dark;border-block:1px solid var(--line)}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 16px);background:var(--bg);scrollbar-color:#2E3936 var(--bg)}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font);-webkit-tap-highlight-color:transparent;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
main{flex:1;width:100%}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--accent-link);text-underline-offset:3px;text-decoration-thickness:1px}
@media (hover:hover){a:hover{text-decoration-thickness:2px}}
::selection{background:var(--accent);color:var(--on-accent)}
h1,h2,h3,h4{margin:0 0 .5em;text-wrap:balance;color:inherit}
h1,h2{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em}
h1{font-size:clamp(1.75rem,4vw,2.25rem);line-height:1.12}
h2{font-size:clamp(1.625rem,1.1rem + 2vw,2.5rem);line-height:1.15}
h3{font-size:1.25rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}
h4{font-size:1.0625rem;font-weight:600;line-height:1.35}
/* Marketing pages: the first heading reads as display type, light, never bold. */
.layout-site h1{font-size:clamp(2.25rem,1.1rem + 4vw,4.25rem);font-weight:400;line-height:1.04;letter-spacing:-.025em}
.display-xl{font-family:var(--font-display);font-size:clamp(2.5rem,1.2rem + 5.6vw,6.5rem);font-weight:400;line-height:1.02;letter-spacing:-.025em;max-width:14ch;text-wrap:balance;margin:0 0 .3em}
.display-l{font-family:var(--font-display);font-size:clamp(1.875rem,1.2rem + 2.8vw,3.5rem);font-weight:350;line-height:1.1;letter-spacing:-.02em;max-width:22ch;text-wrap:balance;margin:0 0 .4em}
.layout-site h1.display-xl{font-size:clamp(2.5rem,1.2rem + 5.6vw,6.5rem)}
.layout-site h1.display-l{font-size:clamp(1.875rem,1.2rem + 2.8vw,3.5rem)}
p{margin:0 0 1em;text-wrap:pretty}
small,.meta{font-size:.9375rem;color:var(--soft)}
.meta{margin:0 0 .75em;overflow-wrap:anywhere}
.lead{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.5;color:var(--ink-2);max-width:60ch}
.lead-media{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.5;color:var(--ink);max-width:46ch;margin:0 0 1em}
.label,.eyebrow,.kicker{font-family:var(--font);font-size:.8125rem;font-weight:600;letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--accent-link);margin:0 0 var(--s3)}
.kicker a{color:inherit;text-decoration:none}
.price,.tabular{font-variant-numeric:tabular-nums}
.prose{max-width:68ch}.prose p{max-width:none}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.icon{flex:none;vertical-align:middle}
[dir=rtl] .icon-arrow-right,[dir=rtl] .icon-chevron-right,[dir=rtl] .icon-arrow-up-right,[dir=rtl] .icon-log-out{transform:scaleX(-1)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fs-paper :focus-visible,.paper :focus-visible{outline-color:var(--accent-ink)}
.fs-has-media :focus-visible,.site-head.is-over:not(.is-solid) :focus-visible,.demo :focus-visible{box-shadow:0 0 0 5px rgba(10,14,13,.55)}
.skip{position:absolute;inset-inline-start:-999px;top:8px;z-index:100;background:var(--bg-3);color:var(--ink);padding:10px 16px;border-radius:var(--r);box-shadow:var(--shadow)}
.skip:focus{inset-inline-start:8px}

/* ---- Layout ---- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.main-narrow>.wrap{max-width:calc(38rem + 2 * var(--gutter));padding-block:var(--s7) var(--s8)}
.main-app>.wrap{max-width:calc(1120px + 2 * var(--gutter));padding-block:var(--s6) var(--s8)}
.section{padding-block:clamp(64px,9vw,112px)}
.section.tint{background:var(--bg-2)}
.section.dark{background:var(--night)}
.section-head{max-width:60ch;margin-bottom:var(--s6)}
.section-head .lead{margin-bottom:0}
.cols{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.cols-2{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));align-items:start}
.row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.stack>*+*{margin-top:var(--s4)}
.align-center{text-align:center}

/* ---- Chapters: section.fs (docs/DESIGN.md "Chapters") ---- */
.fs{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-start;background:var(--bg);color:var(--ink);padding-block:var(--chapter-pad);overflow:hidden}
.fs-deep{background:var(--bg-2)}
.fs-bleed{padding-block:0}
.fs-full{min-height:100vh;min-height:100svh}
.fs-tall{min-height:72vh;min-height:72svh}
.fs-statement{min-height:70vh;min-height:70svh}
@media (min-width:900px){.fs-full-desk{min-height:100vh;min-height:100svh}}
.fs-align-center{justify-content:center}
.fs-align-end{justify-content:flex-end}
.fs-inner{position:relative;z-index:1;width:100%}
.fs-media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--night)}
.media-layer{position:absolute;inset:0}
.fs-picture,.fs-clip{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--focus,50% 50%)}
.fs-clip{opacity:0;transition:opacity .3s var(--ease)}
.fs-clip.is-playing{opacity:1}
.scrim{position:absolute;inset:0;pointer-events:none}
.scrim-bottom{background:var(--scrim-bottom)}
.scrim-center{background:var(--scrim-center)}
.scrim-dim{background:var(--dim)}
.scrim-top{inset:0 0 auto;height:140px;background:var(--scrim-top)}
@media (max-width:767px){.scrim-bottom{background:linear-gradient(to top,rgba(10,14,13,.88) 0%,rgba(10,14,13,.6) 42%,rgba(10,14,13,0) 75%)}}
.fs-has-media{--ink:#F3EFE7;--ink-2:#ECE7DE;color:#F3EFE7}
.fs-has-media .display-xl,.fs-has-media .display-l{text-shadow:0 1px 24px rgba(0,0,0,.35)}
.fs-has-media .lead-media,.fs-has-media .label{text-shadow:0 1px 12px rgba(0,0,0,.4)}
.fs>.media-toggle{position:absolute;inset-inline-end:var(--gutter);bottom:20px;z-index:3}

/* The media hero (media_hero()) */
.fs-hero{justify-content:flex-end;padding-top:calc(var(--head-h) + 32px);padding-bottom:clamp(88px,13vh,128px)}
.fs-hero.hero-center{justify-content:center;text-align:center}
.hero-center .display-xl,.hero-center .lead-media{margin-inline:auto}
.hero-center .hero-actions{justify-content:center}
.fs-hero .wrap{position:relative}
.hero-eyebrow{margin-bottom:var(--s4)}
.hero-actions{gap:12px;margin-top:var(--s5)}
.hero-caption{display:flex;align-items:center;gap:8px;margin:var(--s4) 0 0;font-size:.8125rem;font-weight:500;letter-spacing:.02em;color:#F3EFE7;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero-caption::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
@media (min-width:900px){
  .fs-hero .hero-caption{position:absolute;inset-inline-end:var(--gutter);bottom:4px;margin:0;max-width:22rem}
}
@media (max-width:767px){.has-sticky .fs-hero.fs-full{min-height:calc(100svh - 56px - env(safe-area-inset-bottom))}}
.fs-stage{position:absolute;inset:0;z-index:2;display:none}
.fs-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fs-hero.is-live .fs-stage{display:block}
.fs-hero.is-live>.fs-inner,.fs-hero.is-live>.scroll-cue,.fs-hero.is-live>.media-toggle{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),visibility 0s .3s}
.fs-hero>.demo-tools{position:absolute;top:calc(var(--head-h) + 72px);inset-inline-end:var(--gutter);z-index:4}
.fs-hero.expanded{position:fixed;inset:0;z-index:60;min-height:0;height:100%;padding:0}
.fs-hero.expanded>.demo-tools{top:max(12px,env(safe-area-inset-top))}
.scroll-cue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:44px;min-height:44px;padding:4px 8px;color:#F3EFE7;text-decoration:none;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.scroll-cue .icon{animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (max-height:640px){.scroll-cue{display:none}}

/* Statements and chapter heads */
.statement{max-width:56rem}
.statement.align-center{margin-inline:auto;text-align:center}
.statement.align-center .display-l,.statement.align-center .display-xl,.statement.align-center .lead{margin-inline:auto}
.statement .lead{margin-top:var(--s4);margin-bottom:0;max-width:52ch}
.chapter-head{max-width:60ch;margin-bottom:var(--s7)}
.chapter-head.align-center{margin-inline:auto;text-align:center}
.chapter-head.align-center .lead{margin-inline:auto}
.chapter-head .lead{margin-bottom:0}

/* Project chapters (project_chapter()) */
.fs-project{justify-content:flex-end;padding-top:calc(var(--head-h) + 32px);padding-bottom:clamp(88px,12vh,120px)}
.project-grid{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6)}
.project-end .project-grid{flex-direction:row-reverse}
.project-end .project-copy{text-align:end}
.project-end .project-copy .row{justify-content:flex-end}
.project-end .project-copy .display-l,.project-end .project-copy .lead-media{margin-inline-start:auto}
.project-copy{max-width:38rem}
.project-index{color:var(--accent);margin-bottom:var(--s4)}
.project-kind{margin:-.2em 0 .8em;font-size:.875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#F3EFE7;opacity:.9}
.project-copy .row{margin-top:var(--s4)}
.project-qr{display:none}
@media (min-width:900px) and (pointer:fine){.project-qr{display:block;flex:none}}
.project-qr .qr figcaption{color:#F3EFE7}
@media (max-width:767px){.project-end .project-copy{text-align:start}.project-end .project-copy .row{justify-content:flex-start}.project-end .project-copy .display-l,.project-end .project-copy .lead-media{margin-inline-start:0}}

/* Project strip (project_strip()) */
.project-strip h2,.project-strip h3{margin-bottom:var(--s5)}
.strip-row{list-style:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 4px;display:grid;grid-auto-flow:column;grid-auto-columns:min(80%,340px);gap:var(--s4);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.strip-row::-webkit-scrollbar{display:none}
.strip-row li{scroll-snap-align:start}
@media (min-width:900px){.strip-row{margin:0;padding:0;grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}}
.strip-tile{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-3);color:#F3EFE7;text-decoration:none}
.strip-tile img{width:100%;height:100%;object-fit:cover}
.strip-tile::after{content:"";position:absolute;inset:0;background:var(--scrim-bottom)}
.strip-text{position:absolute;inset-inline:16px 48px;bottom:14px;z-index:1;display:flex;flex-direction:column}
.strip-text b{font:500 1.25rem/1.25 var(--font-display);letter-spacing:-.01em}
.strip-text small{color:#F3EFE7;opacity:.85;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.strip-tile>.icon{position:absolute;inset-inline-end:16px;bottom:18px;z-index:1;color:var(--accent)}

/* Demo cards (demo_cards()): one row of full-bleed cards; three side by side from 900 px, a sideways row on phones */
.dcards{list-style:none;margin:0;padding:0 var(--gutter);display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.dcards::-webkit-scrollbar{display:none}
.dcards li{scroll-snap-align:center}
@media (min-width:900px){.dcards{padding:0;grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;overflow:visible}}
.dcard{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:66vh;min-height:66svh;padding:var(--s5);overflow:hidden;border-radius:var(--r-lg);background:var(--bg-3);color:#F3EFE7;text-decoration:none}
@media (min-width:900px){.dcard{min-height:78vh;min-height:78svh;padding:var(--s6) clamp(24px,3vw,48px) clamp(40px,7vh,72px);border-radius:0}}
.dcard-picture{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.dcard>.scrim{z-index:-1}
.dcard-body{display:flex;flex-direction:column;gap:6px}
.dcard-title{font:400 clamp(1.75rem,1.3rem + 1.6vw,2.5rem)/1.1 var(--font-display);letter-spacing:-.02em;margin:0;text-shadow:0 1px 16px rgba(0,0,0,.4)}
.dcard-line{font-size:1rem;line-height:1.4;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.dcard-go{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s2);font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.dcard:focus-visible{outline-offset:-6px}
@media (hover:hover){.dcard:hover .dcard-picture{transform:scale(1.03)}.dcard-go .icon{transition:transform .2s var(--ease)}.dcard:hover .dcard-go .icon{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.dcard-picture{transition:none}}

/* Doors (door_pair()) */
.doors{display:grid;gap:2px;background:var(--bg)}
@media (min-width:900px){.doors{grid-template-columns:1fr 1fr}}
.door{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s7) var(--gutter);overflow:hidden;background:var(--bg-3);color:var(--ink);text-decoration:none}
.door.has-media{color:#F3EFE7}
.doors-full .door{min-height:72vh;min-height:72svh}
@media (min-width:900px){.doors-full .door{min-height:100vh;min-height:100svh;padding-bottom:clamp(56px,10vh,104px)}}
.doors-compact{gap:var(--s4);background:none}
.doors-compact .door{min-height:240px;padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg)}
.door-media{position:absolute;inset:0;z-index:-1}
.door-media img{width:100%;height:100%;object-fit:cover}
.door-media .scrim{transition:opacity .3s var(--ease)}
.door-body{display:flex;flex-direction:column;gap:var(--s3);max-width:32rem}
.door-title{font:400 clamp(1.75rem,1.2rem + 2vw,2.75rem)/1.1 var(--font-display);letter-spacing:-.02em;margin:0}
.doors-compact .door-title{font-size:clamp(1.375rem,1.1rem + 1vw,1.75rem)}
.door-text{font-size:1.0625rem;line-height:1.5}
.door-link{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s2);font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.door.has-media .door-text,.door.has-media .door-title{text-shadow:0 1px 16px rgba(0,0,0,.4)}
@media (hover:hover){.door:hover .door-link .icon{transform:translateX(4px)}.door-link .icon{transition:transform .2s var(--ease)}.door.has-media:hover .scrim{opacity:.85}.doors-compact .door:hover{border-color:var(--line-2)}}
.door:focus-visible{outline-offset:-6px}
.doors-note{margin:var(--s5) auto 0;text-align:center;color:var(--ink-2);max-width:var(--wrap);padding-inline:var(--gutter)}

/* Delivery objects (deliverables()) */
.deliver{display:grid;gap:var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.dv{margin:0}
.dv-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:var(--s4)}
.dv-n{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:17px;line-height:1}
.dv figcaption h3{margin:4px 0 var(--s1)}
.dv figcaption p{margin:0;color:var(--ink-2)}
.dv-chat,.dv-board,.dv-browser{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.dv-chat{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:6px;padding:var(--s5);background:var(--bg-4)}
.dv-who{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.dv-bubble{display:flex;flex-direction:column;gap:8px;width:min(86%,300px);padding:8px;border-radius:14px 14px 4px 14px;background:#33443F;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.dv-preview img{width:100%;aspect-ratio:1.9/1;object-fit:cover;border-radius:10px}
.dv-url{padding:0 6px 4px;font-size:.875rem;color:var(--accent-link);overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:3px}
.dv-board{display:grid;place-items:center;background:var(--paper-2);border-color:transparent}
.dv-board .qr figcaption{color:var(--paper-ink);font-size:.875rem}
.dv-board .qr canvas{background:#F4F1EA;box-shadow:0 2px 0 rgba(23,32,29,.12)}
.dv-browser{display:flex;flex-direction:column;background:var(--bg-4)}
.dv-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;flex:none;border-bottom:1px solid var(--line)}
.dv-bar i{width:9px;height:9px;border-radius:50%;background:#46524F}
.dv-bar span{flex:1;margin-inline-start:10px;height:22px;display:flex;align-items:center;padding:0 10px;border-radius:var(--r-pill);background:var(--bg-3);font-size:.75rem;color:var(--soft)}
.dv-screen{position:relative;flex:1;min-height:0}
.dv-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dv-play{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-size:.8125rem;font-weight:600;white-space:nowrap}

/* Numbered rows (feature_rows()) */
.frows>h2{margin-bottom:var(--s6)}
.frows ol{list-style:none;margin:0;padding:0}
.frows li{display:grid;grid-template-columns:1fr;gap:var(--s2) var(--s6);padding:var(--s6) 0;border-top:1px solid var(--line)}
.frows li:last-child{border-bottom:1px solid var(--line)}
.frow-n{font:300 clamp(2.5rem,1.8rem + 2vw,3.75rem)/1 var(--font-display);color:var(--accent-link);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.frows h3{font:500 clamp(1.375rem,1.1rem + 1vw,1.875rem)/1.2 var(--font-display);letter-spacing:-.015em;margin:0 0 var(--s2)}
.frows p{margin:0;color:var(--ink-2);max-width:58ch;font-size:1.0625rem}
@media (min-width:768px){.frows li{grid-template-columns:8rem minmax(0,1fr);align-items:baseline}}

/* Price tiles (price_tiles()) */
.ptiles-row{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));align-items:stretch}
.ptile{padding:var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-3)}
.ptile.featured{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.ptile h3{margin:0 0 var(--s2)}
.ptile .price{font:400 clamp(2.25rem,1.6rem + 1.6vw,3rem)/1.1 var(--font-display);letter-spacing:-.02em;margin:var(--s2) 0 var(--s3)}
.ptile .price small{font:500 .9375rem var(--font);letter-spacing:0;color:var(--soft)}
.ptile p:last-child{margin:0;color:var(--ink-2);font-size:.9375rem}
.ptile.quiet{background:transparent}
.ptile.quiet h3{font-size:1.0625rem}
.ptile.quiet .price{font-size:1.75rem}
.ptiles-note{margin:var(--s5) 0 var(--s2);color:var(--ink-2);font-size:.9375rem}

/* ---- Header (site_header()) ---- */
.site-head{position:sticky;top:0;z-index:50;height:var(--head-h);border-bottom:1px solid transparent;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.site-head.is-solid{background:rgba(19,26,24,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.head-over .site-head{position:fixed;inset-inline:0}
.site-head.is-over::before{content:"";position:absolute;inset:0 0 auto;height:140px;background:var(--scrim-top);pointer-events:none;z-index:-1;transition:opacity .2s var(--ease)}
.site-head.is-over.is-solid::before{opacity:0}
.head-row{display:flex;align-items:center;gap:var(--s2);height:100%}
.brand{display:inline-flex;align-items:center;min-height:44px;padding-inline-end:var(--s2);border-radius:var(--r)}
.brand img{height:28px;width:auto}
@media (min-width:900px){.brand img{height:30px}}
.head-links{display:none}
.head-links a,.head-link{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink);text-decoration:none;font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;position:relative}
.head-links a[aria-current]::after,.head-link[aria-current]::after{content:"";position:absolute;inset-inline:12px;bottom:8px;height:2px;background:var(--accent)}
.head-end{display:flex;align-items:center;gap:var(--s2);margin-inline-start:auto}
.head-link,.head-cta{display:none!important}
.head-icon{padding:0;width:44px;justify-content:center}
.menu-button{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-pill);background:transparent;color:var(--ink);cursor:pointer}
.site-head.is-over:not(.is-solid) .menu-button{border:1px solid rgba(243,239,231,.4);background:rgba(13,18,17,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (min-width:900px){
  .head-links{display:flex;align-items:center;gap:0;margin-inline-start:var(--s4)}
  .head-link{display:inline-flex!important}
  .head-cta{display:inline-flex!important;margin-inline-start:var(--s2)}
  .menu-button{display:none}
  html:not(.vz-in) .head-link.vz-user,html.vz-in .head-link.vz-guest{display:none!important}
  .site-head.is-over:not(.is-solid) .head-cta{background:rgba(13,18,17,.28);border-color:rgba(243,239,231,.7);color:#F3EFE7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
@media (min-width:900px) and (max-width:1199px){.head-links a,.head-link{padding:0 9px;letter-spacing:.1em}.head-admin{display:none!important}}

/* The menu sheet (phones) */
.menu-sheet{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:var(--bg);overflow-y:auto;overscroll-behavior:contain;opacity:0;transition:opacity .2s var(--ease);padding-bottom:max(24px,env(safe-area-inset-bottom))}
.menu-sheet.is-open{opacity:1}
.sheet-head{display:flex;align-items:center;justify-content:space-between;min-height:var(--head-h);flex:none}
.sheet-logo{display:inline-flex;min-height:44px;align-items:center}.sheet-logo img{height:28px;width:auto}
.menu-close{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-pill);background:transparent;color:var(--ink);cursor:pointer}
.sheet-links{display:flex;flex-direction:column;padding-top:var(--s4)}
.sheet-links a{display:flex;align-items:center;min-height:56px;font:400 1.75rem/1.2 var(--font-display);letter-spacing:-.015em;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.sheet-links a[aria-current]{color:var(--accent)}
.sheet-account{display:flex;flex-wrap:wrap;gap:0 var(--s5);padding-block:var(--s4)}
.sheet-account a{display:inline-flex;align-items:center;min-height:48px;font-size:1.0625rem;font-weight:500;color:var(--ink-2);text-decoration:none}
.sheet-actions{display:grid;gap:var(--s3);margin-top:auto;padding-top:var(--s5)}
html.menu-open,html.menu-open body{overflow:hidden}

/* ---- Footer (site_footer()) ---- */
.site-foot{background:var(--bg-2);padding-block:var(--s8) var(--s6);color:var(--ink-2);font-size:.9375rem;border-top:1px solid var(--line)}
.foot-top{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s7)}
.foot-top img{height:30px;width:auto}
.foot-top p{margin:0;max-width:36ch;font:400 1.25rem/1.35 var(--font-display);color:var(--ink);letter-spacing:-.01em}
.foot-grid{display:grid;gap:var(--s6) var(--s5);grid-template-columns:1fr 1fr}
@media (min-width:900px){.foot-grid{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.4fr)}.foot-top{flex-direction:row;align-items:center;justify-content:space-between}}
.foot-grid h2{font:600 .75rem/1.4 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin:0 0 var(--s2)}
.foot-grid nav a{display:flex;align-items:center;gap:8px;min-height:44px;padding-block:2px;color:var(--ink-2);text-decoration:none;overflow-wrap:anywhere}
@media (min-width:900px){.foot-grid nav a{min-height:36px}}
.foot-grid nav a:hover{color:var(--ink);text-decoration:underline}
.foot-grid .icon{color:var(--accent)}
.foot-grid nav:last-child{grid-column:1/-1}
@media (min-width:900px){.foot-grid nav:last-child{grid-column:auto}}
.foot-line{margin:var(--s7) 0 0;padding-top:var(--s4);border-top:1px solid var(--line);font-size:.875rem;color:var(--soft)}

/* ---- Sticky contact (sticky_cta()) ---- */
.sticky-bar{position:fixed;inset-inline:0;bottom:0;z-index:45;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px var(--gutter) calc(6px + env(safe-area-inset-bottom));background:rgba(19,26,24,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);transition:transform .25s var(--ease),visibility 0s}
.sticky-bar .button{min-height:44px;padding:0 12px;font-size:.9375rem}
.sticky-bar .button.ghost{background:transparent;border-color:var(--line-2);-webkit-backdrop-filter:none;backdrop-filter:none}
@media (min-width:900px){.sticky-cta{display:none}}
body.has-sticky{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
@media (min-width:900px){body.has-sticky{padding-bottom:0}}
html.js .sticky-cta:not(.is-shown) .sticky-bar,.sticky-cta.is-typing .sticky-bar{transform:translateY(110%);visibility:hidden;transition:transform .25s var(--ease),visibility 0s .25s}
html.menu-open .sticky-cta{display:none}

/* ---- Buttons ---- */
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:1.5px solid var(--accent);border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font:600 15px/1.2 var(--font);letter-spacing:.01em;text-decoration:none;cursor:pointer;touch-action:manipulation;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.button.secondary{background:transparent;border-color:var(--line-2);color:var(--ink)}
.button.ghost{background:rgba(13,18,17,.28);border-color:rgba(243,239,231,.7);color:#F3EFE7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.button.quiet{background:transparent;border-color:transparent;color:var(--accent-link);padding-inline:10px}
.button.danger{background:transparent;border-color:var(--bad-ink);color:var(--bad-ink)}
.button.small{min-height:40px;padding:0 18px;font-size:14px}
.button.small::after{content:"";position:absolute;inset:-2px 0}
.button.block{display:flex;width:100%}
.button[disabled]{opacity:.55;cursor:default}
.paper .button:not(.secondary):not(.quiet):not(.danger):not(.ghost),.fs-paper .button:not(.secondary):not(.quiet):not(.danger):not(.ghost){background:var(--paper-ink);border-color:var(--paper-ink);color:var(--paper)}
.link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--accent-link);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link.danger{color:var(--bad-ink)}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid rgba(243,239,231,.35);border-radius:var(--r-pill);background:rgba(19,26,24,.72);color:#F3EFE7;font:600 14px/1 var(--font);cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.chip.chip-icon{width:44px;padding:0;justify-content:center}
form.inline{display:inline-flex;margin:0}
@media (hover:hover) and (pointer:fine){
  .button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
  .button.secondary:hover{background:rgba(243,239,231,.06);border-color:var(--ink-2)}
  .button.ghost:hover{background:rgba(13,18,17,.5);border-color:#F3EFE7}
  .button.quiet:hover{background:var(--accent-soft);border-color:transparent}
  .button.danger:hover{background:var(--bad-bg)}
  .paper .button:not(.secondary):not(.quiet):not(.danger):not(.ghost):hover,.fs-paper .button:not(.secondary):not(.quiet):not(.danger):not(.ghost):hover{background:var(--accent-hover);border-color:var(--accent-hover)}
  .head-links a:hover,.head-link:hover{color:var(--accent-hover)}
  .menu-button:hover,.menu-close:hover{border-color:var(--line-2)}
  .chip:hover{background:rgba(19,26,24,.9)}
}

/* ---- Forms ---- */
form{margin:0}
.field{display:block;margin:0 0 var(--s4);font-weight:500;font-size:.875rem;color:var(--ink-2)}
.field-label,legend{display:block;font-weight:500;font-size:.875rem;color:var(--ink-2);margin-bottom:6px}
.field>input,.field>textarea,.field>select,.field>.password{margin-top:6px}
.field>.field-label+input,.field>.field-label+textarea,.field>.field-label+select,.field>.field-label+.password{margin-top:0}
.field small,.check small{display:block;margin-top:6px;font-weight:400;font-size:.875rem;color:var(--soft)}
input,textarea,select{display:block;width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg-4);color:var(--ink);font-family:inherit;font-size:16px;font-weight:400;line-height:1.4}
input::placeholder,textarea::placeholder{color:var(--soft);opacity:1}
input:-webkit-autofill{-webkit-text-fill-color:var(--ink);box-shadow:0 0 0 100px var(--bg-4) inset;caret-color:var(--ink)}
input[type=checkbox],input[type=radio]{display:inline-block;width:22px;height:22px;min-height:0;padding:0;margin:0;accent-color:var(--accent)}
textarea{min-height:96px;resize:vertical}
input[type=color]{padding:4px;width:64px}
input[type=file]{padding:9px 14px}
input[readonly],textarea[readonly]{background:var(--bg-3)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--bad-ink)}
.password{position:relative;display:block}
.password input{padding-inline-end:54px}
.reveal{position:absolute;inset-inline-end:2px;top:2px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--soft);cursor:pointer;border-radius:var(--r-sm)}
.reveal .icon:last-child,.reveal[aria-pressed=true] .icon:first-child{display:none}.reveal[aria-pressed=true] .icon:last-child{display:inline}
.check{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;margin:0 0 var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--bg-3);font-weight:500;font-size:.9375rem;color:var(--ink);cursor:pointer}
.check input{width:22px;height:22px;min-height:0;margin:1px 0 0;flex:none}
.hp{position:absolute!important;inset-inline-start:-9999px!important;width:1px;height:1px;overflow:hidden}
fieldset{border:0;padding:0;margin:0 0 var(--s4);min-width:0}
details.more>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;color:var(--accent-link);font-weight:600;list-style:none;margin-bottom:var(--s3)}
details.more>summary::-webkit-details-marker{display:none}
details.more[open]>summary .icon{transform:rotate(45deg)}
.form-result{padding:12px 14px;border-radius:var(--r);font-size:.9375rem;margin:var(--s3) 0 0}
.form-result.ok{background:var(--ok-bg);color:var(--ok-ink)}.form-result.error{background:var(--bad-bg);color:var(--bad-ink)}
.lead-form{max-width:36rem}
.lead-form h3{margin-bottom:4px}
.copy-row{display:flex;gap:8px}
.copy-row input{margin:0;min-width:0;flex:1;font-size:15px}
.copy-row .button{flex:none}

/* ---- Notices, badges, cards, progress ---- */
.notice{display:block;padding:13px 16px;border-radius:var(--r);margin:0 0 var(--s4);font-size:.9375rem;border:1px solid transparent;overflow-wrap:anywhere}
.notice.ok{background:var(--ok-bg);color:var(--ok-ink)}
.notice.error{background:var(--bad-bg);color:var(--bad-ink)}
.notice.warn{background:var(--warn-bg);color:var(--warn-ink)}
.notice.info{background:var(--info-bg);color:var(--info-ink)}
.notice .link{color:inherit;min-height:0;padding:0;margin-inline-start:6px}
.notice a{color:inherit}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);font-size:13px;font-weight:600;line-height:1.4;background:var(--bg-4);color:var(--ink);white-space:nowrap}
.badge.ready,.badge.paid,.badge.pro,.badge.closed,.badge.done,.badge.approved{background:var(--ok-bg);color:var(--ok-ink)}
.badge.processing,.badge.checking,.badge.queued,.badge.contacted,.badge.seen,.badge.submitted{background:var(--info-bg);color:var(--info-ink)}
.badge.pending,.badge.review,.badge.uploading,.badge.new,.badge.held{background:var(--warn-bg);color:var(--warn-ink)}
.badge.failed,.badge.rejected,.badge.deleted,.badge.expired,.badge.blocked,.badge.cancelled{background:var(--bad-bg);color:var(--bad-ink)}
.card{background:linear-gradient(180deg,var(--bg-3),var(--bg-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,4vw,32px)}
.card+.card{margin-top:var(--s4)}
.card.empty{text-align:center;padding:clamp(28px,6vw,48px) 20px}
.card.empty>.icon{color:var(--soft);margin-bottom:10px}
.card.empty p{color:var(--ink-2);max-width:420px;margin-inline:auto}
.card h1{font-size:clamp(1.75rem,4vw,2.25rem);font-weight:500}
.aside{margin:var(--s5) 0 0;color:var(--ink-2)}
.bar{height:6px;border-radius:var(--r-pill);background:var(--bg-4);overflow:hidden;margin-top:10px}
.bar span{display:block;height:100%;width:0;background:var(--accent);border-radius:var(--r-pill);transition:width .4s}
.progress{list-style:none;display:flex;gap:6px;padding:0;margin:var(--s5) 0 6px;font-size:15px;color:var(--soft)}
.progress li{flex:1;padding-top:10px;border-top:3px solid var(--bg-4);min-width:0;overflow-wrap:anywhere}
.progress li.done{border-color:var(--accent);color:var(--ink)}
.progress li.current{border-color:var(--warn-ink);color:var(--ink);font-weight:600}
@media (max-width:640px){.progress{font-size:15px}}

/* ---- Older page heroes (pages that do not open with media_hero() yet) ---- */
.hero{padding-block:clamp(48px,8vw,104px) clamp(40px,6vw,72px);background:radial-gradient(110% 90% at 85% -10%,#24332F 0%,rgba(36,51,47,0) 60%),var(--bg)}
.hero h1{max-width:18ch}
.hero .lead{margin-bottom:var(--s5)}
.hero .row{margin-bottom:var(--s3)}
.hero-note{font-size:.875rem;color:var(--soft);max-width:60ch;margin:0 0 var(--s5)}

/* ---- Live demo in a box (demo_embed()), QR ---- */
.demo{position:relative;width:100%;border-radius:var(--r-lg);overflow:hidden;background:var(--night);border:1px solid var(--line)}
.demo>img,.demo>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.demo.demo-full{position:absolute;inset:0;border-radius:0;border:0}
.demo-cover{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;padding:0 16px clamp(18px,4vw,36px);background:linear-gradient(rgba(10,14,13,0) 40%,rgba(10,14,13,.78));color:#F3EFE7;text-decoration:none;cursor:pointer;width:100%}
.demo-cover .pill{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 28px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-weight:600;font-size:17px;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.demo-cover small{color:#F3EFE7;font-size:14px;text-align:center;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.demo-cover:focus-visible{outline-offset:-4px}
@media (hover:hover){.demo-cover:hover .pill{background:var(--accent-hover)}}
.demo.is-ready .demo-cover,.demo.is-live .demo-qr{display:none}
.demo-tools{display:flex;gap:8px}
.demo>.demo-tools{position:absolute;top:10px;inset-inline-end:10px;z-index:3}
.demo-tools .chip-text{display:none}
.fs-hero .demo-tools .chip-text{display:inline}
.icon-min,.expanded .icon-max{display:none}.expanded .icon-min{display:inline}
.demo.expanded{position:fixed;inset:0;z-index:60;border-radius:0;border:0;aspect-ratio:auto!important;height:100%}
.demo.expanded>.demo-tools{top:max(10px,env(safe-area-inset-top))}
.demo-qr{position:absolute;inset-inline-end:16px;bottom:16px;z-index:2;display:none}
@media (min-width:768px) and (pointer:fine){.demo-qr{display:block}}
.demo-qr .qr figcaption{color:#F3EFE7;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.demo-note{font-size:.875rem;color:var(--soft);margin:12px 2px 0}
.qr{margin:0;display:inline-flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:13px;color:var(--ink-2);max-width:220px}
.qr canvas{box-sizing:content-box;padding:12px;border-radius:var(--r);background:#F4F1EA;image-rendering:pixelated}
.qr figcaption{font-weight:600}

/* ---- Comparison table ---- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-3)}
.compare{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.compare th,.compare td{padding:14px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line)}
.compare thead th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-weight:600;white-space:nowrap}
.compare tbody th{font-weight:600;position:sticky;inset-inline-start:0;background:var(--bg-3);min-width:140px}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.compare .is-us{background:var(--accent-soft)}
.compare thead .is-us{color:var(--accent-link)}
.compare .mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;margin-inline-end:8px;vertical-align:-5px}
.compare .mark.ok{background:var(--ok-bg);color:var(--ok-ink)}.compare .mark.no{background:var(--bad-bg);color:var(--bad-ink)}

/* ---- Pricing (pricing_table()) ---- */
.plans{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));align-items:stretch}
@media (max-width:767px){.plans.featured-first .plan.featured{order:-1}.plans.featured-first .plan[data-plan=free]{order:-2}}
.plan{position:relative;display:flex;flex-direction:column;padding:var(--s6) var(--s5) var(--s5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-3)}
.plan{background:linear-gradient(180deg,var(--bg-3),var(--bg-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 48px rgba(0,0,0,.28)}
.plan.featured{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),0 18px 60px rgba(213,181,141,.1)}
.fs-paper .plan.featured,.paper .plan.featured{border-color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-ink)}
.plan-tag{position:absolute;top:-13px;inset-inline-start:var(--s5);padding:3px 12px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.plan h3{margin:0 0 4px}
.plan .price{font:400 clamp(2.5rem,1.8rem + 1.8vw,3.5rem)/1.05 var(--font-display);letter-spacing:-.025em;margin:12px 0 4px;font-variant-numeric:tabular-nums}
.plan .price small{font:500 15px var(--font);letter-spacing:0;color:var(--soft)}
.plan ul{list-style:none;padding:0;margin:var(--s4) 0 var(--s5);display:grid;gap:10px;font-size:15px}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li .icon{color:var(--accent-link);margin-top:2px}
.plan .button{margin-top:auto}
.pricing-note{margin:var(--s4) 0 0;text-align:center}

/* ---- FAQ ---- */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 0;cursor:pointer;font-size:1.125rem;font-weight:500;line-height:1.4;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{color:var(--accent-link);transition:transform .2s var(--ease)}
.faq details[open]>summary .icon{transform:rotate(180deg)}
.faq-a p{color:var(--ink-2);margin:0 0 var(--s5);max-width:65ch}

/* ---- Scene cards, steps, features, proof, use cases ---- */
.scene-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-3)}
.scene-cover{position:relative;display:block;aspect-ratio:4/3;background:var(--bg-4);overflow:hidden}
.scene-cover img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.scene-cover .placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--soft)}
.scene-cover .badge{position:absolute;top:12px;inset-inline-start:12px;background:rgba(13,18,17,.72);color:#F3EFE7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.scene-body{padding:18px 20px 20px}
.scene-body h3{margin:0 0 6px;font:500 1.25rem/1.25 var(--font-display);letter-spacing:-.01em}
.scene-body h3 a{color:var(--ink);text-decoration:none}
.scene-body h3 a:hover{text-decoration:underline}
.scene-body p{color:var(--ink-2);font-size:15px;margin:0 0 10px}
.scene-open{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accent-link);font-size:15px}
@media (hover:hover){.scene-card:hover .scene-cover img{opacity:.9}}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:var(--s5) var(--s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.steps li{display:block;padding-top:var(--s5);border-top:1px solid var(--line)}
.step-mark{display:block;margin-bottom:var(--s3);color:var(--accent-link)}
.step-mark b{display:block;font:300 clamp(2.5rem,2rem + 1.4vw,3.25rem)/1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.steps h3{margin:0 0 6px;font-size:1.1875rem}
.steps p{margin:0;color:var(--ink-2);font-size:15px}
.steps-column{grid-template-columns:1fr;max-width:820px;gap:0}
.steps-column li{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:var(--s4);padding-block:var(--s5)}
.steps-column .step-mark{margin:0}
.steps-column .step-mark b{font-size:2.5rem}
.features{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.features.columns{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px 32px}
.features li{display:flex;gap:12px;align-items:flex-start}
.features .icon{color:var(--accent-link);margin-top:3px}
.proof{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 28px;color:var(--ink-2);font-size:15px}
.proof li{display:flex;gap:8px;align-items:center}
.proof .icon{color:var(--accent-link)}
.use-case{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-3)}
.use-media{aspect-ratio:16/9;background:var(--night);overflow:hidden}
.use-media .clip,.use-media img,.use-media video{height:100%;border-radius:0}
.use-media img,.use-media video{width:100%;object-fit:cover}
.use-body{padding:20px}
.use-body p{color:var(--ink-2);font-size:15px}

/* ---- The contact chapter (cta_band()) ---- */
.cta{text-align:center}
.cta .fs-inner{display:flex;justify-content:center}
.cta-inner{display:flex;flex-direction:column;align-items:center}
.cta .display-l{margin-inline:auto}
.cta .lead-media{margin-inline:auto}
.cta-actions{justify-content:center;margin:var(--s3) 0 var(--s5)}
.cta-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 20px;margin:0;font-size:.9375rem;color:var(--ink-2)}
.cta-links>span[aria-hidden]{display:none}
.cta-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:500;text-underline-offset:3px}
.cta-links a:hover{color:var(--accent-hover)}
.cta-studio{font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.cta.fs-deep{background:var(--bg-2)}
.cta .scrim-dim{background:rgba(10,14,13,.34)}
.fs-bleed{padding-block:0}
.cta .button.secondary{border-color:rgba(243,239,231,.7);color:#F3EFE7}

/* ---- Clips, YouTube, before/after ---- */
.clip{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--night)}
.clip video{width:100%;height:auto}
.clip>.media-toggle{position:absolute;inset-inline-end:12px;bottom:12px;z-index:2}
.media-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid rgba(243,239,231,.4);border-radius:50%;background:rgba(13,18,17,.55);color:#F3EFE7;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.media-toggle .icon-pause,.media-toggle .icon-play{display:inline-flex}
.media-toggle.is-paused .icon-pause,.media-toggle:not(.is-paused) .icon-play{display:none}
.yt-play{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.45)}
[dir=rtl] .yt-play{transform:translate(50%,-50%)}
.yt{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--night)}
.yt img,.yt iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.yt-note{position:absolute;inset-inline:0;bottom:0;margin:0;padding:10px 16px;font-size:13px;color:#F3EFE7;background:linear-gradient(rgba(10,14,13,0),rgba(10,14,13,.8));text-align:center}
.ba{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--bg-3);direction:ltr;user-select:none;-webkit-user-select:none}
.ba-full{border-radius:0}
@media (min-width:900px){.ba-full{aspect-ratio:auto!important;height:100vh;height:100svh}}
.ba-render,.ba-live{position:absolute;inset:0}
.ba-render img,.ba-live img{width:100%;height:100%;object-fit:cover}
.ba-live{clip-path:inset(0 0 0 var(--ba))}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--ba);width:2px;margin-left:-1px;background:#F3EFE7;pointer-events:none;box-shadow:0 0 12px rgba(0,0,0,.4)}
.ba-handle i{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#F3EFE7;color:var(--paper-ink);display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.45)}
.ba-handle i{grid-auto-flow:column}
.ba-handle i .icon:first-child{transform:scaleX(-1);margin-inline-end:-6px}
.ba:focus-within .ba-handle i{outline:2px solid var(--accent);outline-offset:3px}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;touch-action:pan-y;min-height:0;border:0}
.ba-label{position:absolute;top:14px;padding:6px 12px;border-radius:var(--r-pill);background:rgba(19,26,24,.72);color:#F3EFE7;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;pointer-events:none;border:1px solid rgba(243,239,231,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ba-a{left:14px}.ba-b{right:14px}
.ba-full .ba-label{top:auto;bottom:20px}
@media (min-width:900px){.ba-full .ba-a{left:var(--gutter)}.ba-full .ba-b{right:var(--gutter)}}

/* ---- Dialogs: a sheet from the bottom on phones ---- */
dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100svh - 24px);padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);color:var(--ink);box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(10,14,13,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dialog-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 12px 8px 24px;background:var(--bg-2);z-index:1}
.dialog-head h2{margin:0;font-size:1.375rem;overflow-wrap:anywhere}
.dialog-body{padding:8px 24px 24px}
.dialog-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink);cursor:pointer}
@media (hover:hover){.icon-button:hover{background:rgba(243,239,231,.08)}}
@media (max-width:640px){
  dialog{width:100%;max-width:none;margin:auto 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0;border-width:1px 0 0;max-height:88svh}
  .dialog-body{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .dialog-actions .button{flex:1}
}

/* ---- Motion (docs/DESIGN.md "Motion"): reveal of display lines, once; nothing hides without script ---- */
html.reveal-on [data-reveal]:not(button):not(.in){opacity:0;transform:translateY(8px)}
html.reveal-on [data-reveal]:not(button){transition:opacity .3s var(--ease),transform .3s var(--ease)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:0s!important;scroll-behavior:auto!important}
  html.reveal-on [data-reveal]:not(button):not(.in){opacity:1;transform:none}
}

/* ---- Pages without navigation (inside an embed) ---- */
.bare .main-narrow>.wrap{min-height:100svh;display:flex;align-items:center;padding-block:16px}
.bare .card{width:100%}

/* ---- Audience switch: the header script adds html.vz-in when the vz_in cookie is set (plan section 7) ---- */
html:not(.vz-in) .vz-user{display:none!important}
html.vz-in .vz-guest{display:none!important}

@media print{.site-head,.sticky-cta,.menu-sheet,.scroll-cue,.media-toggle,.fs-clip{display:none!important}body{background:#fff;color:#000}}
.fs-hero .hero-eyebrow{color:#F3EFE7}

/* ---- Account pages (auth_aside(): sign up, log in, reset, verify; DIRECTION 4.11): a calm split ---- */
.auth .main-narrow{position:relative}
.auth .main-narrow>.wrap{display:flex;flex-direction:column}
.auth-side{position:relative;isolation:isolate;order:-1;display:flex;align-items:flex-end;height:120px;margin:calc(-1 * var(--s7)) calc(-1 * var(--gutter)) var(--s5);padding:var(--s4) var(--gutter);overflow:hidden;background:var(--night);color:#F3EFE7}
.auth-side .fs-picture{z-index:-2}
.auth-side .scrim{z-index:-1}
.auth-side-copy{display:flex;flex-direction:column;gap:var(--s2)}
.auth-side-copy img{display:none;width:auto;height:28px}
.auth-line{font:400 1.375rem/1.2 var(--font-display);letter-spacing:-.01em;text-shadow:0 1px 16px rgba(0,0,0,.4)}
.auth .card{background:transparent;border:0;padding:0}
@media (min-width:900px){
  .auth .main-narrow{min-height:calc(100svh - var(--head-h));padding-inline-start:40%}
  .auth .main-narrow>.wrap{max-width:calc(440px + 2 * var(--gutter));padding-block:var(--s9) var(--s9)}
  .auth-side{position:absolute;inset:0 auto 0 0;width:40%;height:auto;margin:0;padding:var(--s8) var(--s7)}
  .auth-side-copy{gap:var(--s4)}
  .auth-side-copy img{display:block}
  .auth-line{font-size:clamp(1.75rem,1.2rem + 1.4vw,2.5rem);max-width:14ch}
}

/* ---- Owner rules of 4 Oct 2026: "Ask us", the trust row, the client logos ---- */
.head-ask .icon{margin-inline-end:6px}
.button.ask .icon{flex:none}
.trust{margin:var(--s6) 0 0}
.trust-title{margin-bottom:var(--s3)}
.trust ul{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:0;padding:0;list-style:none}
.trust li{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;color:var(--ink-2)}
.trust li .icon{color:var(--accent-link);flex:none}
.fs-paper .trust li .icon,.paper .trust li .icon{color:var(--accent-ink)}
.logos{position:relative;overflow:hidden;padding:var(--s5) 0;background:var(--bg);border-block:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logos-track{display:flex;width:max-content;animation:vz-logos 60s linear infinite}
.logos-row{display:flex;align-items:center;gap:var(--s8);margin:0;padding:0 var(--s4);list-style:none}
.logos-row img{display:block;height:40px;width:auto;max-width:160px;object-fit:contain;opacity:.8;filter:grayscale(1)}
.logos:hover .logos-track,.logos:focus-within .logos-track,.logos.is-paused .logos-track{animation-play-state:paused}
.logos-pause{position:absolute;inset-inline-end:var(--gutter);top:50%;transform:translateY(-50%);width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:var(--bg-2);color:var(--ink)}
@keyframes vz-logos{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logos-track{animation:none}.logos-row[aria-hidden="true"]{display:none}.logos{overflow-x:auto}.logos-pause{display:none}}
.home-trust{padding-bottom:var(--s2)}
.pricing-trust{margin-top:var(--s5)}
.signup-plan{margin:0 0 var(--s4)}

/* A demo opened full screen by a phone tap (site.js phoneFullscreen): the stage fills the screen */
.is-phone-full [data-demo-stage],.fs-hero.is-phone-full .fs-stage{display:block}
[data-demo-stage]:fullscreen{width:100%;height:100%;background:#0c110f}
[data-demo-stage]:fullscreen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Easy reading (owner, 7 Oct 2026: a 70-year-old must read every page without effort): larger body text, lighter
   grey for secondary text, small capitals made bigger and less spaced, step and plan lines at reading size. */
:root{--soft:#C3C8C1;--ink-2:#E6E2DA}
body{font-size:17px;line-height:1.65}
small,.meta{font-size:1rem}
.kicker,.dcard-go,.door-link,.cta-studio{font-size:.875rem;letter-spacing:.06em}
.head-links a,.head-link{font-size:.9375rem;letter-spacing:.02em;text-transform:none}
.foot-grid h2{font-size:.8125rem;letter-spacing:.06em}
.steps h3{font-size:1.3125rem}
.steps p{font-size:1.0625rem;line-height:1.55}
.plan ul{font-size:1rem}
.trust li{font-size:1rem}
.dcard-line{font-size:1.0625rem}
.plan-tag{font-size:13px;letter-spacing:.04em}
/* "Continue with Google" (app/oauth.php): Google's own look, then a quiet "or" line. */
.oauth{display:grid;gap:12px;margin:0 0 var(--s4)}
.oauth .button{gap:12px;font-weight:600}
.oauth-google{background:#fff;color:#1F1F1F;border:1px solid #747775}
.oauth-google:hover{background:#F2F2F2;color:#1F1F1F}
.oauth-or{display:flex;align-items:center;gap:12px;margin:var(--s2) 0 0;color:var(--soft);font-size:.9375rem}
.oauth-or::before,.oauth-or::after{content:"";flex:1;border-top:1px solid var(--line)}

/* The status page while a walkthrough is getting ready (owner-approved #47): two useful next steps under the card. */
.status-next{display:grid;gap:var(--s4);margin-top:var(--s5)}
@media (min-width:700px){.status-next{grid-template-columns:1fr 1fr}}
.status-next-card{display:block;color:inherit;text-decoration:none;transition:border-color .2s}
.status-next-card:hover,.status-next-card:focus-visible{border-color:var(--accent)}
.status-next-card h2{font-size:1.125rem;margin:0 0 6px}
.status-next-card p{margin:0;color:var(--ink-2);font-size:1rem}
.plan-choice p{margin:0 0 4px}
.signup-plan{margin:0 0 var(--s4);padding:14px 16px;border:1px solid var(--accent);border-radius:var(--r);background:rgba(213,181,141,.06)}
.signup-plan p{margin:0 0 4px}
.signup-plan .meta{margin:0}

/* ==== Owner-approved review, group D (7 Oct 2026) ======================================================================
   #70 every text at least 16 px and no small all-caps labels (buttons, pricing and forms first, then the app pages);
   #71 words on icon buttons, tap targets of 44-48 px, a dark backing behind text and outline buttons over video;
   #62 the consent bar; #65 the trust row and /your-files; #79 the logged-in screens in the dark full-screen style.
   The rules are prefixed with "html body" where a page style sheet (loaded after this one) set a smaller size, so this
   floor wins without touching those files. Pinch-zoom and 200 % text stay possible: the viewport tag never limits zoom,
   and sizes are in rem where text must grow with the browser setting. */

/* -- #70: labels, eyebrows and kickers in sentence case at reading size (no letter-spaced capitals) -- */
html body .label,html body .eyebrow,html body .kicker,html body .project-kind,html body .strip-text small,html body .dcard-go,html body .door-link,
html body .dv-who,html body .cta-studio,html body .ba-label,html body .scroll-cue,html body .plan-tag,html body .compare thead th,html body .table th,
html body .demos-filter-label,html body .legal-nav h2,html body .billing-switch .save,html body .foot-title{text-transform:none;letter-spacing:.01em}
html body .label,html body .eyebrow,html body .kicker{font-size:1rem;font-weight:600}
html body .project-kind,html body .strip-text small,html body .dcard-go,html body .door-link,html body .cta-studio,html body .dv-who{font-size:1.0625rem}
html body .scroll-cue{font-size:1rem;font-weight:600}
html body .ba-label{font-size:1rem;padding:8px 14px}
html body .plan-tag{font-size:1rem;padding:4px 14px;top:-15px}
html body .compare,html body .compare thead th{font-size:1rem}
html body .demos-filter-label{font-size:1rem}
html body .legal-nav h2{font-size:1rem}
html body .legal-nav ol{font-size:1rem}
html body .billing-switch .save{font-size:1rem;letter-spacing:0}

/* -- #70: buttons (17 px, small ones 16 px), the header links, chips -- */
html body .button{font-size:1.0625rem}
html body .button.small{font-size:1rem;min-height:44px;padding:0 18px}
html body .billing-switch a,html body .billing-switch button{font-size:1rem}
html body .sticky-bar .button{font-size:1rem;min-height:48px}
html body .chip{font-size:1rem}
@media (min-width:1200px){html body .head-links a,html body .head-link,html body .head-menu>summary{font-size:1.0625rem}}
html body .home-close .button,html body .demos-get .button,html body .dcard-actions .button{font-size:1.0625rem}

/* -- #70: forms -- */
html body .field,html body .field-label,html body legend{font-size:1rem}
html body .field small,html body .check small{font-size:1rem}
html body .check{font-size:1rem}
html body .copy-row input{font-size:16px}
html body .form-result,html body .notice{font-size:1rem}
html body .oauth-or{font-size:1rem}
html body .dash-link input{min-height:44px}

/* -- #70: pricing and payment -- */
html body .plan ul,html body .plan .price small,html body .ptile .price small,html body .ptile p:last-child,html body .ptiles-note{font-size:1rem}
html body .pay-line,html body .pay-price small,html body .pay-steps p,html body .pay-cancel,html body .guarantee li,html body .plan .plan-fine,html body .stepper span,html body .currency.small a{font-size:1rem}
html body .plan-rights .compare{font-size:1rem}
@media (max-width:600px){html body .packages .billing-switch button,html body .packages .billing-switch .save{font-size:1rem}html body .plan-rights .compare{font-size:1rem}}

/* -- #70: the rest of the shared parts -- */
html body .badge{font-size:1rem;padding:3px 10px}
html body .hero-caption,html body .hero-note,html body .demo-note,html body .hero-path-copy span,html body .notfound-hint,html body .pager-status,html body .demos-filter a{font-size:1rem}
html body .qr,html body .dv-board .qr figcaption,html body .demo-cover small,html body .yt-note{font-size:1rem}
html body .scene-body p,html body .scene-open,html body .proof,html body .use-body p,html body .cta-links,html body .progress,html body .dv-url{font-size:1rem}
html body .dv-bar{height:38px}html body .dv-bar span{font-size:1rem;height:28px}
html body .site-foot,html body .foot-line{font-size:1rem}
html body .dash-numbers,html body .locked{font-size:1rem}
html body .admin-more>summary{font-size:1rem}
html body .dv-play{font-size:1rem;min-height:44px}

/* -- #71: the footer: column titles as plain text (not headings), links of 44 px at every width, "Cookie settings" -- */
.foot-title{margin:0 0 var(--s2);font:600 1rem/1.4 var(--font);color:var(--soft)}
html body .foot-grid nav a{min-height:44px}
.foot-cookies{display:flex;align-items:center;min-height:44px;padding:2px 0;border:0;background:none;color:var(--ink-2);font:inherit;text-align:start;cursor:pointer}
.foot-cookies:hover{color:var(--ink);text-decoration:underline}

/* -- #71: the menu button carries its word ("Menu") -- */
html body .menu-button{width:auto;min-width:44px;height:44px;gap:8px;padding:0 16px 0 12px;font:600 1rem/1 var(--font)}
.menu-close{width:48px;height:48px}

/* -- #71: the clip control is a pill with its word, always at the bottom-left of the media; 48 px tall -- */
html body .media-toggle{width:auto;height:48px;gap:8px;padding:0 18px 0 14px;border-radius:var(--r-pill);border-color:rgba(243,239,231,.55);background:rgba(13,18,17,.78);font:600 1rem/1 var(--font);white-space:nowrap}
.media-toggle-text{display:inline}
html body .fs>.media-toggle{inset-inline-start:var(--gutter);inset-inline-end:auto;top:auto;bottom:20px}
html body .clip>.media-toggle{inset-inline-start:12px;inset-inline-end:auto;bottom:12px}
/* Phones: the bottom of a hero holds its buttons, so the control sits at the top-left, under the header (same place on every page). */
@media (max-width:767px){html body .fs-hero>.media-toggle{top:calc(var(--head-h) + 8px);bottom:auto}html body .fs-hero .scroll-cue{display:none}}
html.slow-net .media-toggle{display:none}

/* -- #71: a dark backing behind text and outline buttons over video (0.6 or more under any word) -- */
html body .button.ghost,html body .fs-has-media .button.secondary,html body .cta.fs-has-media .button.secondary{background:rgba(13,18,17,.72);border-color:rgba(243,239,231,.8);color:#F3EFE7}
@media (hover:hover) and (pointer:fine){html body .button.ghost:hover,html body .fs-has-media .button.secondary:hover{background:rgba(13,18,17,.88);border-color:#F3EFE7}}
html body .hero-caption{display:inline-flex;padding:8px 14px;border-radius:var(--r-pill);background:rgba(13,18,17,.68)}
html body .cta .scrim-center{background:radial-gradient(ellipse at center,rgba(10,14,13,.66),rgba(10,14,13,.38) 72%)}
html body .scroll-cue{padding:6px 14px;border-radius:var(--r-pill);background:rgba(13,18,17,.6)}
html body .fs-has-media .hero-eyebrow{display:inline-block;padding:4px 12px;border-radius:var(--r-pill);background:rgba(13,18,17,.6);color:#F3EFE7}

/* -- #71: tap targets of at least 44 px -- */
html body .link{min-height:44px}
html body .lead-actions .button,html body .stepper button{min-height:44px}
html body .demos-filter a,html body .tabs a,html body .filters a{min-height:44px}
.auth-have{display:grid;gap:var(--s2)}
.auth-have p{margin:0;color:var(--ink-2)}

/* -- #62: the consent bar (dark, two equal buttons) -- */
.consent{position:fixed;inset-inline:0;bottom:0;z-index:75;padding:16px 0 calc(16px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line-2);box-shadow:0 -16px 48px rgba(0,0,0,.45);color:var(--ink)}
.consent-row{display:grid;gap:var(--s3)}
.consent-title{margin:0 0 4px;font:600 1.125rem/1.3 var(--font);letter-spacing:0}
.consent-text p{margin:0;font-size:1rem;line-height:1.5;color:var(--ink-2)}
.consent-text a{color:var(--accent-link)}
.consent-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
html body .consent-actions .button{width:100%;min-height:48px;padding:0 12px;background:transparent;border-color:var(--ink-2);color:var(--ink);white-space:normal;text-align:center}
@media (hover:hover) and (pointer:fine){html body .consent-actions .button:hover{background:rgba(243,239,231,.08);border-color:var(--ink)}}
@media (min-width:900px){.consent-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s6)}.consent-actions{grid-template-columns:repeat(2,minmax(12rem,auto))}}
html.consent-open .sticky-cta{display:none}
html.menu-open .consent{display:none}
@media print{.consent{display:none!important}}

/* -- #65: "Your project is safe with us" (trust_row()), each line a link to /your-files -- */
.trust-title{margin:0 0 var(--s3);font:600 1.125rem/1.3 var(--font-display);letter-spacing:0;color:var(--ink)}
html body .trust li{font-size:1rem}
.trust li a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink-2);text-decoration:underline;text-decoration-color:rgba(243,239,231,.3);text-underline-offset:4px}
.trust li a:hover{color:var(--ink);text-decoration-color:currentColor}
.trust-refund{margin:var(--s3) 0 0;font-size:1rem;color:var(--ink)}
.fs-trust{padding-block:clamp(48px,8vh,80px)}
.fs-trust .trust{margin:0}

/* -- #65: /your-files -- */
.files{padding-block:clamp(48px,8vh,96px)}
.files-list{list-style:none;margin:0 auto;padding:0;max-width:56rem}
.files-point{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:var(--s4);padding:clamp(28px,5vh,48px) 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--head-h) + 16px)}
.files-point:last-child{border-bottom:1px solid var(--line)}
.files-icon{display:inline-grid;place-items:center;width:3rem;height:3rem;border:1px solid var(--line-2);border-radius:50%;color:var(--accent-link)}
.files-copy h3{margin:4px 0 var(--s2);font:500 clamp(1.375rem,1.1rem + 1vw,1.875rem)/1.2 var(--font-display);letter-spacing:-.015em}
.files-copy p{margin:0 0 var(--s2);max-width:60ch;font-size:1.0625rem;color:var(--ink-2)}
.files-copy p:last-child{margin-bottom:0}
@media (min-width:768px){.files-point{grid-template-columns:4rem minmax(0,1fr);gap:var(--s5)}.files-icon{width:4rem;height:4rem}}
.files-point:target .files-icon{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}

/* -- #79: the logged-in screens (dashboard, model, account, upload, upgrade) in the dark premium style: the page opens
   with a soft light from the top like the marketing chapters, panels are the raised cards of the site, headings use the
   display face, and nothing keeps the old light look. -- */
.main-app{background:radial-gradient(110% 60% at 50% -10%,rgba(213,181,141,.07),rgba(213,181,141,0) 55%),var(--bg)}
html body .main-app .heading h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,1.4rem + 2vw,2.75rem);letter-spacing:-.02em;line-height:1.1}
html body .main-app .heading .lead{font-size:1.0625rem;color:var(--ink-2)}
.main-app .card,.main-app .mcard,.main-app .table,.main-app .stat{border-color:var(--line)}
.main-app .mcard{background:linear-gradient(180deg,var(--bg-3),var(--bg-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 48px rgba(0,0,0,.25)}
.main-app .stat{background:linear-gradient(180deg,var(--bg-3),var(--bg-2))}
.main-app .card.danger-zone{border-color:rgba(244,167,155,.45)}
.main-app input:not([type=checkbox]):not([type=radio]):not([type=color]),.main-app textarea,.main-app select{background:var(--bg-4);color:var(--ink)}

/* -- #70 / #79: the after-sign-up parts of the app pages (css/pages/after-signup.css): reading size, no small capitals -- */
html body .upsell-kicker,html body .ready-kicker{font-size:1rem;letter-spacing:.01em;text-transform:none}
html body .ready-box .meta,html body .extras-line,html body .send-client small,html body .ready-links,html body .checklist h2 small,html body .heard h2 small,html body .check-mark{font-size:1rem}
html body .files{padding-block:clamp(24px,4vh,64px) clamp(48px,8vh,96px)}
html body .demo-tools .chip-text{display:inline}   /* #71: "Fill the screen" in words on every live demo, not only the hero */

/* Home page on a desktop (owner, 9 Oct 2026): no pause button on the clips. */
@media (min-width:900px) and (hover:hover) and (pointer:fine){body.page-home .media-toggle,.hero-home .media-toggle{display:none!important}}