/* =====================================================================
   Jono — home.css

   Loaded by index.html ONLY, on top of site.css. Everything here is scoped
   to `body.home`, so privacy.html, terms.html and the account area keep the
   light/dark system theme they have always had and are not touched by any
   of this.

   The landing page commits to one look — white with the app's green —
   rather than following prefers-color-scheme. A marketing page is allowed a
   fixed identity; a legal page is not, because it has to be readable and
   printable wherever it is opened. A visitor whose system is in dark mode
   therefore gets a light page here and a dark one on /privacy, which is the
   deliberate trade rather than an oversight.

   Two constraints shape the implementation and neither is negotiable:

   1. `script-src 'self'` with no unsafe-inline. So the feature tabs are
      radio inputs and the FAQ is <details>. There is no JavaScript on this
      page except the language toggle every page already loads, and nothing
      here breaks if it fails.
   2. Nothing is fetched from a third party. No webfont, no CDN, no icon
      pack. Every mark on this page is markup, CSS or an inline <svg>.

   Two greens, and the difference matters. --brand (#16A34A) is the one text
   and borders use, because the app's #22C55E on white is around 2.3:1 and
   fails contrast at body sizes. --brand-bright (#22C55E) is the app's own
   BRAND from src/lib/theme.tsx and is used only where it is a fill or a
   glow behind something else, never as ink on white.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tokens

   These re-point the variables site.css already reads, so the shared
   .topbar, .foot, .btn and .langbar rules come out right without being
   rewritten. Anything home-only gets a --h- prefix.
   --------------------------------------------------------------------- */

body.home {
  --bg: #f4f6f5;
  --fg: #12291d;
  --muted: #5b6660;
  --line: #dbe5df;
  --card: #ffffff;
  --brand: #16a34a;
  --brand-bright: #22c55e;
  --brand-ink: #ffffff;
  --brand-soft: #e7f8ee;
  --link: #14532d;
  --shadow: 0 1px 2px rgba(18, 41, 29, .04), 0 14px 36px -18px rgba(18, 41, 29, .22);

  /* Frosted Mint, light. The home page is `color-scheme: light` and has no
     dark half, so these are the only values it ever takes. */
  --h-raise: rgba(255, 255, 255, .55);
  --h-edge: rgba(255, 255, 255, .7);
  --h-max: 68rem;
  --glass-bg: rgba(255, 255, 255, .55);
  --glass-line: rgba(255, 255, 255, .7);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, .8);
  --glass-blur: saturate(180%) blur(24px);

  /* The home page is light whatever the device says, so the mark's three
     stops are pinned here too — otherwise they would be inherited from
     `:root`, which does follow the scheme, and a dark-mode visitor would get
     the lifted-for-dark strokes on a light page. */
  --mark-1: #2a342d;
  --mark-2: #4b5a50;
  --mark-3: #22c55e;

  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
}

/* The Frosted Mint ground: one element, painted once, sitting under
   everything — cheaper and steadier than a gradient per section. The two glow
   blobs are radial gradients that fade to nothing rather than blurred
   circles, because a 60 px blur filter on a fixed layer is repainted on every
   scroll in some browsers and the picture is the same either way. */
body.home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(20rem 20rem at 92% 6%, rgba(34, 197, 94, .18), transparent 70%),
    radial-gradient(20rem 20rem at 4% 92%, rgba(34, 197, 94, .15), transparent 70%),
    linear-gradient(160deg, #eaf5ee 0%, #cdeed9 45%, #f4f6f5 100%);
}

body.home .wrap-wide,
body.home .h-in { max-width: var(--h-max); }

/* ---------------------------------------------------------------------
   Shared home furniture
   --------------------------------------------------------------------- */

.h-in { margin: 0 auto; padding-inline: 1.25rem; width: 100%; }

/* Small uppercase section label with a rule. */
.h-eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 1.1rem;
}
.h-eyebrow::before {
  content: ""; width: 2rem; height: 1px; flex: none;
  background: var(--brand); opacity: .55;
}
.h-eyebrow.is-centred { justify-content: center; }
.h-eyebrow.is-centred::after {
  content: ""; width: 2rem; height: 1px; flex: none;
  background: var(--brand); opacity: .55;
}

/* Display type. clamp() rather than breakpoints: the headline is the one
   thing on the page that has to work at every width without a decision. */
/* Scoped to body.home deliberately. site.css styles the hero headline as
   `.hero h1`, which outranks a bare `.h-display` — so an unscoped rule here
   loses and the headline comes out at body size. */
body.home .h-display {
  font-size: clamp(2.1rem, 6.4vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}
.h-display .on { color: var(--brand); display: block; }

.h-title {
  font-size: clamp(1.7rem, 4.4vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 800;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.h-title .on { color: var(--brand); }

.h-lede {
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 46ch;
  margin: 1.15rem 0 0;
}

body.home section { padding-block: clamp(4rem, 9vw, 7.5rem); }
body.home section + section { padding-top: 0; }

/* A hairline that fades out at both ends, used between the big blocks. */
.h-rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

/* ---------------------------------------------------------------------
   Top bar — the shared .topbar, floated and rounded on this page only
   --------------------------------------------------------------------- */

body.home .topbar {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 0; background: transparent;
  padding: .85rem 1.25rem 0;
}
body.home .topbar-in {
  max-width: 58rem; padding: .6rem .7rem .6rem 1.15rem;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset), 0 8px 26px -18px rgba(18, 41, 29, .5);
  gap: .75rem;
}
body.home .topbar nav { margin-inline: auto; gap: 1.4rem; }
body.home .brand { margin-right: 0; }

@media (max-width: 46rem) {
  body.home .topbar-in { border-radius: 18px; }
  body.home .topbar nav { margin-inline: 0; gap: 1rem; }
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

body.home .btn {
  border-radius: 999px;
  background: var(--glass-bg);
  border-color: var(--glass-line);
  padding: .78rem 1.4rem;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
body.home .btn:hover { background: rgba(255, 255, 255, .78); border-color: #ffffff; }
body.home .btn-primary {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
  box-shadow: 0 12px 26px -14px rgba(22, 163, 74, .8);
}
body.home .btn-primary:hover { background: #15803d; border-color: #15803d; }
body.home .btn-lg { padding: .95rem 1.7rem; font-size: 1rem; }

/* The little arrow marking a button as going somewhere. Drawn, not a font
   glyph, so it cannot arrive as a missing box on a system without it. */
.h-arrow { width: .62em; height: .62em; margin-left: .55em; vertical-align: -.02em; }
.h-arrow path {
  stroke: currentColor; stroke-width: 2.4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */

body.home .hero { padding: clamp(3.5rem, 8vw, 6.5rem) 1.25rem clamp(3rem, 6vw, 5rem); }
body.home .hero-in {
  max-width: var(--h-max);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
body.home .hero h1 { max-width: none; }
body.home .hero p.sub { font-size: 1.06rem; max-width: 44ch; margin: 1.15rem 0 2.1rem; }
body.home .hero .cta { gap: .65rem; }

@media (max-width: 60rem) {
  body.home .hero-in { grid-template-columns: minmax(0, 1fr); }
  .hero-art { order: 2; }
}

/* Note under the hero buttons */
.h-fineprint {
  display: flex; align-items: center; gap: .5rem;
  color: var(--muted); font-size: .88rem; margin: 1.35rem 0 0;
}
.h-dot {
  width: .45rem; height: .45rem; border-radius: 50%; flex: none;
  background: var(--brand-bright); box-shadow: 0 0 0 .28rem rgba(34, 197, 94, .18);
}

/* ---------------------------------------------------------------------
   The diary mock — hero artwork, built from markup

   Not a screenshot: the real ones do not exist yet, and a picture of a UI
   goes stale the day the UI changes. This is the shape of the diary, drawn
   in the page, and it costs nothing to keep true.
   --------------------------------------------------------------------- */

.hero-art { position: relative; }

.mock {
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  padding: .9rem;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-line);
  box-shadow: var(--glass-inset), var(--shadow);
}
.mock-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: 0 .3rem .8rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}
.mock-bar .sp { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }

.mock-cols {
  display: grid; grid-template-columns: 2.6rem repeat(3, minmax(0, 1fr));
  gap: .4rem; padding-top: .8rem;
}
.mock-head { color: var(--fg); font-size: .72rem; font-weight: 700; padding-bottom: .35rem; text-align: center; }
.mock-head span { display: block; font-weight: 500; opacity: .55; font-size: .68rem; }
.mock-time { color: var(--muted); font-size: .68rem; text-align: right; padding-right: .25rem; line-height: 1.9rem; }
.mock-cell { border-top: 1px dashed #eceeed; min-height: 1.9rem; padding: .15rem 0; }

.appt {
  border-radius: 8px; padding: .3rem .45rem; line-height: 1.25;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: .72rem;
}
.appt b { display: block; font-weight: 600; }
.appt small { color: var(--muted); font-size: .66rem; }
.appt.is-brand {
  border-color: rgba(22, 163, 74, .45);
  background: var(--brand-soft);
}
.appt.is-open {
  border-style: dashed;
  border-color: rgba(22, 163, 74, .5);
  background: transparent;
  color: var(--brand);
}

/* A floating chip overlapping the mock's corner. */
.mock-chip {
  position: absolute; right: -.4rem; bottom: -1.1rem;
  display: flex; align-items: center; gap: .55rem;
  border: 1px solid var(--glass-line);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: 999px;
  padding: .5rem .95rem .5rem .6rem;
  font-size: .8rem; font-weight: 600;
  box-shadow: 0 16px 34px -18px rgba(12, 18, 16, .45);
}
@media (max-width: 60rem) { .mock-chip { right: 1rem; } }

/* ---------------------------------------------------------------------
   The rail — appointment cards on a line
   --------------------------------------------------------------------- */

.rail-wrap { position: relative; margin-top: clamp(2rem, 5vw, 3.5rem); }
.rail-wrap::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22, 163, 74, .45) 12%, rgba(22, 163, 74, .45) 88%, transparent);
}
.rail {
  position: relative;
  display: flex; gap: .9rem;
  overflow-x: auto;
  padding: .6rem .25rem 1.1rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: center; }

.slip {
  flex: 0 0 13.5rem;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  padding: .85rem .95rem;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-line);
  box-shadow: var(--glass-inset), var(--shadow);
}
.slip-top { display: flex; align-items: center; gap: .6rem; }
.slip-av {
  width: 2rem; height: 2rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-weight: 700; font-size: .82rem;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid rgba(22, 163, 74, .3);
}
.slip-top b { font-weight: 600; font-size: .9rem; display: block; }
.slip-top small { color: var(--muted); font-size: .76rem; }
.slip-foot {
  display: flex; align-items: center; justify-content: flex-end;
  margin-top: .85rem; padding-top: .6rem;
  border-top: 1px solid var(--line);
  font-size: .74rem; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}
.slip-foot time { color: var(--fg); letter-spacing: 0; font-size: .84rem; }
.slip.is-open { border-style: dashed; border-color: rgba(22, 163, 74, .45); box-shadow: none; }
.slip.is-open .slip-av { background: transparent; border-style: dashed; }
.slip.is-open .slip-foot { color: var(--brand); }

/* ---------------------------------------------------------------------
   Feature tabs — radio inputs, no script

   Every panel is in the page at all times; the radios decide which one is
   displayed. Keyboard behaviour comes free from the radio group: arrow keys
   move between tabs and change the panel, which is what a real tablist does
   and what a div-and-JS version usually gets wrong.
   --------------------------------------------------------------------- */

.tabs { position: relative; }

.tabs > input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; margin: 0;
}

.tab-list {
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}
.tab {
  display: inline-flex; align-items: baseline; gap: .5rem;
  border: 1px solid #d8ddda; border-radius: 999px;
  background: #ffffff;
  padding: .5rem 1.05rem;
  font-size: .88rem; font-weight: 600;
  color: var(--muted); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
  user-select: none;
}
.tab:hover { color: var(--fg); border-color: #b6bfba; }
.tab i {
  font-style: normal; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; opacity: .6;
}

.panel { display: none; }
.panel-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 58rem) { .panel-in { grid-template-columns: minmax(0, 1fr); } }

/* One pair of rules per tab. Verbose, but explicit beats :has() here — this
   has to work in whatever browser a barber opens it in, not the newest. */
#tab1:checked ~ .tab-list #lab1,
#tab2:checked ~ .tab-list #lab2,
#tab3:checked ~ .tab-list #lab3,
#tab4:checked ~ .tab-list #lab4 {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
  box-shadow: 0 10px 22px -14px rgba(22, 163, 74, .8);
}
#tab1:checked ~ .tab-list #lab1 i,
#tab2:checked ~ .tab-list #lab2 i,
#tab3:checked ~ .tab-list #lab3 i,
#tab4:checked ~ .tab-list #lab4 i { opacity: .8; }

#tab1:checked ~ .panels #panel1,
#tab2:checked ~ .panels #panel2,
#tab3:checked ~ .panels #panel3,
#tab4:checked ~ .panels #panel4 { display: block; }

/* The radios are off-screen, so the focus ring has to be put back by hand
   on whichever label belongs to the focused input. Without this the tabs
   are unusable by keyboard — reachable, but with nothing visible moving. */
#tab1:focus-visible ~ .tab-list #lab1,
#tab2:focus-visible ~ .tab-list #lab2,
#tab3:focus-visible ~ .tab-list #lab3,
#tab4:focus-visible ~ .tab-list #lab4 {
  outline: 2px solid var(--brand); outline-offset: 3px;
}

/* Small marks inside a panel */
.h-tags { display: flex; gap: .45rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.h-tag {
  font-size: .74rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .2rem .7rem;
  background: #ffffff;
}

/* ---------------------------------------------------------------------
   Mock animation

   Pure CSS, no script: the CSP forbids inline scripts, same reason the
   tabs above are radio inputs. A panel goes from display:none to block
   when its radio is checked, and an animation on a newly-displayed
   element always starts fresh from its first keyframe — so this replays
   on every tab switch for free, with nothing to wire up.

   Each animation only specifies a `from` keyframe. With no `to`, the
   missing end state resolves to whatever the element's own non-animation
   style already says (its inline width, opacity, or default transform) —
   so the elements are correct even with the animation switched off below.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .bar-fill { animation: mockBarGrow .7s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes mockBarGrow { from { width: 0; } }

  .reveal { animation: mockRise .5s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes mockRise { from { opacity: 0; transform: translateY(6px); } }
}

/* ---------------------------------------------------------------------
   Panels and steps
   --------------------------------------------------------------------- */

.h-panel {
  border: 1px solid var(--glass-line);
  border-radius: 22px;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: var(--glass-line);
  box-shadow: var(--glass-inset), var(--shadow);
}
body.home .steps { margin-bottom: .5rem; }
body.home .steps li::before {
  background: var(--brand); color: var(--brand-ink); border-color: var(--brand);
}
body.home .steps li:last-child { padding-bottom: 0; }
body.home .note { background: var(--card); border-color: var(--line); }
body.home .note-warn {
  background: var(--brand-soft);
  border-color: rgba(22, 163, 74, .3);
}
body.home .card {
  background: var(--glass-bg);
  border-color: var(--glass-line);
  border-radius: 14px;
  box-shadow: var(--glass-inset);
}

/* ---------------------------------------------------------------------
   FAQ — <details>, so it works with no script at all
   --------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem .25rem;
  font-weight: 600; font-size: 1.02rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }

/* The plus/minus is two rules, so it can rotate. A glyph would depend on a
   font being present. */
.faq .pm { margin-left: auto; position: relative; width: 1rem; height: 1rem; flex: none; }
.faq .pm::before, .faq .pm::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease;
}
.faq .pm::after { transform: rotate(90deg); }
.faq details[open] .pm { color: var(--brand); }
.faq details[open] .pm::after { transform: rotate(0deg); }
.faq .answer { padding: 0 3rem 1.4rem .25rem; color: var(--muted); max-width: 62ch; }
.faq .answer p { color: inherit; margin: 0 0 .8rem; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Closing call to action
   --------------------------------------------------------------------- */

.h-close { text-align: center; }
.h-close .h-lede { margin-inline: auto; }
.h-close .cta { justify-content: center; margin-top: 2rem; }

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */

body.home .foot { border-top: 1px solid var(--line); margin-top: 0; }

/* ---------------------------------------------------------------------
   Motion

   Nothing here animates on load, so there is little to disable — but the
   transitions above are turned off for anyone who has asked for that.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.home *, body.home *::before, body.home *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}