/* Call Caddie — business signup wizard. Tokens mirror web/index.html so the
   wizard is visually identical to the marketing page. */
@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal; font-weight:400 800; font-display:swap;
  src:url(/static/fonts/schibsted-grotesk-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal; font-weight:400 800; font-display:swap;
  src:url(/static/fonts/schibsted-grotesk-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
  --bg: oklch(0.995 0.002 90);
  --fg: oklch(0.16 0 0);
  --ink: oklch(0.22 0 0);
  --muted: oklch(0.965 0.003 90);
  --muted-fg: oklch(0.5 0 0);
  --subtle-fg: oklch(0.52 0 0);
  --border: oklch(0.9 0.004 90);
  --border-strong: oklch(0.84 0.004 90);
  --accent: oklch(0.67 0.17 52);
  --accent-deep: oklch(0.52 0.15 48);
  --accent-soft: oklch(0.96 0.045 62);
  --warn: oklch(0.58 0.19 28);
  --warn-soft: oklch(0.95 0.035 30);
  --success: oklch(0.58 0.14 150);
  --radius: 14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Schibsted Grotesk",system-ui,sans-serif; color:var(--fg); background:var(--muted); -webkit-font-smoothing:antialiased; line-height:1.55; min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none}

/* nav */
.nav{position:sticky; top:0; z-index:40; background:color-mix(in oklch, var(--bg) 88%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--border)}
.nav-inner{max-width:760px; margin:0 auto; padding:0 24px; height:60px; display:flex; align-items:center; gap:12px}
.brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:15.5px; letter-spacing:-0.01em}
.brand .mark{width:28px;height:28px;border-radius:8px; background:var(--fg); color:var(--bg); display:flex;align-items:center;justify-content:center}
.brand .mark svg{width:15px;height:15px}
.nav-back{margin-left:auto; font-size:13.5px; font-weight:600; color:var(--muted-fg); display:inline-flex; align-items:center; gap:6px}
.nav-back:hover{color:var(--fg)}
.nav-back svg{width:15px;height:15px}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:14px; font-weight:600; padding:11px 20px; border-radius:10px; transition:background .15s, transform .05s, opacity .15s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); color:oklch(0.2 0.04 50)}
.btn.primary:hover{background:oklch(0.62 0.17 50)}
.btn.ghost{background:var(--bg); color:var(--ink); border:1px solid var(--border-strong)}
.btn.ghost:hover{border-color:var(--accent)}
.btn[disabled]{opacity:.55; cursor:default; transform:none}

/* shell */
.wrap{max-width:720px; margin:0 auto; padding:32px 24px 64px}
.wiz{background:var(--bg); border:1px solid var(--border); border-radius:18px; box-shadow:0 18px 50px -30px oklch(0 0 0 / 0.25); overflow:hidden}
.wiz-head{padding:26px 30px 0}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--accent-deep)}
.progress{margin-top:14px; display:flex; align-items:center; gap:12px}
.progress .bar{flex:1; height:6px; border-radius:999px; background:var(--muted); overflow:hidden}
.progress .bar i{display:block; height:100%; width:0; background:var(--accent); border-radius:999px; transition:width .35s cubic-bezier(.4,0,.2,1)}
.progress .count{font-size:12px; color:var(--subtle-fg); font-variant-numeric:tabular-nums; white-space:nowrap}

/* steps */
.wiz-body{padding:22px 30px 4px}
.step{display:none; animation:fade .28s ease}
.step.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.step h1{font-size:23px; font-weight:800; letter-spacing:-0.02em; line-height:1.15}
.step .sub{font-size:14px; color:var(--muted-fg); margin-top:6px; margin-bottom:20px; text-wrap:pretty}

/* fields */
.field{margin-bottom:16px}
.field.full{grid-column:1 / -1}
.row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field > label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px}
.field label .opt{color:var(--subtle-fg); font-weight:400}
.field input, .field select, .field textarea{width:100%; font:inherit; font-size:14px; color:var(--fg); padding:11px 13px; border:1px solid var(--border-strong); border-radius:10px; background:var(--bg); transition:border-color .15s, box-shadow .15s}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklch,var(--accent) 20%,transparent)}
.field textarea{resize:vertical; min-height:78px}
.field .hint{font-size:11.5px; color:var(--subtle-fg); margin-top:5px}
.field.err input, .field.err select, .field.err textarea{border-color:var(--warn)}
.field .msg{display:none; font-size:11.5px; color:var(--warn); margin-top:5px}
.field.err .msg{display:block}

/* choice cards (multi/single select) */
.choices{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.choice{display:flex; gap:12px; align-items:flex-start; text-align:left; border:1px solid var(--border-strong); border-radius:12px; padding:14px 15px; transition:all .12s; background:var(--bg); width:100%}
.choice:hover{border-color:var(--accent)}
.choice.on{border-color:var(--accent); background:var(--accent-soft)}
.choice .ck{width:22px;height:22px;border-radius:7px; border:1.5px solid var(--border-strong); display:flex;align-items:center;justify-content:center; flex-shrink:0; margin-top:1px; color:transparent; transition:all .12s}
.choice.on .ck{background:var(--accent); border-color:var(--accent); color:oklch(0.2 0.04 50)}
.choice .ck svg{width:13px;height:13px}
.choice .ct{font-size:14px; font-weight:600; letter-spacing:-0.005em}
.choice .cd{font-size:12px; color:var(--muted-fg); margin-top:2px; line-height:1.4}
.choices.single .choice .ck{border-radius:50%}

/* yes/no segmented */
.seg{display:inline-flex; gap:4px; padding:4px; background:var(--muted); border:1px solid var(--border); border-radius:10px}
.seg button{font-size:13px; font-weight:600; color:var(--muted-fg); padding:8px 18px; border-radius:8px; transition:all .12s}
.seg button.on{background:var(--bg); color:var(--fg); box-shadow:0 1px 2px oklch(0 0 0 / 0.08)}

/* conditional reveal */
.cond{display:none}
.cond.show{display:block; animation:fade .24s ease}

/* nav buttons */
.wiz-foot{display:flex; align-items:center; gap:12px; padding:18px 30px 26px; border-top:1px solid var(--border); margin-top:14px}
.wiz-foot .back{margin-right:auto}
.wiz-foot .back.hidden{visibility:hidden}
.formerr{display:none; flex-basis:100%; order:-1; margin-bottom:6px; font-size:12.5px; color:var(--warn); background:var(--warn-soft); border:1px solid color-mix(in oklch,var(--warn) 25%,transparent); border-radius:9px; padding:9px 12px}
.formerr.show{display:block}

/* consent */
.consent{display:flex; gap:11px; align-items:flex-start; margin-bottom:12px}
.consent input{width:18px;height:18px;margin-top:2px;flex-shrink:0; accent-color:var(--accent)}
.consent label{font-size:13px; color:var(--ink); line-height:1.5}
.consent a{color:var(--accent-deep); font-weight:600; text-decoration:underline}
.consent.err label{color:var(--warn)}

/* honeypot */
.hp{position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

/* success */
.done{display:none; flex-direction:column; align-items:center; text-align:center; padding:54px 30px}
.done.show{display:flex}
.done .ok{width:62px;height:62px;border-radius:50%; background:color-mix(in oklch,var(--success) 16%,transparent); color:var(--success); display:flex;align-items:center;justify-content:center; margin-bottom:18px}
.done .ok svg{width:30px;height:30px}
.done h1{font-size:24px; font-weight:800; letter-spacing:-0.02em}
.done p{font-size:15px; color:var(--muted-fg); max-width:42ch; margin-top:9px}
.done .ref{margin-top:16px; font-size:12px; color:var(--subtle-fg); font-variant-numeric:tabular-nums}
.done .btn{margin-top:24px}

.page-foot{text-align:center; margin-top:22px; font-size:12px; color:var(--subtle-fg)}
.page-foot a{color:var(--subtle-fg); text-decoration:underline}

/* legal pages */
.legal{max-width:760px; margin:32px auto; padding:44px 48px; background:var(--bg); border:1px solid var(--border); border-radius:18px}
.legal h1{font-size:30px; font-weight:800; letter-spacing:-0.02em; margin-bottom:8px}
.legal .updated{font-size:13px; color:var(--subtle-fg); margin-bottom:26px}
.legal h2{font-size:18px; font-weight:700; letter-spacing:-0.01em; margin:26px 0 8px}
.legal p, .legal li{font-size:14.5px; color:var(--ink); line-height:1.65}
.legal p{margin-bottom:12px}
.legal ul{margin:0 0 12px 20px}
.legal li{margin-bottom:5px}
.legal a{color:var(--accent-deep); text-decoration:underline}
.legal .home{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--muted-fg); margin-top:28px}
.legal .home:hover{color:var(--fg)}

@media (max-width:600px){
  .row{grid-template-columns:1fr}
  .choices{grid-template-columns:1fr}
  .wiz-head, .wiz-body{padding-left:20px; padding-right:20px}
  .wiz-foot{padding-left:20px; padding-right:20px}
  .legal{margin:16px; padding:28px 22px}
}