/* The signed-out pages: the landing page and the two auth forms.
   Loaded only on those pages, so the application never pays for it. Every colour, radius,
   shadow and duration below is a token from app.css. This layer adds two things the product
   does not define: a wider rail, and display sizes above --t-2xl. */

/* Marketing rhythm. The product's largest step is --s7 (48px), which is a page-of-forms
   distance, not a between-chapters one; --m-gap is the one spacing value this layer adds,
   halved onto each section so any two neighbours sit exactly one gap apart. */
:root { --m-gap: clamp(5rem, 8vw, 8.5rem); }

/* The chrome rail is --content + 80px, so widening --content widens the header and footer
   with the sections instead of leaving the brand hugging a narrower column. */
body.m-page { --content: 1040px; }
body.m-page main { max-width: none; margin: 0; padding: 0; }
body.m-page header.top .shell, body.m-page footer.foot .shell { padding: 0 var(--s5); }

.m-rail { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--s5); }
.m-section { padding: calc(var(--m-gap) / 2) 0; }

/* A hairline at the top of a section marks the start of a chapter, so the page reads as
   four groups rather than ten equal blocks. Drawn inside the rail, not across the window. */
.m-section--rule > .m-rail { border-top: 1px solid var(--line); padding-top: calc(var(--m-gap) / 2); }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Display sizes. The product has none, so they are declared here and nowhere else. */
.m-h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.04; letter-spacing: -.035em; font-weight: var(--w-bold); margin: 0; text-wrap: balance; }
.m-h1 b { font-weight: var(--w-bold); color: var(--accent); }
.m-h2 { font-size: clamp(1.5rem, 2.8vw, 2.125rem); line-height: 1.14; letter-spacing: -.028em; font-weight: var(--w-bold); margin: 0 0 var(--s3); text-wrap: balance; }
.m-lede { font-size: clamp(1rem, 1.4vw, 1.1875rem); line-height: 1.55; color: var(--muted); max-width: 58ch; margin: var(--s4) 0 0; text-wrap: pretty; }
.m-note { font-size: var(--t-sm); color: var(--faint); margin: 0; }

.m-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-2xs); font-weight: var(--w-bold); letter-spacing: .09em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 var(--s3);
}
.m-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--accent); flex: none; }
.m-eyebrow .n { color: var(--accent); font-variant-numeric: tabular-nums; }

.m-head { max-width: 60ch; margin-bottom: var(--s7); }
.m-head .m-lede { margin-top: var(--s3); }

/* --- header ------------------------------------------------------------------ */

/* The signed-out header carries the page's only persistent call to action, so the nav is
   links and the last item is a real button. Section links drop out before the CTA does. */
.m-top nav { margin-left: auto; gap: var(--s5); }
header.top nav a.m-navlink { font-weight: var(--w-medium); }
.m-top .m-sep { width: 1px; height: 16px; background: var(--line); flex: none; }
/* header.top nav a sets --muted on every link in the bar, which outranks .button-link's own
   colour; the CTA has to win it back at the same weight. */
header.top nav a.button-link, header.top nav a.button-link:hover { color: var(--bg); }
.m-top .button-link { padding: .4rem .8rem; font-size: var(--t-sm); }
@media (max-width: 760px) { .m-top nav .m-navlink--section, .m-top .m-sep { display: none; } }

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

/* One accent bloom behind the fold and a hairline grid that fades out. Both are drawn from
   theme tokens, so they follow the palette instead of pinning the page to one colour. */
.m-hero { position: relative; overflow: hidden; padding: calc(var(--m-gap) * .55) 0 calc(var(--m-gap) / 2); }
.m-hero::before {
  content: ""; position: absolute; inset: -30% 0 auto -10%; height: 720px; pointer-events: none;
  background: radial-gradient(46% 50% at 30% 40%, var(--accent-soft) 0%, transparent 70%);
  opacity: .8;
}
.m-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%);
  opacity: .5;
}
.m-hero > * { position: relative; z-index: 1; }
.m-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: center; }
.m-hero-copy { align-self: center; }
.m-cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s5); }
.m-cta-row .button-link { padding: .62rem 1.1rem; font-size: var(--t-base); }
.m-ghostlink {
  display: inline-flex; align-items: center; gap: var(--s2); padding: .62rem 1.1rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface);
  color: var(--fg); font-size: var(--t-base); font-weight: var(--w-medium); text-decoration: none;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.m-ghostlink:hover { color: var(--fg); background: var(--surface-2); border-color: var(--fg-soft); }

/* A quiet capsule for the trial line, so the offer sits on the page without shouting. */
.m-badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent);
  border-radius: var(--r-full); padding: .22rem .7rem .22rem .5rem;
  font-size: var(--t-xs); font-weight: var(--w-medium); margin-bottom: var(--s5);
}
.m-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; animation: m-blink 2.4s var(--ease) infinite; }
@keyframes m-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* --- demo -------------------------------------------------------------------- */

/* The demo grows as the prompt lands, so it runs inside a fixed viewport with a fade at
   the bottom edge. Nothing outside it moves while the loop plays, which is what keeps the
   hero copy in the left column still. With no script the whole example is simply there,
   clipped at the same edge. */
.m-demo { display: flex; flex-direction: column; gap: var(--s2); position: relative; height: 620px; overflow: hidden; }
.m-demo::after { content: ""; position: absolute; inset: auto 0 0; height: 96px; pointer-events: none; background: linear-gradient(to top, var(--bg), transparent); }
.m-demo .composer { margin: 0; }
.m-demo-caret { display: none; width: 1px; height: 1em; background: var(--accent); vertical-align: -2px; animation: m-caret 1s steps(1) infinite; }
.m-demo.is-typing .m-demo-caret { display: inline-block; }
@keyframes m-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.m-demo-line { min-height: 3.4rem; padding: .2rem .3rem; font-size: var(--t-base); color: var(--fg); white-space: pre-wrap; }
.m-demo-line.is-empty { color: var(--faint); }
.m-demo .todo { animation: m-rise var(--dur-3) var(--ease) both; }
@keyframes m-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Nothing in the demo is a control: the checkbox and the submit are spans wearing the
   product's classes, so the example cannot be clicked into a state the product never has. */
.m-demo .check { display: grid; place-items: center; }
.m-demo-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); flex: none;
  padding: .5rem .85rem; border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-fg);
  font-size: var(--t-md); font-weight: var(--w-medium); white-space: nowrap;
}
.m-demo .attach-button { cursor: default; }

/* --- reveal ------------------------------------------------------------------ */

/* Visible by default. The hidden state is applied by script only once an observer is
   actually running, so a browser that never fires one still shows the page. */
.reveal { transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.reveal.is-hidden { opacity: 0; transform: translateY(12px); }
.reveal.is-in { opacity: 1; transform: none; }

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

.m-grid { display: grid; gap: var(--s4); }
.m-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-grid--wide { gap: var(--s6); align-items: center; }

.m-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.m-panel--fill { height: 100%; }
.m-panel--tight { padding: var(--s4); }
.m-panel--wide { padding: var(--s6); }
.m-panel:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.m-panel h3 { margin: 0; font-size: var(--t-lg); font-weight: var(--w-semi); letter-spacing: -.011em; }
.m-panel p { margin: 0; color: var(--muted); font-size: var(--t-md); line-height: var(--lh-loose); }
/* .m-panel p outranks a bare .m-note, .m-eyebrow or .m-lede, so the three that can appear
   inside a panel have to win their own colour and size back at the same weight. */
.m-panel .m-note { margin-top: var(--s2); color: var(--faint); font-size: var(--t-sm); }
.m-panel .m-eyebrow { color: var(--faint); font-size: var(--t-2xs); line-height: var(--lh); }
.m-panel .m-lede { color: var(--muted); font-size: var(--t-base); line-height: var(--lh-loose); }

.m-glyph {
  width: 38px; height: 38px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; margin-bottom: var(--s2);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--fg-soft);
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.m-glyph svg { width: 18px; height: 18px; }
.m-panel:hover .m-glyph { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }

/* Numbered steps joined by one hairline that draws itself in when the row arrives. */
.m-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); position: relative; }
.m-steps::before {
  content: ""; position: absolute; top: 15px; left: 8%; right: 8%; height: 1px; background: var(--line);
  transform-origin: left; transition: transform 900ms var(--ease);
}
.m-steps.is-hidden::before { transform: scaleX(0); }
.m-step { position: relative; }
.m-step-n {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--fg-soft);
  font-size: var(--t-xs); font-weight: var(--w-bold); font-variant-numeric: tabular-nums;
  margin-bottom: var(--s3); position: relative; z-index: 1;
}
.m-step h3 { margin: 0 0 var(--s2); font-size: var(--t-base); font-weight: var(--w-semi); }
.m-step p { margin: 0; color: var(--muted); font-size: var(--t-md); line-height: var(--lh-loose); }

/* A prompt is assembled from three parts; the bar shows their relative weight. */
.m-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.m-part-bar { height: 4px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; margin-bottom: var(--s3); }
.m-part-bar i { display: block; height: 100%; width: var(--w, 50%); background: var(--accent); transition: width 1100ms var(--ease); }
.m-part-bar--sm { --w: 32%; }
.m-part-bar--md { --w: 46%; }
.m-part-bar--lg { --w: 72%; }
.is-hidden .m-part-bar i { width: 0; }

.m-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.m-list li { display: flex; gap: var(--s2); align-items: flex-start; color: var(--fg-soft); font-size: var(--t-md); line-height: 1.5; }
.m-list svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ok); }
.m-list--off svg { width: 13px; height: 13px; margin-top: 3px; color: var(--faint); transform: rotate(45deg); }
.m-list--lead { margin-top: var(--s5); }
.m-note--lead { margin-top: var(--s4); }
.m-code { margin-top: var(--s5); }

/* Vendor marks, at text weight in the current colour, so they read as compatibility
   rather than endorsement. Four cells, one outer border, and the two internal hairlines
   crossing at the centre: a plus, not a table of boxes. */
.m-agents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-agent { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); font-size: var(--t-md); color: var(--fg-soft); transition: color var(--dur-2) var(--ease); }
.m-agent:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.m-agent:nth-child(odd) { border-right: 1px solid var(--line); }
.m-agent:hover { color: var(--fg); }
.m-agent svg { width: 18px; height: 18px; flex: none; color: var(--fg-soft); opacity: .9; }
.m-agent i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; margin: 0 5px; }

/* Four palettes, shown as four miniatures of the page itself. Each tile is its own form
   post, for the same reason the signed-in theme picker is: it has to work without script. */
.m-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.m-theme {
  display: block; width: 100%; text-align: left; white-space: normal;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s3);
  color: var(--fg); font: inherit; cursor: pointer;
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.m-theme:hover { transform: translateY(-2px); border-color: var(--line-strong); opacity: 1; }
.m-theme[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.m-theme .bar { display: block; height: 8px; border-radius: 2px; opacity: .85; width: 62%; }
.m-theme .dot { display: block; width: 34px; height: 8px; border-radius: 3px; margin-top: var(--s2); }
.m-theme .plate { display: block; height: 30px; border-radius: var(--r-sm); border: 1px solid; margin-top: var(--s3); }
.m-theme .nm { display: block; margin-top: var(--s3); font-size: var(--t-sm); font-weight: var(--w-semi); }
.m-theme .no { display: block; font-size: var(--t-xs); }

/* The closing call to action: the accent surface used once, at the end. */
.m-cta {
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  border-radius: var(--r-lg); padding: var(--s7) var(--s6); text-align: center;
}
.m-cta .m-h2 { margin-bottom: var(--s2); }
.m-cta p { color: var(--fg-soft); max-width: 52ch; margin: 0 auto; }
.m-cta .m-cta-row { justify-content: center; }

.m-price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.m-price .m-panel { gap: var(--s3); }
.m-price .m-panel .m-price-k { color: var(--fg); font-size: var(--t-2xl); font-weight: var(--w-bold); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.m-price-k span { font-size: var(--t-md); font-weight: var(--w-medium); color: var(--muted); letter-spacing: 0; }

/* --- auth -------------------------------------------------------------------- */

/* Log in and sign up are the page after the landing page, so they keep its rail, its
   background and its panel, and put the form where the hero demo was. The right column is
   the reason to finish the form, not decoration, and it is the first thing to go when the
   window narrows. */
/* The section fills the window rather than sitting at the top of it, and centres the card
   inside itself. Centring the section instead would leave its clipped accent bloom starting
   halfway down the page, with a visible edge where it began. */
body.m-page main:has(.m-auth) { display: flex; }
.m-auth {
  flex: 1; display: flex; align-items: center; width: 100%;
  padding: calc(var(--m-gap) * .4) 0 calc(var(--m-gap) / 2);
  position: relative; overflow: hidden;
}
.m-auth > .m-rail { width: 100%; }
.m-auth::before {
  content: ""; position: absolute; inset: -40% 0 auto -20%; height: 640px; pointer-events: none;
  background: radial-gradient(42% 50% at 34% 40%, var(--accent-soft) 0%, transparent 70%);
  opacity: .7;
}
.m-auth > * { position: relative; z-index: 1; }
.m-auth-grid { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: var(--s7); align-items: start; }

.m-auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--shadow-2); }
.m-auth-card h1 { font-size: var(--t-2xl); letter-spacing: -.025em; margin: 0 0 var(--s2); }
.m-auth-card .sub { color: var(--muted); font-size: var(--t-md); margin: 0 0 var(--s5); }
.m-auth-form { display: flex; flex-direction: column; gap: var(--s4); max-width: none; }
.m-auth-form label { font-size: var(--t-md); }
.m-auth-form .accent { width: 100%; justify-content: center; padding: .62rem 1.1rem; font-size: var(--t-base); }
.m-auth-hint { font-size: var(--t-xs); color: var(--faint); margin: calc(var(--s1) * -1) 0 0; }
.m-auth-alt { margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--t-md); color: var(--muted); }
.m-auth-side { display: flex; flex-direction: column; gap: var(--s4); padding-top: var(--s3); }
.m-auth-side .m-h2 { font-size: var(--t-xl); }
.m-auth-side .m-lede { font-size: var(--t-base); }
.m-auth-side .m-list li { font-size: var(--t-base); }

@media (max-width: 900px) {
  .m-hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .m-demo { height: 520px; }
  .m-grid--3, .m-steps, .m-parts, .m-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m-steps::before { display: none; }
  .m-auth-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); max-width: 520px; }
}
@media (max-width: 600px) {
  :root { --m-gap: 4rem; }
  .m-rail, body.m-page header.top .shell, body.m-page footer.foot .shell { padding: 0 var(--s4); }
  .m-grid--3, .m-grid--2, .m-steps, .m-parts, .m-themes, .m-price { grid-template-columns: minmax(0, 1fr); }
  .m-cta { padding: var(--s6) var(--s4); }
  .m-cta-row .button-link, .m-cta-row .m-ghostlink { width: 100%; justify-content: center; }
  .m-panel--wide { padding: var(--s5); }
  .m-auth-card { padding: var(--s5); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-hidden { opacity: 1; transform: none; }
  .m-steps::before, .m-steps.is-hidden::before { transform: scaleX(1); }
  .is-hidden .m-part-bar i { width: var(--w, 50%); }
  .m-badge i, .m-demo-caret { animation: none; opacity: 1; }
  .m-demo .todo { animation: none; }
}