/* ==========================================================================
   DoConure — the public site's design system.

   Four layers, in this order: tokens, base, layout, components. Anything
   added below should say which layer it belongs to, because the one thing
   that kills a system like this is a component that invents its own colour.

   THE SCOPE OF THIS FILE. It dresses the marketing site, the signup pages,
   the login page and the signer-facing pages — every surface somebody sees
   before they are a customer, plus the ones a signer sees. It does **not**
   dress either console: `/tenant/*` and `/admin/*` have their own stylesheet
   in `public/console/console.css` and share nothing with this one. Two
   products that happen to run on one server; that separation was made on
   2026-09-15 because a change to one kept being a change to the other.

   THE GREEN PROBLEM, since it explains half the palette below. The brand
   green is `#46b92d` and it has a contrast ratio of 2.55:1 on white. That is
   fine for a wordmark, a pictogram or a 48px icon, and it fails WCAG AA for
   anything that is text — including white text on a green button, which is
   exactly what a primary CTA is. So the green splits in two: `--green` is
   the identity, used on graphics, and `--green-700` (4.87:1) is the action
   colour, used wherever a green surface or a green word has to be read.
   They are the same hue; nobody notices, and the buttons pass.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* --- surfaces. 75–85% of the page is one of the first three ----------- */
  --white:       #ffffff;
  --paper:       #fbfcfb;   /* a near-white that is not quite the page */
  --soft:        #f4faf3;   /* the pale green band */
  --tint:        #dcf0d6;   /* green wash: rules, bullets, illustration */

  /* --- green ------------------------------------------------------------ */
  --green:       #46b92d;   /* identity. Graphics only — see the note above */
  --green-700:   #2b8217;   /* action: buttons, links, green words. AA 4.87 */
  --green-800:   #1f6b12;   /* action hover.                       AA 6.62 */
  --green-deep:  #087a3e;   /* deep green: Document Fly.           AA 5.44 */

  /* --- accents. Controlled, never a second primary ---------------------- */
  --yellow:      #f4c915;   /* Signer Fly. Graphics only: 1.59 on white */
  --yellow-tint: #fdf7e0;   /* its icon tile */
  --yellow-line: #f4e3a8;   /* that tile's border */
  --yellow-deep: #8a6a00;   /* the same accent when it must carry text */
  --deep-tint:   #e8f4ed;   /* Document Fly's icon tile */
  --deep-line:   #c8e4d4;
  --warm:        #ee4b2f;   /* tertiary, from the feather's red */
  --warm-deep:   #c93a1f;

  /* --- ink -------------------------------------------------------------- */
  --ink:         #17232d;   /* headings, body                     AA 15.97 */
  --ink-2:       #33424e;   /* body on a coloured ground          AA 10.34 */
  --muted:       #5f6d7a;   /* secondary text                      AA 5.31 */
  /*
    There is no second grey, and that is a finding rather than an omission.
    A lighter one has to clear 4.5:1 on all three grounds to carry text, and
    the lightest value that does (#667481, which the brand guide suggests)
    lands at 4.52 on `--soft` — one hundredth above the line, and visually
    almost indistinguishable from `--muted` at 5.01. So the room for two
    grey *text* colours does not exist: there is one, and anything that
    wanted to be fainter than it is either a shape (use `--border-2`) or
    text that should not have been faint.

    The first version of this file had a second grey at #8794a0, commented
    "decorative labels only, never prose", and within a day it was carrying
    the footer's
    column headings at 3.10:1. A token whose rule lives in a comment is a
    token that will be misused; test_palette_contrast.py now holds the rule
    instead.
  */

  /* --- lines and shadows ------------------------------------------------ */
  --border:      #e4e9e6;
  --border-2:    #d3ddd7;
  --shadow-sm:   0 1px 2px rgba(23, 35, 45, .05);
  --shadow:      0 2px 4px rgba(23, 35, 45, .04),
                 0 8px 20px -8px rgba(23, 35, 45, .10);
  --shadow-lg:   0 4px 10px rgba(23, 35, 45, .05),
                 0 24px 48px -20px rgba(23, 35, 45, .18);
  --ring:        0 0 0 3px rgba(70, 185, 45, .30);

  /* --- type ------------------------------------------------------------- */
  --font-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, sans-serif;
  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
                  'Liberation Mono', monospace;

  /* --- spacing. A 4px grid, named so a gap is chosen and not guessed ---- */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  /* --- radii ------------------------------------------------------------ */
  --r-sm: 6px;  --r: 10px;  --r-lg: 16px;  --r-xl: 22px;  --r-pill: 999px;

  /* --- motion. Fast and restrained; §13 of the brand guide -------------- */
  --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --t:      200ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 420ms cubic-bezier(.16, 1, .3, 1);

  /* --- layout ----------------------------------------------------------- */
  --shell:  1180px;
  --shell-narrow: 780px;
  --gutter: 16px;          /* the phone gutter the brand guide asks for */
}

@media (min-width: 640px) { :root { --gutter: 28px } }
@media (min-width: 1024px) { :root { --gutter: 40px } }

/* ==========================================================================
   2. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: 'cv11' 1;      /* Inter's single-storey a-alternates */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, picture { max-width: 100%; display: block }
img { height: auto }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -.022em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 }

a { color: var(--green-700); text-decoration: none }
a:hover { color: var(--green-800); text-decoration: underline }

/* One visible focus ring everywhere, and it is never removed. A keyboard is
   how some people use every page on this site, and how everyone uses the
   signing page when a trackpad is not to hand. */
:focus-visible {
  outline: 2px solid var(--green-700);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--tint); color: var(--ink) }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--white);
  padding: var(--s3) var(--s5); border-radius: 0 0 var(--r) 0;
  font-weight: 600;
}
.skip:focus { left: 0; text-decoration: none; color: var(--white) }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--shell-narrow) }

/* A band is one horizontal stripe of the page. Two grounds alternate:
   white and the pale green. Nothing else is a background. */
.band { padding-block: clamp(3rem, 6vw, 5.5rem) }
.band--soft { background: var(--soft) }
.band--paper { background: var(--paper) }
.band--tight { padding-block: clamp(2rem, 4vw, var(--s7)) }

.stack > * + * { margin-top: var(--s4) }
.stack-lg > * + * { margin-top: var(--s6) }

.grid { display: grid; gap: var(--s5) }

/* Grid and flex items default to `min-width: auto`, which means "never
   narrower than my content". A <pre> of an API call has no wrap
   opportunities, so on a 360px phone that one element pushed the whole
   column — and with it the page — 16px sideways. `minmax(0, …)` is the
   same fix stated on the track; this states it on the item, so a track
   added later inherits it. */
.grid > *, .split > *, .hero__in > *, .foot__top > * { min-width: 0 }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr) }
  .grid--3 { grid-template-columns: repeat(3, 1fr) }
  .grid--4 { grid-template-columns: repeat(2, 1fr) }
}
@media (min-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr) }
}

/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* --- 4.1 the wordmark ------------------------------------------------- */
/*
   Live text, not the supplied raster. The artwork sets the name with two
   capitals (`DocConure`) and the name is `DoConure`; a logotype that
   contradicts the sentence beside it is worse than no logotype. Text also
   scales, selects, translates and stays sharp at any pixel density.
   `Do` green, `Conure` charcoal — the split the capital letter already makes.
*/
.brand {
  display: inline-flex; align-items: center; gap: .6em;
  text-decoration: none; color: inherit;
}
.brand:hover { text-decoration: none }
.brand__mark { width: 2.1rem; height: 2.1rem; flex: none }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.32rem; font-weight: 800;
  letter-spacing: -.028em; color: var(--ink);
  white-space: nowrap;
}
.brand__name b { color: var(--green); font-weight: inherit }
.brand--sm .brand__mark { width: 1.6rem; height: 1.6rem }
.brand--sm .brand__name { font-size: 1.05rem }

/* --- 4.2 buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55em;
  font-family: var(--font); font-size: .95rem; font-weight: 600;
  line-height: 1.2; letter-spacing: -.005em;
  padding: .78em 1.35em;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background var(--t), border-color var(--t), color var(--t),
              box-shadow var(--t), transform var(--t-fast);
  white-space: nowrap;
}
.btn:hover { text-decoration: none }
.btn:active { transform: translateY(1px) }

.btn--primary { background: var(--green-700); color: var(--white) }
.btn--primary:hover { background: var(--green-800); color: var(--white) }

.btn--secondary {
  background: var(--white); color: var(--ink);
  border-color: var(--border-2); box-shadow: var(--shadow-sm);
}
.btn--secondary:hover {
  border-color: var(--green); color: var(--green-700);
  box-shadow: var(--shadow);
}

.btn--quiet { background: transparent; color: var(--ink); padding-inline: .6em }
.btn--quiet:hover { color: var(--green-700) }

.btn--lg { font-size: 1.02rem; padding: .95em 1.7em; border-radius: var(--r-lg) }
.btn--block { width: 100%; display: flex }

.btn svg { width: 1.05em; height: 1.05em; flex: none }

/* --- 4.3 section headers ---------------------------------------------- */
.eyebrow {
  font-family: var(--font); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: .6em;
}
.eyebrow::before {
  content: ''; width: 1.4rem; height: 2px; border-radius: 2px;
  background: var(--green); flex: none;
}
.eyebrow--center { justify-content: center }

.section-head { max-width: 46rem }
.section-head--center { margin-inline: auto; text-align: center }
.section-head--center .eyebrow { justify-content: center }
.section-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-top: var(--s4) }
.section-head p { margin-top: var(--s4); color: var(--muted); font-size: 1.08rem }
.section-head--center p { max-width: 38rem; margin-inline: auto }

.lede { font-size: 1.12rem; color: var(--ink-2); line-height: 1.6 }

/* An accented word inside a heading. Uses the action green, not the identity
   green, because it is a word and words get read. */
.hl { color: var(--green-700) }

/* --- 4.4 cards --------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.card--link:hover {
  box-shadow: var(--shadow); border-color: var(--border-2);
  transform: translateY(-2px);
}
.card h3 { font-size: 1.22rem }
.card p { color: var(--muted); margin-top: var(--s3) }

/* The product card. The accent is the only thing that differs between the
   three, which is the point: one brand, three members, not three brands. */
.card--product { display: flex; flex-direction: column }
.card--product .card__icon { margin-bottom: var(--s5) }
.card--product .card__more { margin-top: auto; padding-top: var(--s5) }

.card__icon {
  width: 2.9rem; height: 2.9rem; border-radius: var(--r);
  display: grid; place-items: center; flex: none;
  background: var(--soft); color: var(--green-700);
  border: 1px solid var(--tint);
}
.card__icon svg { width: 1.5rem; height: 1.5rem }

[data-accent='signer'] .card__icon {
  background: var(--yellow-tint); color: var(--yellow-deep); border-color: var(--yellow-line);
}
[data-accent='document'] .card__icon {
  background: var(--deep-tint); color: var(--green-deep); border-color: var(--deep-line);
}

.card__more {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 600; font-size: .94rem; color: var(--green-700);
}
.card__more svg { width: .95em; height: .95em; transition: transform var(--t) }
.card--link:hover .card__more svg { transform: translateX(3px) }
[data-accent='signer'] .card__more { color: var(--yellow-deep) }
[data-accent='document'] .card__more { color: var(--green-deep) }

/* --- 4.5 feature list -------------------------------------------------- */
.features { display: grid; gap: var(--s5); margin: 0; padding: 0; list-style: none }
.feature { display: flex; gap: var(--s4); align-items: flex-start }
.feature__icon {
  width: 2.2rem; height: 2.2rem; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center;
  background: var(--soft); color: var(--green-700); border: 1px solid var(--tint);
}
.feature__icon svg { width: 1.15rem; height: 1.15rem }
.feature h3 { font-size: 1.02rem; font-family: var(--font); font-weight: 650;
              letter-spacing: -.01em; line-height: 1.4 }
.feature p { color: var(--muted); font-size: .96rem; margin-top: .2em }

/* A plain ticked list, for specification-style points. */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3) }
.ticks li {
  position: relative; padding-left: 1.85rem;
  color: var(--ink-2); font-size: .99rem;
}
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .34em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b8217' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
              center / .78rem no-repeat;
}

/* --- 4.6 badges and chips ---------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: .76rem; font-weight: 650; letter-spacing: .02em;
  padding: .3em .7em; border-radius: var(--r-pill);
  background: var(--soft); color: var(--green-700);
  border: 1px solid var(--tint);
}
.badge--signer { background: var(--yellow-tint); color: var(--yellow-deep); border-color: var(--yellow-line) }
.badge--document { background: var(--deep-tint); color: var(--green-deep); border-color: var(--deep-line) }
.badge--neutral { background: var(--paper); color: var(--muted); border-color: var(--border) }

.badge__dot { width: .45em; height: .45em; border-radius: 50%; background: currentColor }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2) }
.chip {
  font-size: .86rem; font-weight: 550; color: var(--ink-2);
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: .35em .85em;
}

/* --- 4.7 the value row under the hero ---------------------------------- */
.values { display: grid; gap: var(--s5) }
@media (min-width: 560px) { .values { grid-template-columns: repeat(3, 1fr);
                                      gap: var(--s5) var(--s4) } }
.value { display: flex; gap: var(--s3); align-items: flex-start }
.value svg { width: 1.3rem; height: 1.3rem; color: var(--green-700); flex: none;
             margin-top: .15rem }
.value b { display: block; font-weight: 650; font-size: .95rem; line-height: 1.3 }
.value span { color: var(--muted); font-size: .9rem; line-height: 1.4 }

/* --- 4.8 the hero ------------------------------------------------------ */
.hero { position: relative; overflow: clip; padding-block: var(--s7) var(--s8) }

/* The feather, enormous and almost invisible, behind the product stage.
   §12: the feather as soft abstract background geometry, once, not as a
   parrot on every section. */
.hero__feather {
  position: absolute; pointer-events: none; user-select: none;
  right: -10%; top: -18%; width: min(46rem, 66vw);
  opacity: .09; filter: saturate(1.2);
  transform: rotate(-6deg);
  z-index: 0;
  /* Only the blades. The nib and its drop shadow are the bottom third of
     the artwork, and at 9% opacity they read as a grey thumbprint rather
     than as part of a feather. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0 40%, transparent 72%);
          mask-image: linear-gradient(to bottom, #000 0 40%, transparent 72%);
}
.hero__wash {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60rem 34rem at 78% 14%, rgba(70, 185, 45, .10), transparent 62%),
    radial-gradient(42rem 28rem at 96% 60%, rgba(244, 201, 21, .09), transparent 60%);
}
.hero__in { position: relative; z-index: 1; display: grid; gap: var(--s8) }
@media (min-width: 980px) {
  .hero__in { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
              align-items: center; gap: var(--s7) }
}
.hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.15rem);
  margin-top: var(--s5);
  letter-spacing: -.035em;
}
.hero .lede { margin-top: var(--s5); max-width: 34rem }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6) }
.hero .values { margin-top: var(--s7) }

/* --- 4.9 the product stage (the hero's picture of the product) --------- */
/*
   Drawn, not photographed. §12 asks for the real product experience rather
   than stock photography, and a screenshot of a real document would either
   be a customer's or be invented — so this is the interface reduced to what
   it is: a page being written, a signature going on it, and the three
   products labelling the three moments.
*/
.stage { position: relative; isolation: isolate }
.stage__screen {
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.stage__bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .7rem .9rem;
  background: var(--paper); border-bottom: 1px solid var(--border);
}
.stage__bar i {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--border-2); display: block;
}
.stage__bar span {
  margin-left: auto; font-size: .72rem; color: var(--muted);
  font-family: var(--font-mono); letter-spacing: -.02em;
}
.stage__doc { padding: var(--s5) var(--s5) var(--s6) }
.stage__doc h4 {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  margin-bottom: var(--s4);
}
.stage__line {
  height: .5rem; border-radius: var(--r-pill);
  background: var(--border); margin-bottom: .6rem;
}
.stage__line--soft { background: #eef2ef }
.stage__sign {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px dashed var(--border-2);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4);
}
.stage__sig { width: 9.5rem; color: var(--ink) }
.stage__sig svg { width: 100%; height: auto }
.stage__sig small {
  display: block; font-size: .68rem; color: var(--muted);
  border-top: 1px solid var(--border); padding-top: .3rem; margin-top: .2rem;
}

/* The three floating labels. Absolutely placed on a wide screen, and a plain
   row underneath on a narrow one — §14: floating cards must not overlap. */
.stage__tags { display: grid; gap: var(--s3); margin-top: var(--s5) }
.tag {
  display: flex; align-items: flex-start; gap: .7rem;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r); padding: .7rem .9rem;
  box-shadow: var(--shadow);
}
.tag__icon {
  width: 1.9rem; height: 1.9rem; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center;
  background: var(--soft); color: var(--green-700);
}
.tag__icon svg { width: 1.05rem; height: 1.05rem }
.tag--signer .tag__icon { background: var(--yellow-tint); color: var(--yellow-deep) }
.tag--document .tag__icon { background: var(--deep-tint); color: var(--green-deep) }
.tag b { display: block; font-size: .88rem; font-weight: 700; line-height: 1.3 }
.tag span { font-size: .8rem; color: var(--muted); line-height: 1.35 }

@media (min-width: 980px) {
  .stage__tags { display: block; margin-top: 0 }
  .tag { position: absolute; width: 13.5rem; z-index: 2 }
  .tag--composer { top: -1.6rem; left: -3.2rem }
  .tag--signer { top: 28%; right: -3rem }
  .tag--document { bottom: -2.2rem; left: 3% }
  /* Room under the signature for the label that hangs there. A floating
     card that covers the thing it is labelling is worse than no card. */
  .stage__doc { padding-bottom: var(--s9) }
}
@media (min-width: 1180px) {
  .tag--composer { left: -5rem }
  .tag--signer { right: -4.5rem }
}

/* Entrance: the three labels arrive along the document's own path. Fast,
   once, and switched off entirely for prefers-reduced-motion by the rule in
   the base layer. */
@keyframes lift {
  from { opacity: 0; transform: translate3d(0, 14px, 0) }
  to   { opacity: 1; transform: none }
}
.tag { animation: lift var(--t-slow) both }
.tag--composer { animation-delay: .10s }
.tag--signer   { animation-delay: .22s }
.tag--document { animation-delay: .34s }

/* --- 4.10 the workflow ------------------------------------------------- */
.flow { display: grid; gap: var(--s5); counter-reset: step }
@media (min-width: 860px) {
  .flow { grid-template-columns: repeat(4, 1fr); gap: var(--s4) }
}
.flow__step { position: relative; padding-top: var(--s6) }
.flow__step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600;
  color: var(--green-700); letter-spacing: .04em;
}
/* The dotted path between the steps: the "flight" motif, at its quietest. */
.flow__step::after {
  content: ''; position: absolute; top: .45rem; left: 2.4rem; right: -.6rem;
  border-top: 2px dotted var(--tint);
}
.flow__step:last-child::after { display: none }
@media (max-width: 859px) { .flow__step::after { display: none } }
.flow__step h3 { font-size: 1.08rem; margin-bottom: var(--s2) }
.flow__step p { color: var(--muted); font-size: .96rem }

/* --- 4.11 split section (a product, explained) -------------------------- */
.split { display: grid; gap: var(--s7); align-items: center }
@media (min-width: 940px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) }
  .split--flip .split__media { order: -1 }
}

/* --- 4.12 code snippet -------------------------------------------------- */
.snippet {
  background: #10191f; border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  border: 1px solid #1d2a33;
}
.snippet__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1rem; border-bottom: 1px solid #1d2a33;
  font-size: .74rem; color: #8fa3b0; font-family: var(--font-mono);
  letter-spacing: .02em;
}
.snippet__bar b { color: #d6e2ea; font-weight: 600 }
.snippet pre {
  margin: 0; padding: var(--s5) var(--s5) var(--s6);
  font-family: var(--font-mono); font-size: .8rem; line-height: 1.75;
  color: #d6e2ea; overflow-x: auto;
}
/* Three token colours and no more: a snippet is a picture of an API call,
   not a syntax-highlighting demonstration. Each is checked against the
   #10191f ground rather than against white. */
.snippet .k { color: #8fd66f }   /* keys and verbs      */
.snippet .s { color: #ffd66b }   /* strings             */
.snippet .c { color: #8ba3b3 }   /* comments and labels */

/* --- 4.13 the logo cloud ------------------------------------------------ */
/*
   Built, unused, and that is deliberate. The homepage preview shows three
   customer logos and a quotation; none of them is confirmed, and §17 of the
   brand guide forbids invented customer proof. The component waits here for
   real logos and a real quotation rather than being reinvented on the day
   they arrive.
*/
.logos { display: flex; flex-wrap: wrap; align-items: center;
         justify-content: center; gap: var(--s6) var(--s8) }
.logos img { max-height: 2.2rem; width: auto; opacity: .65;
             filter: grayscale(1); transition: opacity var(--t) }
.logos img:hover { opacity: 1 }

.quote { border-left: 3px solid var(--tint); padding-left: var(--s5) }
.quote p { font-size: 1.05rem; color: var(--ink-2); font-style: italic }
.quote cite { display: block; margin-top: var(--s3); font-style: normal;
              font-size: .88rem; color: var(--muted) }

/* --- 4.14 masthead ------------------------------------------------------ */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), box-shadow var(--t);
}
.masthead.is-stuck { border-bottom-color: var(--border); box-shadow: var(--shadow-sm) }
.masthead__in {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 4.4rem;
  position: relative;   /* the narrow-screen menu panel hangs off this */
}
.nav { display: none; align-items: center; gap: var(--s2); margin-left: var(--s5) }
.nav a {
  color: var(--ink-2); font-size: .94rem; font-weight: 550;
  padding: .45em .7em; border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
}
.nav a:hover { color: var(--green-700); background: var(--soft); text-decoration: none }
.masthead__end { display: flex; align-items: center; gap: var(--s2); margin-left: auto }
@media (min-width: 900px) { .nav { display: flex } }

/* The narrow-screen menu. A <details>, so it opens with no JavaScript at
   all — every link in it is a jump to a section of this same page, and a
   menu that needs a script to reveal a same-page anchor is a menu that can
   fail for no reason. `Accedi` stays in the bar rather than inside the
   panel: somebody who already has an account should not have to open a
   menu to say so. */
.menu { margin-left: var(--s1) }
.menu > summary {
  list-style: none; cursor: pointer;
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: var(--r-sm);
  color: var(--ink);
}
.menu > summary::-webkit-details-marker { display: none }
.menu > summary:hover { background: var(--soft); color: var(--green-700) }
.menu > summary svg { width: 1.4rem; height: 1.4rem }
.menu__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow); padding: var(--s3) 0 var(--s5);
}
.menu__panel a {
  display: block; padding: .7rem var(--gutter);
  color: var(--ink-2); font-weight: 550;
}
.menu__panel a:hover { background: var(--soft); color: var(--green-700);
                       text-decoration: none }
.menu[open] > summary { background: var(--soft); color: var(--green-700) }
/* `width: auto`, not the .btn--block 100% it inherits: 100% plus two
   gutters of margin is wider than the panel, and that is a sideways
   scrollbar on a phone. */
.menu__panel .menu__cta { margin: var(--s3) var(--gutter) 0; width: auto;
                          text-align: center }
@media (min-width: 900px) { .menu { display: none } }

/* Under 560px the bar cannot hold a wordmark, two buttons and a menu
   without pushing the page sideways — and a marketing page that scrolls
   horizontally on a phone is broken, not merely tight. `Inizia ora` moves
   into the panel; the hero repeats it two screens' worth of nothing
   below, so nothing is actually lost. */
@media (max-width: 559px) {
  /* Direct child only: the panel's own CTA is also a .btn--primary,
     and it lives inside this same container. */
  .masthead__end > .btn--primary { display: none }
  .brand__name { font-size: 1.15rem }
  .brand__mark { width: 1.8rem; height: 1.8rem }
}
@media (min-width: 560px) { .menu__panel .menu__cta { display: none } }

/* --- 4.15 call to action ------------------------------------------------ */
.cta {
  background: var(--soft);
  border: 1px solid var(--tint);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, var(--s8));
  text-align: center;
  position: relative; overflow: hidden;
}
.cta h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem) }
.cta p { margin-top: var(--s4); color: var(--muted); font-size: 1.06rem }
.cta__actions {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  justify-content: center; margin-top: var(--s6);
}
.cta__note { margin-top: var(--s5); font-size: .88rem; color: var(--muted) }

/* --- 4.16 footer -------------------------------------------------------- */
.foot { background: var(--white); border-top: 1px solid var(--border);
        padding-block: var(--s8) var(--s6) }
.foot__top { display: grid; gap: var(--s7) }
@media (min-width: 820px) {
  .foot__top { grid-template-columns: 1.4fr repeat(3, 1fr) }
}
.foot__about p { margin-top: var(--s4); color: var(--muted); font-size: .94rem;
                 max-width: 22rem }
.foot h4 {
  font-family: var(--font); font-size: .78rem; font-weight: 650;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s4);
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3) }
.foot ul a { color: var(--ink-2); font-size: .94rem }
.foot ul a:hover { color: var(--green-700) }
.foot__rule { border-top: 1px solid var(--border); margin-block: var(--s7) var(--s5) }
.foot__bot {
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6);
  align-items: center; justify-content: space-between;
  font-size: .86rem; color: var(--muted);
}
.foot__bot nav { display: flex; flex-wrap: wrap; gap: var(--s4) }

/* --- 4.17 the panel: a centred card on its own page --------------------- */
/*
   Signup, login, "check your mail", the signer's landing. One shape for
   every page that is a single short form on an empty ground.
*/
.panel-page {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--soft);
}
.panel-page__bar { padding-block: var(--s5) }
.panel-page__main { display: grid; place-items: center; padding: var(--s6) var(--gutter) }
.panel-page__foot {
  padding-block: var(--s5); text-align: center;
  font-size: .84rem; color: var(--muted);
}
.panel {
  width: 100%; max-width: 27rem;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow);
  padding: clamp(1.75rem, 5vw, var(--s7));
}
.panel--wide { max-width: 38rem }
.panel__head { text-align: center; margin-bottom: var(--s6) }
.panel__head h1 { font-size: 1.5rem; margin-top: var(--s5) }
.panel__head p { margin-top: var(--s3); color: var(--muted); font-size: .95rem }
.panel__key {
  font-family: var(--font-mono); font-size: .85rem; word-break: break-all;
  background: var(--paper); border: 1px solid var(--border-2);
  border-radius: var(--r); padding: var(--s4); margin-block: var(--s4);
}
/* The quick-start command on the "you're in" page. Scrolls rather than
   wraps: a cURL with backslash continuations is copied whole, and a soft
   wrap in the middle of one is the difference between a command that runs
   and a command that looks like it should. */
.panel__code {
  font-family: var(--font-mono); font-size: .76rem; line-height: 1.55;
  background: var(--paper); border: 1px solid var(--border-2);
  border-radius: var(--r); padding: var(--s4); margin-block: var(--s3);
  overflow-x: auto; white-space: pre; -webkit-overflow-scrolling: touch;
}
/* A one-time code, and a recovery code in the same box: wide tracking so
   the digits are countable, and no six-character cap, because the day
   somebody loses their phone is the day they type a longer one. */
input.code {
  font-family: var(--font-mono); font-size: 1.4rem; letter-spacing: .3em;
  text-align: center; padding: .5em .2em;
}
/* Signing in with Google. Bordered rather than filled: it is an
   alternative, not the recommendation. */
.sso {
  display: flex; align-items: center; justify-content: center; gap: .6em;
  width: 100%; padding: .75em; margin-top: var(--s4);
  border: 1px solid var(--border-2); border-radius: var(--r);
  color: var(--ink); background: var(--white); font-size: .94rem;
  font-weight: 600;
}
.sso:hover { background: var(--paper); border-color: var(--border-2);
             color: var(--ink); text-decoration: none }
.sso svg { width: 1.15rem; height: 1.15rem }

.panel__who {
  font-size: .88rem; color: var(--muted);
  padding-bottom: var(--s4); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--border);
}
.panel__who strong { color: var(--ink) }

.panel__foot {
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--border);
  text-align: center; font-size: .9rem; color: var(--muted);
}

/* --- 4.18 forms --------------------------------------------------------- */
.field { display: block; margin-bottom: var(--s5) }
.field > span {
  display: block; font-size: .88rem; font-weight: 600;
  margin-bottom: var(--s2); color: var(--ink);
}
.field .hint { font-weight: 400; color: var(--muted); font-size: .84rem;
               margin-top: var(--s2); display: block }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], select, textarea {
  width: 100%; font-family: var(--font); font-size: 1rem; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border-2); border-radius: var(--r);
  padding: .7em .85em;
  transition: border-color var(--t), box-shadow var(--t);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--green); box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: var(--muted) }

.note {
  border-radius: var(--r); padding: var(--s4) var(--s5);
  font-size: .93rem; border: 1px solid var(--border); background: var(--paper);
  color: var(--ink-2);
}
.note--error { background: #fdf1ee; border-color: #f6cfc5; color: #8c2a15 }
.note--ok { background: var(--soft); border-color: var(--tint); color: #1d5c11 }

/* --- 4.19 utilities. Few, and named for what they do -------------------- */
.muted { color: var(--muted) }
.micro { font-size: .84rem; line-height: 1.55 }
.center { text-align: center }
.mt-4 { margin-top: var(--s4) }
.mt-5 { margin-top: var(--s5) }
.mt-6 { margin-top: var(--s6) }
.mt-7 { margin-top: var(--s7) }