/* Harborline site template · layout only. The same file on every Harborline site.
   Colours, radii, buttons, cards, chips and inputs come from harborline.css; this file
   only arranges them (header, hero, grids, footer, doc pages). The hero picture is the
   app's own splash art (Harborline-Design/scenes/gradient), shipped as images/scene-day|night.svg. */

@font-face { font-family: Nunito; font-weight: 400; font-display: swap; src: url(fonts/nunito-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 600; font-display: swap; src: url(fonts/nunito-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 800; font-display: swap; src: url(fonts/nunito-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 900; font-display: swap; src: url(fonts/nunito-latin-900-normal.woff2) format('woff2'); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; }
p, ul, ol, figure, blockquote { margin: 0; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); letter-spacing: -0.02em; line-height: 1.04; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); letter-spacing: -0.015em; }
h3 { font-size: 1.15rem; }
p { color: var(--ink-2); }
strong { color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 780px; }
main { min-height: 56vh; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--surface); padding: 8px 14px; border-radius: 10px; }

/* Day and night pairs: each icon and mark ships as two files; only one shows. */
html[data-theme="dark"] .only-light, html:not([data-theme="dark"]) .only-dark { display: none !important; }
/* The round hero badge stays light (accent-soft) at night, so it keeps the day icon there. */
html[data-theme="dark"] .badge-hero .only-light { display: block !important; }
html[data-theme="dark"] .badge-hero .only-dark { display: none !important; }
.ic { display: inline-grid; width: 24px; height: 24px; flex: none; }
.ic img { display: block; width: 100%; height: 100%; }
.mark { display: block; flex: none; width: 36px; height: 36px; border-radius: 24%; overflow: hidden; }
.mark img { display: block; width: 100%; height: 100%; }

/* ---------- The one header: mark · breadcrumb · page links · Apps ▾ · sun/moon ---------- */
.site-head { position: sticky; top: 0; z-index: 40; background: var(--sky-top); }
.site-head .wrap { display: flex; align-items: center; gap: 16px; height: var(--head-h); }
.crumb { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; }
.crumbs { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 1.02rem; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); }
.crumbs a.here { color: var(--ink); font-size: 1.15rem; }
.crumbs .sep { color: var(--ink-2); opacity: 0.7; font-weight: 900; }
.site-head .links { display: flex; gap: 2px; }
.site-head .links a { color: var(--ink-2); font-size: 0.95rem; padding: 8px 12px; border-radius: 10px; white-space: nowrap; }
.site-head .links a:hover, .site-head .links a[aria-current="page"] { color: var(--ink); background: var(--sunken); }
.tools { display: flex; align-items: center; gap: 10px; }
.theme-toggle button img { width: 22px; height: 22px; display: block; }

/* details/summary dropdowns, no JavaScript needed */
details.dd { position: relative; }
details.dd > summary { list-style: none; cursor: pointer; user-select: none; }
details.dd > summary::-webkit-details-marker { display: none; }
.apps-dd > summary { display: inline-flex; align-items: center; gap: 2px; min-height: var(--h-touch); padding: 0 8px 0 14px; border-radius: 999px; font-weight: 900; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 var(--stroke) var(--border); }
.apps-dd > summary .ic { width: 20px; height: 20px; transition: transform .2s; }
.apps-dd[open] > summary { background: var(--sunken); }
.apps-dd[open] > summary .ic { transform: rotate(180deg); }
.sheet { position: absolute; right: 0; top: calc(100% + 10px); width: min(360px, calc(100vw - 2 * var(--gutter))); background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-float); padding: 8px; z-index: 50; }
.app-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: var(--r-control); color: var(--ink); }
.app-row:hover { background: var(--sunken); }
.app-row b { display: block; font-weight: 900; line-height: 1.2; }
.app-row small { display: block; color: var(--ink-2); font-weight: 600; font-size: 0.85rem; line-height: 1.3; }
.sheet .all { display: block; padding: 12px 10px 6px; font-size: 0.95rem; border-top: var(--stroke) solid var(--border); margin-top: 6px; }

/* under 768px the links and the Apps list fold into one menu sheet */
.menu-dd { display: none; }
.menu-dd > summary { width: var(--h-touch); height: var(--h-touch); border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 var(--stroke) var(--border); display: grid; place-items: center; }
.menu-dd[open] > summary { background: var(--sunken); }
.menu-dd[open] > summary .ic-menu, .menu-dd:not([open]) > summary .ic-close { display: none; }
.menu-dd .sheet { position: fixed; left: var(--gutter); right: var(--gutter); top: 78px; width: auto; max-height: calc(100vh - 96px); overflow-y: auto; }
.menu-dd .sheet nav { display: flex; flex-direction: column; }
.menu-dd .sheet nav a { padding: 12px; border-radius: var(--r-control); color: var(--ink); font-size: 1.05rem; }
.menu-dd .sheet nav a:hover, .menu-dd .sheet nav a[aria-current="page"] { background: var(--sunken); }
.menu-dd .sheet .section-head { padding: 14px 12px 6px; border-top: var(--stroke) solid var(--border); margin-top: 6px; }
@media (max-width: 767px) {
  .site-head .links, .apps-dd { display: none; }
  .menu-dd { display: block; }
}
@media (max-width: 560px) {
  .site-head .wrap { gap: 10px; }
  .tools { gap: 8px; }
  .crumbs { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; }
  .crumbs .sep { display: none; }
  .crumbs a.home { font-size: 0.78rem; }
  .crumbs a.home::after { content: " \203A"; }
  .crumbs a.here { font-size: 1.05rem; }
  .crumbs a.solo { font-size: 1.15rem; }
}

/* ---------- Buttons: a few layout extras on top of harborline.css ---------- */
.btn { gap: 10px; white-space: nowrap; }
.btn-secondary:hover { box-shadow: inset 0 0 0 var(--stroke) var(--ink-2); }
.btn-primary:hover { filter: brightness(1.04); }
.btn-quiet:hover { color: var(--ink); background: var(--sunken); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Hero: the app's picture with the header on its sky ----------
   The whole picture shows (nothing cut) and the headline, words and buttons sit right on top of
   it, starting in its plain sky (they may run over the picture; that is fine). The hero is as tall
   as the picture (never taller than the window), or as the words when they are taller. Phones stack the words above the picture
   with a small overlap, because there the picture is shorter than the words. */
/* The sky band continues the picture's top colour: banner_sky in Harborline-Design/out/android/summary.json */
body { --sky-top: var(--surface); }
html[data-theme="dark"] body { --sky-top: var(--bg); }
body.harborline { --sky-top: #F1F6FB; }   html[data-theme="dark"] body.harborline { --sky-top: #20272E; }
body.familylock { --sky-top: #F3EFFB; }   html[data-theme="dark"] body.familylock { --sky-top: #2A2631; }
body.familybeacon { --sky-top: #FDF5E1; } html[data-theme="dark"] body.familybeacon { --sky-top: #332B20; }
body.familycove { --sky-top: #ECF7F4; }   html[data-theme="dark"] body.familycove { --sky-top: #212D2C; }
body.familydeck { --sky-top: #EEF8F0; }   html[data-theme="dark"] body.familydeck { --sky-top: #212D25; }
body.familycard { --sky-top: #FDF1F0; }   html[data-theme="dark"] body.familycard { --sky-top: #322322; }
.hero { background: var(--sky-top); display: grid; container-type: inline-size; }
/* Sizes below use the hero's width (cqw), not the window's (vw): vw counts the scrollbar, which
   made the picture zoom a little and crop its sides, so its stripes missed the header's. */
/* The picture's wallpaper stripes carry on up the hero and the header, lined up with it: the
   picture is the full width, 360 units wide, with an 8-unit stripe every 20 units starting at 4
   (cosyMantel in Harborline-Design/tools/gradient/art.mjs). Only on pages with the hero picture. */
body:has(.hero .scene) { --stripe: rgba(255,255,255,.55); }
html[data-theme="dark"] body:has(.hero .scene) { --stripe: rgba(255,255,255,.025); }
body:has(.hero .scene) .site-head, body:has(.hero .scene) .hero {
  background-image: linear-gradient(90deg, transparent 20%, var(--stripe) 20% 60%, transparent 60%);
  background-size: calc(100% / 18) 100%;
}
.hero > .wrap, .hero > .scene { grid-area: 1 / 1; }
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-top: 40px; padding-bottom: 32px; box-sizing: border-box; align-self: start; }
.hero h1 { max-width: 20ch; }
.hero .lede { margin-top: 18px; font-size: 1.2rem; max-width: 40rem; }
.hero .ctas { margin-top: 26px; }
.hero .chip { margin-bottom: 14px; }
.hero .scene { position: relative; z-index: 1; align-self: end; display: block; line-height: 0; pointer-events: none; }
/* never taller than the window under the header: only very wide screens trim the picture's empty
   top sky (never more than 60 of its 186 units, so the sun, moon and everything else stay whole) */
.hero .scene img { display: block; width: 100%; height: min(calc(100cqw * 186 / 360), max(calc(100vh - var(--head-h)), calc(100cqw * 126 / 360))); object-fit: cover; object-position: 50% 100%; }
@media (max-width: 880px) { .hero .wrap { padding-top: 36px; } }
@media (max-width: 560px) {
  .hero { display: block; }
  .hero .wrap { padding-top: 28px; padding-bottom: 24px; }
  .hero .scene { margin-top: calc(-1 * 100cqw * 186 / 360 * .3); }
  .hero .scene img { height: auto; aspect-ratio: 360 / 186; }
  .hero h1 { font-size: 2.1rem; }
  .hero .lede { margin-top: 14px; font-size: 1.05rem; }
  .hero .ctas { margin-top: 20px; gap: 10px; }
}
@media (max-width: 359px) { .hero h1 { font-size: 1.9rem; } .hero .lede { font-size: 1rem; } }

/* Phone frame around a screenshot (the pen is the bezel) */
.phone { width: min(320px, 78vw); padding: 10px; border-radius: 44px; background: var(--pen); }
.phone img { display: block; width: 100%; height: auto; border-radius: 35px; aspect-ratio: 720 / 1616; }

/* ---------- Sections ---------- */
section { padding: 88px 0; }
.section-head + * { margin-top: 0; }
.section-intro { max-width: 680px; margin-bottom: 40px; }
.section-intro p { margin-top: 14px; font-size: 1.12rem; }
.section-intro .section-head { margin-bottom: 10px; }

/* Three principles / promise cards / feature grids */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; padding: 0; }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.cards > li, .cards > div, .cards > article { padding: 22px; }
.cards .badge { margin-bottom: 16px; }
.cards .badge .ic { width: 40px; height: 40px; }
.cards h3 { font-size: 1.25rem; }
.cards p { margin-top: 8px; }
@media (max-width: 900px) { .cards, .cards.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards, .cards.four, .cards.two { grid-template-columns: 1fr; } }

/* Feature lists, drawn like the app's grouped rows */
.feature-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .feature-cols { grid-template-columns: 1fr; } }
.group-title { margin: 0 0 12px 6px; }
.rows { background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--r-card); list-style: none; padding: 0; overflow: hidden; }
.rows li { display: flex; gap: 14px; padding: 16px; border-top: var(--stroke) solid var(--border); }
.rows li:first-child { border-top: none; }
.rows .badge-icon .ic { width: 28px; height: 28px; }
.rows h3 { font-size: 1.05rem; }
.rows p { font-size: 0.97rem; margin-top: 3px; }

/* A day with FamilyLock: the Curfew screen's 24-hour bar */
.daybar { position: relative; margin: 8px 0 18px; }
/* one capsule per hour, so the allowed hours can be counted at a glance */
.daybar .track { height: 22px; display: flex; gap: 3px; position: relative; }
.daybar .track span { flex: 1; border-radius: 999px; background: var(--sunken); box-shadow: inset 0 0 0 var(--stroke) var(--border); }
.daybar .track span.on { background: var(--accent-soft); box-shadow: inset 0 0 0 var(--stroke) var(--accent); }
.daybar .pin { position: absolute; top: -9px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); display: grid; place-items: center; font-weight: 900; font-size: 1rem; }
.daybar .hours { display: flex; justify-content: space-between; margin-top: 10px; font-weight: 800; font-size: 0.85rem; color: var(--ink-2); }
.moments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; list-style: none; padding: 0; }
.moment { display: flex; flex-direction: column; }
.moment .when { display: flex; align-items: center; gap: 10px; font-weight: 900; color: var(--ink); }
.moment .when b { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--pen); display: grid; place-items: center; font-size: 0.9rem; flex: none; }
.moment h3 { margin-top: 10px; }
.moment p { margin: 6px 0 20px; font-size: 1rem; }
.moment .phone { width: 100%; margin-top: auto; border-radius: 34px; padding: 8px; }
.moment .phone img { border-radius: 27px; }
@media (max-width: 980px) {
  .moments { grid-template-columns: repeat(4, 74%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
  .moment { scroll-snap-align: start; }
}
@media (max-width: 520px) { .moments { grid-template-columns: repeat(4, 86%); } .daybar .pin { width: 30px; height: 30px; margin-left: -15px; top: -4px; font-size: 0.85rem; } }

/* Privacy promise: a sunken band (the info banner, at page size) */
.band { background: var(--sunken); }
html[data-theme="dark"] .band { background: var(--surface); }
.band .cards > li { background: var(--bg); }
html[data-theme="dark"] .band .cards > li { background: var(--sunken); }

/* Story */
.story { display: grid; grid-template-columns: 180px 1fr; gap: 40px; align-items: start; }
.story .portrait { width: 160px; height: 160px; border-radius: 40px; background: var(--accent-soft); display: grid; place-items: center; }
.story .portrait .mark { width: 104px; height: 104px; }
.story p { font-size: 1.12rem; margin-top: 16px; max-width: 40rem; }
.story .sign { font-weight: 800; color: var(--ink); }
@media (max-width: 720px) { .story { grid-template-columns: 1fr; gap: 20px; } .story .portrait { width: 96px; height: 96px; border-radius: 26px; } .story .portrait .mark { width: 64px; height: 64px; } }

/* Screens slideshow: a scroll-snap track (no scrollbar), one slide per view on phones, two on
   tablets, three on desktop; prev/next icon buttons and dots underneath, kept in sync by a
   small script in index.html. */
.carousel { position: relative; }
.gallery { position: relative; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 4px 0 8px; margin: 0; list-style: none; scrollbar-width: none; -ms-overflow-style: none; border-radius: var(--r-card); }
.gallery::-webkit-scrollbar { display: none; }
.gallery li { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; text-align: center; }
@media (min-width: 721px) { .gallery li { flex-basis: calc((100% - 24px) / 2); } }
@media (min-width: 1024px) { .gallery li { flex-basis: calc((100% - 48px) / 3); } }
.gallery .phone { width: min(300px, 100%); margin: 0 auto; border-radius: 36px; padding: 8px; }
.gallery .phone img { border-radius: 29px; }
.gallery h3 { margin-top: 16px; font-size: 1.05rem; }
.gallery p { font-size: 0.97rem; margin-top: 2px; max-width: 32ch; margin-inline: auto; }
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.carousel-nav .btn-icon[aria-disabled="true"] { opacity: .4; cursor: default; }
.dots { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.dots button { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; border-radius: 999px; display: grid; place-items: center; cursor: pointer; }
.dots button::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--border); transition: background-color .2s, transform .2s; }
.dots button[aria-current="true"]::before { background: var(--accent); transform: scale(1.2); }

/* Compare table */
.table-scroll { overflow-x: auto; border-radius: var(--r-card); border: var(--stroke) solid var(--border); background: var(--surface); }
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: 16px 20px; text-align: left; border-top: var(--stroke) solid var(--border); font-size: 1rem; vertical-align: top; }
.compare thead th { border-top: none; font-weight: 900; }
.compare tbody th { font-weight: 800; color: var(--ink); }
.compare td { color: var(--ink-2); }
.compare td.us, .compare thead th.us { color: var(--sage-ink); font-weight: 800; background: var(--sage-soft); }
@media (max-width: 560px) { .compare th, .compare td { padding: 12px; font-size: 0.92rem; } }
.limits { margin-top: 40px; }
.limits h3 { font-size: 1.1rem; }
.limits p { margin-top: 6px; font-size: 1rem; }

/* Pricing */
.price { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; padding: 44px 48px; }
.price .amount { font-weight: 900; font-size: clamp(4rem, 9vw, 6.5rem); line-height: 0.9; letter-spacing: -0.04em; }
.price .per { font-weight: 800; color: var(--ink-2); margin-top: 10px; }
.price h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.price > div > p { margin-top: 12px; }
.price ul { list-style: none; padding: 0; margin: 18px 0 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.price li { display: flex; gap: 10px; align-items: center; font-weight: 700; color: var(--ink); }
.price li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sage); flex: none; }
@media (max-width: 760px) { .price { grid-template-columns: 1fr; gap: 20px; padding: 32px 24px; } .price ul { grid-template-columns: 1fr; } }

/* Questions */
.faq details { background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--r-card); margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 800; font-size: 1.05rem; color: var(--ink); list-style: none; padding: 18px 56px 18px 22px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2.5px solid var(--ink-2); border-bottom: 2.5px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > *:not(summary) { padding: 0 22px; }
.faq details > *:last-child { padding-bottom: 20px; }
.faq details p + p { margin-top: 10px; }
.banner { margin: 22px 0; color: var(--ink); }
.banner p, .banner li { color: var(--ink); }
.banner-safe { background: var(--sage-soft); color: var(--sage-ink); }
.banner-safe p, .banner-safe strong { color: var(--sage-ink); }

/* Forms (the app's inputs, in CSS) */
form.report { max-width: 680px; padding: 32px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 800; font-size: 0.98rem; margin-bottom: 6px; }
.field .hint { font-size: 0.92rem; margin-bottom: 8px; }
.field .input { width: 100%; display: block; font-size: 1rem; }
.field select.input { appearance: none; -webkit-appearance: none; }
.field textarea.input { min-height: 150px; padding: 12px 16px; resize: vertical; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } form.report { padding: 24px 20px; } }
.hp { position: absolute; left: -9999px; }

/* Inner pages */
.doc { padding-top: 56px; padding-bottom: 96px; }
.doc .updated { font-size: 0.95rem; font-weight: 700; margin-top: 10px; margin-bottom: 26px; }
.doc h2 { font-size: 1.6rem; margin: 44px 0 12px; }
.doc h3 { margin: 26px 0 8px; }
.doc p, .doc li { margin-bottom: 12px; max-width: 42rem; }
.doc ul, .doc ol { padding-left: 24px; }
.doc li { color: var(--ink-2); }
.doc li::marker { color: var(--ink-2); font-weight: 800; }
.doc table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 0.97rem; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: var(--stroke) solid var(--border); }
.doc th { font-weight: 900; color: var(--ink); }
.doc td { color: var(--ink-2); }
.doc .table-scroll { overflow-x: auto; border: 0; border-radius: 0; background: transparent; }
@media (max-width: 640px) { .doc th, .doc td { padding: 8px 6px; } }

/* Setup guide: what to do on the left, the screen on the right */
.guide { list-style: none; padding: 0; counter-reset: g; max-width: 960px; }
.guide > li { counter-increment: g; display: grid; grid-template-columns: 1fr 260px; gap: 56px; align-items: center; padding: 48px 0; border-top: var(--stroke) solid var(--border); }
.guide > li:first-child { border-top: none; padding-top: 8px; }
.guide h2 { font-size: clamp(1.5rem, 3vw, 2rem); display: flex; gap: 16px; align-items: baseline; margin: 0; }
.guide h2::before { content: counter(g); flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--pen); display: grid; place-items: center; font-size: 1.15rem; transform: translateY(-4px); }
.guide .text { max-width: 36rem; }
.guide .text > p, .guide .text > ul { margin-top: 12px; padding-left: 60px; }
.guide ul { padding-left: 80px; }
.guide li li { color: var(--ink-2); margin-top: 6px; }
.guide .phone { width: 100%; padding: 8px; border-radius: 36px; }
.guide .phone img { border-radius: 29px; }
.guide h3 { margin: 22px 0 0 60px; }
.guide .appicon { display: grid; place-items: center; }
.guide .appicon .mark { width: 160px; height: 160px; }
.guide .note { margin-left: 60px; margin-top: 16px; font-weight: 600; }
@media (max-width: 760px) {
  .guide > li { grid-template-columns: 1fr; gap: 24px; }
  .guide .text > p, .guide .text > ul, .guide .note, .guide h3 { padding-left: 0; margin-left: 0; }
  .guide .appicon { justify-items: start; }
  .guide .appicon .mark { width: 112px; height: 112px; }
  .guide ul { padding-left: 22px; }
  .guide .phone { max-width: 280px; }
}

/* ---------- Hub showcase ---------- */
.showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; list-style: none; padding: 0; }
.showcase .card { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.showcase header { display: flex; align-items: center; gap: 14px; }
.showcase header .mark { width: 64px; height: 64px; }
.showcase h2 { font-size: 1.6rem; }
.showcase header .chip { margin-top: 4px; }
.showcase p { flex: 1; }
.showcase .ctas { gap: 8px; }
@media (max-width: 760px) { .showcase { grid-template-columns: 1fr; } }
.contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 32px; }
.contact h2 { font-size: 1.5rem; }
.contact p { margin-top: 6px; }

/* ---------- Footer ---------- */
footer { border-top: var(--stroke) solid var(--border); padding: 48px 0 56px; }
footer .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: start; }
footer .who { display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: 1.1rem; }
footer .who .mark { width: 40px; height: 40px; }
footer .who small { display: block; font-weight: 600; color: var(--ink-2); font-size: 0.92rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 18px; max-width: 520px; }
footer nav a { color: var(--ink-2); font-size: 0.95rem; }
footer nav a:hover { color: var(--ink); }
footer .email { margin-top: 18px; font-size: 0.95rem; }
footer .more .section-head { margin-bottom: 10px; }
footer .more .tile { display: flex; align-items: center; gap: 12px; color: var(--ink); margin-bottom: 10px; }
/* Each app shown in its own skin is tinted with its own colour, so the apps are told apart at a glance. */
footer .more .tile, .showcase .card { background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 45%, var(--accent-soft)); }
html[data-theme="dark"] footer .more .tile, html[data-theme="dark"] .showcase .card { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
footer .more .tile .mark { width: 40px; height: 40px; }
footer .more .tile b { display: block; }
footer .more .tile small { display: block; color: var(--ink-2); font-weight: 600; font-size: 0.88rem; }
footer .more .tile .go { margin-left: auto; white-space: nowrap; font-size: 0.9rem; }
@media (max-width: 720px) { footer .wrap { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}