/* Felican.AI "Modular F" — the shared design layer.
 *
 * Loaded by every page: the homepage, the generated content pages (scripts/seo/render.mjs)
 * and the hand-written pages through public/SiteNav.dc.html. It owns the brand tokens,
 * the sticky header, the footer, the stationary gold contact band, buttons and the
 * stepped section edges. Page-specific layout stays with each page.
 *
 * Linked with ?v=<sha256 prefix> (see scripts/seo/render.mjs and src/static-redesign.test.js);
 * static CSS is cached for a day, so the stamp is what makes a change reach visitors.
 */

:root {
  --ground: #000004; --raised: #121217; --hair: #2a2a31; --ink: #ffffff; --muted: #bebebf;
  --paper: #f3f6f4; --white: #ffffff; --ink-l: #000004; --muted-l: #55565c; --hair-l: #d9dedb;
  --teal: #2aaf89; --teal-text: #0e7a60; --mint: #53c699; --deep: #168985; --sky: #4cc4ed; --cyan: #21dad5;
  --gold: #e9bd63; --maroon: #762727;
  --sans: Poppins, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --slab: "Roboto Slab", Rockwell, Georgia, serif;
  --r1: 4px; --r2: 8px; --r3: 16px; --gut: max(16px, 4vw); --max: 1200px; --step: 24px;
  /* Height of the stationary gold band; the page and the assistant mascot sit above it. */
  --gold-h: 52px;
  --fa-bot-bottom: var(--gold-h);
}
@media (max-width: 640px) { :root { --gold-h: 46px; } }

/* support.js (the component runtime) pins these to height:100%, which stops the page
   scrolling and breaks position:sticky. Release them. */
html, body, #dc-root, #dc-root > .sc-host { height: auto !important; }
.sc-host:has(> header.site-h), .sc-host:has(> footer.site-f) { display: contents; }

html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/24px var(--sans); -webkit-font-smoothing: antialiased; padding-bottom: var(--gold-h); overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--focus, #4cc4ed); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 1100; background: var(--teal); color: var(--ground); padding: 10px 16px; border-radius: var(--r2); font-weight: 600; text-decoration: none; }
.skip:focus { top: 8px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

/* ---- buttons ---- */
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 22px; border-radius: var(--r2);
  font: 600 14px/20px var(--sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; }
.btn-p { background: var(--teal); color: var(--ground); border-color: var(--teal); }
.btn-p:hover { background: var(--mint); border-color: var(--mint); color: var(--ground); transform: translate(-2px, -2px); box-shadow: 2px 2px 0 currentColor; }
.btn-s { background: transparent; color: inherit; border-color: currentColor; }
.btn-s:hover { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--teal); }
.btn-k { background: var(--ground); color: var(--ink); border-color: var(--ground); }
.btn-k:hover { background: var(--raised); color: var(--ink); }

/* ---- header ---- */
.site-h { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 900; background: var(--ground); color: var(--ink); border-bottom: 1px solid var(--hair); font-family: var(--sans); --focus: #4cc4ed; }
.site-h .bar { display: flex; align-items: center; gap: 16px; min-height: 64px; position: relative; }
.logo { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.logo img { display: block; height: 30px; width: auto; }
.site-h .nav { margin-left: auto; }
.site-h .nav ul { display: flex; gap: 2px; align-items: center; margin: 0; padding: 0; list-style: none; }
.site-h .nav a { display: block; color: var(--ink); text-decoration: none; font: 500 14px/20px var(--sans); padding: 8px 10px; border-radius: var(--r1); }
.site-h .nav a:hover { background: var(--raised); color: var(--mint); }
.site-h .nav a[aria-current="page"] { color: var(--mint); box-shadow: inset 0 -2px 0 var(--mint); }
.site-h .nav .nav-cta { display: none; }
.menu-btn { display: none; align-items: center; gap: 10px; margin-left: auto; min-height: 44px; padding: 8px 14px; background: var(--raised); color: var(--ink); border: 1px solid var(--hair); border-radius: var(--r2); font: 600 14px/20px var(--sans); cursor: pointer; }
.menu-ico { display: grid; gap: 3px; width: 18px; }
.menu-ico i { display: block; height: 3px; border-radius: 1px; background: var(--mint); }
.menu-ico i:nth-child(1) { width: 100%; } .menu-ico i:nth-child(2) { width: 70%; background: var(--teal); } .menu-ico i:nth-child(3) { width: 40%; background: var(--sky); }
@media (max-width: 1080px) {
  .menu-btn { display: inline-flex; }
  .site-h .nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; background: var(--ground); border-bottom: 1px solid var(--hair); padding: 8px var(--gut) 20px; display: none; max-height: calc(100vh - 64px - var(--gold-h)); overflow-y: auto; }
  .site-h .nav.open { display: block; }
  .site-h .nav ul { flex-direction: column; align-items: stretch; }
  .site-h .nav a { padding: 12px 10px; font-size: 16px; }
  .site-h .nav .nav-cta { display: block; margin-top: 8px; }
  .site-h .nav .nav-cta a { background: var(--teal); color: var(--ground); border-radius: var(--r2); text-align: center; font-weight: 600; }
}
@media (max-width: 520px) { .hdr-cta { display: none; } .logo img { height: 26px; } }

/* ---- footer ---- */
.site-f { background: var(--ground); color: var(--ink); font-family: var(--sans); border-top: 1px solid var(--hair); --focus: #4cc4ed; }
.f-main { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; padding-block: 56px 40px; }
.f-main p { color: var(--muted); max-width: 42ch; margin: 14px 0 0; }
.f-main h2, .f-main h3 { font: 600 12px/16px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.f-main ul { list-style: none; margin: 0; padding: 0; }
.f-main li a { display: inline-block; padding: 4px 0; color: var(--ink); text-decoration: none; }
.f-main li a:hover { color: var(--mint); }
.f-main .nap a { color: var(--ink); }
.f-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; border-top: 1px solid var(--hair); padding-block: 20px; color: var(--muted); font-size: 14px; }
.f-legal p { margin: 0; }
.f-legal ul { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; margin: 0; padding: 0; }
.f-legal a { color: var(--ink); }
.certs-line { color: var(--muted); font-size: 13px; line-height: 19px; margin: 0; padding-bottom: 12px; }
.certs-line a { color: var(--ink); }
.sms { color: var(--muted); font-size: 13px; line-height: 19px; margin: 0; padding-bottom: 24px; max-width: 80ch; }
@media (max-width: 1000px) { .f-main { grid-template-columns: 1fr 1fr; } .f-main > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .f-main { grid-template-columns: 1fr; } }

/* ---- the gold contact band: stationary, always on screen ---- */
.gold { position: fixed; left: 0; right: 0; bottom: 0; z-index: 930; min-height: var(--gold-h); display: flex; align-items: center;
  background: var(--gold); color: var(--ground); box-shadow: 0 -6px 20px rgba(0, 0, 4, .35); --focus: #000004; padding-bottom: env(safe-area-inset-bottom, 0px); }
.gold .wrap { width: 100%; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 8px; }
.gold .g-cred { font: 800 18px/1.2 var(--slab); margin: 0; white-space: nowrap; }
.gold ul { display: flex; flex-wrap: nowrap; gap: 4px 14px; font: 800 15px/22px var(--slab); align-items: center; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.gold a { color: var(--ground); text-decoration: none; }
.gold a:hover { text-decoration: underline; }
.gold .p { opacity: .7; }
@media (max-width: 900px) { .gold .g-cred { display: none; } .gold .wrap { justify-content: center; } }
@media (max-width: 640px) {
  .gold ul { font-size: 13px; gap: 4px 10px; }
  .gold ul .web, .gold ul .web + .p { display: none; }
}
@media (max-width: 360px) { .gold ul { font-size: 12px; gap: 4px 6px; } }

/* ---- the assistant: no fixed vendor-logo bar (certifications are plain text), and the
   launcher and mascot sit above the gold band ---- */
.fa-cred { display: none !important; }
/* No !important: the Starter Pack sets an inline bottom when its cart bar is showing. */
html .fa-shell { bottom: calc(var(--gold-h) + 18px); }

/* ---- sections with stepped edges, echoing the F's stepped blocks ---- */
.dk { background: var(--ground); color: var(--ink); --bg: var(--ground); --mut: var(--muted); --acc: var(--teal); --card: var(--raised); --line: var(--hair); --focus: #4cc4ed; }
.lt { background: var(--paper); color: var(--ink-l); --bg: var(--paper); --mut: var(--muted-l); --acc: var(--teal-text); --card: var(--white); --line: var(--hair-l); --focus: #0f6f7d; }
.wt { background: var(--white); color: var(--ink-l); --bg: var(--white); --mut: var(--muted-l); --acc: var(--teal-text); --card: var(--paper); --line: var(--hair-l); --focus: #0f6f7d; }
.sec { position: relative; padding-block: clamp(56px, 7vw, 96px); scroll-margin-top: 64px; }
.sec.sl::before, .sec.sr::before { content: ""; position: absolute; bottom: 100%; height: var(--step); width: min(46%, 580px); background: var(--bg); }
.sec.sl::before { left: 0; border-top-right-radius: var(--r3); }
.sec.sr::before { right: 0; border-top-left-radius: var(--r3); }
.sec.sl::after, .sec.sr::after { content: ""; position: absolute; bottom: calc(100% + 6px); width: 44px; height: 12px; border-radius: var(--r1); background: var(--notch, #53c699); }
.sec.sl::after { left: calc(min(46%, 580px) + 8px); }
.sec.sr::after { right: calc(min(46%, 580px) + 8px); }
@media (max-width: 600px) {
  .sec.sl::before, .sec.sr::before { width: 62%; }
  .sec.sl::after { left: calc(62% + 8px); } .sec.sr::after { right: calc(62% + 8px); }
}
.eyebrow { font: 700 12px/16px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--acc, var(--teal)); margin: 0 0 12px; }
.cred { font: 800 clamp(22px, 2.8vw, 32px)/1.2 var(--slab); color: #ffffff; text-shadow: 2px 2px 0 var(--maroon); margin: 0 0 10px; }
.svc-line { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 600 16px/24px var(--sans); color: #ffffff; margin: 0; }
.svc-line .p { color: var(--cyan); }

/* A small static F built from the five coloured blocks, for page heroes. */
.mini-f { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(8, 1fr); gap: 6px; width: 100%; max-width: 220px; aspect-ratio: 580 / 750; }
.mini-f i { border-radius: var(--r1); display: block; }
.mini-f .f0 { grid-column: 3 / 7; grid-row: 1 / 3; background: linear-gradient(135deg, #62cfa3, #2aae90); }
.mini-f .fj { grid-column: 2 / 3; grid-row: 2 / 3; background: var(--teal); }
.mini-f .f1 { grid-column: 1 / 3; grid-row: 3 / 6; background: linear-gradient(170deg, #2aae90, #168985); }
.mini-f .f2 { grid-column: 3 / 6; grid-row: 4 / 6; background: #ffffff; }
.mini-f .f3 { grid-column: 2 / 4; grid-row: 6 / 8; background: var(--sky); }
.mini-f .f4 { grid-column: 2 / 4; grid-row: 8 / 9; background: var(--deep); }

@media (prefers-reduced-motion: reduce) {
  .btn, .site-h .nav a { transition: none; }
}

/* Pages with older stylesheets (the Starter Pack's shared.css) define a generic .nav
   that is sticky with its own background. Inside the Modular F header it must not apply. */
.site-h .nav { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; z-index: auto; }
@media (max-width: 1080px) { .site-h .nav { position: absolute; background: var(--ground); border-bottom: 1px solid var(--hair); } }
.site-h .wrap, .site-f .wrap, .gold .wrap { width: auto; max-width: var(--max); }

/* Stepped edge tabs inserted by public/modular.js on the hand-written pages. */
.mf-step { position: absolute; bottom: 100%; height: var(--step); width: min(46%, 580px); background: var(--bg); pointer-events: none; z-index: 1; }
.mf-step.l { left: 0; border-top-right-radius: var(--r3); }
.mf-step.r { right: 0; border-top-left-radius: var(--r3); }
.mf-step::after { content: ""; position: absolute; bottom: 6px; width: 44px; height: 12px; border-radius: var(--r1); background: var(--notch, #53c699); }
.mf-step.l::after { left: calc(100% + 8px); }
.mf-step.r::after { right: calc(100% + 8px); }
@media (max-width: 600px) { .mf-step { width: 62%; } }