/* ==========================================================================
   Tinyowl — establishing trust, and better food for all (2015)
   Loads after site.css (tokens, nav, section nav, footer, cursor) and more.css (the closing work).

   A white gallery. The product is the event: every screen is shown as large and as sharp as it can be,
   copy stays small and supportive, and liquid glass sits only where it can bend something behind it.
   The story moves by expanding and contracting: scenes open out of the one before, and the one before
   steps back. Static by default; html.m (set once GSAP is ready) pins each .pin into a sticky stage.

   Typography follows the site system:
   · serif (Light 300) for the voice — the headline (its italic in Tinyowl orange), chapter titles,
     "Paucity of time.", ghar ka khana and bahar ka khana, the statements
   · sans 400 to read and navigate; labels in the project-label pattern (an orange dot)
   · sans 500 to press — the glass steps, the pills; sans 600 tracked tight for what you scan: captions
     on the glass, the beats, the figures (12%, +22%, +29%, +70, 4 → 40)
   Contrast holds while things light up: nothing small waits below 4.5:1, nothing large below 3:1.
   The site nav and the section nav stack above every stage (--clear); on phones the section nav sits on
   the bottom edge, so stages keep --dock free beneath them.
   ========================================================================== */
@property --tk-y { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --tk-x { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --tk-r { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --tk-o { syntax: "<number>"; inherits: false; initial-value: 0; }

:root {
  --accent: #E8641C;           /* Tinyowl orange */
  --tint: #FFE5D3;
  --accent-text: #B4480D;      /* the same orange, deepened for small text on white (5:1) */
  --mist: #f5f5f7;
  --stage: #e4e4e9;
  --ink-hi: #2b2a27;
  --ink-dim: #6E6C65;          /* waiting, but still readable (5.3:1) */
  --ink-faint: #96938A;        /* large type only, before it lights up (3:1) */
  --line-strong: rgba(15, 15, 13, 0.14);
  --hairline: #e6e6e8;
  --sans: var(--font-sans);
  --serif: var(--font-serif);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --pad-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --pad-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  --clear-top: calc(var(--nav-top) + var(--nav-h) + env(safe-area-inset-top, 0px));   /* the site nav alone (the hero) */
  --clear: calc(var(--chrome) + env(safe-area-inset-top, 0px));                        /* site nav + section nav */
  --dock: calc(28px + env(safe-area-inset-bottom, 0px));                               /* phones: room for the section nav */
  --halo: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.8);
  --shadow-glass: 0 0 0 0.5px rgba(15, 15, 13, 0.1), 0 18px 40px -18px rgba(20, 20, 24, 0.34), 0 4px 12px -6px rgba(20, 20, 24, 0.14);
  --shadow-glass-rim: inset 0 1.5px 0.5px rgba(255, 255, 255, 1), inset 0 -1.5px 1px rgba(255, 255, 255, 0.75), inset 1.5px 0 1px rgba(255, 255, 255, 0.5), inset -1.5px 0 1px rgba(255, 255, 255, 0.5), inset 0 0 0 0.5px rgba(15, 15, 13, 0.08);
  --shadow-lens: 0 1px 2px rgba(15, 15, 13, 0.08), 0 8px 18px -8px rgba(15, 15, 13, 0.26), inset 0 1px 0.5px rgba(255, 255, 255, 1), inset 0 -1px 1px rgba(255, 255, 255, 0.6), inset 0 0 0 0.5px rgba(15, 15, 13, 0.06);
  --shadow-device: 0 60px 90px -50px rgba(20, 20, 24, 0.42), 0 26px 40px -26px rgba(20, 20, 24, 0.24);
}
@media (max-width: 819px) { :root { --dock: calc(76px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Base (site.css carries the reset) ---------- */
.top { font: 400 17px/1.5 var(--sans); letter-spacing: -0.006em; }
:where(.top) :where(h3) { margin: 0; }
.top img { height: auto; }
.top svg { display: block; }
.wrap { padding-left: var(--pad-l); padding-right: var(--pad-r); }
.inner { max-width: 1180px; margin-inline: auto; }
.dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* ---------- Type ---------- */
.label { display: inline-flex; align-items: center; gap: 10px; font: 400 15px/1.3 var(--sans); color: var(--ink-2); letter-spacing: -0.005em; }
.label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.display, .h2, .statement, .hero__title, .gb__word {
  font-family: var(--serif); font-weight: 300;
  font-optical-sizing: auto; font-variation-settings: "SOFT" 0, "WONK" 0;
  text-wrap: balance;
}
:is(.display, .h2, .statement, .hero__title) em { font-style: italic; color: var(--accent); }
/* chapter titles: the voice */
.display { font-size: clamp(40px, min(5.8vw, 10.4vh), 88px); line-height: 1.04; letter-spacing: -0.03em; }
/* section titles inside a chapter: the voice, a step down */
.h2 { font-size: clamp(32px, min(3.7vw, 6.6vh), 56px); line-height: 1.08; letter-spacing: -0.028em; }
.lede { font: 400 clamp(17px, 1.35vw, 21px)/1.5 var(--sans); color: var(--ink-2); letter-spacing: -0.012em; max-width: 34em; text-wrap: pretty; }
.lede b { font-weight: 600; color: var(--ink); }
.body { font: 400 17px/1.62 var(--sans); color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.statement { font-size: clamp(34px, min(4.4vw, 8vh), 70px); line-height: 1.12; letter-spacing: -0.026em; }
.line { padding-bottom: 0.06em; margin-bottom: -0.06em; }
@media (max-width: 819px) { .label { font-size: 14px; } }

/* ---------- Liquid glass ---------- */
.lg {
  --frost: 12px;
  position: relative; isolation: isolate;
  border-radius: 999px;
  color: var(--ink); text-shadow: var(--halo);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.2) 55%, rgba(255, 255, 255, 0.32) 100%);
  -webkit-backdrop-filter: blur(var(--frost)) saturate(190%) brightness(1.05);
  backdrop-filter: var(--lg-bf, blur(var(--frost)) saturate(190%) brightness(1.05));
  box-shadow: var(--shadow-glass), var(--shadow-glass-rim), inset 0 -8px 16px -10px rgba(15, 15, 13, 0.14), inset 0 10px 18px -12px rgba(255, 255, 255, 0.9);
}
.lg::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 216, 190, 0.94), rgba(255, 186, 142, 0.72)); opacity: var(--pick, 0); }
.lg__shine { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px 70px at var(--mx, 22%) var(--my, -10%), rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 42%); }
.lg__shine::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(125deg, #fff 0%, rgba(255, 255, 255, 0.15) 32%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0.85) 100%);
  -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); }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; font: 500 15px/1 var(--sans); letter-spacing: -0.01em; white-space: nowrap; }
.pill .ico { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico--heart { color: var(--accent); }
@media (max-width: 819px) { .pill { height: 36px; padding: 0 13px; gap: 6px; font-size: 13px; } .pill .ico { width: 13px; height: 13px; } }

/* Segmented glass control (shared) */
.seg { display: inline-flex; align-items: center; height: 48px; padding: 0 4px; gap: 2px; }
.seg__b { position: relative; z-index: 1; height: 40px; padding: 0 18px; border-radius: 999px; font: 500 15px/1 var(--sans); letter-spacing: -0.01em; color: var(--ink-2); white-space: nowrap; transition: color 0.4s var(--ease); }
.seg__b.is-on { color: var(--ink); }
.seg__lens { position: absolute; z-index: 0; left: 0; top: 4px; height: 40px; width: 120px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.5)); box-shadow: var(--shadow-lens); transition: transform 0.6s var(--spring), width 0.6s var(--spring); }
@media (max-width: 819px) { .seg { height: 42px; } .seg__b { height: 34px; padding: 0 13px; font-size: 13px; } .seg__lens { height: 34px; } }

/* Index: from low to high affordance — the active row is ink and weighted, the rest wait in grey */
.idx { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; height: clamp(38px, 5vh, 48px); border-bottom: 1px solid var(--line); font: 400 15px/1 var(--sans); color: var(--ink-dim); transition: color 0.45s var(--ease); }
.idx:hover, .idx.is-active { color: var(--ink); }
.idx.is-active .idx__name { font-weight: 600; letter-spacing: -0.01em; }
.idx__num { font-size: 13px; font-variant-numeric: tabular-nums; }
.idx__name { display: flex; align-items: center; gap: 10px; }
.idx__name::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform 0.5s var(--ease); }
.idx.is-active .idx__name::after { transform: scale(1); }
.idx__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- Phone ---------- */
.phone { --pw: 300px; --ar: 390 / 844; position: relative; width: var(--pw); padding: calc(var(--pw) * 0.034); border-radius: calc(var(--pw) * 0.17); background: #0b0b0c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 0 calc(var(--pw) * 0.006) #a39f96, 0 0 0 calc(var(--pw) * 0.012) #e7e4dd, 0 0 0 calc(var(--pw) * 0.0135) rgba(15, 15, 13, 0.16), var(--shadow-device); }
.phone::after { content: ""; position: absolute; z-index: 6; inset: calc(var(--pw) * 0.034); border-radius: calc(var(--pw) * 0.136); background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 30%); pointer-events: none; }
.phone__screen { position: relative; overflow: hidden; aspect-ratio: var(--ar); border-radius: calc(var(--pw) * 0.136); background: var(--scr, #f9f9f7); isolation: isolate; }
.phone__screen > img, .phone__layer { position: absolute; left: 0; top: 0; width: 100%; }
.phone__island { position: absolute; z-index: 7; left: 50%; top: calc(var(--pw) * 0.058); width: 28%; height: calc(var(--pw) * 0.08); translate: -50% 0; border-radius: 999px; background: #050505; }
.phone--android { --ar: 9 / 16; border-radius: calc(var(--pw) * 0.12); }
.phone--android::after, .phone--android .phone__screen { border-radius: calc(var(--pw) * 0.085); }
.bar-bottom, .phone__screen > .bar-bottom { position: absolute; z-index: 3; left: 0; right: 0; top: auto; bottom: 0; width: 100%; }

/* ---------- Hero: five screens, dealt out of one ---------- */
.top { position: relative; }
.hero { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); }
.hero__in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 40%; }
.hero__copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(12px, 1.9vh, 20px); width: 100%; padding-top: calc(var(--clear-top) + clamp(22px, 5.4vh, 64px)); text-align: center; }
.hero__label { color: var(--ink-hi); }
.hero__title { max-width: 15em; font-size: clamp(34px, min(4.4vw, 7.6vh), 68px); line-height: 1.04; letter-spacing: -0.032em; color: var(--ink); }
.hero__phones { position: relative; z-index: 1; flex: 1; width: 100%; --pc: clamp(200px, min(25vw, 41svh), 372px); }
.hero__slot { position: absolute; left: 50%; top: clamp(22px, 4.4vh, 52px); width: var(--pc); margin-left: calc(var(--pc) / -2); transform-origin: 50% 0; transform: translate(calc(var(--pc) * var(--sx, 0)), calc(var(--pc) * var(--sy, 0))) scale(var(--ss, 1)); }
.hero__slot .phone { --pw: var(--pc); }
.hero__slot[data-s="-2"] { --sx: -1.46; --sy: 0.15; --ss: 0.74; }
.hero__slot[data-s="2"] { --sx: 1.46; --sy: 0.15; --ss: 0.74; }
.hero__slot[data-s="-1"] { --sx: -0.8; --sy: 0.06; --ss: 0.87; }
.hero__slot[data-s="1"] { --sx: 0.8; --sy: 0.06; --ss: 0.87; }
.hero__cue { position: absolute; z-index: 4; left: 0; right: 0; bottom: calc(clamp(18px, 3.6vh, 34px) + env(safe-area-inset-bottom, 0px)); width: max-content; margin-inline: auto; height: 46px; padding: 0 20px 0 22px; }
.hero__cue .ico { transition: transform 0.5s var(--ease); }
.hero__cue:hover .ico { transform: translateY(2px); }
.hero__dim { position: absolute; inset: 0; z-index: 5; background: var(--ink); opacity: 0; pointer-events: none; }
html.m .hero__slot { transform: none; }
html.intro .hero__copy, html.intro .hero__slot, html.intro .hero__cue { opacity: 0; }
@media (max-width: 819px) {
  .hero__phones { --pc: min(56vw, 34svh); }
  .hero__slot[data-s="-2"], .hero__slot[data-s="2"] { display: none; }
  .hero__slot[data-s="-1"] { --sx: -0.72; --sy: 0.08; --ss: 0.84; }
  .hero__slot[data-s="1"] { --sx: 0.72; --sy: 0.08; --ss: 0.84; }
  .hero__cue { height: 42px; padding: 0 16px 0 18px; font-size: 14px; }
}

/* ---------- Sheet ---------- */
.sheet { position: relative; z-index: 1; background: var(--sheet); border-radius: 36px 36px 0 0; box-shadow: 0 -1px 0 rgba(15, 15, 13, 0.06); overflow: clip; }
@media (max-width: 819px) { .sheet { border-radius: 26px 26px 0 0; } }

/* ---------- Pinned stages (shared) ---------- */
.pin { position: relative; }
.stage { position: relative; }
html.m .static-only { display: none !important; }
html.m .pin { height: var(--len, 400vh); }
html.m .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* ---------- Takeovers: each scene opens out of the last, and the last steps back ---------- */
.tk__stage { background: var(--stage); }
.tk__panel { --k: 2.085; --tw: min(calc(84svh / var(--k)), 34vw, 440px); --cx: 59%; --cy: 51%; --ov: min(96px, calc(var(--tw) * 0.26)); position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--mist); }
.tk__panel[data-tone="white"] { background: #fff; }
.tk__panel[data-side="r"] { --cx: 41%; }
.tk__panel--android { --k: 1.725; --tw: min(calc(78svh / var(--k)), 30vw, 420px); }
.tk__scene { position: absolute; inset: 0; }
.tk__cam { position: absolute; left: var(--cx); top: var(--cy); width: var(--tw); margin: calc(var(--tw) * var(--k) / -2) 0 0 calc(var(--tw) / -2); }
.tk__cam .phone { --pw: var(--tw); }
.tk__cap { position: absolute; z-index: 3; width: min(400px, 30vw); right: calc(100% - var(--cx) + var(--tw) / 2 - var(--ov)); top: calc(var(--cy) + var(--tw) * var(--k) * 0.1); display: grid; gap: 10px; padding: 22px 26px 24px; border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.5)); }
.tk__panel[data-side="r"] .tk__cap { right: auto; left: calc(var(--cx) + var(--tw) / 2 - var(--ov)); }
.tk__k { display: flex; align-items: center; gap: 9px; font: 500 14px/1.2 var(--sans); color: var(--ink-2); letter-spacing: -0.005em; }
.tk__k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tk__t { font: 600 clamp(22px, 2vw, 30px)/1.14 var(--sans); letter-spacing: -0.032em; text-wrap: balance; }
.tk__shade { position: absolute; inset: 0; z-index: 5; background: var(--ink); opacity: 0; pointer-events: none; }
.tk__steps { display: none; }
html.m .tk__panel { position: absolute; inset: 0; min-height: 0; transform-origin: 50% 50%; clip-path: inset(calc(var(--tk-y, 0) * 1%) calc(var(--tk-x, 0) * 1%) round calc((var(--tk-r, 0) + var(--tk-o, 0)) * 1px)); }
/* On wide screens the steps stand in a glass column at the left edge, clear of the phone and the chapter bar */
html.m .tk__steps { display: flex; flex-direction: column; align-items: stretch; position: absolute; z-index: 8; left: var(--pad-l); top: 44%; transform: translateY(-50%); height: auto; padding: 4px; gap: 2px; border-radius: 26px; }
html.m .tk__steps .seg__b { padding: 0 20px; text-align: left; }
html.m .tk__steps .seg__lens { top: 0; left: 4px; right: 4px; width: auto; transition: transform 0.6s var(--spring), height 0.6s var(--spring); }
@media (max-width: 819px) {
  html.m .tk__steps { flex-direction: row; align-items: center; left: 0; right: 0; top: auto; bottom: var(--dock); transform: none; width: max-content; margin-inline: auto; height: 42px; padding: 0 4px; border-radius: 999px; }
  html.m .tk__steps .seg__b { padding: 0 13px; }
  html.m .tk__steps .seg__lens { top: 4px; left: 0; right: auto; transition: transform 0.6s var(--spring), width 0.6s var(--spring); }
  .tk__panel, .tk__panel--android { --tw: min(calc(56svh / var(--k)), 66vw); --cx: 50%; --cy: 43%; }
  .tk__panel[data-side="r"] { --cx: 50%; }
  .tk__cap, .tk__panel[data-side="r"] .tk__cap { left: var(--pad-l); right: var(--pad-r); width: auto; max-width: 420px; margin-inline: auto; top: calc(var(--cy) + var(--tw) * var(--k) * 0.5 - 52px); justify-items: center; gap: 6px; padding: 15px 18px 17px; border-radius: 22px; text-align: center; }
  .tk__t { font-size: clamp(19px, 5.4vw, 23px); }
  .tk__k { font-size: 13px; }
}

/* ---------- Chapter heads ---------- */
.chead { padding-block: clamp(110px, 20vh, 230px) clamp(56px, 10vh, 110px); }
.chead .inner { display: grid; gap: clamp(16px, 2.6vh, 26px); justify-items: start; }
.chead .display { max-width: 13em; }

/* ---------- Chapter 1: the research wall ---------- */
.rs__stage { display: grid; justify-items: center; align-content: center; gap: 18px; padding: 0 var(--pad-r) clamp(70px, 12vh, 140px) var(--pad-l); }
.rs__frame { position: relative; width: min(1120px, 100%); }
.rs__card { position: relative; margin: 0; width: 100%; aspect-ratio: 16 / 10; border-radius: 28px; overflow: hidden; background: #ddd5c8; }
.rs__card > img { width: 100%; height: 100%; object-fit: cover; }
.rs__notes { position: absolute; z-index: 2; top: clamp(16px, 2.4vw, 28px); left: clamp(16px, 2.4vw, 28px); width: min(640px, 64%); display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; }
.rs__note { --on: 1; color: rgb(15 15 13 / calc(0.64 + 0.36 * var(--on))); }
.rs__note .dot { transform: scale(var(--on)); }
.rs__cap { max-width: 46em; font: 400 15px/1.45 var(--sans); color: var(--ink-2); text-align: center; text-wrap: balance; }
html.m .rs__stage { padding: calc(var(--clear) + 12px) var(--pad-r) 24px var(--pad-l); }
html.m .rs__frame { width: min(1120px, 100%, calc((100svh - 230px) * 1.6)); }
@media (max-width: 819px) {
  .rs__card { aspect-ratio: auto; height: min(44svh, 104vw); border-radius: 22px; }
  .rs__card > img { object-position: 24% 50%; }
  .rs__notes { position: static; width: 100%; margin-top: 14px; gap: 8px; }
  html.m .rs__frame { width: 100%; }
  html.m .rs__card { height: min(36svh, 96vw); }
  html.m .rs__cap { display: none; }
}

/* ---------- Paucity of time: the word runs out as you read ---------- */
.pd__stage { display: grid; align-content: center; padding-block: clamp(90px, 16vh, 180px); }
html.m .pd__stage { padding-block: calc(var(--clear) + 12px) 24px; }
.pd__in { display: grid; justify-items: start; gap: clamp(14px, 2.4vh, 24px); }
.pd__title { font-size: clamp(56px, min(9vw, 15vh), 150px); line-height: 1; letter-spacing: -0.035em; }
.pd__time { position: relative; display: inline-block; }
.pd__drain { --left: 1; position: absolute; left: 0.03em; right: 0.05em; bottom: 0.02em; height: max(4px, 0.055em); border-radius: 99px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--left)); }
.pd__beats { width: 100%; max-width: 900px; margin-top: clamp(10px, 3vh, 34px); border-top: 1px solid var(--line); }
.pd__beat { --on: 1; --p: 1; position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; padding: clamp(14px, 2.3vh, 24px) 0; border-bottom: 1px solid var(--line); color: rgb(15 15 13 / calc(0.62 + 0.38 * var(--on))); }
.pd__n { font: 400 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.pd__t { font: 600 clamp(22px, 2.3vw, 34px)/1.2 var(--sans); letter-spacing: -0.03em; text-wrap: balance; }
.pd__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.pd__beat + .pd__beat .pd__bar { background: var(--accent); }
.pd__foot { max-width: 34em; margin-top: clamp(4px, 1vh, 10px); font: 400 17px/1.5 var(--sans); color: var(--ink-2); }
@media (max-width: 819px) {
  .pd__title { font-size: clamp(50px, 14vw, 64px); }
  .pd__beat { grid-template-columns: 34px minmax(0, 1fr); }
  .pd__foot { font-size: 15px; }
}

/* ---------- Chapter 2: the funnel, a halo of choice drawn into one screen ---------- */
.fn__stage { display: grid; gap: 32px; justify-items: center; padding: 0 var(--pad-r) 40px var(--pad-l); }
.fn__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; }
.fn__pill { background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.22) 55%, rgba(255, 255, 255, 0.34) 100%); }
.fn__slot.is-pick .fn__pill { --pick: 1; }
/* Pills that move never sample what is behind them: same glass sheen, rim and shadow, no backdrop blur to drop mid-scroll */
.lg[data-lg="flat"] { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.8) 55%, rgba(255, 255, 255, 0.88) 100%); }
html.m .fn__pill, html.m .rs__note { will-change: transform, opacity; backface-visibility: hidden; }
/* Keep the research photo on one fixed layer so Chrome never drops it while it zooms */
html.m .rs__frame, html.m .rs__card > img { will-change: transform; }
.fn__device, .fn__seg { display: none; }
.fn__line--seg { align-items: center; }
.fn__cap { display: grid; gap: 6px; justify-items: center; text-align: center; }
.fn__line { display: flex; align-items: baseline; justify-content: center; gap: 12px; font: 600 clamp(18px, 1.5vw, 21px)/1.3 var(--sans); letter-spacing: -0.02em; }
.fn__n { font: 500 13px/1 var(--sans); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.fn__phone { --pw: min(calc(62svh / 1.725), 30vw, 380px); }
.fn__scr { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
img.fn__scr { height: auto; }
.fn__long { position: absolute; left: 0; top: 0; width: 100%; }
.fn__more { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.fn__more .phone { --pw: clamp(160px, 20vw, 230px); }
html.m .fn__stage { display: block; padding: 0; background: #fff; }
html.m .fn__pills { position: absolute; inset: 0; z-index: 6; display: block; max-width: none; transform-origin: 50% 45%; pointer-events: none; }
html.m .fn__slot { position: absolute; z-index: 3; left: 50%; top: 45%; }
html.m .fn__slot.is-pick { z-index: 7; }
html.m .fn__slot.is-pick .fn__pill { --pick: 0; }
html.m .fn__pill { height: 46px; padding: 0 20px; font-size: 16px; }
html.m .fn__device { position: absolute; inset: 0; z-index: 5; display: block; pointer-events: none; }
html.m .fn__phone { position: absolute; left: 50%; top: 45%; margin: calc(var(--pw) * -0.8625) 0 0 calc(var(--pw) / -2); transform-origin: 50% 30%; }
html.m .fn__cap { position: absolute; z-index: 8; left: 0; right: 0; bottom: var(--dock); width: max-content; max-width: calc(100% - 2 * var(--gutter)); margin-inline: auto; display: grid; gap: 0; padding: 14px 24px; border-radius: 999px; }
html.m .fn__line { grid-area: 1 / 1; align-self: center; }
html.m .fn__seg { position: relative; display: inline-flex; align-items: center; height: 36px; margin-left: 4px; padding: 0 3px; border-radius: 999px; background: rgba(15, 15, 13, 0.06); letter-spacing: -0.01em; }
html.m .fn__seg .seg__b { height: 30px; padding: 0 14px; font-size: 14px; }
html.m .fn__seg .seg__lens { top: 3px; height: 30px; }
@media (max-width: 819px) {
  .fn__phone { --pw: min(calc(42svh / 1.725), 54vw); }
  .fn__slot--wide { display: none; }
  html.m .fn__line--seg .fn__lt { display: none; }
  html.m .fn__pill { height: 36px; padding: 0 13px; font-size: 13px; }
  html.m .fn__cap { padding: 12px 18px; border-radius: 22px; }
  .fn__line { font-size: 15px; gap: 9px; }
  .fn__n { font-size: 12px; }
}

/* ---------- Hero metrics (studio-mist bands) ---------- */
.metric { background: var(--mist); }
.metric__stage { display: grid; justify-items: center; align-content: center; gap: clamp(12px, 2vh, 20px); text-align: center; padding: clamp(90px, 14vh, 160px) var(--pad-r) clamp(90px, 14vh, 160px) var(--pad-l); }
html.m .metric__stage { padding-top: calc(var(--clear) + 8px); padding-bottom: 72px; }
.metric__label { font-weight: 500; font-size: clamp(17px, 1.5vw, 21px); color: var(--ink); }
.metric__num { display: flex; align-items: baseline; justify-content: center; font: 600 clamp(140px, min(24vw, 42vh), 400px)/0.84 var(--sans); letter-spacing: -0.065em; font-variant-numeric: tabular-nums; color: var(--ink); transform-origin: 50% 62%; }
.metric__plus { font-size: 0.56em; font-weight: 500; letter-spacing: 0; margin-right: 0.04em; }
.metric__unit { font-size: 0.42em; letter-spacing: -0.03em; margin-left: 0.04em; color: var(--accent); }
.metric__line { max-width: 34em; font: 400 clamp(17px, 1.4vw, 21px)/1.5 var(--sans); color: var(--ink-2); text-wrap: balance; }
.metric__line b { font-weight: 600; color: var(--ink); }
.metric__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: min(1100px, 100%); margin-top: 8px; }
.metric__card { display: grid; justify-items: center; gap: 14px; padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px); background: #fff; border-radius: 28px; }
.metric__k { font: 500 17px/1.3 var(--sans); color: var(--ink); }
.metric__num--md { font-size: clamp(96px, min(11vw, 22vh), 190px); }
@media (max-width: 819px) {
  .metric__num { font-size: clamp(120px, 40vw, 190px); }
  .metric__cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .metric__num--md { font-size: clamp(76px, 24vw, 110px); }
  .metric__card { gap: 8px; padding: 22px 18px; border-radius: 22px; }
}

/* ---------- Ghar ka khana, bahar ka khana ---------- */
.gb__stage { display: grid; justify-items: center; align-content: center; gap: clamp(28px, 5vh, 52px); text-align: center; padding: clamp(80px, 13vh, 150px) var(--pad-r) clamp(80px, 13vh, 150px) var(--pad-l); }
.gb__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 64px); width: min(1180px, 100%); }
.gb__side { --on: 1; display: grid; justify-items: center; gap: 12px; }
.gb__mask { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.gb__word { display: block; font-size: clamp(40px, 5.4vw, 84px); line-height: 1.06; letter-spacing: -0.03em; white-space: nowrap; color: rgb(15 15 13 / calc(0.5 + 0.5 * var(--on))); }
.gb__gloss { display: inline-flex; align-items: center; gap: 8px; font: 400 17px/1.3 var(--sans); color: var(--ink-2); }
.gb__rule { width: 1px; height: clamp(80px, 9vw, 130px); background: var(--hairline); }
.gb__copy { max-width: 36em; font: 400 clamp(17px, 1.4vw, 21px)/1.5 var(--sans); color: var(--ink-2); text-wrap: balance; }
html.m .gb__stage { padding-top: calc(var(--clear) + 12px); padding-bottom: 24px; }
@media (max-width: 819px) {
  .gb__pair { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .gb__rule { width: 48px; height: 1px; justify-self: center; }
  .gb__word { font-size: clamp(38px, 11.4vw, 52px); }
}

/* ---------- Chapter 5: focus and care ---------- */
.tm { padding-block: clamp(20px, 4vh, 48px) clamp(80px, 14vh, 150px); }
.tm__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 40px clamp(32px, 6vw, 96px); }
.tm__num { display: flex; align-items: baseline; gap: 0.1em; font: 600 clamp(96px, 13vw, 200px)/0.86 var(--sans); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.tm__from, .tm__arrow { color: var(--ink-faint); }
.tm__arrow { font-size: 0.46em; font-weight: 400; letter-spacing: 0; }
.tm__text { display: grid; gap: 18px; }
.say__stage { display: grid; align-content: center; padding-block: clamp(100px, 18vh, 200px); }
html.m .say__stage { padding-block: 0; }
.say .statement { max-width: 19em; }
.say__w { will-change: opacity; }
.pr { padding-block: clamp(40px, 8vh, 90px) clamp(100px, 16vh, 180px); }
.pr .inner { display: grid; gap: 14px; justify-items: start; }
.pr__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); width: 100%; margin-top: 28px; }
.pr__step { --on: 1; --p: 1; position: relative; display: grid; align-content: start; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line); color: rgb(15 15 13 / calc(0.64 + 0.36 * var(--on))); }
.pr__bar { position: absolute; left: 0; right: 0; top: -1px; height: 1.5px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.pr__n { font: 400 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.pr__name { display: flex; align-items: center; gap: 10px; font: 600 clamp(24px, 2.4vw, 34px)/1.1 var(--sans); letter-spacing: -0.035em; }
.pr__name::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transform: scale(var(--on)); }
.pr__l { font: 400 17px/1.45 var(--sans); }
@media (max-width: 819px) {
  .tm__grid { grid-template-columns: minmax(0, 1fr); }
  .pr__row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ---------- The craft: one large window, unfolding downwards ---------- */
.cg { background: var(--mist); }
.cg__stage { padding: clamp(80px, 13vh, 140px) var(--pad-r) clamp(80px, 13vh, 140px) var(--pad-l); }
.cg__win { display: grid; gap: 44px; max-width: 1480px; margin-inline: auto; padding: clamp(28px, 4vw, 56px); background: #fff; border-radius: 28px; }
.cg__side { display: grid; align-content: start; justify-items: start; gap: 14px; }
.cg__h { max-width: 11em; }
.cg__index, .cg__caps { display: none; }
.cg__track { display: grid; gap: 64px; }
.cg__slide { display: grid; justify-items: center; gap: 22px; }
.cg__cap { max-width: 30em; font: 600 clamp(19px, 1.8vw, 24px)/1.25 var(--sans); letter-spacing: -0.025em; text-align: center; text-wrap: balance; }
.cg__pair { display: flex; justify-content: center; align-items: center; gap: clamp(16px, 2.8vw, 44px); }
.cg__pair .phone { --pw: min(40vw, 300px); }
.cg__doc { width: min(40vw, 360px); margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--hairline), 0 40px 70px -46px rgba(20, 20, 24, 0.34); }
.cg__doc img { width: 100%; }
html.m .cg__stage { padding: calc(var(--clear) + 10px) var(--pad-r) var(--dock) var(--pad-l); }
html.m .cg__win { height: 100%; grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr); gap: 0; padding: 0; overflow: hidden; }
html.m .cg__side { align-content: center; gap: 16px; padding: clamp(28px, 4vw, 60px); }
html.m .cg__index { display: block; width: 100%; max-width: 420px; margin-top: 14px; border-top: 1px solid var(--line); }
html.m .cg__caps { display: grid; width: 100%; max-width: 420px; margin-top: 14px; }
html.m .cg__line { grid-area: 1 / 1; font: 400 17px/1.45 var(--sans); color: var(--ink-2); text-wrap: pretty; }
html.m .cg__view { position: relative; overflow: hidden; container-type: size; }
html.m .cg__track { display: block; gap: 0; }
html.m .cg__slide { height: 100cqh; place-items: center; align-content: center; gap: 0; }
html.m .cg__pair .phone { --pw: min(calc(84cqh / 1.725), calc((100cqw - 104px) / 2)); }
html.m .cg__doc { width: min(calc(84cqh * var(--r)), calc((100cqw - 104px) / 2)); }
@media (max-width: 819px) {
  .cg__win { border-radius: 22px; }
  html.m .cg__win { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  html.m .cg__side { gap: 8px; padding: 20px 20px 6px; }
  html.m .cg__h { font-size: 24px; }
  html.m .cg__index { display: flex; gap: 6px; margin-top: 6px; border: 0; max-width: none; }
  html.m .cg__index li { flex: 1; }
  html.m .cg__index .idx { display: block; height: 22px; border: 0; }
  html.m .cg__index .idx::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 2px; background: var(--line); }
  html.m .cg__index .idx__bar { top: 10px; bottom: auto; height: 2px; border-radius: 2px; }
  html.m .cg__index .idx__num, html.m .cg__index .idx__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html.m .cg__caps { margin-top: 2px; }
  html.m .cg__line { font-size: 15px; line-height: 1.4; }
  /* On a phone the pair overlaps, staggered, so each screen can stay large */
  html.m .cg__pair { gap: 0; }
  html.m .cg__pair > :nth-child(2) { z-index: 1; margin-left: -10cqw; transform: translateY(7cqh); }
  html.m .cg__pair > :nth-child(1) { transform: translateY(-5cqh); }
  html.m .cg__pair .phone { --pw: min(calc(78cqh / 1.725), 51cqw); }
  html.m .cg__doc { width: min(calc(78cqh * var(--r)), 51cqw); }
}

/* ---------- Close, other work, footer ---------- */
.close { padding-block: clamp(120px, 22vh, 240px) clamp(90px, 16vh, 180px); }
.close .inner { display: grid; gap: 30px; }
.close .statement { max-width: 15em; }

/* =====================================================================
   Fitted around the site chrome: on wide screens both navs sit above every stage, so each phone is sized
   to the room below them and centred in it; on phones the section nav docks at the bottom (--dock)
   ===================================================================== */
@media (min-width: 820px) {
  .tk__panel { --cy: calc(50% + var(--clear) / 2 - 8px); --tw: min(calc((100svh - var(--clear) - 70px) / var(--k)), 34vw, 440px); }
  .tk__panel--android { --tw: min(calc((100svh - var(--clear) - 96px) / var(--k)), 30vw, 420px); }
  html.m .tk__steps { top: calc(50% + var(--clear) / 2); }
  /* the funnel: the script fits the phone and its halo of taste tags between the navs and the caption;
     the tags and the caption grow with the window (--u: the window against a 1440 x 900 design) */
  html.m .fn__pill { height: calc(46px * var(--u, 1)); padding: 0 calc(20px * var(--u, 1)); gap: calc(8px * var(--u, 1)); font-size: calc(16px * var(--u, 1)); }
  html.m .fn__pill .ico { width: calc(15px * var(--u, 1)); height: calc(15px * var(--u, 1)); }
  html.m .fn__cap { padding: calc(14px * var(--u, 1)) calc(24px * var(--u, 1)); }
  html.m .fn__line { font-size: max(17px, calc(19px * var(--u, 1))); }
  html.m .rs__frame { width: min(1120px, 100%, calc((100svh - var(--clear) - 150px) * 1.6)); }
}

/* =====================================================================
   Big screens, in proportion: the story's largest sizes grow with the window (--u, set by the script: the
   window against a 1440 x 900 design), so on a large monitor the type, screens and glass grow together
   instead of stopping short and leaving the room empty. At 1440 x 900 and below nothing changes.
   ===================================================================== */
@media (min-width: 820px) {
  .inner { max-width: calc(1180px * var(--u, 1)); }
  .hero__title { font-size: clamp(34px, min(4.4vw, 7.6vh), calc(68px * var(--u, 1))); }
  .hero__phones { --pc: clamp(200px, min(25vw, 41svh), calc(372px * var(--u, 1))); }
  .display { font-size: clamp(40px, min(5.8vw, 10.4vh), calc(88px * var(--u, 1))); }
  .h2 { font-size: clamp(32px, min(3.7vw, 6.6vh), calc(56px * var(--u, 1))); }
  .statement { font-size: clamp(34px, min(4.4vw, 8vh), calc(70px * var(--u, 1))); }
  .lede { font-size: clamp(17px, 1.35vw, calc(21px * var(--u, 1))); }
  .label { font-size: max(15px, calc(15px * var(--u, 1))); }
  .tk__panel { --tw: min(calc((100svh - var(--clear) - 70px) / var(--k)), 34vw, calc(440px * var(--u, 1))); }
  .tk__panel--android { --tw: min(calc((100svh - var(--clear) - 96px) / var(--k)), 30vw, calc(420px * var(--u, 1))); }
  .tk__cap { width: min(calc(400px * var(--u, 1)), 30vw); padding: calc(22px * var(--u, 1)) calc(26px * var(--u, 1)) calc(24px * var(--u, 1)); border-radius: calc(28px * var(--u, 1)); }
  .tk__t { font-size: clamp(22px, 2vw, calc(30px * var(--u, 1))); }
  .tk__k { font-size: max(14px, calc(14px * var(--u, 1))); }
  html.m .tk__steps .seg__b { height: calc(40px * var(--u, 1)); padding: 0 calc(20px * var(--u, 1)); font-size: calc(15px * var(--u, 1)); }
  html.m .rs__frame { width: min(calc(1120px * var(--u, 1)), 100%, calc((100svh - var(--clear) - 150px) * 1.6)); }
  html.m .rs__note { height: calc(44px * var(--u, 1)); padding: 0 calc(18px * var(--u, 1)); font-size: calc(15px * var(--u, 1)); }
  .rs__cap { font-size: max(15px, calc(15px * var(--u, 1))); }
  .pd__beats { max-width: calc(900px * var(--u, 1)); }
  .pd__t { font-size: clamp(22px, 2.3vw, calc(34px * var(--u, 1))); }
  .pd__foot { font-size: max(17px, calc(17px * var(--u, 1))); }
  .metric__label { font-size: clamp(17px, 1.5vw, calc(21px * var(--u, 1))); }
  .metric__line, .gb__copy { font-size: clamp(17px, 1.4vw, calc(21px * var(--u, 1))); }
  .metric__cards { width: min(calc(1100px * var(--u, 1)), 100%); }
  .metric__k { font-size: max(17px, calc(17px * var(--u, 1))); }
  .gb__pair { width: min(calc(1180px * var(--u, 1)), 100%); }
  .gb__word { font-size: clamp(40px, 5.4vw, calc(84px * var(--u, 1))); }
  .gb__gloss { font-size: max(17px, calc(17px * var(--u, 1))); }
  .pr__name { font-size: clamp(24px, 2.4vw, calc(34px * var(--u, 1))); }
  .pr__l, html.m .cg__line, .body { font-size: max(17px, calc(17px * var(--u, 1))); }
  .cg__win { max-width: calc(1480px * var(--u, 1)); }
  .idx { font-size: max(15px, calc(15px * var(--u, 1))); }
}