/* =========================================================
   SECOND LIFE TECHNOLOGY — DESIGN SYSTEM
   Palette: paper white / ink charcoal / reclaimed teal / circuit copper
   Type: Space Grotesk (display) · IBM Plex Sans (body) · IBM Plex Mono (data/spec)
   Signature motif: the PCB "trace line" — a right-angled circuit path used
   to connect lifecycle stages, section markers and progress states.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* Core palette */
  --paper:        #F5F6F3;
  --paper-dim:     #ECEDE9;
  --panel:        #FFFFFF;
  --ink:          #14181A;
  --ink-soft:     #454D4E;
  --ink-faint:    #7B8482;
  --line:         #DBDED8;
  --line-strong:  #C3C8C0;

  /* Accents */
  --trace:        #0E7C63;   /* reclaimed teal — circularity / primary action */
  --trace-dark:   #0A5C4A;
  --trace-tint:   #E4F1EC;
  --copper:       #C1662B;   /* community / donation warmth */
  --copper-tint:  #F7EAE0;
  --signal-red:   #B3462C;
  --signal-amber: #A9761C;

  /* Type */
  --f-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:    'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 18px;
  --maxw: 1180px;

  --shadow-1: 0 1px 2px rgba(20,24,26,0.06), 0 8px 24px -12px rgba(20,24,26,0.10);
  --shadow-2: 0 4px 16px rgba(20,24,26,0.08), 0 24px 48px -20px rgba(20,24,26,0.18);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.1;
  margin:0 0 0.5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.1rem,4.4vw,3.6rem); font-weight:700; letter-spacing:-0.02em;}
h2{font-size:clamp(1.6rem,2.8vw,2.35rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em; color:var(--ink-soft);}
a{color:var(--trace-dark); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0;}
li{list-style:none;}

:focus-visible{outline:2px solid var(--trace); outline-offset:3px; border-radius:4px;}

.mono{font-family:var(--f-mono); letter-spacing:0.01em;}
.eyebrow{
  font-family:var(--f-mono);
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--trace-dark);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  background:var(--trace);
  border-radius:1px;
  transform:rotate(45deg);
  flex:none;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 32px;}
section{padding:88px 0;}
@media (max-width:900px){
  .wrap,.wrap-narrow{padding:0 26px;}
}
@media (max-width:720px){
  section{padding:56px 0;}
  .wrap,.wrap-narrow{padding:0 22px;}
}
@media (max-width:420px){
  .wrap,.wrap-narrow{padding:0 18px;}
}

/* ---------- Full-bleed color bands (do NOT reuse .panel-tint/.panel-copper here — those are card components) ---------- */
.band{padding:64px 0;}
.band-teal{background:var(--trace-tint); border-top:1px solid #CFE6DD; border-bottom:1px solid #CFE6DD;}
.band-copper{background:var(--copper-tint); border-top:1px solid #ECD3BE; border-bottom:1px solid #ECD3BE;}
.band-dim{background:var(--paper-dim); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

.section-head{max-width:640px; margin-bottom:48px;}
.section-head p{font-size:1.05rem;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-body); font-weight:600; font-size:0.95rem;
  padding:13px 24px; min-height:48px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{background:var(--trace-dark); box-shadow:var(--shadow-1);}
.btn-accent{background:var(--trace); color:#fff;}
.btn-accent:hover{background:var(--trace-dark); box-shadow:var(--shadow-1);}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-outline:hover{border-color:var(--ink); background:var(--panel);}
.btn-ghost{background:transparent; color:var(--ink-soft); padding:13px 6px;}
.btn-ghost:hover{color:var(--ink);}
.btn-block{width:100%;}
.btn-lg{padding:16px 30px; font-size:1rem;}
.btn[disabled]{opacity:0.5; cursor:not-allowed;}

.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px;}

/* ---------- Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--trace);
  border-bottom:1px solid var(--trace-dark);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:74px; gap:24px;}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--f-display); font-weight:700; font-size:1.1rem; color:#fff;}
.brand:hover{text-decoration:none;}
.brand-mark{width:60px; height:60px; flex:none; color:#fff;}
.nav-links{display:flex; align-items:center; gap:2px; flex:1; justify-content:center;}
.nav-links a{
  font-size:0.92rem; font-weight:500; color:rgba(255,255,255,0.82); padding:10px 14px; border-radius:999px;
}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,0.14); text-decoration:none;}
.nav-links a.active{color:#fff; background:rgba(255,255,255,0.16); box-shadow:0 0 0 1px rgba(255,255,255,0.28) inset;}
.nav-cta{display:flex; align-items:center; gap:10px;}
.nav-cta .btn-ghost{color:rgba(255,255,255,0.82);}
.nav-cta .btn-ghost:hover{color:#fff;}
.site-header .btn-accent{background:#fff; color:var(--trace-dark);}
.site-header .btn-accent:hover{background:#F0F5F2; box-shadow:var(--shadow-1);}
.nav-toggle{display:none; background:none; border:1px solid rgba(255,255,255,0.5); color:#fff; border-radius:8px; width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer;}
@media (max-width:980px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .nav-cta .btn-ghost{display:none;}
}
.mobile-menu{display:none; border-top:1px solid var(--line); background:var(--panel);}
.mobile-menu.open{display:block;}
.mobile-menu a{display:block; padding:14px 0; border-bottom:1px solid var(--line); font-weight:500; color:var(--ink);}
.mobile-menu .wrap{padding-top:6px;padding-bottom:6px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:#DDE3E0; padding:64px 0 28px; margin-top:60px;}
.site-footer a{color:#DDE3E0;}
.site-footer a:hover{color:#fff;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.12);}
.footer-grid h4{color:#fff; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; font-family:var(--f-mono); font-weight:500; margin-bottom:16px;}
.footer-grid li{margin-bottom:10px; font-size:0.92rem;}
.footer-grid p{color:#AEB6B2; font-size:0.92rem;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:24px; flex-wrap:wrap; gap:12px; font-size:0.82rem; color:#8D9793;}
.footer-bottom a{color:#8D9793;}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:32px;}}

/* ---------- Statement band (bold intro quote, with background image placeholder) ---------- */
.statement-band{position:relative; padding:84px 0 68px; text-align:center; overflow:hidden; isolation:isolate;}
.statement-band .scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(9,22,19,0.62), rgba(9,22,19,0.78));}
.statement-band .wrap{position:relative; z-index:2;}
.statement-line1{font-family:var(--f-display); font-weight:600; font-size:clamp(1.1rem,2.3vw,1.5rem); line-height:1.35; color:#fff; margin:0 auto; max-width:820px;}
.statement-line1 .stmt-row{display:block;}
.statement-line2{font-family:var(--f-display); font-weight:700; font-size:clamp(1.3rem,2.8vw,2rem); line-height:1.3; color:#fff; margin:18px 0 0;}
.stat-highlight{background:var(--trace); color:#fff; padding:8px 22px; border-radius:12px; display:inline-block; white-space:nowrap; font-family:var(--f-display); font-weight:700; font-size:clamp(2.1rem,5.8vw,3.6rem); margin:10px 0;}
.stat-highlight-sm{background:var(--trace); color:#fff; padding:1px 8px; border-radius:5px; display:inline; font-weight:600; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
@media (max-width:600px){
  .statement-band{padding:56px 0 44px;}
  .stat-highlight{white-space:normal;}
}

/* ---------- Media placeholders (swap for real <img> once assets are ready) ---------- */
.media-placeholder{position:relative; width:100%; border-radius:var(--radius-m); overflow:hidden; background:repeating-linear-gradient(135deg, var(--paper-dim) 0 14px, var(--panel) 14px 28px); border:1.5px dashed var(--line-strong);}
.media-placeholder.ratio-21-9{aspect-ratio:21/9;}
.media-placeholder.ratio-16-9{aspect-ratio:16/9;}
.media-placeholder.ratio-4-3{aspect-ratio:4/3;}
.media-placeholder.ratio-1-1{aspect-ratio:1/1;}
.media-placeholder.ratio-3-4{aspect-ratio:3/4;}
.media-placeholder-inner{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:16px; color:var(--ink-faint);}
.media-placeholder-inner svg{color:var(--line-strong);}
.media-kind{font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint);}
.media-label{font-size:0.85rem; font-weight:600; color:var(--ink-soft); max-width:260px;}
.media-note{font-family:var(--f-mono); font-size:0.72rem; color:var(--ink-faint); max-width:260px;}
.media-placeholder-dark{background:repeating-linear-gradient(135deg, #1B2224 0 14px, #222B2D 14px 28px); border-color:rgba(255,255,255,0.28);}
.media-placeholder-dark .media-placeholder-inner{color:#AEB6B2;}
.media-placeholder-dark .media-placeholder-inner svg{color:rgba(255,255,255,0.35);}
.media-placeholder-dark .media-kind{color:#8FDDC3;}
.media-placeholder-dark .media-label{color:#fff;}

/* Full-bleed background placeholder for a section (e.g. statement band) */
.bg-media-placeholder{position:absolute; inset:0; z-index:0; background:repeating-linear-gradient(135deg, #123A32 0 16px, #0F2E28 16px 32px);}
.bg-media-placeholder .media-tag{position:absolute; top:16px; left:16px; display:inline-flex; align-items:center; gap:6px; background:rgba(0,0,0,0.35); color:#fff; font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; padding:6px 10px; border-radius:6px;}
.bg-media-placeholder .media-tag svg{width:13px; height:13px; flex:none;}

/* ---------- Real image frames (once assets are wired in) ---------- */
.media-frame{position:relative; width:100%; border-radius:var(--radius-m); overflow:hidden;}
.media-frame.ratio-21-9{aspect-ratio:21/9;}
.media-frame.ratio-16-9{aspect-ratio:16/9;}
.media-frame.ratio-4-3{aspect-ratio:4/3;}
.media-frame.ratio-1-1{aspect-ratio:1/1;}
.media-frame.ratio-3-4{aspect-ratio:3/4;}
.media-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.bg-media-image{position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;}
.article-thumb{border-radius:var(--radius-m); overflow:hidden; aspect-ratio:16/9; margin-bottom:14px;}
.article-thumb img{width:100%; height:100%; object-fit:cover; display:block;}

.hero{padding:76px 0 40px; position:relative; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;}
.hero h1{margin-bottom:20px;}
.hero-lede{font-size:1.2rem; color:var(--ink-soft); max-width:520px;}
.hero-sub{font-size:0.98rem; color:var(--ink-faint); margin-top:8px;}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr; gap:36px;}}

/* ---------- Trace / lifecycle spine ---------- */
.trace-flow{position:relative;}
.trace-steps{display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative;}
.trace-line{position:absolute; top:23px; left:6%; right:6%; height:2px; background:repeating-linear-gradient(90deg,var(--line-strong) 0 8px, transparent 8px 14px); z-index:0;}
.trace-step{position:relative; z-index:1; padding:0 14px; text-align:left;}
.trace-node{width:46px; height:46px; border-radius:var(--radius-s); background:var(--panel); border:2px solid var(--trace); color:var(--trace-dark); display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:var(--shadow-1);}
.trace-node svg{width:22px; height:22px;}
.trace-step .step-num{font-family:var(--f-mono); font-size:0.72rem; color:var(--ink-faint); letter-spacing:0.08em; display:block; margin-bottom:4px;}
.trace-step h3{font-size:1.02rem; margin-bottom:6px;}
.trace-step p{font-size:0.9rem;}
@media (max-width:900px){
  .trace-steps{grid-template-columns:1fr; gap:26px;}
  .trace-line{display:none;}
  .trace-step{padding-left:64px; padding-right:0; min-height:46px;}
  .trace-node{position:absolute; left:0; top:0;}
}

/* ---------- Cards ---------- */
.grid{display:grid; gap:20px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m); padding:28px; transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease;}
.card:hover{box-shadow:var(--shadow-1); border-color:var(--line-strong);}
.card h3{margin-bottom:8px;}
.card p{font-size:0.93rem; margin-bottom:0;}

.device-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m); padding:24px; text-align:left; display:flex; flex-direction:column; gap:8px;}
.device-card .tag{font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint);}
.device-card h3{font-size:1.02rem; margin-bottom:0;}
.device-card a{font-size:0.86rem; font-weight:600;}

.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-l); padding:34px;}
.panel-tint{background:var(--trace-tint); border:1px solid #CFE6DD; border-radius:var(--radius-l); padding:34px;}
.panel-copper{background:var(--copper-tint); border:1px solid #ECD3BE; border-radius:var(--radius-l); padding:34px;}

/* ---------- Icon badges ---------- */
.icon-badge{width:44px; height:44px; border-radius:var(--radius-s); background:var(--trace-tint); color:var(--trace-dark); display:flex; align-items:center; justify-content:center; margin-bottom:14px; flex:none;}
.icon-badge svg{width:22px; height:22px;}
.icon-badge-copper{background:var(--copper-tint); color:#8A4A17;}
.icon-badge-ink{background:#1B2224; color:#8FDDC3;}
.icon-badge-sm{width:36px; height:36px; margin-bottom:0;}
.icon-badge-sm svg{width:18px; height:18px;}
.icon-row{display:flex; gap:14px; align-items:center;}
.icon-row .icon-badge{margin-bottom:0;}

/* ---------- Split section ---------- */
.split-inner{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media (max-width:900px){.split-inner{grid-template-columns:1fr; gap:32px;}}
.split-reverse .split-media{order:2;}
.checklist li{display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; font-size:0.96rem; color:var(--ink-soft);}
.checklist li::before{content:"";flex:none; width:8px; height:8px; margin-top:6px; background:var(--trace); border-radius:2px; transform:rotate(45deg);}

/* ---------- Spec panel (device / data mockup) ---------- */
.spec-panel{background:var(--ink); color:#E7EBE9; border-radius:var(--radius-l); padding:28px; font-family:var(--f-mono); font-size:0.85rem;}
.spec-panel .spec-title{color:#8FDDC3; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:16px;}
.spec-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.09);}
.spec-row span:first-child{color:#98A19D;}
.spec-row:last-child{border-bottom:none;}
.spec-panel-sm{background:var(--ink); color:#E7EBE9; border-radius:var(--radius-m); padding:18px 20px; font-family:var(--f-mono); font-size:0.78rem;}
.spec-panel-sm .spec-row{padding:6px 0;}

/* ---------- Process stage strip (at-a-glance overview) ---------- */
.stage-strip{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.stage-chip{display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:7px 14px 7px 8px; font-size:0.82rem; font-weight:600; color:var(--ink-soft);}
.stage-chip .chip-icon{width:26px; height:26px; border-radius:50%; background:var(--trace-tint); color:var(--trace-dark); display:flex; align-items:center; justify-content:center; flex:none;}
.stage-chip .chip-icon svg{width:14px; height:14px;}

/* ---------- Process stage rows (detailed) ---------- */
.stage-row{display:flex; gap:20px; padding:28px 0; border-bottom:1px solid var(--line);}
.stage-row:first-child{padding-top:0;}
.stage-row:last-child{border-bottom:none; padding-bottom:0;}
.stage-row .stage-num-icon{flex:none; width:48px; height:48px; border-radius:var(--radius-s); background:var(--panel); border:2px solid var(--trace); color:var(--trace-dark); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-1);}
.stage-row .stage-num-icon svg{width:22px; height:22px;}
.stage-row .stage-num{font-family:var(--f-mono); font-size:0.7rem; color:var(--ink-faint); letter-spacing:0.08em; display:block; margin-bottom:4px;}
.stage-row .stage-body{flex:1; min-width:0;}

/* ---------- Outcome flow (verification pass/fail, disposition) ---------- */
.flow-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.flow-pill{font-family:var(--f-mono); font-size:0.78rem; font-weight:600; padding:8px 16px; border-radius:999px; white-space:nowrap;}
.flow-pill.pass{background:var(--trace-tint); color:var(--trace-dark); border:1px solid #CFE6DD;}
.flow-pill.alt{background:#F2E4E0; color:var(--signal-red); border:1px solid #E4C4BA;}
.flow-arrow{color:var(--ink-faint); font-family:var(--f-mono);}

/* ---------- Responsive table wrapper ---------- */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--radius-m);}
.table-scroll table.compare{margin:0; min-width:560px;}
.table-scroll table.compare th,.table-scroll table.compare td{padding:12px 16px;}

/* ---------- Stat blocks ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat{border:1px solid var(--line); border-radius:var(--radius-m); padding:24px; background:var(--panel);}
.stat .num{font-family:var(--f-display); font-weight:700; font-size:2.2rem; color:var(--trace-dark); display:block;}
.stat .lbl{font-size:0.85rem; color:var(--ink-faint);}
.stat-note{font-size:0.82rem; color:var(--ink-faint); margin-top:16px;}

/* ---------- Forms ---------- */
.form-shell{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-l); padding:36px; box-shadow:var(--shadow-2);}
@media (max-width:600px){.form-shell{padding:22px;}}

fieldset{border:0; margin:0 0 20px; padding:0;}
fieldset legend{display:block; width:100%; font-size:0.85rem; font-weight:600; margin-bottom:10px; color:var(--ink); padding:0;}

.field{margin-bottom:20px;}
.field label{display:block; font-size:0.85rem; font-weight:600; margin-bottom:8px; color:var(--ink);}
.field .hint{font-size:0.8rem; color:var(--ink-faint); margin-top:6px;}
.required-mark{color:var(--signal-red); margin-left:2px; font-weight:700;}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field select,
.field textarea{
  width:100%; font-family:var(--f-body); font-size:1rem; padding:13px 14px;
  border:1px solid var(--line-strong); border-radius:var(--radius-s); background:#fff; color:var(--ink);
  min-height:48px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{resize:vertical; min-height:110px;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--trace); box-shadow:0 0 0 3px var(--trace-tint); outline:none;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--signal-red);}
.field .error{display:none; font-size:0.82rem; color:var(--signal-red); margin-top:6px; font-weight:500;}
.field.invalid .error{display:flex; align-items:center; gap:6px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:600px){.field-row{grid-template-columns:1fr;}}

.choice-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.choice-grid.invalid .choice-face,
.field.invalid .choice-face{border-color:var(--signal-red);}
@media (max-width:700px){.choice-grid{grid-template-columns:repeat(2,1fr);}}
.choice{position:relative;}
.choice input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.choice .choice-face{display:flex; align-items:center; justify-content:center; text-align:center; gap:6px; border:1.5px solid var(--line-strong); border-radius:var(--radius-s); padding:14px 10px; font-size:0.9rem; font-weight:500; height:100%; min-height:50px; transition:border-color .15s ease, background .15s ease;}
.choice input:checked + .choice-face{border-color:var(--trace); background:var(--trace-tint); color:var(--trace-dark); font-weight:600;}
.choice input:focus-visible + .choice-face{outline:2px solid var(--trace); outline-offset:2px;}

.upload-box{border:1.5px dashed var(--line-strong); border-radius:var(--radius-m); padding:28px; text-align:center; color:var(--ink-faint); font-size:0.9rem; cursor:pointer; background:var(--paper-dim); display:flex; flex-direction:column; align-items:center; gap:8px;}
.upload-box:hover,.upload-box:focus-within{border-color:var(--trace); background:var(--trace-tint); color:var(--trace-dark);}
.upload-box svg{width:24px; height:24px;}

/* ---------- Repeatable item lists (multi-device / multi-package) ---------- */
.item-list{margin:16px 0 6px; display:flex; flex-direction:column; gap:10px;}
.item-row{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-s); background:var(--paper-dim);}
.item-row-icon{flex:none; width:36px; height:36px; border-radius:8px; background:var(--panel); display:flex; align-items:center; justify-content:center; color:var(--trace-dark); border:1px solid var(--line);}
.item-row-icon svg{width:18px; height:18px;}
.item-row-info{flex:1; min-width:0;}
.item-row-info strong{display:block; font-size:0.92rem; color:var(--ink);}
.item-row-info span{font-size:0.8rem; color:var(--ink-faint);}
.item-row-badge{flex:none; font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.04em; text-transform:uppercase; padding:5px 10px; border-radius:99px; font-weight:600; white-space:nowrap;}
.item-row-badge.good{background:var(--trace-tint); color:var(--trace-dark);}
.item-row-badge.mid{background:var(--copper-tint); color:#8A4A17;}
.item-row-badge.low{background:#F2E4E0; color:var(--signal-red);}
.item-row-remove{flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--line-strong); background:#fff; color:var(--ink-faint); font-size:1.1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;}
.item-row-remove:hover{background:var(--panel); color:var(--signal-red); border-color:var(--signal-red);}
.empty-hint{font-size:0.85rem; color:var(--ink-faint); padding:16px; text-align:center; border:1.5px dashed var(--line-strong); border-radius:var(--radius-s); margin:16px 0 6px;}
.add-item-row{display:flex; justify-content:flex-end; margin-top:4px;}
.mini-form-panel{border:1px solid var(--line); border-radius:var(--radius-m); padding:22px; background:var(--panel); margin-top:20px;}
.mini-form-panel h3{font-size:0.95rem; margin-bottom:16px;}
.step-note{font-size:0.85rem; color:var(--ink-faint); background:var(--paper-dim); border-radius:var(--radius-s); padding:12px 14px; margin-top:16px;}

.progress-track{display:flex; gap:8px; margin-bottom:32px;}
.progress-track .seg{height:4px; flex:1; background:var(--line); border-radius:99px; overflow:hidden;}
.progress-track .seg span{display:block; height:100%; width:0; background:var(--trace); transition:width .3s ease;}
.progress-track .seg.done span{width:100%;}
.progress-track .seg.active span{width:55%;}
.step-label{font-family:var(--f-mono); font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px;}

.form-step{display:none;}
.form-step.active{display:block;}
.form-nav{display:flex; justify-content:space-between; margin-top:28px; gap:12px;}

.result-banner{border-radius:var(--radius-m); padding:20px 22px; font-size:0.95rem; display:flex; gap:14px; align-items:flex-start; margin-top:18px;}
.result-banner.good{background:var(--trace-tint); border:1px solid #CFE6DD; color:var(--trace-dark);}
.result-banner.mid{background:var(--copper-tint); border:1px solid #ECD3BE; color:#8A4A17;}
.result-banner.low{background:#F2E4E0; border:1px solid #E4C4BA; color:var(--signal-red);}
.result-banner .icon{flex:none; font-family:var(--f-mono); font-weight:700;}

.confirm{text-align:center; padding:40px 20px;}
.confirm .ref{font-family:var(--f-mono); background:var(--paper-dim); display:inline-block; padding:8px 16px; border-radius:8px; margin:14px 0 24px; font-size:0.95rem;}

/* ---------- Status tracker ---------- */
.status-track{position:relative; display:flex; flex-wrap:nowrap; gap:2px; padding-top:2px;}
.status-track .track-line{position:absolute; top:9px; left:10%; right:10%; height:2px; background:var(--line); z-index:0;}
.status-track .track-line-progress{position:absolute; top:9px; left:10%; height:2px; background:var(--trace); z-index:0;}
.status-step{flex:1 1 0; min-width:0; text-align:center; padding:18px 2px 0; position:relative; z-index:1;}
.status-dot{width:14px; height:14px; border-radius:50%; background:var(--panel); border:2px solid var(--line-strong); margin:0 auto 10px; position:relative; z-index:1; flex:none;}
.status-step.done .status-dot{background:var(--trace); border-color:var(--trace);}
.status-step.current .status-dot{border-color:var(--trace); box-shadow:0 0 0 4px var(--trace-tint);}
.status-step .lbl{font-size:0.76rem; color:var(--ink-faint); line-height:1.25; word-break:break-word; overflow-wrap:break-word;}
.status-step.done .lbl,.status-step.current .lbl{color:var(--ink); font-weight:600;}
@media (max-width:480px){
  .status-step .lbl{font-size:0.66rem;}
  .status-dot{width:11px; height:11px;}
  .status-track .track-line,.status-track .track-line-progress{top:7.5px;}
}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; padding:20px 0; font-family:var(--f-display); font-weight:600; font-size:1.02rem; display:flex; justify-content:space-between; align-items:center; cursor:pointer; color:var(--ink);}
.faq-q .plus{font-family:var(--f-mono); font-size:1.2rem; color:var(--trace); transition:transform .2s ease;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding-bottom:20px; margin:0;}
.faq-item.open .faq-a{max-height:400px;}

/* ---------- Timeline (impact / process) ---------- */
.cycle{display:flex; flex-direction:column; align-items:center; gap:0; max-width:340px; margin:0 auto;}
.cycle-node{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-m); padding:14px 22px; font-weight:600; font-size:0.95rem; width:100%; text-align:center;}
.cycle-arrow{font-family:var(--f-mono); color:var(--trace); padding:6px 0; font-size:1rem;}

/* ---------- Table ---------- */
table.compare{width:100%; border-collapse:collapse; font-size:0.92rem;}
table.compare th,table.compare td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line);}
table.compare th{font-family:var(--f-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:500;}

/* ---------- Article ---------- */
.article-head{max-width:760px; margin:0 auto 40px;}
.article-meta{font-family:var(--f-mono); font-size:0.78rem; color:var(--ink-faint); margin-bottom:14px; text-transform:uppercase; letter-spacing:0.06em;}
.article-body{max-width:720px; margin:0 auto;}
.article-body h2{margin-top:2em;}
.article-body p{font-size:1.02rem;}
.toc{background:var(--paper-dim); border-radius:var(--radius-m); padding:22px 26px; margin:0 auto 40px; max-width:720px;}
.toc h4{font-family:var(--f-mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-faint); margin-bottom:12px;}
.toc li{margin-bottom:8px; font-size:0.92rem;}

/* ---------- Utility ---------- */
.bg-panel{background:var(--panel);}
.bg-dim{background:var(--paper-dim);}
.bg-ink{background:var(--ink); color:#fff;}
.bg-ink h2,.bg-ink h3{color:#fff;}
.bg-ink p{color:#B9C1BD;}
.center{text-align:center;}
.mt-0{margin-top:0;}
.small{font-size:0.85rem; color:var(--ink-faint);}
.divider{height:1px; background:var(--line); border:none; margin:48px 0;}
.badge{display:inline-block; font-family:var(--f-mono); font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; padding:4px 10px; border-radius:99px; background:var(--trace-tint); color:var(--trace-dark); font-weight:600;}
.badge-copper{background:var(--copper-tint); color:#8A4A17;}
.skip-link{position:absolute; left:-999px; top:auto; background:var(--ink); color:#fff; padding:10px 16px; border-radius:6px; z-index:100;}
.skip-link:focus{left:16px; top:16px;}