/* ============================================================================
   AGPG Assessment™ — Something Great
   Design tokens from the Something Great Design System (print-first, Aug 2026).
   Every value below is declared once here. No hex literals past this block.
   ========================================================================== */

:root{
  /* Brand core */
  --sg-deep-purple:#592384;
  --sg-magenta:#c41bd3;
  --sg-bright-magenta:#df00f2;
  --sg-light-pink:#ef9cf6;
  --sg-teal:#3dbcc4;
  --sg-black:#000000;
  --sg-white:#ffffff;

  /* Neutrals */
  --gray-700:#333333;
  --gray-600:#4f4f4f;
  --gray-500:#767676;
  --gray-400:#9c9c9c;
  --gray-300:#cfcfcf;
  --gray-200:#e6e6e6;
  --gray-100:#f4f4f4;
  --gray-050:#fafafa;

  /* Semantic surfaces */
  --page:var(--sg-white);
  --surface:var(--sg-white);
  --surface-sunken:var(--gray-050);
  --surface-inverse:var(--sg-black);
  --ink:var(--sg-black);
  --ink-body:var(--gray-700);
  --ink-muted:var(--gray-600);
  --ink-faint:var(--gray-500);
  --border-hairline:var(--gray-200);
  --border-control:var(--gray-300);
  --accent:var(--sg-magenta);
  --on-accent:var(--sg-white);

  /* The signature rule. Accent bar only — never a fill behind text. */
  --gradient:linear-gradient(90deg,#c41bd3 0%,#df00f2 45%,#3dbcc4 100%);
  --gradient-v:linear-gradient(180deg,#c41bd3 0%,#df00f2 45%,#3dbcc4 100%);

  /* AGPG quadrant palette — from the tool artwork. Do not substitute. */
  --quad-a:#592384;
  --quad-gp:#c41bd3;
  --quad-pp:#df00f2;
  --quad-go:#3dbcc4;

  /* Type */
  --font-display:'Lora',Georgia,'Times New Roman',serif;
  --font-body:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --type-hero:clamp(34px,5.4vw,60px);
  --type-h2:clamp(26px,3.6vw,40px);
  --type-h3:20px;
  --type-eyebrow:11px;
  --type-body:16px;
  --type-small:14px;
  --type-meta:12px;

  --lh-display:1.05;
  --lh-body:1.65;
  --track-eyebrow:.22em;
  --track-tight:-.02em;

  /* Spacing — 8px base, biased large */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s10:80px;

  /* Corners — square by default, 4px on controls */
  --radius-card:0;
  --radius-control:4px;

  /* Motion */
  --ease:cubic-bezier(.2,0,0,1);
  --dur-press:120ms;
  --dur-toggle:200ms;
  --dur-progress:360ms;

  /* Measure */
  --max-page:1200px;
  --max-read:720px;
  --max-form:600px;
}

/* ---------------------------------------------------------------- reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}

body{
  background:var(--page);
  color:var(--ink-body);
  font-family:var(--font-body);
  font-size:var(--type-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:var(--track-tight);
  line-height:var(--lh-display);
  color:var(--ink);
  text-wrap:pretty;
}
h1{font-size:var(--type-hero);letter-spacing:-.03em}
h2{font-size:var(--type-h2)}
h3{font-size:var(--type-h3);line-height:1.25}

a{color:var(--accent);text-decoration:none;transition:color var(--dur-press) var(--ease)}
a:hover{color:var(--sg-deep-purple)}
:focus-visible{outline:2px solid var(--sg-bright-magenta);outline-offset:2px}

/* ------------------------------------------------------------- structure --- */
.wrap{max-width:var(--max-page);margin:0 auto;padding:0 var(--s4)}
.read{max-width:var(--max-read);margin:0 auto;padding:0 var(--s4)}
.form-col{max-width:var(--max-form);margin:0 auto;padding:0 var(--s4)}
section{padding:var(--s10) 0}
.sunken{background:var(--surface-sunken);border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline)}

.rule{height:6px;background:var(--gradient)}
.stub{height:6px;width:120px;background:var(--gradient)}

.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--type-eyebrow);
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--accent);
}
.eyebrow.ink{color:var(--ink)}
.eyebrow.muted{color:var(--ink-faint)}

.lede{font-size:var(--type-body);line-height:var(--lh-body);color:var(--ink-body)}
.lede + .lede{margin-top:var(--s2)}
.caption{font-family:var(--font-display);font-style:italic;font-size:18px;line-height:1.5;color:var(--ink-body)}
.meta{font-size:var(--type-meta);letter-spacing:.08em;color:var(--ink-faint)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;border-bottom:1px solid var(--ink);padding-bottom:14px;margin-bottom:var(--s6)}

/* ---------------------------------------------------------------- header --- */
.site-header{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--border-hairline)}
.site-header .bar{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;max-width:var(--max-page);margin:0 auto;padding:var(--s2) var(--s4)}
.site-header img{height:24px;width:auto}
.site-header .product{font-weight:600;font-size:var(--type-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink)}
.site-header .spacer{flex:1;min-width:16px}
.site-header .ctx{font-size:var(--type-small);color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}

/* --------------------------------------------------------------- buttons --- */
/* Exactly two styles. Primary = solid black. Secondary = outline. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  border:1px solid var(--sg-black);
  background:var(--sg-black);color:var(--sg-white);
  font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 28px;border-radius:var(--radius-control);
  transition:background var(--dur-press) var(--ease),transform var(--dur-press) var(--ease);
}
.btn:hover{background:var(--gray-700);border-color:var(--gray-700)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.btn.secondary{background:transparent;color:var(--ink)}
.btn.secondary:hover{background:var(--sg-black);color:var(--sg-white)}
.btn.secondary[disabled]:hover{background:transparent;color:var(--ink)}
.btn.block{display:flex;width:100%}
.btn.sm{padding:11px 18px;font-size:var(--type-meta)}

/* ----------------------------------------------------------------- cards --- */
.card{background:var(--surface);border:1px solid var(--border-hairline);border-radius:var(--radius-card);padding:var(--s3)}
.card.capped{border-top:0}
.card.capped > .cap{height:4px;background:var(--gradient);margin:-1px -1px 0;position:relative;left:1px;width:calc(100% + 2px)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s3)}

.step .num{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1;color:var(--accent);margin-bottom:14px}
.step h3{margin-bottom:6px}
.step p{font-size:var(--type-small);line-height:1.75;color:var(--ink-body)}

.outcome{border-left:4px solid var(--accent);padding:var(--s2) 0 var(--s2) var(--s3)}
.outcome h3{font-size:17px;margin-bottom:5px}
.outcome p{font-size:var(--type-small);line-height:1.75;color:var(--ink-body)}

/* ------------------------------------------------------------- quadrants --- */
.quad-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--s3)}
.quad{background:var(--surface);border:1px solid var(--border-hairline);border-top:4px solid var(--q);padding:var(--s3)}
.quad .head{display:flex;align-items:center;gap:14px;margin-bottom:var(--s2)}
.quad .anchor{font-family:var(--font-display);font-style:italic;font-size:17px;line-height:1.45;color:var(--ink)}
.quad p.body{font-size:var(--type-small);line-height:1.75;color:var(--ink-body);margin-top:12px}
.tile{display:flex;align-items:center;justify-content:center;background:var(--q);color:var(--sg-white);font-family:var(--font-body);font-weight:700;flex-shrink:0}
.tile.sm{width:34px;height:34px;font-size:13px}
.tile.md{width:44px;height:44px;font-size:16px}
.tile.lg{width:64px;height:64px;font-size:24px}
.ord{font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}

/* ----------------------------------------------------------------- forms --- */
.field{margin-bottom:var(--s3)}
.field > label{display:block;font-weight:600;font-size:var(--type-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink);margin-bottom:var(--s1)}
.field .opt{color:var(--ink-faint);letter-spacing:.08em}
.field .req{color:var(--accent)}
.field input,.field select,.field textarea{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border-control);
  border-radius:var(--radius-control);
  padding:12px 14px;
  color:var(--ink-body);
  outline:none;
  transition:border-color var(--dur-press) var(--ease),box-shadow var(--dur-press) var(--ease);
}
.field textarea{resize:none;line-height:1.7;min-height:120px}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gray-500) 50%),linear-gradient(135deg,var(--gray-500) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(223,0,242,.35)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--sg-bright-magenta)}
.field .err{display:none;font-size:var(--type-meta);color:var(--sg-bright-magenta);margin-top:6px}
.field.invalid .err{display:block}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 var(--s3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.privacy{font-size:var(--type-meta);line-height:1.7;color:var(--ink-faint);margin-top:var(--s2)}

/* ------------------------------------------------------------- callout ----- */
.callout{display:flex;gap:var(--s3);background:var(--surface-sunken);padding:var(--s2) var(--s3)}
.callout .bar{width:6px;flex-shrink:0;background:var(--gradient-v)}
.callout p{font-size:var(--type-small);line-height:1.75;color:var(--ink-body)}

/* ------------------------------------------------------------- progress ---- */
.progress-strip{position:sticky;top:57px;z-index:19;background:var(--surface);border-bottom:1px solid var(--border-hairline);padding:14px var(--s4)}
.progress-inner{max-width:var(--max-page);margin:0 auto;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.track{flex:1;min-width:120px;height:5px;background:var(--gray-200);border-radius:3px;overflow:hidden}
.track > span{display:block;height:100%;background:var(--gradient);transition:width var(--dur-progress) var(--ease)}
.progress-inner .count{font-weight:600;font-size:var(--type-eyebrow);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}

/* -------------------------------------------------------------- question --- */
.group-head{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s3)}
.group-head .ttl h2{font-size:clamp(24px,3.2vw,34px);margin:6px 0}
.group-intro{margin-bottom:var(--s6)}

.q{margin-bottom:var(--s4)}
.q > label{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--type-h3);line-height:1.35;color:var(--ink);margin-bottom:6px}
.q .qnum{font-family:var(--font-body);font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--q);margin-right:10px}
.q .hint{font-style:italic;font-size:var(--type-small);color:var(--ink-muted);margin-bottom:12px}
.q textarea{
  width:100%;height:220px;resize:none;
  background:var(--surface);
  border:1px solid var(--border-control);border-radius:var(--radius-control);
  padding:14px 16px;font-size:15px;line-height:1.7;color:var(--ink-body);outline:none;
  transition:border-color var(--dur-press) var(--ease),box-shadow var(--dur-press) var(--ease);
}
.q textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(223,0,242,.35)}
.q textarea.filled{border-color:var(--gray-400)}
.q .wc{text-align:right;font-size:var(--type-meta);letter-spacing:.08em;color:var(--ink-faint);margin-top:6px}
.q .wc.ok{color:var(--sg-deep-purple)}

.nav-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;border-top:1px solid var(--border-hairline);padding-top:var(--s3)}
.gate{font-size:var(--type-meta);line-height:1.7;color:var(--ink-faint);margin-top:12px}

/* --------------------------------------------------------------- results --- */
.result-head{border-bottom:1px solid var(--ink);padding-bottom:var(--s3);margin-bottom:var(--s4)}
.result-head h1{font-size:clamp(30px,4.6vw,50px);margin:var(--s2) 0 var(--s1)}
.confirm{display:flex;gap:var(--s2);align-items:baseline;background:var(--surface-sunken);padding:var(--s2) var(--s3);margin-bottom:var(--s4)}
.confirm p{font-size:var(--type-small);line-height:1.7;color:var(--ink-body)}

.rsec{border:1px solid var(--border-hairline);border-top:4px solid var(--q);margin-bottom:var(--s2);break-inside:avoid}
.rsec .hd{display:flex;align-items:center;gap:14px;padding:var(--s2) var(--s3);border-bottom:1px solid var(--border-hairline)}
.rsec .hd .t{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink)}
.rsec .hd .s{font-family:var(--font-display);font-style:italic;font-size:13px;color:var(--ink-muted)}
.rsec .bd{padding:var(--s3)}
.rprompt{padding-bottom:var(--s2);margin-bottom:var(--s2);border-bottom:1px solid var(--border-hairline)}
.rprompt:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.rprompt .pl{font-weight:600;font-size:var(--type-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--q);margin-bottom:var(--s1)}
.rprompt p{font-size:15px;line-height:1.8;color:var(--ink-body);white-space:pre-wrap}

.insight{border:1px solid var(--ink);margin-bottom:var(--s4);break-inside:avoid}
.insight .hd{background:var(--surface-inverse);padding:var(--s2) var(--s3)}
.insight .hd .t{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--sg-white)}
.insight .hd .s{font-size:var(--type-meta);color:var(--gray-300);margin-top:2px}
.insight .bd{padding:var(--s3)}
.insight .bd p{font-size:var(--type-body);line-height:1.85;color:var(--ink-body);white-space:pre-wrap}
.insight .bd .fallback{font-style:italic;font-size:var(--type-small);color:var(--ink-faint)}

.spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--accent);border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite;vertical-align:-3px;margin-right:var(--s1)}
@keyframes spin{to{transform:rotate(360deg)}}

.retry{border:1px solid var(--sg-bright-magenta);padding:var(--s3);margin-bottom:var(--s3)}
.retry p{font-size:var(--type-small);line-height:1.75;color:var(--ink-body);margin-bottom:var(--s2)}

.cta-close{border-top:1px solid var(--border-hairline);padding-top:var(--s4);margin-top:var(--s4)}
.cta-close h2{font-size:clamp(22px,3vw,32px);margin-bottom:12px}
.cta-close p{margin-bottom:var(--s3)}

.fallback-state{text-align:left;padding:var(--s10) 0}

/* ---------------------------------------------------------------- footer --- */
.site-footer{border-top:1px solid var(--border-hairline)}
.site-footer .cols{display:flex;gap:var(--s6);flex-wrap:wrap;align-items:flex-start;max-width:var(--max-page);margin:0 auto;padding:var(--s6) var(--s4) var(--s4)}
.site-footer img{height:52px;width:auto}
.tagline{font-family:var(--font-display);font-style:italic;font-size:17px;color:var(--ink);margin-bottom:12px}
.contact{font-size:var(--type-small);line-height:2;color:var(--ink-muted)}
.contact span{white-space:nowrap}
.legal{font-size:var(--type-meta);line-height:1.8;color:var(--ink-faint)}

/* ----------------------------------------------------------------- print --- */
@media print{
  .no-print,.site-header,.progress-strip{display:none!important}
  body{font-size:11pt;background:#fff}
  section{padding:var(--s3) 0}
  .site-footer{border-top:1px solid var(--border-hairline)}
  .site-footer .cols{padding:var(--s3) 0}
  a{color:var(--ink)}
  .insight .hd{background:#fff;border-bottom:1px solid var(--ink)}
  .insight .hd .t{color:var(--ink)}
  .insight .hd .s{color:var(--ink-muted)}
}

/* ------------------------------------------------------------ responsive --- */
@media (max-width:720px){
  :root{--s10:56px;--s6:32px}
  .wrap,.read,.form-col{padding:0 20px}
  .progress-strip{top:53px;padding:12px 20px}
  .site-header .bar{padding:12px 20px;gap:var(--s2)}
  .site-header .ctx{max-width:100%;flex-basis:100%}
  .group-head{gap:var(--s2)}
  .q textarea{height:200px}
  .btn{width:100%}
  .nav-row .btn{width:auto;flex:1}
  .site-footer .cols{gap:var(--s4)}
}