/* AegisLoader — landing page. Built on aegis.css tokens. */

body.landing { font-size: 16px; background: var(--bg); }
.landing main { position: relative; z-index: 1; }
.landing section { position: relative; }

/* --- type scale for marketing --- */
.l-h1 {
  font-family: var(--f-display); font-weight: 600; letter-spacing: -.025em;
  font-size: clamp(40px, 3.1vw + 14px, 62px); line-height: .98; margin: 18px 0 0;
}
.l-h1 .line { display: block; }
.l-h2 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.02em; font-size: clamp(30px, 2.4vw + 14px, 48px); line-height: 1.02; margin: 14px 0 0; }
.l-sub { color: var(--ink-2); font-size: 18px; line-height: 1.55; max-width: 46ch; margin-top: 22px; }
.l-p { color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 58ch; }
.sec { padding: clamp(72px, 9vw, 128px) 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px 64px; align-items: end; margin-bottom: 48px; }
.sec-head .l-p { justify-self: start; padding-bottom: 6px; }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; margin-bottom: 36px; } }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { padding: clamp(36px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; align-items: center; }
.hero-copy { position: relative; z-index: 2; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.trust {
  margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 12px/1.4 var(--f-mono); color: var(--ink-3); letter-spacing: .02em;
}
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.trust span::before { content: ""; width: 6px; height: 6px; background: var(--cyan); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); flex: none; }
@media (max-width: 1080px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 44px; }
  .l-sub { max-width: 56ch; }
}

/* ---- THE SEAL ---- */
.seal { position: relative; --stage-pad: 22px; }
.seal-frame {
  --c: 26px; --f-fill: #070b12; --f-border: var(--line-2);
  padding: var(--stage-pad); padding-top: 14px;
}
.seal-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.phases { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); flex-wrap: wrap; }
.phases li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid transparent; transition: color .3s, border-color .3s, background .3s; }
.phases li b { font-weight: 600; color: inherit; }
.phases li + li::before { content: ""; width: 14px; height: 1px; background: var(--line-3); margin-right: 8px; }
.phases li.on { color: var(--ink); border-color: var(--line-2); background: var(--surface); }
.phases li.done { color: var(--ink-3); }
.replay { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line-2); background: none; color: var(--ink-3); font: 500 11.5px/1 var(--f-mono); letter-spacing: .04em; }
.replay:hover { color: var(--ink); border-color: var(--line-3); }
.replay svg.i { width: 14px; height: 14px; }

.seal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 210px; grid-template-areas: "src shield" "out out"; gap: 18px 18px; align-items: center; }
.src { grid-area: src; }
.shield-wrap { grid-area: shield; position: relative; display: grid; justify-items: center; gap: 10px; }
.out { grid-area: out; }

/* source card */
.src-card { --c: 14px; --f-fill: var(--bg-sunk); --f-border: var(--line-2); min-width: 0; transform-origin: 50% 50%; }
.src-head, .out-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--line); font: 500 11.5px/1.2 var(--f-mono); color: var(--ink-3);
}
.src-head .fn, .out-head .fn { color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-head .dots { display: inline-flex; gap: 5px; }
.src-head .dots i { width: 7px; height: 7px; background: var(--line-3); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.src-meta { white-space: nowrap; transition: color .3s; }
.src-meta.prot { color: var(--accent-ink); }
.src-code {
  margin: 0; padding: 12px 14px 14px; font: 400 12.5px/1.62 var(--f-mono); color: var(--ink); white-space: pre; overflow: hidden;
  height: 272px; transition: font-size .55s var(--ease), line-height .55s var(--ease), color .4s, letter-spacing .55s;
}
.src-code .ln { display: block; overflow: hidden; text-overflow: clip; }
.src-code.dense { font-size: 9.5px; line-height: 1.32; letter-spacing: -.02em; color: var(--ink-3); }
.src-code.dense .hx { color: var(--accent-ink); opacity: .85; }
.src-card.ghost { opacity: .55; }
.src-card.ghost .src-code { filter: saturate(.6); }

/* the shield */
.shield-svg { width: 100%; max-width: 190px; height: auto; overflow: visible; position: relative; z-index: 1; }
.shield-svg .seg { transition: transform .7s var(--ease), fill-opacity .6s ease, stroke-opacity .6s ease; transform-box: view-box; }
.shield-svg .seg { fill-opacity: 1; stroke: #9ff3ff; stroke-opacity: .55; stroke-width: .8; }
.shield-svg.open .seg { transform: translate(var(--dx), var(--dy)); fill-opacity: .06; stroke: var(--line-3); stroke-opacity: 1; }
.shield-svg .core { transition: fill-opacity .6s ease .15s, transform .7s var(--ease); fill-opacity: 1; }
.shield-svg.open .core { fill-opacity: .05; }
.shield-svg .core-edge { fill: none; stroke: #9ff3ff; stroke-opacity: .5; stroke-width: .8; transition: stroke-opacity .5s; }
.shield-svg.open .core-edge { stroke: var(--line-3); stroke-opacity: 1; }
.shield-svg .arrow-cut { transition: transform .6s cubic-bezier(.3, 1.4, .5, 1) .2s; }
.shield-svg.open .arrow-cut { transform: translateY(-26px); }
.shield-svg .sweep { opacity: 0; }
.shield-svg.sweeping .sweep { animation: sweep 1s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes sweep { 0% { opacity: 1; transform: translate(-240px, -120px); } 100% { opacity: 1; transform: translate(240px, 120px); } }
.shield-svg.intake .seg { animation: intake .5s ease-in-out 2 alternate; }
@keyframes intake { to { stroke-opacity: 1; stroke: var(--cyan); } }
.glow {
  position: absolute; inset: -30% -40%; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(39, 229, 255, .20), rgba(46, 155, 255, .08) 55%, transparent 75%);
  transition: opacity 1s ease;
}
.shield-wrap.sealed .glow { opacity: 1; }
.shield-cap { font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); text-align: center; transition: color .4s; position: relative; z-index: 1; min-height: 14px; }
.shield-wrap.sealed .shield-cap { color: var(--accent-ink); }

/* loader card */
.out-card { --c: 14px; --f-fill: var(--surface); --f-border: var(--accent-line); min-width: 0; }
.out-head .live { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); }
.out-head .live::before { content: ""; width: 6px; height: 6px; background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
/* GRID (not flex): a minmax(0,1fr) line track is guaranteed to shrink + an auto button track that can never be
   pushed out of the card — container-type on a flex:1 child could stop it shrinking and shove the button past
   the edge. The line track IS the container, so the font sizes to the real text width (button excluded). */
.out-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; }
.out-line-fit { min-width: 0; container-type: inline-size; overflow: hidden; }
.out-line { font-family: var(--f-mono); font-weight: 500; line-height: 1.6; color: var(--ink);
  font-size: clamp(8px, 2cqi, 12.5px); white-space: nowrap; min-height: 1.6em; display: block; padding-right: 2px; }
@container (max-width: 340px) { .out-line { white-space: normal; word-break: break-all; font-size: 11px; } }
.out { position: relative; }
.out::before { content: ""; position: absolute; inset: 0; border: 1px dashed var(--line-2); opacity: 0; transition: opacity .3s; pointer-events: none; }
.out:has(.out-card.pre)::before { opacity: 1; }
.out::after { content: "loader line appears here"; position: absolute; inset: 0; display: grid; place-items: center; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); opacity: 0; pointer-events: none; transition: opacity .3s; }
.out:has(.out-card.pre)::after { opacity: 1; }
.out-line .caret { display: inline-block; width: 8px; height: 1.1em; vertical-align: -3px; background: var(--cyan); margin-left: 1px; animation: blink 1s steps(1) infinite; }
.out-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--line); font: 400 11.5px/1.4 var(--f-mono); color: var(--ink-3); }
.out-foot .ver { color: var(--ink-2); }
.out-foot .ver b { color: var(--ink); font-weight: 500; transition: color .3s; }
.out-foot .ver b.bump { color: var(--cyan); }
.out-foot .same { color: var(--ok); opacity: 0; transition: opacity .4s; }
.out-foot .same.show { opacity: 1; }
.out-card.pre { opacity: 0; }

@media (max-width: 640px) {
  .seal { --stage-pad: 14px; }
  .seal-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "src" "shield" "out"; gap: 14px; }
  .shield-svg { max-width: 132px; }
  .src-code { min-height: 0; font-size: 11.5px; }
  .src-code.dense { font-size: 8.5px; }
  .out-body { flex-direction: column; align-items: stretch; }
  .out-body .btn { width: 100%; }
}

/* =========================================================================
   BENTO — what you get
   ========================================================================= */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "a a a b b b" "a a a c c c" "d d d d d d"; gap: 14px; }
.tile { --c: 18px; padding: 26px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tile h3 { font-size: 21px; letter-spacing: -.01em; line-height: 1.15; }
.tile p { color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 52ch; }
.tile .t-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--cyan); border: 1px solid var(--line-2); background: var(--bg-sunk); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.tile .t-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linejoin: miter; }
.tile-a { grid-area: a; }
.tile-b { grid-area: b; }
.tile-c { grid-area: c; }
.tile-d { grid-area: d; flex-direction: row; align-items: center; gap: 36px; }
.tile-d .td-copy { flex: 0 1 420px; display: grid; gap: 12px; }
.tile-d .td-vis { flex: 1; min-width: 0; }
@media (max-width: 980px) {
  .bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a a" "b c" "d d"; }
  .tile-d { flex-direction: column; align-items: stretch; }
  .tile-d .td-copy { flex: none; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "b" "c" "d"; }
  .tile { padding: 20px; }
}

/* builds visual */
.builds { margin-top: auto; display: grid; gap: 8px; padding-top: 12px; }
.build-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--bg-sunk); border: 1px solid var(--line); font: 400 12px/1.3 var(--f-mono); color: var(--ink-3); }
.build-row .who { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.build-row .bytes { white-space: nowrap; overflow: hidden; text-overflow: clip; color: var(--ink-4); letter-spacing: -.02em; }
.build-row .bytes b { color: var(--accent-ink); font-weight: 500; }
.build-row .hash { color: var(--ink); }
.builds .src-row { display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.builds .b-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); margin-top: 6px; }
.builds .b-foot > div { padding: 12px 14px; display: grid; gap: 2px; }
.builds .b-foot > div + div { border-left: 1px solid var(--line); }
.builds .b-foot b { font: 500 20px/1.1 var(--f-mono); color: var(--ink); }
.builds .b-foot span { font: 400 11px/1.3 var(--f-mono); color: var(--ink-3); }
.builds .src-row::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-3), transparent); }
@media (max-width: 420px) { .build-row { grid-template-columns: minmax(0, 1fr) auto; } .build-row .bytes { display: none; } }

/* money visual */
.money { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.money > div { padding: 12px; background: var(--bg-sunk); border: 1px solid var(--line); display: grid; gap: 4px; }
.money .k { font: 500 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.money .v { font: 500 20px/1.2 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.money .s { font: 400 11.5px/1.3 var(--f-mono); color: var(--ink-3); }

/* branded unlock visual */
.unlock-mock { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.um-win { border: 1px solid #3a2f5a00; background: #0e1420; padding: 0; box-shadow: 0 0 0 1px var(--line-2); min-width: 0; }
.um-bar { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; background: #f4f1ea; color: #12161f; font: 700 11px/1 var(--f-ui); letter-spacing: .14em; }
.um-bar i { width: 8px; height: 8px; background: #12161f; }
.um-body { padding: 10px; display: grid; gap: 8px; }
.um-in { height: 28px; border: 1px solid #f4f1ea55; display: flex; align-items: center; padding: 0 8px; font: 400 11px var(--f-mono); color: #f4f1eacc; overflow: hidden; white-space: nowrap; }
.um-btn { height: 26px; background: #f4f1ea; color: #12161f; font: 700 10.5px/26px var(--f-ui); text-align: center; letter-spacing: .1em; }
.um-note { font: 400 11.5px/1.45 var(--f-mono); color: var(--ink-3); max-width: 19ch; }
.um-note b { color: var(--ink); font-weight: 500; }

/* immutable loader timeline */
.timeline { display: grid; gap: 14px; }
.tl-line { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg-sunk); border: 1px solid var(--accent-line); font: 500 12.5px/1.4 var(--f-mono); color: var(--ink); min-width: 0; }
.tl-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tl-line .lock { color: var(--cyan); flex: none; }
.tl-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.tl-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--line-2); }
.tl-step { position: relative; padding-top: 24px; font: 400 12px/1.4 var(--f-mono); color: var(--ink-3); padding-right: 8px; }
.tl-step::before { content: ""; position: absolute; top: 3px; left: 0; width: 11px; height: 11px; background: var(--bg); border: 1px solid var(--line-3); transform: rotate(45deg); }
.tl-step b { display: block; color: var(--ink); font-weight: 500; font-size: 12.5px; }
.tl-step.now::before { background: var(--cyan); border-color: var(--cyan); }
.tl-step.pulled b { color: var(--warn); }
.tl-step.pulled::before { border-color: var(--warn); }
@media (max-width: 560px) { .tl-steps { grid-template-columns: 1fr 1fr; row-gap: 14px; } .tl-steps::before { display: none; } }

/* =========================================================================
   DELIVERY MODES — angled band
   ========================================================================= */
.band {
  background: var(--bg-sunk);
  clip-path: polygon(0 56px, 100% 0, 100% calc(100% - 56px), 0 100%);
  padding: calc(clamp(72px, 9vw, 128px) + 40px) 0;
  border: 0;
}
.band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(46, 155, 255, .025)); pointer-events: none; }
@media (max-width: 640px) { .band { clip-path: polygon(0 28px, 100% 0, 100% calc(100% - 28px), 0 100%); } }
.modes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
@media (max-width: 960px) { .modes { grid-template-columns: 1fr; } }
.mode-tabs { display: grid; gap: 6px; }
.mode-tab {
  --c: 10px; --f-fill: transparent; --f-border: transparent;
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; text-align: left;
  padding: 16px 16px; border: 0; background: none; color: var(--ink-2); width: 100%;
}
.mode-tab:hover { --f-border: var(--line-2); color: var(--ink); }
.mode-tab[aria-selected="true"] { --f-fill: var(--surface); --f-border: var(--accent-line); color: var(--ink); }
.mode-tab .mt-ico { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--ink-3); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.mode-tab[aria-selected="true"] .mt-ico { color: var(--on-accent); background: var(--grad); border-color: transparent; }
.mode-tab .mt-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.mode-tab strong { display: block; font: 600 17px/1.2 var(--f-display); color: inherit; }
.mode-tab .mt-sub { font-size: 13.5px; color: var(--ink-3); display: block; margin-top: 2px; }
.mode-tab .chev { color: var(--ink-4); }
.mode-tab[aria-selected="true"] .chev { color: var(--cyan); }
.mode-panel { --c: 22px; --f-fill: var(--surface); --f-border: var(--line-2); padding: 0; min-width: 0; }
.mp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mp-copy { padding: 28px; display: grid; gap: 16px; align-content: start; border-right: 1px solid var(--line); }
.mp-copy h3 { font-size: 24px; }
.mp-copy p { color: var(--ink-2); font-size: 15px; }
.mp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mp-list li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; font-size: 14px; color: var(--ink-2); }
.mp-list li b { font: 500 10.5px/1.9 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.mp-prev { padding: 28px; background: var(--bg-sunk); display: grid; gap: 10px; align-content: center; min-height: 320px; }
.mp-prev .label-mono { margin-bottom: 4px; }
@media (max-width: 720px) { .mp-grid { grid-template-columns: 1fr; } .mp-copy { border-right: 0; border-bottom: 1px solid var(--line); } .mp-prev { min-height: 0; } }
.console { border: 1px solid var(--line-2); background: #04070b; font: 400 12px/1.65 var(--f-mono); color: var(--ink-2); }
.console .c-bar { padding: 7px 10px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 11px; display: flex; justify-content: space-between; gap: 8px; }
.console .c-body { padding: 10px 12px; min-height: 120px; }
.console .c-body div { white-space: pre-wrap; word-break: break-word; }
.console .ok { color: var(--ok); }
.console .warn { color: var(--warn); }
.console .acc { color: var(--accent-ink); }
.console .dim { color: var(--ink-3); }
.mp-anim > * { animation: rise .35s var(--ease) both; }
.mp-anim > *:nth-child(2) { animation-delay: .06s; }
.mp-anim > *:nth-child(3) { animation-delay: .12s; }

/* =========================================================================
   HOW IT WORKS — routed flow
   ========================================================================= */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; gap: 0; }
.flow::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--azure) 60%, var(--line-2)); }
.flow-step { position: relative; padding: 70px 36px 0 0; display: grid; gap: 10px; align-content: start; }
.flow-step .node {
  position: absolute; top: 0; left: 0; width: 46px; height: 46px; display: grid; place-items: center;
  font: 600 14px/1 var(--f-mono); color: var(--on-accent); background: var(--grad);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}
.flow-step:not(:first-child) .node { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-3); }
.flow-step .arrowhead { position: absolute; top: 17px; right: 18px; width: 12px; height: 12px; border-top: 1.5px solid var(--azure); border-right: 1.5px solid var(--azure); transform: rotate(45deg); background: var(--bg); }
.flow-step:last-child .arrowhead { display: none; }
.flow-step h3 { font-size: 22px; }
.flow-step p { color: var(--ink-2); font-size: 15px; max-width: 34ch; }
.flow-step .detail { margin-top: 6px; font: 400 12px/1.5 var(--f-mono); color: var(--ink-3); padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); max-width: 44ch; overflow-wrap: anywhere; }
.flow-step .detail b { color: var(--accent-ink); font-weight: 500; }
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; gap: 34px; }
  .flow::before { left: 23px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--cyan), var(--azure) 60%, var(--line-2)); }
  .flow-step { padding: 0 0 0 72px; min-height: 46px; }
  .flow-step .arrowhead { display: none; }
}

/* =========================================================================
   PRICING
   ========================================================================= */
.pricing { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: 16px; align-items: stretch; }
.price-intro { display: grid; gap: 18px; align-content: start; padding-right: 24px; }
.price-intro .free-note { --c: 12px; --f-fill: var(--surface); --f-border: var(--line-2); padding: 16px 18px; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.price-intro .free-note strong { color: var(--ink); font: 600 15px var(--f-display); }
.plan { --c: 22px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.plan.pop { --f-border: transparent; }
.plan.pop::before { background: var(--grad-deep); }
.plan .p-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan .p-name { font: 600 22px/1 var(--f-display); }
.plan .p-flag { font: 600 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.plan .p-price { display: flex; align-items: baseline; gap: 6px; }
.plan .p-price b { font: 500 52px/1 var(--f-mono); letter-spacing: -.04em; color: var(--ink); }
.plan .p-price span { font: 400 14px var(--f-mono); color: var(--ink-3); }
.plan .p-for { color: var(--ink-2); font-size: 14.5px; }
.plan .p-limits { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.plan .p-limits > div { padding: 12px 14px; display: grid; gap: 2px; }
.plan .p-limits > div + div { border-left: 1px solid var(--line); }
.plan .p-limits b { font: 500 22px/1.1 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.plan .p-limits span { font: 400 11.5px/1.3 var(--f-mono); color: var(--ink-3); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.plan ul li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.plan ul li svg { width: 16px; height: 16px; margin-top: 3px; color: var(--cyan); stroke: currentColor; fill: none; stroke-width: 2; }
.plan .btn { margin-top: auto; }
@media (max-width: 1080px) { .pricing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .price-intro { grid-column: 1 / -1; padding-right: 0; } }
@media (max-width: 680px) { .pricing { grid-template-columns: minmax(0, 1fr); } .plan { padding: 22px; } }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 28px; } }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 12px; align-items: center; font: 600 19px/1.3 var(--f-display); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .q-n { font: 500 12px var(--f-mono); color: var(--ink-3); }
.faq summary .plus { position: relative; width: 14px; height: 14px; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; background: var(--ink-3); left: 0; right: 0; top: 6px; height: 1.6px; transition: transform .25s var(--ease); }
.faq summary .plus::after { transform: rotate(90deg); }
.faq details[open] summary .plus::after { transform: rotate(0); }
.faq details[open] summary .plus::before { background: var(--cyan); }
.faq summary:hover { color: var(--accent-ink); }
.faq .a { padding: 0 32px 24px 56px; color: var(--ink-2); font-size: 15.5px; line-height: 1.65; max-width: 68ch; display: grid; gap: 10px; }
.faq .a code { font-size: 13px; color: var(--ink); background: var(--bg-sunk); border: 1px solid var(--line); padding: 1px 5px; }
@media (max-width: 560px) { .faq summary { grid-template-columns: 30px minmax(0, 1fr) 16px; font-size: 17px; } .faq .a { padding: 0 0 22px 42px; } }

/* =========================================================================
   FINAL CTA — faceted geometry
   ========================================================================= */
.cta-band { padding: 40px 0 clamp(72px, 9vw, 120px); }
.cta-box {
  --c: 40px; --f-fill: var(--surface); --f-border: var(--line-2);
  padding: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: center; overflow: hidden;
}
.cta-box .facets { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; z-index: 0; pointer-events: none; opacity: .9; }
.cta-box .cta-copy { position: relative; z-index: 1; display: grid; gap: 16px; }
.cta-box .cta-actions { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 860px) { .cta-box { grid-template-columns: 1fr; } .cta-box .cta-actions { justify-content: flex-start; } .cta-box .facets { width: 80%; opacity: .45; } }

.watermark-l { position: absolute; pointer-events: none; color: var(--cyan); opacity: .035; z-index: 0; }