/* Larri Design public pages other than the homepage: sign-in, meet, confirmation, privacy, terms.
   Bump ?v= in partials/site-head.html when this changes: Cloudflare caches /static for a day.
   All fonts are self-hosted under /static/fonts; do not add Google Fonts links. */

@font-face { font-family:"Epilogue"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/static/fonts/epilogue-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --abyss:#03121a; --ink:#0a2230; --floor:#010a0f;
  --card:#eef3f4; --white:#eef7fb; --ink-2:#3d5562; --hair:rgba(10,34,48,.18);
  --aqua:#4fd8e6; --aqua-hi:#7fe6ef; --sea:#0a6b7a; --sky:#b5cdd8; --mist:#9fb8c4;
  --error:#b42318; --ok:#1d6b3a;
  --font:"Epilogue", ui-sans-serif, system-ui, sans-serif;
  --shell:min(1280px, 100% - clamp(2.5rem, 7vw, 8rem));
  --stock:url("/static/img/card.webp?v=1");
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; background:var(--floor); scrollbar-color:var(--aqua) var(--abyss); }
body { margin:0; min-height:100vh; display:flex; flex-direction:column;
  font-family:var(--font); font-size:1.06rem; line-height:1.6; color:var(--white);
  background:var(--abyss) var(--stock); background-blend-mode:multiply; -webkit-font-smoothing:antialiased; }
main { flex:1; }
::selection { background:var(--aqua); color:var(--abyss); }
a { color:inherit; text-decoration-thickness:1.5px; text-underline-offset:3px; }
:focus-visible { outline:3px solid var(--aqua); outline-offset:3px; border-radius:6px; }
.panel :focus-visible { outline-color:var(--ink); }
[hidden] { display:none !important; }
.shell { width:var(--shell); margin-inline:auto; }

/* masthead */
.site-header .shell { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:1.1rem; border-bottom:1px solid rgba(238,247,251,.18); }
.wordmark { display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; white-space:nowrap;
  font:900 1.3rem/1 var(--font); letter-spacing:-.035em; }
.wordmark-mark { display:inline-grid; place-items:center; flex:none; width:1.8rem; height:1.8rem; border-radius:.5rem;
  background:var(--aqua); color:var(--abyss); font:900 1.2rem/1 var(--font); transform:rotate(-6deg); }
.site-nav { display:flex; align-items:center; gap:1.4rem; }
.site-nav a:not(.button) { display:inline-flex; align-items:center; min-height:2.75rem; padding-inline:.25rem;
  font-weight:600; text-decoration:none; white-space:nowrap; }
.site-nav a:not(.button):hover { text-decoration:underline; }

/* buttons */
.button { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:3.3rem; padding:0 1.7rem;
  border:0; border-radius:999px; background:var(--aqua); color:var(--abyss); text-decoration:none; white-space:nowrap; cursor:pointer;
  font:700 1.1rem/1 var(--font); letter-spacing:-.01em; box-shadow:0 10px 20px -12px rgba(0,8,12,.7);
  transition:background .2s, transform .2s var(--ease), box-shadow .2s; }
.button:hover { background:var(--aqua-hi); transform:translateY(-2px); }
.button:active { transform:translateY(1px); }
.button[disabled] { opacity:.55; cursor:progress; transform:none; }
.button-small { min-height:2.75rem; padding:0 1.15rem; font-size:1rem; }

/* layout */
.page { padding-block:clamp(3rem,7vw,6rem) clamp(4rem,8vw,7rem); }
.page .shell { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,32rem); gap:clamp(2.5rem,6vw,6rem); align-items:start; }
h1 { margin:0; font-weight:900; font-size:clamp(2.7rem,5.6vw,5rem); line-height:.98; letter-spacing:-.04em; text-wrap:balance; }
.page-intro p { margin:1.4rem 0 0; max-width:36rem; color:var(--sky); font-size:clamp(1.1rem,1.4vw,1.25rem); line-height:1.55; text-wrap:pretty; }
.page-intro p a { color:var(--aqua); font-weight:600; }
.page-intro strong { color:var(--white); }

/* steps on /meet */
.steps-title { margin:clamp(2.2rem,4vw,3rem) 0 0; color:var(--aqua); font-size:.85rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.steps { list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:0; counter-reset:step; max-width:36rem; }
.steps li { position:relative; display:grid; grid-template-columns:2.6rem 1fr; gap:1.1rem; align-items:start; padding-bottom:1.6rem; counter-increment:step; }
.steps li:not(:last-child)::after { content:""; position:absolute; left:calc(1.3rem - 1px); top:2.9rem; bottom:.3rem; width:2px;
  background:linear-gradient(var(--aqua), rgba(79,216,230,.15)); }
.steps li:last-child { padding-bottom:0; }
.steps li > div { padding-top:.45rem; }
.steps li::before { content:counter(step); display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%;
  background:var(--aqua); color:var(--abyss); font:900 1.15rem/1 var(--font); font-variant-numeric:tabular-nums; }
.steps strong { display:block; color:var(--white); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; line-height:1.3; }
.steps span { display:block; margin-top:.2rem; color:var(--mist); font-size:1rem; line-height:1.5; }

/* the paper panel */
.panel { position:relative; padding:clamp(1.6rem,3vw,2.4rem); color:var(--ink); background:var(--card) var(--stock);
  border-radius:1rem; border-top:.7rem solid var(--aqua); box-shadow:0 30px 50px -30px rgba(0,6,10,.9); color-scheme:light; }
.panel ::selection { background:var(--aqua); color:var(--abyss); }
.form { display:grid; gap:1.15rem; }
.field { display:grid; gap:.4rem; }
.field > label { font-size:.97rem; font-weight:700; }
.field-optional { font-weight:400; color:var(--ink-2); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.input { width:100%; min-height:3.1rem; padding:.75rem 1rem; font:inherit; font-size:1rem; color:var(--ink);
  background:#fff; border:2px solid rgba(10,34,48,.2); border-radius:.75rem; transition:border-color .15s, box-shadow .15s; }
textarea.input { min-height:8.5rem; resize:vertical; line-height:1.5; }
.input::placeholder { color:#7b8d96; }
.input:hover { border-color:rgba(10,34,48,.4); }
.input:focus { outline:none; border-color:var(--sea); box-shadow:0 0 0 4px rgba(79,216,230,.45); }
.input:disabled { background:#e3eaec; color:var(--ink-2); }
.input.error { border-color:var(--error); }
.check { display:flex; align-items:center; gap:.6rem; min-height:2.75rem; font-size:.97rem; color:var(--ink-2); cursor:pointer; }
.check input { width:1.15rem; height:1.15rem; accent-color:var(--sea); }
.hint { font-size:.9rem; color:var(--ink-2); }
.form .button { width:100%; margin-top:.35rem; }
.form .button:focus-visible { outline-color:var(--ink); }
.notice { margin:0 0 1.15rem; padding:.85rem 1rem; border:2px solid currentColor; border-radius:.75rem; font-size:.97rem; }
.notice-ok { color:var(--ok); background:#eef7f0; }
.notice-error { color:var(--error); background:#fdf0ee; }
.form-links { display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin:1.4rem 0 0; padding-top:1.1rem; border-top:2px dashed var(--hair);
  font-size:.97rem; color:var(--ink-2); }
.form-links a { color:var(--sea); font-weight:700; }
.hp-field { position:absolute; left:-9999px; }
.turnstile { display:flex; justify-content:center; }
.turnstile:empty, .turnstile > .cf-turnstile:empty { display:none; }
.summary { display:grid; grid-template-columns:auto 1fr; gap:.7rem 1.5rem; margin:0; }
.summary dt { color:var(--ink-2); }
.summary dd { margin:0; font-weight:700; overflow-wrap:anywhere; }

/* legal pages */
.legal { padding-block:clamp(3rem,7vw,6rem) clamp(4rem,8vw,7rem); }
.legal .shell { max-width:52rem; }
.legal .updated { margin:1rem 0 clamp(2rem,4vw,3rem); color:var(--mist); }
.legal .doc { max-width:44rem; }
.legal .doc h2 { margin:2rem 0 .6rem; font-size:1.35rem; font-weight:800; letter-spacing:-.02em; line-height:1.25; }
.legal .doc h2:first-child { margin-top:0; }
.legal .doc p, .legal .doc li { color:var(--ink-2); }
.legal .doc p { margin:0 0 .9rem; }
.legal .doc ul { margin:0 0 .9rem; padding-left:1.3rem; }
.legal .doc li { margin-bottom:.35rem; }
.legal .doc li::marker { color:var(--sea); }
.legal .doc strong { color:var(--ink); }
.legal .doc a { color:var(--sea); font-weight:700; }

/* footer */
.site-footer { background:var(--floor); color:var(--mist); }
.site-footer .shell { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding-block:1.6rem; font-size:.95rem; }
.site-footer nav { display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; }
.site-footer a { color:var(--white); }

@media (max-width:900px) {
  .page .shell { grid-template-columns:1fr; }
  .panel { max-width:36rem; }
}
@media (max-width:560px) {
  body { font-size:1rem; }
  .site-nav { gap:.9rem; }
  .wordmark { font-size:1.15rem; gap:.5rem; }
  .field-row { grid-template-columns:1fr; }
}
@media (max-width:420px) {
  .site-nav a:not(.button) { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}