/* ============================================================
   getnessi.ai — Home (v2 design), the stylesheet.

   Ported from the v2 design package, which shipped it inline in the page.
   It lives in a file here because the CSP has no 'unsafe-inline' (see
   site/_headers), and for the same reason nothing in index.html carries a
   style="" attribute: the per-message gaps the design wrote inline are the
   .g3/.g6/.g8/.g16 classes at the bottom, and home.vN.js sets geometry
   through the CSSOM (el.style.x = …), which style-src does not cover.

   Cache rule: to change this file, RENAME it (home.v2.css) and update the
   <link> in index.html and the path in _headers.
   ============================================================ */
/* Morning to night. The page opens on white like a fresh day, a day with Nessi plays out as you scroll, and it
   ends at night. The extra polish goes where it matters: the button and its first text, the phone, the day,
   and the last call to text. Everything else stays quiet. */
@font-face { font-family: 'Schibsted Grotesk'; src: url(/assets/fonts/schibsted-sub.v1.woff2) format('woff2'); font-weight: 400 900; font-style: normal; font-display: optional; }
:root {
  color-scheme: light;
  --paper: #FFFFFF;
  --mist: #F5F5F7;
  --ink: #0D0D10;
  --ink-2: #4A4A52;
  --ink-3: #76767F;
  --hair: rgba(13, 13, 16, .09);
  --chip: #F1F1F4;
  --coral: #F4643F;       /* the logo's coral, deepened just enough for white type */
  --coral-hi: #FF8A6A;
  --blue: #0A84FF;        /* your side of an iMessage thread */
  --gray: #E9E9EB;        /* Nessi's side */
  --gray-ink: #000;
  --meta: #8A8A8E;
  --night: #090E22;
  --moon: #F2F3F8;
  --moon-2: #A5AAC0;
  --sans: 'Schibsted Grotesk', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ios: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --gut: clamp(20px, 5vw, 48px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.5 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(244, 100, 63, .2); }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: 650; }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { overflow-x: clip; }

/* ---- the word "text", set as a text ---- */
.bw { position: relative; display: inline-block; color: #fff; background: var(--coral); padding: .03em .25em .08em; margin: 0 .05em 0 .03em; border-radius: .4em; line-height: 1; }
.bw .tail { position: absolute; right: -.155em; bottom: -.026em; width: .44em; height: .44em; fill: var(--coral); }
.js .hero .bw { animation: pop .62s .12s both linear(0, 0.0393, 0.1384, 0.2726, 0.4217, 0.5702, 0.7073, 0.8261, 0.9232, 0.9977, 1.0506, 1.0843, 1.1019, 1.1068, 1.1023, 1.0916, 1.0772, 1.0612, 1.0454, 1.0308, 1.0182, 1.0079, 1, 0.9945, 0.9909, 0.9891, 0.9886, 0.9891, 0.9903, 0.9918, 0.9935, 0.9952, 0.9968, 0.9981, 0.9992, 1, 1.0006, 1.001, 1.0012, 1.0012, 1); transform-origin: 90% 100%; }
@keyframes pop { from { transform: translateY(.18em) scale(.72); opacity: 0; } 30% { opacity: 1; } }

/* ---- top ---- */
.top { max-width: 1240px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) var(--gut) 0; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.brand .mk { width: 34px; height: 34px; display: block; }
.brand .wm { height: 23px; width: auto; display: block; margin-top: 2px; }

/* ---- the first screen ---- */
.hero { max-width: 1240px; margin: 0 auto; padding: 22px var(--gut) 56px; display: grid; gap: 44px; }
.copy { max-width: 660px; }
h1 { font-size: clamp(33px, 10.4vw, 86px); line-height: 1.02; letter-spacing: -0.045em; }
.hv { display: none; }
html:not([data-h]) .hv-text, html[data-h="text"] .hv-text, html[data-h="day"] .hv-day, html[data-h="head"] .hv-head,
html[data-h="moms"] .hv-moms, html[data-h="messy"] .hv-messy, html[data-h="tabs"] .hv-tabs, html[data-h="brain"] .hv-brain, html[data-h="track"] .hv-track, html[data-h="think"] .hv-think, html[data-h="first"] .hv-first { display: block; }
.hv-day, .hv-head, .hv-track, .hv-think { font-size: .9em; }
.hv-tabs, .hv-brain { font-size: .82em; }  /* the longest lines */  /* a touch wider than the first headline, so they're set a touch smaller to stay on two lines */
.lede { margin-top: 16px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.42; color: var(--ink-2); max-width: 35ch; text-wrap: pretty; }
.lede b { display: block; color: var(--ink); font-weight: 600; }

/* what Nessi can help with: four suggestions, one picked. The dark pill slides to your pick. */
.picks { margin: 26px 0 0; padding: 0; border: 0; min-width: 0; }
.picks legend { padding: 0; margin-bottom: 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2); }
/* four choices as one control, like a segmented control on iPhone: the white pill slides to your pick */
.seg { --i: 0; position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px; border-radius: 16px; background: #F0F0F3; }
.seg:has(input[value="calendar"]:checked) { --i: 1; }
.seg:has(input[value="email"]:checked) { --i: 2; }
.seg:has(input[value="remind"]:checked) { --i: 3; }
.seg .thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4); border-radius: 12px; background: #fff;
  box-shadow: 0 1px 2px rgba(13, 13, 16, .1), 0 4px 12px -3px rgba(13, 13, 16, .16); transform: translateX(calc(var(--i) * 100%));
  transition: transform .5s cubic-bezier(.2, .9, .25, 1.05);
  transition: transform .5s linear(0, 0.0295, 0.1033, 0.2034, 0.3157, 0.4302, 0.5398, 0.64, 0.7283, 0.8035, 0.8656, 0.9154, 0.9541, 0.9829, 1.0036, 1.0174, 1.0259, 1.0303, 1.0315, 1.0307, 1.0284, 1.0252, 1.0217, 1.0181, 1.0146, 1.0115, 1.0087, 1.0063, 1.0043, 1.0027, 1.0015, 1.0006, 0.9999, 0.9995, 0.9992, 0.999, 1); }
.seg label { position: relative; z-index: 1; display: grid; place-items: center; height: 44px; padding: 0 4px; text-align: center; font: 600 15px/1.1 var(--sans); letter-spacing: -0.01em; color: var(--ink-3);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: color .25s; }
.seg label:hover { color: var(--ink-2); }
.seg label:has(input:checked) { color: var(--ink); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:focus-visible) { border-radius: 12px; box-shadow: inset 0 0 0 2px var(--blue); }

.cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 62px; margin-top: 16px; padding: 0 20px 0 28px; border-radius: 999px;
  background: var(--coral); color: #fff; text-decoration: none; font: 700 20px/1 var(--sans); letter-spacing: -0.015em; text-shadow: 0 1px 0 rgba(150, 40, 10, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(120, 30, 8, .16), 0 1px 2px rgba(150, 40, 12, .22), 0 14px 30px -12px rgba(244, 100, 63, .7);
  transition: transform .5s cubic-bezier(.2, .9, .25, 1.05), box-shadow .3s, background-color .2s; -webkit-tap-highlight-color: transparent; }
.cta .go { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--coral); display: grid; place-items: center; box-shadow: 0 1px 2px rgba(120, 30, 8, .25); }
.cta .go svg { width: 16px; height: 16px; }
.cta:hover { background: #F66D49; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(120, 30, 8, .16), 0 2px 4px rgba(150, 40, 12, .2), 0 20px 36px -12px rgba(244, 100, 63, .75); }
.cta:active { transform: scale(.965); transition-duration: .08s; }
.cta:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.how { margin-top: 12px; font-size: 15px; line-height: 1.4; color: var(--ink-3); text-align: center; text-wrap: balance; }
.alt { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; font-size: 15px; color: var(--ink-3); }
.alt a { color: var(--ink); font-weight: 650; text-decoration: none; font-variant-numeric: tabular-nums; }
.copybtn { font: 600 13px/1 var(--sans); color: var(--ink-2); background: var(--chip); border: 0; border-radius: 999px; padding: 7px 11px; cursor: pointer; }
.copybtn:hover { background: #E7E7EC; }
.copybtn.done { color: #1F8A4C; }
.copybtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.qr { display: none; }
.qr img { width: 92px; height: 92px; flex: none; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--hair); }
.qr p { font-size: 15px; line-height: 1.4; color: var(--ink-3); max-width: 30ch; }
.qr b { color: var(--ink); font-weight: 600; }

.stage { display: grid; justify-items: center; gap: 14px; }
.stage figcaption { font-size: 13px; color: var(--ink-3); }

/* ---- the phone: a render of the launch films' phone, with a live screen behind its glass ---- */
.device { --pw: min(330px, 84vw); position: relative; width: var(--pw); aspect-ratio: 2072 / 4166; container-type: inline-size; isolation: isolate; }
.device::before { content: ''; position: absolute; z-index: -1; inset: .4% 1.7%; border-radius: 17.3cqw;
  box-shadow: 0 2px 6px rgba(10, 12, 30, .12), 0 30px 60px -18px rgba(10, 12, 30, .34), 0 70px 110px -40px rgba(10, 12, 30, .3); }
.device .shell { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.scr { --u: calc(100cqw / 396.53); --sbg: #fff; --sink: #000; --gray: #E9E9EB; --gray-ink: #000; --meta: #8A8A8E; --navbg: rgba(247, 247, 249, .84); --navline: rgba(0, 0, 0, .14); --fieldline: #D1D1D6; --fieldtext: #A2A2A7;
  position: absolute; left: 4.4595%; top: 1.8099%; width: 91.0811%; height: 96.3802%; border-radius: 7.57cqw; overflow: hidden; container-type: inline-size;
  background: var(--sbg); color: var(--sink); font-family: var(--ios); -webkit-font-smoothing: antialiased; transition: background-color .6s; }
.scr.dark { --sbg: #000; --sink: #fff; --gray: #262629; --gray-ink: #fff; --meta: #8D8D93; --navbg: rgba(20, 20, 22, .8); --navline: rgba(255, 255, 255, .14); --fieldline: #3A3A3C; --fieldtext: #6C6C71; }
.disp { position: absolute; inset: calc(1.765 * var(--u)); }
.sb { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: calc(54 * var(--u)); font: 600 calc(17 * var(--u))/1 var(--ios); letter-spacing: -0.02em; color: var(--sink); transition: color .6s; }
.sb-t { position: absolute; left: 0; width: calc(134 * var(--u)); top: calc(20.5 * var(--u)); text-align: center; font-variant-numeric: tabular-nums; }
.sb-i { position: absolute; left: calc(262 * var(--u)); width: calc(131 * var(--u)); top: calc(23.5 * var(--u)); display: flex; justify-content: center; align-items: center; gap: calc(5.5 * var(--u)); }
.sb-i svg { fill: currentColor; display: block; }
.sb-i .sig { width: calc(17 * var(--u)); height: calc(11.3 * var(--u)); }
.sb-i .wifi { width: calc(15.5 * var(--u)); height: calc(11.4 * var(--u)); }
.sb-i .bat { width: calc(26 * var(--u)); height: calc(12.5 * var(--u)); }
.nav { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: calc(138 * var(--u)); background: var(--navbg); box-shadow: 0 calc(.5 * var(--u)) 0 var(--navline); -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); transition: background-color .6s, box-shadow .6s; }
.nav .back { position: absolute; left: calc(12 * var(--u)); top: calc(70 * var(--u)); width: calc(12 * var(--u)); height: calc(21 * var(--u)); color: var(--blue); }
.nav .who { position: absolute; left: 0; right: 0; top: calc(57 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--u)); }
.nav .av { width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%; background: linear-gradient(180deg, #F4F4F7, #E3E3E8); display: grid; place-items: center; }
.scr.dark .nav .av { background: linear-gradient(180deg, #3A3A3E, #2C2C2F); }
.nav .av img { width: 66%; height: 66%; display: block; }
.nav .nm { display: flex; align-items: center; gap: calc(3 * var(--u)); font: 500 calc(12.5 * var(--u))/1 var(--ios); color: var(--sink); transition: color .6s; }
.nav .nm svg { width: calc(5.5 * var(--u)); height: calc(9 * var(--u)); color: var(--meta); }
.nav .vid { position: absolute; right: calc(16 * var(--u)); top: calc(72 * var(--u)); width: calc(27 * var(--u)); height: calc(17 * var(--u)); color: var(--blue); }
.thread { position: absolute; left: 0; right: 0; top: 0; bottom: calc(84 * var(--u)); overflow: hidden; }
.list { display: flex; flex-direction: column; padding: calc(148 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.bar { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(34 * var(--u)); height: calc(46 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(10 * var(--u)); }
.bar .plus { flex: none; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: var(--gray); color: var(--meta); display: grid; place-items: center; transition: background-color .6s; }
.bar .plus svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.bar .field { flex: 1; height: calc(36 * var(--u)); border-radius: calc(18 * var(--u)); border: calc(1 * var(--u)) solid var(--fieldline); display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(11 * var(--u)) 0 calc(14 * var(--u)); font: 400 calc(17 * var(--u))/1 var(--ios); color: var(--fieldtext); transition: border-color .6s; }
.bar .field svg { width: calc(12 * var(--u)); height: calc(18 * var(--u)); }
.home { position: absolute; z-index: 2; left: 50%; bottom: calc(8 * var(--u)); width: calc(134 * var(--u)); height: calc(5 * var(--u)); margin-left: calc(-67 * var(--u)); border-radius: 99px; background: var(--sink); transition: background-color .6s; }

/* messages, sized in points of the phone's screen so they scale with the phone */
.msg { position: relative; max-width: 76%; padding: calc(7.5 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u)); border-radius: calc(18 * var(--u)); font: 400 calc(17 * var(--u))/1.29 var(--ios); letter-spacing: -0.012em; overflow-wrap: break-word; }
.msg .tx { display: block; }
.me { align-self: flex-end; background: var(--blue); color: #fff; transform-origin: 100% 100%; }
.ne { align-self: flex-start; background: var(--gray); color: var(--gray-ink); transform-origin: 0 100%; transition: background-color .6s, color .6s; }
.tail { position: absolute; bottom: calc(-1.2 * var(--u)); width: calc(20 * var(--u)); height: calc(20 * var(--u)); pointer-events: none; }
.me .tail { right: calc(-7 * var(--u)); fill: var(--blue); }
.ne .tail { left: calc(-7 * var(--u)); fill: var(--gray); transform: scaleX(-1); transition: fill .6s; }
.dots { display: none; gap: calc(4.5 * var(--u)); padding: calc(5.5 * var(--u)) calc(3 * var(--u)); }
.dots i { width: calc(8.5 * var(--u)); height: calc(8.5 * var(--u)); border-radius: 50%; background: var(--meta); animation: dot 1.15s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .16s; }
.dots i:nth-child(3) { animation-delay: .32s; }
@keyframes dot { 0%, 62%, 100% { opacity: .32; } 30% { opacity: 1; } }
.typing .tx { display: none; }
.typing .dots { display: flex; }
.stamp { align-self: center; font: 400 calc(12 * var(--u))/1.3 var(--ios); color: var(--meta); text-align: center; }
.stamp b { font-weight: 600; }
.meta { align-self: flex-end; font: 500 calc(11 * var(--u))/1.2 var(--ios); color: var(--meta); padding-right: calc(4 * var(--u)); }
.js .pre { display: none; }
.off { display: none !important; }
@keyframes buzz { 0%, 100% { transform: none; } 12% { transform: translateX(2px) rotate(.35deg); } 26% { transform: translateX(-2px) rotate(-.35deg); } 40% { transform: translateX(1.5px) rotate(.25deg); } 54% { transform: translateX(-1.5px) rotate(-.25deg); } 68% { transform: translateX(.8px); } 82% { transform: translateX(-.6px); } }
.buzz { animation: buzz .42s linear; }
/* the ready-to-send text above the button is a real message bubble, at page size */

/* ---- why ---- */
.thesis { padding: clamp(84px, 12vw, 160px) var(--gut) clamp(72px, 9vw, 120px); text-align: center; }
.thesis .lead-in { margin: 0 auto 20px; max-width: 30ch; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4; color: var(--ink-3); text-wrap: balance; }
.thesis h2 { font-size: clamp(36px, 6.2vw, 78px); line-height: 1.03; letter-spacing: -0.045em; max-width: 15.5ch; margin: 0 auto; }
.thesis h2 .w { display: inline; opacity: calc(.14 + .86 * var(--lit, 1)); transition: opacity .15s linear; }
.thesis h2 .soft { color: #8E8E96; }
.thesis .sub { margin: 26px auto 0; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--ink-2); max-width: 36ch; text-wrap: balance; }
.steps-h { margin: clamp(72px, 9vw, 112px) auto 0; max-width: 22ch; font-size: clamp(26px, 3vw, 36px); line-height: 1.12; letter-spacing: -0.03em; }
.steps { list-style: none; margin: 34px auto 0; padding: 0; max-width: 1080px; display: grid; gap: 34px; text-align: left; }
.steps li { border-top: 1px solid var(--hair); padding-top: 22px; display: grid; gap: 8px; align-content: start; }
.steps .fig { height: 62px; display: flex; align-items: center; margin-bottom: 6px; }
.steps b { font-size: 21px; font-weight: 650; letter-spacing: -0.02em; }
.steps p { font-size: 16.5px; line-height: 1.45; color: var(--ink-2); max-width: 30ch; }
.mini-cta { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 8px 0 18px; border-radius: 999px; background: var(--coral); color: #fff; font: 700 15px/1 var(--sans); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 10px 20px -10px rgba(244,100,63,.7); }
.mini-cta i { width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--coral); display: grid; place-items: center; }
.mini-cta svg, .mini-send svg { width: 14px; height: 14px; }
.mini-field { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 5px 0 16px; border-radius: 999px; border: 1px solid #D1D1D6; font: 400 15px/1 var(--ios); color: var(--ink); max-width: 100%; }
.mini-field span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-send { flex: none; width: 31px; height: 31px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; }
.fig .msg { --u: 1px; font-size: 16px; }

/* ---- a day with Nessi ---- */
.day { position: relative; }
.day-pin { position: relative; color: var(--dc, var(--ink)); }
/* while the day scrolls in, its sky fades up out of the white page above it */
.day-pin::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 200px; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); opacity: var(--fade, 0); pointer-events: none; }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--s1, #E9EEF8), var(--s2, #FFD6C0)); }
.sky::after { content: ''; position: absolute; inset: 0; opacity: .05; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.stars { position: absolute; inset: 0 0 35%; opacity: var(--st, 0); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='420'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='37' cy='52' r='1.1'/%3E%3Ccircle cx='121' cy='18' r='.8' opacity='.7'/%3E%3Ccircle cx='186' cy='96' r='1.3'/%3E%3Ccircle cx='254' cy='41' r='.7' opacity='.6'/%3E%3Ccircle cx='318' cy='130' r='1' opacity='.8'/%3E%3Ccircle cx='377' cy='27' r='1.4'/%3E%3Ccircle cx='446' cy='88' r='.8' opacity='.7'/%3E%3Ccircle cx='523' cy='44' r='1.1'/%3E%3Ccircle cx='571' cy='151' r='.7' opacity='.6'/%3E%3Ccircle cx='82' cy='178' r='.9' opacity='.7'/%3E%3Ccircle cx='151' cy='236' r='1.2' opacity='.8'/%3E%3Ccircle cx='233' cy='191' r='.7' opacity='.5'/%3E%3Ccircle cx='296' cy='268' r='1' opacity='.6'/%3E%3Ccircle cx='402' cy='214' r='1.3' opacity='.8'/%3E%3Ccircle cx='487' cy='262' r='.8' opacity='.6'/%3E%3Ccircle cx='552' cy='318' r='1' opacity='.5'/%3E%3Ccircle cx='24' cy='331' r='.8' opacity='.5'/%3E%3Ccircle cx='118' cy='372' r='1' opacity='.4'/%3E%3Ccircle cx='341' cy='356' r='.8' opacity='.4'/%3E%3Ccircle cx='442' cy='389' r='1.1' opacity='.4'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 600px 420px repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.day-in { position: relative; max-width: 1240px; margin: 0 auto; padding: 72px var(--gut); display: grid; gap: 36px; }
.day h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.04; letter-spacing: -0.04em; max-width: 18ch; }
.day .intro { margin-top: 12px; font-size: 18px; line-height: 1.45; max-width: 34ch; opacity: .78; }
.clock { display: none; }
.beats { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 22px; }
.beat b { display: block; font-size: 24px; line-height: 1.12; letter-spacing: -0.03em; font-weight: 650; }
.beat span { display: block; margin-top: 6px; font-size: 17px; line-height: 1.4; opacity: .74; }
.beat time { display: block; font: 650 14px/1 var(--sans); letter-spacing: .02em; margin-bottom: 8px; opacity: .7; font-variant-numeric: tabular-nums; }
.ticks { display: none; }
.day .device { --pw: min(360px, 84vw); justify-self: center; }

/* with scripts on, the day plays out as you scroll: the section is pinned while the clock runs */
.js .day { height: 460vh; height: 460svh; }
.js .day-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.js .day-in { height: 100%; padding-block: 0; align-content: center; }
.js .clock { display: flex; align-items: baseline; margin-top: 22px; font: 650 clamp(64px, 8.4vw, 124px)/1 var(--sans); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.clock .dg { display: inline-block; height: 1em; overflow: hidden; }
.clock .dg span { display: block; transition: transform .7s cubic-bezier(.2, .85, .25, 1.02); }
.clock .dg i { display: block; height: 1em; font-style: normal; }
.clock .co { margin: 0 .01em; }
.clock .ap { font-size: .3em; letter-spacing: 0; font-weight: 600; margin-left: .3em; }
.js .beats { display: grid; margin-top: 18px; min-height: 5.6em; }
.js .beat { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .55s cubic-bezier(.2, .8, .2, 1); }
.js .beat.on { opacity: 1; transform: none; transition-delay: .08s; }
.js .beat time { display: none; }
.js .beat b { font-size: clamp(26px, 3vw, 40px); }
.js .ticks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 30px; }
.ticks button { font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 999px; padding: 8px 11px; opacity: .45; cursor: pointer; transition: opacity .3s, background-color .3s, color .3s; }
.ticks button:hover { opacity: .8; }
.ticks button[aria-current="true"] { opacity: 1; background: var(--dc, var(--ink)); color: var(--dbg, #fff); border-color: transparent; }
.ticks button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- night ---- */
.night { background: var(--night); color: var(--moon); color-scheme: dark; }
.asks { padding: clamp(72px, 10vw, 128px) var(--gut) clamp(24px, 4vw, 40px); }
.asks-in { max-width: 560px; margin: 0 auto; }
.asks h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.045em; }
.asks .note { margin-top: 12px; font-size: 18px; line-height: 1.45; color: var(--moon-2); }
.ask-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 10px; justify-items: end; }
.ask-list li { max-width: 88%; }
.ask { --u: 1px; display: block; max-width: 100%; font-size: 17px; line-height: 1.3; color: #fff; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: opacity .45s, transform .6s cubic-bezier(.2, .9, .25, 1.05), filter .2s; }
.ask:hover { filter: brightness(1.1); transform: translateY(-1px); }
.ask:active { transform: scale(.97); transition-duration: .08s; }
.ask:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ask.wait { opacity: 0; transform: translateY(16px) scale(.94); }
.asks .more { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; font-size: 18px; font-weight: 600; color: var(--moon); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 3px; }
.asks .more:hover { border-color: var(--moon); }
.trust { padding: clamp(64px, 9vw, 120px) var(--gut) clamp(24px, 4vw, 48px); }
.trust-in { max-width: 1080px; margin: 0 auto; display: grid; gap: 34px; }
.trust h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.045em; }
.trust .note { margin-top: 14px; font-size: 18px; line-height: 1.45; color: var(--moon-2); max-width: 28ch; }
.specs { margin: 0; }
.specs div { display: grid; grid-template-columns: minmax(0, 10.5em) minmax(0, 1fr); gap: 16px; padding: 17px 0; border-top: 1px solid rgba(255, 255, 255, .11); font-size: 17px; line-height: 1.4; }
.specs div:last-child { border-bottom: 1px solid rgba(255, 255, 255, .11); }
.specs dt { font-weight: 650; color: var(--moon); }
.specs dd { margin: 0; color: var(--moon-2); }
.finale { position: relative; overflow: hidden; padding: clamp(96px, 13vw, 176px) var(--gut) clamp(96px, 11vw, 150px); text-align: center; }
.finale::before { content: ''; position: absolute; left: 50%; bottom: -380px; width: 1100px; height: 640px; margin-left: -550px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(244, 100, 63, .2), rgba(244, 100, 63, .06) 55%, transparent); }
.finale-in { position: relative; max-width: 1100px; margin: 0 auto; display: grid; justify-items: center; }
.finale h2 { font-size: clamp(46px, 11vw, 124px); line-height: 1; letter-spacing: -0.055em; }
.finale h2 .ln { display: block; white-space: nowrap; }
.finale-sub { margin-top: 26px; font-size: clamp(19px, 2vw, 24px); line-height: 1.35; color: var(--moon-2); letter-spacing: -0.015em; text-wrap: balance; }
.finale .cta { margin-top: 40px; max-width: 420px; }
.finale .sends { margin-top: 16px; font-size: 15px; line-height: 1.4; color: var(--moon-2); max-width: 40ch; }
.finale .sends q { color: var(--moon); }
.finale .sends button { font: inherit; color: var(--moon); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.finale .alt { color: var(--moon-2); }
.finale .alt a { color: var(--moon); }
.finale .copybtn { background: rgba(255, 255, 255, .1); color: var(--moon); }
.finale .copybtn:hover { background: rgba(255, 255, 255, .16); }
.finale .copybtn.done { color: #7DE0A6; }
footer { background: var(--night); color: var(--moon-2); }
footer .in { max-width: 1240px; margin: 0 auto; padding: 34px var(--gut) calc(128px + env(safe-area-inset-bottom)); display: grid; gap: 16px; font-size: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
footer img { width: 92px; height: auto; display: block; }
footer .tagline { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--moon); }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer nav a { color: var(--moon); text-decoration: none; }
footer nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal { font-size: 13px; line-height: 1.5; max-width: 70ch; }

/* ---- the button that follows you down the page ---- */
.dock { position: fixed; z-index: 20; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); width: min(560px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px; padding: 7px; border-radius: 999px;
  background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 0 0 1px rgba(13, 13, 16, .07), 0 12px 32px -10px rgba(13, 13, 16, .3); transform: translate(-50%, calc(100% + 40px)); visibility: hidden;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s .6s, background-color .4s, box-shadow .4s, color .4s; }
.dock.on { transform: translate(-50%, 0); visibility: visible; transition: transform .6s cubic-bezier(.2, .9, .25, 1.04), visibility 0s, background-color .4s, box-shadow .4s, color .4s; }
.dock.dark { background: rgba(22, 26, 48, .66); color: var(--moon); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 12px 32px -10px rgba(0, 0, 0, .6); }
.dock .cta { margin: 0; height: 52px; font-size: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 2px rgba(150, 40, 12, .2); }
.dock .cta .go { width: 26px; height: 26px; }
.dock-l { display: none; align-items: center; gap: 10px; padding-left: 8px; flex: 1; min-width: 0; font-size: 15px; line-height: 1.25; }
.dock-l img { width: 30px; height: 30px; flex: none; }
.dock-l b { font-weight: 650; }

@media (max-width: 560px) { .specs div { grid-template-columns: 1fr; gap: 3px; } }
@media (min-width: 700px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .trust-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); align-items: start; gap: 56px; }
  .dock { width: auto; max-width: calc(100% - 24px); }
  .dock-l { display: flex; padding-right: 6px; }
  .dock .cta { width: auto; padding: 0 12px 0 22px; }
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 64px; padding-top: 12px; min-height: calc(100vh - 60px); min-height: calc(100svh - 60px); }
  .cta { width: auto; min-width: 340px; max-width: 420px; }
  .how, .alt { text-align: left; justify-content: flex-start; }
  .hero .device { --pw: min(380px, calc((100vh - 120px) * .4974)); --pw: min(380px, calc((100svh - 120px) * .4974)); }
  .picks { max-width: 520px; }
  .js .day-in { grid-template-columns: minmax(0, 1fr) auto; column-gap: 72px; padding-bottom: 64px; }
  .day .device { --pw: min(390px, calc((100vh - 150px) * .4974)); --pw: min(390px, calc((100svh - 150px) * .4974)); }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .qr { display: flex; align-items: center; gap: 16px; margin-top: 26px; } }

/* on phones and tablets the day's thread is its own card, at a size you can read */
@media (max-width: 1023px) {
  .js .day-in { display: flex; flex-direction: column; justify-content: flex-start; gap: 0; padding: calc(env(safe-area-inset-top) + 22px) 16px 88px; }
  .js .day h2 { font-size: 20px; letter-spacing: -0.025em; max-width: none; padding-right: 20px; }
  .js .day .intro { display: none; }
  .js .clock { margin-top: 10px; font-size: 54px; }
  .js .ticks { display: none; }
  .js .beats { margin-top: 8px; min-height: 0; }
  .js .beat b { font-size: 22px; }
  .js .beat span { font-size: 15.5px; margin-top: 4px; }
  .js .day .device { --pw: 100%; flex: 1; min-height: 0; margin-top: 16px; aspect-ratio: auto; width: 100%; max-width: 560px; align-self: center; }
  .js .day .device::before { inset: 0; border-radius: 26px; box-shadow: 0 1px 2px rgba(10, 12, 30, .1), 0 24px 50px -20px rgba(10, 12, 30, .35); }
  .js .day .device .shell { display: none; }
  .js .day .scr { inset: 0; width: auto; height: auto; left: 0; top: 0; border-radius: 26px; }
  .js .day .disp { inset: 0; }
  .js .day .sb, .js .day .bar, .js .day .home { display: none; }
  .js .day .nav { height: calc(64 * var(--u)); }
  .js .day .nav .who { top: calc(12 * var(--u)); flex-direction: row; gap: calc(9 * var(--u)); justify-content: center; }
  .js .day .nav .av { width: calc(38 * var(--u)); height: calc(38 * var(--u)); }
  .js .day .nav .nm { font-size: calc(16 * var(--u)); font-weight: 600; }
  .js .day .nav .back { top: calc(22 * var(--u)); }
  .js .day .nav .vid { top: calc(24 * var(--u)); }
  .js .day .thread { bottom: 0; }
  .js .day .list { padding-top: calc(76 * var(--u)); padding-bottom: calc(16 * var(--u)); }
}
@media (max-width: 1023px) and (max-height: 720px) { .js .beat span { display: none; } }
@media (max-width: 700px) {
  .top { padding-top: max(12px, env(safe-area-inset-top)); }
  .hero { padding-top: 14px; }
  .lede { margin-top: 12px; font-size: 17px; }
  .picks { margin-top: 22px; }
  .cta { margin-top: 16px; }
  .hero .alt { display: none; }   /* on a phone the button does the job; the number waits at the bottom of the page */
}
/* small phones: the ready-to-send bubble gives way so the button stays in the first screen */

@media (max-width: 360px) { .seg label { font-size: 13.5px; } .hv-day, .hv-head, .hv-track, .hv-think { font-size: .84em; } .hv-tabs, .hv-brain { font-size: .8em; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}

/* ---- additions for this site (not in the v2 design package) ---- */

/* The design's inline margin-tops on the no-JS thread in the hero phone. */
.g3 { margin-top: calc(3 * var(--u)); }
.g6 { margin-top: calc(6 * var(--u)); }
.g8 { margin-top: calc(8 * var(--u)); }
.g16 { margin-top: calc(16 * var(--u)); }

/* The optional phone number, between the choices and the button. It carries
   the signup (nessi/docs/WEB_SIGNUP_CONTRACT.md): Nessi learns the chosen
   topic before the first text arrives. Without JS nothing can POST, so the
   field only exists for .js pages. Kept to one 48px row so the button stays
   in the first screen from 320px up. */
.tel { display: none; margin-top: 14px; }
.js .tel { display: block; }
.tel-row { display: flex; align-items: stretch; height: 48px; border-radius: 14px; background: #F0F0F3; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .2s, background-color .2s; }
.tel-row:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--blue); }
.tel-row.bad { box-shadow: inset 0 0 0 2px #D93025; }
.tel-cc { position: relative; flex: none; display: flex; align-items: center; gap: 5px; padding: 0 10px 0 14px; font: 600 16px/1 var(--sans); color: var(--ink); border-right: 1px solid var(--hair); }
.tel-cc .chev { width: 9px; height: 9px; color: var(--ink-3); }
.tel-cc select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.tel-cc.dis { opacity: .4; }
.tel-cc.dis select { cursor: default; }
.tel-plus { align-self: center; padding-left: 12px; font: 600 17px/1 var(--sans); color: var(--ink); }
.tel-row input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 14px 0 12px; font: 500 17px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; outline: none; }
.tel-plus + input { padding-left: 2px; }
.tel-row input::placeholder { color: var(--ink-3); opacity: 1; }
.tel-note { margin-top: 7px; font-size: 14px; line-height: 1.35; color: var(--ink-3); }
.tel-err { margin-top: 7px; font-size: 14px; line-height: 1.35; color: #C5221F; }
.tel + .cta { margin-top: 14px; }
@media (min-width: 1024px) { .tel { max-width: 520px; } }
@media (max-width: 380px) { .tel-note { display: none; } }