/* Sagashi home page (sagashi.au). Sumi, as app/styles/app.css, plus the site's own
   jacaranda, sandstone and harbour. Generated from the approved concept, then kept by hand. */

/* Layout: a reading desk. The hero sets the agent's words against the public record;
   the rest is one calm column of pitch, then the product in phone frames. */
:root {
  /* Sumi, as app/styles/app.css. */
  --paper: #f3f2ee; --surface: #f8f7f4; --raised: #ffffff;
  --ink: #1c1f21; --soft: #5e625f; --faint: #656963;
  --line: #dcdbd4; --line-strong: #c6c5bd;
  --accent: #1f2326; --on-accent: #ffffff; --accent-soft: #e8e7e1;
  --link: #2a5a88; --link-soft: #e4edf6;
  --ok: #366b4c; --ok-soft: #dbe9df; --unsure: #885b20; --unsure-soft: #f1e3c9; --bad: #a5342a; --bad-soft: #f3dbd7;
  --house: #c62828; --frame: #2a2d2f; --mapland: #e9e7df; --maproad: #ffffff;
  /* The website's own warmth (the app stays calm): jacaranda, sandstone, harbour. */
  --jacaranda: #6a4bc4; --jacaranda-soft: #ece6fb; --on-jac: #ffffff;
  --sandstone: #d9963c; --sand-soft: #f7e9d4;
  --harbour: #1d5aa0; --harbour-soft: #e1ecf8;
  /* Type: the app's system stack (Sagashi loads no web font); character from scale and weight. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  --h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  --h3: 1.2rem; --body: 1.0625rem; --small: 0.9375rem; --tiny: 0.8125rem;
  --gutter: 20px; --max: 1180px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121416; --surface: #1b1e20; --raised: #22262a;
    --ink: #eceae4; --soft: #a3a6a1; --faint: #8c908b;
    --line: #2d3033; --line-strong: #3b3f42;
    --accent: #eceae4; --on-accent: #16191b; --accent-soft: #2a2e31;
    --link: #8db4dc; --link-soft: #1d2a38;
    --ok: #8fc4a4; --ok-soft: #223229; --unsure: #dcb26e; --unsure-soft: #3a3122; --bad: #e2887c; --bad-soft: #3a2523;
    --frame: #0b0c0d; --mapland: #2b2f32; --maproad: #3a3f43;
    --jacaranda: #b9a4f2; --jacaranda-soft: #2a2440; --on-jac: #16191b;
    --sandstone: #e7b46a; --sand-soft: #2e271c;
    --harbour: #86b6ec; --harbour-soft: #1b2738;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121416; --surface: #1b1e20; --raised: #22262a;
  --ink: #eceae4; --soft: #a3a6a1; --faint: #8c908b;
  --line: #2d3033; --line-strong: #3b3f42;
  --accent: #eceae4; --on-accent: #16191b; --accent-soft: #2a2e31;
  --link: #8db4dc; --link-soft: #1d2a38;
  --ok: #8fc4a4; --ok-soft: #223229; --unsure: #dcb26e; --unsure-soft: #3a3122; --bad: #e2887c; --bad-soft: #3a2523;
  --frame: #0b0c0d; --mapland: #2b2f32; --maproad: #3a3f43;
  --jacaranda: #b9a4f2; --jacaranda-soft: #2a2440; --on-jac: #16191b;
  --sandstone: #e7b46a; --sand-soft: #2e271c;
  --harbour: #86b6ec; --harbour-soft: #1b2738;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--body)/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--link); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.eyebrow { font-size: var(--tiny); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--jacaranda); }
.svg-fix svg, .ic svg { display: block; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: 600 var(--body)/1 var(--font); text-decoration: none; }
.btn.primary { background: var(--jacaranda); color: var(--on-jac); }
.btn.quiet { color: var(--link); padding: 0 6px; }
.btn.primary:hover { filter: brightness(1.15); }

/* Header */
/* The navigation stays at the top while the page scrolls. */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; border-bottom: 1px solid var(--line); background: var(--paper); box-shadow: 0 6px 18px -16px rgba(0,0,0,.35); }
section[id] { scroll-margin-top: 76px; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; min-height: 44px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a.link { color: var(--soft); text-decoration: none; font-size: var(--small); padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; }
.nav a.link:hover { color: var(--ink); }
.nav .btn { min-height: 44px; padding: 0 18px; font-size: var(--small); }
@media (max-width: 899px) { .nav a.link { display: none; } }

/* 1. Hero: the agent's words against the record */
.hero { padding-block: clamp(40px, 6vw, 88px) clamp(56px, 8vw, 120px); background: linear-gradient(180deg, var(--sand-soft), var(--paper)); }
.hero .wrap { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 1100px) { .hero .wrap { grid-template-columns: 1fr 1.05fr; } }
.visual { position: relative; display: grid; min-width: 0; }
.hero-photo { width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 78%; border-radius: 24px; display: block; box-shadow: 0 24px 50px -30px rgba(0,0,0,.5); }
.visual .desk { position: relative; margin: -64px 16px 0; }
@media (min-width: 1100px) {
  .hero-photo { aspect-ratio: 5 / 6; }
  .visual { padding-bottom: 40px; }
  .visual .desk { position: absolute; left: -48px; right: 120px; bottom: 0; margin: 0; }
}
.hero h1 { font-size: var(--display); line-height: 1.04; letter-spacing: -0.025em; font-weight: 800; max-width: 14ch; }
.hero h1 span { color: var(--jacaranda); }
.hero .lede { margin-top: 22px; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--soft); max-width: 46ch; }
.hero .cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.hero .terms { margin-top: 14px; font-size: var(--small); font-weight: 600; color: var(--ink); }
/* Lists of links, the hero's and the questions': one style. Each row is a
   full-width link with a chevron, so nothing wraps into a stray separator. */
.go, .question-links { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.go li, .question-links li { border-bottom: 1px solid var(--line); }
.go a, .question-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
  color: var(--link); text-decoration: none; font-weight: 600; }
.go a:hover, .question-links a:hover { text-decoration: underline; }
.go .ic, .question-links .ic { flex: none; color: var(--link); }
.hero .go { margin: 18px 0 0; max-width: 46ch; }
.hero .go .go-label { border-bottom: 0; padding: 16px 0 4px; font-size: var(--tiny); color: var(--soft); }

.desk { margin: 0; background: var(--raised); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 18px 40px -24px rgba(0,0,0,.35); }
.desk-head { display: grid; grid-template-columns: 0.8fr 1.2fr; border-bottom: 1px solid var(--line); }
.desk-head p { padding: 10px 16px; }
.desk-head p + p { border-left: 1px solid var(--line); }
.pair { display: grid; grid-template-columns: 0.8fr 1.2fr; }
.pair + .pair { border-top: 1px solid var(--line); }
.says { padding: 12px 16px; font-size: var(--body); line-height: 1.4; font-weight: 500; color: var(--soft); font-style: italic; }
.found { padding: 12px 16px; border-left: 1px solid var(--line); background: var(--surface); display: grid; gap: 2px; align-content: start; }
.found b { font-size: var(--body); line-height: 1.4; }
.found .src { font-size: var(--tiny); color: var(--faint); }
.desk-foot { padding: 8px 16px; border-top: 1px solid var(--line); font-size: var(--tiny); color: var(--faint); }
@media (max-width: 559px) {
  .desk-head { display: none; }
  .pair { grid-template-columns: 1fr; }
  .found { border-left: 0; border-top: 1px dashed var(--line-strong); }
  .says::before { content: "The listing says"; display: block; font: 700 var(--tiny)/1.4 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-style: normal; margin-bottom: 6px; }
  .found::before { content: "Sagashi adds"; font: 700 var(--tiny)/1.4 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
}

/* Sections */
section.band { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--line); }
section.band.alt { background: var(--surface); }
.band h2 { font-size: var(--h2); line-height: 1.12; letter-spacing: -0.015em; font-weight: 800; margin-top: 10px; max-width: 22ch; }
.band .intro { margin-top: 14px; color: var(--soft); max-width: 58ch; }

/* 2. Why */
.pains { margin-top: clamp(32px, 4vw, 48px); display: grid; gap: 20px; }
@media (min-width: 768px) { .pains { grid-template-columns: repeat(2, 1fr); } }
/* Four stories since site-family-pitch: two by two on a tablet, four across on a desktop. */
@media (min-width: 1100px) { .pains { grid-template-columns: repeat(4, 1fr); } }
.pain { background: var(--raised); border-radius: 18px; padding: 0 24px 24px; display: grid; gap: 12px; align-content: start; overflow: hidden; }
.pain:nth-child(1) { background: var(--harbour-soft); } .pain:nth-child(2) { background: var(--sand-soft); } .pain:nth-child(3) { background: var(--jacaranda-soft); } .pain:nth-child(4) { background: var(--harbour-soft); }
.pain-photo { display: block; width: calc(100% + 48px); max-width: none; height: auto; margin: 0 -24px 6px; aspect-ratio: 16 / 10; object-fit: cover; }
.pain .q { font-size: 1.35rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.pain p { color: var(--soft); }
.pain .ic { color: var(--faint); }
.paid { margin-top: 28px; padding: 26px 28px; border-radius: 16px; background: var(--harbour); color: var(--on-jac); display: grid; gap: 8px; }
.paid strong { font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.01em; }
.paid p { opacity: .9; max-width: 70ch; }

/* 3. Answer */
.answer { text-align: left; }
.answer h2 { max-width: 20ch; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem); }
.answer .intro { font-size: 1.15rem; color: var(--ink); }
.answer .sign { margin-top: 14px; font-size: var(--small); color: var(--faint); }
.founder { background: var(--sand-soft); }
.name-tag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--raised); font-size: var(--small); color: var(--soft); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.name-tag span[lang="ja"] { display: inline-grid; place-items: center; min-width: 52px; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--jacaranda); color: var(--on-jac); font-weight: 700; font-size: 1rem; }
.founder .wrap { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .founder .wrap { grid-template-columns: 0.9fr 1.1fr; } }
.founder-photo { width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 20px; display: block; }

/* 4. How it works: a real sequence, so numbered */
.steps { margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; display: grid; gap: 28px; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.steps li { counter-increment: step; display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 3px solid var(--jacaranda); }
.steps li::before { content: counter(step); font-weight: 800; font-size: var(--h3); color: var(--jacaranda); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--h3); }
.steps p { color: var(--soft); }
.addr { display: inline-block; margin-top: 4px; font: 600 var(--small)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--accent-soft); border-radius: 8px; padding: 6px 10px; color: var(--ink); overflow-wrap: anywhere; }

/* 5. Details: text beside a phone, alternating */
.detail { display: grid; gap: 32px; align-items: center; margin-top: clamp(40px, 6vw, 72px); }
.detail:first-of-type { margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 768px) { .detail { grid-template-columns: 1fr 1fr; gap: 48px; } .detail.flip .copy { order: 2; } }
.detail .copy { display: grid; gap: 12px; min-width: 0; max-width: 50ch; }
.detail h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; }
.detail .copy p { color: var(--soft); }
.ticks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--ink); font-size: var(--small); }
.ticks li .ic { color: var(--jacaranda); margin-top: 2px; }
.shown { justify-self: center; display: grid; gap: 10px; justify-items: center; }
.caption { font-size: var(--tiny); color: var(--faint); }

/* The phones: the app's own patterns, drawn in HTML */
.phone { width: 300px; max-width: 100%; background: var(--paper); border: 9px solid var(--frame); border-radius: 38px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.45); font-size: 13px; line-height: 1.4; color: var(--ink); }
.p-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); min-height: 44px; font-weight: 600; }
.p-bar .back { color: var(--link); font-weight: 500; display: inline-flex; align-items: center; gap: 2px; }
.p-bar .end { justify-self: end; color: var(--soft); display: inline-flex; gap: 10px; }
.p-body { padding: 12px; display: grid; gap: 10px; }
.p-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
.card { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; }
.card .pr { font-weight: 700; font-size: 14px; }
.card .ad { font-weight: 600; }
.card .meta { color: var(--soft); font-size: 12px; }
.v { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; margin-top: 4px; }
.mk { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.mk svg { width: 13px; height: 13px; stroke-width: 3; }
.mk.ok { background: var(--ok-soft); color: var(--ok); } .mk.bad { background: var(--bad-soft); color: var(--bad); } .mk.unsure { background: var(--unsure-soft); color: var(--unsure); }
.rows { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.r { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 48px; }
.r + .r { border-top: 1px solid var(--line); }
.r .ci { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.r .ci svg { width: 15px; height: 15px; }
.r .tx { flex: 1; min-width: 0; display: grid; }
.r .tx b { font-size: 13px; }
.r .tx span { color: var(--soft); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r .n { color: var(--soft); font-variant-numeric: tabular-nums; }
.r .ch { color: var(--faint); }
.r .ch svg { width: 16px; height: 16px; }
.r .ch.up svg { transform: rotate(180deg); }
.out { display: grid; gap: 2px; padding: 10px 12px; }
.out + .out { border-top: 1px solid var(--line); }
.out .ad { font-weight: 600; }
.out .why { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--ink); }
.p-head { display: grid; gap: 2px; }
.p-head .pr { font-size: 18px; font-weight: 800; }
.p-head .ad { font-weight: 700; font-size: 14px; }
.p-head .meta { color: var(--soft); font-size: 12px; }
.portal { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.portal svg { width: 15px; height: 15px; }
/* A small map: the red house among numbered pins, as on a listing */
.minimap { position: relative; height: 128px; margin: 0 12px 12px; border-radius: 10px; border: 1px solid var(--line); overflow: hidden;
  background:
    linear-gradient(90deg, transparent 47%, var(--maproad) 47% 53%, transparent 53%),
    linear-gradient(0deg, transparent 30%, var(--maproad) 30% 36%, transparent 36%),
    linear-gradient(0deg, transparent 72%, var(--maproad) 72% 77%, transparent 77%),
    linear-gradient(90deg, transparent 15%, var(--maproad) 15% 19%, transparent 19%),
    var(--mapland); }
.minimap .ring { position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px; border: 1px dashed var(--line-strong); border-radius: 50%; }
.pin { position: absolute; width: 22px; height: 22px; border-radius: 999px; background: #ffffff; color: #1f2326; border: 2px solid #1f2326; display: grid; place-items: center; font: 700 11px/1 var(--font); }
.pin.major { background: #1f2326; color: #ffffff; }
.pin.sel { background: #2a5a88; border-color: #2a5a88; color: #ffffff; }
.pin-tag { position: absolute; background: #ffffff; color: #1f2326; border: 1px solid #c6c5bd; border-radius: 999px; padding: 2px 8px; font: 600 11px/1.3 var(--font); white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.home { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; }
.home i { width: 28px; height: 28px; border-radius: 50%; background: var(--house); color: #ffffff; border: 2px solid #ffffff; display: grid; place-items: center; box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.home i svg { width: 14px; height: 14px; }
.home::after { content: ""; border: 6px solid transparent; border-top-color: var(--house); border-bottom: 0; }

/* 6. Trust */
.trust { margin-top: clamp(32px, 4vw, 48px); display: grid; gap: 16px; }
@media (min-width: 640px) { .trust { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust div { display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--raised); }
.trust .ic { color: var(--ink); }
.trust b { font-size: var(--body); }
.trust p { color: var(--soft); font-size: var(--small); }

/* 7. Limits, FAQ, start */
.limits { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.limits span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: var(--small); color: var(--ink); background: var(--raised); }
.limits .ic { color: var(--faint); }
.question-topic { margin-top: 32px; font-size: var(--body); }
.question-topic + .question-links { margin-top: 12px; }
.question-links { margin: 28px 0 0; max-width: 820px; }
.question-links a { padding-block: 12px; }
.faq { margin-top: 36px; display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--faint); transition: transform .15s ease; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq details p { padding: 0 0 20px; color: var(--soft); max-width: 64ch; }
/* The links to the app's Data sources page are full-size targets in running text. */
.faq details p a, .trust p a { display: inline-flex; align-items: center; min-height: 44px; }

/* 5b. For families: three points beside a phone with the Family row opened */
#families .detail { align-items: start; }
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.points li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; color: var(--soft); }
.points li .ic { color: var(--jacaranda); margin-top: 3px; }
.points b { color: var(--ink); }
.fam { padding: 4px 12px 12px; display: grid; gap: 6px; border-top: 1px solid var(--line); }
.fam-h { margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.fam-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fam-list li { display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; row-gap: 3px; align-items: center; }
.fam-list .n { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-size: 11px; }
.fam-list .nm { font-size: 12px; font-weight: 600; }
.fam-list .tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; }
.tg { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); }
.fam-note { font-size: 11px; color: var(--soft); }
.fam-svc { font-size: 12px; font-weight: 600; }
.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.scale span { height: 7px; border-radius: 999px; border: 1px solid var(--faint); }
.scale span.on { background: var(--accent); border-color: var(--accent); }
.closing { margin-top: clamp(48px, 6vw, 80px); padding: clamp(28px, 4vw, 44px); border-radius: 22px; background: linear-gradient(135deg, var(--sand-soft), var(--jacaranda-soft));
  display: grid; gap: 18px; justify-items: start; }
@media (min-width: 900px) { .closing { grid-template-columns: 1fr auto; align-items: center; } }
.closing h2 { margin: 0; max-width: 24ch; }
.closing p { color: var(--soft); margin-top: 8px; }

/* Footer */
footer { border-top: 1px solid var(--line); padding-block: 32px 40px; font-size: var(--small); color: var(--soft); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
footer a { color: var(--soft); min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
footer .mail { user-select: all; }

/* The phone's start bar: always in reach below the tablet width */
.startbar { display: none; }
@media (max-width: 767px) {
  .startbar { display: flex; position: sticky; bottom: 0; z-index: 5; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -8px 20px -16px rgba(0,0,0,.4); }
  .startbar .btn { width: 100%; }
  .hero .cta .btn.primary { width: 100%; }
}

/* Positions in the phone's mini map, as classes: the site's content policy allows no inline style. */
.p-brand { display: inline-flex; align-items: center; gap: 5px; }
.pin-a { left: 12%; top: 14%; }
.tag-a { left: calc(12% + 26px); top: calc(14% + 1px); }
.pin-b { left: 70%; top: 66%; }