/* DenoMarketing: the look.
   A deep graphite room lit by soft steel light, panes of glass with one lit
   edge, chrome on the mark only, one pin red for customers and sales. Every
   value lives in :root; nothing below uses a raw colour, size, curve or
   duration. */

:root{
  --void:       #0E0F11;  /* the ground of the dark room */
  --graphite:   #1E1F23;  /* raised planes */
  --graphite-2: #2C2E33;  /* panels, the footer wordmark */
  --steel:      #E2E4E6;  /* the light chapter, the solid pill */
  --paper:      #F6F7F8;  /* fields */
  --ink:        #16171A;
  --ink-2:      #4B5563;
  --line:       #B7BBC2;
  --on-dark:    #F2F3F5;
  --on-dark-2:  #A3A7AE;
  --on-dark-3:  #7C8189;
  --line-dark:  #3A3D44;
  --line-dark-2:#5A5E66;
  --silver-lo:  #6C7077;
  --pin:        #C8241D;  /* customers, the sales peak, a missing answer, focus on steel */
  --white:      #FFFFFF;
  --edit:       #E24A2B;  /* the editor's outline, inside its frame only */

  --glass-tint:   rgba(242,243,245,.05);
  --glass-tint-2: rgba(242,243,245,.08);
  --glass-edge:   rgba(242,243,245,.28);
  --glass-edge-2: rgba(242,243,245,.42);
  --glass-hair:   rgba(242,243,245,.07);
  --glass-floor:  rgba(30,31,35,.92);
  --milk:         rgba(255,255,255,.46);
  --milk-edge:    rgba(22,23,26,.16);
  --aura:         rgba(226,228,230,.07);
  --sheen:        rgba(242,243,245,.08);
  --blur:         blur(20px) saturate(1.15);

  --fd:"Barlow Condensed","Arial Narrow",sans-serif;
  --fb:"Barlow","Helvetica Neue",Arial,sans-serif;
  --fl:"Barlow Semi Condensed","Arial Narrow",sans-serif;

  --d-xl:clamp(64px,10.5vw,176px);
  --d-lg:clamp(48px,7vw,112px);
  --d-foot:min(calc((min(100vw, var(--wrap) + var(--side) * 2) - var(--side) * 2) / 5.3),236px);
  --d-path:clamp(34px,3.6vw,56px);
  --d-md:clamp(42px,5.2vw,80px);
  --d-sm:clamp(26px,2.4vw,36px);
  --d-sheet:clamp(40px,11vw,64px);
  --d-dash:clamp(56px,6vw,96px);
  --voice:clamp(19px,1.6vw,24px);
  --body:17px;
  --small:15px;
  --label:14px;
  --wordmark:22px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --sec:clamp(88px,9vw,144px);
  --run-arr:clamp(24px,3vw,40px);
  --run-min:.8;
  --run-dim:.45;
  --spot:rgba(242,243,245,.07);
  --spot-r:640px;
  --aura-proof-w:1600px; --aura-proof-h:1400px;
  --aura-apply-w:1300px; --aura-apply-h:1000px;
  --wrap:1240px;
  --gut:24px;
  --side:clamp(20px,4vw,56px);
  --head:64px;
  --head-gap:16px;
  --tile-pad:clamp(24px,2.6vw,40px);
  --hero-min:480px;
  --tap:44px;
  --media-top:calc(var(--head) + var(--head-gap) * 2);
  --media-bottom:calc(var(--s6) + var(--tap) + var(--s4));
  --plot-h:clamp(180px,18vw,260px);
  --ad-w:460px;
  --av:40px;
  --icon:18px;
  --icon-sm:12px;
  --dot:4px;
  --pin-dot:8px;
  --bar:6px;
  --aud-dt:88px;
  --aud-fill:38%;
  --r-card:16px;
  --y-col:56px;
  --peak:12px;
  --sheen-r:320px;

  --r-field:14px;
  --r-tile:24px;
  --r-pill:9999px;

  --ease-out:cubic-bezier(.19,1,.22,1);
  --ease-inout:cubic-bezier(.76,0,.24,1);
  --ease-hover:cubic-bezier(.33,1,.68,1);
  --t-in:200ms;
  --t-out:150ms;
  --t-fade:600ms;
  --t-reveal:700ms;
  --t-move:1100ms;
  --gap-step:90ms;
  --at-peak:900ms;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .95 0 0 0 0 .96 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + var(--head-gap) * 2);scrollbar-color:var(--silver-lo) var(--void);color-scheme:dark;-webkit-tap-highlight-color:transparent}
html.still,html.no-motion{scroll-behavior:auto}
body{background:var(--void);color:var(--on-dark);font-family:var(--fb);font-size:var(--body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:lining-nums}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
[hidden]{display:none !important}
::selection{background:var(--on-dark);color:var(--ink)}
.light ::selection{background:var(--ink);color:var(--on-dark)}
/* focus: the light text colour in the dark room, pin red on steel */
:focus-visible{outline:2px solid var(--on-dark);outline-offset:3px}
.light :focus-visible{outline-color:var(--pin)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:-999px;top:var(--s3);z-index:200;background:var(--ink);color:var(--on-dark);padding:var(--s3) var(--s4);border-radius:var(--r-pill);font-family:var(--fl);font-weight:600;font-size:var(--small)}
.skip:focus{left:var(--s3)}

.wrap{max-width:calc(var(--wrap) + var(--side)*2);margin:0 auto;padding-inline:var(--side);width:100%}
.sec{padding-block:var(--sec)}
.sep{opacity:.5;padding-inline:.4em}

/* grounds: the dark room carries a still grain */
.dark{position:relative;isolation:isolate}
.dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;background:var(--grain) 0 0/160px 160px}
.light{background:var(--steel);color:var(--ink);color-scheme:light;position:relative}

/* the light: three wide soft fields in one layer behind the whole page, so
   no section edge cuts them; the opaque sections simply cover them */
main{position:relative;isolation:isolate}
.auras{position:absolute;inset:0;z-index:-1;overflow-x:clip;overflow-y:visible;pointer-events:none}
.aura{position:absolute;left:var(--ax);top:var(--ay);width:var(--aw);height:var(--ah);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,var(--aura),transparent)}
/* the script sets --ay from where the results and the form sit */
.aura-proof{--ax:34%;--ay:34%;--aw:var(--aura-proof-w);--ah:var(--aura-proof-h)}
.aura-apply{--ax:72%;--ay:84%;--aw:var(--aura-apply-w);--ah:var(--aura-apply-h)}

/* type registers */
h1,h2,h3,h4{font-family:var(--fd);font-weight:700;text-wrap:balance}
h2{font-size:var(--d-md);line-height:.96;letter-spacing:-.005em}
h3{font-size:var(--d-sm);font-weight:600;line-height:1.05}
.voice{font-size:var(--voice);font-weight:500;line-height:1.4;letter-spacing:-.005em;max-width:38ch;color:var(--on-dark-2)}
.light .voice{color:var(--ink-2)}

/* ---------- glass: a faint tint, a heavy blur, one ring lit along the
   diagonal and a still grain ---------- */
.glass{position:relative;isolation:isolate;background-color:var(--glass-tint);box-shadow:inset 0 0 0 1px var(--glass-hair);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
  background:linear-gradient(225deg,transparent 8%,var(--glass-edge) 50%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity var(--t-out) var(--ease-hover)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:.06;background:var(--grain) 0 0/160px 160px}
/* glass never blurs glass: a pane inside a pane keeps its tint and ring only */
.glass .glass{-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);min-height:52px;padding:0 var(--s5);border-radius:var(--r-pill);
  font-family:var(--fl);font-weight:600;font-size:var(--small);letter-spacing:.04em;line-height:1;white-space:nowrap;
  transition:background-color var(--t-out) var(--ease-hover),color var(--t-out) var(--ease-hover)}
.pill .arr{width:16px;height:16px;transition:transform var(--t-out) var(--ease-hover)}
.pill:active{translate:0 1px}
.pill-solid{background:var(--steel);color:var(--ink)}
.pill-glass{color:var(--on-dark)}
.pill-small{min-height:44px;padding:0 var(--s4)}
.light .pill-glass{color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .pill-solid:hover{background:var(--white);transition-duration:var(--t-in)}
  .pill-glass:hover{background-color:var(--glass-tint-2);transition-duration:var(--t-in)}
  .pill-glass:hover::before{background:linear-gradient(225deg,transparent 8%,var(--glass-edge-2) 50%,transparent 92%)}
  .pill:hover .arr{transform:translateX(4px);transition-duration:var(--t-in)}
}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3)}

.link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;transition:text-decoration-thickness var(--t-out) var(--ease-hover)}
@media (hover:hover) and (pointer:fine){ .link:hover{text-decoration-thickness:2px;transition-duration:var(--t-in)} }

/* ---------- header: a floating glass pill ---------- */
.top{position:fixed;top:var(--head-gap);left:0;right:0;z-index:40;padding-inline:var(--side);pointer-events:none}
.top-in{pointer-events:auto;max-width:var(--wrap);margin:0 auto;height:var(--head);border-radius:var(--r-pill);display:flex;align-items:center;gap:var(--s6);
  padding:0 var(--s2) 0 var(--s4);transition:background-color var(--t-reveal) var(--ease-out)}
.top.scrolled .top-in{background-color:var(--glass-floor)}
.brand{display:inline-flex;align-items:center;gap:var(--s3)}
.mark{width:32px;height:32px;flex:none}
.word{font-family:var(--fd);font-weight:700;font-size:var(--wordmark);line-height:1}
.word-suffix{font-family:var(--fl);font-weight:600;font-size:var(--label);letter-spacing:.06em;color:var(--on-dark-2);align-self:flex-start;margin-top:var(--s1);margin-left:calc(var(--s2) * -1)}
.nav{display:flex;gap:var(--s6);margin-left:auto}
.nav a{font-family:var(--fl);font-weight:600;font-size:var(--small);letter-spacing:.04em;padding-block:var(--s3);color:var(--on-dark-2);transition:color var(--t-out) var(--ease-hover)}
@media (hover:hover) and (pointer:fine){ .nav a:hover{color:var(--on-dark);transition-duration:var(--t-in)} }
.nav a:focus-visible{color:var(--on-dark)}
.burger{display:none;width:44px;height:44px;position:relative;margin-left:auto;border-radius:var(--r-pill)}
.burger i{position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;top:18px;transition:transform var(--t-reveal) var(--ease-out),top var(--t-reveal) var(--ease-out)}
.burger i+i{top:25px}
.burger[aria-expanded="true"] i{top:21.5px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i+i{transform:rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:35;background:var(--void);color:var(--on-dark);display:none;flex-direction:column;justify-content:center;padding:calc(var(--head) + var(--head-gap)) var(--side) var(--s7)}
.sheet.open{display:flex}
.sheet a{font-family:var(--fd);font-weight:700;font-size:var(--d-sheet);line-height:1.1;padding-block:var(--s2);border-bottom:1px solid var(--line-dark)}

/* ---------- hero: the video alone fills the first screen, nothing over it
   but the header; the page scrolls out of it into the words ---------- */
.hero{height:100svh;min-height:var(--hero-min);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2;background:var(--void)}
.stage-plate{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(50% 60% at 62% 38%,var(--aura),transparent 70%),var(--void)}
.mark-plate{width:clamp(96px,12vw,160px);height:auto;margin-bottom:var(--s9)}
/* the film is always seen whole: a box of its own shape, as large as fits
   between the header and the scroll cue, its edges fading into the page */
.stage-video{position:absolute;left:50%;top:calc(var(--media-top) + (100% - var(--media-top) - var(--media-bottom)) / 2);translate:-50% -50%;
  aspect-ratio:16 / 9;width:min(100% - var(--side) * 2,(max(100svh,var(--hero-min)) - var(--media-top) - var(--media-bottom)) * 16 / 9);height:auto;object-fit:cover;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);
  mask-composite:intersect;
  opacity:0;transition:opacity var(--t-move) var(--ease-out)}
.stage-video.upright{aspect-ratio:9 / 16;width:min(100% - var(--side) * 2,(max(100svh,var(--hero-min)) - var(--media-top) - var(--media-bottom)) * 9 / 16)}
.stage-video.ready{opacity:1}
/* over a moving picture, controls take a solid floor instead of a blur */
.play,.scroll-cue{position:absolute;bottom:var(--s6);z-index:2;background-color:var(--glass-floor);color:var(--on-dark);box-shadow:inset 0 0 0 1px var(--glass-hair)}
.play{right:var(--side)}
.scroll-cue{left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border-radius:var(--r-pill);
  font-family:var(--fl);font-weight:600;font-size:var(--label);letter-spacing:.04em;transition:background-color var(--t-out) var(--ease-hover)}
.scroll-cue .arr{width:16px;height:16px;rotate:90deg;transition:translate var(--t-out) var(--ease-hover)}
@media (hover:hover) and (pointer:fine){ .scroll-cue:hover .arr{translate:0 3px;transition-duration:var(--t-in)} }

/* ---------- the words you scroll into ---------- */
.intro{padding-block:var(--sec) 0}
.badge{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s4);border-radius:var(--r-pill);font-family:var(--fl);font-weight:600;font-size:var(--label);letter-spacing:.04em;color:var(--on-dark-2)}
.hero-h{font-size:var(--d-xl);line-height:.9;letter-spacing:-.015em;margin-top:var(--s5)}
.intro-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:end;margin-top:var(--s7)}
.hero-lede{grid-column:1 / span 6;color:var(--on-dark);max-width:46ch}
.intro-row .actions{grid-column:8 / span 5;justify-content:flex-end}


/* ---------- section heads: the head left, its sentence right ---------- */
.head-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:end}
.head-row h2{grid-column:1 / span 6}
.head-row .voice{grid-column:8 / span 5}

/* ---------- what we do: the bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);margin-top:var(--s8)}
.tile{border-radius:var(--r-tile);padding:var(--tile-pad);display:flex;flex-direction:column;gap:var(--s6);overflow:hidden}
.t-ad{grid-column:1 / span 7}
.t-aud{grid-column:8 / span 5}
.t-dm{grid-column:1 / span 5}
.t-sales{grid-column:6 / span 7}
.tile-words p{margin-top:var(--s3);color:var(--on-dark-2);max-width:40ch}
.sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(var(--sheen-r) circle at var(--mx,50%) var(--my,50%),var(--sheen),transparent 70%);
  transition:opacity var(--t-out) var(--ease-hover)}
@media (hover:hover) and (pointer:fine){ .tile:hover .sheen{opacity:1;transition-duration:var(--t-in)} }

/* the example ad, drawn as our own card in full: account, copy, picture,
   link bar and actions */
.ad{margin-top:auto}
.ad-card{max-width:var(--ad-w);background:var(--graphite);border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--line-dark);overflow:hidden}
.ad-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s4) 0}
.ad-av{width:var(--av);height:var(--av);border-radius:50%;flex:none;display:grid;place-items:center;background:var(--steel);color:var(--ink);font-family:var(--fl);font-weight:600;font-size:var(--label);letter-spacing:.04em}
.ad-who{display:flex;flex-direction:column;line-height:1.3;flex:1;min-width:0}
.ad-name{font-weight:500;font-size:var(--small);color:var(--on-dark)}
.ad-sp{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--label);color:var(--on-dark-2)}
.ad-globe{width:var(--icon-sm);height:var(--icon-sm);fill:none;stroke:currentColor;stroke-width:1}
.ad-more{display:flex;gap:var(--dot);padding:var(--s2)}
.ad-more i{width:var(--dot);height:var(--dot);border-radius:50%;background:var(--on-dark-2)}
.ad-body{padding:var(--s3) var(--s4) var(--s4)}
.ad-copy{font-size:var(--small);line-height:1.45;color:var(--on-dark)}
.ad-copy-2{margin-top:var(--s1);color:var(--on-dark-2)}
.ad-pic{position:relative;background:radial-gradient(70% 90% at 50% 100%,var(--aura),transparent 70%),var(--void);border-top:1px solid var(--line-dark)}
.ad-pic svg{width:100%;height:auto}
.ad-hill{fill:var(--graphite)}
.ad-ground{fill:none;stroke:var(--line-dark-2);stroke-width:1.5}
.ad-pic .house{fill:none;stroke:var(--on-dark-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ad-glow{fill:var(--on-dark);fill-opacity:.16}
.smoke{fill:none;stroke:var(--on-dark-3);stroke-width:1.6;stroke-linecap:round}
.ad-pic .snow{fill:none;stroke:var(--on-dark-3);stroke-width:1.6;stroke-linecap:round}
.ad-tag{position:absolute;left:var(--s3);top:var(--s3);padding:var(--s1) var(--s3);border-radius:var(--r-pill);background:var(--glass-floor);box-shadow:inset 0 0 0 1px var(--line-dark-2);color:var(--on-dark);font-family:var(--fl);font-weight:600;font-size:var(--label);letter-spacing:.04em}
.ad-link{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--graphite-2)}
.ad-link-words{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.ad-domain{font-size:var(--label);color:var(--on-dark-2)}
.ad-title{font-weight:500;font-size:var(--small);color:var(--on-dark)}
.ad-btn{flex:none;font-family:var(--fl);font-weight:600;font-size:var(--label);letter-spacing:.04em;padding:var(--s2) var(--s4);border-radius:var(--r-pill);background:var(--steel);color:var(--ink)}
.ad-actions{display:flex;justify-content:space-around;gap:var(--s2);padding:var(--s3) var(--s4);border-top:1px solid var(--line-dark);font-family:var(--fl);font-weight:600;font-size:var(--label);letter-spacing:.04em;color:var(--on-dark-2)}
.ad-actions > span{display:inline-flex;align-items:center;gap:var(--s2)}
.ad-actions svg{width:var(--icon);height:var(--icon);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.tile-note{margin-top:var(--s3);font-size:var(--label);color:var(--on-dark-2)}

/* the audience, set out the way an ad account sets it */
.aud{margin-top:auto}
.aud-card{background:var(--graphite);border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--line-dark);padding:var(--s4)}
.aud-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--s3);border-bottom:1px solid var(--line-dark)}
.aud-title{font-family:var(--fl);font-weight:600;font-size:var(--small);letter-spacing:.04em;color:var(--on-dark)}
.aud-rows > div{display:grid;grid-template-columns:var(--aud-dt) minmax(0,1fr);gap:var(--s3);padding-block:var(--s3);border-bottom:1px solid var(--line-dark);align-items:baseline}
.aud-rows dt{font-size:var(--label);color:var(--on-dark-2)}
.aud-rows dd{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--small);color:var(--on-dark)}
.aud-loc{display:inline-flex;align-items:center;gap:var(--s2)}
.aud-loc::before{content:"";width:var(--pin-dot);height:var(--pin-dot);border-radius:50%;background:var(--pin);box-shadow:0 0 0 2px var(--graphite)}
.aud-radius,.chips span{padding:var(--s1) var(--s3);border-radius:var(--r-pill);background:var(--graphite-2);box-shadow:inset 0 0 0 1px var(--line-dark-2);font-size:var(--label);line-height:1.4;color:var(--on-dark)}
.aud-gauge{padding-top:var(--s3)}
.aud-gauge-label{font-size:var(--label);color:var(--on-dark-2)}
.aud-bar{display:block;position:relative;height:var(--bar);border-radius:var(--r-pill);background:var(--line-dark);margin-block:var(--s2)}
.aud-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--aud-fill);border-radius:inherit;background:var(--on-dark-2)}
.aud-ends{display:flex;justify-content:space-between;font-size:var(--label);color:var(--on-dark-2)}

/* a message thread */
.thread{display:flex;flex-direction:column;gap:var(--s3);margin-top:auto}
.bubble{display:inline-flex;align-items:center;gap:var(--s3);max-width:80%;padding:var(--s3) var(--s4);border-radius:var(--r-tile);font-size:var(--small);line-height:1.35}
.bubble-in{align-self:flex-end;background:var(--steel);color:var(--ink);font-family:var(--fl);font-weight:600;letter-spacing:.08em;border-bottom-right-radius:var(--s2)}
.bubble-out{align-self:flex-start;background:var(--graphite);color:var(--on-dark);box-shadow:inset 0 0 0 1px var(--line-dark);border-bottom-left-radius:var(--s2)}
.bubble-out .mark{width:24px;height:24px}

/* the path the ads sell, then the way to a real day */
.tile-fig{margin-top:auto;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s4) var(--s5)}
.path{font-family:var(--fd);font-weight:700;font-size:var(--d-path);line-height:.95;letter-spacing:-.01em;color:var(--on-dark-2)}
.path .booked{color:var(--on-dark)}

/* reveals for the tiles and steps: 90 ms apart, a timed pass covers any the
   observer misses */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out);transition-delay:calc(var(--i,0) * var(--gap-step))}
.js .rv.in{opacity:1;transform:none}

/* ---------- results: the store's numbers as a dashboard ---------- */
.dash{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);margin-top:var(--s8);align-items:stretch}
.dash-main{grid-column:1 / span 8;border-radius:var(--r-tile);padding:var(--tile-pad)}
.dash-side{grid-column:9 / span 4;border-radius:var(--r-tile);padding:var(--tile-pad);display:flex;flex-direction:column}
.dash-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding-bottom:var(--s4);border-bottom:1px solid var(--line-dark)}
.dash-title{font-family:var(--fl);font-weight:600;font-size:var(--small);letter-spacing:.04em;color:var(--on-dark)}
.dash-date{font-size:var(--label);color:var(--on-dark-2);font-variant-numeric:tabular-nums}
.dash-value{margin-top:var(--s5);font-family:var(--fd);font-weight:600;font-size:var(--d-dash);line-height:.95;letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums}
.dash-note{margin-top:var(--s2);color:var(--on-dark-2)}
.kpis > div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding-block:var(--s4);border-bottom:1px solid var(--line-dark)}
.kpis dt{font-size:var(--small);color:var(--on-dark-2)}
.kpis dd{font-family:var(--fd);font-weight:600;font-size:var(--d-sm);line-height:1;color:var(--on-dark);font-variant-numeric:tabular-nums lining-nums}
.dash-src{margin-top:auto;padding-top:var(--s5);font-size:var(--label);color:var(--on-dark-2)}
.chart{margin-top:var(--s6)}
.chart-body{display:grid;grid-template-columns:var(--y-col) minmax(0,1fr)}
.y-labels{position:relative;height:var(--plot-h)}
.y-labels span,.x-labels span{position:absolute;font-family:var(--fl);font-weight:600;font-size:var(--label);letter-spacing:.04em;color:var(--on-dark-2);line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.y-labels span{left:0;top:var(--y);transform:translateY(-50%)}
.plot{position:relative;height:var(--plot-h)}
.plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plot path{fill:none;vector-effect:non-scaling-stroke}
.grid-line{stroke:var(--line-dark);stroke-width:1;stroke-dasharray:3 5}
.base-line{stroke:var(--line-dark-2);stroke-width:1}
.sales-line{stroke:var(--on-dark);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sales-peak{position:absolute;left:var(--x);top:var(--y);width:var(--peak);height:var(--peak);border-radius:50%;background:var(--pin);box-shadow:0 0 0 3px var(--void);transform:translate(-50%,-50%)}
.x-labels{position:absolute;left:0;right:0;top:100%;height:var(--s7)}
.x-labels span{left:var(--x);top:var(--s3);transform:translateX(-50%)}
.x-labels span:first-child{transform:none}
.chart figcaption{font-size:var(--label);color:var(--on-dark-2);margin-top:var(--s7);margin-left:var(--y-col);line-height:1.5}
/* the day draws left to right once, then its peak is marked */
.js .chart .sales-line{clip-path:inset(0 100% 0 0);transition:clip-path var(--t-move) var(--ease-inout)}
.js .chart .sales-peak{opacity:0;transition:opacity var(--t-fade) var(--ease-out) var(--at-peak)}
.js .chart.on .sales-line{clip-path:inset(0 0 0 0)}
.js .chart.on .sales-peak{opacity:1}

/* ---------- who: the trades as a run of huge words ---------- */
.who{background:radial-gradient(var(--spot-r) circle at var(--sx,50%) var(--sy,40%),var(--spot),transparent 70%),var(--graphite)}
.who .head-row .voice{color:var(--on-dark-2)}
.run{margin-top:var(--s8);border-top:1px solid var(--line-dark-2)}
/* the run focuses where the reader is: the row under the pointer, or at the
   middle of the screen while scrolling, grows and brightens; --f (0 to 1)
   is written by the script for each row */
.run li{border-bottom:1px solid var(--line-dark-2)}
.run a{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding-block:var(--s4);
  font-family:var(--fd);font-weight:700;font-size:var(--d-lg);line-height:1;letter-spacing:-.01em}
.run a span{display:inline-block;transform-origin:left center;
  transform:translateX(calc(var(--f,1) * var(--s4))) scale(calc(var(--run-min) + var(--f,1) * (1 - var(--run-min))));
  opacity:calc(var(--run-dim) + var(--f,1) * (1 - var(--run-dim)))}
.run .arr{width:var(--run-arr);height:var(--run-arr);flex:none;color:var(--on-dark);opacity:calc(.25 + var(--f,1) * .75);transform:translateX(calc((1 - var(--f,1)) * -1 * var(--s5)))}
.who-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);margin-top:var(--s7);align-items:baseline}
.who-foot .also{grid-column:1 / span 7;color:var(--on-dark)}
.who-foot .where{grid-column:8 / span 5;color:var(--on-dark-2)}

/* ---------- the light chapter: steps and questions on steel ---------- */
.how{padding-bottom:var(--s8)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);margin-top:var(--s7)}
.card{position:relative;border-radius:var(--r-tile);padding:var(--tile-pad);background:var(--milk);box-shadow:inset 0 0 0 1px var(--milk-edge)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(225deg,transparent 8%,var(--white) 50%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.card p{margin-top:var(--s3);color:var(--ink-2);max-width:30ch}
.questions{padding-top:var(--s8)}
.q-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:start}
.q-grid h2{grid-column:1 / span 5}
.qa-list{grid-column:7 / span 6;border-top:1px solid var(--ink)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding-block:var(--s5);cursor:pointer;list-style:none;
  font-family:var(--fd);font-weight:600;font-size:var(--d-sm);line-height:1.05}
.qa summary::-webkit-details-marker{display:none}
.plus{position:relative;width:20px;height:20px;flex:none}
.plus::before,.plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform var(--t-out) var(--ease-hover)}
.plus::after{transform:rotate(90deg)}
.qa[open] .plus::after{transform:rotate(0deg)}
.qa p{padding-bottom:var(--s5);color:var(--ink-2);max-width:52ch}

/* ---------- built in public ---------- */
.founder{padding-block:var(--s8)}
.founder-card{border-radius:var(--r-tile);padding:clamp(32px,4vw,64px);display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,4vw,64px);align-items:center}
.mark-xl{width:clamp(72px,7vw,96px);height:auto}
.founder-words .voice{color:var(--on-dark);max-width:44ch}
.links{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}

/* ---------- apply ---------- */
.apply-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:start}
.apply-head{grid-column:1 / span 5;position:sticky;top:calc(var(--head) + var(--head-gap) + var(--s6))}
.apply-head .voice{margin-top:var(--s5)}
.dm{margin-top:var(--s6);color:var(--on-dark-2)}
.dm .link{color:var(--on-dark)}
.panel{grid-column:7 / span 6;border-radius:var(--r-tile);padding:clamp(24px,3vw,48px)}
.meter{height:2px;background:var(--line-dark);overflow:hidden;margin-bottom:var(--s4);border-radius:var(--r-pill)}
.meter i{display:block;height:100%;background:var(--on-dark);transform-origin:left;transform:scaleX(var(--m,0));transition:transform var(--t-reveal) var(--ease-out)}
.count{font-size:var(--small);color:var(--on-dark-2);min-height:1.5em;font-variant-numeric:tabular-nums}
.step{margin-top:var(--s5)}
.js .step:not(.cur){display:none}
.q{display:block;font-family:var(--fd);font-weight:600;font-size:var(--d-sm);line-height:1.05;color:var(--on-dark);margin-bottom:var(--s4);padding:0}
.hint{color:var(--on-dark-2);font-size:var(--small);margin-top:calc(var(--s2) * -1);margin-bottom:var(--s4)}
.field{display:block;width:100%;min-height:52px;padding:var(--s3) var(--s4);border-radius:var(--r-field);border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;caret-color:var(--pin)}
.field.area{min-height:120px;resize:vertical;line-height:1.5}
.field:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--paper) inset;-webkit-text-fill-color:var(--ink)}
.field:focus{border-color:var(--ink);outline:2px solid var(--on-dark);outline-offset:2px}
.field[aria-invalid="true"]{border-color:var(--pin)}
.choice{display:flex;align-items:center;gap:var(--s3);min-height:52px;padding:var(--s3) var(--s4);border:1px solid var(--line-dark-2);border-radius:var(--r-field);cursor:pointer;
  transition:border-color var(--t-out) var(--ease-hover),background-color var(--t-out) var(--ease-hover)}
.choice + .choice{margin-top:var(--s2)}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice i{width:18px;height:18px;flex:none;border:1px solid var(--on-dark-2);border-radius:50%;display:grid;place-items:center}
.choice i::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--on-dark);transform:scale(0);transition:transform var(--t-out) var(--ease-hover)}
.choice:has(input:checked){border-color:var(--on-dark);background:var(--glass-tint)}
.choice:has(input:checked) i::after{transform:scale(1);transition-duration:var(--t-in)}
.choice:has(input:focus-visible){outline:2px solid var(--on-dark);outline-offset:3px}
@media (hover:hover) and (pointer:fine){ .choice:hover{border-color:var(--on-dark-2);transition-duration:var(--t-in)} }
.err{margin-top:var(--s4);padding-left:var(--s3);border-left:1px solid var(--pin);color:var(--on-dark);font-size:var(--small)}
.form-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.form-actions #next,.form-actions #send{margin-left:auto}
html:not(.js) #back,html:not(.js) #next,html:not(.js) .meter,html:not(.js) .count{display:none}
.thanks{padding-block:var(--s6);scroll-margin-top:calc(var(--head) + var(--head-gap) + var(--s5))}
.thanks .mark-lg{width:56px;height:56px;margin-bottom:var(--s5)}
.thanks p{margin-top:var(--s3);color:var(--on-dark-2)}
.thanks h3:focus{outline:none}

/* ---------- footer ---------- */
.foot{position:relative;color:var(--on-dark-2);padding-top:var(--s8);padding-bottom:var(--s6);font-size:var(--small);overflow:hidden}
.foot-word{font-family:var(--fd);font-weight:700;font-size:var(--d-foot);line-height:.8;padding-bottom:.14em;letter-spacing:-.02em;color:var(--graphite-2);white-space:nowrap;margin-bottom:var(--s6)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s7) var(--gut)}
.foot .brand{color:var(--on-dark);margin-bottom:var(--s4)}
.foot-brand p + p{margin-top:var(--s1)}
.foot h4{font-family:var(--fl);font-weight:600;font-size:var(--label);letter-spacing:.04em;color:var(--on-dark-3);margin-bottom:var(--s2)}
.foot a{color:var(--on-dark);transition:color var(--t-out) var(--ease-hover)}
.foot li a,.foot-bar a{display:inline-block;padding-block:var(--s3)}
@media (hover:hover) and (pointer:fine){ .foot a:hover{color:var(--white);text-decoration:underline;text-underline-offset:.18em;transition-duration:var(--t-in)} }
.foot-bar .concept{margin-left:var(--s3);color:var(--on-dark-3)}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3) var(--s6);margin-top:var(--s8);padding-top:var(--s4);border-top:1px solid var(--line-dark);font-size:var(--label)}

/* ---------- inside the editor's frame: every word clickable, every question open ---------- */
.editing [data-field],.editing [data-field-href]{cursor:pointer;outline:1px dashed transparent;outline-offset:2px}
.editing [data-field]:hover,.editing [data-field-href]:hover{outline:2px solid var(--edit);background:color-mix(in srgb,var(--edit) 8%,transparent)}
.editing .inplace,.editing .inplace:hover{outline:2px solid var(--edit);background:color-mix(in srgb,var(--edit) 6%,transparent);cursor:text;caret-color:var(--edit)}
.js .editing .step:not(.cur){display:block}
.editing .thanks,.editing .err{display:block !important}
.editing .rv{opacity:1;transform:none}
.inplace-count{position:fixed;z-index:9999;font:var(--label)/1 system-ui,sans-serif;background:var(--ink);color:var(--white);padding:var(--s1) var(--s2);border-radius:var(--r-field);pointer-events:none}
.inplace-count.over{background:var(--edit)}

/* ---------- still frames and reduced motion: everything in its final state ---------- */
.still *,.still *::before,.still *::after,.no-motion *,.no-motion *::before,.no-motion *::after{transition:none !important;animation:none !important}

/* ---------- narrower screens ---------- */
@media (max-width:1080px){
  .nav{gap:var(--s5)}
  .t-ad,.t-sales{grid-column:span 12}
  .t-aud,.t-dm{grid-column:span 6}
  .dash-main,.dash-side{grid-column:span 12}
  .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav,.top-cta{display:none}
  .burger{display:block}
  .top-in{padding-right:var(--s1)}
  .hero{padding-top:calc(var(--head) + var(--head-gap) + var(--s8))}
  .head-row,.who-foot,.q-grid,.apply-grid,.intro-row{grid-template-columns:minmax(0,1fr)}
  .head-row h2,.head-row .voice,.who-foot .also,.who-foot .where,.q-grid h2,.qa-list,.apply-head,.panel,.hero-lede,.intro-row .actions{grid-column:1 / -1}
  .intro-row .actions{justify-content:flex-start}
  .head-row .voice{margin-top:var(--s4)}
  .qa-list{margin-top:var(--s6)}
  .apply-head{position:static}
  .panel{margin-top:var(--s6)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:640px){
  .t-aud,.t-dm{grid-column:span 12}
  .aud-rows > div{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:1fr}
  .actions{width:100%}
  .actions .pill{flex:1 1 100%}
  .form-actions .pill{flex:1 1 auto}
  .founder-card{grid-template-columns:auto minmax(0,1fr)}
  .founder-words{grid-column:1 / -1}
  .foot-grid{grid-template-columns:1fr}
  .play{bottom:auto;top:calc(var(--head) + var(--head-gap) + var(--s3))}
  .chart-body{grid-template-columns:var(--s7) minmax(0,1fr)}
  .chart figcaption{margin-left:0}
}

@media print{
  .top,.sheet,.skip,.burger,.hero-media,.play,.chart{display:none}
  body,.light,.who{background:none;color:var(--ink)}
  .dark::before,.glass::after{display:none}
  .js .rv,.js .step:not(.cur){opacity:1;transform:none;display:block}
}