/* ABC Widgets site styles. One file for every page except the share page (/s/), which carries its own. */

@font-face {
  font-family: "Archivo Display";
  src: url("/fonts/archivo-display.woff2") format("woff2");
  font-weight: 600 900;
  font-stretch: 100% 125%;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --black: #000;
  --raised: #14161b;
  --raised-2: #1c1f26;
  --rule: rgba(255, 255, 255, .11);
  --text: #f5f5f7;
  --dim: #a7a7ae;
  --faint: #76767e;
  --blue: #3a64ce;
  --blue-hi: #6c9af0;
  --link: #8fb1f8;
  --gold: #f2b634;
  --gold-hi: #ffd76e;
  --red: #d23c34;
  --green: #5cc45c;
  --up: #63cf63;
  --down: #ff6b60;
  --display: "Archivo Display", "Arial Black", "Helvetica Neue", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Inter, Arial, sans-serif;
  --round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--black); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font: 17px/1.6 var(--body);
  overflow-x: clip;
}
img, svg { display: block; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:hover { color: #b7cdfb; }
:focus-visible { outline: 2.5px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
li { margin: .35em 0; }
b, strong { font-weight: 650; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 10; background: var(--text); color: #000; padding: 8px 14px; border-radius: 10px; }
.skip:focus { left: 16px; }

.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }

/* ---------- Header ---------- */
.masthead {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 24px; padding: 20px 0;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.blocks { display: grid; grid-template-columns: 13px 13px; gap: 3px; }
.blocks i { width: 13px; height: 13px; border-radius: 4px; display: block; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.35); }
.blocks i:nth-child(1) { background: var(--blue); }
.blocks i:nth-child(2) { background: var(--gold); }
.blocks i:nth-child(3) { background: var(--red); }
.blocks i:nth-child(4) { background: var(--green); }
.wordmark { font: 800 20px/1 var(--round); letter-spacing: -.01em; }
.wordmark .a { color: #4c76db; } .wordmark .b { color: #e0473f; } .wordmark .c { color: var(--green); }
.wordmark b { font-weight: 800; }
.nav { display: flex; gap: 22px; font-size: 15px; }
.nav a { color: var(--dim); text-decoration: none; padding: 6px 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); }

/* ---------- Type ---------- */
h1, h2, .display {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -.02em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 1.3rem + 3.9vw, 4.15rem); }
h2 { font-size: clamp(1.85rem, 1.15rem + 2.5vw, 3rem); font-stretch: 115%; line-height: 1.05; }
h3 { font-size: 21px; line-height: 1.25; margin: 0 0 .35em; font-weight: 700; letter-spacing: -.01em; }
.lede { font-size: clamp(18px, 16px + .45vw, 21px); line-height: 1.5; color: #d2d2d8; max-width: 34em; }
.muted { color: var(--dim); }
.small { font-size: 14px; color: var(--dim); }

/* ---------- App Store button ---------- */
.store {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 58px; padding: 8px 22px 8px 16px;
  border-radius: 17px;
  color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #84abf6 0%, #5c88e6 46%, #3e68d2 54%, #3459c0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -3px 8px rgba(10,20,60,.35),
    0 0 0 1px rgba(20,40,110,.6),
    0 14px 30px -10px rgba(58,100,206,.85);
  transition: transform .15s ease, box-shadow .15s ease;
}
.store:hover { color: #fff; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -3px 8px rgba(10,20,60,.35), 0 0 0 1px rgba(20,40,110,.6), 0 18px 36px -10px rgba(58,100,206,.95); }
.store:active { transform: translateY(1px); }
.store svg { width: 26px; height: 26px; flex: none; }
.store span { display: grid; line-height: 1.1; text-align: left; }
.store small { font-size: 12.5px; font-weight: 600; opacity: .9; }
.store strong { font-size: 20px; font-weight: 750; letter-spacing: -.01em; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 30px; }
.textlink { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); }
.textlink:hover { color: var(--gold-hi); text-decoration-color: currentColor; }
.fineprint { margin-top: 16px; font-size: 14px; color: var(--dim); }

/* ---------- Hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 40px 56px; align-items: center;
  padding: 36px 0 96px;
}
.hero h1 { max-width: 10em; }
.hero .lede { margin-top: 22px; }
.hero-figure { margin: 0; position: relative; }
.hero-figure figcaption, .mock figcaption { margin-top: 26px; font-size: 14px; line-height: 1.5; color: var(--dim); text-align: center; max-width: 30em; margin-inline: auto; }

/* ---------- Phone ---------- */
.device {
  --pw: 330px;
  font-size: calc(var(--pw) / 41.2);
  width: 41.2em; margin-inline: auto; position: relative;
}
.phone {
  position: relative; width: 41.2em; padding: .95em; border-radius: 6.4em;
  background: #050506;
  box-shadow:
    0 0 0 .3em #262930,
    0 0 0 .42em #70757f,
    0 0 0 .52em #191b1f,
    0 3em 6em -2em rgba(58,100,206,.45),
    0 1em 3em rgba(0,0,0,.6);
}
.screen {
  position: relative; width: 39.3em; height: 85.2em;
  border-radius: 5.45em; overflow: hidden; isolation: isolate;
  font-family: var(--round); color: #fff; line-height: 1.15;
}
.device.crop .phone { height: 72em; overflow: hidden; border-radius: 6.4em 6.4em 0 0; }
.device.crop.tall .phone { height: 77em; }
.device.crop { -webkit-mask-image: linear-gradient(#000 84%, transparent 99%); mask-image: linear-gradient(#000 84%, transparent 99%); padding-top: .6em; }
.island { position: absolute; z-index: 5; top: 1.1em; left: 50%; width: 12.4em; height: 3.6em; margin-left: -6.2em; border-radius: 2em; background: #000; }
.status { position: absolute; z-index: 4; top: 1.12em; left: 0; right: 0; height: 1.2em; padding: 0 1.95em 0 2.9em; display: flex; align-items: center; justify-content: space-between; font: 600 1.65em/1 var(--body); }
.status .clock-s { font-size: 1em; }
.status .icons { display: flex; align-items: center; gap: .35em; margin-left: auto; }
.sig { display: flex; align-items: flex-end; gap: .12em; height: .7em; }
.sig i { width: .17em; background: #fff; border-radius: .05em; display: block; }
.sig i:nth-child(1) { height: 35%; } .sig i:nth-child(2) { height: 55%; } .sig i:nth-child(3) { height: 78%; } .sig i:nth-child(4) { height: 100%; }
.batt { width: 1.45em; height: .7em; border-radius: .22em; border: .07em solid rgba(255,255,255,.5); padding: .08em; position: relative; }
.batt::before { content: ""; display: block; height: 100%; width: 78%; background: #fff; border-radius: .1em; }
.batt::after { content: ""; position: absolute; right: -.17em; top: 50%; width: .1em; height: .26em; margin-top: -.13em; background: rgba(255,255,255,.5); border-radius: 0 .1em .1em 0; }

/* Lock Screen */
.lock {
  background:
    radial-gradient(120% 52% at 50% 108%, rgba(242,182,52,.62) 0%, rgba(230,120,50,.24) 34%, transparent 62%),
    radial-gradient(90% 46% at 12% -4%, rgba(70,110,220,.55), transparent 70%),
    linear-gradient(180deg, #081640 0%, #050b22 42%, #02030a 72%, #0c0705 100%);
}
.ls-top { position: absolute; top: 3.5em; left: 0; right: 0; text-align: center; font-size: 1.95em; font-weight: 600; color: rgba(236,241,255,.92); display: flex; justify-content: center; align-items: center; gap: .3em; white-space: nowrap; }
.ls-top svg { width: 1em; height: 1em; }
.ls-clock { position: absolute; top: 1em; left: 0; right: 0; text-align: center; font: 700 10.6em/1 var(--round); letter-spacing: -.025em; color: rgba(236,241,255,.94); font-variant-numeric: tabular-nums; }
.ls-row { position: absolute; top: 21.7em; left: 50%; margin-left: -16.35em; width: 32.7em; display: flex; gap: 1.1em; }
.ls-row.outlined::after { content: ""; position: absolute; inset: -.75em; border-radius: 1.9em; border: .16em solid rgba(255,255,255,.4); pointer-events: none; }
.ls-btns { position: absolute; left: 4.4em; right: 4.4em; bottom: 5.4em; display: flex; justify-content: space-between; }
.ls-btns span { width: 5em; height: 5em; border-radius: 50%; background: rgba(40,40,46,.55); display: grid; place-items: center; box-shadow: inset 0 0 0 .08em rgba(255,255,255,.08); }
.ls-btns svg { width: 2.2em; height: 2.2em; color: #fff; }
.homebar { position: absolute; bottom: .9em; left: 50%; width: 13.4em; height: .5em; margin-left: -6.7em; border-radius: 1em; background: rgba(255,255,255,.85); z-index: 3; }

/* Magnifier lens over the Lock Screen */
.lens-beam {
  --ls: 1.6;
  position: absolute; z-index: 1; left: 50%; top: 30.7em; height: 8.8em;
  width: calc(32.7em * var(--ls) + 2.4em); margin-left: calc((32.7em * var(--ls) + 2.4em) / -2);
  clip-path: polygon(calc(50% - 17.1em) 0, calc(50% + 17.1em) 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(160,190,255,.22), rgba(160,190,255,.03));
}
.lens {
  --ls: 1.6;
  position: absolute; z-index: 2; left: 50%; top: 39.4em;
  width: calc(32.7em * var(--ls) + 2.4em); margin-left: calc((32.7em * var(--ls) + 2.4em) / -2);
  padding: 1.2em 1.2em 1.1em; border-radius: 2.7em;
  background: rgba(9,13,30,.72);
  -webkit-backdrop-filter: blur(1.4em) saturate(1.4); backdrop-filter: blur(1.4em) saturate(1.4);
  box-shadow: inset 0 0 0 .13em rgba(255,255,255,.17), inset 0 .2em 0 rgba(255,255,255,.12), 0 2.4em 4em -1em rgba(0,0,0,.85);
}
.lens .ls-row { position: relative; top: 0; left: 0; margin: 0; font-size: calc(var(--ls) * 1em); }
.lens-labels { display: flex; gap: calc(1.1em * var(--ls)); margin-top: 1.1em; font: 600 max(11px, 1.5em)/1.25 var(--body); color: rgba(255,255,255,.7); }
.lens-labels span { flex: 1; }
.lens-labels b { color: #fff; font-weight: 650; }

/* A Lock Screen side: 158 x 72 pt; 1em here = 10 pt on a real phone */
.side { position: relative; overflow: hidden; width: 15.8em; height: 7.2em; flex: none; color: rgba(255,255,255,.97); font-family: var(--round); line-height: 1; white-space: nowrap; }
.side .d { color: rgba(255,255,255,.62); }
.side svg { flex: none; }
.side .rule { height: .1em; background: rgba(255,255,255,.35); border-radius: 1em; }
.turns > .side { position: absolute; inset: 0; animation: turn 12s infinite both; }
.turns { position: relative; width: 15.8em; height: 7.2em; flex: none; }
.turns > .side:nth-child(2) { animation-delay: -8s; }
.turns > .side:nth-child(3) { animation-delay: -4s; }
@keyframes turn {
  0% { opacity: 0; transform: translateY(.5em); }
  4%, 30% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-.5em); }
}

/* Bitcoin & Movers */
.w-btc { display: grid; grid-template-rows: 1.55em 1fr 1.2em; gap: .45em; }
.stepbar { position: relative; border-radius: 1em; box-shadow: inset 0 0 0 .13em rgba(255,255,255,.8); overflow: hidden; display: flex; align-items: center; padding: 0 .6em; font-size: 1em; font-weight: 700; }
.stepbar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); background: rgba(255,255,255,.95); }
.stepbar b { position: relative; color: #0b1430; font-weight: 750; font-size: 1em; }
.w-btc .mid { display: flex; align-items: center; justify-content: space-between; gap: .4em; }
.w-btc .price { font-size: 2.35em; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.w-btc .spark { display: grid; justify-items: end; gap: .2em; font-size: .95em; font-weight: 650; }
.w-btc .spark svg { width: 4.6em; height: 1.9em; }
.w-btc .movers { display: flex; justify-content: space-between; font-size: 1.05em; font-weight: 700; }

/* Steps & Activity */
.w-steps { display: grid; grid-template-rows: 1fr .1em 2.3em; gap: .5em; }
.w-steps .top { display: flex; align-items: center; gap: .45em; }
.w-steps .top > svg { width: 2em; height: 2em; }
.w-steps .n { font-size: 2.55em; font-weight: 750; letter-spacing: -.03em; }
.w-steps .lab { font-size: .82em; font-weight: 700; letter-spacing: .04em; margin-top: .35em; }
.ring { margin-left: auto; position: relative; width: 3.6em; height: 3.6em; display: grid; place-items: center; text-align: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring b { font-size: .95em; font-weight: 750; line-height: 1; }
.ring small { display: block; font-size: .62em; font-weight: 700; opacity: .7; letter-spacing: .04em; }
.w-steps .cols { display: flex; justify-content: space-between; align-items: center; }
.w-steps .cols span { display: flex; align-items: center; gap: .25em; font-size: 1.12em; font-weight: 700; }
.w-steps .cols svg { width: 1.05em; height: 1.05em; }
.w-steps .cols small { font-size: .78em; font-weight: 650; opacity: .65; }

/* Weather Hours */
.w-wx { display: grid; grid-template-rows: 2.75em .1em 1fr; gap: .42em; }
.w-wx .top { display: flex; align-items: center; gap: .4em; }
.w-wx .top > svg { width: 2.1em; height: 2.1em; }
.w-wx .t { font-size: 2.6em; font-weight: 750; letter-spacing: -.03em; }
.w-wx .sky { margin-left: auto; text-align: right; font-size: .9em; font-weight: 700; line-height: 1.2; }
.w-wx .hrs { display: flex; justify-content: space-between; }
.w-wx .hrs span { display: grid; justify-items: center; gap: .22em; font-size: .78em; font-weight: 700; }
.w-wx .hrs svg { width: 1.35em; height: 1.35em; }
.w-wx .hrs b { font-size: 1.32em; font-weight: 750; }

/* Surf */
.w-surf { display: grid; grid-template-rows: 1.1em 1fr 1.25em; gap: .35em; }
.w-surf .hd { display: flex; align-items: center; justify-content: space-between; font-size: .88em; font-weight: 750; letter-spacing: .05em; }
.qual { display: flex; align-items: center; gap: .35em; letter-spacing: 0; }
.qual i { display: flex; gap: .14em; align-items: flex-end; height: .85em; }
.qual i::before, .qual i::after, .qual i b, .qual i s { content: ""; display: block; width: .26em; background: #fff; border-radius: .1em; }
.qual i::before { height: 40%; } .qual i b { height: 60%; } .qual i s { height: 80%; } .qual i::after { height: 100%; opacity: .3; }
.w-surf .mid { display: flex; align-items: center; gap: .45em; }
.w-surf .ht { font-size: 2.6em; font-weight: 750; letter-spacing: -.03em; }
.w-surf .per { display: grid; gap: .18em; font-size: .9em; font-weight: 700; }
.w-surf .per svg { width: 1.1em; height: 1.1em; transform: rotate(-35deg); }
.w-surf .water { margin-left: auto; text-align: right; display: grid; gap: .12em; }
.w-surf .water b { font-size: 2em; font-weight: 750; letter-spacing: -.02em; }
.w-surf .water small { font-size: .78em; font-weight: 700; }
.w-surf .ft { display: flex; align-items: center; justify-content: space-between; gap: .3em; font-size: .92em; font-weight: 700; }
.w-surf .ft svg.tide { width: 4.2em; height: 1.2em; }

/* Market Strip */
.w-strip { display: grid; grid-template-rows: 2.8em .1em 1fr; gap: .45em; }
.w-strip .top { display: flex; align-items: center; gap: .3em; }
.w-strip .sym { font-size: 1.35em; font-weight: 750; }
.w-strip .p { font-size: 2em; font-weight: 750; letter-spacing: -.03em; }
.w-strip .tag { font-size: .7em; font-weight: 750; align-self: flex-end; margin-bottom: .45em; }
.w-strip .chg { margin-left: auto; display: grid; justify-items: end; gap: .15em; font-size: .9em; font-weight: 700; }
.w-strip .chg svg { width: 3.6em; height: 1.3em; }
.w-strip .chg { font-size: .76em; }
.w-strip .cols { display: flex; justify-content: space-between; }
.w-strip .cols > span { display: grid; grid-template-columns: auto auto; column-gap: .35em; row-gap: .1em; align-items: center; font-size: .74em; font-weight: 700; line-height: 1.05; }
.w-strip .cols > span > em { font-style: normal; grid-column: 2; opacity: .75; }
.w-strip .cols > span > span { grid-column: 2; }
.w-strip { grid-template-rows: 2.6em .1em 1fr; }
.w-strip .mk { grid-row: span 3; width: 1.7em; height: 1.7em; border-radius: .45em; background: rgba(255,255,255,.92); color: #0b1430; display: grid; place-items: center; font-size: 1.05em; font-weight: 800; }
.w-strip .cols b { font-size: 1.3em; font-weight: 750; grid-column: 2; }

/* Pet side */
.w-pet { display: flex; align-items: center; gap: .7em; }
.w-pet svg.pet { width: 6.2em; height: 6.8em; }
.w-pet .txt { display: grid; gap: .3em; }
.w-pet .txt .name { font-size: 1.9em; font-weight: 800; letter-spacing: -.02em; }
.w-pet .txt span { font-size: 1.02em; font-weight: 700; }

/* Steps & Stride: four columns */
.w-steps.four .cols span { font-size: 1em; gap: .2em; }
.w-steps.four .lab span { font-weight: 650; letter-spacing: 0; margin-left: .35em; opacity: .7; }

/* Sun & Moon */
.w-sm svg { width: 100%; height: 100%; }
.w-sm text { font-family: var(--round); font-weight: 750; fill: #fff; }

/* Day Planner */
.w-plan { display: grid; grid-template-rows: 2.95em .1em 1fr; gap: .32em; }
.w-plan .top { display: flex; align-items: flex-end; justify-content: space-between; gap: .5em; }
.w-plan .dt { font-size: .72em; font-weight: 750; letter-spacing: .04em; opacity: .7; margin-bottom: .2em; }
.w-plan .tm { font-size: 2.1em; font-weight: 750; letter-spacing: -.03em; }
.w-plan .tm small { font-size: .42em; margin-left: .12em; }
.w-plan .wx { display: grid; justify-items: end; gap: .18em; font-size: .9em; font-weight: 700; padding-bottom: .1em; }
.w-plan .wx span:first-child { display: flex; align-items: center; gap: .2em; font-size: 1.3em; }
.w-plan .wx svg { width: 1em; height: 1em; }
.w-plan .bot { display: flex; justify-content: space-between; gap: .4em; }
.w-plan .ev { display: grid; gap: .22em; align-content: start; min-width: 0; }
.w-plan .ev span { display: flex; align-items: center; gap: .38em; font-size: .9em; font-weight: 700; }
.w-plan .ev i { width: .5em; height: .5em; border-radius: 50%; background: #fff; flex: none; }
.w-plan .ev em { font-style: normal; width: 2.5em; opacity: .7; }
.w-plan .car { display: grid; justify-items: end; align-content: center; gap: .2em; font-size: .8em; font-weight: 700; }
.w-plan .car svg { width: 1.6em; height: 1.6em; }
.w-plan .car b { font-size: 1.45em; }

/* Drive Chart */
.w-drive { display: grid; grid-template-rows: 1.5em 1fr; gap: .3em; }
.w-drive .sc { display: flex; align-items: center; justify-content: space-between; font-size: 1.15em; font-weight: 750; }
.w-drive .sc .lose { opacity: .62; font-weight: 650; }
.w-drive .sc b { font-size: 1.25em; }
.w-drive .q { font-size: .78em; display: flex; align-items: center; gap: .3em; }
.w-drive .q i { width: .5em; height: .5em; border-radius: 50%; background: #fff; }
.w-drive svg { width: 100%; height: 100%; }

/* A shelf of ready-made sides, shown big */
.shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; }
.shot { margin: 0; }
.shot-wall {
  font-size: 15px; height: 13.4em; border-radius: 26px;
  display: grid; place-items: center;
  background:
    radial-gradient(110% 80% at 50% 135%, rgba(242,182,52,.38), transparent 62%),
    radial-gradient(80% 70% at 0% 0%, rgba(70,110,220,.42), transparent 70%),
    linear-gradient(180deg, #0a1a48, #050b20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.1);
}
.shot h3 { font-size: 19px; margin: 18px 0 4px; }
.shot p { margin: 0; color: var(--dim); font-size: 16px; }

/* Home Screen */
.home-s {
  background:
    radial-gradient(90% 50% at 85% 0%, rgba(70,110,220,.45), transparent 70%),
    radial-gradient(90% 40% at 0% 100%, rgba(242,182,52,.25), transparent 70%),
    linear-gradient(180deg, #071233, #04081a 55%, #020308);
}
.hs-stack { position: absolute; top: 6.8em; left: 2.75em; right: 2.75em; display: grid; gap: 2.2em; }
.hw { border-radius: 2.25em; overflow: hidden; position: relative; font-family: var(--round); box-shadow: inset 0 0 0 .1em rgba(255,255,255,.12); }

/* Today (Large: 338 x 354 pt) */
.w-today {
  height: 35.4em; padding: 1.9em 2em;
  background: radial-gradient(70% 50% at 100% 0%, rgba(108,154,240,.38), transparent 70%), linear-gradient(165deg, #12285e 0%, #0b1838 55%, #070d22 100%);
  display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: .95em;
}
.w-today .hd { display: flex; justify-content: space-between; align-items: flex-start; }
.w-today .wd { font-size: 4em; font-weight: 800; letter-spacing: -.03em; line-height: .95; }
.w-today .dt { font-size: 1.35em; font-weight: 650; color: rgba(255,255,255,.65); margin-top: .45em; display: flex; gap: .8em; }
.w-today .wx { text-align: right; display: grid; justify-items: end; gap: .25em; font-size: 1.3em; font-weight: 650; color: rgba(255,255,255,.75); }
.w-today .wx b { display: flex; align-items: center; gap: .2em; font-size: 1.9em; color: #fff; font-weight: 750; }
.w-today .wx svg { width: .9em; height: .9em; color: var(--gold); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .55em; }
.week span { height: 3em; border-radius: .9em; background: rgba(255,255,255,.1); display: grid; place-items: center; font-size: 1.3em; font-weight: 750; color: rgba(255,255,255,.75); }
.week span.past { background: rgba(255,255,255,.05); color: rgba(255,255,255,.35); }
.week span.now { background: linear-gradient(180deg, #ffd76e, #f2a024); color: #2a1600; transform: scale(1.1); box-shadow: 0 0 1.4em rgba(242,182,52,.65); }
.w-today .clk { display: flex; align-items: baseline; gap: .35em; }
.w-today .clk b { font-size: 3.9em; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.w-today .clk small { font-size: 1.6em; font-weight: 700; color: rgba(255,255,255,.7); }
.dayfill { display: flex; align-items: center; gap: .8em; font-size: 1.15em; font-weight: 650; color: rgba(255,255,255,.65); margin-top: -.5em; }
.dayfill i { flex: 1; height: .55em; border-radius: 1em; background: rgba(255,255,255,.14); overflow: hidden; display: block; }
.dayfill i::before { content: ""; display: block; height: 100%; width: var(--day, 45%); background: linear-gradient(90deg, var(--blue-hi), #9cc0ff); border-radius: 1em; }
.tiles { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: .8em; align-self: end; }
.tiles > div { background: rgba(255,255,255,.08); border-radius: 1.3em; padding: .8em .95em; display: grid; gap: .35em; align-content: start; min-width: 0; }
.tiles small { font-size: 1.05em; font-weight: 650; color: rgba(255,255,255,.6); }
.tiles b { font-size: 1.7em; font-weight: 750; letter-spacing: -.02em; }
.tiles .up { color: var(--up); font-size: 1.05em; font-weight: 700; }
.tiles svg.mini { width: 100%; height: 1.6em; }
.moonball { width: 2.3em; height: 2.3em; border-radius: 50%; background: #e9e4d4; position: relative; overflow: hidden; }
.moonball::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #0f1a36; transform: translateX(calc(var(--lit, .8) * var(--dir, 1) * 100%)); }
.story { border-top: .1em solid rgba(255,255,255,.14); padding-top: .75em; font-size: 1.3em; font-weight: 650; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story small { display: block; font-size: .8em; color: rgba(255,255,255,.55); margin-bottom: .2em; }

/* Medium: six numbers (338 x 158 pt) */
.w-six { height: 15.8em; padding: 1.6em 1.8em; background: linear-gradient(165deg, #1d2130, #10121a); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em 1em; }
.w-six div { display: grid; align-content: center; gap: .3em; min-width: 0; }
.w-six small { font-size: 1.1em; font-weight: 650; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: .3em; }
.w-six small svg { width: 1em; height: 1em; }
.w-six b { font-size: 2.3em; font-weight: 750; letter-spacing: -.02em; }
.c-gold { color: var(--gold); } .c-blue { color: var(--blue-hi); } .c-green { color: var(--green); } .c-red { color: #ff7a70; }

/* Stocks board, full page (iOS 27): 338 pt wide, a whole page tall */
.w-board { height: 63em; padding: 1.6em 1.5em; background: linear-gradient(170deg, #0f1424, #07090f); display: grid; grid-template-rows: auto auto 1fr; gap: 1em; }
.w-board .hd { display: flex; align-items: center; justify-content: space-between; font-size: 1.2em; font-weight: 700; color: rgba(255,255,255,.62); }
.w-board .hd b { font-size: 1.45em; color: #fff; font-weight: 800; letter-spacing: -.01em; }
.w-board .open { color: var(--up); }
.idx { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.idx div { border-radius: 1.1em; padding: .8em .9em; background: rgba(99,207,99,.16); display: grid; gap: .25em; }
.idx div.dn { background: rgba(255,107,96,.16); }
.idx small { font-size: 1em; font-weight: 700; color: rgba(255,255,255,.7); }
.idx b { font-size: 1.75em; font-weight: 750; letter-spacing: -.02em; }
.idx i { font-style: normal; font-size: 1.05em; font-weight: 700; color: var(--up); }
.idx .dn i { color: var(--down); }
.tick { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: .5em; }
.tick span { border-radius: .9em; padding: .5em .8em; display: grid; align-content: center; row-gap: .25em; font-size: 1em; font-weight: 700; background: rgba(99,207,99, calc(.1 + var(--m, .3) * .4)); }
.tick span.dn { background: rgba(255,107,96, calc(.1 + var(--m, .3) * .4)); }
.tick b { font-size: 1.1em; font-weight: 800; letter-spacing: -.01em; opacity: .85; }
.tick em { font-style: normal; font-size: 1.5em; font-weight: 750; letter-spacing: -.02em; }
.tick small { grid-column: 1 / -1; font-size: .95em; font-weight: 650; color: rgba(255,255,255,.72); }

/* ---------- Sections ---------- */
.sec { padding: 104px 0; border-top: 1px solid var(--rule); }
.sec-intro { max-width: 40em; margin-bottom: 52px; }
.sec-intro h2 + p { margin-top: 22px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px 72px; align-items: start; }
.split.flip > :first-child { order: 2; }
.mock { margin: 0; position: sticky; top: 32px; }

/* Feature list with category tiles */
.feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 26px; }
.feats li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; margin: 0; }
.feats h3 { font-size: 19px; margin-bottom: .2em; }
.feats p { margin: 0; color: var(--dim); }
.tile { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 6px rgba(0,0,0,.25); }
.tile svg { width: 23px; height: 23px; }
.t-blue { background: linear-gradient(180deg, #6c9af0, #3a64ce); }
.t-gold { background: linear-gradient(180deg, #ffd76e, #e09a1c); color: #2b1800; }
.t-red { background: linear-gradient(180deg, #f2726a, #c2322b); }
.t-green { background: linear-gradient(180deg, #86dd86, #3fa43f); color: #08240a; }
.t-ink { background: linear-gradient(180deg, #3a3f4c, #1e2129); }

.rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 30px 34px; margin-top: 8px; }
.rack h3 { font-size: 18px; }
.rack p { margin: 0; color: var(--dim); font-size: 16px; }
.rack > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
.subhead { font: 700 22px/1.25 var(--body); margin: 64px 0 26px; letter-spacing: -.01em; }

.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 48px; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--rule); }
.notes > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
.notes p { margin: 0; color: var(--dim); }

/* Extras: pet, plant, share */
.trio { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 24px; }
.trio > :first-child { grid-row: span 2; }
.panel-row { display: flex; align-items: center; gap: 14px; }
.panel-row h3 { margin: 0; }
.panel-row + p { margin-top: 14px; }
.panel { background: var(--raised); border-radius: 26px; padding: 30px; box-shadow: inset 0 0 0 1px var(--rule); display: flex; flex-direction: column; }
.panel h3 { font-size: 22px; margin-top: 18px; }
.panel p { color: var(--dim); }
.panel p:last-child { margin-bottom: 0; }
.panel .more { margin-top: auto; font-weight: 600; }
.growth { display: flex; align-items: flex-end; gap: 14px; height: 120px; }
.growth svg { height: auto; }
.growth .g1 { width: 46px; } .growth .g2 { width: 50px; } .growth .g3 { width: 68px; } .growth .g4 { width: 92px; }

/* How it works */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: s; }
.steps li { margin: 0; counter-increment: s; }
.steps li::before {
  content: counter(s); display: block; margin-bottom: 18px;
  font: 800 76px/1 var(--display); font-stretch: 125%;
  background: linear-gradient(180deg, var(--gold-hi), #e0961a); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.steps h3 { font-size: 20px; }
.steps p { color: var(--dim); margin: 0; }

/* Privacy promise */
.promise { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px 72px; align-items: end; }
.promise .display { font-size: clamp(2.3rem, 1rem + 4.4vw, 4.4rem); line-height: 1; }
.promise .display span { display: block; white-space: nowrap; }
.promise p { color: #cfcfd5; }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 32px 72px; }
.faq .sec-intro { position: sticky; top: 32px; align-self: start; }
.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-size: 19px; font-weight: 650; line-height: 1.35;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--gold), var(--gold)) center / 14px 2.5px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 2.5px 14px no-repeat;
  transition: transform .2s ease;
}
.qa details[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--gold-hi); }
.qa .a { padding: 0 0 22px; color: #cfcfd5; max-width: 38em; }
.qa .a p:last-child { margin-bottom: 0; }

/* Closing call to action */
.closer { position: relative; text-align: center; padding: 120px 0 128px; border-top: 1px solid var(--rule); overflow: hidden; }
.closer::before { content: ""; position: absolute; left: 50%; bottom: -260px; width: 900px; height: 520px; margin-left: -450px; background: radial-gradient(closest-side, rgba(242,182,52,.32), rgba(58,100,206,.16) 55%, transparent); pointer-events: none; }
.closer > * { position: relative; }
.closer h2 { max-width: 13em; margin: 0 auto; }
.closer p { margin: 22px auto 0; max-width: 32em; color: #cfcfd5; }
.closer .cta-row { justify-content: center; }
.closer .blocks { grid-template-columns: 34px 34px; gap: 7px; margin: 0 auto 34px; width: max-content; }
.closer .blocks i { width: 34px; height: 34px; border-radius: 10px; }

/* ---------- Guide (landing) pages ---------- */
.guide { padding: 24px 0 40px; }
.prose { max-width: 40em; }
.prose h2 { font-size: clamp(1.55rem, 1.1rem + 1.4vw, 2.1rem); font-stretch: 112%; margin: 56px 0 18px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: #d4d4da; }
.prose ul, .prose ol { margin: 0 0 1em; }
.prose li::marker { color: var(--gold); }
.prose strong { color: #fff; }
.callout { margin: 28px 0; padding: 18px 20px; border-radius: 18px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--rule); color: var(--dim); font-size: 15px; }
.more-guides { padding: 56px 0 8px; border-top: 1px solid var(--rule); }
.more-guides h2 { font-size: 22px; font-family: var(--body); font-stretch: 100%; letter-spacing: -.01em; margin-bottom: 18px; }
.more-guides ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.more-guides li { margin: 0; }
.more-guides a { display: block; padding: 16px 18px; border-radius: 16px; background: var(--raised); color: var(--text); text-decoration: none; font-weight: 650; box-shadow: inset 0 0 0 1px var(--rule); }
.more-guides a:hover { box-shadow: inset 0 0 0 1px rgba(242,182,52,.6); color: var(--gold-hi); }
.more-guides small { display: block; color: var(--dim); font-weight: 500; font-size: 14px; margin-top: 2px; }
.pet-strip { display: flex; align-items: flex-end; justify-content: center; gap: 18px; margin: 30px 0 8px; padding: 26px 18px 18px; border-radius: 22px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--rule); }
.pet-strip figure { margin: 0; display: grid; justify-items: center; gap: 10px; font-size: 13px; color: var(--dim); text-align: center; }
.pet-strip svg { height: auto; }

/* ---------- Document pages (privacy, support, terms) ---------- */
.doc { max-width: 760px; padding: 40px 0 24px; }
.doc h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); margin-bottom: 14px; }
.doc h2 { font: 700 22px/1.3 var(--body); letter-spacing: -.01em; margin: 44px 0 10px; font-stretch: 100%; }
.doc p, .doc li { color: #d4d4da; }
.doc strong { color: #fff; }
.sub { color: var(--dim); margin: 0 0 28px; font-size: 18px; }
.card { background: var(--raised); border-radius: 22px; padding: 24px 24px 10px; margin: 22px 0; box-shadow: inset 0 0 0 1px var(--rule); }
.card h2:first-child { margin-top: 0; }
.draft { margin: 0 0 28px; padding: 16px 18px; border-radius: 16px; background: rgba(242,182,52,.12); box-shadow: inset 0 0 0 1px rgba(242,182,52,.45); color: #ffdf9a; font-size: 15px; }
.big { display: inline-block; background: var(--blue); color: #fff; text-decoration: none; padding: 12px 20px; border-radius: 12px; font-weight: 600; margin: 6px 8px 6px 0; }
.ghost { background: transparent; color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }
.table-scroll { overflow-x: auto; margin: 8px 0 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--rule); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table-scroll table { min-width: 560px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; color: #d4d4da; }
tr:last-child td { border-bottom: 0; }
th { color: var(--dim); font-weight: 600; background: var(--raised); }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--rule); padding: 56px 0 40px; margin-top: 40px; font-size: 15px; color: var(--dim); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 36px 48px; }
.foot p { margin: 14px 0 0; max-width: 24em; }
.foot .foot-h { font: 650 14px/1.3 var(--body); color: var(--text); margin: 0 0 14px; }
.foot .brand, .foot .brand:hover { color: var(--text); text-decoration: none; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin: 0 0 9px; }
.foot a { color: var(--dim); text-decoration: none; }
.foot a:hover { color: var(--text); text-decoration: underline; }
.legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--faint); }
.legal p { margin: 0 0 4px; max-width: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-bottom: 72px; }
  .hero h1 { max-width: 12em; }
  .split, .faq, .promise { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
  .mock, .faq .sec-intro { position: static; }
  .trio { grid-template-columns: 1fr; }
  .trio > :first-child { grid-row: auto; }
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .sec { padding: 72px 0; }
  .sec-intro { margin-bottom: 38px; }
  .notes { grid-template-columns: 1fr; }
  .shelf { grid-template-columns: 1fr; gap: 36px; }
  .shot-wall { font-size: clamp(14px, 4.3vw, 17px); }
  .table-scroll { overflow: visible; box-shadow: none; border-radius: 0; }
  .table-scroll table { min-width: 0; }
  .table-scroll tr:first-child { display: none; }
  .table-scroll tr { display: block; padding: 14px 16px; margin-bottom: 10px; border-radius: 16px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--rule); }
  .table-scroll td { display: block; border: 0; padding: 2px 0; }
  .table-scroll td:first-child { font-weight: 650; color: #fff; margin-bottom: 4px; }
  .table-scroll td:nth-child(2)::before { content: "Used for: "; color: var(--dim); }
  .table-scroll td:nth-child(3)::before { content: "What's sent: "; color: var(--dim); }
  .device { --pw: min(290px, 100vw - 100px); }
  .lens, .lens-beam { --ls: 1.36; }
  .steps li::before { font-size: 60px; margin-bottom: 10px; }
  .closer { padding: 88px 0 96px; }
  .nav { gap: 18px; }
  .masthead { padding: 16px 0; }
  .panel { padding: 24px; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .nav { width: 100%; justify-content: space-between; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .turns > .side { animation: none; opacity: 0; }
  .turns > .side:first-child { opacity: 1; }
  .store { transition: none; }
}