/* design.thinking.ai.id: shared thinking.ai.id shell (navy/amber, Poppins + Open Sans) with the Design lens accent #1C6FB8. */
:root {
  --navy: #0C2F52; --lens: #1C6FB8; --btn: #0C4F8E; --amber: #F0A202;
  --bg: #F4F7FB; --text: #4A5568; --line: #DCE5F0; --card: #fff; --soft: #EAF1FA; --ok: #1f8a4c; --no: #c0392b;
}
@media (prefers-color-scheme: dark) {
  :root { --navy: #EAF1FA; --bg: #0B1624; --text: #9DB3CC; --line: #1F3350; --card: #11233A; --soft: #0f2036; --btn: #4472C4; --ok: #4cc380; --no: #ff8b7e; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 "Open Sans", "Segoe UI", Arial, sans-serif; }
h1, h2, h3, h4, h5, .brand { font-family: Poppins, "Segoe UI", Arial, sans-serif; color: var(--navy); margin: 0; }
a { color: var(--lens); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr:focus + label { outline: 3px solid var(--amber); outline-offset: 2px; }
.small { font-size: 13px; opacity: .9; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* nav: dark blue like the hub */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(7,24,43,.94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.12); }
.navin { max-width: 1240px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 18px; }
.brand { color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.brand span { color: var(--amber); }
.links { display: flex; align-items: center; gap: 4px 16px; margin-left: auto; flex-wrap: wrap; }
.links a { color: #D3E0EF; text-decoration: none; font-size: 13.5px; }
.links a:hover { color: #fff; }
.links .hub { color: var(--amber); }
.lang { display: inline-flex; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 2px; background: rgba(255,255,255,.08); }
.lang button { border: 0; background: transparent; color: #D3E0EF; font: 600 12px Poppins, sans-serif; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--amber); color: #0C2F52; }
.nav-toggle { display: none; margin-left: auto; width: 40px; height: 36px; border: 1px solid rgba(255,255,255,.25); background: transparent; border-radius: 8px; cursor: pointer; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 9px; right: 9px; height: 2px; background: #fff; }
.nav-toggle span { top: 17px; } .nav-toggle span::before { top: -6px; left: 0; right: 0; } .nav-toggle span::after { top: 6px; left: 0; right: 0; }

/* hero */
.hero { color: #fff; background: radial-gradient(900px 500px at 85% 15%, rgba(111,163,217,.3), transparent 60%), linear-gradient(135deg, #07182b 0%, #0C2F52 45%, #0C4F8E 100%); padding: 72px 0 56px; }
.herogrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 600; color: var(--amber); margin: 0 0 12px; }
.hero h1 { color: #fff; font-size: clamp(32px, 5vw, 54px); line-height: 1.12; }
.hero h1 em { font-style: normal; color: var(--amber); }
.question { font: 600 18px Poppins, sans-serif; color: #fff; margin: 18px 0 0; border-left: 3px solid var(--lens); padding-left: 14px; }
.lede { font-size: 18px; max-width: 34em; margin: 16px 0 28px; color: #D3E0EF; }
.herostats { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 0; margin: 34px 0 0; color: #D3E0EF; font-size: 14px; }
.herostats strong { font: 700 28px Poppins, sans-serif; color: var(--amber); margin-right: 6px; }
.vennbox { display: flex; flex-direction: column; align-items: center; }
.venn { width: min(100%, 380px); height: auto; overflow: visible; }
.vc { cursor: pointer; transition: transform .2s; transform-origin: 150px 190px; }
.vc:hover circle { stroke-opacity: 1; }
.vt { fill: #fff; font: 600 12px Poppins, sans-serif; pointer-events: none; }
.vt.dark { fill: #0C2F52; font-size: 18px; }
.venn-cap { text-align: center; max-width: 340px; margin-top: 8px; color: #D3E0EF; }
.venn-cap strong { font-family: Poppins, sans-serif; color: #fff; font-size: 17px; }
.venn-cap p { margin: 4px 0 6px; font-size: 14px; }
.venn-cap small { opacity: .7; }

/* Venn animation: the three circles orbit the star while their labels stay upright, a dashed ring with two satellites
   turns the other way, the star breathes and the whole diagram floats. It pauses while hovered or focused so it is easy to
   click. The global prefers-reduced-motion rule below turns all of it off. */
.venn { animation: venn-float 7s ease-in-out infinite; }
.venn-spin { transform-origin: 150px 183.3px; animation: venn-orbit 48s linear infinite; }
.venn-spin .vt { transform-box: fill-box; transform-origin: center; animation: venn-orbit 48s linear infinite reverse; }
.venn-ring { transform-origin: 150px 183.3px; animation: venn-orbit 90s linear infinite reverse; pointer-events: none; }
.venn-core circle { transform-box: fill-box; transform-origin: center; animation: venn-beat 3.2s ease-in-out infinite; }
.vc.on circle { stroke-opacity: 1; }
.vennbox:hover .venn-spin, .vennbox:hover .venn-spin .vt, .vennbox:hover .venn-ring,
.vennbox:focus-within .venn-spin, .vennbox:focus-within .venn-spin .vt, .vennbox:focus-within .venn-ring { animation-play-state: paused; }
@keyframes venn-orbit { to { transform: rotate(360deg); } }
@keyframes venn-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes venn-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Hero photo: a picture behind the headline and the Venn diagram (assets/hero-people.jpg, 16:9, dark navy, subject on the right).
   Applied only once the file loads (see app.js), so the hero is unchanged until the photo is uploaded. */
.hero.has-photo {
  background:
    linear-gradient(90deg, #07182b 0%, rgba(7,24,43,.94) 28%, rgba(7,24,43,.6) 52%, rgba(7,24,43,.18) 100%),
    linear-gradient(0deg, #07182b 0%, rgba(7,24,43,0) 24%),
    linear-gradient(135deg, rgba(12,79,142,.38), rgba(7,24,43,.15)),
    url("hero-people.jpg") 80% center / cover no-repeat,
    #07182b;
}
.hero.has-photo .venn { filter: drop-shadow(0 0 28px rgba(28,111,184,.45)); }
.hero.has-photo .vt:not(.dark) { paint-order: stroke; stroke: rgba(7,24,43,.55); stroke-width: 3px; stroke-linejoin: round; }
.hero.has-photo h1, .hero.has-photo .lede, .hero.has-photo .venn-cap { text-shadow: 0 2px 18px rgba(7,24,43,.7); }
.hero.has-photo .venn-cap { background: rgba(7,24,43,.5); backdrop-filter: blur(4px); border-radius: 12px; padding: 10px 16px; }
@media (max-width: 800px) {
  .hero.has-photo {
    background:
      linear-gradient(180deg, rgba(7,24,43,.88) 0%, rgba(7,24,43,.72) 55%, #07182b 100%),
      linear-gradient(135deg, rgba(12,79,142,.38), rgba(7,24,43,.15)),
      url("hero-people.jpg") 72% center / cover no-repeat,
      #07182b;
  }
}

/* buttons */
.actions { margin-top: 18px; }
.actions.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn { display: inline-block; border: 0; border-radius: 999px; padding: 11px 24px; font: 600 15px "Open Sans", sans-serif; text-decoration: none; cursor: pointer; transition: filter .15s; }
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--btn); color: #fff; }
.btn-amber { background: var(--amber); color: #0C2F52; }
.btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--line); }
.hero .btn-ghost, .band-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.btn.sm { padding: 6px 14px; font-size: 13px; }

/* sections */
.sec { padding: 76px 0; }
.sec h2 { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.2; max-width: 22em; }
.sec h3 { font-size: 20px; margin: 40px 0 14px; }
.sub { max-width: 46em; margin: 14px 0 28px; }
.light { background: var(--bg); }
.band-dark { --navy: #fff; --text: #D3E0EF; --card: rgba(255,255,255,.08); --line: rgba(255,255,255,.2); --soft: rgba(255,255,255,.06);
  color: var(--text); background: radial-gradient(800px 400px at 10% 0%, rgba(111,163,217,.22), transparent 60%), linear-gradient(135deg, #0C2F52 0%, #0C4F8E 100%); }
.band-dark a { color: var(--amber); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.card h4 { font-size: 17px; margin-bottom: 6px; }
.card p, .card ul { margin: 6px 0 0; }
.card.glass { backdrop-filter: blur(2px); }
.num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lens); color: #fff; font: 600 13px Poppins, sans-serif; margin-bottom: 8px; }
.tag { display: inline-block; font: 600 11px Poppins, sans-serif; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: var(--soft); color: var(--navy); border: 1px solid var(--line); }
.tag.good { background: rgba(31,138,76,.15); color: var(--ok); border-color: var(--ok); }
.tag.poor { background: rgba(192,57,43,.12); color: var(--no); border-color: var(--no); }
.badge { display: inline-block; font: 600 11px Poppins, sans-serif; padding: 3px 10px; border-radius: 999px; background: var(--amber); color: #0C2F52; }

/* definition */
.traits, .mind { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--amber); color: #0C2F52; font-size: 18px; margin-bottom: 8px; }
.origin { max-width: 52em; margin: 24px 0 0; }
.spaces { display: flex; gap: 8px; margin-bottom: 10px; font: 600 12px Poppins, sans-serif; }
.sp { padding: 4px 12px; border-radius: 999px; } .sp.p { background: rgba(240,162,2,.2); color: var(--amber); } .sp.s { background: rgba(111,163,217,.25); color: #fff; }
.stages5 { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; padding: 0; margin: 0; counter-reset: s; }
.stages5 small { display: block; margin-top: 8px; opacity: .8; }
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.cmp ul { padding-left: 18px; } .cmp .no h4 { color: #ff9f93; } .cmp .yes h4 { color: var(--amber); }
.goal { font: 600 18px Poppins, sans-serif; color: #fff; margin: 24px 0 0; }

/* what for / best / limits / sources */
.benefits, .lims { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.tags li { padding: 6px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--navy); font-size: 14px; }
.ai-box { margin-top: 40px; padding: 28px; border-radius: 16px; color: #D3E0EF; background: linear-gradient(135deg, #0C2F52, #0C4F8E); }
.ai-box h3 { color: #fff; margin-top: 0; } .ai-box blockquote { margin: 0 0 18px; font: 600 18px/1.4 Poppins, sans-serif; color: #fff; border-left: 3px solid var(--amber); padding-left: 14px; }
.ai-box cite { display: block; font: 400 13px "Open Sans", sans-serif; color: var(--amber); margin-top: 6px; font-style: normal; }
.airows { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 20px; } .airows strong { display: block; color: var(--amber); font-family: Poppins, sans-serif; } .airows span { font-size: 14px; }
.bestlist { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.fit h3 { margin-top: 0; } .fitq { font: 600 18px/1.4 Poppins, sans-serif; color: #fff; margin: 12px 0 0; } .fitq small { display: block; color: var(--amber); font-family: "Open Sans", sans-serif; }
.verdict { font: 600 18px Poppins, sans-serif; margin: 12px 0 0; } .verdict.v0 strong { color: #7fe3a6; } .verdict.v1 strong { color: var(--amber); } .verdict.v2 strong { color: #ff9f93; }
.pair { display: inline-block; margin-top: 10px; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); }
.pair b { color: var(--lens); }
.note { margin: 24px 0 8px; padding: 14px 18px; border-left: 4px solid var(--amber); background: var(--card); border-radius: 0 10px 10px 0; color: var(--navy); }
.srcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 14px; }
.srcgrid ul { list-style: none; padding: 0; } .srcgrid li { margin: 10px 0; font-size: 14px; } .srcgrid li span { display: block; opacity: .85; }

/* case studies */
.case { margin-bottom: 14px; padding: 0; overflow: hidden; }
.case summary { cursor: pointer; padding: 18px 22px; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.case summary::-webkit-details-marker { display: none; }
.case summary strong { font: 600 18px Poppins, sans-serif; color: var(--navy); }
.tagline { font: 600 11px Poppins, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: var(--lens); }
.cbody { padding: 0 22px 22px; display: grid; gap: 14px; }
.crow h5 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--lens); margin-bottom: 4px; } .crow ul { margin: 0; padding-left: 18px; } .crow p { margin: 0; }
.csteps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; counter-reset: c; }
.csteps li { counter-increment: c; font-size: 13px; padding: 5px 12px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); }
.csteps li:nth-child(4) { background: rgba(192,57,43,.12); border-color: var(--no); color: var(--no); }

/* simulator */
.sim { margin-top: 8px; }
.stepper { list-style: none; display: flex; gap: 6px; padding: 0 0 6px; margin: 0 0 22px; overflow-x: auto; }
.stp { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; white-space: nowrap; }
.stp .n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--soft); font: 600 12px Poppins, sans-serif; color: var(--navy); }
.stp .l { font-size: 13px; }
.stp.ok .n { background: var(--lens); color: #fff; }
.stp.on { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(240,162,2,.35); color: var(--navy); }
.stp:disabled { opacity: .5; cursor: not-allowed; }
.setup h3 { margin: 22px 0 10px; font-size: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1.5px solid var(--line); background: var(--card); color: var(--navy); padding: 8px 16px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px; }
.chip.on { background: var(--btn); color: #fff; border-color: var(--btn); }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; padding: 3px; background: var(--card); margin-bottom: 8px; }
.seg button { border: 0; background: transparent; color: var(--text); padding: 8px 18px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 14px; }
.seg button.on { background: var(--btn); color: #fff; }
.seg.sm button { padding: 5px 12px; font-size: 13px; }
.seg.sm button.right { outline: 2px solid var(--ok); } .seg.sm button.wrong { outline: 2px solid var(--no); }
.preview { margin-top: 18px; } .preview h4 { margin: 8px 0 4px; }
.aipanel { display: grid; gap: 10px; margin-top: 8px; }
.aipanel label, .lbl { font: 600 13px Poppins, sans-serif; color: var(--navy); margin: 6px 0 0; }
.aipanel input[type="text"], .aipanel textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--navy); font: inherit; }
.chk { display: flex; align-items: flex-start; gap: 8px; font: 400 14px "Open Sans", sans-serif !important; color: var(--text) !important; }
.chk input { margin-top: 5px; }
.filerow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.files { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .files li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px; background: var(--soft); border-radius: 8px; font-size: 13px; }
.files .x { border: 0; background: transparent; color: var(--no); font-size: 18px; cursor: pointer; }
.aistatus { margin: 0; font-weight: 600; color: var(--lens); }
.srclist { padding-left: 18px; } .srclist li { margin: 4px 0; word-break: break-word; }
.sh { margin-bottom: 18px; } .sh h3 { margin: 0; font-size: 28px; } .lead { margin: 6px 0 0; font-size: 17px; }
.grid2 { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; margin-bottom: 8px; }
.persona .problem { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 14px; }
.jchart { width: 100%; height: auto; display: block; }
.jsteps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0; margin: 4px 0 8px; font-size: 11.5px; text-align: center; }
.jsteps li.pain { color: var(--no); font-weight: 700; }
.q-h { margin: 26px 0 4px; font-size: 18px; }
.opts { display: grid; gap: 8px; margin-top: 10px; }
.opt { text-align: left; border: 1.5px solid var(--line); background: var(--card); color: var(--text); padding: 12px 16px; border-radius: 12px; cursor: pointer; line-height: 1.5; }
.opt:hover:not(:disabled) { border-color: var(--lens); }
.opt.sel { border-color: var(--amber); box-shadow: inset 4px 0 0 var(--amber); color: var(--navy); }
.opt.good { border-color: var(--ok); background: rgba(31,138,76,.1); }
.opt.poor { border-color: var(--no); background: rgba(192,57,43,.08); }
.opt:disabled { cursor: default; }
.answers { display: grid; gap: 10px; margin-top: 14px; }
.ans { padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.qline { margin: 0 0 6px; font-weight: 600; color: var(--navy); }
blockquote { margin: 6px 0 0; padding-left: 14px; border-left: 3px solid var(--lens); font-style: italic; }
.cls { display: grid; gap: 10px; margin-top: 10px; }
.clsrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.clsrow p { margin: 0; flex: 1 1 260px; }
.mark { font-size: 13px; font-weight: 600; } .mark.ok { color: var(--ok); } .mark.no { color: var(--no); }
.fb { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; font-size: 14.5px; }
.fb.ok { background: rgba(31,138,76,.12); color: var(--navy); border: 1px solid var(--ok); }
.fb.no { background: rgba(192,57,43,.1); color: var(--navy); border: 1px solid var(--no); }
.fb[hidden] { display: none; }
.scamper { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.scard { min-height: 112px; border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: 12px; cursor: pointer; text-align: left; color: var(--text); display: flex; flex-direction: column; gap: 4px; }
.scard b { font: 700 24px Poppins, sans-serif; color: var(--lens); line-height: 1; } .scard .nm { font-size: 12px; font-weight: 600; color: var(--navy); } .scard .tap { font-size: 12px; opacity: .6; } .scard .idea { font-size: 13px; line-height: 1.4; }
.scard.open { border-color: var(--amber); background: var(--soft); }
.crazy { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.crazy textarea { width: 100%; resize: vertical; padding: 8px 10px; border: 1.5px dashed var(--line); border-radius: 10px; background: var(--card); color: var(--navy); font: inherit; font-size: 13px; }
.crazy textarea.active { border: 2px solid var(--amber); box-shadow: 0 0 0 3px rgba(240,162,2,.25); }
.timer { margin: 8px 0 0; font: 600 14px Poppins, sans-serif; color: var(--lens); min-height: 1.4em; }
.fid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.fcard { border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: 14px; cursor: pointer; text-align: left; color: var(--text); display: grid; gap: 6px; }
.fcard b { font: 600 16px Poppins, sans-serif; color: var(--navy); } .fcard em { font-style: normal; font: 700 13px Poppins, sans-serif; color: var(--lens); }
.fcard .bar { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--lens) var(--w), var(--soft) var(--w)); }
.fcard.good { border-color: var(--ok); } .fcard.poor { border-color: var(--no); } .fcard.sel { box-shadow: inset 0 -3px 0 var(--amber); }
.stats2 { display: flex; gap: 28px; margin: 12px 0 2px; } .stats2 div { display: flex; flex-direction: column; } .stats2 strong { font: 700 34px Poppins, sans-serif; color: var(--navy); line-height: 1; } .stats2 span { font-size: 13px; }
.card.dark { background: linear-gradient(135deg, #0C2F52, #0C4F8E); border: 0; color: #D3E0EF; margin-top: 12px; } .card.dark h4 { color: #fff; }
.coach { margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: var(--soft); border: 1px dashed var(--lens); }
.coach-out { margin: 8px 0 0; white-space: pre-wrap; } .coach-out:empty { display: none; }
.totalbox { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 16px; } .totalbox strong { font: 700 64px Poppins, sans-serif; color: var(--navy); line-height: 1; } .totalbox span { font-size: 20px; } .totalbox em { margin-left: 12px; font: 600 18px Poppins, sans-serif; color: var(--lens); font-style: normal; }
.bars { display: grid; gap: 8px; margin-bottom: 18px; } .brow { display: grid; grid-template-columns: 110px 1fr 54px; gap: 10px; align-items: center; font-size: 14px; }
.bar2 { height: 10px; border-radius: 99px; background: var(--soft); overflow: hidden; } .bar2 i { display: block; height: 100%; background: linear-gradient(90deg, var(--lens), var(--amber)); }
.summary { white-space: pre-wrap; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; font: 13px/1.6 ui-monospace, Menlo, Consolas, monospace; color: var(--navy); margin: 8px 0 12px; }

footer { background: #07182b; color: #B8C7D9; text-align: center; padding: 32px 24px; font-size: 13px; }
footer a { color: var(--amber); text-decoration: none; } footer p { margin: 4px 0; }
.noscript { padding: 20px; text-align: center; }

@media (max-width: 900px) {
  .herogrid, .grid2, .cmp { grid-template-columns: 1fr; }
  .nav-toggle { display: block; }
  .links { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 12px 24px 18px; background: rgba(7,24,43,.98); flex-direction: column; align-items: flex-start; gap: 12px; }
  .links.open { display: flex; }
  .lang { margin-left: 0; }
  .crazy { grid-template-columns: repeat(2, 1fr); } .fid { grid-template-columns: 1fr; }
  .brow { grid-template-columns: 90px 1fr 48px; }
  .sec { padding: 52px 0; } .wrap { padding: 0 16px; } .navin { padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* fixes: button colours inside dark bands, spacing between stage blocks */
.band-dark a.btn-amber { color: #0C2F52; }
.band-dark a.btn-ghost, .band-dark .btn-ghost { color: #fff; }
.stage > .card, .stage > .answers, .stage > .cls, .stage > .fb { margin-top: 14px; }