/* Delia, the final home page. One token set for the whole page: day and evening are light, night is dark.
   The hero and the Toro moment keep the painted brush look; everything else is the quiet card system. */

@font-face{font-family:"Clash Display";src:url("/shared/fonts/ClashDisplay-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Clash Display";src:url("/shared/fonts/ClashDisplay-Semibold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Mona Sans";src:url("fonts/MonaSans-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Mona Sans";src:url("fonts/MonaSans-Medium.woff2") format("woff2");font-weight:500 600;font-display:swap}

:root{
  --cobalt:#2140d6;
  --mustard:#f4ab28;
  --on-cobalt:#ffffff;
  --on-mustard:#17130a;

  --bg:#f5f4f0;
  --bg-2:#ecebe6;
  --surface:#ffffff;
  --ink:#121212;
  --ink-2:#4a4944;
  --ink-3:#66655f;
  --line:rgba(18,18,18,.12);
  --line-strong:rgba(18,18,18,.22);
  --btn-bg:#121212;
  --btn-ink:#ffffff;
  --pill:#e4e2dd;
  --viz:#ffffff;
  --viz-ink:#121212;
  --seat:#b9b8b6;
  --map-ground:#f4ead6;--map-block:#f7dca6;--map-street:#ffffff;--map-label:#55524a;

  --shadow-sm:0 0 0 1px rgba(18,18,18,.06),0 1px 1px -.5px rgba(18,18,18,.06),0 3px 3px -1.5px rgba(18,18,18,.06),0 6px 6px -3px rgba(18,18,18,.05);
  --shadow-md:0 0 0 1px rgba(18,18,18,.05),0 1px 1px -.5px rgba(18,18,18,.06),0 3px 3px -1.5px rgba(18,18,18,.06),0 6px 6px -3px rgba(18,18,18,.06),0 12px 12px -6px rgba(18,18,18,.06),0 24px 24px -12px rgba(18,18,18,.07);
  --shadow-lg:0 2.8px 2.2px rgba(18,18,18,.03),0 6.7px 5.3px rgba(18,18,18,.045),0 12.5px 10px rgba(18,18,18,.055),0 22.3px 17.9px rgba(18,18,18,.065),0 41.8px 33.4px rgba(18,18,18,.08),0 100px 80px rgba(18,18,18,.11);
  --card-edge:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.08);

  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);

  --pad:clamp(20px,4.5vw,64px);
  --display:"Clash Display","Mona Sans",system-ui,sans-serif;
  --text:"Mona Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --g-b:#d8f3e3;--g-i:#17633f;
  --b-b:#dfe4f8;--b-i:#203eb0;
  --p-b:#e9e2f4;--p-i:#5d3f93;
  --t-b:#d6eeee;--t-i:#00686c;
  --r-b:#f4dcd6;--r-i:#b3311c;
  --a-b:#f3e5c4;--a-i:#7d5200;
  /* the painted hero and the Toro moment read these names; they point at the same tokens */
  --paper:var(--bg);--paper-2:var(--surface);--muted:var(--ink-3);--rule:var(--line);
  --panel:var(--surface);--panel-ink:var(--ink);--panel-muted:var(--ink-3);
  --shadow-card:var(--shadow-lg);--shadow-soft:var(--shadow-md);
  --body:var(--text);--gutter:var(--pad);
  --sec:clamp(88px,13vh,150px);
  --grain-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .07 0 0 0 0 .2 0 0 0 -1.9 .68'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .07 0 0 0 0 .2 0 0 0 -4.4 1.6'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0c0c0d;
  --bg-2:#141416;
  --surface:#1b1b1e;
  --ink:#f6f5f1;
  --ink-2:#c3c2bd;
  --ink-3:#9b9a95;
  --line:rgba(255,255,255,.13);
  --line-strong:rgba(255,255,255,.26);
  --btn-bg:#f6f5f1;
  --btn-ink:#121212;
  --pill:#2a2a2e;
  --viz:#232227;
  --viz-ink:#f6f5f1;
  --seat:#6d6c72;
  --map-ground:#2b2a30;--map-block:#3a352b;--map-street:#45444c;--map-label:#c9c7c0;

  --shadow-sm:0 0 0 1px rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.4);
  --shadow-md:0 0 0 1px rgba(255,255,255,.07),0 2px 3px rgba(0,0,0,.4),0 12px 18px -6px rgba(0,0,0,.5),0 28px 36px -12px rgba(0,0,0,.55);
  --shadow-lg:0 3px 3px rgba(0,0,0,.3),0 12px 12px rgba(0,0,0,.34),0 30px 30px rgba(0,0,0,.4),0 80px 80px rgba(0,0,0,.5);

  --g-b:#173527;--g-i:#73dba6;
  --b-b:#232945;--b-i:#9db2f5;
  --p-b:#2f2844;--p-i:#c9b6fb;
  --t-b:#15343a;--t-i:#6bd5de;
  --r-b:#40221d;--r-i:#ff9f8c;
  --a-b:#3a2e15;--a-i:#f3c35f;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.5 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .4s ease,color .4s ease;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
:root[data-theme="dark"] .only-light,:root:not([data-theme="dark"]) .only-dark{display:none}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.dc :focus-visible,.panel :focus-visible{outline-color:currentColor}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--pad);top:-80px;background:var(--btn-bg);color:var(--btn-ink);padding:12px 18px;border-radius:999px;z-index:100;text-decoration:none;font-weight:500}
.skip:focus{top:12px}
/* type */
.h2{font:600 clamp(40px,5.6vw,84px)/.98 var(--display);letter-spacing:-.018em;text-wrap:balance}
.lead{font-size:clamp(18px,1.55vw,22px);line-height:1.45;color:var(--ink-2);max-width:34em;text-wrap:pretty}
.dim{color:var(--ink-3)}
/* buttons: neutral on purpose, so the colour cards stay the loudest thing on the page */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 24px;border-radius:999px;border:0;background:var(--btn-bg);color:var(--btn-ink);font:500 16px/1 var(--text);text-decoration:none;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 1px 2px rgba(0,0,0,.25),0 6px 14px -6px rgba(0,0,0,.35);transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out)}
.btn--lg{min-height:58px;padding:0 30px;font-size:18px}
.btn--quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 2px 3px rgba(0,0,0,.25),0 12px 20px -8px rgba(0,0,0,.45)}
  .btn--quiet:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
  .btn:active{transform:scale(.97)}
}
.btn--small{min-height:42px;padding:0 18px;font-size:15px}
.btn--ghost{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong),0 8px 18px -10px rgba(10,14,40,.4)}
.hero__cta .btn{min-height:52px;padding:0 26px;font-size:17px}
.scene--hero .hero__cta .btn:focus-visible{outline:3px solid #FFFEFB;outline-offset:0;box-shadow:0 0 0 7px #2140D6}

/* header: one floating bar for the whole page. It steps aside on the way down and comes back on the way up. */
.top { position: fixed; z-index: 50; top: 14px; left: 50%; width: min(1180px, calc(100% - 28px)); translate: -50% 0; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 20px; border-radius: 999px; background: var(--paper-2); box-shadow: var(--shadow-soft), 0 0 0 1px var(--rule); transition: translate 320ms var(--ease-out); }
.top.is-away { translate: -50% -110px; }
.top__logo { display: block; margin-right: auto; border-radius: 8px; }
.top__logo img { height: 34px; width: auto; }
.top__nav { display: flex; gap: 2px; }
.top__nav a { padding: 10px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink-2); transition: background-color 160ms ease, color 160ms ease; }
.theme { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color 160ms ease, rotate 320ms var(--ease-out); }
:root[data-theme="dark"] .theme { rotate: 180deg; }
@media (hover: hover) and (pointer: fine) { .top__nav a:hover, .theme:hover { background: var(--pill); color: var(--ink); } }
@media (max-width: 640px) { .top { padding-left: 14px; } .top__nav { display: none; } .top__logo img { height: 30px; } }
.top__nav a:focus-visible{color:var(--ink)}
.theme svg{width:20px;height:20px}

/* ================= 1. the hero: real footage, and a painted window for the time you get back ================= */
.scene { position: relative; height: 270vh; --col-bg: var(--paper); --col-ink: var(--ink); --col-muted: var(--muted); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 63fr) minmax(0, 37fr); background: var(--col-bg); color: var(--col-ink); }
.view { position: relative; overflow: hidden; container-type: size; background: #20222e; }
.canvas { position: absolute; --w: max(100cqw, calc(100cqh * var(--ar))); width: var(--w); height: calc(var(--w) / var(--ar)); left: calc((100cqw - var(--w)) * var(--fx, .5)); top: calc((100cqh - var(--w) / var(--ar)) * var(--fy, .5)); }
.real, .paint img, .paint video, .paint canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.paint, .shadow { position: absolute; inset: 0; }
.shadow { background: #0c1030; opacity: .34; translate: 7px 10px; }
.life { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
html.js .paint, html.js .shadow { clip-path: inset(50%); }
.scene--toro { --col-bg: #1B7351; --col-ink: #FBF1DC; --col-muted: #D9F0DF; }
.scene--toro .stage::before{content:"";position:absolute;inset:0;background:var(--grain);mix-blend-mode:multiply;opacity:.5;pointer-events:none}
.story { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 96px clamp(24px, 3.4vw, 56px) 40px; min-width: 0; }
.story > * { position: relative; }
.story h2 { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.1vw, 50px); line-height: 1.02; letter-spacing: -0.022em; text-wrap: balance; }

/* the card a hand-off leaves behind, in the hero */
.dcard { width: min(100%, 420px); padding: 8px; border-radius: 36px; background: var(--panel); color: var(--panel-ink); box-shadow: var(--shadow-card); }
.dcard__block { border-radius: 29px; padding: 22px 24px 24px; background: var(--cobalt); color: #FFFEFB; box-shadow: inset 0 1px 0 rgb(255 255 255 / .24), inset 0 0 0 1px rgb(255 255 255 / .06); }
.dcard--mustard .dcard__block { background: var(--mustard); color: #17150F; }
.dcard__say { font-weight: 500; font-size: clamp(21px, 1.75vw, 27px); line-height: 1.16; letter-spacing: -0.015em; text-wrap: balance; }
.dcard--instrument .dcard__say { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.35; letter-spacing: 0; font-weight: 500; margin-top: 6px; }
.dcard__num { font-family: var(--display); font-weight: 600; font-size: clamp(50px, 4.6vw, 72px); line-height: .95; letter-spacing: -0.04em; font-feature-settings: "tnum"; }
.dcard__num small { font-size: .36em; font-weight: 500; letter-spacing: 0; margin-left: 6px; opacity: .8; }
.dcard__rows { padding: 6px 12px 8px; }
.dcard__rows li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 4px; }
.dcard__rows li + li { border-top: 1px solid var(--rule); }
.dcard__rows p { font-size: 15.5px; line-height: 1.35; }
.dcard__rows small { display: block; margin-top: 3px; font-size: 13px; color: var(--panel-muted); }
.dcard__rows{list-style:none;margin:0}
.dcard .tile{flex:none;width:36px;height:36px;border-radius:11px;--tb:var(--b-b);--ti:var(--b-i)}
.dcard .tile svg{width:20px;height:20px}
.tile--green{--tb:var(--g-b);--ti:var(--g-i)}.tile--violet{--tb:var(--p-b);--ti:var(--p-i)}.tile--red{--tb:var(--r-b);--ti:var(--r-i)}.tile--amber{--tb:var(--a-b);--ti:var(--a-i)}.tile--blue{--tb:var(--b-b);--ti:var(--b-i)}

.frame { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; border-radius: 26px;  opacity: 0; visibility: hidden; transition: opacity 220ms ease, visibility 0s 220ms; }
.frame p { max-width: 250px; padding: 14px 16px; border-radius: 20px; background: var(--panel); color: var(--panel-ink); font-weight: 500; font-size: 16px; line-height: 1.32; box-shadow: var(--shadow-card); text-wrap: pretty; }
.frame__ring { display: inline-block; width: 20px; height: 20px; margin: 0 7px -4px 0; color: var(--cobalt); }
:root[data-theme="dark"] .frame__ring { color: #9DB0FF; }
.yes { min-width: 132px; min-height: 54px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--mustard); color: #17150F; font-family: var(--display); font-weight: 600; font-size: 22px; cursor: pointer; box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 3px 0 #9A6406, 0 14px 22px -8px rgb(12 16 48 / .7); transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out); }
.yes:active { transform: translateY(3px) scale(.98); box-shadow: 0 1px 0 rgb(255 255 255 / .5) inset, 0 0 0 #9A6406, 0 6px 12px -6px rgb(12 16 48 / .7); }
@media (hover: hover) and (pointer: fine) { .yes:hover { transform: translateY(-2px); } .yes:active { transform: translateY(3px) scale(.98); } }
.scene.is-asked:not(.is-yes) .frame { opacity: 1; visibility: visible; transition: opacity 260ms ease; }
.grip { position: absolute; width: 44px; height: 76px; margin: -38px 0 0 -22px; padding: 0; border: 0; background: transparent; cursor: ew-resize; touch-action: none; opacity: 0; visibility: hidden; transition: opacity 200ms ease; }
.grip span { position: absolute; left: 50%; top: 50%; width: 22px; height: 60px; translate: -50% -50%; border-radius: 999px; background: #FBF1DC; box-shadow: 0 0 0 2px #1B1D33, 0 8px 16px -4px rgb(12 16 48 / .6); transition: scale 160ms var(--ease-out); }
.grip span::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 22px; translate: -50% -50%; border-left: 2px solid #1B1D33; border-right: 2px solid #1B1D33; }
.scene.is-open:not(.is-full) .grip { opacity: 1; visibility: visible; }
.grip:active span { scale: 1.12; }
@media (hover: hover) and (pointer: fine) { .grip:hover span { scale: 1.1; } }
.scene--hero { height: auto; }
.scene--hero .stage { position: relative; display: block; min-height: 640px; background: #20222e; }
.scene--hero .view { position: absolute; inset: 0; }
/* One stacked clip per mood: the real half fills the frame as plain video, the painted half is drawn into .paintcv
   and cut to the brush-edged window (hero.js). The frame is a few px larger than the view so the seam between the
   two halves can never show at an edge. */
.scene--hero { --fx: .5; --fy: .5; }
.scene--hero .canvas { --w: calc(max(100cqw, 100cqh * var(--ar)) + 6px); }
.reel { position: absolute; inset: 0; overflow: hidden; isolation: isolate; z-index: 0; background: #20222e; }
.reel .real { inset: auto; left: 0; top: 0; width: 100%; height: 200%; object-fit: fill; }
html:not(.js) .reel { background: url("hero-ai/out/hero-day.webp") 0 0 / 100% 200% no-repeat; }
.duskcv, .paintcv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.duskcv { z-index: 1; } .paintcv { z-index: 2; }
.scene--hero .paint, html.js .scene--hero .paint { z-index: 3; clip-path: none; pointer-events: none; }
/* stand-in grades, used only while a mood's own real clip has not arrived (hero-ai/out/moods.js says which) */
.real[data-grade="evening"], .duskcv[data-grade="evening"] { filter: sepia(calc(.34 * var(--g, 1))) saturate(calc(1 + .3 * var(--g, 1))) hue-rotate(calc(-10deg * var(--g, 1))) brightness(calc(1 - .1 * var(--g, 1))) contrast(calc(1 + .06 * var(--g, 1))); }
.real[data-grade="night"], .duskcv[data-grade="night"] { filter: brightness(calc(1 - .62 * var(--g, 1))) saturate(calc(1 - .45 * var(--g, 1))) hue-rotate(calc(18deg * var(--g, 1))) contrast(calc(1 + .15 * var(--g, 1))); }
/* the window can be picked up and moved: anywhere inside it with a mouse, by this handle with a finger or the keys */
.scene--hero .grip { z-index: 7; width: 48px; height: 48px; margin: -24px 0 0 -24px; cursor: grab; }
.scene--hero .grip span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #1B1D33; }
.scene--hero .grip span::before { content: none; }
.scene--hero .grip svg { width: 20px; height: 20px; }
.scene--hero .grip:focus-visible { outline: 3px solid #FFFEFB; outline-offset: 0; border-radius: 50%; box-shadow: 0 0 0 7px #2140D6; }
/* with a mouse the whole window is the handle, so the round one stays out of sight until it is wanted */
@media (hover: hover) and (pointer: fine) { .scene--hero.is-open:not(.is-full) .grip { opacity: 0; } .scene--hero.is-open.can-move:not(.is-full) .grip, .scene--hero.is-open.is-moving .grip, .scene--hero.is-open:not(.is-full) .grip:focus-visible, .scene--hero.is-open:not(.is-full) .grip:hover { opacity: 1; } }
@media not ((hover: hover) and (pointer: fine)) { .scene--hero .grip span { width: 30px; height: 30px; } .scene--hero .grip svg { width: 16px; height: 16px; } }
.scene--hero.can-move .stage { cursor: grab; }
.scene--hero.is-moving .stage, .scene--hero.is-moving .grip { cursor: grabbing; }
.scene--hero.is-moving { user-select: none; -webkit-user-select: none; }
.hero__copy { position: absolute; left: var(--gutter); top: clamp(92px, 12vh, 124px); bottom: auto; z-index: 4; max-width: min(760px, calc(100% - 2 * var(--gutter))); display: grid; gap: 14px; justify-items: start; }
.hero__h1 { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 5.6vw, 92px); line-height: .96; letter-spacing: -0.03em; }
/* The words are in the first paint. The paint behind them is a ::before, cut to a brush shape that brush.js sets in --brush,
   so the headline is readable (and counted by the browser as painted) before the stroke has finished. */
.stroke { display: inline-block; padding: .16em max(.42em, 24px) .2em; position: relative; isolation: isolate; }
.stroke::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paint); clip-path: var(--brush, none); }
html.js .stroke::before { clip-path: var(--brush, inset(0 100% 0 0)); }
.hero__h1 .stroke { display: block; width: fit-content; white-space: nowrap; }
.hero__h1 .stroke + .stroke { margin-top: -.1em; margin-left: .32em; }
.stroke--cobalt { --paint: #2140D6; color: #FBF1DC; }
.stroke--mustard { --paint: #F4AB28; color: #17150F; }
html:not(.js) .stroke::before { border-radius: 10px; }
.hero__h1 { rotate: -1.6deg; transform-origin: 0 0; filter: drop-shadow(5px 8px 0 rgb(12 16 48 / .34)); }
.hero__sub { font-weight: 500; font-size: clamp(18px, 1.9vw, 27px); line-height: 1.2; margin-left: clamp(6px, 1.4vw, 22px); filter: drop-shadow(4px 6px 0 rgb(12 16 48 / .3)); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.hero__card { position: absolute; z-index: 5; right: var(--gutter); bottom: clamp(36px, 7vh, 84px); width: 348px; display: grid; }
.hero__card .dcard { grid-area: 1 / 1; align-self: end; width: 100%; opacity: 0; transform: translateY(14px) scale(.97); transition: opacity 260ms ease, transform 520ms var(--ease-out); pointer-events: none; }
.hero__card .dcard.is-on { opacity: 1; transform: none; }
.hero__card .dcard__say { font-size: 21px; } .hero__card .dcard--instrument .dcard__say { font-size: 15px; } .hero__card .dcard__num { font-size: 54px; }
html.js .scene--hero:not(.is-in) .hero__card .dcard.is-on { opacity: 0; transform: translateY(26px) scale(.96); }
.scene--toro .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.scene--toro .view { justify-self: center; height: min(86svh, 860px); aspect-ratio: 9 / 16; border-radius: 30px; rotate: -2deg; box-shadow: 0 0 0 10px #FBF1DC, 0 40px 70px -20px rgb(4 30 20 / .7), 0 12px 24px -8px rgb(4 30 20 / .5); background: #FBF1DC; }
.scene--toro .story { padding-left: 0; }
.scene--toro .paint, .scene--toro .shadow { display: none; }
.scene--toro .view { background: #F4EBDD; }
.scene--toro .story h2 { font-size: clamp(44px, 6vw, 96px); line-height: .95; }
.toro__p { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; max-width: 32ch; }
.toro__p--small { color: var(--col-muted); font-size: 16px; }

/* ================= 2 to 8: the card system ================= */
/* the Delia card, sized in em so it scales from tile to panel */
.dc{font-size:16px;border-radius:1.75em;padding:1.5em 1.5em .75em;position:relative;box-shadow:var(--card-edge),var(--shadow-lg);transition:background-color .35s ease,color .35s ease}
.dc--s{background:var(--cobalt);color:var(--on-cobalt);--viz:#3350e0;--viz-ink:#fff;--pill:#1a33b8;--seat:#8fa2ff}
.dc--i{background:var(--mustard);color:var(--on-mustard);--viz:#fbc864;--viz-ink:#17130a;--pill:#f7b740;--seat:#a5761a}
.dc,.panel{--map-ground:#f4ead6;--map-block:#f7dca6;--map-street:#ffffff;--map-label:#55524a}
.viz-map{--viz:#fff;--viz-ink:#121212}
.dc-time{font:600 5.6em/.86 var(--display);letter-spacing:-.025em;display:flex;align-items:baseline;gap:.1em;font-variant-numeric:tabular-nums}
.dc-time small{font:500 .34em/1 var(--text);letter-spacing:0;opacity:.82}
.dc--i .dc-say{font:500 1.22em/1.38 var(--text);margin-top:.7em;text-wrap:pretty}
.dc--s .dc-say{font:500 1.95em/1.2 var(--text);letter-spacing:-.012em;text-wrap:pretty;padding-top:.1em}
.dc-viz{margin:1.1em -.75em 0;border-radius:1em;background:var(--viz);color:var(--viz-ink);height:8.4em;overflow:hidden;position:relative}
.chip{position:absolute;left:.75em;top:.75em;display:inline-flex;align-items:center;gap:.4em;background:var(--pill);color:var(--viz-ink);font:500 .9em/1 var(--text);padding:.5em .8em;border-radius:999px;z-index:1;white-space:nowrap}
.viz-map .chip{background:var(--viz);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.chip svg{width:1.05em;height:1.05em}
.viz-map svg.map{position:absolute;inset:0;width:100%;height:100%}
.dc--s{--route:var(--cobalt)}.dc--i,.panel{--route:#e2541b}
.dc--i .seats{--route:#17130a}
.dc--s .dc-viz:not(.viz-map){--route:#fff}
/* insight rows */
.rows{display:grid;gap:18px}
.row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.tile{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--tb);color:var(--ti)}
.tile svg{width:22px;height:22px}
.tn-g{--tb:var(--g-b);--ti:var(--g-i)}.tn-b{--tb:var(--b-b);--ti:var(--b-i)}.tn-p{--tb:var(--p-b);--ti:var(--p-i)}
.tn-t{--tb:var(--t-b);--ti:var(--t-i)}.tn-r{--tb:var(--r-b);--ti:var(--r-i)}.tn-a{--tb:var(--a-b);--ti:var(--a-i)}
.row p{font-weight:500;font-size:17px;line-height:1.38;text-wrap:pretty}
.row .src{display:block;font-weight:400;font-size:13.5px;color:var(--ink-3);margin-top:4px}
.row .act{display:flex;width:fit-content;margin-top:10px;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:var(--pill);font-size:14px;font-weight:500}
/* sections */
.sec{padding:clamp(88px,13vh,150px) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px 64px;align-items:end;margin-bottom:clamp(40px,6vh,72px)}
.sec-head .lead{justify-self:end}
/* the scene: the proof card grows into a full-bleed panel */
.pinned{position:relative}
.pinned-pin{padding:clamp(88px,13vh,150px) 0 clamp(60px,9vh,110px)}
.pinned-copy{text-align:center;max-width:980px;margin:0 auto;padding:0 var(--pad)}
.pinned-copy .lead{margin:22px auto 0}
.panel{background:var(--mustard);color:var(--on-mustard);margin:clamp(36px,6vh,64px) var(--pad) 0;border-radius:36px;box-shadow:var(--card-edge),var(--shadow-lg);overflow:hidden}
.panel-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(28px,4.4vw,64px);height:100%}
.panel-in>div{min-width:0}
.panel-time{font:600 clamp(96px,16.4vw,250px)/.8 var(--display);letter-spacing:-.035em;display:flex;align-items:baseline;gap:.08em;font-variant-numeric:tabular-nums;margin-left:-.03em}
.panel-time small{font:500 .2em/1 var(--text);letter-spacing:0;opacity:.82}
.panel-say{font:500 clamp(20px,2.3vw,34px)/1.25 var(--text);margin-top:clamp(18px,3vh,34px);max-width:17em;text-wrap:balance}
.panel-map{position:relative;border-radius:24px;overflow:hidden;background:#fff;--viz:#fff;--viz-ink:#121212;height:min(42vh,400px);min-height:220px;font-size:clamp(15px,1.25vw,19px);box-shadow:0 1px 2px rgba(0,0,0,.14),0 18px 34px -14px rgba(0,0,0,.34)}
.panel-map svg.map{position:absolute;inset:0;width:100%;height:100%}
.sheet{padding:clamp(28px,4.5vh,48px) var(--pad) 0}
.sheet .rows{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px clamp(20px,2.6vw,40px)}

.pinned.is-pinned .pinned-pin{height:100vh;padding:0;overflow:hidden;position:relative}
.pinned.is-pinned .pinned-copy{position:absolute;left:0;right:0;top:9vh;margin:auto;z-index:0}
.pinned.is-pinned .panel{position:absolute;left:0;right:0;top:0;margin:0;height:61vh;border-radius:0;transform-origin:50% 0;will-change:transform;z-index:1}
.pinned.is-pinned .sheet{position:absolute;left:0;right:0;top:61vh;height:39vh;display:flex;flex-direction:column;justify-content:center;padding-top:0;max-width:1440px;margin:0 auto}
.pinned.is-pinned .panel-map{height:min(40vh,400px)}
.pinned.is-pinned .panel-time{font-size:min(19.5vw,36vh)}
.steps{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:0;max-width:30em}
.steps li{display:grid;grid-template-columns:2.2em 1fr;padding:16px 0;border-top:1px solid var(--line);font-size:17px}
.steps li b{font:600 17px/1.5 var(--display);color:var(--ink-3)}
.plain{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,6vw,96px);margin-top:clamp(40px,6vh,72px)}
.plain div{padding:30px 0 34px;border-top:1.5px solid var(--ink)}
.plain h3{font:600 clamp(26px,2.9vw,42px)/1.04 var(--display);letter-spacing:-.012em}
.plain p{margin-top:12px;color:var(--ink-2);max-width:28em;font-size:18px}
.textlink{display:inline-block;margin-top:28px;font-weight:500;text-decoration:none;padding:10px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 6px)/100% 1.5px no-repeat}
/* video clips: a lazy poster image with the video on top. The video only loads when the clip is in view. */
.clip{position:relative;overflow:hidden;background:#1b1b1e}
.clip picture{display:contents}
.clip img,.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clip video{opacity:0;transition:opacity .6s ease}
.clip.is-live video{opacity:1}
.clip-toggle{position:absolute;right:14px;bottom:14px;z-index:3;width:44px;height:44px;border-radius:999px;border:0;display:grid;place-items:center;background:rgba(12,12,13,.72);color:#fff;transition:background-color .2s ease,transform .16s var(--ease-out)}
.clip-toggle:hover{background:rgba(12,12,13,.9)}
.clip-toggle:active{transform:scale(.94)}
.clip-toggle:focus-visible{outline-color:#fff}
.clip-toggle svg{width:14px;height:14px}
.clip-toggle .i-play,.clip-toggle[aria-pressed="true"] .i-pause{display:none}
.clip-toggle[aria-pressed="true"] .i-play{display:block}

/* the day, and the app film */
.appdemo{background:var(--bg)}
.day{background:var(--bg-2)}
.day .sec-head{align-items:start}
.day .sec-head .lead{justify-self:start;align-self:end}
.clip-all{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;border-radius:999px;border:0;background:var(--pill);color:var(--ink);font-size:14px;font-weight:500;margin-top:-8px}
.clip-all svg{width:12px;height:12px}
.clip-all .i-play,.clip-all[aria-pressed="true"] .i-pause{display:none}
.clip-all[aria-pressed="true"] .i-play{display:block}
/* the real app, recorded on an iPhone */
.appdemo-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.appdemo-grid>*{min-width:0}
.appdemo .h2{font-size:clamp(48px,7.4vw,112px);line-height:.9}
.appdemo .lead{margin-top:28px}
.phone{justify-self:center;width:min(100%,372px);padding:11px;border-radius:64px;background:#0c0c0d;box-shadow:inset 0 0 0 1.5px #3a3a40,0 2px 3px rgba(18,18,18,.2),0 30px 40px -18px rgba(18,18,18,.35),0 80px 90px -30px rgba(18,18,18,.35)}
.phone .clip{border-radius:53px;aspect-ratio:600/1304;background:#f1efe9}
.phone .clip-toggle{right:16px;bottom:16px}
.beats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(56px,7vw,104px) clamp(24px,3.4vw,56px);align-items:start}
.beat:nth-child(even){margin-top:clamp(48px,9vw,140px)}
.beat-media{position:relative;border-radius:32px;overflow:hidden;box-shadow:var(--shadow-lg);isolation:isolate}
.beat-media .clip{aspect-ratio:4/3}
.beat-time{position:absolute;left:16px;top:16px;z-index:2;background:#0c0c0d;color:#fff;font:600 17px/1 var(--display);letter-spacing:.01em;padding:11px 15px 10px;border-radius:999px;font-variant-numeric:tabular-nums}
.beat-card{box-shadow:var(--card-edge),var(--shadow-md);font-size:clamp(12px,1.02vw,14.5px);width:min(78%,25em);margin:-2.4em 0 0 clamp(16px,2.2vw,32px);padding:1.25em 1.4em 1.3em;z-index:2}
.beat-card.dc--s .dc-say{font-size:1.5em;line-height:1.3}
.beat-card .dc-time{font-size:4.6em}
.beat-card.dc--i .dc-say{font-size:1.3em;margin-top:.55em}
.beat h3,.beat>p{position:relative;z-index:3}
.beat h3{font:600 clamp(26px,2.5vw,38px)/1.06 var(--display);letter-spacing:-.01em;margin:28px 0 0 clamp(16px,2.2vw,32px)}
.beat>p{margin:10px 0 0 clamp(16px,2.2vw,32px);color:var(--ink-2);max-width:27em;font-size:18px;text-wrap:pretty}

/* trust and privacy */
.trust .lead{margin-top:24px}

/* waitlist */
.join{text-align:center;background:var(--cobalt);color:#fff;--ink:#fff;--ink-2:#fff;--ink-3:#dfe5ff;--surface:#fff;--r-i:#fff}
.join .dim{color:#aebcff}
.join :focus-visible{outline-color:#fff}
.join form{color:#121212}
.join input{color:#121212}
.join input::placeholder{color:#66655f}
.join form .btn{background:#121212;color:#fff}
.join form .btn[disabled]{opacity:1;cursor:progress}
.join .h1b{font:600 clamp(54px,10.6vw,160px)/.88 var(--display);letter-spacing:-.03em;white-space:nowrap}
.join .nb{white-space:nowrap}
.join .lead{margin:26px auto 0}
.join-box{max-width:600px;margin:40px auto 0;text-align:left}
.join form{display:flex;gap:10px;padding:8px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-md)}
.join input{flex:1;min-width:0;border:0;background:transparent;font:400 18px/1 var(--text);padding:0 20px;min-height:58px;border-radius:999px}
.join input:focus-visible{outline-offset:0}
.join .err{color:var(--r-i);font-size:15px;margin:12px 24px 0;min-height:1.4em;font-weight:500}
.join .fine{font-size:14px;color:var(--ink-3);margin:6px 24px 0}
.done{background:#fff;color:#121212;border-radius:28px;padding:26px 26px 24px;box-shadow:0 30px 60px -24px rgba(0,0,20,.55);--ink-3:#66655f}
.done-say{font:500 clamp(24px,2.4vw,31px)/1.2 var(--text);letter-spacing:-.012em;text-wrap:pretty}
.done .rows{margin-top:22px}
.done:focus{outline:none}
.done{animation:arrive .5s var(--ease-out)}
@keyframes arrive{from{opacity:0;transform:translateY(12px) scale(.97)}}
.faq{background:var(--bg-2)}
/* faq */
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 2px;font:600 clamp(20px,1.8vw,26px)/1.2 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq details p{padding:0 2px 26px;color:var(--ink-2);max-width:38em;font-size:18px}
/* small pages */
.doc{padding:clamp(48px,9vh,110px) 0 clamp(72px,12vh,140px)}
.doc .lead{margin-top:24px}
.doc .plain h2{font:600 clamp(24px,2.4vw,34px)/1.06 var(--display);letter-spacing:-.01em}
.doc .plain a{font-weight:500;text-underline-offset:3px}
/* footer */
.foot{border-top:1px solid var(--line);padding:44px 0 56px;font-size:15px;color:var(--ink-2)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:20px 36px;align-items:center}
.foot .made{margin-right:auto}
.foot a{text-decoration:none;font-weight:500;padding:12px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/0 1.5px no-repeat;transition:background-size .25s var(--ease-out)}
.foot a:hover,.foot a:focus-visible{background-size:100% 1.5px}
.logo{display:block;border-radius:8px}
.foot .logo img{height:44px;width:auto;margin-left:-6px}
.doc{padding-top:clamp(120px,18vh,180px)}

/* ---------- one brush for the whole page: the hero's strokes, carried into the headings, the cards and the last band ---------- */
.h2 .stroke{padding:.02em .2em .1em;margin:.04em -.06em 0 -.12em;white-space:nowrap}
.stroke--cream{--paint:#FBF1DC;color:#2140D6}
/* further down the page a stroke is painted when its heading scrolls into view. Until then its words read as plain heading text. */
html.js .h2 .stroke:not([data-painted]),html.js .h1b .stroke:not([data-painted]){color:inherit}
.dc,.panel,.join,.done{background-image:var(--grain-soft)}
.tear{position:absolute;left:0;right:0;bottom:-1px;height:34px;z-index:5;background:var(--bg);pointer-events:none}
html:not(.js) .tear{display:none}
.join .h1b{display:inline-grid;justify-items:start;text-align:left;font:600 clamp(42px,7vw,108px)/.96 var(--display);letter-spacing:-.03em;white-space:normal;rotate:-1.6deg;filter:drop-shadow(5px 8px 0 rgb(8 12 60 / .4))}
.join .h1b .stroke{display:block;width:fit-content;white-space:nowrap}
.join .h1b .stroke + .stroke{margin-top:-.1em;margin-left:.32em}
.join .lead{margin-top:34px}
.sheet .row p{font-size:clamp(17px,1.35vw,20px)}
.sheet .row .src{font-size:14.5px}
.plain .tile{margin-bottom:18px}
.beat-media .clip img,.beat-media .clip video{filter:saturate(.9) contrast(1.04) sepia(.07)}
.toro__p{text-wrap:pretty}

/* fix round 2: brand colours only on the trust tiles, looser display tracking, Toro's second line at reading size */
.plain .tile{--tb:var(--cobalt);--ti:#fff;background-image:var(--grain-soft)}
.plain div:nth-child(2n) .tile{--tb:var(--mustard);--ti:#17130a}
.h2{letter-spacing:-.008em}
.plain h3,.beat h3,.faq summary{letter-spacing:0}
.toro__p--small{font-size:clamp(16px,1.25vw,19px)}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .sheet .rows{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------- the painted scenes on a phone ---------- */
@media (max-width:860px){
  .stage { grid-template-columns: 1fr; grid-template-rows: 47svh minmax(0, 1fr); }
  .story { justify-content: flex-start; gap: 12px; padding: 18px 18px 14px; }
  .story h2 { font-size: clamp(25px, 7vw, 34px); }
  .dcard__rows .row--more { display: none; }
  .dcard { padding: 6px; border-radius: 30px; } .dcard__block { padding: 16px 18px 18px; border-radius: 24px; }
  .dcard__say { font-size: 20px; } .dcard__num { font-size: 44px; } .dcard--instrument .dcard__say { font-size: 14.500px; }
  .dcard__rows { padding: 2px 10px 4px; } .dcard__rows li { padding: 9px 2px; } .dcard__rows p { font-size: 14.500px; }
  .frame { gap: 10px; padding: 10px; } .frame p { font-size: 14.500px; padding: 11px 13px; max-width: 220px; } .yes { min-height: 48px; font-size: 20px; }
  .scene--hero .stage { min-height: 600px; }
  .scene--hero { --fx: .235; }
  .hero__copy { top: 84px; bottom: auto; } .hero__card { display: none; } .hero__h1 { font-size: 11.6vw; } .hero__sub { max-width: 18em; }
  .hero__cta { flex-wrap: nowrap; gap: 8px; } .hero__cta .btn { min-height: 48px; padding: 0 18px; font-size: 15.5px; white-space: nowrap; }
  .scene--toro .stage { grid-template-columns: 1fr; grid-template-rows: 60svh minmax(0, 1fr); align-items: stretch; }
  .scene--toro .view { height: auto; aspect-ratio: auto; justify-self: stretch; border-radius: 0; rotate: none; box-shadow: none; }
  .scene--toro .story { padding-left: 18px; } .scene--toro .story h2 { font-size: clamp(38px, 11vw, 54px); } .toro__p { font-size: 17px; }
}
/* ---------- the card system on a phone ---------- */
@media (max-width:760px){
  body{font-size:16px}
  .dc{font-size:15px}
  .sec-head{grid-template-columns:1fr;align-items:start}
  .sec-head .lead{justify-self:start}
  .panel{border-radius:28px}
  .panel-in{grid-template-columns:1fr;padding:26px 22px 22px}
  .panel-time{font-size:29vw}
  .sheet .rows,.plain,.faq-grid{grid-template-columns:1fr}
  .appdemo-grid{grid-template-columns:1fr}
  .appdemo .h2{font-size:15vw}
  .phone{width:min(100%,320px);border-radius:56px}
  .phone .clip{border-radius:46px}
  .beats{grid-template-columns:1fr;gap:56px}
  .beat:nth-child(even){margin-top:0}
  .beat-media{border-radius:26px}
  .beat-card{font-size:13px;width:86%;margin-left:14px}
  .beat h3,.beat>p{margin-left:14px}
  .join .h1b{font-size:11.6vw}
  .join form{flex-direction:column;border-radius:30px;padding:10px}
  .join input{text-align:center}
  .foot .wrap{flex-direction:column;align-items:flex-start;gap:6px}
  .foot .made{margin:10px 0}
}

/* ---------- calm stills: Reduce Motion, or no script ---------- */
html.still .scene { height: auto; }
html.still .stage { position: relative; }
html.still .scene:not(.scene--hero) .stage { height: auto; min-height: 0; }
html.still .scene:not(.scene--hero) .view { min-height: 62vh; }
html.still .scene--toro .view { min-height: 0; }
html.still .frame, html.still .proof__wait { display: none; }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .clip video,.clip-toggle,.clip-all{display:none}
}
html:not(.js) .scene { height: auto; } html:not(.js) .stage { position: relative; } html:not(.js) .frame, html:not(.js) .proof__wait, html:not(.js) .grip { display: none; }

/* label under the app recording (required wording) */
.film-label{margin:14px 0 0;text-align:center;font-size:14px;line-height:1.4;color:var(--ink-2,#5b5b60)}

/* What Delia does */
.does-list{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px 32px}
.does-list li{border-top:1px solid color-mix(in srgb,currentColor 16%,transparent);padding-top:16px}
.does-list h3{margin:0 0 6px;font-size:18px;line-height:1.3;font-weight:600}
.does-list p{margin:0;font-size:16px;line-height:1.5;opacity:.82}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* legal and support pages */
.legal .wrap{max-width:760px}
.legal .updated{margin:8px 0 32px;font-size:14px;opacity:.7}
.legal section{margin:0 0 28px}
.legal h2{font-size:22px;line-height:1.3;margin:0 0 10px;font-weight:600}
.legal p,.legal li{font-size:17px;line-height:1.6}
.legal ul{margin:8px 0 0;padding-left:1.2em}
.legal li{margin:0 0 6px}
.legal a{text-decoration:underline;text-underline-offset:3px}