/* The Pen & Post — the whole customer-facing surface.
 *
 * Cotton stationery: the paper is the subject and the ink is a guest on it.
 * Navy and a dove blue do nearly everything; sage lines an envelope now and
 * then; gilt appears only as a hairline, the way foil actually would.
 *
 * Written as real classes rather than utility soup because almost none of this
 * is expressible in Tailwind defaults, and the parts that matter -- the inset
 * bevel, the paper fibre, the type scale -- want naming.
 *
 * Marketing, sign-in, onboarding and the signed-in application all set in this.
 * Admin and fulfillment are internal tools and stay on Tailwind and Inter.
 */

/* Marketing loads Tailwind ahead of this file and inherits its preflight; the
 * sign-in, onboarding and application shells run on this file alone. The one
 * preflight rule the rest of this stylesheet assumes therefore has to be stated
 * here: without it `width: 100%` on a padded input measures the content box, and
 * every field on those shells overhangs the card it sits in. */
*,
*::before,
*::after { box-sizing: border-box; }

:root {
  --paper:      #F4F1E8;
  --paper-lit:  #FBF9F5;
  --paper-deep: #EDE8DC;
  --ink:        #22304C;
  --ink-soft:   #5A6580;
  --ink-faint:  #8D93A1;
  --rule:       #DCD5C7;
  --rule-firm:  #C6BCA8;
  --haze:       #8FA6C4;
  --haze-wash:  #E7ECF3;
  --sage:       #9FB3A4;
  --gilt:       #AF9350;

  --grain-opacity: 0.05;
  --grain-blend: multiply;

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --text:    "Karla", "Helvetica Neue", Arial, sans-serif;

  --measure: 34rem;
  --pad: clamp(1.25rem, 5vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #14171E;
    --paper-lit:  #1C202A;
    --paper-deep: #0F1218;
    --ink:        #E8E4D8;
    --ink-soft:   #A6ABB6;
    --ink-faint:  #7C818C;
    --rule:       #2C313C;
    --rule-firm:  #3D4350;
    --haze:       #9DB4D2;
    --haze-wash:  #1B222E;
    --sage:       #A7BCAC;
    --gilt:       #C9AC69;
    --grain-opacity: 0.06;
    --grain-blend: soft-light;
  }
}

:root[data-theme="dark"] {
  --paper:      #14171E;
  --paper-lit:  #1C202A;
  --paper-deep: #0F1218;
  --ink:        #E8E4D8;
  --ink-soft:   #A6ABB6;
  --ink-faint:  #7C818C;
  --rule:       #2C313C;
  --rule-firm:  #3D4350;
  --haze:       #9DB4D2;
  --haze-wash:  #1B222E;
  --sage:       #A7BCAC;
  --gilt:       #C9AC69;
  --grain-opacity: 0.06;
  --grain-blend: soft-light;
}

body.paper {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Fibre, not grunge. Generated noise at a few percent reads as cotton rather
   than as texture -- you should notice the paper, never the effect. */
body.paper::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 1; }

.label {
  font-family: var(--text);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-block;
}
.label-haze { color: var(--haze); }
.label-sage { color: var(--sage); }
.label-gilt { color: var(--gilt); }
/* The hero opens on a sentence, not a category tag like "Pricing" or "Plans",
   and it was set at the size and tone a tag wants. Tracking eases back as the
   size goes up -- the letters get meaningfully bigger while the line stays about
   as long, which is the point: it should read louder without running wider. The
   faintest ink is right for "PRICING" and wrong for a line carrying the premise,
   so this takes the one above it. */
.label-lead { font-size: 0.78rem; letter-spacing: 0.2em; color: var(--ink-soft); }

.gilt-rule { width: 2.5rem; height: 1px; background: var(--gilt); border: 0; margin: 1.5rem 0; }

/* ---------- masthead ---------- */

.bar { border-bottom: 1px solid var(--rule); background: var(--paper-lit); position: relative; z-index: 2; }
.bar .inner {
  max-width: 68rem; margin: 0 auto; padding: 0 var(--pad);
  min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.wordmark { font-family: var(--display); font-size: 1.5rem; font-weight: 500; text-decoration: none; color: var(--ink); }
.bar nav { display: none; gap: 1.75rem; }
.bar nav a { font-size: 0.85rem; color: var(--ink-soft); text-decoration: none; }
.bar nav a:hover, .bar nav a[aria-current] { color: var(--ink); }
@media (min-width: 56rem) { .bar nav { display: flex; } }
.bar .end { display: flex; gap: 0.9rem; align-items: center; }
.bar .end .signin { font-size: 0.85rem; color: var(--ink-soft); text-decoration: none; }
.bar .end .signin:hover { color: var(--ink); }

/* ---------- type ---------- */

h1.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.5vw, 4.5rem);
  line-height: 1.05;
  margin: 1.25rem 0 0;
  max-width: 14ch;
  text-wrap: balance;
}
/* Differentiated by italic and ink rather than weight, now the base is 400. */
h1.display em { font-style: italic; font-weight: 400; color: var(--ink-soft); }

h2.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.85rem, 4.2vw, 2.7rem);
  line-height: 1.15;
  margin: 0.75rem 0 0;
  max-width: 22ch;
  text-wrap: balance;
}

h3.display { font-family: var(--display); font-weight: 600; font-size: 1.25rem; margin: 0 0 0.5rem; line-height: 1.3; }

.standfirst { font-size: 1.05rem; line-height: 1.75; color: var(--ink-soft); max-width: var(--measure); margin: 0; }
.standfirst strong { color: var(--ink); font-weight: 600; }
/* The hero opens on the premise and then explains the mechanics, so a lede can
   precede a standfirst. The standfirst is otherwise flush by design. */
.lede + .standfirst { margin-top: 1.25rem; }

.lede { max-width: var(--measure); color: var(--ink-soft); margin: 1.25rem 0 0; }
.lede em { font-family: var(--display); font-style: italic; font-size: 1.15em; color: var(--ink); }

.prose { max-width: var(--measure); color: var(--ink-soft); }
.prose p { margin: 0 0 1.15rem; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

.footnote { margin-top: 1.75rem; font-size: 0.87rem; color: var(--ink-faint); max-width: 46rem; }
.aside-note { margin-top: 1.25rem; font-size: 0.85rem; color: var(--ink-faint); }

a { color: var(--ink); text-decoration-color: var(--haze); text-underline-offset: 4px; }

/* ---------- buttons ---------- */

.btn {
  font-family: var(--text);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  /* Stated rather than inherited: a `<button>` takes the UA's `normal` where an
     `<a>` takes the body's, so the same class on the two of them comes out two
     different heights. 1.7 is the body's, which is the height every button on
     the site is already drawn at. */
  line-height: 1.7;
  padding: 0.95rem 1.85rem;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper-lit);
  text-decoration: none; display: inline-block; cursor: pointer;
}
.btn:hover { background: transparent; color: var(--ink); }
.btn-quiet { background: transparent; color: var(--ink-soft); border-color: var(--rule-firm); }
.btn-quiet:hover { color: var(--ink); border-color: var(--ink); }
.btn-sm { padding: 0.7rem 1.2rem; }
.btn-block { display: block; text-align: center; }
a:focus-visible, .btn:focus-visible, button:focus-visible { outline: 1px solid var(--haze); outline-offset: 4px; }

/* `button_to` posts through a generated form, and a form is a block: the button
   inside it is an inline-block sitting on that form's own strut, so it aligns to
   a text baseline set at the body's size rather than to the row it appears in.
   Anything smaller than the strut then rides low beside its neighbours -- the
   sign-out in the masthead by two and a half pixels, Pause beside View and Edit
   for the same reason. Flex takes the strut out of it, leaving a box the height
   of its button that the surrounding row can align like any other control. */
form.button_to { display: flex; margin: 0; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ---------- hero ---------- */

.hero { display: grid; gap: clamp(2.5rem, 5vw, 4rem); padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 3rem); align-items: center; }
@media (min-width: 60rem) { .hero { grid-template-columns: 1.05fr 0.95fr; } }

/* The bevel a card carries: a hairline held well inside the edge. */
.plate { position: relative; background: var(--paper-lit); border: 1px solid var(--rule-firm); padding: 2.25rem; }
.plate::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--rule); pointer-events: none; }
.plate > * { position: relative; }

.kit { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.4rem; }
.kit li { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; align-items: start; }
.kit .numeral { font-family: var(--display); font-style: italic; font-size: 1.35rem; color: var(--haze); line-height: 1.2; }
.kit h3 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 0 0 0.15rem; }
.kit p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; }

/* Was a rotated navy tag hung off the corner. It overflowed its own background,
   collided with the plate's inner bevel, and read as a sticker -- a product-page
   device, not something a piece of stationery would ever carry. A printed note at
   the foot of the card, under a hairline, is what this actually wants to be, and
   it cannot break at any width. */
.plate-note {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- sections ---------- */

.section { padding: clamp(3.5rem, 7vw, 5rem) 0 0; }
.band { background: var(--paper-lit); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: clamp(2rem, 5vw, 3.5rem); }
.band .wrap { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }

.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.head-row a { font-size: 0.85rem; color: var(--ink-soft); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.card { background: var(--paper); border: 1px solid var(--rule); padding: 1.75rem 1.5rem; }
.card p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.6; }
.band .card { background: var(--paper); }

/* Ordered steps, where the order is real information. */
.steps { list-style: none; counter-reset: step; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 2rem; }
.steps li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1.25rem; align-items: start; }
.steps li::before {
  counter-increment: step; content: counter(step, lower-roman);
  font-family: var(--display); font-style: italic; font-size: 1.6rem; color: var(--haze); line-height: 1;
}
.steps p { margin: 0; color: var(--ink-soft); max-width: var(--measure); }

.qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem 3rem; margin-top: 2.5rem; }
.qa p { margin: 0.4rem 0 0; font-size: 0.94rem; color: var(--ink-soft); }

/* ---------- testimonial ---------- */

/* One quote, presented as one. No card drawn around it, no portrait, and no
   oversized decorative quotation mark -- that last is the sticker problem the
   plate-note above ran into, a device off a product page rather than anything a
   printed page would do. A three-across grid holding a single entry would only
   advertise the number, so there is no grid either.

   What marks it as a second voice is the face: the one piece of body copy on the
   site set in the display serif, which is the signal a pulled quote gets in
   print. Nothing encloses it, so it reads as open paper between the band above
   and the sections below, both of which are bounded. Takes .section for its
   padding rather than restating it.

   Because the face does that work, the size does not have to, and the first
   pass proved it by trying: at 1.7rem the quote ran eight lines and landed
   heavier than the headings it sits between, which reads as a second headline
   rather than as somebody talking. This sits deliberately in the gap -- clearly
   above the body copy around it, clearly below h2.display -- and the measure
   comes in with it, because a quote that spans the full column is a page of its
   own however it is set. */
.testimonial figure { margin: 0; max-width: 42rem; }
.testimonial .gilt-rule { margin-top: 0; }

.testimonial blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink);
  /* Four sentences, so `pretty` rather than the `balance` the headings take.
     Balance evens every line of a block and browsers cap it at a few lines
     anyway; this only wants its last line kept off a single word. */
  text-wrap: pretty;
}
.testimonial blockquote p { margin: 0; }

.testimonial figcaption { margin-top: 1.5rem; font-size: 0.85rem; color: var(--ink-faint); }
.testimonial figcaption .name { color: var(--ink-soft); font-weight: 600; }

/* ---------- plans ---------- */

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.plan { background: var(--paper-lit); border: 1px solid var(--rule); padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 0.3rem; }
.plan.featured { border-color: var(--haze); background: var(--haze-wash); }
.plan .name { font-family: var(--display); font-weight: 600; font-size: 1.35rem; }
.plan .price { font-family: var(--display); font-weight: 400; font-size: 3rem; line-height: 1; margin: 0.6rem 0 0; font-variant-numeric: tabular-nums; }
.plan .price sup { font-family: var(--text); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--ink-faint); vertical-align: super; }
.plan .meta { font-size: 0.87rem; color: var(--ink-soft); }
.plan .pick { margin-top: auto; padding-top: 1.4rem; display: grid; gap: 0.5rem; }
.plan .pick .alt { font-size: 0.78rem; color: var(--ink-faint); text-align: center; }

/* ---------- notice ---------- */

.notice { border-left: 2px solid var(--sage); background: var(--paper-lit); padding: 1.25rem 1.5rem; margin-top: 2rem; max-width: 46rem; }
.notice p { margin: 0; font-size: 0.94rem; color: var(--ink-soft); }
.notice p + p { margin-top: 0.6rem; }

/* ---------- footer ---------- */

/* The margin and the hairline were the colophon's until it was removed; the page
   still has to close on something. */
.site-footer { position: relative; z-index: 1; margin-top: clamp(3.5rem, 7vw, 5rem); border-top: 1px solid var(--rule-firm); }
.site-footer .wrap { padding-top: 1.75rem; padding-bottom: 3rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-size: 0.82rem; color: var(--ink-faint); }
.site-footer a { color: var(--ink-faint); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer .set { margin-left: auto; font-family: var(--display); font-style: italic; font-size: 1rem; }

/* ---------- forms and the signed-out shell ---------- */

.auth-shell { min-height: 100vh; display: grid; align-content: center; justify-items: center; padding: clamp(2rem, 6vw, 4rem) var(--pad); position: relative; z-index: 1; }
.auth-card { width: 100%; max-width: 28rem; }
.auth-head { text-align: center; margin-bottom: 1.75rem; }
.auth-head .mark { color: var(--ink); }
.auth-head h1 { font-family: var(--display); font-weight: 400; font-size: 2.1rem; line-height: 1.15; margin: 1rem 0 0.4rem; }
.auth-head p { margin: 0; font-size: 0.94rem; color: var(--ink-soft); }
.auth-alt { margin-top: 1.5rem; text-align: center; font-size: 0.88rem; color: var(--ink-soft); }
.auth-alt a { color: var(--ink); }
.auth-back { margin-top: 1.75rem; text-align: center; font-size: 0.8rem; }
.auth-back a { color: var(--ink-faint); text-decoration: none; }
.auth-back a:hover { color: var(--ink); }

.form-stack { display: grid; gap: 1.15rem; }
/* `align-content: start` so a field keeps its own height beside a taller one.
   Without it the auto rows stretch to the row, and a plain field standing next
   to a hinted one grows a tall box with its label floating away above it. */
.field { display: grid; gap: 0.4rem; align-content: start; }
.field > label {
  font-size: 0.63rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-faint);
}
.field input {
  font-family: var(--text); font-size: 1rem; line-height: 1.4;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--rule-firm);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
  width: 100%;
}
.field input::placeholder { color: var(--ink-faint); }
.field input:focus { outline: none; border-color: var(--haze); box-shadow: 0 0 0 1px var(--haze); }
.field .hint { font-size: 0.78rem; color: var(--ink-faint); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 26rem) { .field-pair { grid-template-columns: 1fr; } }

.errors { border-left: 2px solid var(--gilt); background: var(--paper); padding: 0.9rem 1.1rem; margin-bottom: 1.5rem; }
.errors p { margin: 0 0 0.35rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.errors ul { list-style: disc; margin: 0; padding-left: 1.1rem; font-size: 0.9rem; color: var(--ink-soft); }

.flash-note { border-left: 2px solid var(--sage); background: var(--paper); padding: 0.85rem 1.1rem; margin-bottom: 1.5rem; font-size: 0.92rem; color: var(--ink-soft); }
.flash-note.is-alert { border-left-color: var(--gilt); }

/* ---------- onboarding ---------- */

.onboarding-shell { max-width: 42rem; margin: 0 auto; padding: 0 var(--pad) 4rem; position: relative; z-index: 1; }

.progress { display: flex; gap: 0.6rem; list-style: none; margin: 2.25rem 0 2.75rem; padding: 0; }
.progress li { flex: 1; }
.progress .tick { height: 1px; background: var(--rule-firm); }
.progress li.done .tick, .progress li.here .tick { background: var(--ink); height: 2px; }
.progress li.here .tick { background: var(--haze); }
.progress .name { display: block; margin-top: 0.6rem; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.progress li.here .name { color: var(--ink); }

.step-head h1 { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.12; margin: 0; }
.step-head p { margin: 0.9rem 0 0; color: var(--ink-soft); max-width: var(--measure); }

.field select, .field textarea {
  font-family: var(--text); font-size: 1rem; line-height: 1.4;
  padding: 0.8rem 0.9rem; border: 1px solid var(--rule-firm);
  background: var(--paper); color: var(--ink); border-radius: 0; width: 100%;
}
.field select:focus, .field textarea:focus { outline: none; border-color: var(--haze); box-shadow: 0 0 0 1px var(--haze); }
.field-row { display: grid; gap: 1.15rem; }
@media (min-width: 34rem) { .field-row.two { grid-template-columns: 1fr 1fr; } .field-row.three { grid-template-columns: 1fr 1fr 1fr; } }
.field-row.address { grid-template-columns: 1fr; }
@media (min-width: 34rem) { .field-row.address { grid-template-columns: 3fr 1fr 2fr; } }

/* An override folded away: one quiet line among the fields until you open it,
   and an ordinary field once you have. The left rule marks it as an aside so
   the thing inside doesn't read as another blank someone forgot to fill in. */
.reveal { border-left: 1px solid var(--rule-firm); padding-left: 1rem; }
.reveal > summary {
  display: flex; align-items: baseline; gap: 0.55rem;
  font-size: 0.85rem; color: var(--ink-soft);
  cursor: pointer; list-style: none;
}
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary::before { content: "+"; color: var(--ink-faint); font-size: 0.95rem; line-height: 1; }
.reveal[open] > summary::before { content: "\2212"; }
.reveal > summary:hover { color: var(--ink); }
.reveal > summary:focus-visible { outline: 1px solid var(--haze); outline-offset: 4px; }
.reveal-body { margin-top: 0.9rem; }

.step-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.step-actions .back { font-size: 0.85rem; color: var(--ink-faint); text-decoration: none; }
.step-actions .back:hover { color: var(--ink); }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-top: 2rem; }
.choice { background: var(--paper-lit); border: 1px solid var(--rule); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.25rem; text-align: center; }
.choice.suggested { border-color: var(--haze); background: var(--haze-wash); }
.choice .name { font-family: var(--display); font-weight: 600; font-size: 1.3rem; }
.choice .price { font-family: var(--display); font-weight: 400; font-size: 2.6rem; line-height: 1; margin: 0.5rem 0 0; font-variant-numeric: tabular-nums; }
.choice .price sup { font-family: var(--text); font-size: 0.65rem; letter-spacing: 0.1em; color: var(--ink-faint); vertical-align: super; }
.choice .meta { font-size: 0.85rem; color: var(--ink-soft); }
.choice .buy { margin-top: auto; padding-top: 1.25rem; display: grid; gap: 0.45rem; }
.choice .buy form { margin: 0; }
.choice .buy .btn { width: 100%; }

/* ---------- the signed-in application ----------
 *
 * Same paper, same ink, but this is a surface someone works on rather than reads
 * once, so it runs tighter than the marketing pages: smaller type, less air, the
 * serif kept for headings and left off the rows. Nothing here is a card with a
 * drop shadow -- a panel is a hairline box on lit paper, and depth comes from the
 * paper changing tone, the way a printed form does.
 */

.app-bar .inner { flex-wrap: wrap; gap: 0 1.75rem; min-height: 4rem; justify-content: flex-start; }
.app-bar .wordmark { font-size: 1.3rem; display: flex; align-items: center; gap: 0.55rem; }

/* The marketing bar hides its nav on small screens behind a "Sign in" button.
   Here the nav is the only way around, so it drops to its own row instead. */
.app-bar nav {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  order: 3; width: 100%;
  margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--rule);
}
.app-bar nav a { padding-bottom: 0.15rem; border-bottom: 1px solid transparent; }
.app-bar nav a[aria-current] { color: var(--ink); border-bottom-color: var(--gilt); }
@media (min-width: 54rem) {
  .app-bar nav { order: 0; width: auto; margin: 0 auto 0 0; padding-top: 0; border-top: 0; }
}
/* Two rows need the breathing room a single row got from min-height. */
@media (max-width: 53.99rem) {
  .app-bar .inner { padding-top: 0.9rem; padding-bottom: 0.9rem; }
}

.app-bar .end { margin-left: auto; gap: 1rem; }
.app-bar .who { font-size: 0.8rem; color: var(--ink-soft); }
.app-bar .signout {
  font-family: var(--text); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink-faint);
}
.app-bar .signout:hover { color: var(--ink); }

/* ---------- viewing as ----------
 *
 * Above the masthead for as long as an admin is inside somebody else's account.
 * A slug line rather than the coloured bar this usually gets: everything on this
 * surface is paper and hairlines, and a shouting strip would read as part of the
 * product rather than as a note pinned over it. The gilt rule and the one gilt
 * word are the palette's whole attention budget, spent here because the failure
 * is quiet -- you forget whose screen this is and read their dates as your own.
 */

.viewing-as { background: var(--paper-deep); border-bottom: 1px solid var(--gilt); position: relative; z-index: 3; }
.viewing-as .inner {
  max-width: 68rem; margin: 0 auto; padding: 0.55rem var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem;
  font-size: 0.85rem; color: var(--ink-soft);
}
.viewing-as .who { color: var(--ink-faint); }
.viewing-as form { margin: 0 0 0 auto; }
.viewing-as .stop {
  font-family: var(--text); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  background: none; border: 1px solid var(--rule-firm); color: var(--ink-soft);
  padding: 0.35rem 0.75rem; cursor: pointer;
}
.viewing-as .stop:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- page shell ---------- */

/* The flash sits in the layout, above whatever the page yields, and the two must
   not stack their top padding on each other. */
.flash-slot { max-width: 62rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3rem) var(--pad) 0; position: relative; z-index: 1; }
.flash-slot > :last-child { margin-bottom: 0; }
.flash-slot + .sheet { padding-top: 1.5rem; }

.sheet { max-width: 62rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3rem) var(--pad) 5rem; position: relative; z-index: 1; }
.sheet.narrow { max-width: 46rem; }

.sheet-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; }
.sheet-head h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem); line-height: 1.1; margin: 0;
}
.sheet-head .sub { margin: 0.4rem 0 0; font-size: 0.94rem; color: var(--ink-soft); }
.sheet-head .end { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* Everything stacked directly on the sheet gets the same gap, so no view has to
   remember one. Panels inside a .columns grid are not direct children and keep
   their tops aligned.

   Hidden inputs are excluded because Rails writes its own: `authenticity_token`
   opens every form and `_method` opens every `button_to`, and a hidden input is
   still a sibling. Without the exclusion a `button_to` -- one form, one button,
   two hidden inputs -- reads as a stack and drops its button a full row below
   whatever it sits beside. */
.sheet > * + *,
.sheet form > *:not([type="hidden"]) + *:not([type="hidden"]) { margin-top: 1.5rem; }
.sheet > .sheet-head + * { margin-top: 2rem; }

.back-link { display: inline-block; margin-bottom: 1.25rem; font-size: 0.8rem; color: var(--ink-faint); text-decoration: none; }
.back-link:hover { color: var(--ink); }

/* ---------- panels ---------- */

.panel { background: var(--paper-lit); border: 1px solid var(--rule); }

.panel-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 1rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--rule);
}
.panel-head h2 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; margin: 0; }
.aside { font-size: 0.82rem; color: var(--ink-faint); }

.panel-body { padding: 1.4rem 1.5rem; }
.panel-body > :first-child { margin-top: 0; }
.panel-body > :last-child { margin-bottom: 0; }
.panel-body .notice { margin-top: 1.25rem; }

.panel-foot { padding: 0.95rem 1.5rem; border-top: 1px solid var(--rule); background: var(--paper-deep); font-size: 0.85rem; }
.panel-foot form { margin: 0; }
.panel-foot .aside { margin: 0.75rem 0 0; }
.panel-foot a { color: var(--ink-soft); text-decoration-color: var(--rule-firm); }
.panel-foot a:hover { color: var(--ink); }

.columns { display: grid; gap: 1.5rem; }
@media (min-width: 54rem) { .columns.two { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---------- rows ---------- */

.roster { list-style: none; margin: 0; padding: 0; }
.roster > li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem;
  padding: 1.05rem 1.5rem; border-top: 1px solid var(--rule);
}
.roster > li:first-child { border-top: 0; }
.roster .primary { font-size: 0.97rem; font-weight: 600; color: var(--ink); margin: 0; }
.roster .meta { margin: 0.2rem 0 0; font-size: 0.84rem; color: var(--ink-soft); line-height: 1.5; }
.roster .end { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; }
.roster .away { font-size: 0.82rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.roster .act { font-size: 0.82rem; color: var(--ink-soft); text-decoration-color: var(--rule-firm); white-space: nowrap; }
.roster .act:hover { color: var(--ink); }
/* Pause and Resume are `button_to`s wearing the same .act as View and Edit, and
   a <button> inherits none of the type and arrives wearing the UA's own chrome:
   left alone, the one control in the row that posts is the only one drawn as a
   grey native button. */
.roster button.act {
  font-family: inherit; line-height: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
  /* The line only -- the shorthand would reset the colour .act just set. */
  text-decoration-line: underline; text-underline-offset: 4px;
}

/* A panel whose whole body is a roster has the padding on the rows already. */
.panel > .roster { border-top: 0; }

.empty { padding: 2.75rem 1.5rem; text-align: center; }
.empty p { margin: 0; font-size: 0.94rem; color: var(--ink-soft); }
.empty p + p { margin-top: 0.55rem; }
/* `.empty p` outranks a bare `.aside`, so the second line came out the same
   weight as the first and the two read as one run-on paragraph. */
.empty .aside { font-size: 0.85rem; color: var(--ink-faint); max-width: 30rem; margin-inline: auto; }
.empty .btn { margin-top: 1.35rem; }

/* ---------- status ---------- */

/* No pills. A state is a printer's bullet and a line of small caps, which reads
   at a glance without pretending to be a control. */
.state {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
}
.state::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--ink-faint); flex: none; }
.state.is-good::before { background: var(--sage); }
.state.is-moving::before { background: var(--haze); }
.state.is-held::before { background: var(--gilt); }

/* ---------- facts ---------- */

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.5rem; margin: 0; }
.facts dt { margin: 0 0 0.4rem; }
.facts dd { margin: 0; font-size: 0.95rem; color: var(--ink); }

.postal { font-style: normal; font-size: 0.95rem; line-height: 1.6; color: var(--ink); }

/* ---------- tiles ---------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; }
.tile {
  display: block; padding: 1.6rem 1.5rem; text-decoration: none; color: inherit;
  background: var(--paper-lit); border: 1px solid var(--rule);
}
.tile:hover { border-color: var(--haze); }
.tile h3 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.2; margin: 0 0 0.3rem; }
.tile p { margin: 0; font-size: 0.89rem; color: var(--ink-soft); }

/* ---------- notices in the app ---------- */

/* .notice is sage-lined by default -- an envelope liner, nothing is wrong. Gilt
   is the only attention colour this brand has, and it means the same thing here
   as it does on a form error: something is waiting on you. */
.notice.is-held { border-left-color: var(--gilt); }
.notice .title { margin: 0 0 0.3rem; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.notice.wide { max-width: none; }

/* ---------- forms on the app surface ---------- */

.form-note { margin: 0; font-size: 0.86rem; color: var(--ink-soft); }
.form-head { margin: 0.5rem 0 0; }
.form-head h2 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 0 0 0.2rem; }

/* A notice standing among the fields rather than after them. .form-stack is a
   grid and already spaces its children, so the margin .notice carries elsewhere
   would land on top of the gap. */
.form-stack > .notice { margin-top: 0; }

/* A checkbox drawn here rather than borrowed from the platform, for two reasons
   the old `accent-color` version had no answer to.

   Contrast: accent-color paints the box and leaves the tick to the browser. In
   dark mode --ink is a cream, so the box came out pale with a white tick sitting
   on it and the checked state was unreadable. Drawing both means the tick is
   always the paper colour against an ink box, in either theme.

   Size: a checkbox standing inside a .field also matched `.field input`, taking
   its 0.8rem padding and its border. With border-box those cannot shrink, so the
   box swelled to roughly the height of a text input while a checkbox outside a
   .field stayed 1rem -- two controls on one form at two different sizes. Naming
   input[type="checkbox"] here outranks `.field input` and settles it. */
:root { --check-box-size: 1.15rem; --check-gap: 0.65rem; }

.checks { display: grid; gap: 0.9rem; }
.check { display: flex; align-items: flex-start; gap: var(--check-gap, 0.65rem); }
.check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  flex: none;
  width: var(--check-box-size, 1.15rem); height: var(--check-box-size, 1.15rem);
  /* Nudged down so the box sits on the label's first line rather than above it,
     which is what keeps a two-line label from dragging the box up with it. */
  margin: 0.16rem 0 0; padding: 0;
  border: 1px solid var(--ink-soft);
  border-radius: 0;
  background: var(--paper);
  display: grid; place-content: center;
  cursor: pointer;
}
.check input[type="checkbox"]::before {
  content: "";
  width: 0.64rem; height: 0.64rem;
  background: var(--paper-lit);
  transform: scale(0);
  transition: transform 90ms ease-out;
  clip-path: polygon(14% 44%, 0 60%, 39% 100%, 100% 18%, 84% 4%, 39% 68%);
}
.check input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.check input[type="checkbox"]:checked::before { transform: scale(1); }
.check input[type="checkbox"]:hover { border-color: var(--ink); }
.check input[type="checkbox"]:focus-visible {
  outline: none; border-color: var(--haze); box-shadow: 0 0 0 1px var(--haze);
}
.check label {
  font-size: 0.9rem; line-height: 1.45; color: var(--ink-soft);
  letter-spacing: normal; text-transform: none; font-weight: 400; cursor: pointer;
}

/* Hangs off the checkbox above it, indented past the box so it reads as that
   option's small print rather than as another line of the form. */
.check-note {
  margin: -0.25rem 0 0;
  padding-left: calc(var(--check-box-size, 1.15rem) + var(--check-gap, 0.65rem));
  font-size: 0.82rem; line-height: 1.55; color: var(--ink-faint);
}
.check-note strong { color: var(--ink-soft); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .check input[type="checkbox"]::before { transition: none; }
}

form > .form-actions { margin-top: 2rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1.25rem; margin-top: 2rem; }
.form-actions .cancel { font-size: 0.85rem; color: var(--ink-faint); text-decoration: none; margin-right: auto; }
.form-actions .cancel:hover { color: var(--ink); }

/* ---------- plans on the billing page ---------- */

.plan .pick form { margin: 0; }
.plan .pick .btn { width: 100%; }

/* ---------- sign in with Google ---------- */

/* Reversed out of the primary button on purpose. Below it sits the password
   form's own solid "Sign in", and two filled buttons stacked would make the page
   look like it were asking which of them you meant. */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  width: 100%;
  background: var(--paper-lit); color: var(--ink); border-color: var(--rule-firm);
}
.btn-google:hover { background: var(--paper-lit); border-color: var(--ink); }

/* Google's brand guidelines fix the mark's four colours and its proportions, so
   it keeps its own size and does not inherit the button's letter-spacing. */
.google-mark { width: 18px; height: 18px; flex: none; }

.google-form { margin: 0 0 1.5rem; }

/* A rule with the word sitting in a gap in it. */
.auth-or {
  display: flex; align-items: center; gap: 1rem;
  margin: 0 0 1.5rem;
  font-family: var(--text); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint);
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* ---------- unconfirmed address ---------- */

/* Built like the "viewing as" bar, because it is the same kind of thing: a
   standing condition on the account rather than news about the last click, which
   is what the flash slot below is for. */
.confirm-email { background: var(--paper-deep); border-bottom: 1px solid var(--rule-firm); position: relative; z-index: 3; }
.confirm-email .inner {
  max-width: 68rem; margin: 0 auto; padding: 0.55rem var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem;
  font-size: 0.85rem; color: var(--ink-soft);
}
.confirm-email .what strong { color: var(--ink); font-weight: 600; }
.confirm-email form { margin: 0 0 0 auto; }
.confirm-email .again {
  font-family: var(--text); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  background: none; border: 1px solid var(--rule-firm); color: var(--ink-soft);
  padding: 0.35rem 0.75rem; cursor: pointer;
}
.confirm-email .again:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- privacy and terms ---------- */

/* A legal page is read in one column and referred back to by section, so it gets
   a measure and numbered headings rather than the multi-column grid the rest of
   the marketing pages use. */
.legal { max-width: var(--measure); margin-top: 2.5rem; }
.legal h3 { font-size: 1.15rem; margin: 2.5rem 0 0; }
.legal h3:first-child { margin-top: 0; }
.legal p { margin: 0.75rem 0 0; color: var(--ink-soft); }
.legal ul { margin: 0.75rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); }
.legal li { margin-top: 0.45rem; }
.legal strong { color: var(--ink); font-weight: 600; }

.legal-meta { margin-top: 1.5rem; font-size: 0.85rem; color: var(--ink-faint); }