/* Marianas Technologies — shared styles
   Palette is deep-ocean: near-black navy at the ends of the page, white and
   pale blue in between, teal used sparingly so it still registers.
   No photography anywhere by design — product visuals are built in markup. */

:root{
  --abyss:#071322;
  --deep:#0A1B2E;
  --deep-2:#102842;
  --ink:#0E1F31;
  --body:#42566B;
  --muted:#6B7E93;
  --line:#DCE4EC;
  --surface:#FFFFFF;
  --surface-2:#F4F7FA;
  --accent:#5FD8C4;
  --accent-deep:#0E8F7E;
  --accent-wash:#E4F6F2;
  --ice:#CFE0EE;
  --amber:#B45309;
  --amber-wash:#FEF3C7;
  --danger:#B3322A;
  --danger-wash:#FDECEA;
  --maxw:1120px;
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:17px; line-height:1.62; letter-spacing:-0.003em;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
@media (max-width:720px){ .wrap{padding:0 16px} body{font-size:16px} }

/* ---------- wordmark ---------- */
.wordmark{display:inline-flex; align-items:baseline; gap:.52rem; text-decoration:none; white-space:nowrap}
.wm-name{font-weight:700; font-size:1.32rem; letter-spacing:-0.035em; color:#fff}
.wm-name .hl{color:var(--accent)}
.wm-sub{font-weight:500; font-size:.605rem; letter-spacing:.235em; text-transform:uppercase; color:#7E9CB8; transform:translateY(-1px)}

/* ---------- nav ---------- */
header{background:var(--deep); position:sticky; top:0; z-index:50; border-bottom:1px solid rgba(255,255,255,.07)}
nav{display:flex; align-items:center; justify-content:space-between; height:70px; gap:24px}
.navlinks{display:flex; align-items:center; gap:30px}
.navlinks a{color:#B9CDDE; text-decoration:none; font-size:.925rem; font-weight:500; transition:color .15s}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:#fff}
.navlinks a[aria-current="page"]{font-weight:600}
@media (max-width:900px){ .navlinks{display:none} }
@media (max-width:430px){ nav .btn{font-size:.85rem; padding:.55rem .8rem} .wm-sub{display:none} }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; background:var(--accent); color:#06202B; text-decoration:none;
  font-weight:600; font-size:.925rem; padding:.62rem 1.15rem; border-radius:9px;
  transition:transform .15s, box-shadow .15s, background .15s; border:0; cursor:pointer; white-space:nowrap;
}
.btn:hover{background:#7BE6D4; transform:translateY(-1px); box-shadow:0 8px 22px -10px rgba(95,216,196,.7)}
.btn.ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.28)}
.btn.ghost:hover{background:rgba(255,255,255,.08); box-shadow:none}
.btn.dark{background:var(--ink); color:#fff}
.btn.dark:hover{background:#17324C; box-shadow:0 8px 22px -10px rgba(14,31,49,.5)}
.btn.outline{background:transparent; color:var(--ink); border:1px solid #C3D0DC}
.btn.outline:hover{background:var(--surface-2); box-shadow:none}

/* ---------- heroes ---------- */
.hero,.page-hero{
  background:
    radial-gradient(120% 90% at 78% -10%, #17456B 0%, rgba(23,69,107,0) 58%),
    linear-gradient(180deg, var(--deep) 0%, var(--abyss) 100%);
  color:#fff; position:relative; overflow:hidden;
}
.hero{padding:92px 0 104px}
.page-hero{padding:66px 0 72px}
.depth{position:absolute; inset:0; pointer-events:none; opacity:.5}
.hero .wrap,.page-hero .wrap{position:relative; z-index:2}
h1{font-size:clamp(2.1rem,4.6vw,3.45rem); line-height:1.1; font-weight:700; letter-spacing:-0.033em; margin:0 0 1.1rem; max-width:17ch}
.page-hero h1{font-size:clamp(1.85rem,3.6vw,2.75rem); max-width:20ch; margin-bottom:.9rem}
.lede{font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--ice); max-width:62ch; margin:0 0 2.1rem; line-height:1.6}
.page-hero .lede{margin-bottom:0}
.kicker{font-size:.735rem; font-weight:600; letter-spacing:.175em; text-transform:uppercase; color:var(--accent); margin:0 0 .9rem}
.cta-row{display:flex; gap:13px; flex-wrap:wrap; align-items:center}
.provenance{margin-top:46px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); font-size:.95rem; color:#93AFC7; max-width:58ch}
.provenance strong{color:#DCEAF4; font-weight:600}

/* ---------- sections ---------- */
section{padding:84px 0}
section.tight{padding:64px 0}
.s-tint{background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.eyebrow{font-size:.735rem; font-weight:600; letter-spacing:.175em; text-transform:uppercase; color:var(--accent-deep); margin:0 0 .85rem}
h2{font-size:clamp(1.55rem,2.7vw,2.1rem); line-height:1.2; font-weight:700; letter-spacing:-0.026em; margin:0 0 1rem; max-width:22ch}
h2.wide{max-width:30ch}
.sec-lede{font-size:1.06rem; color:var(--body); max-width:66ch; margin:0 0 2.6rem}
.prose{max-width:68ch}
.prose p{color:var(--body); margin:0 0 1.15rem}
.prose p strong{color:var(--ink); font-weight:600}
.prose h3{font-size:1.15rem; font-weight:650; margin:2.1rem 0 .6rem; letter-spacing:-0.015em; color:var(--ink)}
.note{font-size:.9rem; color:var(--muted); margin-top:1.1rem}

/* ---------- split layout ---------- */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:56px; align-items:center}
.split.rev .col-a{order:2}
@media (max-width:920px){ .split{grid-template-columns:1fr; gap:34px} .split.rev .col-a{order:0} }

/* ---------- cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.cards.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .cards,.cards.two{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px 22px; display:flex; flex-direction:column; transition:border-color .18s, transform .18s, box-shadow .18s}
.card:hover{border-color:#B9C9D8; transform:translateY(-2px); box-shadow:0 14px 34px -22px rgba(14,31,49,.45)}
.card .ico{width:38px; height:38px; border-radius:10px; background:var(--accent-wash); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; margin-bottom:15px}
.card h3{font-size:1.1rem; font-weight:650; margin:0 0 .5rem; letter-spacing:-0.015em}
.card p{margin:0 0 1.15rem; color:var(--body); font-size:.955rem; line-height:1.58; flex:1}
.card a.more{color:var(--accent-deep); text-decoration:none; font-weight:600; font-size:.915rem}
.card a.more:hover{text-decoration:underline}

/* ---------- feature rows ---------- */
.three{display:grid; grid-template-columns:repeat(3,1fr); gap:44px}
@media (max-width:900px){ .three{grid-template-columns:1fr; gap:32px} }
.three h3{font-size:1.12rem; font-weight:650; margin:0 0 .55rem; letter-spacing:-0.015em}
.three h3 .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent-deep); margin-right:9px; transform:translateY(-3px)}
.three p{margin:0; color:var(--body); font-size:.965rem; line-height:1.6}

/* ---------- numbered steps ---------- */
.steps{counter-reset:s; display:grid; gap:26px; max-width:70ch}
.step{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start}
.step .n{
  counter-increment:s; width:30px; height:30px; border-radius:50%; background:var(--deep); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:650; flex:none;
}
.step .n::before{content:counter(s)}
.step h3{margin:.15rem 0 .35rem; font-size:1.06rem; font-weight:650; letter-spacing:-0.012em}
.step p{margin:0; color:var(--body); font-size:.96rem}

/* ---------- diagram ---------- */
.diagram-scroll{margin-top:8px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.diagram{width:100%; height:auto; display:block}
@media (max-width:860px){
  .diagram{min-width:760px}
  .diagram-scroll{margin-left:-16px; margin-right:-16px; padding:0 16px}
}
.scroll-hint{display:none; font-size:.82rem; color:var(--muted); margin:.55rem 0 0}
@media (max-width:860px){ .scroll-hint{display:block} }

/* ================= PRODUCT VISUALS (built, never screenshotted) ============ */
.ui{
  background:#fff; border:1px solid #CFDAE5; border-radius:12px; overflow:hidden;
  box-shadow:0 22px 50px -32px rgba(10,27,46,.55); font-size:13.5px; line-height:1.45;
}
.ui-bar{
  background:var(--deep); color:#CFE0EE; padding:9px 14px; display:flex; align-items:center; gap:9px;
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}
.ui-bar .dots{display:flex; gap:5px; margin-right:4px}
.ui-bar .dots i{width:8px; height:8px; border-radius:50%; background:#2C4964; display:block}
.ui-body{padding:4px 0}
.ui-cap{font-size:.86rem; color:var(--muted); margin:.7rem 0 0}

/* queue rows */
.qrow{display:grid; grid-template-columns:76px minmax(0,1fr) 62px 74px; gap:12px; align-items:center; padding:11px 14px; border-bottom:1px solid #EDF2F6}
.qrow:last-child{border-bottom:0}
.qrow .sku{font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.qrow .desc{color:var(--muted); font-size:12px; display:block; font-weight:400}
.qrow .num{text-align:right; font-variant-numeric:tabular-nums; color:var(--body)}
.qrow .num b{color:var(--ink); font-weight:600}
.pill{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:20px; white-space:nowrap}
.pill.red{background:var(--danger-wash); color:var(--danger)}
.pill.amber{background:var(--amber-wash); color:var(--amber)}
.pill.teal{background:var(--accent-wash); color:var(--accent-deep)}
.pill.grey{background:#EEF2F6; color:var(--muted)}
.qwhy{padding:10px 14px; background:#F7FAFC; border-top:1px solid #EDF2F6; color:var(--body); font-size:12.5px}
.qwhy b{color:var(--ink)}

/* call panel */
.turn{padding:11px 14px; border-bottom:1px solid #EDF2F6; display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start}
.turn:last-child{border-bottom:0}
.turn .who{font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:6px; white-space:nowrap}
.turn .who.cust{background:#EEF2F6; color:var(--muted)}
.turn .who.sys{background:var(--deep); color:#9FE4D6}
.turn p{margin:0; color:var(--ink)}
.turn .meta{display:block; margin-top:5px; color:var(--accent-deep); font-size:11.5px; font-weight:600}
.turn .meta.grey{color:var(--muted); font-weight:500}

/* stat strip */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
@media (max-width:760px){ .stats{grid-template-columns:1fr} }
.stat{background:#fff; padding:22px 20px}
.stat b{display:block; font-size:1.55rem; font-weight:700; letter-spacing:-0.02em; color:var(--ink); line-height:1.15}
.stat span{display:block; font-size:.9rem; color:var(--muted); margin-top:.25rem}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start}
@media (max-width:980px){ .plans{grid-template-columns:1fr} }
.plan{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px; display:flex; flex-direction:column}
.plan.feature{border-color:var(--accent-deep); box-shadow:0 18px 40px -28px rgba(14,143,126,.55)}
.plan .tag{font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); margin:0 0 .6rem}
.plan h3{font-size:1.25rem; font-weight:650; margin:0 0 .35rem; letter-spacing:-0.018em}
.plan .price{font-size:2rem; font-weight:700; letter-spacing:-0.03em; margin:.5rem 0 .15rem; color:var(--ink)}
.plan .per{font-size:.9rem; color:var(--muted); margin:0 0 1.3rem}
.plan ul{list-style:none; margin:0 0 1.6rem; padding:0; flex:1}
.plan li{position:relative; padding-left:24px; margin-bottom:.6rem; color:var(--body); font-size:.94rem; line-height:1.5}
.plan li::before{content:""; position:absolute; left:3px; top:.52em; width:9px; height:5px; border-left:2px solid var(--accent-deep); border-bottom:2px solid var(--accent-deep); transform:rotate(-45deg)}

/* faq */
.faq{max-width:70ch}
.faq details{border-bottom:1px solid var(--line); padding:16px 0}
.faq summary{cursor:pointer; font-weight:600; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent-deep); font-weight:700; font-size:1.2rem; line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:.8rem 0 0; color:var(--body); font-size:.97rem}

/* ---------- closing + footer ---------- */
.closing{background:linear-gradient(180deg,var(--deep) 0%, var(--abyss) 100%); color:#fff; padding:80px 0}
.closing h2{color:#fff; max-width:20ch; margin-bottom:.9rem}
.closing p{color:var(--ice); max-width:56ch; margin:0 0 1.9rem; font-size:1.05rem}
footer{background:var(--abyss); color:#7E9CB8; padding:38px 0; font-size:.88rem; border-top:1px solid rgba(255,255,255,.07)}
.foot{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
.foot a{color:#9FB9CE; text-decoration:none}
.foot a:hover{color:#fff}

/* ===================== before / after lanes (home) ======================== */
.lane{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; margin-bottom:20px}
.lane.after{border-color:#9FDDD0; box-shadow:0 18px 40px -30px rgba(14,143,126,.5)}
.lane-head{padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:.94rem; color:var(--body)}
.lane.after .lane-head{background:var(--accent-wash); border-bottom-color:#C6EAE2; color:#0B5E52}
.lane-tag{font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:4px 9px; border-radius:20px; white-space:nowrap}
.lane-tag.grey{background:#EEF2F6; color:var(--muted)}
.lane-tag.teal{background:var(--accent-deep); color:#fff}
.flow{display:flex; align-items:stretch; gap:0; padding:22px 18px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.node{
  flex:0 0 auto; min-width:104px; border:1px solid #C9D6E2; border-radius:10px; background:#F8FAFC;
  padding:11px 13px; text-align:center; font-size:.88rem; font-weight:600; color:var(--ink); line-height:1.3;
}
.node span{display:block; font-weight:400; font-size:.76rem; color:var(--muted); margin-top:3px}
.lane.after .node{background:var(--deep); border-color:var(--deep); color:#fff}
.lane.after .node span{color:#8FB8CC}
.lane.after .node.erp{background:#fff; border-color:#B9C9D8; color:var(--ink)}
.lane.after .node.erp span{color:var(--muted)}
.link{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 10px; min-width:78px}
.link .ln{width:100%; height:1px; background:#C9D6E2; position:relative}
.link .ln::after{content:""; position:absolute; right:-1px; top:-3px; border-left:6px solid #9DB0C2; border-top:3.5px solid transparent; border-bottom:3.5px solid transparent}
.link.broken .ln{background:repeating-linear-gradient(90deg,#E0A9A3 0 5px,transparent 5px 10px)}
.link.broken .ln::after{border-left-color:#C98B84}
.link em{font-style:normal; font-size:.7rem; color:var(--danger); font-weight:600; margin-top:6px; text-align:center; line-height:1.25}
.link.ok .ln{background:#7FD0C0}
.link.ok .ln::after{border-left-color:#49B9A5}
.link.ok em{color:var(--accent-deep)}
.lane-foot{padding:13px 18px; border-top:1px solid var(--line); font-size:.88rem; color:var(--muted); background:#FBFCFD}
.lane.after .lane-foot{color:#0B5E52; background:#F3FBF9; border-top-color:#DCF0EB}
@media (max-width:820px){ .flow{padding:18px 14px} .node{min-width:96px; font-size:.83rem} .link{min-width:64px} }

/* ===================== waterfall, built in HTML ========================== */
.wf{display:flex; align-items:flex-end; gap:10px; height:210px; padding:8px 4px 0}
.wf .col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; position:relative}
.wf .val{font-size:.78rem; font-weight:700; text-align:center; margin-bottom:5px; white-space:nowrap}
.wf .bar{border-radius:3px; width:100%}
.wf .bar.base{background:var(--deep)}
.wf .bar.up{background:var(--accent-deep)}
.wf .bar.down{background:var(--amber)}
.wf .lbl{font-size:.74rem; color:var(--muted); text-align:center; margin-top:8px; white-space:nowrap}
.wf-axis{border-top:1px solid var(--line); margin-top:0}
@media (max-width:520px){ .wf{height:170px; gap:6px} .wf .val{font-size:.7rem} .wf .lbl{font-size:.66rem} }

/* four-plan grid — two standalone modules, then the two bundles */
.plans.four{grid-template-columns:repeat(4,1fr); gap:16px}
.plans.four .plan{padding:24px 20px}
.plans.four .plan h3{font-size:1.12rem}
.plans.four .plan .price{font-size:1.72rem}
.plans.four .plan li{font-size:.9rem}
@media (max-width:1080px){ .plans.four{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .plans.four{grid-template-columns:1fr} }
.saving{display:inline-block; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--accent-wash); color:var(--accent-deep); padding:3px 9px; border-radius:20px; margin-bottom:.9rem}

/* ---- lane refinements: integrated links, the messy workaround layer ---- */
.link.sys .ln{background:#B9C9D8}
.link.sys .ln::after{border-left-color:#9DB0C2}
.link.sys em{color:var(--muted); font-weight:500}
.lane-tag.brand{background:var(--deep); color:#fff; letter-spacing:.02em; text-transform:none; font-size:.82rem; padding:5px 11px}
.lane-tag.brand .hl{color:var(--accent)}
.lane-tag.brand .pre{color:#9FB9CE; font-weight:600}

/* the sprawl of tools hanging off the ERP in the old model */
.wa-head{padding:0 18px; font-size:.82rem; color:var(--danger); font-weight:600}
.wa-band{display:flex; gap:12px; padding:10px 18px 20px; flex-wrap:wrap; align-items:flex-start}
.wa{
  border:1px dashed #DDA49D; border-radius:9px; background:#FEF8F7; padding:9px 12px;
  font-size:.78rem; color:#8A4A43; line-height:1.35; max-width:210px;
}
.wa b{display:block; color:var(--ink); font-weight:650; font-size:.84rem; margin-bottom:2px}
.wa:nth-child(2){margin-top:14px}
.wa:nth-child(3){margin-top:5px}
.wa:nth-child(4){margin-top:19px}
.wa:nth-child(5){margin-top:9px}
.lane.after .wa-band{padding-top:10px}
.integrated{
  margin:0 18px 20px; border:1px solid #9FDDD0; background:#F3FBF9; border-radius:10px;
  padding:13px 15px; font-size:.86rem; color:#0B5E52;
}
.integrated b{color:#093F37; font-weight:650}

/* model comparison table */
.cmp{width:100%; border-collapse:collapse; margin-top:10px; font-size:.94rem}
.cmp th{text-align:left; padding:12px 14px; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; border-bottom:1px solid var(--line)}
.cmp th.q{color:var(--muted); width:26%}
.cmp th.old{color:var(--muted)}
.cmp th.new{color:var(--accent-deep); background:var(--accent-wash); border-radius:8px 8px 0 0}
.cmp td{padding:13px 14px; vertical-align:top; border-bottom:1px solid #EDF2F6; color:var(--body); line-height:1.5}
.cmp td.q{font-weight:650; color:var(--ink)}
.cmp td.new{background:#F6FCFB; color:#10493F}
.cmp tr:last-child td{border-bottom:0}
@media (max-width:760px){
  .cmp,.cmp tbody,.cmp tr,.cmp td{display:block; width:100%}
  .cmp thead{display:none}
  .cmp tr{border:1px solid var(--line); border-radius:10px; margin-bottom:12px; overflow:hidden}
  .cmp td{border-bottom:0}
  .cmp td.q{background:var(--surface-2); font-size:.9rem}
  .cmp td.old::before{content:"Today — "; font-weight:650; color:var(--muted)}
  .cmp td.new::before{content:"With Marianas — "; font-weight:650; color:var(--accent-deep)}
}

/* queue row: the pill column was 76px, too narrow for "Order today" — it
   overlapped the SKU name. Widen it and give the numerics less room. */
.qrow{grid-template-columns:100px minmax(0,1fr) 54px 68px; gap:10px}
@media (max-width:1024px){ .qrow{grid-template-columns:96px minmax(0,1fr) 48px 62px; gap:8px} }
.pill{padding:3px 7px; letter-spacing:.03em}

/* pricing: modules on top (3), bundles beneath (2) */
.plans.bundles{grid-template-columns:repeat(2,1fr); gap:20px; margin-top:20px}
@media (max-width:860px){ .plans.bundles{grid-template-columns:1fr} }
.plans-label{font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .9rem}
.plans-label.b{color:var(--accent-deep); margin-top:2.6rem}

/* ---------------------------- contact form ------------------------------- */
.cform{max-width:560px; margin-top:1.4rem}
.cform .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){ .cform .row{grid-template-columns:1fr} }
.cform label{display:block; font-size:.86rem; font-weight:600; color:var(--ink); margin:0 0 .35rem}
.cform .fld{margin-bottom:14px}
.cform input,.cform textarea{
  width:100%; font:inherit; font-size:.97rem; color:var(--ink); background:#fff;
  border:1px solid #C7D3DF; border-radius:9px; padding:.6rem .75rem;
  transition:border-color .15s, box-shadow .15s;
}
.cform textarea{min-height:130px; resize:vertical; line-height:1.55}
.cform input:focus,.cform textarea:focus{
  outline:none; border-color:var(--accent-deep); box-shadow:0 0 0 3px rgba(14,143,126,.14);
}
.cform .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.cform button{margin-top:.2rem}
.cform button[disabled]{opacity:.6; cursor:progress}
.cform .opt{font-weight:400; color:var(--muted); font-size:.82rem}
.fmsg{margin-top:1rem; padding:.8rem 1rem; border-radius:9px; font-size:.94rem; display:none}
.fmsg.ok{display:block; background:var(--accent-wash); border:1px solid #9FDDD0; color:#0B5E52}
.fmsg.err{display:block; background:var(--danger-wash); border:1px solid #E7B7B1; color:var(--danger)}

/* ------------------------------------------------------------------ *
 * NARROW LAYOUT FOR THE PRODUCT VISUALS
 *
 * The two flow lanes are 5 nodes + 4 handoff labels. Laid out left to
 * right the wider one (With Marianas) needs ~990px, so the breakpoint
 * follows that measurement with headroom for font metrics that differ
 * by browser. Under it the lanes clipped behind a scroll with no
 * affordance — 36% visible on a 375px phone, 75% on a 768px tablet,
 * and still 20px short at 1024px — so they read as cut off, not
 * scrollable. Measure the widest lane, not the first one.
 *
 * Under 1000px the chain turns vertical instead: every node and every
 * handoff on screen, no gesture required. Height is the cheap currency
 * on a narrow screen. The queue table has its own, smaller problem and
 * keeps its own breakpoint below.
 * ------------------------------------------------------------------ */
@media (max-width:1100px){

  .flow{flex-direction:column; align-items:stretch; overflow-x:visible; padding:16px 16px 18px}

  /* each node is one compact row: name left, qualifier right */
  .node{
    min-width:0; width:100%; display:flex; justify-content:space-between;
    align-items:baseline; gap:12px; text-align:left; padding:10px 13px;
  }
  .node span{margin-top:0; flex:0 0 auto; text-align:right; font-size:.8rem}

  /* the connector rotates: short vertical rule, label beside it */
  .link{
    min-width:0; width:100%; flex-direction:row; align-items:center;
    justify-content:flex-start; gap:11px; padding:5px 0 5px 20px;
  }
  .link .ln{width:1px; height:26px; flex:0 0 auto}
  .link .ln::after{
    top:auto; right:auto; bottom:-1px; left:-3.5px;
    border-left:4px solid transparent; border-right:4px solid transparent;
    border-top:6px solid #9DB0C2; border-bottom:none;
  }
  /* .link.broken/.sys/.ok beat `.link .ln::after` on specificity, so each
     one re-points its own arrowhead down rather than right */
  .link.broken .ln{background:repeating-linear-gradient(180deg,#E0A9A3 0 5px,transparent 5px 10px)}
  .link.broken .ln::after{border-left-color:transparent; border-top-color:#C98B84}
  .link.sys   .ln::after{border-left-color:transparent; border-top-color:#9DB0C2}
  .link.ok    .ln::after{border-left-color:transparent; border-top-color:#49B9A5}
  .link em{margin-top:0; text-align:left; font-size:.78rem; line-height:1.3}
}

/* The reorder queue only breaks on phones: its description column computed
   to 83px there and ellipsised away to nothing. It is fine on a tablet. */
@media (max-width:700px){
  .qrow{grid-template-columns:84px minmax(0,1fr) 46px; gap:9px; padding:10px 12px}
  /* days-of-cover drops to its own line under the description instead of being
     hidden — the copy above this mock promises it, so the mock has to show it.
     It loses its column position here, so it labels itself. */
  .qrow .num:last-child{
    grid-column:2 / -1; text-align:left; font-size:11.5px;
    color:var(--muted); margin-top:-3px;
  }
  .qrow .num:last-child::before{content:"cover: "}
  .qrow .sku{white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3}
  .qrow .desc{font-size:12px; line-height:1.35; margin-top:2px}
  .pill{font-size:11px}
}

/* ------------------------------------------------------------------ *
 * THE THREE PROCESSES  (home page, "Today" lane)
 * Sales, buying and finance each run their own process on their own
 * system. Steps are wrapping pills rather than a fixed-width chain, so
 * this can never clip at any viewport the way the old single chain did.
 * ------------------------------------------------------------------ */
.tracks{padding:18px 18px 4px}
.track{border:1px solid var(--line); border-radius:12px; background:#fff; padding:13px 15px}
.track-top{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.track-name{
  font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:4px 9px; border-radius:20px; background:#EEF2F6; color:var(--muted); white-space:nowrap;
}
.track-where{font-size:.82rem; color:var(--muted)}
.track-steps{display:flex; flex-wrap:wrap; align-items:center; gap:7px}
.step{
  border:1px solid #C9D6E2; background:#F8FAFC; border-radius:8px;
  padding:6px 10px; font-size:.83rem; font-weight:600; color:var(--ink); line-height:1.3;
}
.step.hand{border-color:#E7B7B1; background:var(--danger-wash); color:var(--danger)}
.sep{color:#9DB0C2; font-weight:700; font-size:.95rem}
.track-blind{margin:10px 0 0; font-size:.84rem; color:var(--danger); line-height:1.5}
.track-blind b{font-weight:700}

/* the black hole between two processes */
.gapline{display:flex; align-items:center; gap:12px; padding:11px 2px}
.gapline::before,.gapline::after{
  content:""; flex:1; height:1px;
  background:repeating-linear-gradient(90deg,#DCC3BF 0 6px,transparent 6px 12px);
}
.gapline span{
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#B08A84; white-space:nowrap;
}

/* ---- the same three, converging on one record ("With Marianas") ---- */
.conv{padding:18px}
.conv-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.cc{background:var(--deep); color:#fff; border-radius:12px; padding:13px 15px}
.cc b{display:block; font-size:.92rem; margin-bottom:5px}
.cc span{display:block; font-size:.82rem; color:#9FC4D8; line-height:1.5}
.conv-join{display:flex; justify-content:space-around; padding:9px 0 7px}
.conv-join i{width:1px; height:20px; background:#7FD0C0; position:relative; display:block}
.conv-join i::after{
  content:""; position:absolute; bottom:-1px; left:-3.5px;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid #49B9A5;
}
.conv-bar{
  border:1px solid #9FDDD0; background:var(--accent-wash); border-radius:12px;
  padding:14px 16px; text-align:center;
}
.conv-bar b{display:block; color:#0B5E52; font-size:.98rem; margin-bottom:3px}
.conv-bar span{font-size:.84rem; color:#0B5E52; opacity:.82}

@media (max-width:760px){
  .tracks{padding:16px 14px 2px}
  .track{padding:12px 13px}
  .conv{padding:16px 14px}
  .conv-cols{grid-template-columns:1fr}
  /* stacked columns need one arrow, not three */
  .conv-join i:not(:first-child){display:none}
  .conv-join{justify-content:center}
}

/* ------------------------- subprocessor list (security page) ------------- */
.subp{display:grid; gap:10px; max-width:760px}
.sp{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  border:1px solid var(--line); border-radius:10px; padding:13px 15px; background:#fff;
}
.sp span{font-size:.93rem; color:var(--body); line-height:1.5}
.sp b{display:block; color:var(--ink); font-weight:650; font-size:.98rem; margin-bottom:2px}
.sp em{
  font-style:normal; flex:0 0 auto; font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:4px 9px; border-radius:20px;
  background:var(--accent-wash); color:var(--accent-deep); white-space:nowrap;
}
@media (max-width:620px){
  .sp{flex-direction:column; align-items:flex-start; gap:9px}
}