@charset "UTF-8";
.growth-router{
  --growth-ink:var(--ink,#0f1216);
  --growth-soft:var(--ink-soft,var(--ink2,var(--mute,#3a424c)));
  --growth-line:var(--hairline,var(--hair,#dde3ec));
  --growth-ground:var(--paper,var(--ground,#f5f7fa));
  --growth-action:var(--brass-hover,var(--orange-deep,#c23c05));
  --growth-action-hover:var(--brass,var(--orange,#f2560d));
  margin-top:30px;
  padding-top:28px;
  border-top:1px solid var(--growth-line);
}
.growth-router__intro{display:grid;grid-template-columns:minmax(0,.8fr) minmax(16rem,1fr);gap:24px;align-items:start}
.growth-router h2{margin:0;max-width:18ch}
.growth-router__intro p{margin:0;color:var(--growth-soft);max-width:58ch;font-size:.88rem}
.growth-questions{display:grid;grid-template-columns:1.35fr .65fr;gap:16px;margin-top:22px}
.growth-choice{min-width:0;margin:0;padding:0;border:0}
.growth-choice legend{padding:0;margin:0 0 8px;font-size:.78rem;font-weight:800;color:var(--growth-ink)}
.growth-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.growth-choice-grid.timing{grid-template-columns:1fr}
.growth-option{position:relative;display:block;min-width:0}
.growth-option input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.growth-option span{
  min-height:48px;
  height:100%;
  display:flex;
  align-items:center;
  padding:10px 12px;
  border:1.5px solid var(--growth-line);
  border-radius:9px;
  background:#fff;
  color:var(--growth-soft);
  font-size:.78rem;
  font-weight:700;
  line-height:1.35;
  cursor:pointer;
  transition:transform 160ms cubic-bezier(.2,.7,.3,1),border-color 160ms,background 160ms,color 160ms,box-shadow 160ms;
}
.growth-option span:hover{border-color:var(--growth-ink);color:var(--growth-ink);transform:translateY(-1px)}
.growth-option input:checked+span{border-color:var(--growth-action);background:#fff0e8;color:var(--growth-ink);box-shadow:0 0 0 2px rgba(194,60,5,.1)}
.growth-option input:focus-visible+span{outline:3px solid var(--focus,var(--growth-action-hover));outline-offset:3px}
.growth-option input:active+span{transform:translateY(0) scale(.98)}
.growth-prompt{min-height:1.4em;margin:10px 0 0;color:var(--growth-soft);font-size:.74rem}
.growth-recommendation{margin-top:20px;padding:20px;border-radius:12px;background:#12161b;color:#eef1f5}
.growth-recommendation h3{margin:0;color:#fff;font-size:1.2rem;max-width:28ch}
.growth-recommendation p{margin:8px 0 0;color:#c8d0d8;font-size:.82rem;max-width:62ch}
.growth-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.growth-button{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 17px;
  border:1px solid #55616e;
  border-radius:9px;
  background:transparent;
  color:#fff;
  font-size:.78rem;
  font-weight:800;
  line-height:1.35;
  text-decoration:none;
  cursor:pointer;
  transition:transform 160ms cubic-bezier(.2,.7,.3,1),background 160ms,border-color 160ms,color 160ms;
}
.growth-button:hover{border-color:#fff;transform:translateY(-1.5px)}
.growth-button:active{transform:translateY(0) scale(.97)}
.growth-button-primary{border-color:var(--growth-action);background:var(--growth-action);color:#fff}
.growth-button-primary:hover{border-color:var(--growth-action-hover);background:var(--growth-action-hover)}
.growth-button:focus-visible,.growth-next:focus-visible{outline:3px solid var(--focus,var(--growth-action-hover));outline-offset:3px}
.growth-next{display:inline-block;margin-top:14px;color:#fff;text-underline-offset:4px;font-size:.77rem;font-weight:700}
.growth-next:hover{text-decoration-thickness:2px}
.growth-privacy{margin:14px 0 0!important;color:var(--growth-soft)!important;font-size:.73rem!important;max-width:72ch!important}
@media(max-width:700px){
  .growth-router__intro,.growth-questions{grid-template-columns:1fr}
  .growth-choice-grid,.growth-choice-grid.timing{grid-template-columns:1fr}
  .growth-button{width:100%}
}
@media(prefers-reduced-motion:reduce){.growth-option span,.growth-button{transition:none!important}}
@media print{.growth-router{display:none!important}}

/* ============================================================
   Site chrome for the four tool pages. These shipped with their own
   "ZA.growth" wordmark - a fourth logo, on the conversion surfaces -
   and no footer, so every tool was a dead end. This gives them the
   same bar and footer as the rest of the site. The mark itself comes
   from /brand.css; nothing about it is redefined here.

   The chrome inherits each page's OWN content column via --col/--gut,
   so the wordmark, the crumb and the footer line up with the card
   instead of floating 30-170px to its left. Set both in the page :root.
   ============================================================ */

/* a sticky bar covers anything a fragment jump or scrollIntoView lands on */
html{scroll-padding-top:72px}          /* 58px bar + 14px breathing room */
.skip{z-index:100}                     /* the bar is 40; three pages set 10 and vanished under it */

.sitenav{position:sticky;top:0;z-index:40;background:var(--graphite,#12161b);color:var(--gtext,#eef1f5)}
.sitenav .wrap{max-width:var(--col,1120px);margin:auto;padding:0 var(--gut,20px);min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.sitenav .navlinks{display:flex;flex-wrap:wrap;gap:3px;justify-content:flex-end}
.sitenav .navlinks a{color:var(--gdim,#9aa6b4);font:9px var(--mono,ui-monospace,Menlo,monospace);letter-spacing:.05em;text-decoration:none;text-transform:uppercase;padding:9px}
.sitenav .navlinks a:hover,.sitenav .navlinks a[aria-current]{color:#fff}

/* back path on a task page: the nav says where you are, this says how to leave */
.toolcrumb{max-width:var(--col,1120px);margin:14px auto 0;padding:0 var(--gut,20px);font-size:12px;color:var(--ink-soft,#3a424c)}
.toolcrumb a{color:var(--brass-hover,#c23c05);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.toolcrumb a:hover{text-decoration-thickness:2px}
.toolcrumb [aria-current]{color:var(--ink,#0f1216);font-weight:700}

.sitefoot{margin-top:56px;padding:26px 0 40px;border-top:1px solid var(--hairline,#dde3ec);
  color:var(--ink-soft,#3a424c);font:10px var(--mono,ui-monospace,Menlo,monospace);letter-spacing:.04em;text-transform:uppercase}
.sitefoot .wrap{max-width:var(--col,1120px);margin:auto;padding:0 var(--gut,20px);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.sitefoot a{color:inherit}
.sitefoot a:hover{color:var(--brass-hover,#c23c05)}

/* the printed result is the most shareable thing here - it must be traceable
   back to the site, so the nav goes but a signature stays */
@media print{
  .sitenav,.sitefoot,.toolcrumb{display:none}
  main.wrap::after{
    content:"ZA Growth · " var(--print-url) " · Planning estimate. Not advice.";
    display:block;margin-top:20px;padding-top:10px;border-top:1px solid #ccc;
    font:10px/1.5 ui-monospace,Menlo,monospace;letter-spacing:.04em;color:#333;
  }
}

/* same small-screen shrink the rest of the site uses, or the four links wrap
   the bar onto two rows at 390px */
@media(max-width:620px){
  .sitenav .wrap{padding-top:8px;padding-bottom:8px}
  .sitenav .navlinks a{padding:6px;font-size:8px}
}