/* ==========================================================================
   ClearWay product page.

   The product keeps its own identity (harbour and lane green) inside the
   ThaDigital site, the way a maker presents a product it is proud of.
   The application window is drawn light, as ClearWay itself is, in both themes.
   ========================================================================== */
:root{
  --cw-harbour:#0A3142; --cw-harbour-2:#0F5570; --cw-harbour-3:#1C88AB;
  --cw-lane:#19B394; --cw-lane-ink:#0B7C67;
  --cw-canvas:#F6F8FA; --cw-surface:#FFFFFF; --cw-border:#D6DEE5; --cw-ink:#0F1B25; --cw-muted:#697D8E;
}

/* ---- hero ----------------------------------------------------------------- */
.cw-hero{
  position:relative;overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(40px,6vw,72px));padding-bottom:clamp(48px,6vw,80px);
  background:
    radial-gradient(ellipse 70% 60% at 85% 0%,rgba(25,179,148,.16),transparent 62%),
    radial-gradient(ellipse 80% 70% at 0% 100%,rgba(28,136,171,.14),transparent 60%),
    linear-gradient(180deg,#0B2E3D 0%,#081F2A 100%);
  color:#EEF5F6;border-bottom:1px solid rgba(255,255,255,.08);
}
.cw-hero .crumbs,.cw-hero .crumbs a{color:#8FB2BE;}
.cw-lockup{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.cw-lockup img{height:34px;width:auto}
.cw-maker{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#8FB2BE;
  padding:5px 10px 5px 8px;border:1px solid rgba(255,255,255,.14);border-radius:999px}
.cw-maker img{height:15px;width:15px}
.cw-hero .eyebrow{color:var(--cw-lane)}
.cw-hero .eyebrow::before{background:var(--cw-lane)}
.cw-hero h1{font-size:clamp(2.2rem,5.4vw,3.9rem);line-height:1.02;letter-spacing:-.03em;color:#fff;max-width:15ch;text-wrap:balance}
.cw-hero h1 em{font-style:normal;color:var(--cw-lane)}
.cw-hero .lede{color:#B9CDD4;max-width:60ch;margin-top:20px}
.cw-hero .btn-row{margin-top:28px}
.btn-lane{background:var(--cw-lane);border-color:var(--cw-lane);color:#04241C;font-weight:600}
.btn-lane:hover{filter:brightness(1.08);color:#04241C}
.cw-hero .btn-ghost{border-color:rgba(255,255,255,.22);color:#E6F0F2}
.cw-hero .btn-ghost:hover{border-color:var(--cw-lane);color:#fff;background:rgba(25,179,148,.10)}
.cw-stage{margin-top:clamp(34px,5vw,56px)}
.cw-stage-cap{margin-top:14px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;color:#7FA3AF;text-align:center}

/* ---- the application window ----------------------------------------------- */
.cwx{position:relative;border-radius:14px;overflow:hidden;background:var(--cw-canvas);color:var(--cw-ink);
  font-family:var(--font-body);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 70px -20px rgba(0,0,0,.6);
  -webkit-font-smoothing:antialiased}
.cwx-chrome{display:flex;align-items:center;gap:10px;height:36px;padding:0 14px;background:var(--cw-harbour);color:#DCE9EE}
.cwx-chrome img{height:16px;width:auto}
.cwx-chrome .t{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.03em;color:#9FC0CB;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cwx-chrome .w{margin-left:auto;display:flex;gap:14px;color:#7FA3AF;font-size:.8rem;line-height:1}
.cwx-body{display:grid;grid-template-columns:50px minmax(0,1fr) 232px;min-height:500px}
.cwx-rail{background:var(--cw-harbour);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0}
.cwx-rail i{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:#7FA3AF;position:relative}
.cwx-rail i svg{width:17px;height:17px}
.cwx-rail i.on{color:#fff;background:rgba(255,255,255,.08)}
.cwx-rail i.on::before{content:"";position:absolute;left:-8px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--cw-lane)}
.cwx-main{min-width:0;display:flex;flex-direction:column;background:var(--cw-canvas)}
.cwx-head{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--cw-surface);border-bottom:1px solid var(--cw-border);flex-wrap:wrap}
.cwx-job b{font-family:var(--font-mono);font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.cwx-job .pill{margin-left:8px;font-size:.6rem;font-weight:600;padding:2px 7px;border-radius:5px;background:#EDF1F4;color:var(--cw-muted);vertical-align:2px}
.cwx-job span.imp{display:block;font-size:.72rem;color:var(--cw-muted);margin-top:2px}
.cwx-actions{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}
.cwx-b{font-family:var(--font-body);font-size:.7rem;font-weight:500;padding:6px 10px;border-radius:7px;border:1px solid var(--cw-border);background:#fff;color:var(--cw-ink);white-space:nowrap;transition:transform .15s,filter .15s,background-color .2s}
.cwx-b.pri{background:var(--cw-harbour);border-color:var(--cw-harbour);color:#fff}
.cwx-b.lane{background:var(--cw-lane-ink);border-color:var(--cw-lane-ink);color:#fff}
.cwx-b.hit{transform:translateY(1px);filter:brightness(1.15)}
.cwx-tabs{display:flex;gap:2px;padding:0 12px;background:#fff;border-bottom:1px solid var(--cw-border);overflow:hidden}
.cwx-tab{display:flex;align-items:center;gap:6px;padding:9px 9px 8px;font-size:.72rem;color:var(--cw-muted);border-bottom:2px solid transparent;white-space:nowrap}
.cwx-tab .ok{width:13px;height:13px;border-radius:50%;background:var(--cw-lane);color:#fff;display:grid;place-items:center;font-size:.5rem;transform:scale(0);transition:transform .35s}
.cwx-tab.done .ok{transform:scale(1)}
.cwx-tab.on{color:var(--cw-ink);font-weight:600;border-bottom-color:var(--cw-harbour-2)}
.cwx-pane{flex:1;padding:14px 16px;position:relative;min-width:0;animation:cwx-in .35s ease}
@keyframes cwx-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cwx-tool{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.cwx-tool .hint{font-size:.68rem;color:var(--cw-muted)}
.cwx-tool kbd{font-family:var(--font-mono);font-size:.62rem;border:1px solid var(--cw-border);border-radius:4px;padding:0 4px;background:#fff}
.cwx-file{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;padding:5px 9px;border-radius:7px;background:#E8F7F2;color:var(--cw-lane-ink);border:1px solid #BFE9DD;animation:cwx-in .3s ease}
.cwx-card{background:#fff;border:1px solid var(--cw-border);border-radius:10px;overflow:hidden}
.cwx-grid{width:100%;border-collapse:collapse;font-size:.72rem;font-variant-numeric:tabular-nums}
.cwx-grid th{font-size:.58rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cw-muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--cw-border);background:#FAFBFC;white-space:nowrap}
.cwx-grid td{padding:8px 10px;border-bottom:1px solid #EDF1F4;white-space:nowrap}
.cwx-grid tr:last-child td{border-bottom:0}
.cwx-grid .r{text-align:right}
.cwx-grid .m{font-family:var(--font-mono)}
.cwx-grid .muted{color:var(--cw-muted)}
.cwx-grid tr.in{animation:cwx-row .45s ease}
@keyframes cwx-row{from{background:#E8F7F2}to{background:transparent}}
.cwx-hs{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono)}
.cwx-hs .tick{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--cw-lane);color:var(--cw-lane);display:grid;place-items:center;font-size:.5rem;font-weight:700}
.cwx-hs .blank{display:inline-block;width:76px;height:11px;border-radius:3px;background:#EDF1F4}
.cwx-chip{font-size:.56rem;padding:1px 6px;border-radius:4px;background:#FFF4DE;color:#8A5E18;font-weight:600;margin-left:4px}
.cwx-totals{display:flex;gap:16px;justify-content:flex-end;flex-wrap:wrap;margin:10px 2px 0;font-family:var(--font-mono);font-size:.68rem;color:var(--cw-muted)}
.cwx-totals b{color:var(--cw-ink);font-weight:600}
.cwx-check{margin-top:12px;padding:10px 12px;display:flex;align-items:center;gap:10px;font-size:.72rem}
.cwx-check .lbl{font-weight:600}
.cwx-check .res{margin-left:auto;color:var(--cw-lane-ink);font-weight:600;opacity:0;transition:opacity .4s}
.cwx-check.ok .res{opacity:1}
.cwx-explain{position:absolute;z-index:6;width:min(380px,calc(100% - 32px));background:#0F1B25;color:#E6EEF2;border-radius:10px;padding:12px 14px;font-size:.7rem;line-height:1.55;
  box-shadow:0 14px 34px rgba(0,0,0,.35);animation:cwx-in .3s ease}
.cwx-explain b{color:#fff}
.cwx-explain .k{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cw-lane);margin-bottom:6px}
.cwx-explain .f{font-family:var(--font-mono);font-size:.66rem;color:#B9CDD4;margin-top:6px}
.cwx-explain .f em{font-style:normal;color:var(--cw-lane)}
.cwx-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cwx-doc{background:#fff;border:1px solid var(--cw-border);border-radius:10px;padding:11px 12px;font-size:.7rem;line-height:1.45;color:var(--cw-muted);transition:border-color .3s,background-color .3s}
.cwx-doc b{display:flex;align-items:center;gap:7px;font-size:.76rem;color:var(--cw-ink);margin-bottom:4px}
.cwx-doc .st{margin-left:auto;font-size:.56rem;font-weight:600;padding:2px 7px;border-radius:5px;background:#EDF1F4;color:var(--cw-muted)}
.cwx-doc.ready{border-color:#BFE9DD;background:#FBFEFD}
.cwx-doc.ready .st{background:#DDF4EC;color:var(--cw-lane-ink)}
.cwx-side{background:#fff;border-left:1px solid var(--cw-border);padding:14px 14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.cwx-side .k{font-size:.58rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cw-muted)}
.cwx-cv{font-family:var(--font-mono);font-size:1.25rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cwx-cv small{font-size:.6rem;color:var(--cw-muted);font-weight:500;margin-left:3px}
.cwx-taxes{display:flex;flex-direction:column;gap:4px;font-size:.7rem;font-variant-numeric:tabular-nums}
.cwx-taxes div{display:flex;justify-content:space-between}
.cwx-taxes span:last-child{font-family:var(--font-mono)}
.cwx-pay{border-radius:10px;padding:11px 12px;background:var(--cw-harbour);color:#fff}
.cwx-pay .k{color:#8FB2BE}
.cwx-pay .v{font-family:var(--font-mono);font-size:1.45rem;font-weight:600;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums}
.cwx-pay .p{font-size:.6rem;color:var(--cw-lane);margin-top:2px}
.cwx-checks{display:flex;flex-direction:column;gap:5px;font-size:.68rem;color:var(--cw-muted)}
.cwx-checks div{display:flex;align-items:center;gap:7px}
.cwx-checks i{width:13px;height:13px;border-radius:50%;border:1.5px solid #C7D2DB;flex:none;display:grid;place-items:center;font-style:normal;font-size:.5rem;color:transparent;transition:all .3s}
.cwx-checks div.ok{color:var(--cw-ink)}
.cwx-checks div.ok i{border-color:var(--cw-lane);background:var(--cw-lane);color:#fff}
.cwx-toast{position:absolute;right:16px;bottom:16px;z-index:7;display:flex;align-items:center;gap:10px;background:#0F1B25;color:#E6EEF2;border-radius:10px;padding:10px 14px;font-size:.72rem;
  box-shadow:0 14px 34px rgba(0,0,0,.35);animation:cwx-in .35s ease}
.cwx-toast i{width:20px;height:20px;border-radius:50%;background:var(--cw-lane);color:#04241C;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.66rem}
.cwx-toast b{color:#fff;font-family:var(--font-mono);font-weight:500}
.cwx .sw-cursor{transition:transform 1.05s cubic-bezier(.33,.02,.2,1)}
.cwx .sw-ring{border-color:var(--cw-lane)}

@media (max-width:900px){
  .cwx-body{grid-template-columns:44px minmax(0,1fr)}
  .cwx-side{grid-column:1 / -1;border-left:0;border-top:1px solid var(--cw-border);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;align-items:start}
  .cwx-side .cwx-taxes{display:none}
}
@media (max-width:620px){
  .cwx-body{grid-template-columns:minmax(0,1fr);min-height:0}
  .cwx-rail{display:none}
  .cwx-chrome .t{font-size:.6rem}
  .cwx-head{padding:10px 12px}
  .cwx-actions .opt{display:none}
  .cwx-tab{padding:8px 6px 7px;font-size:.64rem}
  .cwx-tab.opt{display:none}
  .cwx-pane{padding:12px 10px}
  .cwx-grid th,.cwx-grid td{padding:7px 6px}
  .cwx-grid .opt{display:none}
  .cwx-docs{grid-template-columns:minmax(0,1fr)}
  .cwx-pane{min-height:452px}
  .cwx-chip,.cwx-grid .vopt,.cwx-check .opt{display:none}
  .cwx-grid td.desc{white-space:normal;line-height:1.3}
  .cwx-doc p{display:none}
  .cwx-side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cwx-side .cwx-checks{grid-column:1 / -1}
}

/* ---- proof band ------------------------------------------------------------ */
.cw-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.cw-proof>div{padding:26px 22px 24px 0}
.cw-proof>div+div{padding-left:22px;border-left:1px solid var(--line-dark)}
.cw-proof .v{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.035em;line-height:1;color:var(--tx-on-dark)}
.cw-proof .v.lane{color:var(--cw-lane)}
.cw-proof .l{font-size:.86rem;line-height:1.5;color:var(--tx-on-dark-soft);margin-top:10px;max-width:28ch}
@media (max-width:860px){.cw-proof{grid-template-columns:repeat(2,minmax(0,1fr))}.cw-proof>div:nth-child(3){padding-left:0;border-left:0}.cw-proof>div:nth-child(n+3){border-top:1px solid var(--line-dark)}}
@media (max-width:480px){.cw-proof{grid-template-columns:minmax(0,1fr)}.cw-proof>div{padding-left:0!important;border-left:0!important}.cw-proof>div+div{border-top:1px solid var(--line-dark)}}

/* ---- headaches -------------------------------------------------------------- */
.cw-pains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:34px}
.cw-pain{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:20px 0;border-top:1px solid var(--line-dark)}
.cw-pain .q{font-family:var(--font-display);font-weight:600;font-size:1.08rem;letter-spacing:-.01em;color:var(--tx-on-dark)}
.cw-pain .a{font-size:.93rem;line-height:1.6;color:var(--tx-on-dark-soft);padding-left:18px;position:relative}
.cw-pain .a::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:2px;background:var(--cw-lane)}
@media (max-width:760px){.cw-pains{grid-template-columns:minmax(0,1fr)}}

/* ---- one job, four steps ------------------------------------------------------ */
.cw-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 30px;margin-top:38px}
.cw-step figure{margin:0}
.cw-shot{border-radius:12px;overflow:hidden;border:1px solid var(--line-dark-strong);background:#fff;box-shadow:var(--shadow-dark)}
.cw-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top left}
.cw-step figcaption{display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px;margin-top:16px}
.cw-step .n{font-family:var(--font-mono);font-size:.8rem;color:var(--cw-lane);padding-top:3px}
.cw-step h3{font-size:1.12rem;letter-spacing:-.012em;color:var(--tx-on-dark)}
.cw-step p{font-size:.92rem;line-height:1.6;color:var(--tx-on-dark-soft);margin-top:6px}
@media (max-width:760px){.cw-steps{grid-template-columns:minmax(0,1fr)}}

/* ---- papers ------------------------------------------------------------------- */
.cw-papers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:34px}
.cw-paper{padding:18px;border:1px solid var(--line-dark);border-radius:var(--r-lg);background:var(--ink-800)}
.cw-paper .c{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cw-lane)}
.cw-paper b{display:block;font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-.01em;margin-top:8px;color:var(--tx-on-dark)}
.cw-paper span{display:block;font-size:.84rem;line-height:1.55;color:var(--tx-on-dark-soft);margin-top:6px}
@media (max-width:980px){.cw-papers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cw-papers{grid-template-columns:minmax(0,1fr)}}

/* ---- rules and trust ----------------------------------------------------------- */
.cw-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 26px;margin-top:30px}
.cw-rule{padding-left:16px;border-left:2px solid rgba(25,179,148,.6)}
.cw-rule b{display:block;font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-.01em;color:var(--tx-on-dark)}
.cw-rule span{display:block;font-size:.88rem;line-height:1.58;color:var(--tx-on-dark-soft);margin-top:6px}
@media (max-width:900px){.cw-rules{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cw-rules{grid-template-columns:minmax(0,1fr)}}
.cw-who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:30px}
.cw-who>div{padding:20px;border-radius:var(--r-lg);border:1px solid var(--line-dark);background:var(--ink-800)}
.cw-who b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.04rem;color:var(--tx-on-dark)}
.cw-who span{display:block;font-size:.88rem;line-height:1.58;color:var(--tx-on-dark-soft);margin-top:8px}
@media (max-width:820px){.cw-who{grid-template-columns:minmax(0,1fr)}}
.cw-reads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.cw-read{display:block;overflow:hidden;border:1px solid var(--line-dark);border-radius:var(--r-lg);background:var(--ink-800);transition:border-color .18s var(--ease),transform .18s var(--ease)}
.cw-read:hover{border-color:rgba(25,179,148,.5);transform:translateY(-2px)}
.cw-read img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line-dark)}
.cw-read div{padding:18px 20px 20px}
.cw-read .k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cw-lane)}
.cw-read b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.08rem;line-height:1.3;color:var(--tx-on-dark);margin-top:8px}
@media (max-width:720px){.cw-reads{grid-template-columns:minmax(0,1fr)}}
.cw-cta{background:
    radial-gradient(ellipse 70% 90% at 10% 0%,rgba(25,179,148,.18),transparent 60%),
    linear-gradient(180deg,#0B2E3D,#081F2A);color:#EEF5F6;border-top:1px solid rgba(255,255,255,.08)}
.cw-cta h2{color:#fff}
.cw-cta .eyebrow{color:var(--cw-lane)}
.cw-cta .eyebrow::before{background:var(--cw-lane)}
.cw-cta .lede{color:#B9CDD4}
.cw-cta .btn-ghost{border-color:rgba(255,255,255,.22);color:#E6F0F2}
.cw-cta .faint{color:#7FA3AF}

/* the band that introduces ClearWay on other pages */
.cw-band{position:relative;overflow:hidden;
  background:radial-gradient(ellipse 60% 80% at 100% 0%,rgba(25,179,148,.16),transparent 60%),linear-gradient(180deg,#0B2E3D,#081F2A);
  color:#EEF5F6;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.cw-band-in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,64px);align-items:center}
.cw-band h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem);margin-top:6px;text-wrap:balance}
.cw-band h2 em{font-style:normal;color:var(--cw-lane)}
.cw-band .eyebrow{color:var(--cw-lane)}
.cw-band .eyebrow::before{background:var(--cw-lane)}
.cw-band p{color:#B9CDD4;margin-top:14px;line-height:1.65;max-width:52ch}
.cw-band ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:8px}
.cw-band li{font-size:.92rem;color:#D5E3E8;padding-left:20px;position:relative}
.cw-band li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:6px;border-left:2px solid var(--cw-lane);border-bottom:2px solid var(--cw-lane);transform:rotate(-45deg)}
.cw-band .btn-row{margin-top:24px}
.cw-band .btn-ghost{border-color:rgba(255,255,255,.22);color:#E6F0F2}
.cw-band-shot{border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 26px 60px -18px rgba(0,0,0,.6)}
.cw-band-shot img{display:block;width:100%;height:auto}
@media (max-width:860px){.cw-band-in{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){.cwx-pane,.cwx-grid tr.in,.cwx-file,.cwx-explain,.cwx-toast{animation:none}}