/* Shared styles for the guide pages (/website-design-christchurch, /tradie-websites,
   /website-pricing). Tokens and components mirror public/index.html. */
:root {
  --night:#14213D; --night-2:#1D2B4A; --accent:#FCA311; --accent-ink:#14213D;
  --accent-text:#8A5A05;
  --bg:#FAF9F6; --bg-2:#F3F1EB; --surface:#FFFFFF; --surface-2:#FBFAF7;
  --text:#171B24; --muted:#5B6474; --line:#E4E1DA; --line-2:#EDEBE4;
  --good:#1B7A43; --on-night:#EAF0FA; --on-night-muted:#A9B4CA;
  --f-display:clamp(2rem,5.4vw,3.1rem); --f-h2:clamp(1.4rem,3.2vw,1.85rem);
  --f-h3:1.12rem; --f-body:1.05rem; --f-sm:.92rem; --f-label:.74rem;
  --r-sm:7px; --r:11px; --r-lg:18px; --pill:999px;
  --shadow-1:0 1px 2px rgba(20,33,61,.05),0 8px 24px -12px rgba(20,33,61,.14);
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.28s;
  --wrap:1080px; --measure:68ch;
  color-scheme:light;
}
/* Dark tokens: follow the system unless the visitor picked light; or forced by the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --night:#0A1120; --night-2:#13203A;
    --bg:#0C0F16; --bg-2:#10141D; --surface:#151A24; --surface-2:#1A2029;
    --text:#E9EAEE; --muted:#98A0AF; --line:#242B37; --line-2:#1E2530;
    --good:#4CC38A; --on-night:#E9EAEE; --on-night-muted:#9AA6BC; --accent-text:#FCA311;
    --shadow-1:0 1px 2px rgba(0,0,0,.4),0 10px 30px -16px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --night:#0A1120; --night-2:#13203A;
  --bg:#0C0F16; --bg-2:#10141D; --surface:#151A24; --surface-2:#1A2029;
  --text:#E9EAEE; --muted:#98A0AF; --line:#242B37; --line-2:#1E2530;
  --good:#4CC38A; --on-night:#E9EAEE; --on-night-muted:#9AA6BC; --accent-text:#FCA311;
  --shadow-1:0 1px 2px rgba(0,0,0,.4),0 10px 30px -16px rgba(0,0,0,.6);
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition-duration:.001ms!important; } }
body{ margin:0; background:var(--bg); color:var(--text); line-height:1.65;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a{ color:inherit; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }
.label{ font-size:var(--f-label); letter-spacing:.16em; text-transform:uppercase; font-weight:700; }
h1,h2,h3{ letter-spacing:-.02em; text-wrap:balance; margin:0; line-height:1.15; }
section{ padding-block:clamp(2.6rem,6vw,4.2rem); }
.eyebrow{ color:var(--accent-text); margin-bottom:.8rem; }
.on-night .eyebrow, .eyebrow.on-night{ color:var(--accent); }
.alt{ background:var(--bg-2); border-block:1px solid var(--line-2); }

.prose{ max-width:var(--measure); }
/* When .prose sits on the .wrap itself, keep the wrap's width (so the column lines up with the
   other sections) and limit the line length of its children instead. */
.wrap.prose{ max-width:var(--wrap); }
.wrap.prose > *{ max-width:var(--measure); }
.prose h2{ font-size:var(--f-h2); margin:0 0 .9rem; }
.prose h3{ font-size:var(--f-h3); margin:1.6rem 0 .4rem; }
.prose p, .prose li{ color:var(--text); }
.prose p{ margin:0 0 1rem; }
.prose ul, .prose ol{ margin:0 0 1.1rem; padding-left:1.25rem; }
.prose li{ margin:.3rem 0; }
.prose .muted, .muted{ color:var(--muted); }
.prose a, .inline-link{ color:var(--accent-text); font-weight:600; text-underline-offset:2px; }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:.55rem; font:inherit; font-weight:700; text-decoration:none;
  border:0; cursor:pointer; border-radius:var(--r-sm); padding:.85rem 1.4rem; font-size:var(--f-body);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.btn-accent{ background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-1); }
.btn-accent:hover{ transform:translateY(-1px); box-shadow:0 10px 26px -10px rgba(252,163,17,.6); }
.btn-ghost{ background:transparent; color:inherit; border:1.5px solid color-mix(in srgb,currentColor 35%,transparent); }
.cta-row{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }

/* nav */
.nav{ position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line-2); }
.nav .wrap{ display:flex; align-items:center; gap:1rem; height:60px; }
.logo{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); font-weight:800; letter-spacing:-.01em; }
.logo .mark{ width:26px; height:26px; flex:0 0 auto; }
.nav .spacer{ flex:1; }
.nav-links{ display:flex; gap:1.4rem; font-size:var(--f-sm); font-weight:600; }
.nav-links a{ color:var(--muted); text-decoration:none; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--text); }
@media (max-width:760px){ .nav-links{ display:none; } }
.toggle{ background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:var(--pill);
  padding:.35rem .9rem; min-height:44px; font:inherit; font-size:var(--f-sm); cursor:pointer; display:inline-flex; gap:.4rem; align-items:center; }

/* hero */
.hero{ background:radial-gradient(1100px 440px at 85% -10%, var(--night-2) 0%, transparent 60%), var(--night);
  color:var(--on-night); }
.hero .wrap{ padding-block:clamp(2.4rem,5.5vw,4.2rem); }
.hero h1{ font-size:var(--f-display); margin:0 0 1rem; max-width:22ch; }
.hero h1 .hi{ color:var(--accent); }
.hero .sub{ font-size:1.14rem; color:var(--on-night-muted); max-width:56ch; margin:0 0 1.6rem; }
.crumbs{ font-size:var(--f-sm); color:var(--on-night-muted); margin:0 0 1.2rem; }
.crumbs a{ color:var(--on-night-muted); }
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.crumbs li+li::before{ content:"/"; margin-right:.4rem; opacity:.6; }
.trust{ color:var(--on-night-muted); font-size:var(--f-sm); margin:1.1rem 0 0; display:flex; gap:1.1rem; flex-wrap:wrap; }

/* cards & grids */
.grid{ display:grid; gap:1rem; margin-top:1.6rem; }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:820px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1.35rem 1.4rem; box-shadow:var(--shadow-1); }
.card h3{ font-size:var(--f-h3); margin:0 0 .45rem; }
.card p{ margin:0; color:var(--muted); font-size:var(--f-sm); }
.card .price{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; margin:.2rem 0 .1rem; color:var(--text); }
.card .price small{ font-size:.95rem; font-weight:600; color:var(--muted); }
.card .price s{ font-size:1rem; font-weight:500; color:var(--muted); margin-left:.35rem; }
.card.feature{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),var(--shadow-1); }
.card ul{ margin:.7rem 0 0; padding-left:1.1rem; color:var(--text); font-size:var(--f-sm); }

/* steps */
.steps{ counter-reset:s; list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:.9rem; max-width:var(--measure); }
.steps li{ counter-increment:s; display:grid; grid-template-columns:2.2rem 1fr; gap:.9rem; align-items:start; }
.steps li::before{ content:counter(s); width:2.1rem; height:2.1rem; display:grid; place-items:center; border-radius:50%;
  background:var(--night); color:var(--accent); font-weight:800; font-size:.95rem; }
.steps strong{ display:block; }
.steps span{ color:var(--muted); font-size:var(--f-sm); }

/* tables */
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.2rem 0; }
table.prices{ width:100%; border-collapse:collapse; font-size:var(--f-sm); min-width:480px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
table.prices th, table.prices td{ text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
table.prices th{ font-size:var(--f-label); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--surface-2); }
table.prices td.num{ white-space:nowrap; font-weight:700; }
table.prices tr:last-child td{ border-bottom:0; }
/* Phones: each row becomes a labelled card instead of a sideways-scrolling table. */
@media (max-width:600px){
  table.prices{ min-width:0; border:0; background:none; }
  table.prices thead{ position:absolute; left:-9999px; }
  table.prices tr{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
    margin-bottom:.7rem; padding:.35rem 0; }
  table.prices td{ display:flex; gap:.8rem; border:0; padding:.35rem .9rem; }
  table.prices td::before{ content:attr(data-label); flex:0 0 6.2rem; font-size:var(--f-label); letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted); font-weight:700; padding-top:.2rem; }
  table.prices td.num{ white-space:normal; }
}

/* example brief */
.brief{ background:var(--surface); border:1px dashed var(--line); border-left:3px solid var(--accent); border-radius:var(--r);
  padding:1rem 1.2rem; font-size:1rem; color:var(--text); max-width:var(--measure); margin:1rem 0; }

/* faq */
.faq{ margin-top:1.4rem; display:grid; gap:.7rem; max-width:780px; }
details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:.15rem 1.15rem; }
details[open]{ box-shadow:var(--shadow-1); }
summary{ cursor:pointer; font-weight:600; padding:.95rem 0; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; color:var(--accent-text); font-weight:800; font-size:1.3rem; line-height:1; }
details[open] summary::after{ content:"\2212"; }
details p{ margin:0 0 1rem; color:var(--muted); font-size:var(--f-sm); }

/* final CTA + footer */
.final{ background:var(--night); color:var(--on-night); text-align:center; }
.final h2{ font-size:var(--f-h2); }
.final p{ color:var(--on-night-muted); max-width:52ch; margin:.8rem auto 1.6rem; }
footer{ border-top:1px solid var(--line-2); padding-block:2.2rem; }
footer .cols{ display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; align-items:flex-start; }
.fine{ color:var(--muted); font-size:.85rem; max-width:60ch; }
.fine strong{ color:var(--text); }
.guides{ list-style:none; padding:0; margin:0; display:grid; gap:.35rem; font-size:.88rem; }
.guides a{ color:var(--muted); }
.skip{ position:absolute; left:-999px; top:0; background:var(--accent); color:var(--accent-ink); padding:.6rem 1rem; border-radius:var(--r-sm); z-index:50; }
.skip:focus{ left:.5rem; top:.5rem; }