/* ==========================================================================
   Minted — shared components (SOURCE, both surfaces)
   Requires fonts/fonts.css and css/tokens.css first. Page and screen styles
   load after this file. Every rule here consumes semantic tokens only.
   `:root.js` rules apply only while a script has added the class: with
   JavaScript off every page renders fully visible and static.
   Release copies carry a version stamp on the next line.
   @version minted-2026-09-20-10  (copy: edit styles/ in the repo, then re-cut every package)
   ========================================================================== */

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
html{font-size:var(--minted-text-base);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--minted-nav-height) + 12px)}
body{margin:0;background-color:var(--minted-bg-page);color:var(--minted-text-primary);font-family:var(--minted-font-body);font-size:var(--minted-size-body);line-height:var(--minted-leading-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden} /* mobile menu scroll lock (a script toggles the class) */
a{color:var(--minted-green-300);text-decoration:none}
a:hover{color:var(--minted-green-100)}
::selection{background-color:var(--minted-green-700);color:var(--minted-neutral-100)}
button,input,select,textarea{font-family:inherit}   /* form controls take the page face; the UA default is a sans the system never uses */
:focus-visible{outline:var(--minted-focus-ring);outline-offset:2px}
h1,h2,h3,h4,p{margin:0}
img{display:block;max-width:100%}
.skip-link{position:absolute;left:16px;top:-48px;z-index:100;background-color:var(--minted-bg-surface);color:var(--minted-green-300);font-family:var(--minted-font-mono);font-size:var(--minted-size-btn);letter-spacing:0.14em;text-transform:uppercase;padding:10px 16px;border:var(--minted-border-hairline)}
.skip-link:focus{top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============ Mono label ============ */
.label-mono{font-family:var(--minted-font-mono);font-size:var(--minted-size-label);font-weight:500;letter-spacing:var(--minted-track-label);text-transform:uppercase;color:var(--minted-text-label);margin:0}
.label-mono--tight{letter-spacing:0.2em}
.label-mono--nav{letter-spacing:0.14em}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-family:var(--minted-font-mono);font-weight:var(--minted-weight-btn);font-size:var(--minted-size-btn);letter-spacing:0.1em;text-transform:uppercase;line-height:1;white-space:nowrap;padding:19px 34px;border-radius:var(--minted-radius);border:1px solid transparent;background-color:transparent;cursor:pointer;text-decoration:none;transition:transform var(--minted-dur-fast) var(--minted-ease-state),box-shadow var(--minted-dur-fast) var(--minted-ease-state),background-color 150ms var(--minted-ease-state),color 150ms var(--minted-ease-state)}
.btn--primary{background-color:var(--minted-action-primary-bg);color:var(--minted-action-primary-text)}
.btn--primary:hover{background-color:var(--minted-action-primary-bg-hover);color:var(--minted-action-primary-text);transform:var(--minted-hover-shift);box-shadow:var(--minted-shadow-btn-hover)}
.btn--primary:active{transform:none;box-shadow:none;background-color:var(--minted-green-700);color:var(--minted-neutral-100)}
.btn--secondary{background-color:transparent;border-color:var(--minted-action-secondary-border);color:var(--minted-action-secondary-text)}
.btn--secondary:hover{background-color:var(--minted-action-secondary-bg-hover);color:var(--minted-green-100);transform:var(--minted-hover-shift);box-shadow:var(--minted-shadow-btn-hover-soft)}
.btn--secondary:active{transform:none;box-shadow:none;background-color:var(--minted-glow-100)}
.btn--small{padding:12px 20px;font-size:var(--minted-size-btn)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:0.45;pointer-events:none}
@media (max-width:720px){.btn--block-mobile{white-space:normal;width:100%;line-height:1.7;padding:15px 16px;text-align:center}}

/* ============ Text link with a boxed arrow: Take The Free Assessment (contact, and buy while it isn't on sale; Nov 6) ============ */
.tlink{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-family:var(--minted-font-mono);font-weight:var(--minted-weight-btn);font-size:var(--minted-size-btn);letter-spacing:0.12em;text-transform:uppercase;color:var(--minted-text-label);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.tlink:hover{color:var(--minted-green-100)}
.tlink__arrow{width:28px;height:28px;flex:none;display:grid;place-content:center;border:1px solid currentColor;transition:transform var(--minted-dur-fast) var(--minted-ease-state)}
.tlink:hover .tlink__arrow{transform:translateX(3px)}

/* ============ Wordmark and pixel glyph ============ */
.wordmark{font-family:var(--minted-font-display);font-weight:800;font-stretch:125%;letter-spacing:-0.01em;background-image:var(--minted-gradient-title);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;line-height:1}
.wordmark__i{position:relative;display:inline-block;background-image:var(--minted-gradient-title);-webkit-background-clip:text;background-clip:text}
.wordmark__mark{position:absolute;left:50%;top:-0.34em;transform:translateX(-50%);display:grid;grid-template-columns:0.12em 0.12em;gap:0.04em}
.wordmark__mark span{width:0.12em;height:0.12em;background-color:var(--minted-green-300)}
.wordmark__mark span:first-child{background-color:var(--minted-green-100)}
.wordmark--glow{filter:drop-shadow(0 0 20px rgba(185,255,204,0.1))}
.px-glyph{display:grid;gap:3px}
.px-glyph i{background-color:var(--minted-glow-100)}
.px-glyph i.on{background-color:var(--minted-green-300)}
.px-glyph i.hi{background-color:var(--minted-green-100)}
.grid-field{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(to right,var(--minted-stroke-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--minted-stroke-grid) 1px,transparent 1px);background-size:var(--minted-cell) var(--minted-cell)}
.grid-field__cell{position:absolute;background-color:var(--minted-bg-cell)}
.grid-field__cell--strong{background-color:var(--minted-bg-cell-strong)}

/* ============ Icon: Lucide line icons, drawn for radius 0 (Nov 5) ============
   Inline SVG paths from Lucide 0.460.0 (ISC, source/vendor/lucide-0.460.0/LICENSE): square caps, mitred joins,
   no corner radius, 1.5 stroke, colour from the parent. 28px; a component sizes it to 24px on phones.
   One set across the site and the tool (the Design System's icon spec). */
.icon{display:block;width:28px;height:28px;flex:none}
.icon--line{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}

/* ============ Fixed nav ============ */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:50;background-color:color-mix(in srgb,var(--minted-dark-900) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:var(--minted-border-hairline);transition:background-color var(--minted-dur-base) var(--minted-ease-state),border-color var(--minted-dur-base) var(--minted-ease-state)}
.site-nav--static{position:absolute}
.site-nav__inner{display:flex;align-items:center;justify-content:space-between;height:var(--minted-nav-height);padding:0 var(--minted-pad-x);transition:height var(--minted-dur-base) var(--minted-ease-state)}
.site-nav--scrolled{background-color:color-mix(in srgb,var(--minted-dark-900) 94%,transparent);border-bottom-color:var(--minted-stroke-active)}
.site-nav--scrolled .site-nav__inner{height:52px}
.site-nav__brand{display:inline-flex;align-items:center;min-height:44px;font-size:1.15rem;line-height:1}
.site-nav__links{display:flex;align-items:center;gap:30px}
.site-nav__link{font-family:var(--minted-font-mono);font-size:var(--minted-size-label);letter-spacing:0.14em;text-transform:uppercase;color:var(--minted-text-muted);position:relative;padding:8px 2px;text-decoration:none}
.site-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background-color:var(--minted-green-300);transform:scaleX(0);transform-origin:left;transition:transform var(--minted-dur-fast) var(--minted-ease-state)}
.site-nav__link:hover{color:var(--minted-green-300)}
.site-nav__link:hover::after{transform:scaleX(1)}
.site-nav__link[aria-current="page"]{color:var(--minted-green-300)}
.site-nav__link[aria-current="page"]::after{transform:scaleX(1)}
.site-nav__link[aria-disabled="true"]{cursor:default}
.site-nav__toggle{display:none;width:44px;height:44px;place-content:center;background-color:transparent;border:var(--minted-border-hairline);cursor:pointer;padding:0}
.site-nav__toggle-grid{display:grid;grid-template-columns:8px 8px;gap:3px}
.site-nav__toggle-grid span{width:8px;height:8px;background-color:var(--minted-green-300)}

/* ============ Footer ============ */
.footer3{position:relative;border-top:var(--minted-border-hairline);overflow:hidden}
.footer3__meta{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between;padding:44px var(--minted-pad-x)}
.footer3__links{display:flex;gap:26px;flex-wrap:wrap}
.footer3__legal{display:grid;gap:4px;justify-items:end;text-align:right}
.footer3__legal p{margin:0;color:var(--minted-text-faint);font-size:0.8125rem}
.footer3__giant{display:block;font-family:var(--minted-font-display);font-weight:800;font-stretch:125%;font-size:21vw;line-height:0.72;letter-spacing:-0.02em;text-align:center;-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0.3;transform:translateY(0.06em);pointer-events:none;user-select:none;background-image:linear-gradient(100deg,rgba(185,255,204,0) 20%,rgba(185,255,204,0.95) 50%,rgba(185,255,204,0) 80%),var(--minted-gradient-title);background-size:60% 100%,100% 100%;background-repeat:no-repeat;background-position:-90% 0,0 0;animation:giant-shine 5.5s ease-in-out infinite}
@keyframes giant-shine{0%{background-position:-90% 0,0 0}60%,100%{background-position:190% 0,0 0}}

/* ============ Section frame ============ */
.sec{position:relative;padding:var(--minted-space-6) var(--minted-pad-x);border-top:var(--minted-border-hairline)}
.sec--surface{background-color:var(--minted-bg-surface)}
.sec-title{margin:0 0 18px;font-family:var(--minted-font-display);font-weight:700;font-stretch:115%;font-size:var(--minted-size-h2);line-height:1.12;letter-spacing:-0.01em;text-transform:uppercase}
.sec-title em{font-style:normal;color:var(--minted-green-300)}
.sec-sub{margin:0 0 clamp(40px,7vh,64px);color:var(--minted-text-secondary);font-size:1.1rem;max-width:62ch;text-wrap:pretty}
.sec-sub--tight{margin-bottom:clamp(20px,4vh,36px)}
.sec--center .sec-title,.sec--center .sec-sub{text-align:center;margin-left:auto;margin-right:auto}

/* ============ Raised and recessed planes (amendment 01) ============
   Any component that sits above the field adds .plane-raised in its own
   stylesheet by listing itself in a rule like this one. Never nest raised in
   raised; use background-color, never the background shorthand. */
.plane-raised{background-color:var(--minted-surface-raised);background-image:var(--minted-lit-face);border:var(--minted-border-hairline);box-shadow:var(--minted-bevel),var(--minted-cast)}
.plane-raised--hi{background-color:var(--minted-surface-raised-hi)}
.plane-recessed{background-color:var(--minted-surface-recessed);background-image:var(--minted-recessed-face);box-shadow:var(--minted-press)}

/* ============ Form fields ============ */
.field{display:grid;gap:8px;align-content:start}
.field--full{grid-column:1/-1}
.field__label{font-family:var(--minted-font-mono);font-size:var(--minted-size-label);font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--minted-text-label)}
.field__input{width:100%;min-height:44px;background-color:var(--minted-surface-recessed);background-image:var(--minted-recessed-face);box-shadow:var(--minted-press-deep);border:1px solid var(--minted-stroke-input);border-radius:var(--minted-radius);color:var(--minted-neutral-100);font-family:var(--minted-font-body);font-size:var(--minted-size-body);line-height:1.5;padding:16px 18px;transition:border-color var(--minted-dur-fast) var(--minted-ease-state),box-shadow var(--minted-dur-fast) var(--minted-ease-state)}
.field__input::placeholder{color:var(--minted-text-faint)}
.field__input:hover{border-color:var(--minted-stroke-input-hover)}
.field__input:focus-visible{outline:var(--minted-focus-ring);outline-offset:2px;border-color:var(--minted-green-300)}
textarea.field__input{resize:vertical;min-height:150px}
select.field__input{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 49%,var(--minted-green-300) 51%),linear-gradient(135deg,var(--minted-green-300) 49%,transparent 51%),var(--minted-recessed-face);background-repeat:no-repeat;background-position:calc(100% - 24px) 55%,calc(100% - 18px) 55%,0 0;background-size:6px 6px,6px 6px,100% 100%}
select.field__input option{background-color:var(--minted-dark-850);color:var(--minted-neutral-100)}
.field--err .field__input,.field__input[aria-invalid="true"]{border-color:var(--minted-field-error);box-shadow:0 0 0 1px var(--minted-field-error),var(--minted-press-deep)}
.field__msg{margin:0;font-size:0.85rem;line-height:1.5;color:var(--minted-field-error-text);display:flex;align-items:center;gap:8px}
.field__msg::before{content:"";width:8px;height:8px;background-color:var(--minted-field-error);flex:none}
.field__msg[hidden]{display:none}
.field__hint{font-family:var(--minted-font-mono);font-size:0.7rem;color:var(--minted-text-faint);letter-spacing:0.06em}

/* ---- sent state: badge with the drawn-on check and four cells ---- */
.form-sent{margin:0;display:grid;justify-items:center;gap:var(--minted-space-3);padding:24px 20px 4px;text-align:center}
.form-sent[hidden]{display:none}
/* sections that can be switched off until their content is real (testimonials): remove the hidden attribute to show them */
[data-section][hidden]{display:none!important}
.form-sent__badge{position:relative;width:64px;height:64px;display:grid;place-content:center;background-color:var(--minted-green-500);box-shadow:var(--minted-shadow-btn-hover);animation:sent-pop 560ms var(--minted-ease-enter) both}
.form-sent__badge svg path{stroke-dasharray:34;stroke-dashoffset:34;animation:sent-check 420ms var(--minted-ease-state) 280ms forwards}
.form-sent__cells{position:absolute;inset:0;pointer-events:none}
.form-sent__cells i{position:absolute;width:8px;height:8px;background-color:var(--minted-green-300);animation:sent-cell 700ms var(--minted-ease-enter) both}
.form-sent__cells i:nth-child(1){left:-18px;top:6px;animation-delay:300ms}
.form-sent__cells i:nth-child(2){right:-16px;top:-12px;background-color:var(--minted-green-100);animation-delay:380ms}
.form-sent__cells i:nth-child(3){right:-22px;bottom:8px;animation-delay:340ms}
.form-sent__cells i:nth-child(4){left:-12px;bottom:-14px;background-color:var(--minted-green-100);animation-delay:440ms}
.form-sent__text{margin:0;font-family:var(--minted-font-mono);font-size:var(--minted-size-btn);font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--minted-green-300);animation:sent-fade 400ms ease-out 380ms both}
@keyframes sent-pop{0%{transform:scale(0.2) rotate(-8deg);opacity:0}62%{transform:scale(1.14) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0deg);opacity:1}}
@keyframes sent-check{to{stroke-dashoffset:0}}
@keyframes sent-cell{0%{transform:scale(0);opacity:0}55%{transform:scale(1.3);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes sent-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============ Checklist, FAQ ============ */
.checklist{list-style:none;margin:0;padding:0;width:100%}
.checklist li{position:relative;padding:15px 4px 15px 28px;color:var(--minted-text-secondary);font-size:1.05rem;border-top:var(--minted-border-hairline);transition:background-color var(--minted-dur-fast) var(--minted-ease-state),color var(--minted-dur-fast) var(--minted-ease-state)}
.checklist li:last-child{border-bottom:var(--minted-border-hairline)}
.checklist li::before{content:"";position:absolute;left:4px;top:1.35em;width:9px;height:9px;background-color:var(--minted-green-500);transition:background-color var(--minted-dur-fast) var(--minted-ease-state),transform var(--minted-dur-fast) var(--minted-ease-state)}
.checklist li:hover{background-color:var(--minted-green-500);color:var(--minted-dark-900)}
.checklist li:hover::before{background-color:var(--minted-dark-900);transform:translateX(6px)}
.faq__list{border-bottom:var(--minted-border-hairline)}
.faq__item{border-top:var(--minted-border-hairline)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 4px;cursor:pointer;list-style:none;font-family:var(--minted-font-display);font-weight:700;font-stretch:112%;font-size:clamp(1.1rem,1.8vw,1.45rem);line-height:1.25;letter-spacing:-0.005em;text-transform:uppercase;color:var(--minted-text-primary);transition:color var(--minted-dur-fast) var(--minted-ease-state)}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--minted-green-300)}
.faq__mark{flex:none;width:34px;height:34px;display:grid;place-content:center;border:var(--minted-border-hairline);font-family:var(--minted-font-mono);font-size:1rem;font-weight:400;color:var(--minted-green-300);transition:transform 280ms var(--minted-ease-enter),background-color var(--minted-dur-fast) var(--minted-ease-state),color var(--minted-dur-fast) var(--minted-ease-state)}
.faq__item[open] .faq__mark{transform:rotate(45deg);background-color:var(--minted-green-500);color:var(--minted-dark-900);border-color:var(--minted-green-500)}
.faq__a{margin:0;padding:0 4px 28px;color:var(--minted-text-secondary);font-size:1.05rem;line-height:1.65;max-width:64ch;text-wrap:pretty}

/* ============ Placeholder slot (embeds, media) ============ */
.slot{position:relative;min-height:380px;display:grid;place-content:center;justify-items:center;gap:16px;padding:clamp(28px,3vw,48px);background-color:var(--minted-bg-cell);background-image:linear-gradient(to right,var(--minted-stroke-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--minted-stroke-grid) 1px,transparent 1px);background-size:var(--minted-cell) var(--minted-cell)}
.slot__label{margin:0;font-family:var(--minted-font-mono);font-size:var(--minted-size-label);font-weight:500;letter-spacing:var(--minted-track-label);text-transform:uppercase;color:var(--minted-text-label);text-align:center}
.slot__note{margin:0;color:var(--minted-text-faint);font-size:var(--minted-size-note);text-align:center;max-width:30ch;text-wrap:pretty}

/* ============ Scroll reveals ============ */
/* hidden only while a script drives them (static-complete without JavaScript) */
:root.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity var(--minted-dur-enter) var(--minted-ease-enter),transform var(--minted-dur-enter) var(--minted-ease-enter)}
:root.js [data-reveal].is-in{opacity:1;transform:none}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  :root.js [data-reveal]{transform:none;transition:opacity 300ms ease-out}
  .footer3__giant{animation:none;background-position:50% 0,0 0}
  .form-sent__badge,.form-sent__badge svg path,.form-sent__cells i,.form-sent__text{animation:none;opacity:1;stroke-dashoffset:0;transform:none}
  .faq__item[open] .faq__mark{transform:none}
  .checklist li:hover::before{transform:none}
  .btn--primary:hover,.btn--secondary:hover{transform:none}
  .tlink__arrow{transition:none}
  .tlink:hover .tlink__arrow{transform:none}
}

/* ============ Shared breakpoints ============ */
@media (max-width:720px){
  .site-nav__toggle{display:grid;position:relative;z-index:2}
  .site-nav__brand{position:relative;z-index:2}
  .site-nav__toggle-grid{transition:transform 320ms var(--minted-ease-state)}
  .site-nav--open .site-nav__toggle-grid{transform:rotate(45deg)}
  .site-nav__links{display:flex;position:fixed;top:0;left:0;width:100%;height:100dvh;flex-direction:column;align-items:center;justify-content:center;gap:var(--minted-space-1);background-color:color-mix(in srgb,var(--minted-dark-900) 96%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:80px var(--minted-pad-x) 40px;opacity:0;pointer-events:none;transition:opacity 260ms var(--minted-ease-state)}
  .site-nav--open .site-nav__links{opacity:1;pointer-events:auto}
  .site-nav__link{font-size:0.95rem;letter-spacing:0.2em;padding:16px 10px}
  .site-nav__links .btn{margin-top:22px;width:min(320px,78vw);padding:18px 20px}
  .footer3__meta{flex-direction:column;align-items:center;gap:20px;text-align:center}
  .footer3__links{justify-content:center;gap:8px 22px}
  .footer3__legal{justify-items:center;text-align:center}
}

/* A link whose real value isn't in config/site.json yet (PLACEHOLDER). Only local builds can contain one:
   every other build refuses placeholders. The outline says "not a working link" at a glance.
   Keyboard focus swaps the flag for the normal focus ring: the flag's selector outranks :focus-visible. */
a[href^="#placeholder-"] { outline: 2px dashed var(--minted-placeholder-flag); outline-offset: 3px; cursor: not-allowed }
a[href^="#placeholder-"]:focus-visible { outline: var(--minted-focus-ring); outline-offset: 2px }