/* Home page. Studio: on a wide screen the copy runs down the left (hero, video, one block per
   feature) and the phone stays in view on the right, so every "Show me" plays where the reader
   is already looking. Below 900px: hero, phone, features in one column, and "Show me" brings
   the phone back into view before it plays. Motion only under html.motion (set in <head>). */

/* ------------------------------------------------------------ studio --- */
.studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); grid-template-areas: "hero demo" "promo demo" "feats demo"; gap: 0 clamp(40px, 6vw, 96px); padding-top: clamp(40px, 7vw, 88px); }
.hero { grid-area: hero; padding-bottom: 48px; }
.hero h1 .hl { color: var(--coral); }
.hero .lede { margin-top: 24px; }
.cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.cta-note { color: var(--muted); font-size: 14px; line-height: 1.5; }
.studio-demo { grid-area: demo; }
.studio-demo .sticky { position: sticky; top: calc(var(--nav-h) + 24px); width: min(100%, max(300px, calc((100svh - var(--nav-h) - 120px) * 380 / 800))); margin-inline: auto; padding-bottom: 32px; }
.feats { grid-area: feats; display: grid; }
.feat { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t b" "p p"; align-items: center; gap: 12px 24px; padding-block: 32px; border-top: 1px solid var(--line); }
.feat h2 { grid-area: t; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.03em; }
.feat p { grid-area: p; color: var(--muted); }
.show-me { grid-area: b; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 14px; border: 0; border-radius: 99px; background: var(--surface2); color: var(--ink); font: 700 14px/1 var(--f); white-space: nowrap; cursor: pointer; transition: background-color .15s, transform 70ms; }
.show-me svg { width: 18px; height: 18px; fill: var(--pear); }
.show-me:hover { background: var(--surface3); }
.show-me:active { transform: translateY(1px); }
.show-me[aria-pressed="true"] { background: var(--pear); color: var(--pear-ink); }
.show-me[aria-pressed="true"] svg { fill: var(--pear-ink); }
.try { margin-top: 14px; min-height: 3em; font-size: 14px; line-height: 1.5; color: var(--faint); text-align: center; }

@media (max-width: 1023px) { .studio { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); } }
@media (max-width: 899px) {
  .studio { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "promo" "demo" "feats"; }
  .studio-demo .sticky { position: static; width: min(100%, 360px); }
}
@media (max-width: 479px) {
  .feat { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "p" "b"; }
  .show-me { justify-self: start; }
}

/* ------------------------------------------------------------- video --- */
/* Hidden until an id is set, decided by CSS at parse time so the page never shifts. */
.promo { grid-area: promo; margin-bottom: 48px; }
.promo[data-youtube-id=""], .promo:not([data-youtube-id]), html:not(.js) .promo { display: none; }
.promo-play, .promo iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 18px; overflow: hidden; background: var(--n-paper); box-shadow: var(--shadow); }
.promo-play { position: relative; padding: 0; cursor: pointer; color: #fff; }
.promo-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s; }
.promo-play:hover img { opacity: 1; }
.promo-btn { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 99px; background: var(--pear); color: var(--pear-ink); box-shadow: 0 4px 0 0 var(--pear-deep); font: 700 15px/1 var(--f); transition: transform 70ms, box-shadow 70ms; }
.promo-btn svg { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--pear-ink); fill: var(--pear); }
.promo-play:hover .promo-btn { transform: translateY(-1px); box-shadow: 0 5px 0 0 var(--pear-deep); }
.promo-play:active .promo-btn { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--pear-deep); }
@media (min-width: 600px) { .promo-btn { left: 24px; bottom: 24px; } }

/* ------------------------------------------------------------- phone --- */
.phone { aspect-ratio: 380 / 800; width: 100%; border-radius: 46px; padding: 10px; background: #05080D; box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgba(241,239,230,.12); }
.ph-screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: var(--paper); display: flex; flex-direction: column; font-size: 13px; line-height: 1.4; isolation: isolate; }
.ph-bar { flex: none; height: 30px; display: flex; justify-content: space-between; align-items: center; padding: 6px 22px 0; font: 500 11px/1 var(--mono); color: var(--muted); }
.ph-sys { display: flex; gap: 4px; }
.ph-sys i { width: 6px; height: 6px; border-radius: 2px; background: var(--muted); opacity: .7; }
.ph-sys i:last-child { width: 14px; }
.ph-views { position: relative; flex: 1; min-height: 0; }
.v { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 4px 12px 16px; visibility: hidden; opacity: 0; }
.v::-webkit-scrollbar { display: none; }
.v.on { visibility: visible; opacity: 1; }
.motion .v { transform: translateX(14px); transition: opacity .22s, transform .3s var(--ease), visibility 0s .3s; }
.motion .v.on { transform: none; transition-delay: 0s; }
.ph-head { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 4px; }
.ph-head .meta { margin-left: auto; font-size: 11px; }
.ph-lock { display: inline-flex; align-items: center; gap: 6px; font: 800 19px/1 var(--f); letter-spacing: -.04em; }
.ph-lock svg { width: 24px; height: 24px; }
.ph-title { font: 800 21px/1 var(--f); letter-spacing: -.03em; }
.ph-title.sm { font-size: 18px; }
.back { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface2); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.back svg, .lr svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ph-hint { color: var(--faint); font-size: 11.5px; margin: 10px 4px 0; }

.pc { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); padding: 12px; margin-top: 10px; }
.pc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.pc-head strong { font-size: 14px; font-weight: 700; }
.pc-head .meta { font-size: 11px; }
.pc-p { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.ph-stat { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.ph-stat b { font: 800 52px/1 var(--f); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.ph-stat strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; }
.ph-stat span { color: var(--muted); font-size: 12px; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ph-screen .chip { font-size: 11px; padding: 5px 8px; gap: 5px; }
.ph-screen .chip i { width: 6px; height: 6px; }

/* Bead strip: 24 columns, one bead per notification. */
.strip .cols { position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); align-items: end; height: 66px; }
.strip .q { position: absolute; top: -4px; bottom: -4px; border-radius: 8px; background: var(--quiet); }
.strip .now { position: absolute; top: -6px; bottom: -4px; width: 1.5px; background: var(--ink); opacity: .55; }
.strip .col { position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; }
.strip .col b { width: 6px; height: 6px; border-radius: 50%; background: var(--bead); }
.strip .col b.h { background: var(--sky); }
.strip .col b.p { background: var(--coral); width: 8px; height: 8px; }
.strip .col b.x { background: transparent; box-shadow: inset 0 0 0 1.25px var(--faint); }
.strip .axis { position: relative; height: 12px; margin-top: 8px; font: 500 10px/1 var(--mono); color: var(--faint); }
.strip .axis span { position: absolute; transform: translateX(-50%); }
.motion .strip .col b { transition: opacity .3s, transform .4s var(--ease); transition-delay: calc(var(--d) * 28ms + 150ms); }
.motion .phone:not(.lit) .strip .col b { opacity: 0; transform: translateY(-8px); }

.digest { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.digest li { position: relative; padding-left: 14px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.digest li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--bead); }
.digest li.p { color: var(--ink); } .digest li.p::before { background: var(--coral); }
.digest li.h::before { background: var(--sky); }

/* Notification rows: icon, title and app, time and chip. */
.nr, .ar { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); text-align: left; }
.list .pc-head + .nr, .list > .nr:first-child, .list > .ar:first-child, .list > .nr[hidden] + .nr { border-top: 0; }
.ic { width: 30px; height: 30px; border-radius: 9px; background: var(--c); color: #fff; display: grid; place-items: center; font: 800 13px/1 var(--f); }
.ic.big { width: 44px; height: 44px; border-radius: 12px; font-size: 19px; }
.ic svg { width: 20px; height: 20px; }
.tx { min-width: 0; display: grid; gap: 1px; }
.tx b { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx small { color: var(--faint); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm { display: grid; justify-items: end; gap: 4px; font: 500 10.5px/1 var(--mono); color: var(--faint); }
.inbox .nr { cursor: pointer; border-radius: 10px; }
.inbox .nr.open { background: var(--surface2); margin-inline: -6px; padding-inline: 6px; border-top-color: transparent; }
.why { grid-column: 1 / -1; display: grid; gap: 8px; padding: 2px 0 4px; }
.why p { color: var(--muted); font-size: 12px; }
.why div { display: flex; gap: 6px; flex-wrap: wrap; }
.why button, .ph-push { border: 0; border-radius: 99px; font: 700 12px/1 var(--f); padding: 9px 12px; cursor: pointer; background: var(--surface3); color: var(--ink); }
.why button:first-child, .ph-push { background: var(--pear); color: var(--pear-ink); box-shadow: 0 3px 0 0 var(--pear-deep); }
.ph-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ph-filters button { flex: none; border: 0; border-radius: 99px; padding: 7px 11px; font: 700 11.5px/1 var(--f); background: var(--surface2); color: var(--muted); cursor: pointer; }
.ph-filters button.on { background: var(--ink); color: var(--paper); }

.apps .ar { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; color: inherit; font: inherit; grid-template-columns: 30px minmax(0, 1fr); }
button.ar { cursor: pointer; }
.ar .tx b { display: flex; align-items: center; gap: 6px; overflow: visible; }
.ar .chip { padding: 3px 7px; font-size: 10px; }
.bar { position: relative; height: 6px; margin-top: 5px; border-radius: 99px; background: var(--surface2); overflow: hidden; }
.bar i, .bar em { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 99px; transform-origin: left; }
.bar i { background: var(--surface3); }
.bar em { background: var(--mint); min-width: 3px; }
.motion .bar i, .motion .bar em { transition: transform .7s var(--ease); }
.motion .bar em { transition-delay: .25s; }
.motion .apps:not(.lit) .bar i, .motion .apps:not(.lit) .bar em { transform: scaleX(0); }

.app-id { display: flex; align-items: center; gap: 12px; }
.app-id strong { display: block; font: 800 20px/1.15 var(--f); letter-spacing: -.02em; }
.app-id span { color: var(--muted); font-size: 12px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.tiles div { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 12px; }
.tiles b { display: block; font: 800 24px/1.1 var(--f); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tiles span { color: var(--muted); font-size: 11.5px; }
.sr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; }
.sr-row + .sr-row { border-top: 1px solid var(--line); padding-top: 10px; }
.sr-row b { display: block; font-weight: 600; font-size: 13px; }
.sr-row small { display: block; color: var(--faint); font-size: 11px; line-height: 1.35; }

/* Show / Hide: two knobs crossfade as one sliding pill. */
.seg { position: relative; display: inline-grid; grid-template-columns: 48px 48px; padding: 3px; border-radius: 99px; background: var(--surface2); }
.seg::before, .seg::after { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: 48px; border-radius: 99px; transition: transform .35s var(--ease), opacity .25s; }
.seg::before { background: var(--mint-soft); }
.seg::after { background: var(--sky-soft); }
.seg.is-show::before { transform: none; opacity: 1; } .seg.is-show::after { transform: none; opacity: 0; }
.seg.is-hide::before { transform: translateX(48px); opacity: 0; } .seg.is-hide::after { transform: translateX(48px); opacity: 1; }
.seg button { position: relative; z-index: 1; border: 0; background: none; padding: 7px 0; font: 700 11.5px/1 var(--f); color: var(--faint); cursor: pointer; transition: color .2s; }
.seg.is-show button:first-child { color: var(--mint-ink); }
.seg.is-hide button:last-child { color: var(--sky-ink); }

.tg { position: relative; width: 40px; height: 24px; border: 0; border-radius: 99px; background: var(--surface3); cursor: pointer; padding: 0; }
.tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--faint); transition: transform .25s var(--ease); }
.tg.on { background: var(--pear); }
.tg.on::after { transform: translateX(16px); background: var(--pear-ink); }

.lr { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; }
.lr:first-child { border-top: 0; padding-top: 2px; }
button.lr { cursor: pointer; }
.lr b { display: block; font-weight: 600; font-size: 13px; }
.lr small { display: block; color: var(--faint); font-size: 11px; }
.lr svg { color: var(--faint); flex: none; }

.times { display: flex; align-items: center; gap: 8px; }
.times span { flex: 1; text-align: center; background: var(--surface2); border-radius: 12px; padding: 10px 0; font: 800 22px/1 var(--f); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.times svg { width: 18px; height: 18px; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.days { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.days span { font: 700 11px/1 var(--f); padding: 7px 9px; border-radius: 99px; background: var(--ink); color: var(--paper); }

.rules .rr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.rules .rr:first-child { border-top: 0; padding-top: 2px; }
.rules code { font: 500 12px/1 var(--mono); background: var(--surface2); padding: 6px 8px; border-radius: 8px; }
.rules small { color: var(--faint); font-size: 11px; }
.rr.add { display: flex; width: 100%; border-left: 0; border-right: 0; border-bottom: 0; background: none; color: var(--sky-ink); font: 700 12.5px/1 var(--f); cursor: pointer; gap: 8px; padding-top: 12px; }
.motion .rr.new { animation: pop .45s var(--ease); }
.sheet .field { display: grid; gap: 6px; margin-bottom: 10px; }
.sheet small { color: var(--faint); font-size: 11px; }
.input { display: flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 10px; background: var(--surface2); font: 500 14px/1 var(--mono); }
.caret { width: 1.5px; height: 16px; margin-left: 1px; background: var(--pear); }
.motion .caret { animation: blink 1s steps(1) infinite; }
.pick { display: flex; flex-wrap: wrap; gap: 5px; }
.pick button { border: 0; border-radius: 99px; padding: 7px 10px; font: 700 11.5px/1 var(--f); background: var(--surface2); color: var(--muted); cursor: pointer; }
.pick button.on { background: var(--ink); color: var(--paper); }
.ph-push { width: 100%; padding: 11px; font-size: 13px; }

.tchips { display: flex; flex-wrap: wrap; gap: 6px; }
.tchips span { font: 800 15px/1 var(--f); padding: 9px 12px; border-radius: 99px; background: var(--sky-soft); color: var(--sky-ink); font-variant-numeric: tabular-nums; }
.motion .tchips span { animation: pop .4s var(--ease); }
.tchips button { border: 0; border-radius: 99px; padding: 9px 12px; font: 700 12px/1 var(--f); background: var(--surface2); color: var(--sky-ink); cursor: pointer; }

.ph-tabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 6px 10px; background: var(--surface); box-shadow: 0 -1px 0 var(--line); }
.ph-tabs button { display: grid; justify-items: center; gap: 3px; border: 0; background: none; color: var(--faint); font: 600 10.5px/1 var(--f); padding: 4px 0; cursor: pointer; }
.ph-tabs svg { width: 40px; height: 26px; padding: 4px 11px; border-radius: 99px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: background-color .2s; }
.ph-tabs button.on { color: var(--ink); }
.ph-tabs button.on svg { background: var(--pear); stroke: var(--pear-ink); }

/* The phone's notification shade (Android's, not Sordino's): always night. */
.shade { position: absolute; inset: 0; z-index: 5; pointer-events: none; visibility: hidden; }
.shade::before { content: ""; position: absolute; inset: 0; background: rgba(5,8,13,.55); opacity: 0; transition: opacity .3s; }
.shade-panel { position: relative; background: var(--n-paper); color: var(--n-ink); padding: 34px 12px 14px; border-radius: 0 0 26px 26px; transform: translateY(-102%); transition: transform .45s var(--ease); box-shadow: 0 20px 40px -20px rgba(0,0,0,.7); }
.shade.on { visibility: visible; pointer-events: auto; }
.shade.on::before { opacity: 1; }
.shade.on .shade-panel { transform: none; }
.shade-top { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); color: var(--n-muted); padding: 0 6px 10px; }
.shade-list { list-style: none; margin: 0; padding: 0; position: relative; height: calc(4 * 62px + 3 * 6px); }
.sn { position: absolute; left: 0; right: 0; top: 0; height: 62px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 0 10px; border-radius: 14px; background: var(--n-surface2); transform: translateY(calc(var(--i) * 68px)); transition: transform .45s var(--ease), opacity .35s; }
.sn .tx b { color: var(--n-ink); }
.sn .tx small { color: var(--n-faint); }
.sn.tall { height: auto; min-height: 62px; padding-block: 10px; align-items: start; }
.sn.tall .tx b { white-space: normal; }
/* A summary in the shade: one line per row, as Android shows an expanded summary. */
.sn.tall .tx small { white-space: pre-line; }
.sn .chip { opacity: 0; transform: scale(.8); transition: opacity .2s, transform .25s var(--ease); }
.sn .chip.hold { background: #163347; color: #71C9FA; } .sn .chip.hold i { background: #38B8F6; }
.sn .chip.pass { background: #4D2527; color: #FF8C93; } .sn .chip.pass i { background: #FF6474; }
.sn .chip.block { background: #1F2734; color: #AFB4BF; } .sn .chip.block i { box-shadow: inset 0 0 0 1.5px #868C99; }
.sn.decided .chip { opacity: 1; transform: none; }
.sn.enter { opacity: 0; transform: translateY(calc(var(--i) * 68px - 18px)); }
.sn.out { opacity: 0; transform: translateY(calc(var(--i) * 68px)) translateX(40%); }
.sn.gone { opacity: 0; }

.toast { position: absolute; left: 12px; right: 12px; bottom: 74px; z-index: 6; background: var(--ink); color: var(--paper); border-radius: 14px; padding: 11px 14px; font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .3s var(--ease); pointer-events: none; }
.toast.on { opacity: 1; transform: none; }

.finger { position: absolute; left: 0; top: 0; z-index: 9; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(241,239,230,.38); box-shadow: 0 0 0 1.5px rgba(241,239,230,.7), 0 4px 14px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: transform .55s var(--ease), opacity .25s; }
.finger.on { opacity: 1; }
.finger.tap { animation: tap .3s ease-out; }
@keyframes tap { 50% { scale: .78; } }
@keyframes pop { from { opacity: 0; transform: scale(.9); } }
@keyframes blink { 50% { opacity: 0; } }

/* ------------------------------------------------------- night band --- */
.night-band { margin-top: var(--section); padding-block: var(--section); background: var(--n-paper); color: var(--n-ink); }
.night-grid { display: grid; gap: 40px; align-items: center; }
.night-copy p { color: var(--n-muted); margin-top: 18px; font-size: 18px; }
.night-copy .night-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.night-band .chip { background: var(--n-surface2); color: var(--n-muted); }
.night-band .chip.hold { background: #163347; color: #71C9FA; } .night-band .chip.hold i { background: #38B8F6; }
.night-band .chip.pass { background: #4D2527; color: #FF8C93; } .night-band .chip.pass i { background: #FF6474; }
@media (min-width: 900px) { .night-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; } }

.night-card { position: relative; margin: 0; border-radius: 26px; overflow: hidden; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -40px rgba(0,0,0,.8); }
.nc-day { padding: 24px; }
.nc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.nc-head .ic { width: 40px; height: 40px; border-radius: 12px; }
.nc-head .ic svg { width: 26px; height: 26px; }
.nc-head strong { display: block; font: 800 20px/1.2 var(--f); letter-spacing: -.02em; }
.night-card .digest { gap: 10px; }
.night-card .digest li { font-size: 16px; line-height: 1.5; padding-left: 18px; }
.night-card .digest li::before { width: 8px; height: 8px; top: .55em; }
.nc-night { position: absolute; inset: 0; z-index: 1; display: none; flex-direction: column; justify-content: space-between; gap: 16px; padding: 24px; background: radial-gradient(120% 90% at 85% 0%, #142338 0%, var(--n-surface) 60%); color: var(--n-ink); }
.nc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.nc-top .tag { color: var(--n-faint); }
.nc-clock { font: 800 clamp(44px, 6vw, 60px)/1 var(--f); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.nc-pile { display: flex; flex-wrap: wrap; gap: 10px; align-content: center; flex: 1; }
.nc-pile i { width: 14px; height: 14px; border-radius: 50%; background: #38B8F6; transition: opacity .3s, transform .45s var(--ease); }
.nc-pile i.p { width: 18px; height: 18px; margin: -2px; background: #FF6474; }
.nc-pile i.wait { opacity: 0; transform: translateY(-10px) scale(.6); }
.nc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.nc-code { transition: opacity .3s, transform .35s var(--ease); }
.nc-code.wait { opacity: 0; transform: translateY(6px); }
.nc-count { color: var(--n-muted); font-size: 14px; }
.nc-count b { color: var(--n-ink); font-variant-numeric: tabular-nums; }
/* With motion: the night shows first and gives way to the summary at 07:00. */
.motion .nc-night { display: flex; transition: opacity .7s, transform .7s var(--ease), visibility 0s .7s; }
.motion .night-card.dawn .nc-night { opacity: 0; transform: translateY(-14px); visibility: hidden; }
.motion .nc-day > * { transition: opacity .5s, transform .5s var(--ease); }
.motion .night-card:not(.dawn) .nc-day > *, .motion .night-card:not(.dawn) .digest li { opacity: 0; transform: translateY(10px); }
.motion .night-card.dawn .digest li { transition: opacity .5s, transform .5s var(--ease); transition-delay: calc(var(--k) * 160ms + 450ms); }
.motion .night-card.dawn .nc-head { transition-delay: .3s; }

/* ------------------------------------------------------- everything --- */
.more { padding-top: var(--section); }
.more-list { margin: 32px 0 0; display: grid; gap: 0 64px; }
.more-list div { padding-block: 20px; border-top: 1px solid var(--line); }
.more-list dt { font: 700 18px/1.3 var(--f); letter-spacing: -.01em; }
.more-list dd { margin: 8px 0 0; color: var(--muted); }
@media (min-width: 768px) { .more-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ------------------------------------------------- privacy / limits --- */
.pair { padding-top: var(--section); display: grid; gap: 20px; }
.pair-block { padding: clamp(24px, 3vw, 36px); }
.pair-block h2 { font-size: clamp(26px, 2.6vw, 32px); }
.lead-in { margin-top: 14px; font-weight: 700; }
.ticks { list-style: none; margin: 18px 0 20px; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 28px; color: var(--muted); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px var(--mint-soft); }
.ticks.off li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }
.ticks.off { margin-bottom: 0; }
@media (min-width: 900px) { .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------------------------------------------------------- questions --- */
.faq-band { padding-top: var(--section); display: grid; gap: 24px 64px; 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: 16px; padding: 18px 0; font: 700 17px/1.4 var(--f); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-top: 6px; background: linear-gradient(var(--pear), var(--pear)) center / 12px 2px no-repeat, linear-gradient(var(--pear), var(--pear)) center / 2px 12px no-repeat; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 20px; }
@media (min-width: 900px) { .faq-band { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* -------------------------------------------------------------- price --- */
.price { padding-top: var(--section); display: grid; gap: 28px; }
.price-copy p { margin-top: 12px; color: var(--muted); font-size: 18px; }
.price-cta:empty { display: none; }
@media (min-width: 900px) { .price { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px 64px; } }

/* ------------------------------------------------------------ reveal --- */
.motion .rv { transition: opacity .7s, transform .7s var(--ease); }
.motion .rv:not(.in) { opacity: 0; transform: translateY(18px); }
.motion .more-list .rv:nth-child(even) { transition-delay: .08s; }