/* ==============================================================
   Lattice — the secondary pages

   Privacy and the uninstall survey, in the story page's world. Layered ON TOP
   of story.css and never instead of it: the bar, the footer, the buttons and
   every token come from there, so these two pages cannot drift away from the
   page they hang off. This file adds only what the story page has no need for,
   which is long-form prose and one form.

   Carries the same V2 rules, and tests/story-rules.js now reads this file
   alongside story.css so that is enforced rather than remembered:
   depth from opacity and blur, never shadow. Two easing curves. One accent.
   ============================================================== */

/* ── Shared shell ───────────────────────────────────────────────────────── */

.page{
  max-width:min(760px,100%);
  margin:0 auto;
  padding:calc(56px + clamp(48px,9vw,110px)) var(--pad) clamp(60px,10vw,120px);
}

.eyebrow{
  margin:0 0 18px;
  font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--indigo);
}
.eyebrow span{opacity:.7;margin-right:8px}

.page h1{
  margin:0 0 14px;
  font-family:var(--serif);font-weight:300;font-optical-sizing:auto;
  font-size:clamp(31px,3.9vw,53px);line-height:1.06;letter-spacing:-.02em;
  color:var(--text);
}
.updated{
  margin:0;
  font:400 11.5px/1.6 var(--mono);color:var(--text-dim);
}

/* ── The summary card ───────────────────────────────────────────────────── */

/* The one raised surface on either page. Depth is the ground shifting and a
   hairline, exactly as the stages do it on the story page. */
.tldr{
  margin:44px 0 0;padding:24px 26px;
  background:var(--void-2);
  border:1px solid var(--hairline);border-radius:14px;
}
.tldr p{margin:0;font-size:15px;line-height:1.7;color:var(--text-dim)}
.tldr b{color:var(--text);font-weight:500}

/* ── Long-form prose ────────────────────────────────────────────────────── */

.prose{margin-top:52px}

.prose h2{
  margin:52px 0 14px;
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2.2vw,26px);line-height:1.25;letter-spacing:-.01em;
  color:var(--text);
}
/* The section number is the only mono on the page body, which is what makes it
   read as an index rather than as a heading that shouts. */
.prose h2 .n{
  flex:none;
  font:500 11px/1 var(--mono);letter-spacing:.14em;
  color:var(--indigo);
}

.prose p,.prose li{
  margin:0 0 16px;
  font-size:15.5px;line-height:1.75;color:var(--text-dim);
}
.prose b,.prose strong{color:var(--text);font-weight:500}
.prose ul{margin:0 0 16px;padding-left:20px}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--indigo)}

.prose a{color:var(--indigo);text-decoration:none;border-bottom:1px solid var(--indigo-a30)}
.prose a:hover{border-bottom-color:var(--indigo)}
.prose a:focus-visible{outline:1px solid var(--indigo);outline-offset:2px;border-radius:2px}

.back-home{
  display:inline-block;margin-top:44px;
  min-height:24px;
  font:500 12.5px/1.9 var(--sans);color:var(--text-dim);text-decoration:none;
  border-bottom:1px solid var(--hairline);
  transition:color .32s var(--ease-premium),border-color .32s var(--ease-premium);
}
.back-home:hover{color:var(--indigo);border-bottom-color:var(--indigo-a30)}
.back-home:focus-visible{outline:1px solid var(--indigo);outline-offset:3px;border-radius:3px}

/* ── The uninstall survey ───────────────────────────────────────────────── */

.sub{
  margin:18px 0 0;max-width:46ch;
  font-size:15.5px;line-height:1.7;color:var(--text-dim);
}

.bye-form{margin-top:48px}
.bye-form.hide{display:none}

.bye-q{
  margin:0 0 16px;display:block;
  font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.3;
  color:var(--text);
}

#reasons{display:flex;flex-direction:column;gap:9px}

.bye-opt{
  display:flex;align-items:center;gap:13px;width:100%;
  min-height:48px;padding:12px 16px;
  background:var(--void-2);
  border:1px solid var(--hairline);border-radius:11px;
  font:400 14.5px/1.45 var(--sans);color:var(--text-dim);text-align:left;
  cursor:pointer;
  transition:border-color .32s var(--ease-premium),color .32s var(--ease-premium);
}
.bye-opt:hover{border-color:var(--indigo-a30);color:var(--text)}
.bye-opt:focus-visible{outline:1px solid var(--indigo);outline-offset:2px}

/* The chosen one carries the accent; the rest carry none. One accent, used
   only where it means something. */
.bye-opt .dot{
  flex:none;width:11px;height:11px;border-radius:50%;
  border:1px solid var(--text-dim);
  transition:border-color .32s var(--ease-premium),background .32s var(--ease-premium);
}
.bye-opt.sel{border-color:var(--indigo-a30);color:var(--text)}
.bye-opt.sel .dot{border-color:var(--indigo);background:var(--indigo)}

.bye-note{
  display:block;width:100%;margin-top:12px;padding:14px 16px;
  min-height:104px;resize:vertical;
  background:var(--void-2);
  border:1px solid var(--hairline);border-radius:11px;
  font:400 14.5px/1.6 var(--sans);color:var(--text);
}
.bye-note::placeholder{color:var(--text-dim)}
.bye-note:focus-visible{outline:1px solid var(--indigo);outline-offset:2px;border-color:var(--indigo-a30)}

.bye-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:28px}

.bye-submit{
  min-height:44px;padding:12px 22px;
  background:var(--indigo-a12);
  border:1px solid var(--indigo-a30);border-radius:10px;
  font:500 13.5px/1 var(--sans);color:var(--indigo);
  cursor:pointer;
  transition:background .32s var(--ease-premium),color .32s var(--ease-premium);
}
.bye-submit:hover{background:var(--indigo-a30);color:var(--text)}
.bye-submit:focus-visible{outline:1px solid var(--indigo);outline-offset:2px}
.bye-submit:disabled{opacity:.55;cursor:default}

.bye-skip{
  min-height:24px;display:inline-flex;align-items:center;
  font:400 13px/1.8 var(--sans);color:var(--text-dim);text-decoration:none;
  border-bottom:1px solid var(--hairline);
}
.bye-skip:hover{color:var(--text)}
.bye-skip:focus-visible{outline:1px solid var(--indigo);outline-offset:3px;border-radius:3px}

/* Hidden until the script says otherwise. Not display:none on the FORM by
   default: with no JS the survey still renders and still submits nowhere,
   which is a page that does nothing rather than a page that is not there. */
.bye-thanks{display:none}
/* Kept from the page it replaced: the thank-you arrives rather than appearing.
   It is the one animation on either of these pages, on the approved curve, and
   it steps aside entirely when motion is reduced. */
.bye-thanks.show{display:block;animation:byeIn .6s var(--ease-premium) both}
@keyframes byeIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .bye-thanks.show{animation:none}
}
.bye-reinstall{
  display:inline-flex;align-items:center;gap:7px;margin-top:26px;
  min-height:44px;padding:12px 22px;
  background:var(--indigo-a12);
  border:1px solid var(--indigo-a30);border-radius:10px;
  font:500 13.5px/1 var(--sans);color:var(--indigo);text-decoration:none;
}
.bye-reinstall:hover{background:var(--indigo-a30);color:var(--text)}
.bye-reinstall:focus-visible{outline:1px solid var(--indigo);outline-offset:2px}