/* Pencil · live-surface scroll page.
   Theme tokens first (the rebrand), then the page's own markup. Nothing here
   restyles .sc-stage, .sc-copy, or any [data-sc-*] mechanism. */

:root {
  --sc-canvas:      #f3eee5;
  --sc-surface:     #fffdf9;
  --sc-ink:         #1c1a17;
  --sc-ink-soft:    #675f52;
  --sc-accent:      #23423a;
  --sc-accent-ink:  #fbf8f3;

  --sc-font-display: "Newsreader", Georgia, serif;
  --sc-font-text:    "IBM Plex Sans", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --sc-shadow-color: 32 25% 12%;
  /* paper casts faint shadows: the engine's elevation reads too heavy on a
     light warm ground, so the whole ramp is softened here */
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.05),
           0 3px 10px -4px hsl(var(--sc-shadow-color) / 0.05);
  --sc-e2: 0 1px 3px hsl(var(--sc-shadow-color) / 0.06),
           0 10px 26px -14px hsl(var(--sc-shadow-color) / 0.10);
  --sc-e3: 0 2px 6px hsl(var(--sc-shadow-color) / 0.06),
           0 20px 44px -20px hsl(var(--sc-shadow-color) / 0.12);
  --sc-r-sm: 7px;
  --sc-r-md: 11px;

  /* the brand's second material: amber, held to the product's own highlight
     role (a background tint, never text on paper) */
  --pd-amber: #e4a93c;
  --pd-amber-soft: rgba(228, 169, 60, 0.16);
  --pd-rule: rgba(28, 26, 23, 0.12);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sc-font-text);
  color: var(--sc-ink);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ------------------------------------------------------------- chrome -- */

.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; gap: var(--sc-4);
  padding: 0.55rem var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-surface) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pd-rule);
  font-size: var(--sc-t-sm);
}
.chrome a, .foot a, .foot__brand, .landfoot a { text-decoration: none; }
.chrome__brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.chrome__brand .mark { border-radius: 6px; }
.chrome__word { font-family: var(--sc-font-display); font-size: 1.12rem; letter-spacing: var(--sc-track-snug); }
.chrome__pill {
  padding: 0.18rem 0.7rem; border: 1px solid var(--pd-rule);
  border-radius: var(--sc-r-pill); background: var(--sc-surface);
  font-weight: 500; white-space: nowrap;
}
.chrome__demo, .chrome__status {
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: 0.02em; color: var(--sc-ink-soft); white-space: nowrap;
}
.chrome__status { margin-left: auto; font-variant-numeric: tabular-nums; }
.chrome__nav { display: inline-flex; align-items: center; gap: var(--sc-4); }
.chrome__signin { color: var(--sc-ink-soft); }
.chrome__signin:hover { color: var(--sc-ink); }
.chrome__cta {
  padding: 0.42rem 0.95rem; border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 500;
  transition: transform 140ms var(--sc-ease-out);
}
.chrome__cta:active { transform: translateY(1px); }

/* -------------------------------------------------------- act 1: sheet -- */

.act-week {
  padding-top: clamp(5.5rem, 10vw, 9rem);
  /* the pinned ask stage needs a viewport to arrive; full section padding on
     top of that is a near-empty screen, so the tail is cut short */
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.sheet {
  max-width: 46rem; margin-inline: auto;
  background: var(--sc-surface);
  border: 1px solid var(--pd-rule);
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e2);
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
}
.sheet__crumb {
  margin: 0 0 var(--sc-3);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.sheet__title {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-xl); line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug); text-wrap: balance;
}
.sheet__meta { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.sheet__statusrow {
  display: flex; justify-content: space-between; gap: var(--sc-4);
  margin-top: var(--sc-5); padding: var(--sc-3) 0;
  border-top: 1px solid var(--pd-rule); border-bottom: 1px solid var(--pd-rule);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  color: var(--sc-ink-soft); font-variant-numeric: tabular-nums;
}
.sheet__ready { color: var(--sc-accent); font-weight: 500; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: 0.3rem 0.8rem; padding: var(--sc-4) 0;
  border-bottom: 1px solid var(--pd-rule);
}
.rows li:last-child { border-bottom: 0; }
.rows input[type="checkbox"] {
  appearance: none; width: 1.05rem; height: 1.05rem; margin: 0;
  transform: translateY(0.15rem);
  border: 1.5px solid var(--sc-ink-soft); border-radius: 5px;
  background: var(--sc-surface); cursor: pointer;
  display: inline-grid; place-content: center;
  transition: border-color 140ms var(--sc-ease-out), background 140ms var(--sc-ease-out);
}
.rows input[type="checkbox"]:checked { border-color: var(--sc-accent); background: var(--sc-accent); }
.rows input[type="checkbox"]:checked::after {
  content: ""; width: 0.55rem; height: 0.32rem;
  border-left: 2px solid var(--sc-accent-ink); border-bottom: 2px solid var(--sc-accent-ink);
  transform: rotate(-45deg) translateY(-1px);
}
.rows .row__label { font-weight: 600; }
.rows .row__why { grid-column: 2; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.rows .row__state {
  grid-column: 3; grid-row: 1;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
.sheet__note { margin: var(--sc-4) 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); font-style: italic; }

/* ---------------------------------------------------------- act 2: ask -- */

.askstage { display: grid; place-items: center; padding: var(--sc-6) var(--sc-gutter); }
.ask { width: min(44rem, 100%); text-align: center; }
.ask__q {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-2xl); line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug); text-wrap: balance;
}
.ask__sub { margin: var(--sc-3) 0 var(--sc-6); color: var(--sc-ink-soft); }

.askfield {
  display: flex; gap: 0.5rem; align-items: stretch;
  background: var(--sc-surface); border: 1px solid var(--pd-rule);
  border-radius: var(--sc-r-md); padding: 0.45rem;
  box-shadow: var(--sc-e2);
  transition: box-shadow 180ms var(--sc-ease-out), border-color 180ms var(--sc-ease-out);
}
.askfield:focus-within { border-color: var(--sc-accent); box-shadow: var(--sc-e3); }
.askfield__input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  padding: 0.55rem 0.75rem; font-size: var(--sc-t-base); color: var(--sc-ink);
  caret-color: var(--sc-accent);
}
.askfield__input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 72%, transparent); }
.askfield__go {
  border: 0; appearance: none;
  padding: 0.55rem 1.1rem; border-radius: var(--sc-r-sm);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 500; font-size: var(--sc-t-sm); cursor: pointer; white-space: nowrap;
  transition: transform 130ms var(--sc-ease-out), opacity 130ms var(--sc-ease-out);
}
.askfield__go:active, .askfield__go.is-pressed { transform: scale(0.97); }

.chips {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem; margin: var(--sc-5) 0 0; padding: 0; min-height: 2rem;
}
.chips li {
  padding: 0.28rem 0.75rem; border-radius: var(--sc-r-pill);
  border: 1px solid var(--pd-rule); background: var(--sc-surface);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  color: var(--sc-ink); letter-spacing: 0.01em;
  opacity: 0; transform: translateY(6px) scale(0.97);
  transition: opacity 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out);
}
.chips li.is-on { opacity: 1; transform: none; }
.chips li b { font-weight: 500; color: var(--sc-accent); }

.ask__made { margin: var(--sc-5) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.ask__made strong { color: var(--sc-ink); font-weight: 600; }

.receipt {
  list-style: none; margin: var(--sc-4) auto 0; padding: 0;
  width: min(34rem, 100%); text-align: left;
}
.receipt li {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.8rem; border-radius: var(--sc-r-sm);
  font-size: var(--sc-t-sm);
  opacity: 0; transform: translateY(6px);
  transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out),
              background 200ms var(--sc-ease-out);
}
.receipt li.is-visible { opacity: 1; transform: none; }
.receipt li.is-done { background: var(--pd-amber-soft); }
.receipt .r__dot {
  width: 1rem; height: 1rem; flex: none; border-radius: 50%;
  border: 1.5px solid var(--sc-ink-soft); display: grid; place-content: center;
  font-size: 0.6rem; color: var(--sc-accent-ink);
}
.receipt li.is-drafting .r__dot { border-color: var(--sc-accent); border-style: dashed; animation: pd-spin 1.4s linear infinite; }
.receipt li.is-done .r__dot { border-color: var(--sc-accent); background: var(--sc-accent); }
.receipt li.is-done .r__dot::after {
  content: ""; width: 0.42rem; height: 0.24rem;
  border-left: 1.6px solid var(--sc-accent-ink); border-bottom: 1.6px solid var(--sc-accent-ink);
  transform: rotate(-45deg) translateY(-0.5px);
}
@keyframes pd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .receipt li.is-drafting .r__dot { animation: none; } }
.receipt .r__label { font-weight: 600; flex: none; }
.receipt .r__title { color: var(--sc-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt .r__state { margin-left: auto; flex: none; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.receipt li.is-done .r__state { color: var(--sc-accent); }

.ask__done { margin: var(--sc-5) 0 0; font-size: var(--sc-t-base); }
.ask__done strong { color: var(--sc-accent); }
.ask__hint {
  margin: var(--sc-6) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  opacity: 0; transition: opacity 300ms var(--sc-ease-out);
}
.ask__hint.is-on { opacity: 1; }

/* ------------------------------------------------------- act 3: review -- */

.act-review {
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem); /* the close pin brings its own viewport of entry */
}
.reviewgrid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
  max-width: 62rem; margin-inline: auto;
}
.doc {
  background: var(--sc-surface); border: 1px solid var(--pd-rule);
  border-radius: var(--sc-r-md); box-shadow: var(--sc-e3);
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
}
.doc__kicker {
  margin: 0 0 var(--sc-3); font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.doc__title {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-xl); line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug); text-wrap: balance;
}
.doc__meta { margin: var(--sc-2) 0 var(--sc-5); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.blocks { list-style: none; margin: 0; padding: 0; counter-reset: blk; }
.blocks li {
  display: grid; gap: 0.2rem; padding: var(--sc-4) 0;
  border-top: 1px solid var(--pd-rule);
}
.blocks__t { font-weight: 600; font-size: var(--sc-t-sm); }
.blocks__d { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }

.rail {
  display: grid; gap: var(--sc-4); align-content: start;
  position: sticky; top: 5rem;
}
.rail__h {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-lg); line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug);
}
.rail__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.btn {
  padding: 0.5rem 0.95rem; border-radius: var(--sc-r-sm);
  border: 1px solid var(--pd-rule); background: var(--sc-surface);
  font-size: var(--sc-t-sm); font-weight: 500; cursor: pointer;
  transition: border-color 140ms var(--sc-ease-out), transform 130ms var(--sc-ease-out);
}
.btn:hover { border-color: var(--sc-accent); }
.btn:active { transform: translateY(1px); }
.btn--quiet { border-color: transparent; color: var(--sc-ink-soft); }
.btn--quiet:hover { color: var(--sc-ink); border-color: var(--pd-rule); }

.gate {
  display: flex; gap: 0.8rem; align-items: flex-start;
  background: var(--sc-surface); border: 1px solid var(--pd-rule);
  border-radius: var(--sc-r-md); padding: var(--sc-4);
}
.gate__switch {
  flex: none; width: 2.1rem; height: 1.2rem; margin-top: 0.15rem;
  border-radius: var(--sc-r-pill); border: 1.5px solid var(--sc-ink-soft);
  position: relative; display: block;
}
.gate__switch i {
  position: absolute; top: 50%; left: 0.14rem; transform: translateY(-50%);
  width: 0.78rem; height: 0.78rem; border-radius: 50%;
  background: var(--sc-ink-soft);
}
.gate__line { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.55; }
.gate__line strong { color: var(--sc-ink); }
.rail__privacy {
  margin: 0; padding-top: var(--sc-4); border-top: 1px solid var(--pd-rule);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.55;
}

/* -------------------------------------------------------- act 4: close -- */

.closestage {
  display: grid; grid-template-rows: 1fr auto; place-items: center;
  padding: var(--sc-6) var(--sc-gutter) var(--sc-4);
}
.close { width: min(40rem, 100%); text-align: center; align-self: center; }
.close__for {
  margin: 0 0 var(--sc-3); font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.close__q {
  margin: 0 0 var(--sc-6); font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-2xl); line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug); text-wrap: balance;
}
.close__small { margin: var(--sc-5) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.close__signin {
  display: inline-block; margin-top: var(--sc-3);
  color: var(--sc-ink-soft); text-decoration: underline;
  text-underline-offset: 3px;
}
.close__signin:hover { color: var(--sc-ink); }

.foot {
  justify-self: stretch; display: flex; justify-content: space-between; align-items: center;
  gap: var(--sc-4); padding-top: var(--sc-4); border-top: 1px solid var(--pd-rule);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.foot__brand { display: inline-flex; align-items: center; gap: 0.45rem; }
.foot__brand .mark { border-radius: 4px; }
.foot__links { display: inline-flex; gap: var(--sc-4); }
.foot__links a:hover { color: var(--sc-ink); }

/* ------------------------------------------------------------ states -- */

:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ------------------------------------------------------------- phone -- */

@media (max-width: 700px) {
  .chrome { gap: 0.6rem; }
  .chrome__pill, .chrome__demo, .chrome__status { display: none; }
  .chrome__nav { margin-left: auto; }

  .ask__q, .close__q { font-size: var(--sc-t-xl); }

  .askfield { flex-direction: column; }
  .askfield__go { padding: 0.7rem 1.1rem; }

  .rows li { grid-template-columns: auto 1fr; }
  .rows .row__state { grid-column: 2; grid-row: auto; }

  .reviewgrid { grid-template-columns: 1fr; }

  .receipt .r__title { display: none; }

  .foot { flex-direction: column; gap: var(--sc-2); padding-bottom: 0.5rem; }
}