/* The home page's own shape: the switcher, the three stories, the scanner and the day.

   Ported from the approved mockup. The palette comes from styles.css, so these rules carry
   spacing and structure and never a color of their own. Only the home page loads this. */

/* ---- hero: the thing in three seconds ---- */
.hero{max-width:900px;margin:0 auto;padding:clamp(48px,7vh,80px) 0 clamp(32px,4vh,64px);text-align:center}
.hero-eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.hero h1{font-size:clamp(44px,6vw,70px);font-weight:700;letter-spacing:-.035em;line-height:1.06;margin:0 0 20px}
.hero .lead{font-size:clamp(18px,2.4vw,23px);color:var(--ink-soft);max-width:680px;margin:0 auto;line-height:1.45}

.switcher{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,3vw,36px);margin:clamp(28px,4vh,40px) auto 0;max-width:1040px;box-shadow:var(--shadow)}
.toggle-bar{display:inline-flex;background:#E8E8ED;padding:4px;border-radius:999px;margin-bottom:28px;user-select:none}
.toggle-bar button{font:inherit;font-size:14px;font-weight:600;padding:10px 22px;border:0;cursor:pointer;
  border-radius:999px;background:transparent;color:var(--muted);transition:background .35s cubic-bezier(.16,1,.3,1),color .35s}
.toggle-bar button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.12)}
/* The mark sits with the words and dims with them, so the unchosen side stays quiet. */
.toggle-bar .spark{font-size:.9em;opacity:.55;margin-left:1px}
.toggle-bar button[aria-selected="true"] .spark{opacity:1}
.switch-display{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.switch-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:26px 24px;display:flex;flex-direction:column;justify-content:space-between;min-height:186px}
.card-category{font-size:11.5px;text-transform:uppercase;font-weight:700;letter-spacing:.06em;
  color:var(--muted);margin-bottom:10px}
.phrase-main{font-size:22px;font-weight:600;line-height:1.28;letter-spacing:-.01em;
  margin-bottom:10px;text-wrap:balance}
.phrase-sub{font-size:14.5px;color:var(--ink-soft);line-height:1.5}
.status-badge{display:inline-block;margin-top:16px;font-size:11.5px;font-weight:600;
  padding:4px 10px;border-radius:999px;align-self:flex-start}
.badge-autopilot{background:#F2F2F7;color:var(--muted)}
.badge-conscious{background:#E8F7ED;color:var(--tofu-ink)}
/* The way into the whole wall, inside the box the three cards sit in rather than floating under
   it: it is the last line of the same thought, not a second offer. */
/* A press, not a sentence: as plain blue words it read as a note about the wall rather than the
   way to it. Quiet enough to stay below the three cards it follows. */
.switch-more{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.switch-more .btn{background:var(--surface);border-color:var(--line-strong);color:var(--ink);
  min-height:40px;padding:9px 18px;font-size:14px}
.switch-more .btn:hover{background:var(--sunk);border-color:var(--blue);color:var(--blue)}
@media(prefers-reduced-motion:reduce){.toggle-bar button{transition:none}}

/* ---- the name, in ten seconds ---- */
.story-strip{background:#FAFAFC;border-block:1px solid var(--line);padding:clamp(40px,6vh,56px) 0}
/* The heading gets a wider track than the prose: at the size the other sections are set in, on
   one line, it needs more room than a comfortable measure, and the site's h2 rule caps every
   heading at 20ch. */
.story-inner{max-width:960px;margin:0 auto;text-align:center}
/* One line, as the mockup has it: the 26ch cap broke the name onto a second line. */
.story-inner .quote-badge{font-size:35px;line-height:1;margin-bottom:8px}
/* The plain face, as the mockup has it: this is the one place on the page where the words are
   doing the work, and the display serif made a short line look decorative. */
.story-inner h2{font-family:var(--sans);font-size:clamp(21px,2.2vw,24px);font-weight:600;
  letter-spacing:-.02em;line-height:1.25;margin:0 auto 12px;max-width:none}
.story-inner p{font-size:16.5px;color:var(--ink-soft);line-height:1.6;margin:0 auto 18px;max-width:720px}
.story-inner em{font-style:italic;color:var(--ink)}
/* The swapped line is the one that lands, so it is set apart from the line it replaces. */
.story-inner strong em{font-weight:700}
.story-take{display:inline-block;font-weight:600;color:var(--ink);font-size:15px;background:var(--surface);
  border:1px solid var(--line);padding:9px 18px;border-radius:999px;box-shadow:var(--shadow)}

/* ---- the scanner, in the dark ---- */
.scanner{background:#000;color:#fff;border-radius:28px;max-width:960px;margin:0 auto clamp(48px,7vh,80px);
  padding:clamp(36px,5vw,60px) clamp(20px,3vw,40px);text-align:center}
.scanner h2{font-size:clamp(28px,3.5vw,40px);font-weight:700;letter-spacing:-.03em;
  max-width:20ch;margin:0 auto 12px}
.scanner>p{color:#86868B;font-size:16.5px;max-width:580px;margin:0 auto 28px}
.scanner-box{background:#1C1C1E;border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);
  padding:20px;max-width:680px;margin:0 auto;text-align:left}
.scanner-box textarea{width:100%;min-height:88px;background:transparent;border:0;color:#fff;
  font:inherit;font-size:16px;line-height:1.5;outline:none;resize:vertical}
.scanner-box textarea::placeholder{color:#636366}
.scanner-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.08);padding-top:16px;margin-top:8px}
.privacy-tag{font-size:12px;color:#8E8E93}
/* The example and the button, together at the end of the bar. */
.scan-acts{display:flex;align-items:center;gap:16px}
.linkish.light{color:#C7C7CC;font-size:13.5px;font-weight:600;text-decoration:underline;
  text-underline-offset:3px}
.linkish.light:hover{color:#fff}
.btn-light{background:#fff;color:#000;border:0;padding:9px 18px;border-radius:999px;
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.btn-light:hover{opacity:.9}
.scan-out{max-width:680px;margin:20px auto 0;text-align:left;display:grid;gap:14px}
.scan-count{font-size:17px;color:#fff}
.scan-count b{color:#34C759}
/* The report: which phrases, how often each, and what each one pictures. A row is a press, because
   every line here has a card behind it. */
.rep-head{font-size:18px;color:#fff;margin-bottom:14px}
.rep-head b{color:#34C759;font-weight:700}
.rep-list{list-style:none;display:grid;gap:2px;margin:0 0 14px;padding:0}
.rep-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;width:100%;text-align:left;
  font:inherit;color:inherit;background:none;border:0;border-radius:10px;padding:10px 12px;cursor:pointer}
.rep-row:hover{background:rgba(255,255,255,.06)}
.rep-n{font-size:14px;font-weight:700;color:#E05D38;font-variant-numeric:tabular-nums;
  padding-top:1px;white-space:nowrap}
.rep-phrase{font-size:15.5px;font-weight:600;color:#fff}
.rep-pic{grid-column:2;font-size:13.5px;line-height:1.45;color:#8E8E93}
.rep-foot{font-size:13.5px;line-height:1.5;color:#8E8E93;max-width:52ch}
.scan-text{font-size:15px;line-height:1.75;color:#C7C7CC;white-space:pre-wrap}
.scan-text mark{background:rgba(224,93,56,.28);color:#fff;border-radius:4px;padding:1px 4px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.scan-chips{display:flex;flex-wrap:wrap;gap:8px}
.scan-chips span{font-size:12.5px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:5px 12px;color:#C7C7CC}
.scan-chips b{color:#fff;font-weight:600}

/* ---- the day ---- */
/* It is over on the 3rd, so it is a line in the box the page opens with rather than a section of
   its own: the one warm color on a page of grays, which is what makes it the thing you notice. */
.switch-day{margin-top:10px;font-size:14px;line-height:1.5;color:var(--potato-dark)}
.switch-day b{font-weight:700}
.switch-day .btn{margin-left:10px;vertical-align:baseline;white-space:nowrap;
  border-color:color-mix(in srgb,var(--potato) 45%,transparent);color:var(--potato-dark)}
.switch-day .btn:hover{border-color:var(--potato);background:color-mix(in srgb,var(--potato) 10%,var(--surface))}

@media(max-width:860px){
  .switch-display,.triptych,.two-up{grid-template-columns:1fr}
  .hero{padding-top:32px}
}
/* Two labels in one pill: on a narrow phone the fixed padding pushed them past the width and each
   one broke in half, so the padding gives way before the words do. */
@media(max-width:420px){
  .toggle-bar{display:flex;width:100%}
  .toggle-bar button{flex:1;padding:10px 8px;font-size:13px;white-space:nowrap}
}

/* The one thing the scanner asks permission for, under the box rather than crowding the bar. */
/* Two questions, one row, wrapping to two on a narrow screen. */
.scanner .consents{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:14px}
.scanner .consent{display:inline-flex;gap:8px;align-items:center;max-width:none;cursor:pointer;
  line-height:1.45;margin:14px auto 0;text-align:left}
.scanner .consent input{accent-color:#fff;flex:0 0 auto}
@media(max-width:760px){.scanner .consents{flex-direction:column;align-items:center}
  .scanner .consent{align-items:flex-start;max-width:42ch;text-align:left}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- the study, on the home page ---- */
/* The mockup's shape: what we asked on the left, the size of it on the right, the way in
   underneath. The four figures are the study's scale and not its finding, because the page that
   asks the reader to guess is one press away and a spoiler here would answer it for them. */
.study{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3.4vw,40px);max-width:1000px;margin:0 auto}
.study-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);align-items:start}
/* The shared eyebrow is centered for a section heading; inside the card it labels a column that
   reads down the left. */
.study-say .sec-eyebrow{text-align:left;margin-bottom:10px}
.study-say h3{font-size:clamp(21px,2.4vw,26px);font-weight:700;letter-spacing:-.02em;
  line-height:1.2;margin:0 0 14px;max-width:16ch}
.study-say p{font-size:15.5px;color:var(--ink-soft);line-height:1.6;margin:0 0 14px}
.study-take{font-weight:600;color:var(--ink)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:20px 18px;box-shadow:var(--shadow)}
.tile b{display:block;font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.03em;
  line-height:1.05;margin-bottom:8px;font-variant-numeric:tabular-nums}
.tile span{font-size:13px;color:var(--ink-soft);line-height:1.45;display:block}
.study-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:clamp(24px,3vw,36px);padding-top:20px}
.study-foot p{font-size:14.5px;color:var(--ink-soft);margin:0}
@media(max-width:860px){
  .study-grid{grid-template-columns:1fr}
  .study-say h3{max-width:none}
  .study-foot{flex-direction:column;align-items:flex-start}
}
@media(max-width:420px){.tiles{grid-template-columns:1fr}}

/* ---- the day, in the intro ---- */
/* It was a line under the cards, which is not the intro, and the strip above it said the same
   sentence. One place, with the room to be read: the day, what it asks, and the way in. */
.today{max-width:640px;margin:clamp(22px,3vh,30px) auto 0;padding:clamp(18px,2.6vw,24px);
  text-align:center;border-radius:var(--r);
  background:color-mix(in srgb,var(--potato) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--potato) 26%,transparent)}
/* Balanced, because the occasion ends in a hyphenated word and the default break put the
   second half of it alone on the next line. */
.today-when{font-size:clamp(16px,2vw,19px);font-weight:600;color:var(--potato-dark);margin:0;
  text-wrap:balance}
.today-when b{font-weight:800}
.today-ask{font-size:14.5px;line-height:1.5;color:var(--ink-soft);margin:8px auto 16px;max-width:52ch}
.today .btn{background:var(--potato);color:#fff;border-color:var(--potato)}
.today .btn:hover{background:var(--potato-dark);border-color:var(--potato-dark)}