/* Sweetspot landing page and guides. The tokens are in /tokens.css, shared with admin.
   Layout: one column on the phone. The hero sits over a live background, the sections below are white or tinted.
   Pink marks the one thing to look at in each view: the button, or where the ball went. */

/* Schibsted Grotesk, served from this site so no visitor's address goes to a font CDN (SIL OFL 1.1, /fonts/OFL.txt) */
@font-face {
  font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font: 400 1.0625rem/1.5 var(--font);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img, svg, canvas, video { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.measure { max-width: 34rem; }
.label { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
/* hidden means hidden, even on elements that set their own display (31 October: the parent's box showed for everyone) */
[hidden] { display: none !important; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(92vh, 880px);
  min-height: min(92svh, 880px);
  display: grid; grid-template-rows: auto 1fr auto;
  color: var(--white); background: var(--sky);
}
.hero-bg, .hero-fallback { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.hero-fallback { z-index: -3; }
.hero-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(3, 74, 102, 0.72) 0%, rgba(3, 74, 102, 0.38) 38%, rgba(3, 74, 102, 0) 64%); }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 18px); padding-bottom: 8px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 44px; height: 44px; }
.brand b { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.brand span { font-size: 0.8125rem; opacity: 0.86; }
.chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 99px;
  border: 1px solid rgba(252, 255, 255, 0.55); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-copy { align-self: end; display: grid; gap: 18px; padding-block: 24px 28px; }
.hero h1 { font-size: clamp(2.6rem, 11.5vw, 5rem); line-height: 0.96; letter-spacing: -0.035em; font-weight: 700; max-width: 11ch; }
.hero h1 mark { display: inline-block; margin: 0.04em 0; padding: 0.02em 0.14em 0.08em; border-radius: 0.16em; background: var(--pink); color: var(--white);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 18px 36px -16px rgba(216, 57, 149, 0.9); }
.hero .lede { font-size: 1.125rem; line-height: 1.45; max-width: 30rem; text-shadow: 0 1px 12px rgba(3, 60, 84, 0.35); }

/* ---------- The waitlist form: frosted glass, like the panel in the reference's top-right corner ----------
   It sits low in the hero, over the darkest part of the scrim, so white text on the glass stays readable.
   The pink button glows, so it pops against the blue even though pink and sky blue are about as light. */
.join { display: grid; gap: 10px; max-width: 30rem; }
.join-card {
  position: relative; display: grid; gap: 10px; padding: 22px 12px 12px; border-radius: 24px; color: var(--white);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 24px 48px -24px rgba(2, 40, 60, 0.6);
}
.join-card::before { content: ""; position: absolute; top: 9px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgba(255, 255, 255, 0.6); }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); padding-inline: 8px; }
.input {
  width: 100%; min-height: 54px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line);
  background: #F3F8FA; color: var(--ink); font: 500 1.0625rem var(--font);
}
.input:focus { outline: none; border-color: var(--sky); background: var(--white); }
.input[aria-invalid="true"] { border-color: var(--error); }
.join-card .input { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.34); color: var(--white); }
.join-card .input::placeholder { color: rgba(252, 255, 255, 0.8); }
.join-card .input:focus { background: rgba(255, 255, 255, 0.24); border-color: var(--white); }
.join-card .input[aria-invalid="true"] { border-color: #FFC2E1; }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; font-size: 0.9375rem; line-height: 1.35; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--pink); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 22px;
  border: 0; border-radius: 14px; font: 700 1.1875rem/1 var(--font); letter-spacing: -0.01em; cursor: pointer;
  text-decoration: none; transition: transform 0.12s ease, background-color 0.12s ease;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.btn:active { transform: scale(0.98); }
.btn-pink { background: var(--pink); color: var(--white); width: 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 14px 30px -12px rgba(216, 57, 149, 0.85); }
.btn-pink:active { background: var(--pink-press); }
.btn-quiet { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.err { color: var(--error); font-size: 0.875rem; padding-inline: 8px; }
.join-card .err { color: #FFE1F0; font-weight: 600; }
.join-note { font-size: 0.875rem; line-height: 1.4; }
.join-note a { font-weight: 600; }
.join-done { display: grid; gap: 6px; padding: 20px 18px; border-radius: 24px; color: var(--white);
  background: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.32); }
.join-done strong { font-size: 1.25rem; }
.join-done .fineprint { color: rgba(252, 255, 255, 0.85); }
@media (hover: hover) { .btn-pink:hover { background: var(--pink-press); } }

/* ---------- Sections ---------- */
.section { padding-block: 72px; }
.section-head { display: grid; gap: 12px; margin-bottom: 28px; }
.section h2 { font-size: clamp(1.9rem, 7.5vw, 3rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; }
.section .sub { color: var(--ink-2); max-width: 34rem; }
.eyebrow { color: var(--sky-ink); }

/* The session: five shots on one goal */
.session { display: grid; gap: 28px; }
.goal-svg { width: 100%; height: auto; overflow: visible; }
.goal-svg .heat { opacity: 1; }
/* lifted the way Apple lifts a product card: a hairline, a tight contact shadow and a wide soft one, no hard edge */
.session-card { display: grid; gap: 14px; padding: 18px; border-radius: var(--radius); background: var(--white);
  border: 1px solid rgba(8, 32, 44, 0.06);
  box-shadow: 0 1px 2px rgba(8, 32, 44, 0.05), 0 6px 16px -6px rgba(8, 32, 44, 0.1), 0 28px 56px -22px rgba(4, 110, 150, 0.32); }
.session-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.9375rem; }
.session-facts b { font-variant-numeric: tabular-nums; }
.cards {
  position: relative; /* keeps the screen-reader labels inside the scrolling row, so the page never gets wider */
  display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin-inline: calc(var(--gutter-l) * -1) calc(var(--gutter-r) * -1); padding-inline: var(--gutter-l) var(--gutter-r);
  padding-bottom: 6px; scrollbar-width: none;
}
.cards::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; display: grid; align-content: start; gap: 14px; padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--white); min-width: 0; }
.card-goal { padding: 18px 12px 10px; border-radius: 12px; background: var(--ink); }
.card h3 { font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.02em; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 99px; background: var(--sky-tint); color: var(--ink); font-size: 0.8125rem; font-weight: 600; }
.rows { display: grid; gap: 12px; margin: 0; }
.rows div { display: grid; gap: 2px; }
.rows dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.rows dd { margin: 0; line-height: 1.45; }
.status { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--ink-2); }
.status i { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); flex: none; }
.ico { width: 24px; height: 24px; flex: none; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8125rem; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 50%; }
/* Next session: glass over pink and blue light, with the same ribs as the hero */
.focus { position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; padding: 18px; color: var(--white);
  background: linear-gradient(160deg, #19A6DA, #0593C6 55%, #046E96); }
.focus::before { content: ""; position: absolute; z-index: -2; width: 95%; height: 75%; right: -38%; top: -34%; border-radius: 50%; transform: rotate(-18deg);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.2) 58%, transparent); filter: blur(16px); }
.focus::after { content: ""; position: absolute; z-index: -1; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(255, 255, 255, 0) 1px 11px, rgba(3, 60, 90, 0.1) 11px 13px); }
.focus-glass { display: grid; gap: 14px; padding: 18px 16px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.focus-title { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.92; }
.focus-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.focus-list li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.focus-list .ico { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.18); }
.focus-list b { display: block; font-size: 1.1875rem; line-height: 1.2; letter-spacing: -0.01em; }
.focus-list small { display: block; font-size: 0.9375rem; opacity: 0.9; }
/* the shot cards: one line to keep, one to work on */
.kv { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kv li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; line-height: 1.35; }
.kv .keep .ico { color: var(--sky-ink); }
.kv .fix .ico { color: var(--pink-press); }
.fineprint { font-size: 0.875rem; color: var(--ink-2); max-width: 36rem; }

/* This is what you get back: the real analysis, first after the hero */
.demo { background: var(--sky-tint); color: var(--ink); }
.demo-in { display: grid; gap: 18px; }
.demo .section-head { margin-bottom: 0; }
.demo-video { position: relative; margin: 0 auto; border-radius: 22px; overflow: hidden; aspect-ratio: 9 / 16; width: 100%; max-width: 24rem; background: #0A2A3A;
  box-shadow: 0 1px 2px rgba(8, 32, 44, 0.06), 0 8px 20px -8px rgba(8, 32, 44, 0.16), 0 36px 72px -28px rgba(4, 110, 150, 0.45); }
.demo-video video { width: 100%; height: 100%; object-fit: cover; }
.demo-video .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 56px; padding: 0 26px; border: 0; border-radius: 99px;
  background: var(--pink); color: var(--white); font: 700 1.0625rem var(--font); cursor: pointer; box-shadow: 0 14px 30px -12px rgba(216, 57, 149, 0.85); }
.points { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.points li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; font-size: 1.0625rem; }
.points .ico { color: var(--sky-ink); }
@media (min-width: 900px) {
  .demo-in { grid-template-columns: minmax(0, 22rem) 1fr; align-items: center; column-gap: 56px; }
  .demo .section-head { grid-column: 1 / -1; }
}

/* Help train Sweetspot */
.contribute { background: var(--sky-tint); }
.contribute-in { display: grid; gap: 18px; }
.contribute .section-head { margin-bottom: 0; }
.view { position: relative; margin: 0; max-width: 30rem; }
.view img { width: 100%; height: auto; border-radius: 18px; }
.view figcaption { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 99px; background: rgba(8, 32, 44, 0.78); color: var(--white); font-size: 0.8125rem; font-weight: 600; }
.needs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.needs li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; font-size: 1.0625rem; }
.needs .ico { color: var(--sky-ink); }
.contribute .btn-pink { max-width: 30rem; }
.contribute-text { display: grid; gap: 18px; align-content: center; min-width: 0; }
.contribute-text .fineprint { margin-top: -4px; }

/* Early tester */
.quote { display: grid; gap: 18px; max-width: 40rem; }
.quote-h { font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--sky-ink); }
.shot-n { color: var(--sky-ink); margin-right: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.quote blockquote { margin: 0; font-size: clamp(1.4rem, 5.6vw, 2rem); line-height: 1.25; letter-spacing: -0.02em; font-weight: 500; }
.quote blockquote.placeholder { color: var(--ink-2); font-style: italic; }
.draft-chip { justify-self: start; padding: 4px 10px; border-radius: 99px; background: #FFF4D6; color: #6B4A00; font-size: 0.8125rem; font-weight: 600; }
.who { display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--white); font-weight: 800; }
.who small { display: block; color: var(--ink-2); font-size: 0.875rem; }
.disclose { font-size: 0.875rem; color: var(--ink-2); }

/* Guides (the blog) */
.guides { display: grid; gap: 0; border-top: 1px solid var(--line); }
.guide { display: grid; grid-template-columns: 1fr; gap: 4px; align-items: center; padding-block: 18px; border-bottom: 1px solid var(--line); text-decoration: none; }
.guide b { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; }
.guide small { grid-column: 1; color: var(--ink-2); font-size: 0.875rem; }

/* Last call */
.lastcall { position: relative; isolation: isolate; overflow: hidden; color: var(--white);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, rgba(255, 255, 255, 0) 1px 11px, rgba(3, 60, 90, 0.1) 11px 13px), linear-gradient(180deg, #0593C6 0%, #04739E 55%, #035A7E 100%); }
.lastcall .wrap { display: grid; gap: 20px; padding-block: 72px; }
.lastcall h2 { font-size: clamp(2rem, 8vw, 3.25rem); line-height: 1; letter-spacing: -0.03em; }
.footer { padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 0.875rem; color: var(--ink-2); }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.footer nav { display: flex; gap: 18px; }

/* The upload sheet */
dialog.sheet {
  width: min(100%, 560px); max-width: 100%; max-height: 92svh; margin: auto auto 0; padding: 0; border: 0;
  border-radius: 24px 24px 0 0; background: var(--white); color: var(--ink); overflow: auto;
}
dialog.sheet::backdrop { background: rgba(4, 30, 42, 0.55); }
@media (min-width: 700px) { dialog.sheet { margin: auto; border-radius: 24px; } }
.sheet-in { display: grid; gap: 16px; padding: 22px var(--gutter-r) calc(22px + env(safe-area-inset-bottom, 0px)) var(--gutter-l); }
.sheet-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.sheet-head h2 { font-size: 1.625rem; letter-spacing: -0.02em; }
.x { width: 44px; height: 44px; margin: -8px -8px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.5rem; cursor: pointer; }
.rules { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rules li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.rules .ico { width: 36px; height: 36px; padding: 7px; border-radius: 11px; background: var(--sky-tint); color: var(--sky-ink); }
.rules b { display: block; font-size: 1rem; }
.rules span { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.4; }
.rules details { margin-top: 2px; }
.rules summary { display: inline-block; color: var(--sky-ink); font-weight: 600; cursor: pointer; list-style: none; }
.rules summary::-webkit-details-marker { display: none; }


@media (min-width: 900px) {
  .hero-copy { padding-block: 40px 64px; }
  .session { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
  /* the picture on the left, what to do on the right */
  .contribute-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: 56px; align-items: center; }
  .contribute .section-head { grid-column: 1 / -1; }
  .contribute .view { max-width: none; }
  .cards { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* under the hero canvas, and what stays if WebGL is missing: ribbed sky with the pink of the strike */
.hero-fallback {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 1px, rgba(255,255,255,0) 1px 9px, rgba(3,60,90,0.10) 9px 11px),
    radial-gradient(40% 30% at 70% 52%, rgba(216,57,149,0.85), rgba(216,57,149,0) 70%),
    radial-gradient(28% 36% at 74% 40%, rgba(8,40,86,0.85), rgba(8,40,86,0) 70%),
    linear-gradient(180deg, #19A6DA 0%, #0593C6 45%, #046E96 100%);
}

/* the field people never see: a bot that fills it is answered as if it worked, and nothing is stored */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn[disabled] { opacity: 0.7; cursor: progress; }
.sheet-in > p:not(.err):not(.fineprint) { color: var(--ink-2); }