@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Poppins:wght@300;400;500;600;700&display=swap");

/* ============================================================
   Something Great — design tokens
   Lifted from the Something Great Design System token files.
   Nothing below this block uses a hard-coded color.
   ============================================================ */
:root{
  --sg-deep-purple:#592384;
  --sg-magenta:#c41bd3;
  --sg-bright-magenta:#df00f2;
  --sg-light-pink:#ef9cf6;
  --sg-teal:#3dbcc4;
  --sg-black:#000000;
  --sg-white:#ffffff;
  --sg-gray-700:#333333;
  --sg-gray-600:#4f4f4f;
  --sg-gray-500:#767676;
  --sg-gray-400:#9c9c9c;
  --sg-gray-300:#cfcfcf;
  --sg-gray-200:#e6e6e6;
  --sg-gray-100:#f4f4f4;
  --sg-gray-050:#fafafa;
  --sg-magenta-tint:#fbe8fd;

  --gradient-signature:linear-gradient(90deg,#c41bd3 0%,#df00f2 45%,#3dbcc4 100%);

  --surface-page:var(--sg-white);
  --surface-card:var(--sg-white);
  --surface-sunken:var(--sg-gray-100);
  --surface-inverse:var(--sg-black);

  --text-heading:var(--sg-black);
  --text-body:var(--sg-gray-700);
  --text-muted:var(--sg-gray-500);
  --text-eyebrow:var(--sg-magenta);
  --text-inverse:var(--sg-white);
  --text-link:var(--sg-magenta);
  --text-link-hover:var(--sg-deep-purple);

  --border-hairline:var(--sg-gray-200);
  --border-strong:var(--sg-black);
  --border-accent:var(--sg-magenta);

  --action-primary-bg:var(--sg-black);
  --action-primary-fg:var(--sg-white);
  --action-primary-bg-hover:var(--sg-gray-700);
  --action-accent-bg:var(--sg-magenta);
  --action-accent-bg-hover:var(--sg-deep-purple);
  --focus-ring:var(--sg-bright-magenta);

  --status-success:#1f8a5c;
  --status-warning:#b4720a;
  --status-danger:#c02525;

  --stage-1:#ef9cf6;
  --stage-2:#3dbcc4;
  --stage-3:#c41bd3;
  --stage-4:#592384;
  --stage-5:#000000;

  --font-display:"Lora",Georgia,"Times New Roman",serif;
  --font-body:"Poppins","Helvetica Neue",Arial,sans-serif;

  --text-3xs:11px; --text-2xs:12px; --text-xs:13px; --text-sm:14px;
  --text-md:16px; --text-lg:18px; --text-xl:21px; --text-2xl:26px;
  --text-3xl:32px; --text-4xl:42px; --text-5xl:56px;

  --leading-tight:0.96; --leading-snug:1.12; --leading-normal:1.45; --leading-relaxed:1.65;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --tracking-display:-0.02em; --tracking-tight:-0.01em; --tracking-wide:0.08em; --tracking-eyebrow:0.22em;

  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-6:48px; --space-10:80px;
  --radius-card:0; --radius-control:4px;
  --ease:cubic-bezier(.2,0,0,1);
  --measure:720px; --page:1200px;
}

/* ---- reset + base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font:var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-body);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
h1,h2,h3{margin:0;color:var(--text-heading);font-family:var(--font-display);letter-spacing:var(--tracking-display)}
h1{font-size:var(--text-4xl);font-weight:var(--weight-bold);line-height:var(--leading-snug)}
h2{font-size:var(--text-3xl);font-weight:var(--weight-bold);line-height:var(--leading-snug)}
h3{font-size:var(--text-xl);font-weight:var(--weight-semibold);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight)}
p{margin:0;text-wrap:pretty}
.lede{font-size:var(--text-lg);line-height:var(--leading-normal)}
.italic{font-family:var(--font-display);font-style:italic}
.muted{color:var(--text-muted)}
.small{font-size:var(--text-2xs);line-height:var(--leading-normal)}
.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}

/* ---- brand devices ---- */
.topbar{height:6px;background:var(--gradient-signature)}
.rule{height:4px;background:var(--gradient-signature);width:180px;margin:var(--space-3) 0}
.eyebrow{
  display:block;margin:0;
  font:var(--weight-semibold) var(--text-3xs)/1.3 var(--font-body);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-eyebrow);
}
.eyebrow--ink{color:var(--text-heading)}
.logo-link{display:inline-block;background:none;border:0;padding:0;cursor:pointer}
.logo-link img{height:38px;width:auto}

/* ---- layout ---- */
.container{max-width:var(--page);margin:0 auto;padding:0 var(--space-3)}
.measure{max-width:var(--measure)}
.section{padding:var(--space-10) 0}
.section + .section{border-top:1px solid var(--border-hairline)}
.section__head{margin-bottom:var(--space-4)}
.section__head h2{margin-top:10px}
.stack{display:flex;flex-direction:column;gap:var(--space-2)}
.row{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:var(--space-3)}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.spacer{flex:1 1 auto}

/* ---- hero ---- */
.hero{padding-top:var(--space-6);padding-bottom:var(--space-10)}
.hero h1{margin:14px 0 0;font-size:clamp(32px,6vw,var(--text-5xl))}
.hero__sub{margin:var(--space-2) 0 0;max-width:560px;font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--text-heading);line-height:1.3}
.hero__note{margin:10px 0 0;font-family:var(--font-display);font-style:italic;font-size:var(--text-md);color:var(--text-muted)}
.meta{display:flex;flex-wrap:wrap;gap:0;margin:var(--space-4) 0 var(--space-4);border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline)}
.meta__item{flex:1 1 180px;padding:var(--space-2) var(--space-2) var(--space-2) 0}
.meta__item + .meta__item{border-left:1px solid var(--border-hairline);padding-left:var(--space-2)}
.meta__k{font:var(--weight-semibold) var(--text-3xs)/1.3 var(--font-body);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.meta__v{margin-top:6px;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-lg);color:var(--text-heading)}

/* ---- cards ---- */
.card{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-card);padding:var(--space-3)}
.card--capped{padding:0;overflow:hidden}
.card--capped > .cap{height:5px;background:var(--gradient-signature)}
.card--capped > .card__body{padding:var(--space-4)}
.card--strong{border-color:var(--border-strong)}
.step__n{font:var(--weight-bold) var(--text-2xl)/1 var(--font-display);color:var(--text-heading)}
.step h3,.outcome h3{margin:12px 0 8px;font-size:var(--text-lg)}
.step p,.outcome p{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-body)}
.outcome{border-top:3px solid var(--border-accent);padding-top:var(--space-2)}

/* ---- stage strip ---- */
.stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--border-hairline);border:1px solid var(--border-hairline)}
.stages__cell{background:var(--sg-white)}
.stages__bar{height:5px}
.stages__body{padding:18px 16px 20px}
.stages__num{font:var(--weight-bold) var(--text-2xl)/1 var(--font-display);color:var(--text-heading);margin-bottom:10px}
.stages__name{font:var(--weight-semibold) var(--text-3xs)/1.3 var(--font-body);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-heading);margin-bottom:8px}
.stages__engine{font:var(--weight-semibold) var(--text-xs)/1.4 var(--font-body);color:var(--sg-magenta)}

/* ---- forms ---- */
.field{display:block}
.field__label{display:flex;gap:6px;align-items:baseline;margin-bottom:6px;font:var(--weight-semibold) var(--text-xs)/1.3 var(--font-body);color:var(--text-heading)}
.field__opt{font-weight:var(--weight-regular);font-size:var(--text-2xs);color:var(--text-muted)}
.field__err{display:none;margin-top:6px;font-size:var(--text-2xs);color:var(--status-danger)}
.field.is-invalid .field__err{display:block}
.field.is-invalid .control{border-color:var(--status-danger)}
.control{
  width:100%;padding:11px 12px;
  font:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  color:var(--text-body);background:var(--sg-white);
  border:1px solid var(--sg-gray-300);border-radius:var(--radius-control);
  transition:border-color 120ms var(--ease),box-shadow 120ms var(--ease);
}
.control::placeholder{color:var(--sg-gray-400)}
.control:focus{outline:none;border-color:var(--border-accent);box-shadow:0 0 0 3px rgba(223,0,242,.35)}
textarea.control{min-height:96px;resize:vertical}
select.control{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--sg-gray-600) 50%),linear-gradient(135deg,var(--sg-gray-600) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.consent{border-top:1px solid var(--border-hairline);padding-top:18px}
.consent__check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:var(--text-sm);color:var(--text-heading);cursor:pointer}
.consent__check input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--sg-magenta);flex:none}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:12px 22px;
  font:var(--weight-semibold) var(--text-sm)/1 var(--font-body);
  letter-spacing:var(--tracking-tight);
  border:1px solid transparent;border-radius:var(--radius-control);
  cursor:pointer;text-align:center;
  transition:background 120ms var(--ease),color 120ms var(--ease),border-color 120ms var(--ease),transform 120ms var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.btn--primary:hover{background:var(--action-primary-bg-hover);color:var(--action-primary-fg)}
.btn--accent{background:var(--action-accent-bg);color:var(--text-inverse)}
.btn--accent:hover{background:var(--action-accent-bg-hover);color:var(--text-inverse)}
.btn--outline{background:transparent;color:var(--text-heading);border-color:var(--border-strong)}
.btn--outline:hover{background:var(--surface-inverse);color:var(--text-inverse)}
.btn--ghost{background:transparent;color:var(--text-body);border-color:transparent}
.btn--ghost:hover{background:var(--surface-sunken);color:var(--text-heading)}
.btn--lg{min-height:52px;font-size:var(--text-md);width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}

/* ---- assessment ---- */
.appbar{position:sticky;top:0;z-index:20;background:var(--sg-white);border-bottom:1px solid var(--border-hairline)}
.appbar__inner{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;padding:14px var(--space-3) 12px;max-width:var(--page);margin:0 auto}
.appbar__name{font:var(--weight-semibold) var(--text-3xs)/1.3 var(--font-body);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-heading)}
.appbar__biz{font-size:var(--text-2xs);color:var(--text-muted)}
.appbar__count{font:var(--weight-semibold) var(--text-2xs)/1 var(--font-body);color:var(--text-heading);white-space:nowrap}
.track{height:6px;background:var(--surface-sunken);width:100%;overflow:hidden}
.track__fill{height:100%;background:var(--gradient-signature);width:0;transition:width 360ms var(--ease)}
.appbar .track{width:180px}

.group__head{display:flex;gap:20px;align-items:flex-start}
.group__spine{width:4px;align-self:stretch;background:var(--gradient-signature);flex:none}
.group__head h1{margin:10px 0 4px;font-size:var(--text-3xl)}
.group__engine{font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);color:var(--text-body)}
.group__intro{margin:var(--space-3) 0 0;max-width:660px}

.legend{margin:var(--space-4) 0 var(--space-4);padding:var(--space-3) 0;border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline)}
.legend__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:14px}
.legend__item{display:flex;gap:12px;align-items:flex-start}
.legend__v{flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:var(--surface-inverse);color:var(--text-inverse);font:var(--weight-bold) var(--text-2xs)/1 var(--font-body)}
.legend__l{font:var(--weight-semibold) var(--text-xs)/1.4 var(--font-body);color:var(--text-heading)}
.legend__d{font-size:var(--text-2xs);line-height:1.5;color:var(--text-muted)}

.qlist{border-top:1px solid var(--border-hairline);margin-top:var(--space-4)}
.q{padding:22px 0;border-bottom:1px solid var(--border-hairline)}
.q__text{display:flex;gap:12px;font-size:var(--text-md);line-height:1.55;color:var(--text-heading);margin-bottom:16px}
.q__n{flex:none;font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--sg-magenta)}
.scale{display:flex;gap:8px;flex-wrap:wrap}
.scale__opt{
  flex:1 1 140px;min-width:0;min-height:44px;padding:10px 12px;
  background:var(--sg-white);color:var(--text-body);
  border:1px solid var(--sg-gray-300);border-radius:var(--radius-control);
  font:var(--weight-semibold) var(--text-2xs)/1.2 var(--font-body);
  cursor:pointer;text-align:center;
  transition:background 120ms var(--ease),color 120ms var(--ease),border-color 120ms var(--ease);
}
.scale__opt:hover{background:var(--surface-sunken)}
.scale__opt[aria-checked="true"]{background:var(--sg-black);border-color:var(--sg-black);color:var(--sg-white)}
.navrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:var(--space-4)}

/* ---- results ---- */
.result__hero{border:1px solid var(--border-strong);padding:var(--space-4);margin-bottom:var(--space-6)}
.result__hero h1{margin:14px 0 6px;font-size:clamp(32px,6vw,var(--text-4xl))}
.scorebar{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px}
.stagerow{padding:18px 0;border-bottom:1px solid var(--border-hairline)}
.stagerow.is-locked{opacity:.45}
.badge{
  display:inline-flex;align-items:center;padding:4px 10px;
  font:var(--weight-semibold) var(--text-3xs)/1.4 var(--font-body);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  border:1px solid currentColor;border-radius:var(--radius-control);
}
.badge--anchored{color:var(--status-success)}
.badge--developing{color:var(--sg-teal)}
.badge--emerging{color:var(--status-warning)}
.badge--foundation{color:var(--sg-magenta)}
.sec__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:2px solid var(--sg-black)}
.sec__score{font:var(--weight-bold) var(--text-xl)/1 var(--font-display);color:var(--text-heading)}
.block{background:var(--sg-white);border:1px solid var(--border-hairline);border-left:3px solid var(--sg-magenta);padding:18px 20px}
.block__label{font:var(--weight-semibold) var(--text-3xs)/1.3 var(--font-body);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-heading);margin-bottom:10px}
.block__text{font-size:var(--text-sm);line-height:1.7;color:var(--text-body)}
.record{border-top:1px solid var(--border-hairline)}
.record__row{display:flex;justify-content:space-between;gap:24px;padding:12px 0;border-bottom:1px solid var(--border-hairline)}
.record__k{font:var(--weight-semibold) var(--text-3xs)/1.4 var(--font-body);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.record__v{font-size:var(--text-sm);color:var(--text-heading);text-align:right}
.status{font-size:var(--text-2xs);color:var(--text-muted)}
.status--error{color:var(--status-danger)}
.status--ok{color:var(--status-success)}

/* ---- footer ---- */
.footer{border-top:1px solid var(--border-hairline);padding:var(--space-3) 0 var(--space-6);margin-top:var(--space-10)}
.footer__contact{font:var(--weight-semibold) var(--text-3xs)/1.6 var(--font-body);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--sg-gray-500)}
.footer__legal{font-size:var(--text-2xs);line-height:1.6;color:var(--sg-gray-400);margin-top:6px}
.footer__attr{font-size:var(--text-2xs);line-height:1.6;color:var(--text-muted);max-width:620px;margin-bottom:10px}
.footer__inner{display:flex;gap:var(--space-4);justify-content:space-between;align-items:flex-end;flex-wrap:wrap}
.footer__mark img{height:64px;width:auto}

@media (max-width:640px){
  .section{padding:var(--space-6) 0}
  .hero{padding-top:var(--space-3);padding-bottom:var(--space-6)}
  .meta__item + .meta__item{border-left:0;border-top:1px solid var(--border-hairline);padding-left:0}
  .card--capped > .card__body,.result__hero{padding:var(--space-3)}
  .group__head{gap:14px}
  .scale__opt{flex:1 1 100%}
  .record__row{flex-direction:column;gap:4px}
  .record__v{text-align:left}
  .appbar .track{width:100%}
  .logo-link img{height:28px}
}

@media print{
  .topbar,.appbar,.no-print{display:none !important}
  body{font-size:11pt;color:#000}
  .section{padding:18pt 0;break-inside:avoid}
  .block,.sec,.result__hero,.stagerow{break-inside:avoid}
  a{color:#000}
}
