/* Vagabond Studio.
   Colours and fonts follow the general design contract of the Vagabond Studio tools (public/_tools/README.md):
   colour variables --bg, --text, --muted, --dark, --light, --accent (plus derived ones), and seven text roles
   whose font, size, weight and colour can be changed live with the font and colour switcher (test site only). */
/* Self-hosted fonts from Fontsource (SIL Open Font License), Latin and Latin Extended: no requests to Google. */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(/fonts/playfair-display-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-display: swap; font-weight: 300;
  src: url(/fonts/lato-latin-ext-300-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/fonts/lato-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/fonts/lato-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-display: swap; font-weight: 900;
  src: url(/fonts/lato-latin-ext-900-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(/fonts/playfair-display-latin-wght-normal.woff2) format('woff2-variations'); 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; }
@font-face { font-family: 'Lato'; font-style: normal; font-display: swap; font-weight: 300;
  src: url(/fonts/lato-latin-300-normal.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; }
@font-face { font-family: 'Lato'; font-style: normal; font-display: swap; font-weight: 400;
  src: url(/fonts/lato-latin-400-normal.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; }
@font-face { font-family: 'Lato'; font-style: normal; font-display: swap; font-weight: 700;
  src: url(/fonts/lato-latin-700-normal.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; }
@font-face { font-family: 'Lato'; font-style: normal; font-display: swap; font-weight: 900;
  src: url(/fonts/lato-latin-900-normal.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 {
  /* Standard design of Vagabond Studio (9 October 2026): Playfair Display + Lato, colours "Sea glass" (soft teal, copper). */
  --dark: #2E5450; --dark-2: #24423E; --on-dark: #C4CFCC;
  --bg: #F6F8F6; --light: #DFE9E6; --light-2: #C2CCC9;
  --accent: #A9653F; --accent-2: #905636; --accent-soft: #E1C9BC;
  --text: #1C2826; --muted: #5D6664; --line: #B8C2C0;
  --font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-head: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --wrap: 1120px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 500;
  font-size: 17.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 600; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 600; color: var(--accent); }

/* Header */
.top { background: var(--dark); color: var(--bg); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.logo { text-decoration: none; display: flex; align-items: baseline; gap: 8px; font-size: 21px; font-weight: 600; letter-spacing: .02em; }
.logo small { font-size: 13px; font-weight: 500; color: var(--on-dark); letter-spacing: .1em; text-transform: uppercase; }
.top nav { display: flex; align-items: center; gap: 18px; font-size: 15.5px; }
.top nav a { text-decoration: none; color: var(--on-dark); white-space: nowrap; }
.logo { white-space: nowrap; }
.top nav a:hover, .top nav a[aria-current] { color: var(--bg); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none;
  border-radius: 999px; padding: 11px 26px; background: var(--accent); color: #fff; font-weight: 600; font-size: 16px; }
.btn:hover { background: var(--accent-2); }
.btn.ghost { background: transparent; color: var(--dark); border: 1.5px solid var(--dark); }
.btn.ghost:hover { background: var(--dark); color: var(--bg); }
.top .btn.ghost { color: var(--bg); border-color: var(--on-dark); padding: 8px 18px; font-size: 15px; }
.top .btn.ghost:hover { background: var(--bg); color: var(--dark); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ==========================================================================
   Layout (10 October 2026): signed out hero; signed in guide, setup, chat; questions; usage; people.
   Every visible text belongs to one of the seven text roles (see the end of this block and public/_tools/README.md).
   ========================================================================== */
[hidden] { display: none !important; }
body.is-loading .for-in, body.is-loading .for-out, body.is-loading .for-admin { visibility: hidden; }
body:not(.is-admin) .for-admin { display: none; }
body:not(.signed-in) nav .for-in { display: none; }
body.pays .pays-free, body:not(.pays) .pays-yes { display: none; }

.hero { background: var(--dark); color: var(--bg); padding: 64px 0 72px; }
.hero h1 { max-width: 18ch; margin-top: 10px; }
.hero .lead { margin-top: 16px; max-width: 50ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-note { margin-top: 14px; max-width: 60ch; }

.btn.sm { padding: 8px 16px; }
.small { color: var(--c5, var(--muted)); }
.mono { overflow-wrap: anywhere; }

/* The guide */
.guide { padding: 40px 0 8px; }
.guide-text { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 34px clamp(20px, 5vw, 56px) 30px; max-width: 860px; }
.guide-text > * + * { margin-top: 14px; }
.guide-text h2 { margin-top: 36px; }
.guide-text ul, .guide-text ol { padding-left: 22px; display: grid; gap: 6px; }
.guide-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--light); }
.guide-end { padding-top: 18px; border-top: 1px solid var(--light); margin-top: 28px !important; }
.callout { background: var(--light); border-radius: 16px; padding: 18px 20px; }
.callout > * + * { margin-top: 8px; }
.video-slot { margin: 18px 0 0; }
.video-ph { aspect-ratio: 16 / 9; max-width: 640px; border: 1.5px dashed var(--line); border-radius: 16px; display: grid; place-items: center; text-align: center; padding: 24px; background: var(--bg); }
#nav-guide.on { color: var(--c-light, var(--bg)); }

/* Setup steps */
.setup { padding: 36px 0 8px; }
.setup-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.stps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
/* The three steps: same height, the same teal from very light to a little darker. */
#stp1 { background: color-mix(in srgb, var(--dark) 4%, #fff); }
#stp2 { background: color-mix(in srgb, var(--dark) 10%, #fff); }
#stp3 { background: color-mix(in srgb, var(--dark) 17%, #fff); }
.stp { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px; display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.stp .num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--light); color: var(--dark); }
.stp.done .num { background: var(--dark); color: var(--on-dark); }
.stp.done .num { font-size: 0; }
.stp.done .num::before { content: "\2713"; font-size: 16px; }
.stp.waiting { opacity: .7; }
.stp-body > * + * { margin-top: 10px; }
/* A line between the explanation and the buttons, in all three steps. */
.stp-body > h3 + p { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
/* Step 1 has two parts (a Cloudflare account, then Deploy), each with its own button. */
.stp-sub { margin: 0; padding-left: 20px; display: grid; gap: 16px; list-style: lower-alpha; }
.stp-sub > li > * + * { margin-top: 10px; }
.stp-body > .stp-sub { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.stp-act { display: flex; flex-wrap: wrap; gap: 8px; }
.stp-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.stp-form .field { flex: 1; min-width: 180px; }
.stp-done { background: var(--light); border-radius: 10px; padding: 8px 12px; overflow-wrap: anywhere; }
.stp.done .stp-act, .stp.done #host-form { display: none; }
.setup.ready .stp:not(.done) { opacity: 1; }
.setup.ready .stps { grid-template-columns: repeat(3, 1fr); }
.setup.ready .stp.done > .stp-body > p:not(.stp-done), .setup.ready .stp.done details, .setup.ready .stp.done .stp-sub { display: none; }
.opt { margin-left: 6px; color: var(--c5, var(--muted)); }
.more summary { cursor: pointer; color: var(--accent-2); }
.more p { margin-top: 8px; }
.setup-msg { margin-top: 10px; min-height: 1.5em; }
.dom-res { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.dom-res li { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--light); padding: 4px 0; }
.dom-res li.free strong { color: #2F6B45; }
.dom-res li.taken { opacity: .6; }
.field { display: block; }
.field span { display: block; margin-bottom: 5px; }
.field input { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--bg); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding-bottom: 10px; }
.check input { width: 18px; height: 18px; accent-color: var(--dark); }

/* Chat */
.chat-sec { padding: 28px 0 24px; }
.chat { background: #fff; border: 1px solid var(--line); border-radius: 22px; display: flex; flex-direction: column; height: min(680px, 80vh); overflow: hidden; max-width: 920px; margin: 0 auto; box-shadow: 0 12px 40px rgba(28, 40, 38, .08); }
.chat-head { background: var(--light); padding: 12px 18px; display: flex; align-items: center; gap: 10px; color: var(--c2, var(--dark)); }
.chat-head .dot { width: 9px; height: 9px; border-radius: 50%; background: #4E8A5F; }
.chat-spend { margin-left: auto; }
.chat-head button { background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; }
.chat-foot { max-width: 920px; margin: 10px auto 0; text-align: center; }
.msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 88%; padding: 11px 15px; border-radius: 16px; overflow-wrap: anywhere; }
.msg p + p, .msg p + ul, .msg ul + p { margin-top: 8px; }
.msg ul { margin: 6px 0 0; padding-left: 20px; }
.msg.bot { background: var(--bg); border: 1px solid var(--light); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.me { background: var(--dark); align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.note { align-self: center; background: none; text-align: center; max-width: 92%; }
.msg.typing { color: var(--muted); font-style: italic; }
.msg-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.starters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }
.starters button { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.starters button:hover { border-color: var(--accent); color: var(--accent-2); }
.att-list { display: flex; gap: 8px; padding: 8px 14px 0; flex-wrap: wrap; }
.att { position: relative; }
.att img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
.att button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--dark); color: var(--bg); cursor: pointer; line-height: 1; }
.composer { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--light); align-items: flex-end; }
.att-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); color: var(--dark); cursor: pointer; flex: none; background: var(--bg); }
.att-btn:hover { border-color: var(--accent); color: var(--accent-2); }
.composer textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; min-height: 46px; max-height: 180px; background: var(--bg); }
.composer textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.composer .btn { padding: 11px 20px; }

/* Questions */
.faq { padding: 40px 0 64px; }
.faq h2 { margin-bottom: 20px; }
.faq-list { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 0 20px; }
.faq summary { cursor: pointer; padding: 15px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 700; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding-bottom: 14px; }
.faq details p + p { margin-top: -4px; }

/* Inner pages: heading band, panels, usage, people, sign-in messages */
.page-head { background: var(--dark); color: var(--bg); padding: 48px 0 40px; }
.page-head p { margin-top: 10px; max-width: 60ch; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 24px 26px; margin-top: 22px; max-width: 860px; }
.panel > * + * { margin-top: 12px; }
.panel.more summary { cursor: pointer; }
.use-big { display: flex; gap: 40px; flex-wrap: wrap; }
.use-big strong { display: block; }
.use-table { border-collapse: collapse; width: 100%; max-width: 420px; }
.use-table th, .use-table td { text-align: left; padding: 6px 0; border-bottom: 1px solid var(--light); }
.adm-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.adm-add .field { flex: 1; min-width: 200px; }
.people { display: grid; gap: 12px; margin-top: 22px; max-width: 860px; }
.pp { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; display: grid; gap: 8px; }
.pp-head { display: flex; align-items: center; gap: 10px; }
.tag { background: var(--light); color: var(--dark); border-radius: 999px; padding: 2px 10px; }
.pp-spend { display: flex; gap: 18px; flex-wrap: wrap; }
.pp-spend .owes { color: var(--accent-2); }
.pp-acts { display: flex; flex-wrap: wrap; gap: 6px; }
main > .wrap:last-child { padding-bottom: 56px; }
.wz { max-width: 760px; margin-top: 28px; }
.wz-step { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 28px 30px 24px; margin-bottom: 56px; }
.note-page > * + * { margin-top: 14px; }
.join-steps { padding-left: 22px; display: grid; gap: 6px; }

footer { border-top: 1px solid var(--light); padding: 22px 0 30px; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer a { text-decoration: none; }

.acct { display: inline-flex; align-items: center; gap: 14px; }
.acct a:not(.btn) { color: var(--on-dark); text-decoration: none; white-space: nowrap; }
.acct a:not(.btn):hover { color: var(--c-light, var(--bg)); }
.acct-me { display: inline-flex; align-items: center; gap: 8px; color: var(--c-light, var(--bg)); }
.acct-me img { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--on-dark); }
.acct .btn.ghost { color: var(--c-light, var(--bg)); border-color: var(--on-dark); padding: 8px 18px; }
.acct .btn.ghost:hover { background: var(--bg); color: var(--dark); }

@media (max-width: 900px) {
  .stps, .setup.ready .stps { grid-template-columns: 1fr; }
}
.acct-drop .acct-nav { display: none; }
.top nav > a.menu-only { display: none; }
.acct-drop .acct-nav.menu-only { display: block; }
@media (max-width: 560px) {
  .hide-s { display: none !important; }
  .top nav > a { display: none; }
  .acct-drop .acct-nav { display: block; }
  .top nav { gap: 10px; }
  .top .wrap { padding: 0 14px; }
  .acct { gap: 10px; }
  .acct-me span { display: none; }
  .logo small { display: none; }
  .chat { height: 78vh; border-radius: 18px; }
  .msg { max-width: 94%; }
  .chat-spend { display: none; }
  .guide-text { border-radius: 18px; }
  .wz-step { padding: 22px 18px 18px; }
  .panel { padding: 20px 18px; }
}

/* ==========================================================================
   Text roles for the font and colour switcher. 1 large headings, 2 subheadings, 3 lead text, 4 body text,
   5 small print, 6 menu, 7 buttons. Per role n: --fN font, --sN size factor, --wN weight change, --iN italic,
   --tN capitals, --lN letter spacing, --hN line height, --cN colour on light backgrounds; --c-light on dark.
   ========================================================================== */
/* 4 body text */
body { font-family: var(--f4, var(--font)); font-size: calc(17.5px * var(--s4, 1)); font-weight: calc(500 + var(--w4, 0));
  font-style: var(--i4, normal); text-transform: var(--t4, none); letter-spacing: var(--l4, normal); line-height: var(--h4, 1.6); color: var(--c4, var(--text)); }
:is(.msg, .composer textarea, .field input, .stp p, .stp-done, .callout p, .faq details p, .pp p:not(.small), .use-table td, .dom-res strong, .check, .more p) {
  font-family: var(--f4, var(--font)); font-size: calc(16px * var(--s4, 1)); font-weight: calc(500 + var(--w4, 0)); font-style: var(--i4, normal);
  text-transform: var(--t4, none); letter-spacing: var(--l4, normal); line-height: var(--h4, 1.55); }
.msg.me { color: var(--c-light, var(--bg)); }

/* 1 large headings */
:is(.hero h1, .page-head h1, .guide-text h2, .setup-head h2, .faq h2, .panel h2, .wz-step h2) { font-family: var(--f1, var(--font-head)); font-weight: calc(600 + var(--w1, 0));
  font-style: var(--i1, normal); text-transform: var(--t1, none); letter-spacing: var(--l1, normal); line-height: var(--h1, 1.2); }
.hero h1 { font-size: calc(clamp(34px, 5vw, 54px) * var(--s1, 1)); color: var(--c-light, var(--bg)); }
.page-head h1 { font-size: calc(clamp(30px, 4vw, 44px) * var(--s1, 1)); color: var(--c-light, var(--bg)); }
:is(.guide-text h2, .setup-head h2, .faq h2, .wz-step h2) { font-size: calc(clamp(25px, 3vw, 32px) * var(--s1, 1)); color: var(--c1, var(--dark)); }
.panel h2 { font-size: calc(24px * var(--s1, 1)); color: var(--c1, var(--dark)); }

/* 2 subheadings */
:is(.callout h3, .stp h3, .faq summary, .chat-head, .pp-head h3, .wz-step h3) { font-family: var(--f2, var(--font)); font-weight: calc(700 + var(--w2, 0)); font-style: var(--i2, normal);
  text-transform: var(--t2, none); letter-spacing: var(--l2, normal); line-height: var(--h2, 1.3); color: var(--c2, var(--dark)); }
:is(.callout h3, .stp h3, .pp-head h3, .wz-step h3) { font-size: calc(19px * var(--s2, 1)); }
.faq summary { font-size: calc(18px * var(--s2, 1)); font-weight: calc(600 + var(--w2, 0)); }
.chat-head { font-size: calc(15.5px * var(--s2, 1)); }

/* 3 lead text */
:is(.hero .lead, .page-head p, .guide-text .hi, .use-big strong) { font-family: var(--f3, var(--font)); font-weight: calc(500 + var(--w3, 0)); font-style: var(--i3, normal);
  text-transform: var(--t3, none); letter-spacing: var(--l3, normal); line-height: var(--h3, 1.5); }
.hero .lead { font-size: calc(clamp(18px, 2vw, 21px) * var(--s3, 1)); color: var(--c-light, var(--on-dark)); }
.page-head p { font-size: calc(18px * var(--s3, 1)); color: var(--c-light, var(--on-dark)); }
.guide-text .hi { font-size: calc(21px * var(--s3, 1)); color: var(--c3, var(--dark)); }
.use-big strong { font-size: calc(34px * var(--s3, 1)); font-weight: calc(700 + var(--w3, 0)); color: var(--c3, var(--dark)); }

/* 5 small print and small labels */
:is(.small, .eyebrow, .hero-note, .msg.note, footer, .field span, .stp .num, .tag, .opt, .more summary, .chat-spend, .chat-foot, .pp-spend, .use-table th, .dom-res span, .video-ph, .wz-tip) {
  font-family: var(--f5, var(--font)); font-style: var(--i5, normal); letter-spacing: var(--l5, normal); line-height: var(--h5, 1.5); }
:is(.small, .msg.note, footer, .field span, .more summary, .chat-spend, .chat-foot, .pp-spend, .use-table th, .dom-res span, .video-ph, .wz-tip) {
  font-size: calc(14.5px * var(--s5, 1)); font-weight: calc(500 + var(--w5, 0)); text-transform: var(--t5, none); }
:is(.small, .msg.note, footer, .chat-spend, .chat-foot, .use-table th, .dom-res span, .video-ph, .wz-tip) { color: var(--c5, var(--muted)); }
.field span { color: var(--c5, var(--muted)); font-weight: calc(600 + var(--w5, 0)); }
.more summary { color: var(--c5, var(--accent-2)); font-weight: calc(600 + var(--w5, 0)); }
.pp-spend { color: var(--c5, var(--text)); }
.hero-note { font-size: calc(14.5px * var(--s5, 1)); font-weight: calc(500 + var(--w5, 0)); text-transform: var(--t5, none); color: var(--c-light, var(--on-dark)); }
.eyebrow { font-size: calc(13px * var(--s5, 1)); font-weight: calc(600 + var(--w5, 0)); text-transform: uppercase; letter-spacing: var(--l5, .12em); color: var(--accent); }
.hero .eyebrow { color: var(--accent-soft); }
:is(.stp .num, .tag, .opt) { font-size: calc(13px * var(--s5, 1)); font-weight: calc(700 + var(--w5, 0)); text-transform: var(--t5, none); }

/* 6 menu */
:is(.top nav a, .logo, .acct-me) { font-family: var(--f6, var(--font)); font-style: var(--i6, normal); text-transform: var(--t6, none); letter-spacing: var(--l6, normal); }
:is(.top nav a, .acct-me) { font-size: calc(15.5px * var(--s6, 1)); font-weight: calc(500 + var(--w6, 0)); }
.logo { font-size: calc(21px * var(--s6, 1)); font-weight: calc(600 + var(--w6, 0)); letter-spacing: var(--l6, .02em); }
.logo small { font-family: var(--f6, var(--font)); font-size: calc(13px * var(--s6, 1)); }

/* 7 buttons */
:is(.btn, .starters button, .chat-head button) { font-family: var(--f7, var(--font)); font-style: var(--i7, normal); text-transform: var(--t7, none); letter-spacing: var(--l7, normal); }
.btn { font-size: calc(16px * var(--s7, 1)); font-weight: calc(600 + var(--w7, 0)); }
:is(.btn.sm, .top .btn.ghost, .acct .btn.ghost) { font-size: calc(14.5px * var(--s7, 1)); }
:is(.starters button, .chat-head button) { font-size: calc(14px * var(--s7, 1)); font-weight: calc(500 + var(--w7, 0)); }
@media (max-width: 560px) { .logo { font-size: calc(19px * var(--s6, 1)); } }

/* ==========================================================================
   11 October 2026: profile menu, spending in the header, guide extras, folded questions, ask field
   ========================================================================== */
.acct-menu { position: relative; }
button.acct-me { background: none; border: 0; padding: 4px 2px; cursor: pointer; color: var(--c-light, var(--bg)); }
button.acct-me svg { opacity: .8; }
.acct-drop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(28, 40, 38, .15);
  min-width: 210px; padding: 6px; display: grid; }
.acct-drop[hidden] { display: none; }
.top .acct-drop a, .acct .acct-drop a:not(.btn) { color: var(--c4, var(--text)); padding: 9px 12px; border-radius: 9px; }
.top .acct-drop a:hover, .acct .acct-drop a:not(.btn):hover { background: var(--light); color: var(--dark); }
.acct-who { display: grid; padding: 8px 12px 10px; border-bottom: 1px solid var(--light); margin-bottom: 4px; color: var(--c2, var(--dark)); }
.acct-who small { color: var(--c5, var(--muted)); }
.spend-pill { border: 1px solid var(--on-dark); border-radius: 999px; padding: 4px 12px; }
.read-first { background: var(--light); border-left: 4px solid var(--accent); border-radius: 10px; padding: 14px 18px; }
.g-sub { margin-top: 26px; }
.g-drop { border: 1px solid var(--line); border-radius: 14px; padding: 0 18px; margin-top: 22px !important; }
.g-drop > summary { cursor: pointer; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.g-drop > summary::-webkit-details-marker { display: none; }
.g-drop > summary::after { content: "+"; color: var(--accent); font-weight: 700; }
.g-drop[open] > summary::after { content: "\2013"; }
.g-drop > *:not(summary) { margin-bottom: 14px; }
.g-drop > ul { padding-left: 22px; display: grid; gap: 6px; }
.faq-toggle { display: flex; align-items: baseline; gap: 14px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; margin-bottom: 18px; }
.faq-toggle h2 { margin: 0; }
.faq-toggle::after { content: "+"; color: var(--accent); font-weight: 700; font-size: 26px; line-height: 1; }
.faq-toggle[aria-expanded="true"]::after { content: "\2013"; }
.faq .faq-list + .ask, .faq .ask { margin-top: 18px; }
.ask { display: flex; gap: 10px; max-width: 860px; }
.ask input { flex: 1; min-width: 0; border: 1.5px solid var(--line); border-radius: 999px; padding: 11px 18px; background: #fff; }
.ask input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stp h3 { margin-bottom: 4px; }
@media (max-width: 560px) { .spend-pill { padding: 3px 9px; } }

/* Text roles for the parts above */
:is(.read-first, .g-drop p, .g-drop li, .ask input, .acct-drop a) { font-family: var(--f4, var(--font)); font-size: calc(16.5px * var(--s4, 1)); font-weight: calc(500 + var(--w4, 0));
  font-style: var(--i4, normal); text-transform: var(--t4, none); letter-spacing: var(--l4, normal); line-height: var(--h4, 1.55); }
:is(.g-sub, .g-drop > summary, .acct-who) { font-family: var(--f2, var(--font)); font-weight: calc(700 + var(--w2, 0)); font-style: var(--i2, normal);
  text-transform: var(--t2, none); letter-spacing: var(--l2, normal); line-height: var(--h2, 1.3); color: var(--c2, var(--dark)); }
.g-sub, .g-drop > summary { font-size: calc(19px * var(--s2, 1)); }
.acct-who { font-size: calc(15.5px * var(--s2, 1)); }
.acct-who small { font-family: var(--f5, var(--font)); font-size: calc(13px * var(--s5, 1)); font-weight: calc(500 + var(--w5, 0)); font-style: var(--i5, normal); text-transform: var(--t5, none); letter-spacing: var(--l5, normal); }
:is(.callout h3, .stp h3, .pp-head h3, .wz-step h3) { font-size: calc(21px * var(--s2, 1)); }
.spend-pill { font-family: var(--f6, var(--font)); font-size: calc(14.5px * var(--s6, 1)); font-weight: calc(600 + var(--w6, 0)); font-style: var(--i6, normal); text-transform: var(--t6, none); letter-spacing: var(--l6, normal); }

/* The guide card on the start page (the guide itself is the brochure at /guide/) */
.guide-card { display: grid; grid-template-columns: 220px 1fr; gap: 34px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px; max-width: 920px; }
.gc-img img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 28px rgba(28, 40, 38, .22); }
.gc-text > * + * { margin-top: 12px; }
.gc-text h2 { font-family: var(--f1, var(--font-head)); font-size: calc(clamp(25px, 3vw, 32px) * var(--s1, 1)); font-weight: calc(600 + var(--w1, 0)); font-style: var(--i1, normal);
  text-transform: var(--t1, none); letter-spacing: var(--l1, normal); line-height: var(--h1, 1.2); color: var(--c1, var(--dark)); }
.gc-text p:not(.eyebrow):not(.small):not(.gc-acts) { font-family: var(--f4, var(--font)); font-size: calc(16.5px * var(--s4, 1)); }
.gc-acts { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) { .guide-card { grid-template-columns: 1fr; padding: 20px; gap: 18px; } .gc-img img { max-width: 160px; } }

/* Language picker in the top bar */
/* Language picker (account.js): flag and code, opens a small list with flags and full names. */
.lp { position: relative; display: inline-flex; }
.lp-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  padding: 5px 9px; cursor: pointer; font: inherit; font-size: calc(14px * var(--s6, 1)); font-weight: calc(600 + var(--w6, 0)); }
.lang-pick .lp-btn { color: var(--on-dark); }
.lp-flag { display: inline-flex; width: 20px; height: 14px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex: none; }
.lp-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 170px; background: #fff; border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 34px rgba(0,0,0,.18); display: grid; }
.lp-menu[hidden] { display: none; }
.lp-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--text); text-decoration: none; white-space: nowrap;
  font-family: var(--f6, var(--font)); font-size: calc(15px * var(--s6, 1)); }
.lp-menu a:hover { background: var(--bg); }
.lp-menu a[aria-current] { font-weight: 700; }
@media (max-width: 560px) { .lp-btn { padding: 4px 7px; gap: 5px; } }
.top nav .lp-menu a { color: var(--text); font-size: calc(15px * var(--s6, 1)); }

.more .fill { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }

/* Setup done: a clear "what now" with a button that folds the steps away. */
.setup-next { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin: 0 0 18px;
  padding: 20px 24px; border-radius: 18px; background: var(--dark); color: var(--on-dark); }
.setup-next[hidden] { display: none; }
.setup-next h3 { margin: 0 0 4px; font-family: var(--f2, var(--font)); font-size: calc(20px * var(--s2, 1)); font-weight: calc(700 + var(--w2, 0)); color: var(--on-dark); }
.setup-next p { margin: 0; max-width: 62ch; color: var(--on-dark); opacity: .9; }
/* Above the chat: the three things to do, once the space is ready. */
.chat-how { list-style: none; counter-reset: how; margin: 0; max-width: 920px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.chat-how-box { max-width: 920px; margin: 0 auto 16px; display: grid; justify-items: end; gap: 6px; }
.chat-how-box[hidden] { display: none; }
.chat-how-box .chat-how { width: 100%; justify-self: stretch; }
.chat-how-box.folded .chat-how { display: none; }
.how-fold { border: 0; background: none; padding: 2px 4px; cursor: pointer; color: var(--c5, var(--muted)); font: inherit; font-size: calc(14px * var(--s5, 1)); }
.how-fold:hover { color: var(--accent); }
.how-fold::after { content: " \25B4"; }
.chat-how-box.folded .how-fold::after { content: " \25BE"; }
.how-fold .how-show, .chat-how-box.folded .how-fold .how-hide { display: none; }
.chat-how-box.folded .how-fold .how-show { display: inline; }
.chat-how li { counter-increment: how; position: relative; padding: 14px 16px 14px 52px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: calc(15.5px * var(--s4, 1)); line-height: 1.5; }
.chat-how li::before { content: counter(how); position: absolute; left: 14px; top: 13px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; }
@media (max-width: 900px) { .chat-how { grid-template-columns: 1fr; } }
/* The developer copy of the Studio: a small DEV label next to the name (functions/_middleware.js). */
.dev-tag { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 6px; background: var(--accent); color: #fff;
  font-family: var(--f5, var(--font)); font-size: calc(12px * var(--s5, 1)); font-weight: calc(700 + var(--w5, 0)); letter-spacing: .08em; vertical-align: middle; }
.acct-drop .acct-pub { color: var(--accent) !important; font-weight: 700; }
.pub-list { display: grid; gap: 8px; padding-left: 20px; margin: 14px 0 20px; }

.page-head .dev-note { background: var(--accent-soft); color: var(--dark); border-radius: 12px; padding: 12px 16px; }
.page-head .dev-note a { color: var(--dark); font-weight: 600; }