/* ============================================================
   ACCOUNTING LANDING PAGE (/accounting.html)
   A clean, professional accounting-firm page. Colour discipline:
   orange = actions + accents + "attention" values only; green =
   positive/live; everything else calm neutral. Cards use quiet
   hairline borders (no ember glow), so the eye lands on the CTA.
   ============================================================ */
.ap-body{background:var(--bg);color:var(--ink)}
.ap{position:relative;z-index:var(--z-base)}
.ap section{position:relative}

/* nav — solid, minimal */
.ap-nav{background:var(--bg);border-bottom:1px solid var(--line)}
.ap-nav .nav-in{padding:16px var(--gutter)}

/* shared bits */
.ap .wrap{max-width:1140px}
.ap-kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember-soft);font-weight:600}
.ap-kicker.ctr{display:block;text-align:center}
.ap-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ember-soft);font-weight:700;
  background:rgba(143,111,62,.08);border:1px solid rgba(143,111,62,.3);
  padding:8px 16px;border-radius:var(--r-pill)}
.ap-eyebrow .led{width:7px;height:7px;border-radius:50%;background:var(--ember-soft);
  box-shadow:0 0 10px var(--glow);animation:emberPulse 2.4s var(--ease) infinite}
.ap-head{text-align:center;margin-bottom:34px}
.ap-note{text-align:center;color:var(--ink-faint);font-size:13.5px;margin-top:16px}

/* ---------- HERO ---------- */
.ap-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding:112px var(--gutter) 60px}
.ap-voice{font-family:var(--font-serif);font-style:italic;font-size:19px;line-height:1.4;
  color:var(--ink);margin:16px 0 0;max-width:30em}
.ap-hero-l h1{font-size:clamp(38px,5vw,62px);line-height:1.03;font-weight:700;letter-spacing:-.04em;
  margin:16px 0 0}
.ap-hero-l h1 .serif{font-weight:400;letter-spacing:-.02em}
.ap-lead{margin:20px 0 0;font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:34em}
.ap-lead b{color:var(--ink);font-weight:600}
.ap-cta{margin-top:28px}
.ap-ticks{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:14px 22px}
.ap-ticks li{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft)}
.ap-ticks svg{width:16px;height:16px;fill:none;stroke:var(--ember-soft);stroke-width:1.7;flex:none}

/* Business Snapshot card — the "live books" proof */
.ap-snap{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--panel);
  box-shadow:var(--shadow-3);padding:20px 22px;position:relative}
.snap-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.snap-title{font-size:15px;font-weight:600;color:var(--ink)}
.snap-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--green-soft);
  font-family:var(--font-mono);letter-spacing:.04em}
.snap-live i{width:7px;height:7px;border-radius:50%;background:var(--green-soft);
  box-shadow:0 0 8px rgba(143,111,62,.5);animation:ledPulse 2.4s var(--ease) infinite}
/* Honest label: this snapshot is an illustrative example, not a live feed —
   a quiet neutral tag, deliberately NOT the pulsing green "live" dot. */
.snap-demo{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:3px 9px}
.snap-demo-note{font-size:11px;color:var(--ink-faint);line-height:1.5;margin-top:12px;text-align:center}
.snap-rows{display:flex;flex-direction:column}
.snap-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.snap-row .sr-ic{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:rgba(20,20,20,.03);border:1px solid var(--line)}
.snap-row .sr-ic svg{width:16px;height:16px;fill:none;stroke:var(--ink-soft);stroke-width:1.7}
.snap-row .sr-l{flex:1;font-size:13.5px;color:var(--ink-soft)}
.snap-row .sr-v{font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.snap-row .sr-tag{font-size:10.5px;font-family:var(--font-mono);letter-spacing:.03em;white-space:nowrap;
  padding:3px 8px;border-radius:6px;min-width:74px;text-align:center}
.sr-tag.up{color:var(--green-soft);background:rgba(168,131,74,.12)}
.sr-tag.ok{color:var(--green-soft);background:rgba(168,131,74,.12)}
.sr-tag.warn{color:var(--ember-soft);background:rgba(143,111,62,.12)}
/* mini trend chart */
.snap-chart{margin-top:14px}
.snap-chart svg{width:100%;height:70px;display:block;overflow:visible}
.chart-line{stroke:var(--ember);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chart-dot{fill:var(--ember);filter:drop-shadow(0 0 6px var(--glow))}
.snap-months{display:flex;justify-content:space-between;margin-top:8px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink-faint)}

/* ---------- INTEGRATIONS ---------- */
.ap-integ{padding:26px var(--gutter) 8px;border-top:1px solid var(--line);text-align:center}
.ap-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px 40px;margin-top:22px}
.ap-logos .lg{color:var(--ink-soft);opacity:.9;transition:.3s var(--ease)}
.ap-logos .lg:hover{opacity:1;color:var(--ink)}
.lg-xero{font-size:26px;font-weight:700;letter-spacing:-.02em}
.lg-qb{font-size:19px;font-weight:600;display:inline-flex;align-items:baseline;gap:6px}
.lg-qb b{background:var(--ink-soft);color:var(--bg);border-radius:5px;padding:2px 5px;font-weight:800;font-size:14px}
.lg-sage{font-size:24px;font-weight:700}
.lg-stripe{font-size:23px;font-weight:700;letter-spacing:-.01em}
.lg-bank{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:600}
.lg-bank svg{width:22px;height:22px;fill:none;stroke:var(--ink-soft);stroke-width:1.6}

/* ---------- SECTIONS ---------- */
.ap-sec{padding:52px var(--gutter)}

/* What's included — grouped like a real finance department's org chart */
.ap-dept{margin-bottom:30px}
.ap-dept:last-child{margin-bottom:0}
.ap-dept-h{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:14px;font-weight:600;text-align:center}
/* Fixed 320px per card everywhere in this section — a group of 1 card and
   a group of 3 must share the exact same card width, or the groups read
   as unrelated instead of one consistent grid. Centered so a lone card
   (or a pair) doesn't leave a huge dead-space gap hanging off one side. */
.ap-grid{display:grid;gap:16px;justify-content:center}
.ap-included{grid-template-columns:repeat(auto-fit,minmax(240px,320px))}
.ap-card{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:24px}
.ap-card .ap-ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:rgba(143,111,62,.1);border:1px solid rgba(143,111,62,.22);margin-bottom:16px}
.ap-card .ap-ic svg{width:22px;height:22px;fill:none;stroke:var(--ember-soft);stroke-width:1.7}
.ap-card h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
.ap-card .ap-sub{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ember-soft);margin:5px 0 11px}
.ap-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}

/* How it works — numbered timeline */
.ap-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:34px 24px 28px}
.ap-steps::before{content:"";position:absolute;top:50px;left:9%;right:9%;height:1px;background:var(--line-2)}
.ap-step{text-align:center;position:relative}
.ap-step .st-n{width:32px;height:32px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;
  background:var(--ember);color:#F6F4EF;font-family:var(--font-mono);font-size:13px;font-weight:700;
  position:relative;z-index:1;box-shadow:0 0 0 5px var(--panel)}
.ap-step .st-ic{display:block;margin:0 auto 10px}
.ap-step .st-ic svg{width:24px;height:24px;fill:none;stroke:var(--ember-soft);stroke-width:1.6}
.ap-step h4{font-size:14.5px;font-weight:600;margin-bottom:6px}
.ap-step p{font-size:12px;color:var(--ink-soft);line-height:1.5;max-width:19em;margin:0 auto}

/* Why it works — benefits */
.ap-why{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:30px}
.ap-benefit{display:flex;gap:13px}
.ap-benefit .ap-ic{width:40px;height:40px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:rgba(143,111,62,.1);border:1px solid rgba(143,111,62,.22)}
.ap-benefit .ap-ic svg{width:20px;height:20px;fill:none;stroke:var(--ember-soft);stroke-width:1.7}
.ap-benefit h4{font-size:15px;font-weight:600;margin-bottom:5px}
.ap-benefit p{font-size:12.5px;color:var(--ink-soft);line-height:1.5}

/* ---------- PRICING ---------- */
.ap-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.ap-plan{position:relative;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:24px 22px;display:flex;flex-direction:column}
.ap-plan--feat{border-color:var(--ember);box-shadow:0 20px 50px -30px var(--glow)}
.pl-badge{position:absolute;top:-11px;left:22px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#F6F4EF;background:var(--ember);padding:4px 10px;border-radius:var(--r-pill);font-weight:600}
.pl-name{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.pl-who{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ember-soft);margin:6px 0 16px}
.pl-price{font-size:14px;color:var(--ink-soft);display:flex;align-items:baseline;gap:6px;
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.pl-price b{font-family:var(--font-serif);font-weight:400;font-size:34px;color:var(--ink);letter-spacing:-.01em}
.pl-price span{font-size:13px;color:var(--ink-faint)}
.pl-price--quote{font-family:var(--font-serif);font-size:26px;color:var(--ink);font-weight:400;align-items:baseline}
.pl-price--quote span{font-family:var(--font-sans);font-size:12px;color:var(--ink-faint)}
.pl-feat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.pl-feat li{position:relative;padding-left:24px;font-size:13px;color:var(--ink-soft);line-height:1.4}
.pl-feat li::before{content:"";position:absolute;left:0;top:1px;width:16px;height:16px;border-radius:50%;
  background:rgba(143,111,62,.1);border:1px solid rgba(143,111,62,.22);
  -webkit-mask:none}
.pl-feat li::after{content:"";position:absolute;left:4px;top:5px;width:8px;height:5px;
  border-left:1.6px solid var(--ember-soft);border-bottom:1.6px solid var(--ember-soft);transform:rotate(-45deg)}
.ap-note b{color:var(--ink);font-weight:700}

/* ---------- CTA BAND ---------- */
/* This section combines .ap-band + .wrap on one element (see accounting.html),
   so .ap-band's own padding overrides .wrap's gutter padding entirely (same
   specificity, later in the cascade) — on phone, where max-width:1140px
   doesn't constrain anything, that left it flush against both screen edges
   with no visible rounded corners. width:calc(...) restores the gutter
   independently of the card's own internal padding. */
.ap-band{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  width:calc(100% - var(--gutter)*2);margin:8px auto 0;padding:34px 36px;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(120deg,rgba(143,111,62,.08),transparent 70%),var(--panel)}
.ap-band-l h2{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.ap-band-l p{font-size:14.5px;color:var(--ink-soft);margin-top:8px;max-width:34em;line-height:1.55}
.ap-band-r{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex:none}
.ap-band-note{font-size:12px;color:var(--ink-faint)}

/* ---------- TRUST STRIP ---------- */
.ap-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px;
  padding:34px var(--gutter) 8px}
.ap-trust .tr{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft)}
.ap-trust .tr b{color:var(--ink);font-weight:700}
.ap-trust .tr-ic{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid var(--line-2);background:rgba(20,20,20,.02)}
.ap-trust .tr-ic svg{width:15px;height:15px;fill:none;stroke:var(--ink-soft);stroke-width:1.7}

/* ---------- FOOTER ---------- */
.ap-foot{border-top:1px solid var(--line);margin-top:40px;padding:34px 0}
.ap-foot-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ap-foot p{font-size:12.5px;color:var(--ink-faint)}
.ap-back{font-size:13px;color:var(--ink-soft);font-weight:500;transition:var(--t-fast)}
.ap-back:hover{color:var(--ember-soft)}

/* ---------- MOTION ---------- */
.ap .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ap .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ap .reveal{opacity:1;transform:none;transition:none}}

/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){
  .ap-hero{grid-template-columns:1fr;gap:34px;padding-top:100px}
  .ap-included{grid-template-columns:1fr 1fr}
  .ap-why{grid-template-columns:1fr 1fr}
  .ap-plans{grid-template-columns:1fr 1fr;gap:20px 16px}
  .ap-steps{grid-template-columns:1fr;gap:0;padding:10px 20px}
  .ap-steps::before{display:none}
  .ap-step{display:grid;grid-template-columns:32px 1fr;gap:14px;text-align:left;align-items:start;
    padding:16px 0;border-bottom:1px solid var(--line)}
  .ap-step:last-child{border-bottom:none}
  .ap-step .st-n{margin:0}
  .ap-step .st-ic{display:none}
  .ap-step h4{grid-column:2}
  .ap-step p{grid-column:2;margin:0;max-width:none}
}
@media(max-width:560px){
  .ap-hero{padding:92px var(--gutter) 44px}
  .ap-sec{padding:40px var(--gutter)}
  .ap-included{grid-template-columns:1fr}
  .ap-plans{grid-template-columns:1fr;gap:22px}
  .ap-why{grid-template-columns:1fr;gap:16px;padding:22px}
  .ap-band{flex-direction:column;align-items:flex-start;padding:24px}
  .ap-band-r{align-items:flex-start;width:100%}
  .ap-band-r .btn{width:100%}
  .ap-ticks{gap:10px 18px}
  .ap-logos{gap:18px 26px}
  .lg-xero,.lg-sage,.lg-stripe{font-size:20px}
}

/* ---------- Phone: editorial lists, not stacked boxes (same language as the
   rest of the site's mobile pass). Lives at file end to win the cascade. ---- */
@media(max-width:560px){
  .ap-dept{margin-bottom:26px}
  .ap-dept-h{text-align:left;margin-bottom:6px}
  .ap-grid{gap:0}
  .ap-card{background:none;border:0;border-radius:0;box-shadow:none;
    padding:15px 2px 16px;border-bottom:1px solid var(--line-2);
    display:grid;grid-template-columns:38px 1fr;column-gap:14px}
  .ap-card:last-child{border-bottom:0}
  .ap-card .ap-ic{width:36px;height:36px;border-radius:10px;margin-bottom:0;grid-row:1/span 3}
  .ap-card .ap-ic svg{width:18px;height:18px}
  .ap-card h3{font-size:16px;grid-column:2}
  .ap-card .ap-sub{grid-column:2;margin:3px 0 6px}
  .ap-card p{grid-column:2}
  /* plans keep their card but lose the dead air */
  .ap-plans{gap:18px}
  .ap-plan{padding:20px 18px}
  .pl-who{margin:5px 0 12px}
  .pl-price{padding-bottom:12px;margin-bottom:12px}
  .pl-price b{font-size:30px}
  .pl-feat{gap:8px}
}