:root{
    --navy:#0D2332; --navy-2:#102b3d; --teal:#00ACC8; --orange:#FC5D19;
    --green:#7AC943; --yellow:#FFD600; --ink:#0D2332; --muted:#5a6b78;
    --line:#e3e7ea; --bg:#f5f6f8;
    --maxw:1100px;
    /* Set this to your site's fixed-header height so the quiz progress bar isn't hidden behind the nav */
    --nav-offset:28px;
  }
  /* The theme registers MaisonNeue's weights as SEPARATE families (MaisonNeue-Demi,
     "MaisonNeue Bold"), so font-weight:300/600/700 on the inherited MaisonNeue family
     would render the Book cut or browser faux-bold. Re-register the real cuts against
     proper weight descriptors so the quiz typography matches the Figma design. */
  @font-face{font-family:MaisonNeue;font-weight:300;font-display:swap;src:url("/wp-content/uploads/et-fonts/MaisonNeue-Light.otf") format("opentype")}
  @font-face{font-family:MaisonNeue;font-weight:400;font-display:swap;src:url("/wp-content/uploads/et-fonts/MaisonNeue-Book.otf") format("opentype")}
  @font-face{font-family:MaisonNeue;font-weight:600;font-display:swap;src:url("/wp-content/uploads/et-fonts/MaisonNeue-Demi.otf") format("opentype")}
  @font-face{font-family:MaisonNeue;font-weight:700;font-display:swap;src:url("/wp-content/uploads/et-fonts/MaisonNeue-Bold.otf") format("opentype")}
  /* Scope box-sizing & font to the assessment only, so nothing leaks onto the host WP page */
  .screen,.screen *{box-sizing:border-box;font-family:inherit}
  .screen{color:var(--ink);-webkit-font-smoothing:antialiased}
  /* Full-bleed breakout; overflow-x:clip prevents any 100vw scrollbar overflow */
  .screen{display:none;position:relative;left:50%;right:50%;width:100vw;max-width:100vw;margin-left:-50vw;margin-right:-50vw;overflow-x:clip}
  /* The 100vw screens overflow their ancestors by the scrollbar width on browsers with
     classic (non-overlay) scrollbars, adding a horizontal scrollbar. Clip on the wrapper —
     NOT on html/body: root-level overflow-x:clip propagates to the viewport and kills
     vertical scrolling entirely in Chrome. */
  #page-container{overflow-x:clip}
  /* The site-wide subscribe modal wrapper adds 1px of flow height after the article, making
     the 100dvh welcome screen scrollable by 1px. Its trigger tab lives in the footer, which
     is hidden on these pages, so the modal is unreachable here anyway. */
  .subscribe-form--modal{display:none}
  .screen.active{display:block}
  /* hidden state must beat ID-specificity display rules like #welcome{display:flex} */
  .screen:not(.active){display:none!important}
  button{font-family:inherit}
  /* this page hides the site nav (.afia-landing-page); remove the theme's 60px content offset
     so the hero starts at the very top. !important: the Divi DB custom CSS re-asserts
     #main-content{margin:60px 0 0} from the last-loaded et-core-unified file. */
  #main-content{margin-top:0!important}
  /* The shortcode renders inside Divi's section/row/column/module wrappers, whose default
     vertical padding & margin (sections are 54px 0, modules add bottom margin) would leave a
     white gap below the full-height screens. Zero them so the quiz sits flush — top and bottom.
     This CSS only loads on the page where [growth_quiz] is placed (the dedicated quiz page). */
  .et_pb_section,.et_pb_row,.et_pb_row_inner,.et_pb_column,.et_pb_module{padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important}
  .btn-primary{background:var(--orange);color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;padding:13px 26px;font-size:16px}
  .btn-primary:hover{filter:brightness(.95)}
  .btn-primary:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

  /* ---------- WELCOME ---------- */
  #welcome{min-height:100vh;min-height:100dvh;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 22px;background:var(--navy) url("/wp-content/uploads/2026/06/BG-scaled.png") center/cover no-repeat}
  /* When logged in, the WP admin bar adds 32px (46px on mobile) to <html>; subtract it
     so the full-height hero doesn't overflow into a thin scrolling white strip below. */
  body.admin-bar #welcome{min-height:calc(100vh - 32px);min-height:calc(100dvh - 32px)}
  @media screen and (max-width:782px){body.admin-bar #welcome{min-height:calc(100vh - 46px);min-height:calc(100dvh - 46px)}}
  .logo{position:relative;margin-bottom:8vh}
  .logo img{height:42px;width:auto;display:block}
  #welcome h1{color:#fff;font-weight:300;font-size:clamp(32px,6vw,68px);line-height:1.05;margin:0 0 22px;position:relative}
  #welcome p{color:#cdd6dc;font-size:clamp(16px,2.2vw,22px);margin:0 0 34px;position:relative;line-height:1.4}
  #welcome .btn-primary{position:relative}

  /* ---------- QUIZ ---------- */
  /* --nav-offset: increase if your site's fixed header still overlaps the progress bar */
  #quiz{padding:var(--nav-offset,0) 0 60px;min-height:100vh;background:var(--bg)}
  .quiz-head{background:var(--bg);padding:24px 22px 14px;border-bottom:1px solid var(--line)}
  .quiz-head .row{display:flex;justify-content:space-between;align-items:baseline;max-width:var(--maxw);margin:0 auto;font-size:14px}
  .quiz-head .sec{color:var(--teal);font-weight:700}
  .quiz-head .pct{color:var(--muted)}
  .bar{max-width:var(--maxw);margin:10px auto 0;height:4px;background:var(--line);border-radius:3px;overflow:hidden}
  .bar > i{display:block;height:100%;width:0;background:var(--teal);border-radius:3px;transition:width .5s ease}
  .quiz-body{max-width:var(--maxw);margin:0 auto;padding:30px 22px 0}
  .sec-title{font-size:clamp(24px,4vw,34px);font-weight:600;margin:0 0 4px}
  .sec-meta{color:var(--muted);font-size:13px;margin:0 0 22px}
  .qcard{background:#fff;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.06);padding:22px 26px;margin-bottom:18px}
  .qtext{font-size:clamp(16px,2.4vw,19px);font-weight:600;line-height:1.3;margin-bottom:14px}
  .qtext b{color:var(--ink);margin-right:6px}
  .opt{display:flex;align-items:center;gap:11px;padding:9px 6px;border-radius:8px;cursor:pointer;font-size:15.5px;color:#33424d;transition:background .12s}
  .opt:hover{background:#f6f8f9}
  .opt input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;margin:0;border:2px solid #c4ccd2;border-radius:50%;cursor:pointer;position:relative;transition:border-color .15s,box-shadow .15s}
  .opt input:hover{border-color:var(--teal)}
  .opt input:checked{border-color:var(--teal);box-shadow:inset 0 0 0 3px #fff}
  .opt input:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--teal)}
  .opt.sel{font-weight:700;color:var(--ink)}
  .qnav{display:flex;justify-content:space-between;align-items:center;max-width:var(--maxw);margin:6px auto 0;padding:0 22px}
  .back{background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:10px 4px;display:inline-flex;align-items:center;gap:6px}
  .back:hover{color:var(--ink)}
  .back[hidden]{visibility:hidden}
  .sec-error{color:#d9534f;font-size:13.5px;max-width:var(--maxw);margin:14px auto 0;padding:0 22px}

  /* ---------- MODAL FORM ---------- */
  #formScreen{position:relative;min-height:100vh;background:var(--bg)}
  .blur-bg{position:absolute;inset:0;background:var(--bg);overflow:hidden;filter:blur(7px);pointer-events:none;opacity:.6}
  .blur-bg .hero-stub{background:var(--navy);height:300px}
  .blur-bg .card-stub{background:#fff;height:160px;margin:24px;border-radius:12px}
  .overlay{position:fixed;inset:0;background:rgba(13,35,50,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:20}
  .modal{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:100%;max-width:560px;padding:36px 36px;text-align:center}
  .modal h2{font-size:clamp(20px,3vw,24px);font-weight:700;margin:0 0 6px;color:var(--ink)}
  .modal .sub{color:var(--teal);font-size:14px;margin:0 0 22px}
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;margin-bottom:16px;align-items:start}
  .modal input{width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;font-size:15px}
  .modal input.err{border-color:#d9534f}
  .ferr{color:#d9534f;font-size:12px;text-align:left;margin:5px 0 0 2px;display:none}
  .modal .btn-primary{width:100%;margin-top:8px}
  @media(max-width:440px){.frow{grid-template-columns:1fr}}

  /* ---------- RESULTS ---------- */
  #results{background:var(--bg);min-height:100vh}
  #results .wrap{width:100%;margin:0 auto}
  /* hero spans full width; its text content is centered and width-limited */
  /* Odessa "O" ring art over the navy, matching the site's percentage sections
     (68% width, bleeding off the left edge) */
  .r-hero{background-color:#0d2332;background-image:url("/wp-content/uploads/2026/07/Hero-BG-scaled.png");background-repeat:no-repeat;background-size:cover;background-position:center;position:relative;overflow:hidden;padding:46px 22px 84px;text-align:center}
  .r-hero > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}
  .r-hero h1{color:var(--teal);font-weight:400;font-size:clamp(22px,3.6vw,48px);margin:0 auto 24px;position:relative}
  .r-hero .lbl{color:#fff;font-weight:500;font-size:clamp(17px,2.4vw,36px);margin-bottom:24px;position:relative}
  .gauge{position:relative;width:min(220px,60vw);height:min(220px,60vw);margin:0 auto 8px}
  .gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
  .gauge .track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:10}
  .gauge .fill{fill:none;stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1),stroke 1.4s}
  .gauge .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .gauge .score{font-size:clamp(38px,9vw,54px);font-weight:700;line-height:1;color:#fff}
  .gauge .score .den{font-size:.34em;font-weight:400;color:#cfd8de;margin-left:3px}
  .gauge .tier{font-size:clamp(10px,2.2vw,12px);font-weight:700;margin-top:6px;background:rgba(255,255,255,.08);padding:4px 12px;border-radius:999px;max-width:78%;text-align:center;line-height:1.3}
  .r-hero .blurb{color:#cdd6dc;font-size:18px;max-width:440px;margin:18px auto 0;position:relative;line-height:1.5}
  .card{background:#fff;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.08);padding:28px 30px;margin:-46px auto 20px;max-width:var(--maxw);position:relative;width:calc(100% - 44px)}
  .card.flat{margin:0 auto 20px}
  .card h2{font-size:clamp(19px,3vw,36px);font-weight:700;margin:0 0 20px}
  /* content nests under the card heading: h2 stays flush left, grid + note indent */
  #results .card .grid,#results .card .note{margin-left:20px}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 38px}
  /* Maison Neue Bold: weight 700 resolves to the re-registered MaisonNeue-Bold cut above */
  .pt .h{font-family:MaisonNeue,sans-serif;font-weight:700;font-size:18px;margin:0 0 3px;color:var(--orange)}
  /* orange bullet markers on the insight points (per Figma). The bullet sits at left:0
     INSIDE the item's box (never outside the card margin); heading and body copy share
     the same 18px indent so they stay aligned with each other. */
  #insightGrid .pt{position:relative;padding-left:14px}
  #insightGrid .pt .h::before{content:"\2022";position:absolute;left:0;color:var(--orange)}
  .pt p{margin:0;font-size:18px;color:var(--muted);line-height:1.70;width:100%}
  .steps .pt .h{color:var(--teal);margin:0 0 3px}
  /* hanging number gutter: heading text and body copy both start at 28px, so the copy
     aligns with the heading text rather than with the number */
  .steps .pt.step{position:relative;padding-left:20px}
  .steps .num{color:var(--teal);font-weight:700;position:absolute;left:0}
  .note{background:#f3f5f7;border-radius:8px;padding:11px 14px;font-size:16px;color:var(--muted);margin-top:20px}
  /* Ring-arc art (Ellipse-Container.png) centered/cover over the teal gradient,
     per the Figma banner. The Footer Container export has the text baked in, so
     only the clean arc layer is used as background. */
  .banner{position:relative;background:url("/wp-content/uploads/2026/06/Ellipse-Container.png") center/cover no-repeat,linear-gradient(90deg,#085B7B 0%,#0a6a85 55%,#00ACC8 100%);overflow:hidden;margin:0 auto 38px;max-width:var(--maxw);width:calc(100% - 44px);display:flex;align-items:center;justify-content:space-between;gap:30%;padding:60px 40px;border-radius:10px}
  .banner h3,.banner a{position:relative;z-index:1}
  .banner h3{color:#fff;font-size:clamp(18px,2.6vw,36px);margin:0;line-height:1.25;font-weight:700}
  .banner a{background:var(--orange);color:#fff;text-decoration:none;font-weight:700;font-size:18px;padding:12px 75px;border-radius:7px;white-space:nowrap}
  .res{padding:46px 22px 60px;text-align:center}
  /* bottom margin deliberately much smaller than the space above the heading (banner gap +
     section padding) so the heading reads as grouped with the resource cards below it */
  .res h2{font-size:clamp(22px,3vw,36px);font-weight:700;margin:0 0 30px;color:var(--ink)}
  .res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:var(--maxw);margin:0 auto}
  .rc{background:#fff;border-radius:12px;box-shadow:0 6px 22px rgba(0,0,0,.07);overflow:hidden;text-align:left;display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;text-decoration:none}
  .rc:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.12)}
  .rc .thumb{aspect-ratio:16/10;width:100%;background-size:cover;background-position:center;background-color:var(--navy-2)}
  .rc .body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
  /* weight 600 resolves to the re-registered MaisonNeue-Demi cut above (500 would fall back to Book) */
  .rc .ttl{font-family:MaisonNeue,sans-serif;font-size:24px;font-weight:600;line-height:1.3;color:var(--ink)}
  /* margin-top:auto pins kind/divider/Read More to the card bottom so the meta rows of all
     three cards align regardless of how many lines each title wraps to */
  .rc .kind{font-size:16px;letter-spacing:1px;color:var(--teal);font-weight:400;margin:auto 0 14px;padding-top:16px;text-transform:uppercase}
  .rc .divider{border-top:1px solid var(--line);margin:0 0 16px}
  .rc .more{color:var(--orange);font-size:16px;font-weight:400;text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-top:auto}
  .rc .more:hover{gap:9px}

  /* tablet */
  @media(max-width:900px){
    .res-grid{grid-template-columns:repeat(2,1fr);gap:22px}
    /* the desktop 75px side padding + 30% gap overflow the narrower row-layout banner here */
    .banner{gap:24px}
    .banner a{padding:12px 44px}
  }
  @media(max-width:760px){
    /* column layout: reset the 30% gap (resolves against height when stacked) to a fixed value */
    .banner{flex-direction:column;align-items:flex-start;gap:22px;padding:56px 30px}
    .banner a{align-self:stretch;text-align:center}
    .res h2{margin-bottom:26px}
  }
  /* mobile */
  @media(max-width:560px){
    .grid{grid-template-columns:1fr;gap:16px}
    .res-grid{grid-template-columns:1fr;gap:18px}
    .card{padding:24px 20px;margin:-46px auto 16px;width:calc(100% - 28px)}
    .card.flat,.banner{width:calc(100% - 28px)}
    .banner{padding:40px 24px}
    .res{padding:34px 14px 44px}
    .res h2{margin-bottom:22px}
    .qcard{padding:18px 16px}
  }
  @media(prefers-reduced-motion:reduce){
    *{transition:none!important}
  }