/* tailormy.ai on the app's premium look: KL Sage tokens only (no hex here; the deploy guard checks).
   The frame is the app's own (src/client/shared/app.css): the Crimson Pro name alone in the top bar,
   one wide column, the same gutters. The layout follows the CMO-audited landing design (2026-11-01),
   held to the app's rules: one lantern on the page (Taylor, in the hero), amber on the start button
   only, no Sakura, no motion, dark only. */
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/CrimsonPro-Variable.woff2") format("woff2-variations"); }
@font-face { font-family: "Crimson Pro"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/fonts/CrimsonPro-Italic-Variable.woff2") format("woff2-variations"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/Inter-Variable.woff2") format("woff2-variations"); }

:root { --tma-gutter: var(--space-6); } /* spacing.json section.horizontal: 24 / 48 / 96, as the app */
@media (min-width: 768px) { :root { --tma-gutter: var(--space-12); } }
@media (min-width: 960px) { :root { --tma-gutter: var(--space-24); } }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--sage-background-primary); color: var(--sage-text-body); font-family: var(--font-sans); font-size: var(--type-body-size); line-height: var(--type-body-line); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
a { color: var(--sage-accent-structural); text-underline-offset: 0.2em; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--sage-accent-structural); outline-offset: 3px; border-radius: var(--radius-sm); }
p { max-width: var(--container-prose); text-wrap: pretty; }
li, dd { text-wrap: pretty; } /* no lone last word in a list item or a file's description (Trowa 11-04 M2) */
summary { text-wrap: balance; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: var(--type-title-weight); color: var(--sage-text-primary); text-wrap: balance; margin: 0; }

/* ---- the frame: the app's top bar and footer, one wide column */
.p-mast, .p-foot, .wrap { width: min(var(--container-wide), 100% - 2 * var(--tma-gutter)); margin-inline: auto; }
.p-mast { display: flex; align-items: center; padding-block: var(--space-6); }
.wordmark { display: block; line-height: 0; margin-left: calc(var(--space-1) * -0.5); padding-block: var(--space-2); margin-block: calc(var(--space-2) * -1); color: var(--sage-text-primary); } /* a 48px-tall tap target; the margin takes the padding back, so nothing moves (Trowa 11-04 M3) */
.wordmark svg { display: block; height: var(--space-8); width: auto; }
.p-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4) var(--space-8); padding-block: var(--space-4) var(--space-8); border-top: 1px solid var(--sage-border-rule); font-size: var(--type-caption-size); color: var(--sage-text-supporting); }
.p-foot nav { display: flex; gap: var(--space-6); }
.p-foot a { display: inline-block; padding-block: var(--space-4); padding-inline: var(--space-2); margin-inline: calc(var(--space-2) * -1); color: var(--sage-text-supporting); } /* a 48px tap target; the footer's padding gives the 16px back (Trowa P2 #6); 8px each side makes it 44 wide or more, and the margin takes that back (Trowa 11-04 M3) */
.p-foot p { margin: 0; }
@media (min-width: 960px) { .p-mast { padding-block: var(--space-8); } }

/* ---- sections: a hairline between them; the display moments breathe at 96px, the quiet ones at 64 */
.site section { padding-block: var(--space-16); }
.site section + section { border-top: 1px solid var(--sage-border-rule); }
.site h2 { font-size: var(--type-title-md); line-height: var(--type-title-line); }
.site p { margin: 0; }
.site p + p { margin-top: var(--space-4); }
.wrap { display: grid; gap: var(--space-8); }
@media (min-width: 960px) {
  .site section { padding-block: var(--space-24); }
  .site .monday, .site .meet, .site .get, .site .faq { padding-block: var(--space-16); }
  .site h2 { font-size: var(--type-headline-md); line-height: var(--type-headline-line); letter-spacing: var(--type-headline-track); }
  .split { grid-template-columns: 5fr 7fr; gap: var(--space-24); align-items: start; }
}

/* ---- hero: the promise on the left, Taylor (the page's one lantern) on the right */
.site .hero { padding-block: var(--space-8) var(--space-16); }
.eyebrow { font-size: var(--type-body-size); font-weight: 500; color: var(--sage-text-supporting); }
.site .eyebrow { margin-bottom: var(--space-4); }
.hero h1 { font-size: var(--type-headline-sm); line-height: var(--type-headline-line); letter-spacing: var(--type-headline-track); max-width: 11ch; }
.lead { font-family: var(--font-serif); font-style: italic; font-size: var(--type-lead-size); line-height: var(--type-lead-line); color: var(--sage-text-body); }
.site .lead { margin-top: var(--space-6); max-width: 34em; }
.site .cta-row { margin-top: var(--space-8); }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: var(--space-12); padding: 0 var(--space-8); border: 1px solid transparent; border-radius: var(--radius-md); background: var(--sage-accent-cta); color: var(--raw-command-black); font-weight: 600; line-height: 1; text-decoration: none; }
.cta:focus-visible { outline: 2px solid var(--sage-text-primary); outline-offset: 3px; }
.under, .caption, .risk, .contact { font-size: var(--type-caption-size); line-height: var(--type-caption-line); color: var(--sage-text-supporting); }
.site .under { margin-top: var(--space-4); }

.lantern { display: grid; gap: var(--space-12); padding: var(--space-8) var(--space-6); border-radius: var(--radius-lg); background: var(--lantern-internal-gradient); box-shadow: var(--lantern-standard); color: var(--sage-text-on-lantern); }
.site .lantern p { margin: 0; max-width: none; }
.taylor-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.taylor-name { font-family: var(--font-serif); font-weight: var(--type-title-weight); font-size: var(--type-title-md); line-height: 1; }
.taylor-tag { padding: var(--space-1) var(--space-2); border: 1px solid var(--sage-text-on-lantern-soft); border-radius: var(--radius-md); font-size: var(--type-caption-size); font-weight: 500; line-height: 1; color: var(--sage-text-on-lantern-soft); }
.taylor-q { font-family: var(--font-serif); font-style: italic; font-size: var(--type-title-sm); line-height: var(--type-title-line); text-wrap: balance; }
@media (min-width: 960px) {
  .site .hero { padding-block: var(--space-16) var(--space-24); }
  .hero .wrap { grid-template-columns: 7fr 5fr; align-items: end; gap: var(--space-16); }
  .hero h1 { font-size: var(--type-display-md); line-height: var(--type-display-line); letter-spacing: var(--type-display-track); font-weight: var(--type-display-weight); }
  .lantern { padding: var(--space-12); gap: var(--space-16); }
  .taylor-name { font-size: var(--type-headline-sm); }
  .taylor-q { font-size: var(--type-title-md); }
}

/* ---- "You know the feeling.": the four beats, the second and fourth in the voice of the reader */
.beats p { font-family: var(--font-serif); font-size: var(--type-lead-size); line-height: var(--type-quote-line); padding-block: var(--space-4); border-top: 1px solid var(--sage-border-rule); }
.site .beats p + p { margin-top: 0; }
.beats p:first-child { border-top: 0; padding-top: 0; }
.beats p:nth-child(even) { font-style: italic; color: var(--sage-text-primary); }
@media (min-width: 960px) {
  .feel .wrap { justify-items: center; text-align: center; }
  .beats { max-width: 30em; }
  .beats p { font-size: var(--type-quote-md); }
}

/* ---- the problem, named large */
.label h2 { max-width: 16ch; }
.label .body p:last-child { color: var(--sage-text-primary); }
@media (min-width: 960px) {
  .label h2 { font-size: var(--type-display-sm); line-height: var(--type-display-line); letter-spacing: var(--type-display-track); font-weight: var(--type-display-weight); }
  .label .body { margin-left: calc((100% - var(--space-24)) * 5 / 12 + var(--space-24)); max-width: 34em; } /* the split's right column */
}

/* ---- old way, new way: two quiet columns, the new one in full ink */
.cols { gap: var(--space-12); }
.col h3 { font-size: var(--type-subhead-sm); line-height: var(--type-subhead-line); margin-bottom: var(--space-4); }
.col ul { list-style: none; margin: 0; padding: 0; }
.col li { padding-block: var(--space-4); border-top: 1px solid var(--sage-border-rule); }
.old h3, .old li, .old .result { color: var(--sage-text-supporting); }
.new li, .new .result { color: var(--sage-text-primary); }
.result { font-family: var(--font-serif); font-style: italic; font-size: var(--type-lead-size); line-height: var(--type-quote-line); }
.site .result { margin-top: var(--space-6); }
@media (min-width: 960px) { .cols { grid-template-columns: 1fr 1fr; gap: var(--space-24); } }

/* ---- Monday: heading left (held in view while the story is read), story right */
.story { max-width: 34em; }
.monday .story p:nth-child(2) { color: var(--sage-text-primary); }
@media (min-width: 960px) { .monday h2 { position: sticky; top: var(--space-8); } }

/* ---- Meet Taylor: a centered turn, Taylor's own first words in the app's italic for Taylor (type
   only: no panel, no glow, the page keeps its one lantern). Not the quote register: weight 500 is a
   quoted person (CMO 2026-11-01), and Taylor is not one. */
.turn { font-family: var(--font-serif); font-style: italic; font-weight: var(--type-lead-weight); font-size: var(--type-lead-size); line-height: var(--type-lead-line); color: var(--sage-text-primary); text-wrap: balance; }
.turn span { display: inline-block; } /* break only between Taylor's two sentences (CMO r2 P2-1) */
.meet .story { max-width: calc(var(--container-prose) * 0.85); } /* about 70 characters of Inter: 60ch is sixty zeros, which held 82 (Trowa 11-04 M1) */
.meet .story p:first-child { text-wrap: balance; } /* one sentence per line, not a long line over "and listens." (Trowa recheck 11-04); the first only, as balance split the second's "no wrong / answers." */
@media (min-width: 960px) {
  .meet .wrap { justify-items: center; text-align: center; }
  .turn { font-size: var(--type-title-sm); line-height: var(--type-title-line); }
}

/* ---- what you get: a ledger of the files */
.files { margin: 0; }
.files .row { display: grid; gap: var(--space-1); padding-block: var(--space-6); border-top: 1px solid var(--sage-border-rule); }
.files .row:first-child { border-top: 0; padding-top: 0; }
.files dt { font-family: var(--font-serif); font-weight: var(--type-subhead-weight); font-size: var(--type-subhead-sm); line-height: var(--type-subhead-line); color: var(--sage-text-primary); }
.files dd { margin: 0; }
.site .caption { margin-top: var(--space-6); }
@media (min-width: 960px) { .files .row { grid-template-columns: 1fr 1.3fr; gap: var(--space-8); align-items: baseline; } }

/* ---- questions: native disclosures, a quiet chevron */
details { border-top: 1px solid var(--sage-border-rule); }
details:last-of-type { border-bottom: 1px solid var(--sage-border-rule); }
summary { position: relative; list-style: none; cursor: pointer; padding: var(--space-5) var(--space-12) var(--space-5) 0; font-family: var(--font-serif); font-weight: var(--type-subhead-weight); font-size: var(--type-subhead-sm); line-height: var(--type-subhead-line); color: var(--sage-text-primary); }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: var(--space-2); top: 50%; width: var(--space-2); height: var(--space-2); margin-top: calc(var(--space-1) * -1.5); border-right: 2px solid var(--sage-text-supporting); border-bottom: 2px solid var(--sage-text-supporting); transform: rotate(45deg); }
details[open] summary::after { transform: rotate(-135deg); margin-top: 0; }
details p { max-width: calc(var(--container-prose) * 0.85); padding-bottom: var(--space-6); } /* about 70 characters (Trowa 11-04 M1) */
.site .contact { margin-top: var(--space-8); }

/* ---- the close: the heading, the steps, then the hero's pattern (the line, the button, the caption
   under it), so both ends of the page work the same way (Trowa P1 #2) */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; max-width: 34em; }
.steps li { counter-increment: step; display: grid; grid-template-columns: var(--space-12) 1fr; padding-block: var(--space-4); border-top: 1px solid var(--sage-border-rule); color: var(--sage-text-primary); text-wrap: pretty; }
.steps li::before { content: counter(step); font-family: var(--font-serif); font-size: var(--type-subhead-sm); line-height: var(--type-subhead-line); color: var(--sage-text-supporting); }
.after { font-family: var(--font-serif); font-style: italic; font-size: var(--type-lead-size); line-height: var(--type-quote-line); color: var(--sage-text-primary); }
.close .risk { color: var(--sage-text-supporting); }
.site .close .risk { margin-top: var(--space-4); }
@media (min-width: 960px) {
  .close .wrap { justify-items: center; text-align: center; }
  .close h2 { font-size: var(--type-display-sm); line-height: var(--type-display-line); letter-spacing: var(--type-display-track); font-weight: var(--type-display-weight); }
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); max-width: none; width: 100%; text-align: left; }
  .steps li { grid-template-columns: 1fr; gap: var(--space-2); align-content: start; }
}
/* The lit close (Kenny 2026-11-04, "Lit close alone"; Trowa's mock A): the line, the button and the
   line under it on one lantern panel, the page's second and last lit moment, about five screens from
   the hero's. Lantern ink on it (14.4:1 on the gradient's darkest stop; the soft caption 6.08:1); the
   amber button is unchanged and stays the only amber on its screen. */
.site .close .ask { justify-self: stretch; width: 100%; max-width: 40rem; margin-inline: auto; display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-12) var(--space-6); border-radius: var(--radius-lg); background: var(--lantern-internal-gradient); box-shadow: var(--lantern-subtle); color: var(--sage-text-on-lantern); text-align: center; }
.site .close .ask p { margin: 0; max-width: none; }
.close .ask .after { color: var(--sage-text-on-lantern); }
.close .ask .risk { color: var(--sage-text-on-lantern-soft); }
.site .close .ask .cta-row { margin-top: var(--space-2); }
/* On the panel the button's cream focus ring vanished (1.00 to 1.12:1; CMO audit 2026-11-04, WCAG 2.4.7):
   the ring takes the lantern ink, 14.43:1 or better. Width, style and offset stay the base rule's. */
.close .ask .cta:focus-visible { outline-color: var(--sage-text-on-lantern); }

/* ---- Terms and Privacy: the prose column; Legal's sections are the page's h2s (CMO r4 P2 #5). 0.85 of the
   prose token keeps a line near 70 characters of Inter; the plain token held 84 to 87 (Trowa 11-04 M1). */
.legal { width: min(calc(var(--container-prose) * 0.85), 100% - 2 * var(--tma-gutter)); margin-inline: auto; padding-block: var(--space-8) var(--space-16); }
.legal h1 { font-size: var(--type-title-md); line-height: var(--type-title-line); margin: var(--space-4) 0 var(--space-6); }
.legal h2 { font-size: var(--type-subhead-sm); font-weight: var(--type-subhead-weight); line-height: var(--type-subhead-line); margin: var(--space-12) 0 var(--space-4); }
.legal p { margin: 0 0 var(--space-4); }
.legal ul, .legal ol { padding-left: var(--space-6); margin: 0 0 var(--space-4); }
.legal li { margin: var(--space-2) 0; }

/* Forced colors: the amber button keeps an edge (its transparent border paints as ButtonText). */
@media (forced-colors: active) { .cta { border-color: ButtonText; } }