/* ==========================================================================
   reset.com.au — shared stylesheet
   Extracted from docs/reset-homepage-mockup-v7.html (approved design master).

   Rules:
   - Colours and type come from the tokens in §1. Do not introduce new colours.
   - This is the single source of truth for shared styles. Page-specific rules
     live in a <style> block on that page only when genuinely one-off.
   - Australian English in comments and class names.

   Contents
     1  Tokens
     2  Base + reset
     3  Utilities
     4  Topbar
     5  Header / navigation (incl. mobile disclosure)
     6  Buttons
     7  Section primitives
     8  Hero + terminal (homepage)
     9  Outcomes / path
    10  Situations / cases
    11  Proof (dark)
    12  Software decision columns
    13  Product cards
    14  Industry cards
    15  Support
    16  Forms + quote band
    17  Simple content pages (/sos, 404, thanks, placeholders)
    18  Footer
    19  Responsive
    20  Reduced motion
    21  Phase B page components (breadcrumbs, product hero, tables,
        payroll export list, FAQ blocks)
    22  Client logo wall
   ========================================================================== */


/* 1  TOKENS ================================================================ */

:root{
  --ink:#171D28;
  --steel:#5A6270;
  --paper:#FFFFFF;
  --panel:#F1F3F6;
  --line:#DAE0E8;
  --verify:#1E7A46;
  --accent:#2563EB;
  --accent-dark:#1D4ED8;
  --amber:#FFB020;
  --navy:#141C2A;

  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:1180px;
  --gutter:24px;
}
/* Red is retired (build spec §1). No --red token, and no accent toggle. */


/* 2  BASE + RESET ========================================================== */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
h1,h2,h3,h4{text-wrap:balance}

/* Visible keyboard focus everywhere (build spec: design rules). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}


/* 3  UTILITIES ============================================================= */

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.num{font-family:var(--mono);font-weight:600}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Skip link — first focusable element on every page. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:12px 18px;
  font-weight:600;font-size:15px;border-radius:0 0 3px 0;
}
.skip:focus{left:0}


/* 4  TOPBAR ================================================================ */

.topbar{background:var(--ink);color:#fff;font-size:13.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px}
.topbar .tagline{opacity:.75;letter-spacing:.02em}
.topbar .phones{display:flex;gap:28px}
.topbar .phones a{display:flex;gap:8px;align-items:baseline}
.topbar .phones .lbl{text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;opacity:.6}
.topbar .phones .num{font-weight:500}
.topbar .phones a:hover .num{color:#fff;text-decoration:underline}


/* 5  HEADER / NAVIGATION =================================================== */

header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}

.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* The mark is inline SVG (not an <img>) so it can inherit the page's ink colour
   via currentColor and use the loaded Archivo face for its "R". */
.logo-mark{width:40px;height:40px;display:block;flex-shrink:0;color:var(--ink)}
.logo-mark text{font-family:var(--display)}
.logo-word{
  font-family:var(--display);font-weight:900;font-stretch:112%;
  font-size:24px;letter-spacing:-.01em;color:var(--ink);line-height:1;
}
.logo .sub{
  font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--steel);
  white-space:nowrap;
}

nav.links{display:flex;gap:30px;font-size:15px;font-weight:500}
nav.links a{padding:6px 0;border-bottom:2px solid transparent}
nav.links a:hover{border-color:var(--accent)}
nav.links a[aria-current="page"]{border-color:var(--ink)}

.nav-actions{display:flex;align-items:center;gap:12px}

/* Mobile disclosure toggle.
   v7 concealed the nav entirely below 920px, which is fine for a one-page mockup but
   would leave a multi-page site with no navigation on a phone. This adds a
   dependency-free disclosure menu; the button is hidden on desktop. */
.nav-toggle{
  display:none;
  background:transparent;border:1.5px solid var(--ink);border-radius:3px;
  padding:9px 12px;cursor:pointer;font-family:var(--body);
  font-size:14px;font-weight:600;color:var(--ink);
  align-items:center;gap:8px;
}
.nav-toggle .bars{display:block;width:16px;height:2px;background:var(--ink);position:relative}
.nav-toggle .bars::before,
.nav-toggle .bars::after{
  content:"";position:absolute;left:0;width:16px;height:2px;background:var(--ink);
}
.nav-toggle .bars::before{top:-5px}
.nav-toggle .bars::after{top:5px}

.mobile-nav{
  display:none;
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.mobile-nav.is-open{display:block}
.mobile-nav ul{list-style:none}
.mobile-nav li{border-bottom:1px solid var(--line)}
.mobile-nav li:last-child{border-bottom:none}
.mobile-nav a{display:block;padding:15px 0;font-size:16px;font-weight:500}
.mobile-nav .m-phones{
  display:flex;flex-direction:column;gap:10px;padding:16px 0 20px;
}
.mobile-nav .m-phones a{padding:0;font-family:var(--mono);font-weight:600;font-size:16px}
.mobile-nav .m-phones .lbl{
  font-family:var(--body);font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--steel);display:block;margin-bottom:2px;
}


/* 6  BUTTONS =============================================================== */

/* Named by role, not colour — the palette's accent is blue and red is retired,
   so a class called "btn-red" would be a trap for future edits. */
.btn{
  display:inline-block;font-family:var(--body);font-weight:600;font-size:15px;
  padding:12px 24px;border-radius:3px;transition:background .15s,color .15s;
  cursor:pointer;border:none;text-align:center;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-ghost-light{border:1.5px solid rgba(255,255,255,.5);color:#fff;background:transparent}
.btn-ghost-light:hover{background:#fff;color:var(--ink)}
.btn-lg{padding:16px 30px;font-size:17px}
.btn-block{display:block;width:100%}


/* 7  SECTION PRIMITIVES ==================================================== */

section{padding:80px 0}
.sec-head{max-width:660px;margin-bottom:48px}
.sec-head .eyebrow{margin-bottom:14px}
.sec-head p{color:var(--steel);font-size:17px}

.eyebrow{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:18px;
}

h1{
  font-family:var(--display);font-weight:850;font-stretch:105%;
  font-size:clamp(34px,4.4vw,50px);line-height:1.06;letter-spacing:-.022em;margin-bottom:22px;
}
h2{
  font-family:var(--display);font-weight:800;font-stretch:105%;
  font-size:clamp(28px,3.2vw,38px);line-height:1.08;letter-spacing:-.018em;margin-bottom:14px;
}

.band-panel{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-dark{background:var(--ink);color:#fff}
.band-dark h2{color:#fff}


/* 8  HERO + TERMINAL ======================================================= */

.hero{padding:76px 0 64px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.hero p.lede{font-size:18.5px;color:var(--steel);max-width:52ch;margin-bottom:14px}
.hero p.promise{font-size:17px;font-weight:600;color:var(--ink);max-width:50ch;margin-bottom:32px}
.hero .cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.hero .after{font-size:13.5px;color:var(--steel)}
.hero .after strong{color:var(--verify)}

.terminal{
  background:var(--navy);border-radius:8px;padding:26px 24px 18px;color:#E8EAE6;
  box-shadow:0 24px 60px -24px rgba(26,29,33,.45);position:relative;
}
.terminal::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent);border-radius:8px 8px 0 0;
}
.terminal .t-head{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#8A929E;gap:12px;
}
.terminal .t-head .mark{color:#4FBF7E;letter-spacing:.08em}
.terminal .clock{
  font-family:var(--mono);font-weight:600;font-size:clamp(40px,4.2vw,52px);
  letter-spacing:.02em;line-height:1;margin-bottom:4px;color:var(--amber);
}
.terminal .clock .sec{color:#8A929E;font-size:.55em}
.terminal .t-date{font-family:var(--mono);font-size:13px;color:#8A929E;margin-bottom:18px}
.terminal .punch-static{
  display:flex;justify-content:space-between;align-items:center;padding:12px 0;
  border-top:1px solid #2C3138;border-bottom:1px solid #2C3138;margin-bottom:16px;
}
.terminal .punch-static .where{font-size:14px;color:#C7CBC4}
.terminal .punch-static .meta{display:flex;gap:12px;align-items:center;font-family:var(--mono);font-size:12.5px}
.terminal .punch-static .time{color:#8A929E}
.terminal .stamp{
  font-weight:600;letter-spacing:.08em;font-size:11px;padding:3px 8px;border-radius:2px;
  color:#4FBF7E;border:1px solid #2A5E42;
}
.pipe{display:flex;flex-direction:column;gap:0}
.pipe .step{
  display:grid;grid-template-columns:22px 1fr;gap:12px;padding:11px 0;
  border-bottom:1px solid #24282E;align-items:start;
}
.pipe .step:last-child{border-bottom:none;padding-bottom:2px}
.pipe .n{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:600;padding-top:3px}
.pipe .lab{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:#8A929E;margin-bottom:3px;
}
.pipe .val{font-size:14.5px;color:#E8EAE6;line-height:1.35}
.terminal .t-foot{
  font-family:var(--mono);font-size:10.5px;color:#5C636D;padding-top:12px;
  letter-spacing:.08em;text-transform:uppercase;
}


/* 9  OUTCOMES / PATH ======================================================= */

.outcomes{padding:64px 0}
.outcomes .split{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}

/* Tick list — reused anywhere a benefits list is needed. */
/* Marker lists use a hanging indent, NOT flexbox.
   Why: in a flex container every element child becomes its own flex item, so
   `<li><strong>Label</strong> — the rest of the sentence</li>` renders as two
   columns instead of one sentence. At 380px that reads as a broken table. The
   absolute-positioned marker keeps the tick in the gutter and lets the text —
   strong tags included — flow as ordinary inline content.
   Caught by the Playwright pass; do not "simplify" this back to flex. */
.ticks{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:8px}
.ticks li{display:block;position:relative;padding-left:26px;font-size:16px}
.ticks li::before{
  content:"✓";position:absolute;left:0;top:0;
  font-family:var(--mono);color:var(--verify);font-weight:600;font-size:14px
}

.path{
  list-style:none;display:flex;flex-direction:column;gap:0;
  border:1px solid var(--line);border-radius:6px;background:var(--paper);overflow:hidden;
}
.path li{padding:16px 20px;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--steel)}
.path li:last-child{border-bottom:none}
.path li strong{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:4px;
}
.path li span{color:var(--ink);font-weight:500}


/* 10  SITUATIONS / CASES =================================================== */

.situations{padding:72px 0}
.situations .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.situations p.body{color:var(--steel);margin-bottom:24px;font-size:16.5px}
.situations .btn-row{display:flex;gap:14px;flex-wrap:wrap}

.cases{
  list-style:none;display:flex;flex-direction:column;gap:0;
  border:1px solid var(--line);border-radius:6px;background:var(--paper);overflow:hidden;
}
.cases li{
  display:flex;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);
  align-items:baseline;font-size:15.5px;
}
.cases li:last-child{border-bottom:none}
.cases .tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--accent);
  font-weight:600;white-space:nowrap;text-transform:uppercase;min-width:108px;
}
.cases li span:last-child{color:var(--steel)}
.cases li span:last-child strong{color:var(--ink);font-weight:600}


/* 11  PROOF (dark) ========================================================= */

.proof{padding:72px 0}
.proof .grid{display:grid;grid-template-columns:1.3fr .7fr;gap:64px;align-items:center}
.proof blockquote{
  font-family:var(--display);font-weight:600;font-size:clamp(21px,2.4vw,27px);
  line-height:1.34;letter-spacing:-.01em;
}
/* Both marks, always. The opening curly quote used to sit here on its own,
   which left the homepage proof quote opening with a quotation mark and never
   closing it. Caught in the Phase C review. Same pattern as .quote-card. */
.proof blockquote::before{content:"\201C";color:var(--accent);font-weight:900}
.proof blockquote::after{content:"\201D";color:var(--accent);font-weight:900}
.proof cite{
  display:block;margin-top:22px;font-style:normal;font-family:var(--mono);
  font-size:13px;color:#8A929E;letter-spacing:.06em;
}
.proof cite strong{color:#E8EAE6}
.proof .stat{border-left:2px solid var(--accent);padding-left:28px}
.proof .r-num{font-family:var(--mono);font-weight:600;font-size:36px;color:#fff;line-height:1.1}
.proof .r-lbl{font-size:14px;color:#8A929E;margin-top:6px}
.proof .note{
  font-family:var(--mono);font-size:10.5px;color:#5C636D;letter-spacing:.08em;
  margin-top:18px;text-transform:uppercase;
}


/* 12  SOFTWARE DECISION COLUMNS ============================================ */

.decide{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:22px;
}
.decide .col{background:var(--paper);padding:34px 34px 30px}
.decide .col .if{
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:12px;
}
.decide .col h3{font-family:var(--display);font-weight:800;font-size:25px;margin-bottom:10px;letter-spacing:-.01em}
.decide .col p{font-size:15.5px;color:var(--steel);margin-bottom:14px}
.decide .col ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
.decide .col li{display:flex;gap:10px;font-size:15px;align-items:baseline}
.decide .col li::before{content:"—";color:var(--accent);font-weight:600}

/* Forward link with arrow — used on cards and columns. */
.p-link{font-weight:600;font-size:15px;color:var(--accent)}
.p-link::after{content:" →"}
.p-link:hover{text-decoration:underline}

/* Inline prompt strip. */
.unsure{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:20px 28px;background:var(--panel);border-radius:6px;font-size:15.5px;
}
.unsure p{color:var(--steel)}
.unsure p strong{color:var(--ink)}
.unsure a{font-weight:600;color:var(--accent);white-space:nowrap}


/* 13  PRODUCT CARDS ======================================================== */

.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:32px}
.prod{
  background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:28px;
  display:flex;flex-direction:column;gap:12px;transition:transform .15s,box-shadow .15s;
}
.prod:hover{transform:translateY(-3px);box-shadow:0 16px 40px -20px rgba(26,29,33,.25)}
.prod .p-kind{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.prod h3{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em}
.prod p{font-size:15px;color:var(--steel);flex:1}

/* Photo slot. Legacy pages ship without images where none exist (Phase 0
   ruling 4) — the hatching marks an EMPTY slot until artwork arrives.

   The hatching is for empty slots ONLY. A slot holding a photo renders a plain
   white ground, because the product shots are themselves cut out on white and
   any stripe showing around one reads as a broken image rather than a design.
   Two belts, one brace: the .has-photo modifier is written into the markup of
   every slot that holds an <img>, and :has(img) catches any slot that gets an
   image later without the class being added. */
.p-img{
  height:150px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;color:var(--steel);letter-spacing:.08em;
  background:repeating-linear-gradient(45deg,var(--panel),var(--panel) 10px,#EBEDE9 10px,#EBEDE9 20px);
}
.p-img.has-photo,
.p-img:has(img){
  background:var(--paper);
  border:1px solid var(--line);
  padding:10px;
}
.p-img img{width:100%;height:100%;object-fit:contain}

.legacy-note{
  border:1px dashed var(--line);border-radius:6px;padding:20px 26px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--paper);
}
.legacy-note p{font-size:15px;color:var(--steel)}
.legacy-note p strong{color:var(--ink)}
.legacy-note a{font-weight:600;color:var(--accent);white-space:nowrap}


/* 14  INDUSTRY CARDS ====================================================== */

.ind-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.ind{
  border:1px solid var(--line);border-radius:6px;padding:28px 30px;
  transition:border-color .15s;display:flex;flex-direction:column;gap:10px;
}
.ind:hover{border-color:var(--ink)}
.ind h3{font-family:var(--display);font-weight:750;font-size:20px}
.ind .prob{font-size:15.5px;color:var(--steel)}
.ind .prob strong{color:var(--ink)}
.ind .next{font-weight:600;font-size:14.5px;color:var(--accent);margin-top:6px}
.ind .next::after{content:" →"}


/* 15  SUPPORT ============================================================= */

.support .cols{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.support .lede{color:var(--steel);margin-bottom:8px}
.support .card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:34px}
.support .card .c-eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);margin-bottom:8px;
}
.support .card h3{font-family:var(--display);font-weight:800;font-size:23px;margin-bottom:10px}
.support .card p{color:var(--steel);font-size:15.5px;margin-bottom:20px}
.support .card .num{font-size:22px;color:var(--ink);display:block;margin-bottom:18px}
.support .card .card-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.support .card .card-actions a.p-link{font-size:14.5px}


/* 16  FORMS + QUOTE BAND ================================================== */

.quoteform{padding:88px 0}
.quoteform .grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start}
.quoteform .lead{color:#B9BEC6;font-size:17px;margin-bottom:30px;max-width:44ch}
.quoteform .expect{list-style:none;display:flex;flex-direction:column;gap:14px}
.quoteform .expect li{display:block;position:relative;padding-left:26px;font-size:15.5px;color:#D7DAD4}
.quoteform .expect li::before{
  content:"✓";position:absolute;left:0;top:0;
  font-family:var(--mono);color:#4FBF7E;font-weight:600;font-size:14px
}
.quoteform .expect li strong{color:#fff}

/* From-price panel in the quote band. Neutral white overlays rather than new
   hex values -- the design rule is no invented colours, and the dark band's
   existing greys (#B9BEC6, #D7DAD4) are reused as they stand. */
.quoteform .price-from{
  margin-bottom:26px;padding:18px 20px;max-width:52ch;
  border:1px solid rgba(255,255,255,.16);border-radius:6px;
  background:rgba(255,255,255,.05);
  color:#D7DAD4;font-size:15.5px;line-height:1.55
}
.quoteform .price-from strong{color:#fff}
.quoteform .price-from .num{color:#fff}

.qform{
  background:var(--paper);color:var(--ink);border-radius:8px;padding:36px;
  display:flex;flex-direction:column;gap:18px;
}
.qform .f-title{font-family:var(--display);font-weight:800;font-size:21px}
/* Labels are BLOCK, not column-flex.
   The bug this fixes: as a column flex container, a label's text node and its
   hint <span> each became a separate flex item, so the hint took its own line,
   made that label two lines tall, and pushed its input a line below the input
   beside it. Block layout lets the label text and the hint flow inline. */
.qform label{display:block;font-size:13.5px;font-weight:600}
.qform label > input,
.qform label > select,
.qform label > textarea{margin-top:6px}

/* Field hint: same line as the label, lighter, and free to wrap on a narrow
   screen without moving the input. */
.qform label .hint{font-weight:400;color:var(--steel)}
.qform input[type=text],
.qform input[type=email],
.qform input[type=tel],
.qform select,
.qform textarea{
  font-family:var(--body);font-size:15.5px;padding:11px 13px;
  border:1.5px solid var(--line);border-radius:4px;background:#fff;width:100%;color:var(--ink);
}
.qform textarea{resize:vertical}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:none;border-color:var(--ink)}
.qform input:focus-visible,.qform select:focus-visible,.qform textarea:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
/* align-items:end pins the INPUTS to a common baseline no matter how tall the
   label above either one grows. Belt and braces with the block-label fix: a
   future hint, a longer label or a wrap at a narrow width still cannot
   misalign the pair. */
.qform .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
.qform .prefer{display:flex;gap:22px;font-size:14.5px;font-weight:500;align-items:center;flex-wrap:wrap}
.qform .prefer .prefer-lbl{font-weight:600;font-size:13.5px}
.qform .prefer label{display:flex;flex-direction:row;align-items:center;gap:7px;font-weight:500}
.qform .btn{width:100%;padding:14px;font-size:16px}
.qform .fine{font-size:12.5px;color:var(--steel);text-align:center}



/* 17  SIMPLE CONTENT PAGES ================================================ */
/* Used by /sos, 404, /contact/thanks/ and Phase B placeholder pages. */

.page{padding:72px 0 88px}
.page-narrow{max-width:720px;margin:0 auto}
.page h1{font-size:clamp(30px,3.6vw,42px)}
.page .lede{font-size:18.5px;color:var(--steel);margin-bottom:32px;max-width:60ch}
.page .prose p{margin-bottom:18px;color:var(--steel)}
.page .prose p strong{color:var(--ink)}
.page .prose h2{font-size:clamp(22px,2.4vw,27px);margin-top:40px}

/* Numbered steps — the /sos three-step instruction. */
.steps{list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:0;
  border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:28px 0}
.steps li{
  counter-increment:step;display:grid;grid-template-columns:38px 1fr;gap:16px;
  padding:20px;border-bottom:1px solid var(--line);align-items:start;
}
.steps li:last-child{border-bottom:none}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--mono);font-size:13px;font-weight:600;color:var(--accent);padding-top:2px;
}
.steps .s-title{font-weight:600;display:block;margin-bottom:4px}
.steps .s-body{color:var(--steel);font-size:15.5px}

/* Callout strip. */
.callout{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:22px 26px;margin:28px 0;font-size:15.5px;color:var(--steel);
}
.callout strong{color:var(--ink)}
.callout .num{color:var(--ink);font-size:17px}

.callout-amber{background:#FFF8EC;border-color:var(--amber)}

/* Big phone block for the SOS page. */
.phone-block{display:flex;flex-direction:column;gap:4px;margin:8px 0 4px}
.phone-block .lbl{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
}
.phone-block a{font-family:var(--mono);font-weight:600;font-size:clamp(26px,4vw,34px);color:var(--ink)}
.phone-block a:hover{color:var(--accent)}
/* Optional line under a phone number - which line it is, and what it is for.
   Added when the technician promise moved off the sales number and onto the
   Reset Care one (Phase C follow-up). */
.phone-block .note{font-size:14.5px;color:var(--steel);max-width:44ch;margin-top:2px}
.phone-block .note strong{color:var(--ink)}

.actions-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:26px 0}

/* Link list for the 404 page. */
.linklist{list-style:none;display:flex;flex-direction:column;gap:0;
  border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:24px 0}
.linklist li{border-bottom:1px solid var(--line)}
.linklist li:last-child{border-bottom:none}
.linklist a{display:block;padding:16px 20px;font-weight:600}
.linklist a:hover{background:var(--panel);color:var(--accent)}
.linklist a span{display:block;font-weight:400;font-size:14.5px;color:var(--steel);margin-top:2px}


/* 18  FOOTER ============================================================== */

footer{background:#111417;color:#B9BEC6;padding:56px 0 36px;font-size:14.5px}
footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:44px}
/* Footer column headings are <h2>, not <h4>: the footer follows <main>, and an
   h4 straight after the page's last h2 is a skipped level. They are styled as
   small mono labels, which is why the global h2 rule has to be overridden here. */
footer h2{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#7B828C;margin-bottom:16px;
}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer a:hover{color:#fff;text-decoration:underline}
footer .f-logo{font-family:var(--display);font-weight:900;font-size:22px;color:#fff;margin-bottom:12px}
footer .f-logo .dot{color:var(--accent)}
footer .f-about{max-width:34ch;line-height:1.7}
footer .baseline{
  border-top:1px solid #2C3138;padding-top:22px;display:flex;justify-content:space-between;
  font-size:13px;color:#7B828C;flex-wrap:wrap;gap:12px;
}


/* 19  RESPONSIVE ========================================================== */

@media (max-width:920px){
  .hero .wrap,
  .outcomes .split,
  .situations .grid,
  .proof .grid,
  .decide,
  .support .cols,
  .quoteform .grid{grid-template-columns:1fr;gap:40px}

  .prod-grid{grid-template-columns:1fr}
  .ind-grid{grid-template-columns:1fr}
  footer .grid{grid-template-columns:1fr 1fr}
  .qform .row2{grid-template-columns:1fr}

  nav.links{display:none}
  .nav-toggle{display:inline-flex}

  .unsure,
  .legacy-note{flex-direction:column;align-items:flex-start;gap:14px}
}

@media (max-width:620px){
  body{font-size:16px}
  section{padding:56px 0}
  .hero{padding:48px 0 44px}
  .quoteform{padding:56px 0}

  .topbar .wrap{flex-direction:column;align-items:flex-start;gap:2px;padding-top:8px;padding-bottom:8px}
  .topbar .tagline{font-size:12px}
  .topbar .phones{gap:18px}

  /* The header has three items (logo, quote CTA, menu button) and at 380px
     they overflow at full size. Rather than drop the CTA — it is the primary
     conversion path — shrink all three. The menu button becomes icon-only; its
     label stays in the accessibility tree via .visually-hidden. */
  header.nav .wrap{height:64px;gap:10px}
  .logo .sub{display:none}
  .logo-mark{width:34px;height:34px}
  .logo-word{font-size:20px}
  .logo{gap:8px}
  .nav-actions{gap:10px}
  .nav-actions .btn{padding:10px 14px;font-size:14px}
  .nav-toggle{padding:9px 11px}
  .nav-toggle span:not(.bars){
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }

  .qform{padding:24px}
  .decide .col{padding:26px 22px 24px}
  .support .card{padding:26px}
  .cases li{flex-direction:column;gap:6px}
  .cases .tag{min-width:0}
  .proof .stat{border-left:none;border-top:2px solid var(--accent);padding-left:0;padding-top:22px}
  footer .grid{grid-template-columns:1fr;gap:32px}
  .steps li{grid-template-columns:28px 1fr;gap:12px;padding:16px}
}


/* 20  REDUCED MOTION ====================================================== */

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .prod:hover{transform:none}
}


/* ==========================================================================
   21  PHASE B COMPONENTS
   Migrated from docs/template-product-page.html and
   docs/template-support-page.html. The templates carried their own <style>
   blocks; nothing is duplicated into pages — every rule lives here.
   Tokens only: no new colours (build spec design rules).
   ========================================================================== */

/* 21.1  Breadcrumbs ------------------------------------------------------- */

.crumbs{font-family:var(--mono);font-size:12px;color:var(--steel);padding:20px 0 0}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
.crumbs .sep{margin:0 8px;color:var(--line)}
.crumbs [aria-current="page"]{color:var(--ink)}


/* 21.2  Product hero ------------------------------------------------------ */

.phero{padding:36px 0 64px}
.phero .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.phero h1{font-size:clamp(34px,4.2vw,48px);margin:12px 0 16px}
.phero .lede{font-size:18px;color:var(--steel);margin-bottom:26px;max-width:46ch}
.phero .keys{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:30px}
.phero .keys li{display:block;position:relative;padding-left:25px;font-size:16px}
.phero .keys li::before{
  content:"✓";position:absolute;left:0;top:0;
  font-family:var(--mono);color:var(--verify);font-weight:600;font-size:14px
}
.phero .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.phero .cta-note{font-size:13.5px;color:var(--steel)}
.phero .p-img{min-height:380px;border-radius:8px}

/* Text-first pages (legacy models, hubs) run a single column. */
.phero.solo .grid{grid-template-columns:1fr;max-width:760px}


/* 21.3  Legacy status banner ---------------------------------------------- */
/* Present only on legacy model pages. Current-range pages omit the element
   entirely rather than hiding it — nothing to unhide, nothing to forget. */

.status-legacy{
  background:#FFF7E8;border:1px solid #F2D9A6;border-radius:6px;
  padding:14px 20px;margin:0 0 26px;font-size:15px;color:var(--steel)
}
.status-legacy strong{color:var(--ink)}
.status-legacy a{color:var(--accent);font-weight:600}
.status-legacy a:hover{text-decoration:underline}


/* 21.4  Specification table ----------------------------------------------- */

.specs{background:var(--panel)}
.spec-table{
  width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--line);border-radius:6px;overflow:hidden
}
.spec-table th,.spec-table td{
  text-align:left;padding:13px 20px;border-bottom:1px solid var(--line);
  font-size:15px;vertical-align:top
}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:none}
.spec-table th{font-weight:600;width:34%;color:var(--ink);background:#FAFBFC}
.spec-table td{font-family:var(--mono);font-size:13.5px;color:var(--steel)}
.spec-note{font-size:13px;color:var(--steel);margin-top:12px;max-width:70ch}

/* Unresolved-fact marker. Deliberately loud: these must not reach launch.
   Never resolved by CC — David signs each one off (Phase B brief). */
.confirm{
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  background:#FFF7E8;border:1px solid var(--amber);border-radius:3px;
  padding:1px 7px;color:#7A5A12;display:inline-block
}


/* 21.5  Works-with cards -------------------------------------------------- */

.works .row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.works .card{border:1px solid var(--line);border-radius:6px;padding:24px 26px}
.works .card h3{font-family:var(--display);font-weight:750;font-size:18px;margin-bottom:6px}
.works .card p{font-size:14.5px;color:var(--steel);margin-bottom:12px}


/* 21.6  CTA band ---------------------------------------------------------- */

.cta-band{background:var(--navy);color:#fff;padding:56px 0}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.cta-band h2{color:#fff;margin-bottom:6px;font-size:clamp(24px,2.8vw,32px)}
.cta-band p{color:#B9BEC6;font-size:16px;max-width:56ch}
.cta-band .cta-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}


/* 21.7  Hub grids --------------------------------------------------------- */

.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hub-grid.two{grid-template-columns:repeat(2,1fr)}
.hub-card{
  border:1px solid var(--line);border-radius:8px;padding:28px 28px 26px;
  display:flex;flex-direction:column;gap:8px;background:var(--paper);
  transition:border-color .16s ease
}
.hub-card:hover{border-color:var(--ink)}
.hub-card .k{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel)
}
.hub-card h3{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.01em}
.hub-card p{font-size:15px;color:var(--steel);flex:1}
.hub-card .p-link{margin-top:4px}


/* 21.8  Support page — SOS hero, versions, plans, coverage ---------------- */

.sos-hero{background:var(--navy);color:#fff;padding:72px 0}
.sos-hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.sos-hero h1{color:#fff;margin:12px 0 14px}
.sos-hero p{color:#B9BEC6;max-width:46ch;font-size:17.5px}
.sos-hero .eyebrow{color:#7EA6F5}

.sos-card{
  background:var(--paper);color:var(--ink);border-radius:8px;padding:34px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.5)
}
.sos-card .t{font-family:var(--display);font-weight:800;font-size:22px;margin-bottom:6px}
.sos-card .sub{font-size:14.5px;color:var(--steel);margin-bottom:20px}
.sos-card .btn{width:100%;text-align:center;padding:15px;font-size:16px;margin-bottom:18px}
.sos-card .call{border-top:1px solid var(--line);padding-top:16px;font-size:14px;color:var(--steel)}
.sos-card .call .num{font-size:18px;color:var(--ink);display:block;margin-top:4px}
.sos-card .steps{margin:0 0 18px;border:none}
.sos-card .steps li{
  display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:14.5px;
  align-items:baseline;padding:0 0 10px;border-bottom:none
}
.sos-card .steps li::before{content:none}
.sos-card .steps .n{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:600}

.versions{background:var(--panel)}
.ver-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ver{
  background:var(--paper);border:1px solid var(--line);border-radius:6px;
  padding:26px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px
}
.ver h3{font-family:var(--display);font-weight:800;font-size:20px}
.ver .v{font-family:var(--mono);font-weight:600;font-size:22px;color:var(--accent)}
.ver .lbl{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);display:block
}
.ver-note{font-size:13.5px;color:var(--steel);margin-top:14px;max-width:76ch}
.ver-note a{color:var(--accent);font-weight:600}

.care .cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.plan{border:1px solid var(--line);border-radius:8px;padding:32px}
.plan.feature{border-color:var(--accent);border-width:2px}
.plan .k{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:600;margin-bottom:8px
}
.plan h3{font-family:var(--display);font-weight:800;font-size:23px;margin-bottom:8px}
.plan p{color:var(--steel);font-size:15.5px;margin-bottom:16px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.plan li{display:block;position:relative;padding-left:23px;font-size:15px}
.plan li::before{
  content:"✓";position:absolute;left:0;top:0;
  font-family:var(--mono);color:var(--verify);font-weight:600;font-size:13px
}
.plan .price{font-family:var(--mono);font-weight:600;font-size:19px;display:block}
.plan .price small{font-family:var(--body);font-weight:400;color:var(--steel);font-size:13.5px}

.coverage table{width:100%;border-collapse:collapse;border:1px solid var(--line)}
.coverage th,.coverage td{
  text-align:left;padding:12px 18px;border-bottom:1px solid var(--line);font-size:14.5px
}
.coverage tr:last-child td{border-bottom:none}
.coverage th{background:#FAFBFC;font-weight:600}
.coverage td{color:var(--steel)}
.coverage td.mono{font-family:var(--mono);font-size:13px}
.coverage td a{color:var(--accent);font-weight:600}
.coverage td a:hover{text-decoration:underline}

.contact-strip{background:var(--panel);border-top:1px solid var(--line)}
.contact-strip .wrap{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;padding-top:36px;padding-bottom:36px
}
.contact-strip a{color:var(--accent);font-weight:600}


/* 21.9  About — timeline -------------------------------------------------- */

.timeline{list-style:none;border-left:2px solid var(--line);margin:8px 0 0;padding-left:0}
.timeline li{position:relative;padding:0 0 34px 30px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:-7px;top:7px;width:12px;height:12px;
  border-radius:50%;background:var(--accent);border:2px solid var(--paper)
}
.timeline .yr{
  font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.1em;
  color:var(--accent);display:block;margin-bottom:4px
}
.timeline h3{font-family:var(--display);font-weight:800;font-size:20px;margin-bottom:6px}
.timeline p{color:var(--steel);font-size:15.5px;max-width:58ch}


/* 21.10  Testimonials — quotes and case blurbs --------------------------- */

.quote-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.quote-card{
  border:1px solid var(--line);border-radius:8px;padding:28px;
  display:flex;flex-direction:column;gap:14px;background:var(--paper)
}
.quote-card blockquote{font-size:16.5px;line-height:1.55;flex:1}
.quote-card blockquote::before{content:"\201C";color:var(--accent);font-weight:900}
.quote-card blockquote::after{content:"\201D";color:var(--accent);font-weight:900}
.quote-card cite{font-style:normal;font-size:14.5px;color:var(--steel)}
.quote-card cite strong{display:block;color:var(--ink);font-weight:600;font-size:15px}

/* Logo inline beside its own quote — the treatment for four or fewer permitted
   logos, where a wall would read as "these are all the customers we have".

   FULL COLOUR here (ruling 31 Aug 2026). A logo standing alone in its own card
   has nothing to clash with, and colour reads as authentic — a greyscaled mark
   beside a named customer's own words looks like stock decoration. Greyscale is
   for ROWS of logos, where a dozen palettes side by side read as noise; see
   .logo-wall below. */
.quote-card cite .quote-logo{
  display:block;height:52px;width:auto;max-width:200px;object-fit:contain;
  margin:0 0 12px
}

/* Same treatment for a logo beside a case note. Full colour, same reasoning.
   align-self:flex-start matters: .who is a column flex container, so without it
   the image stretches to the column's full width and the logo floats in the
   middle of an over-wide box instead of sitting flush with the heading below. */
.story .who .quote-logo{
  display:block;align-self:flex-start;
  height:52px;width:auto;max-width:180px;object-fit:contain;
  margin:0 0 10px
}
@media (max-width:620px){
  .story .who .quote-logo{height:46px;max-width:150px}
}
@media (max-width:620px){
  .quote-card cite .quote-logo{height:46px;max-width:160px}
}

.stories{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.story{
  display:grid;grid-template-columns:190px 1fr;gap:32px;
  padding:30px 0;border-bottom:1px solid var(--line)
}
.story .who{display:flex;flex-direction:column;gap:4px}
.story .who h3{font-family:var(--display);font-weight:800;font-size:19px}
.story .who .tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel)
}
.story .body p{color:var(--steel);font-size:15.5px;margin-bottom:10px}
.story .body p:last-child{margin-bottom:0}
.story .body strong{color:var(--ink)}


/* 21.11  Contact details block ------------------------------------------- */

.contact-cols{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.detail-list{list-style:none;display:flex;flex-direction:column;gap:0;
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
.detail-list li{padding:18px 22px;border-bottom:1px solid var(--line)}
.detail-list li:last-child{border-bottom:none}
.detail-list .lbl{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);display:block;margin-bottom:4px
}
.detail-list a,.detail-list .val{font-weight:600;font-size:16px}
.detail-list a:hover{color:var(--accent);text-decoration:underline}
.detail-list .note{display:block;font-weight:400;font-size:13.5px;color:var(--steel);margin-top:4px}

/* The standard form drops onto light pages as well as the dark quote band. */
.form-light{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.form-light .qform{border:1px solid var(--line)}


/* 21.12  Long-form prose (privacy policy) -------------------------------- */

.prose h2{font-size:clamp(22px,2.4vw,28px);margin:44px 0 12px}
.prose h3{font-family:var(--display);font-weight:750;font-size:19px;margin:28px 0 8px}
.prose ul,.prose ol{margin:0 0 18px 22px;color:var(--steel)}
.prose li{margin-bottom:8px}
.prose li strong{color:var(--ink)}
.prose .meta-block{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:20px 24px;margin-bottom:28px;font-size:15px
}
.prose .meta-block p{margin-bottom:6px}
.prose .meta-block p:last-child{margin-bottom:0}
.prose table{
  width:100%;border-collapse:collapse;border:1px solid var(--line);
  margin:20px 0 28px;font-size:14.5px
}
.prose th,.prose td{
  text-align:left;padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:top
}
.prose tbody tr:last-child td{border-bottom:none}
.prose th{background:#FAFBFC;font-weight:600}
.prose td{color:var(--steel)}
.prose td:first-child{font-family:var(--mono);font-size:13px;white-space:nowrap;color:var(--ink)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}


/* 21.13  Phase B responsive ---------------------------------------------- */

@media (max-width:920px){
  .phero .grid,
  .sos-hero .grid,
  .care .cols,
  .ver-grid,
  .contact-cols{grid-template-columns:1fr;gap:36px}

  .works .row,
  .hub-grid,
  .hub-grid.two,
  .quote-grid{grid-template-columns:1fr}

  .story{grid-template-columns:1fr;gap:12px}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
}

@media (max-width:620px){
  /* Long unbroken mono strings (model lists, version numbers) must break rather
     than push the page sideways at 380px. */
  .spec-table td,.coverage td,.prose td{overflow-wrap:anywhere}
  .prose td:first-child{white-space:normal}

  .phero{padding:24px 0 48px}
  .phero .p-img{min-height:240px}
  .plan,.sos-card{padding:24px}
  .spec-table th,.spec-table td{padding:11px 14px;font-size:14px}
  .spec-table th{width:42%}
  .coverage th,.coverage td{padding:10px 12px;font-size:13.5px}
  .ver{padding:20px}
  .contact-strip .wrap{flex-direction:column;align-items:flex-start}
}

/* 21.14  Small text utilities -------------------------------------------- */
/* Added because Phase B has several sections that are plain prose between
   components. Cheaper than a page-level <style> block on eight pages. */

.sub-h{font-family:var(--display);font-weight:750;font-size:20px;margin:0 0 10px}
.body-copy{color:var(--steel);max-width:70ch;margin-bottom:16px}
.body-copy:last-child{margin-bottom:0}
.body-copy strong{color:var(--ink)}
.mb-l{margin-bottom:28px}
.mb-xl{margin-bottom:40px}


/* 21.15  Payroll export list --------------------------------------------- */
/* One entry per payroll system on /products/software/payroll-exports/. The
   entries are real <h2>s because each names a distinct system a visitor may be
   searching for, but the global h2 size (clamp to 38px) is far too heavy at
   twenty-one of them down one page, so it is stepped down here. */

.pay-list{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 44px}
.pay-item{border-top:2px solid var(--ink);padding-top:14px}
.pay-item h2{
  font-family:var(--display);font-weight:800;font-stretch:100%;
  font-size:19px;line-height:1.25;letter-spacing:-.01em;margin-bottom:8px
}
.pay-item p{font-size:15px;color:var(--steel);margin:0;max-width:52ch}

@media (max-width:920px){
  .pay-list{grid-template-columns:1fr;gap:26px}
}


/* 21.16  FAQ blocks ------------------------------------------------------- */
/* Native <details>/<summary>: no JavaScript, keyboard-operable out of the box,
   and the browser's find-in-page opens a closed answer rather than missing it.
   Focus styling comes from the global summary:focus-visible rule in §2.

   STANDING RULE: the FAQPage JSON-LD on a page must repeat these questions and
   answers word for word. Structured data that does not match the visible page
   is a manual-action risk — see BUILD-NOTES §6.1. */

.faq{max-width:820px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;position:relative;padding:20px 46px 20px 0;
  font-family:var(--display);font-weight:750;font-size:18px;line-height:1.35;
  color:var(--ink)
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-weight:600;font-size:21px;color:var(--accent)
}
.faq-item[open] summary::after{content:"\2013"}
.faq-item summary:hover{color:var(--accent)}
.faq-item .a{padding:0 46px 22px 0;color:var(--steel);font-size:16px;max-width:70ch}
.faq-item .a p{margin-bottom:12px}
.faq-item .a p:last-child{margin-bottom:0}

@media (max-width:620px){
  .faq-item summary{font-size:16.5px;padding-right:38px}
  .faq-item .a{font-size:15px;padding-right:0}
}


/* ==========================================================================
   22  CLIENT LOGO WALL
   Renders NOTHING until real logo files are placed. There is no placeholder
   state and there must never be one: a wall of invented wordmarks is a claim
   about who Reset's customers are.

   Treatment rule (BUILD-NOTES): 5 or more permitted logos -> use the wall;
   4 or fewer -> drop the wall and put each logo beside its own quote instead.
   A thin wall reads as "these are all the customers we have".

   Every logo needs a permission record in PERMISSIONS.md and a row in
   ASSETS.md before it goes in here.
   ========================================================================== */

.logo-wall{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
  gap:38px 52px;margin:32px 0 0
}
/* The whole strip disappears while it holds no logos - no gap, no stray
   padding, nothing to explain to a visitor. */
.logo-wall:empty{display:none}

/* ROW placement keeps greyscale. This is the deliberate counterpart to the
   full-colour inline treatment above: in a row, a dozen brand palettes side by
   side read as noise, so they are neutralised. Alone in a card, a logo does
   not need neutralising. */
.logo-wall img{
  height:34px;width:auto;max-width:170px;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:opacity .16s ease
}
.logo-wall img:hover{opacity:1}

/* NO silhouette treatment, and no logos on dark bands.
   Retired 31 Aug 2026. `brightness(0) invert(1)` turns a colour logo into a
   flat white shape, which is fine for a clean wordmark and destroys anything
   illustrated - the Nerang Park Poultry rooster becomes an unreadable blob.
   Logos are greyscale-on-light only. If a dark-band wall ever returns it is a
   deliberate decision for wordmark logos, not a default. */

@media (max-width:620px){
  .logo-wall{gap:26px 32px;justify-content:center}
  .logo-wall img{height:28px;max-width:130px}
}


/* ==========================================================================
   23  FORM STATUS
   Feedback line for the JavaScript submit path. Empty and inert until the
   script writes to it.
   ========================================================================== */

.form-status{font-size:14.5px;line-height:1.5}
.form-status:empty{display:none}
.form-status[data-state="sending"]{color:var(--steel)}
.form-status[data-state="error"]{
  color:#8A2A2A;background:#FDF3F3;border:1px solid #F0D2D2;
  border-radius:4px;padding:10px 14px
}