/* Corvex marketing site. Built to DESIGN.md (Carbon-based): flat square corners, 1px hairlines,
   IBM Plex Sans with light display type, one blue accent. Green is the logo and the success colour only. */
@import url(fonts.css);

:root {
  /* colour */
  --primary: #0f62fe; --primary-hover: #0050e6; --primary-pressed: #002d9c; --link-hover: #0043ce;
  --ink: #161616; --ink-2: #525252; --ink-3: #8c8c8c;
  --canvas: #ffffff; --s1: #f4f4f4; --s2: #e0e0e0; --hair: #e0e0e0;
  --inv: #161616; --inv-s1: #262626; --inv-ink-2: #c6c6c6;
  --ok: #198038; --ok-fill: #24a148; --logo-green: #53ae33; --warn: #f1c21b; --err: #da1e28;
  --blue-10: #edf5ff; --green-10: #defbe6; --red-10: #fff1f1;
  --on-green: #0e6027; --on-red: #a2191f;

  /* spacing, 0.25rem grid */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem;
  --section: clamp(3.5rem, 7vw, 6rem);

  /* layout, Carbon max grid 1584 */
  --container: 110rem;
  --gutter: clamp(1rem, 2.6vw, 2.5rem);
  --content: calc(min(100vw, var(--container)) - 2 * var(--gutter));
  --bar: 2rem; --nav: 3rem;
  --cut: clamp(2rem, 4vw, 4.5rem);

  --sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, 0, .38, .9);       /* Carbon productive */
  --ease-out: cubic-bezier(0, 0, .38, .9);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, calc(16px + (100vw - 1440px) * .0065), 24px); scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + 1rem); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 1rem/1.5 var(--sans); letter-spacing: .16px; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; border-radius: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--primary); color: #fff; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.wrap { width: var(--content); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 0.5rem; top: -3.75rem; background: var(--ink); color: #fff; padding: 0.75rem 1rem; z-index: 400; }
.skip:focus { top: 0.5rem; }

/* ---------- type: weight 300 for display, 400 for everything else ---------- */
.d-lg { font-size: clamp(2.25rem, 4.2vw, 4rem); font-weight: 300; line-height: 1.17; letter-spacing: -.4px; color: var(--ink); text-wrap: balance; }
.d-md { font-size: clamp(1.875rem, 2.9vw, 2.625rem); font-weight: 300; line-height: 1.2; letter-spacing: 0; color: var(--ink); text-wrap: balance; }
.headline { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 400; line-height: 1.25; letter-spacing: 0; color: var(--ink); }
.card-title { font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 400; line-height: 1.33; letter-spacing: 0; color: var(--ink); }
.subhead { font-size: 1.25rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; }
.lede { font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.5; letter-spacing: 0; color: var(--ink-2); max-width: 46ch; }
.body-sm { font-size: 0.875rem; line-height: 1.29; }
.cap { font-size: 0.75rem; line-height: 1.33; letter-spacing: .32px; }
.label { font-size: 0.875rem; line-height: 1.29; color: var(--ink-2); margin-bottom: var(--sp-4); }   /* sentence-case eyebrow */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.up { color: var(--ok); } .down { color: var(--err); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 2.5rem; min-height: 3rem; padding: 0 1rem; border: 1px solid transparent; background: var(--primary); color: #fff; font-size: 0.875rem; line-height: 1.29; text-decoration: none; cursor: pointer; transition: background .11s var(--ease); }
.btn svg { width: 1rem; height: 1rem; flex: none; }
.btn:hover { background: var(--primary-hover); }
.btn:active { background: var(--primary-pressed); }
.btn--secondary { background: var(--ink); } .btn--secondary:hover { background: #393939; } .btn--secondary:active { background: #6f6f6f; }
.btn--tertiary { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn--tertiary:hover { background: var(--primary); color: #fff; }
.btn--white { background: #fff; color: var(--primary); } .btn--white:hover { background: var(--s1); }
.ghost { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 3rem; color: var(--primary); text-decoration: none; font-size: 0.875rem; background: none; border: 0; cursor: pointer; padding: 0; }
.ghost svg { width: 1rem; height: 1rem; transition: transform .11s var(--ease); }
.ghost:hover { color: var(--link-hover); text-decoration: underline; } .ghost:hover svg { transform: translateX(0.25rem); }

/* ---------- utility bar + top nav ---------- */
.bar { background: var(--s1); height: var(--bar); font-size: 0.75rem; letter-spacing: .32px; color: var(--ink-2); }
.bar .wrap { height: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.bar nav { display: flex; gap: 1.5rem; } .bar a { text-decoration: none; } .bar a:hover { color: var(--ink); text-decoration: underline; }
.header { position: sticky; top: 0; z-index: 100; background: var(--canvas); border-bottom: 1px solid var(--hair); view-transition-name: header; transition: transform .3s var(--ease); }
.header__in { height: var(--nav); display: flex; align-items: center; }
.brand { display: flex; align-items: center; height: 100%; padding-right: 2rem; }
.brand img { height: 1.5rem; width: auto; }
.nav { display: flex; height: 100%; }
.nav__link { display: flex; align-items: center; padding: 0 1rem; font-size: 0.875rem; text-decoration: none; color: var(--ink-2); border-bottom: 2px solid transparent; transition: background .11s, color .11s; }
.nav__link:hover { background: var(--s1); color: var(--ink); }
.nav__link.is-on { color: var(--ink); border-bottom-color: var(--primary); }
.header__cta { margin-left: auto; display: flex; height: 100%; align-items: stretch; }
.header__cta .signin { display: flex; align-items: center; padding: 0 1.25rem; font-size: 0.875rem; text-decoration: none; color: var(--ink-2); } .header__cta .signin:hover { background: var(--s1); color: var(--ink); }
.header__cta .btn { min-height: 0; padding: 0 1.5rem; gap: 1.5rem; }
.burger { display: none; margin-left: auto; width: 3rem; height: 3rem; border: 0; background: none; cursor: pointer; }
.burger i { display: block; width: 1.25rem; height: 2px; background: var(--ink); margin: 0.3125rem auto; transition: transform .2s var(--ease), opacity .2s; }
.menu-open .burger i:first-child { transform: translateY(0.2188rem) rotate(45deg); } .menu-open .burger i:last-child { transform: translateY(-0.2188rem) rotate(-45deg); }
.sheet { position: fixed; inset: var(--nav) 0 0 0; z-index: 90; background: var(--canvas); display: none; flex-direction: column; overflow: auto; padding: 0 var(--gutter) 1.5rem; }
.menu-open .sheet { display: flex; }
.sheet a:not(.btn) { font-size: 1.25rem; font-weight: 300; padding: 1rem 0; border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--ink); opacity: 0; transform: translateY(0.5rem); animation: rise .35s var(--ease-out) forwards; animation-delay: calc(var(--i) * 40ms); }
.sheet .btn { margin-top: 1.5rem; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- bands ---------- */
.band { padding: var(--section) 0; }
.band--s1 { background: var(--s1); }
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 6rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sec-head p:not(.label) { color: var(--ink-2); max-width: 52ch; }

/* intro + stat cards */
.intro__top { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 5vw, 6rem); align-items: center; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.intro__top .d-md { margin-bottom: var(--sp-5); }
.intro__top p { color: var(--ink-2); max-width: 52ch; }
.cut { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); overflow: hidden; }
.cut img { width: 100%; height: 100%; object-fit: cover; }
.intro__img { aspect-ratio: 16 / 9; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.card { background: var(--canvas); border: 1px solid var(--hair); padding: var(--sp-6); display: grid; gap: var(--sp-3); align-content: start; margin-left: -1px; transition: background .11s var(--ease); }
.card:first-child { margin-left: 0; }
.card:hover { background: var(--s1); }
.band--s1 .card:hover { background: #fff; }
.card .big { font-size: clamp(2.5rem, 3.8vw, 3.75rem); font-weight: 300; line-height: 1.1; letter-spacing: -.4px; }
.card strong { font-weight: 600; font-size: 0.875rem; }
.card p { color: var(--ink-2); font-size: 0.875rem; line-height: 1.43; max-width: 36ch; }
.card .ghost { margin-top: var(--sp-3); min-height: 0; justify-self: start; }

/* benefits */
.bn svg { width: 2rem; height: 2rem; margin-bottom: var(--sp-5); fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.bn .card-title { margin-bottom: var(--sp-3); }
.bn p { color: var(--ink-2); font-size: 0.875rem; line-height: 1.43; max-width: 38ch; }
.benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.benefits__grid .card { padding: var(--sp-6); gap: 0; }

/* planning */
.plan__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 6rem); align-items: center; }
.plan__copy .d-md { margin-bottom: var(--sp-4); }
.plan__copy > p { color: var(--ink-2); max-width: 46ch; margin-bottom: var(--sp-6); }
.steps { position: relative; display: grid; gap: var(--sp-5); }
.steps::before { content: ''; position: absolute; left: 0.6875rem; top: 1.5rem; bottom: 1.5rem; width: 2px; background: repeating-linear-gradient(to bottom, #a8a8a8 0 0.375rem, transparent 0.375rem 0.75rem); }
.steps li { position: relative; padding-left: 3rem; }
.steps li > i { position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; background: var(--primary); color: #fff; font: 500 0.75rem/1.5rem var(--mono); font-style: normal; text-align: center; letter-spacing: 0; }
.steps b { display: block; font-weight: 600; font-size: 1rem; margin-bottom: 2px; }
.steps p { color: var(--ink-2); font-size: 0.875rem; line-height: 1.43; max-width: 46ch; }
.steps .ghost { min-height: 0; margin-top: var(--sp-2); }
.stage { position: relative; min-height: clamp(33.75rem, 42vw, 41.25rem); }
.fcard { position: absolute; background: #fff; border: 1px solid var(--hair); padding: var(--sp-5); font-size: 0.875rem; }
.fcard header { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--ink); margin-bottom: var(--sp-2); }
.fcard header b { font-weight: 600; } .fcard header span { color: var(--ink-2); font-size: 0.75rem; }
.fcard--a { top: 0; left: 0; width: 62%; } .fcard--b { bottom: 0; right: 0; width: 60%; }
.frow { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.625rem 0; border-bottom: 1px solid var(--hair); }
.frow:last-child { border-bottom: 0; }
.frow i { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; background: var(--s1); font: 500 0.625rem/1.1 var(--mono); font-style: normal; text-align: center; letter-spacing: 0; }
.frow b { display: block; font-weight: 600; } .frow small { color: var(--ink-2); font-size: 0.75rem; }
.cost { padding: 0.5625rem 0; display: grid; grid-template-columns: 1fr auto; gap: 0.375rem 0.875rem; align-items: baseline; }
.cost i { grid-column: 1 / -1; height: 0.25rem; background: var(--s1); position: relative; }
.cost i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c); }

/* ---------- product tabs ---------- */
.ptabs { display: flex; border-bottom: 1px solid var(--hair); overflow-x: auto; scrollbar-width: none; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.ptabs::-webkit-scrollbar { display: none; }
.ptab { flex: none; padding: 1rem 1.25rem; min-height: 3rem; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--ink-2); font-size: 0.875rem; cursor: pointer; transition: background .11s var(--ease), color .11s; }
.ptab:hover { background: var(--s1); color: var(--ink); }
.ptab[aria-selected="true"], .ptab[aria-pressed="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--primary); }
.tp { display: grid; grid-template-columns: minmax(16.25rem, .7fr) 1.5fr; gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
.tp[hidden] { display: none; }
.tp:not([hidden]) { animation: panelIn .35s var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
.tp__text .d-md { font-size: clamp(1.625rem, 2.4vw, 2.125rem); margin-bottom: var(--sp-4); }
.tp__text > p { color: var(--ink-2); margin-bottom: var(--sp-5); max-width: 40ch; }
.tp__text ul { border-top: 1px solid var(--hair); margin-bottom: var(--sp-4); }
.tp__text li { padding: 0.75rem 0; border-bottom: 1px solid var(--hair); font-size: 0.875rem; }

.win { background: #fff; border: 1px solid var(--hair); letter-spacing: 0; }
.win__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--inv); color: #fff; padding: 0.75rem 1.25rem; font-size: 0.875rem; }
.win__bar b { font-weight: 400; }
.win__tag { font: 400 0.75rem var(--mono); color: #a8a8a8; }
.win__body { padding: clamp(1rem, 2vw, 1.5rem); min-height: clamp(20rem, 30vw, 27.5rem); display: flex; flex-direction: column; gap: 1rem; }
.win__cap { font-size: 0.875rem; color: var(--ink-2); border-top: 1px solid var(--hair); padding-top: 0.75rem; margin-top: auto; }
.win__cap b { color: var(--ink); font-weight: 600; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.tbl th { text-align: left; font-weight: 600; font-size: 0.75rem; color: var(--ink-2); padding: 0 0.75rem 0.625rem 0; border-bottom: 1px solid var(--ink); white-space: nowrap; letter-spacing: .32px; }
.tbl td { padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.tbl .r, .tbl th.r { text-align: right; padding-right: 0; }
.tbl td b { font-weight: 600; }
.tbl tfoot td { border-bottom: 0; border-top: 1px solid var(--ink); font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; padding: 2px 0.5rem; border-radius: 624.9375rem; background: var(--s1); color: var(--ink-2); white-space: nowrap; letter-spacing: .16px; }
.chip::before { content: ''; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; }
.chip--go { background: var(--green-10); color: var(--on-green); } .chip--blue { background: var(--blue-10); color: var(--link-hover); }
.chip--warn { background: var(--red-10); color: var(--on-red); } .chip--idle { background: var(--s1); color: var(--ink-2); }
.nextjobs { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.875rem; align-items: center; color: var(--ink-2); } .nextjobs b { color: var(--ink); font-weight: 600; }
.map { background: var(--s1); padding: 0.25rem; } .map svg { width: 100%; height: auto; }
.facts3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.facts3 > div { padding: 0.75rem 0.75rem 0 0; } .facts3 small { display: block; font-size: 0.75rem; color: var(--ink-2); }
.facts3 .num { font-size: clamp(1.125rem, 1.6vw, 1.625rem); font-weight: 400; }
.bars li { display: grid; grid-template-columns: minmax(9ch, 15ch) 1fr 9ch; gap: 0.875rem; align-items: center; padding: 0.5625rem 0; border-bottom: 1px solid var(--hair); font-size: 0.875rem; }
.bars .bar-t { height: 0.625rem; background: var(--s1); position: relative; }
.bars .bar-t i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: #4589ff; transform-origin: left; }
.bars .bar-t i.n { background: var(--ink); } .bars .bar-t i.g { background: var(--ok-fill); }
.tp:not([hidden]) .bars .bar-t i, .tp:not([hidden]) .gauge i { animation: grow .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + 120ms); }
@keyframes grow { from { transform: scaleX(0); } }
.bars li.total { border-bottom: 0; border-top: 1px solid var(--ink); font-weight: 600; padding-top: 0.75rem; }
.bars .num { text-align: right; }
.wear li { display: grid; grid-template-columns: 1fr minmax(5rem, 26%) minmax(12ch, 18ch); gap: 1.125rem; align-items: center; padding: 0.6875rem 0; border-bottom: 1px solid var(--hair); font-size: 0.875rem; }
.wear b { display: block; font-weight: 600; } .wear small { color: var(--ink-2); font-size: 0.75rem; }
.gauge { height: 0.5rem; background: var(--s1); position: relative; }
.gauge i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--primary); transform-origin: left; } .gauge i.hot { background: var(--err); }
.gauge::after { content: ''; position: absolute; left: 80%; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.wear .when { text-align: right; font-weight: 600; } .wear .when.hot { color: var(--err); }
.journal .tbl td:first-child { padding-left: 0; } .journal .ind { padding-left: 1.25rem !important; color: var(--ink-2); }
.balance { display: flex; justify-content: space-between; align-items: center; background: var(--green-10); color: var(--on-green); padding: 0.625rem 0.875rem; font-size: 0.875rem; font-weight: 600; border-left: 3px solid var(--ok-fill); }
.src { display: flex; flex-wrap: wrap; gap: 0.375rem 0.875rem; font-size: 0.875rem; color: var(--ink-2); } .src b { color: var(--ink); font-weight: 600; }

/* ---------- form controls ---------- */

.field { display: grid; gap: 0.5rem; font-size: 0.75rem; color: var(--ink-2); letter-spacing: .32px; }
.field.full { grid-column: 1 / -1; }
.field input, .field select, .field textarea { width: 100%; min-height: 2.5rem; border: 0; border-bottom: 1px solid #8d8d8d; background: var(--s1); padding: 0 1rem; font-size: 1rem; color: var(--ink); letter-spacing: .16px; }
.field textarea { padding: 0.6875rem 1rem; min-height: 6rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--primary); outline-offset: -2px; border-bottom-color: transparent; }
.field .unit { position: relative; display: block; } .field .unit input { padding-right: 4rem; }
.field .unit em { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 0.75rem; color: var(--ink-3); pointer-events: none; }

.margin { font-size: clamp(2.75rem, 4.6vw, 4.5rem); font-weight: 300; line-height: 1; letter-spacing: -.4px; }
.margin.up { color: var(--ok); } .margin.down { color: var(--err); }

.split { display: flex; height: 0.75rem; gap: 1px; overflow: hidden; }
.split i { display: block; height: 100%; min-width: 2px; transition: flex-basis .4s var(--ease-out); } .split i.m { background: var(--ok-fill); }
.legend li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.5625rem 0; border-bottom: 1px solid var(--hair); font-size: 0.875rem; }
.legend li span:first-child { display: inline-flex; align-items: center; gap: 0.625rem; }
.legend li span:first-child::before { content: ''; width: 0.625rem; height: 0.625rem; background: var(--c); }
.legend .total { border-bottom: 0; border-top: 1px solid var(--ink); font-weight: 600; } .legend .total span:first-child::before { display: none; }
.breakeven { display: grid; gap: 2px; padding-top: var(--sp-2); }
.breakeven .num { font-size: 1.5rem; font-weight: 400; }

/* ---------- purpose band ---------- */
.voice { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); min-height: clamp(22.5rem, 30vw, 32.5rem); }
.voice__text { padding: clamp(2rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem) clamp(2rem, 5vw, 4.5rem) var(--gutter); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.voice blockquote { margin: 0; font-size: clamp(1.625rem, 2.8vw, 2.625rem); font-weight: 300; line-height: 1.2; color: var(--ink); max-width: 20ch; letter-spacing: 0; text-wrap: balance; }
.voice__who b { display: block; font-weight: 600; font-size: 0.875rem; } .voice__who span { color: var(--ink-2); font-size: 0.875rem; }
.voice__img { position: relative; min-height: 17.5rem; } .voice__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- articles ---------- */
.arts__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: var(--sp-5); }
.arts__head .d-md { margin-bottom: var(--sp-5); }
.arts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.art { border: 1px solid var(--hair); margin-left: -1px; background: var(--canvas); }
.art:first-child { margin-left: 0; }
.art a { display: grid; grid-template-rows: auto 1fr; height: 100%; text-decoration: none; transition: background .11s var(--ease); }
.art a:hover { background: var(--s1); }
.art__img { aspect-ratio: 16 / 10; overflow: hidden; } .art__img img { width: 100%; height: 100%; object-fit: cover; }
.art__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.art__meta { font-size: 0.75rem; letter-spacing: .32px; color: var(--ink-2); } .art__meta b { color: var(--primary); font-weight: 600; margin-right: 0.5rem; }
.art h3 { font-size: clamp(1.125rem, 1.5vw, 1.25rem); font-weight: 400; line-height: 1.4; letter-spacing: 0; }
.art p { color: var(--ink-2); font-size: 0.875rem; line-height: 1.43; }
.art__foot { margin-top: auto; padding-top: var(--sp-5); display: flex; justify-content: space-between; align-items: flex-end; font-size: 0.75rem; color: var(--ink-2); letter-spacing: .32px; }
.art__foot svg { width: 1.25rem; height: 1.25rem; color: var(--primary); }

/* ---------- faq: hairline accordion ---------- */
.faq__in { display: grid; grid-template-columns: minmax(15rem, .7fr) 1.6fr; gap: clamp(1.5rem, 5vw, 6rem); align-items: start; }
.faq__list { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 0; min-height: 4rem; font-size: 1.25rem; line-height: 1.4; letter-spacing: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--s1); }
.faq summary::after { content: ''; flex: none; width: 1rem; height: 1rem; margin-right: 0.5rem; background: linear-gradient(var(--ink), var(--ink)) 50% 50%/100% 2px no-repeat, linear-gradient(var(--ink), var(--ink)) 50% 50%/2px 100% no-repeat; transition: transform .11s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 3rem 1.5rem 0; max-width: 64ch; color: var(--ink-2); animation: panelIn .3s var(--ease-out); }

/* ---------- CTA banner + footer ---------- */
.cta { background: var(--primary); color: #fff; padding: clamp(2rem, 4.5vw, 4rem) 0; }
.cta__in { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta h2 { color: #fff; max-width: 24ch; }
.footer { background: var(--inv); color: var(--inv-ink-2); padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem; }
.footer__top { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 3rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.footer__brand img { height: 2.25rem; width: auto; margin-bottom: var(--sp-4); }
.footer__brand p { max-width: 32ch; font-size: 0.875rem; margin-bottom: var(--sp-4); }
.footer__soc { display: flex; gap: 1.25rem; }
.footer h4 { font-size: 0.875rem; font-weight: 600; color: #fff; margin-bottom: var(--sp-4); }
.footer li { margin-bottom: 0.5rem; }
.footer a { text-decoration: none; font-size: 0.875rem; color: var(--inv-ink-2); transition: color .11s; } .footer a:hover { color: #fff; text-decoration: underline; }
.footer__base { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border-top: 1px solid #393939; padding-top: var(--sp-5); font-size: 0.75rem; letter-spacing: .32px; color: #a8a8a8; }
.footer__base a { font-size: 0.75rem; } .footer__base nav { display: flex; gap: 1.5rem; }

/* ---------- demo dialog ---------- */
.demo { border: 0; padding: 0; width: min(47.5rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); overflow: auto; background: #fff; color: var(--ink); }
.demo::backdrop { background: rgba(22,22,22,.7); }
.demo[open] { animation: panelIn .3s var(--ease-out); }
.demo__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: var(--sp-6) var(--sp-6) 0; }
.demo__head p { color: var(--ink-2); font-size: 0.875rem; margin-top: 0.5rem; max-width: 44ch; }
.demo__x { flex: none; width: 3rem; height: 3rem; border: 0; background: none; cursor: pointer; font-size: 1.75rem; line-height: 1; margin: -0.75rem -0.75rem 0 0; } .demo__x:hover { background: var(--s1); }
.form { padding: var(--sp-5) var(--sp-6) var(--sp-6); display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; align-items: start; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips label { position: relative; } .chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--ink-3); font-size: 0.875rem; color: var(--ink); transition: background .11s, color .11s; }
.chips input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.chips input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.msg { grid-column: 1 / -1; background: var(--blue-10); border-left: 3px solid var(--primary); padding: 0.875rem 1rem; font-size: 0.875rem; min-height: 5.5em; }
.msg small { display: block; color: var(--ink-2); font-size: 0.75rem; margin-bottom: 0.375rem; font-weight: 600; }
.form .btn { grid-column: 1 / -1; justify-self: start; min-width: 12rem; }

/* ---------- phone bar ---------- */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none; background: #fff; border-top: 1px solid var(--hair); padding-bottom: env(safe-area-inset-bottom); transform: translateY(110%); transition: transform .3s var(--ease); }
.mbar.is-on { transform: none; } .mbar .btn { flex: 1; min-height: 3rem; }

/* ---------- motion (productive, short) ---------- */
@view-transition { navigation: auto; }
.js-motion [data-reveal] { opacity: 0; transform: translateY(1rem); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }
.js-motion [data-reveal="stagger"] { opacity: 1; transform: none; }
.js-motion [data-reveal="stagger"] > * { opacity: 0; transform: translateY(0.75rem); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), background .11s var(--ease); transition-delay: calc(var(--i, 0) * 60ms), calc(var(--i, 0) * 60ms), 0s; }
.js-motion [data-reveal="stagger"].is-in > * { opacity: 1; transform: none; }
.js-motion [data-reveal="image"] { opacity: 1; transform: none; }
.js-motion [data-reveal="image"] img { clip-path: inset(100% 0 0 0); transition: clip-path .8s var(--ease); }
.js-motion [data-reveal="image"].is-in img { clip-path: inset(0); }
.js-motion [data-reveal="image"].is-in img.done { clip-path: none; }
.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.word > span { display: inline-block; transform: translateY(105%); transition: transform .7s var(--ease-out); transition-delay: calc(var(--w) * 40ms); }
.is-in .word > span, .word.is-in > span { transform: none; }
.no-js .word > span, .motion-done .word > span { transform: none; }
.motion-done [data-reveal], .motion-done [data-reveal] > * { opacity: 1 !important; transform: none !important; }
.motion-done [data-reveal="image"] img { clip-path: none !important; }

/* ---------- responsive: Carbon breakpoints 1056 / 672 ---------- */
@media (max-width: 1056px) {
  .bar nav { display: none; }
  .nav, .header__cta .signin { display: none; } .header__cta .btn { display: none; }
  .burger { display: block; }
  .hero__in, .intro__top, .sec-head, .plan__in, .faq__in { grid-template-columns: 1fr; }
  .hero__vis { height: auto; max-height: 35rem; } .dash { min-width: 43.75rem; font-size: clamp(0.6875rem, 1.3vw, 0.875rem); }
  .tiles__in { grid-template-columns: repeat(4, 1fr); }
    
  .cards, .benefits__grid { grid-template-columns: 1fr 1fr; } .card:nth-child(3), .benefits__grid .card:nth-child(3) { margin-left: 0; }
  .card:nth-child(n+3) { margin-top: -1px; }
  .tp { grid-template-columns: 1fr; }
  .voice { grid-template-columns: 1fr; } .voice__text { padding: 2.5rem var(--gutter); }
  .arts__grid { grid-template-columns: 1fr 1fr; } .art:nth-child(3) { margin-left: 0; margin-top: -1px; }
  .stage { min-height: 35rem; }
  .footer__top { grid-template-columns: 1fr 1fr 1fr; } .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 672px) {
  :root { --cut: 1.75rem; }
  body { padding-bottom: 3rem; }
  .bar { display: none; }
  .mbar { display: flex; }
  .hero__actions { flex-direction: column; width: 100%; } .hero__actions .btn { width: 100%; }
  .hero__vis { max-height: 26.25rem; }
  .dash { min-width: 0; grid-template-columns: 3.4em 1fr; font-size: 0.6875rem; } .dash__main { padding: 1.1em; }
  .dash__kpis { grid-template-columns: 1fr 1fr; } .kpi:nth-child(3) { border-left: 0; } .kpi:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .dash__grid { grid-template-columns: 1fr; } .dash__fleet, .dash__tables { display: none; }
  .tiles__in { grid-template-columns: 1fr 1fr; }
  .cards, .benefits__grid { grid-template-columns: 1fr; } .card { margin-left: 0 !important; } .card + .card { margin-top: -1px; }
  .win__body { min-height: 0; }
  .bars li { grid-template-columns: 1fr 8ch; } .bars .bar-t { grid-column: 1 / -1; grid-row: 2; }
  .wear li { grid-template-columns: 1fr auto; } .wear .gauge { grid-column: 1 / -1; grid-row: 2; }
  .tbl .hide-s { display: none; }
   
  .stage { min-height: 0; display: grid; gap: 1rem; } .fcard { position: static; width: auto !important; }
  .arts__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; }
  .arts__grid::-webkit-scrollbar { display: none; } .art { flex: 0 0 82%; scroll-snap-align: start; margin-left: -1px; }
  .faq summary { font-size: 1.125rem; }
  .form { grid-template-columns: 1fr; padding: var(--sp-5) var(--sp-4) var(--sp-5); } .demo__head { padding: var(--sp-5) var(--sp-4) 0; }
  .cta__in { flex-direction: column; align-items: stretch; } .cta .btn { width: 100%; }
  .footer__top { grid-template-columns: 1fr 1fr; } .footer__top > div:nth-child(2) { grid-column: 1 / -1; } .footer .cols2 { columns: 2; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .word > span { transform: none; }
}

/* =====================================================================================
   v4 components: mega menu, full-bleed dashboard hero, link cards, capability grids,
   image placeholders, inner-page heroes, pricing, help center, contact
   ===================================================================================== */
.ic { width: 1rem; height: 1rem; flex: none; }
.pic { width: 3rem; height: 3rem; flex: none; }
.crumb__sep { width: .75rem; height: .75rem; color: var(--ink-3); }

/* ---------- mega menu ---------- */
.nav__item { display: flex; height: 100%; }
.nav__btn, .nav__link { display: flex; align-items: center; gap: .375rem; padding: 0 1rem; height: 100%; font-size: .875rem; color: var(--ink-2); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background .11s, color .11s; }
.nav__btn:hover, .nav__link:hover { background: var(--s1); color: var(--ink); }
.nav__btn[aria-expanded="true"] { background: var(--s1); color: var(--ink); border-bottom-color: var(--primary); }
.chev { transition: transform .15s var(--ease); }
[aria-expanded="true"] > .chev { transform: rotate(180deg); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--canvas); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); z-index: 95; }
.mega[hidden] { display: none; }
.mega:not([hidden]) { animation: panelIn .18s var(--ease-out); }
.mega__in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); padding: 2rem 0 2.5rem; }
.mega__in--eq { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__h { font-size: .75rem; color: var(--ink-2); margin-bottom: .75rem; letter-spacing: .32px; }
.mega__col--2 .mega__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; }
.mi { display: grid; grid-template-columns: 2.25rem 1fr; gap: .875rem; padding: .625rem .5rem; margin: 0 -.5rem; text-decoration: none; align-items: start; color: var(--ink); transition: background .11s; }
.mi:hover { background: var(--s1); }
.mi__pic { width: 2.25rem; height: 2.25rem; color: var(--ink); }
.mi b { display: block; font-weight: 600; font-size: .875rem; line-height: 1.3; }
.mi small { display: block; font-size: .75rem; color: var(--ink-2); line-height: 1.4; margin-top: .125rem; letter-spacing: .16px; }
.mega__promo { background: var(--s1); padding: 1.25rem; display: grid; gap: 1rem; align-content: start; }
.mega__promo p { font-size: .875rem; color: var(--ink-2); }
.mega__promo .ghost { min-height: 0; }
.sheet .sheet__g summary { list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 1.25rem; font-weight: 300; padding: 1rem 0; border-bottom: 1px solid var(--hair); cursor: pointer; min-height: 3.5rem; }
.sheet .sheet__g summary::-webkit-details-marker { display: none; }
.sheet .sheet__g[open] summary .chev { transform: rotate(180deg); }
.sheet .sheet__g > div { display: grid; padding: .25rem 0 .75rem; }
.sheet .sheet__g > div a { font-size: .9375rem; font-weight: 400; padding: .75rem 0 .75rem 1rem; border-bottom: 0; color: var(--ink-2); opacity: 1; transform: none; animation: none; text-decoration: none; }

/* ---------- hero: the dashboard runs off the right edge ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(105deg, var(--canvas) 38%, var(--blue-10) 100%); border-bottom: 1px solid var(--hair); height: clamp(36rem, 47vw, 85rem); }
.hero__in { position: relative; z-index: 2; padding-top: clamp(2rem, 5vw, 4.5rem); display: grid; grid-template-columns: 36% 1fr; }
.hero__copy { display: grid; gap: 1.5rem; align-content: start; }
.hero__copy .label { margin: 0; }
.hero__title { font-size: clamp(2.25rem, 3.7vw, 4.25rem); }
.hero__actions { display: flex; flex-wrap: wrap; }
.hero__actions .btn { min-width: 12rem; }
.hero__video { justify-self: start; min-height: 0; }
.hero__video svg { width: 1.25rem; height: 1.25rem; }
.hero__vis { position: absolute; z-index: 1; top: clamp(2rem, 4.5vw, 4rem); left: calc(max(var(--gutter), (100vw - var(--content)) / 2) + var(--content) * .4); font-size: max(11px, .86vw); -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.anchors { position: sticky; top: var(--nav); z-index: 60; background: var(--canvas); border-bottom: 1px solid var(--hair); }
.anchors .wrap { display: flex; overflow-x: auto; scrollbar-width: none; }
.anchors .wrap::-webkit-scrollbar { display: none; }
.anchors a { padding: .875rem 1.25rem; font-size: .875rem; color: var(--ink-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: background .11s, color .11s; }
.anchors a:hover { background: var(--s1); color: var(--ink); }
.anchors a.is-on { color: var(--ink); border-bottom-color: var(--primary); font-weight: 600; }

/* app shell dashboard (everything in em so it scales with the screen) */
.d2 { width: 100em; background: #fff; border: 1px solid var(--hair); line-height: 1.35; color: var(--ink); letter-spacing: 0; font-family: var(--sans); }
.d2 .ic { width: 1.25em; height: 1.25em; }
.d2__top { display: flex; align-items: center; gap: 1em; background: var(--inv); color: #fff; padding: 0 1em; height: 3.6em; }
.d2__top img { width: 2em; height: auto; } .d2__top b { font-weight: 400; margin-right: 1.5em; font-size: 1.05em; }
.d2__search { display: flex; align-items: center; gap: .6em; background: #262626; color: #a8a8a8; padding: 0 1em; height: 2.4em; width: 26em; font-size: .9em; margin-right: auto; }
.d2__ico { position: relative; display: grid; place-items: center; width: 2.4em; height: 2.4em; color: #c6c6c6; }
.d2__ico i { position: absolute; top: .45em; right: .45em; width: .5em; height: .5em; background: #fa4d56; border-radius: 50%; }
.d2__user { background: #393939; color: #fff; }
.d2__body { display: grid; grid-template-columns: 15em 1fr; }
.d2__nav { border-right: 1px solid var(--hair); padding: .8em 0 2em; background: #fff; }
.d2__grp { font-size: .8em; color: var(--ink-2); padding: 1em 1.4em .4em; }
.d2__it { display: flex; align-items: center; gap: .9em; padding: .65em 1.4em; color: var(--ink-2); font-size: .95em; }
.d2__it.is-on { background: var(--s1); color: var(--ink); box-shadow: inset 3px 0 0 var(--primary); font-weight: 600; }
.d2__main { padding: 1.2em 1.6em 2em; display: grid; gap: 1em; background: var(--s1); min-width: 0; align-content: start; }
.d2__crumb { font-size: .8em; color: var(--ink-2); }
.d2__head { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.d2__head h4 { font-size: 1.9em; font-weight: 300; letter-spacing: 0; line-height: 1.2; }
.d2__tools { display: flex; align-items: center; gap: .6em; }
.d2__sel { display: flex; align-items: center; gap: .6em; background: #fff; border-bottom: 1px solid #8d8d8d; padding: 0 .9em; height: 2.4em; font-size: .9em; }
.d2__new { display: flex; align-items: center; gap: 2.5em; background: var(--primary); color: #fff; padding: 0 .9em; height: 2.4em; font-size: .9em; }
.d2 .tag-sample { font: 400 .8em var(--mono); color: var(--ink-3); margin-left: .6em; }
.d2__kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.d2__kpi { background: #fff; padding: .9em 1em; }
.d2__kpi small { display: block; color: var(--ink-2); font-size: .85em; }
.d2__kpi b { display: block; font-size: 2.1em; font-weight: 300; line-height: 1.15; letter-spacing: -.01em; margin: .1em 0 .2em; }
.d2__row { display: flex; align-items: flex-end; justify-content: space-between; }
.d2__kpi em { font: 500 .8em var(--mono); font-style: normal; color: var(--ok); }
.spark { width: 4.5em; height: 1.6em; }
.d2__grid { display: grid; grid-template-columns: 1.5fr 1.2fr 1fr; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.d2__card { background: #fff; padding: 1em 1.2em; min-width: 0; }
.d2__card h5 { display: flex; justify-content: space-between; align-items: baseline; font-size: .95em; font-weight: 600; margin-bottom: .8em; }
.d2__card h5 span { font-weight: 400; color: var(--ink-2); font-size: .85em; }
.d2__card svg:not(.ic):not(.spark) { width: 100%; height: auto; }
.d2__leg { display: flex; gap: .6em; align-items: center; font-size: .8em; color: var(--ink-2); margin-top: .7em; }
.d2__leg i { width: .7em; height: .7em; background: var(--c); margin-left: .6em; } .d2__leg i:first-child { margin-left: 0; }
.d2__card--w ul { display: grid; }
.d2__al { display: flex; gap: .8em; padding: .75em 0; border-bottom: 1px solid var(--hair); }
.d2__al:last-child { border-bottom: 0; }
.d2__al--warn .ic { color: var(--err); } .d2__al--blue .ic { color: var(--primary); }
.d2__al b { display: block; font-size: .9em; font-weight: 600; } .d2__al small { font-size: .8em; color: var(--ink-2); }
.d2__card--t { border: 1px solid var(--hair); }
.d2 .tbl { font-size: .9em; } .d2 .tbl th { font-size: .85em; padding-bottom: .5em; } .d2 .tbl td { padding: .6em .8em .6em 0; }

/* ---------- placeholders for images that will be generated ---------- */
.ph { position: relative; aspect-ratio: var(--ar, 16/9); width: 100%; background: var(--s2); border: 1px dashed #8d8d8d; display: grid; place-items: center; color: var(--ink-2); overflow: hidden; }
.ph__in { display: grid; justify-items: center; gap: .25rem; padding: 1rem; text-align: center; }
.ph .ic { width: 2rem; height: 2rem; color: var(--ink-3); margin-bottom: .25rem; }
.ph b { font: 500 .75rem var(--mono); color: var(--ink); letter-spacing: 0; }
.ph span { font-size: .875rem; max-width: 30ch; line-height: 1.35; }
.ph small { font: 400 .6875rem var(--mono); color: var(--ink-3); letter-spacing: 0; }
.ph--sm span { font-size: .75rem; }
.band--s1 .ph { background: #d6d6d6; }
.voice__img .ph { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border: 0; }

/* ---------- link cards, solution cards, capabilities ---------- */
.lcards { display: grid; grid-template-columns: repeat(3, 1fr); }
.lcards--4 { grid-template-columns: repeat(4, 1fr); }
.lcard { display: flex; flex-direction: column; gap: .75rem; padding: 2rem; min-height: 15rem; border: 1px solid var(--hair); margin: -1px 0 0 -1px; background: var(--canvas); text-decoration: none; color: var(--ink); transition: background .11s var(--ease); }
.lcard:hover { background: var(--s1); }
.band--s1 .lcard:hover { background: #fff; }
.lcard__pic { width: 3rem; height: 3rem; margin-bottom: 1rem; color: var(--ink); }
.lcard p { color: var(--ink-2); font-size: .875rem; line-height: 1.43; flex: 1; }
.lcard__go { display: inline-flex; align-items: center; gap: .5rem; color: var(--primary); font-size: .875rem; }
.lcard:hover .lcard__go .ic, .scard:hover .lcard__go .ic { transform: translateX(4px); } .lcard__go .ic { transition: transform .11s var(--ease); }
.scards { display: grid; grid-template-columns: repeat(3, 1fr); }
.scard { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--hair); margin: -1px 0 0 -1px; background: var(--canvas); text-decoration: none; color: var(--ink); transition: background .11s var(--ease); }
.scard:hover { background: var(--s1); } .band--s1 .scard:hover { background: #fff; }
.scard .ph { border-width: 0 0 1px 0; }
.scard__b { padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.scard__pic { width: 2.5rem; height: 2.5rem; }
.scard p { color: var(--ink-2); font-size: .875rem; line-height: 1.43; flex: 1; }
.caps { display: grid; grid-template-columns: repeat(3, 1fr); }
.caps--4 { grid-template-columns: repeat(4, 1fr); }
.cap { padding: 2rem; border: 1px solid var(--hair); margin: -1px 0 0 -1px; background: var(--canvas); }
.band--s1 .cap { background: var(--canvas); }
.cap__ic { width: 2rem; height: 2rem; color: var(--primary); margin-bottom: 1.25rem; }
.cap h3 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.cap p { font-size: .875rem; color: var(--ink-2); line-height: 1.43; }
.paths { display: grid; grid-template-columns: repeat(3, 1fr); }
.path { padding: 2rem; border: 1px solid var(--hair); margin-left: -1px; background: var(--canvas); display: grid; gap: .75rem; align-content: start; }
.path:first-child { margin-left: 0; }
.path__pic { width: 3rem; height: 3rem; margin-bottom: .5rem; }
.path p { color: var(--ink-2); font-size: .875rem; line-height: 1.43; }
.pteases { display: grid; grid-template-columns: repeat(3, 1fr); }
.ptease { padding: 2rem; border: 1px solid var(--hair); margin-left: -1px; background: var(--canvas); display: grid; gap: .5rem; align-content: start; }
.ptease:first-child { margin-left: 0; }
.ptease b { font-size: 1.75rem; font-weight: 300; line-height: 1.2; } .ptease span { font-size: .875rem; color: var(--primary); } .ptease p { color: var(--ink-2); font-size: .875rem; }

/* ---------- alternating image and text rows ---------- */
.alts { display: grid; gap: clamp(3rem, 6vw, 6rem); }
.alt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.alt--rev .alt__vis { order: 2; }
.alt__txt .d-md { margin-bottom: 1rem; }
.alt__txt > p:not(.label) { color: var(--ink-2); max-width: 46ch; margin-bottom: 1.25rem; }
.ticks { border-top: 1px solid var(--hair); margin: 0 0 1rem; }
.ticks li { position: relative; padding: .625rem 0 .625rem 1.75rem; border-bottom: 1px solid var(--hair); font-size: .875rem; }
.ticks li::before { content: ''; position: absolute; left: 0; top: .8rem; width: 1rem; height: 1rem; background: var(--primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13 24L4 15 5.414 13.586 13 21.171 26.586 7.586 28 9 13 24z'/%3E%3C/svg%3E") center/contain no-repeat; }
.tp__pic { width: 3rem; height: 3rem; margin-bottom: 1rem; }

/* ---------- steps ---------- */
.stp { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; gap: 0; }
.stp::before { content: ''; position: absolute; left: 1.5rem; right: 0; top: 1.75rem; height: 2px; background: repeating-linear-gradient(to right, #a8a8a8 0 6px, transparent 6px 12px); }
.stp li { position: relative; padding: 0 2rem 0 0; }
.stp__n { position: relative; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; background: var(--primary); color: #fff; font: 500 .75rem var(--mono); margin: 1rem 0 1.5rem; }
.stp h3 { font-size: 1.25rem; font-weight: 400; margin-bottom: .5rem; }
.stp p { color: var(--ink-2); font-size: .875rem; max-width: 30ch; }

/* ---------- inner page hero ---------- */
.phero { border-bottom: 1px solid var(--hair); background: linear-gradient(105deg, var(--canvas) 45%, var(--blue-10) 100%); }
.crumb { display: flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--ink-2); padding: 1.25rem 0 0; flex-wrap: wrap; }
.crumb a { color: var(--primary); text-decoration: none; } .crumb a:hover { text-decoration: underline; }
.phero__in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(2rem, 4vw, 4rem) 0 clamp(2.5rem, 5vw, 5rem); }
.phero__copy { display: grid; gap: 1.5rem; align-content: start; }
.phero__copy .label { margin: 0; }
.phero__copy h1 { font-size: clamp(2.25rem, 3.6vw, 3.75rem); }
.phero__vis { min-width: 0; }
.arch { border: 1px solid var(--hair); background: #fff; padding: 1.25rem; display: grid; gap: 1rem; }
.arch__mods { display: grid; grid-template-columns: repeat(7, 1fr); padding-left: 1px; }
.arch__m { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem .375rem; border: 1px solid var(--hair); margin-left: -1px; text-decoration: none; font-size: .75rem; text-align: center; line-height: 1.25; color: var(--ink); transition: background .11s; }
.arch__m:hover { background: var(--s1); }
.arch__pic { width: 2.25rem; height: 2.25rem; }
.arch__bar { background: var(--inv); color: #fff; padding: 1rem 1.25rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.arch__bar b { font-weight: 300; font-size: 1.5rem; } .arch__bar span { color: var(--inv-ink-2); font-size: .875rem; }
.arch__base { display: grid; grid-template-columns: repeat(4, 1fr); padding-left: 1px; }
.arch__base span { display: flex; align-items: center; gap: .5rem; padding: .75rem; border: 1px solid var(--hair); margin-left: -1px; font-size: .8125rem; }
.arch__base .ic { color: var(--primary); }

/* ---------- before / after, pricing, matrix ---------- */
.ba { width: 100%; border-collapse: collapse; }
.ba th { text-align: left; font-size: .875rem; font-weight: 600; padding: 0 1.5rem .75rem 0; border-bottom: 1px solid var(--ink); width: 50%; } .ba th:last-child { color: var(--primary); }
.ba td { padding: 1.125rem 1.5rem 1.125rem 0; border-bottom: 1px solid var(--hair); color: var(--ink-2); } .ba td:last-child { color: var(--ink); font-weight: 600; }
.caps--plain .cap { padding: 2rem; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); }
.plan { border: 1px solid var(--hair); margin-left: -1px; padding: 2rem; background: #fff; display: flex; flex-direction: column; gap: 1rem; }
.plan:first-child { margin-left: 0; }
.plan--hi { border: 2px solid var(--primary); position: relative; z-index: 1; margin-left: -1px; }
.plan__fit { font-size: .75rem; color: var(--ink-2); letter-spacing: .32px; } .plan__t { color: var(--ink-2); font-size: .875rem; min-height: 3rem; }
.plan__price b { display: block; font-size: 1.75rem; font-weight: 300; line-height: 1.2; } .plan__price span { font-size: .75rem; color: var(--ink-2); }
.plan .btn { align-self: flex-start; min-width: 11rem; }
.plan ul { border-top: 1px solid var(--hair); margin-top: .5rem; }
.plan li { display: flex; gap: .75rem; padding: .625rem 0; border-bottom: 1px solid var(--hair); font-size: .875rem; }
.tick { color: var(--ok); }
.matrix { overflow-x: auto; background: #fff; border: 1px solid var(--hair); }
.matrix table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.matrix th, .matrix td { padding: .875rem 1.25rem; border-bottom: 1px solid var(--hair); text-align: center; font-size: .875rem; }
.matrix thead th { border-bottom: 1px solid var(--ink); font-weight: 600; } .matrix th[scope="row"] { text-align: left; font-weight: 400; }
.matrix .ic { margin: 0 auto; } .matrix .dash { color: var(--ink-3); }
.ptease-box { background: #fff; border: 1px solid var(--hair); padding: 2rem; display: grid; gap: 1rem; } .ptease-box b { font-size: 1.5rem; font-weight: 300; } .ptease-box small { font-size: .75rem; color: var(--ink-2); }

/* ---------- help center ---------- */
.phero--help { background: linear-gradient(105deg, var(--canvas) 40%, var(--blue-10) 100%); }
.help__hero { display: grid; gap: 1.25rem; padding: clamp(2rem, 5vw, 4.5rem) 0; max-width: 46rem; }
.hsearch { display: flex; align-items: center; gap: .75rem; background: #fff; border: 1px solid var(--hair); border-bottom: 2px solid var(--ink); padding: 0 1rem; min-height: 3.5rem; }
.hsearch .ic { width: 1.25rem; height: 1.25rem; color: var(--ink-2); }
.hsearch input { flex: 1; border: 0; background: none; font-size: 1.125rem; min-height: 3.5rem; outline: 0; letter-spacing: 0; }
.hsearch:focus-within { outline: 2px solid var(--primary); outline-offset: -2px; }
.hsearch__n { font-size: .75rem; color: var(--ink-2); }
.help__hint { font-size: .875rem; color: var(--ink-2); }
.pop { columns: 2; column-gap: 3rem; border-top: 1px solid var(--ink); }
.pop li { break-inside: avoid; border-bottom: 1px solid var(--hair); }
.pop a { display: flex; gap: .75rem; align-items: center; padding: 1rem 0; text-decoration: none; font-size: .9375rem; } .pop a:hover { color: var(--primary); } .pop .ic { color: var(--ink-3); }
.pop li[hidden] { display: none; }
.advs { display: grid; grid-template-columns: repeat(4, 1fr); }
.adv { display: grid; gap: .25rem; padding: 1.5rem 3rem 1.5rem 1.5rem; border: 1px solid var(--hair); margin-left: -1px; text-decoration: none; position: relative; background: #fff; transition: background .11s; }
.adv:first-child { margin-left: 0; } .adv:hover { background: var(--s1); }
.adv b { font-size: 1.25rem; font-weight: 300; } .adv span { font-size: .875rem; color: var(--ink-2); }
.adv .ic { position: absolute; right: 1.25rem; bottom: 1.25rem; color: var(--primary); }

/* ---------- contact ---------- */

.phero--contact .contact__in { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); padding: clamp(2rem, 4vw, 4rem) 0 clamp(2.5rem, 5vw, 5rem); align-items: start; }
.contact__copy { display: grid; gap: 1.25rem; align-content: start; } .contact__copy h1 { font-size: clamp(2.25rem, 3.6vw, 3.75rem); }
.contact__copy .label { margin: 0; }
.contact__det { margin-top: 1rem; display: grid; gap: .5rem; } .contact__det p { display: flex; gap: .75rem; align-items: center; font-size: .9375rem; } .contact__det p.label { margin-bottom: .25rem; }
.contact__form { background: #fff; border: 1px solid var(--hair); }
.footer__soc a { display: inline-flex; } .footer__soc .ic { width: 1.25rem; height: 1.25rem; }
.footer__base .lang { display: inline-flex; align-items: center; gap: .5rem; color: #a8a8a8; font-size: .75rem; }

/* ---------- responsive for v4 components ---------- */
@media (max-width: 1056px) {
  .mega { display: none !important; }
  .hero { height: auto; padding-bottom: 0; }
  .hero__in { grid-template-columns: 1fr; padding-bottom: 2rem; }
  .hero__vis { position: relative; top: auto; left: auto; margin: 0 0 0 var(--gutter); font-size: max(10px, 1.1vw); max-height: 30rem; overflow: hidden; }
  .lcards, .lcards--4, .scards, .paths, .pteases, .plans, .caps, .caps--4 { grid-template-columns: 1fr 1fr; }
  .advs { grid-template-columns: 1fr 1fr; } .adv:nth-child(3) { margin-left: 0; margin-top: -1px; } .adv:nth-child(4) { margin-top: -1px; }
  .alt, .phero__in, .phero--contact .contact__in { grid-template-columns: 1fr; } .alt--rev .alt__vis { order: 0; }
  .stp { grid-template-columns: 1fr; row-gap: 2rem; } .stp::before { display: none; }
  .arch__mods { grid-template-columns: repeat(4, 1fr); } .arch__base { grid-template-columns: 1fr 1fr; }
  
  .footer__top { grid-template-columns: 1fr 1fr 1fr; }
  .pop { columns: 1; }
}
@media (max-width: 672px) {
  .lcards, .lcards--4, .scards, .paths, .pteases, .plans, .caps, .caps--4, .advs { grid-template-columns: 1fr; }
  .path, .ptease, .plan, .adv { margin-left: 0; margin-top: -1px; } .path:first-child, .ptease:first-child, .plan:first-child, .adv:first-child { margin-top: 0; }
  .hero__actions { flex-direction: column; width: 100%; } .hero__actions .btn { width: 100%; }
  .hero__vis { max-height: 26rem; font-size: 9px; }
  .lcard { min-height: 0; }
  .arch__mods { grid-template-columns: repeat(2, 1fr); } .arch__base { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; } .footer__top > div:nth-child(2) { grid-column: auto; }
  .ba th, .ba td { padding-right: .75rem; font-size: .875rem; }
  .anchors a { padding: .75rem 1rem; }
}

/* =====================================================================================
   v5: display face, hover ladder, navy product chrome, grain and brand materials,
   photography, real map, brand pages
   ===================================================================================== */
:root { --navy: #011e39; --navy-deep: #010f1f; --hover-1: #e8e8e8; --display: 'Archivo', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; }

/* display face: wide and heavy like the Corvex wordmark. Body and product UI stay IBM Plex Sans. */
.d-lg, .d-md, .headline, .margin, .card .big, .ptease b, .plan__price b, .arch__bar b, .adv b, .voice blockquote { font-family: var(--display); font-weight: 680; font-stretch: 112%; letter-spacing: -.022em; }
.d-lg { font-size: clamp(2.1rem, 3.5vw, 3.75rem); line-height: 1.06; }
.d-md { font-size: clamp(1.75rem, 2.5vw, 2.75rem); line-height: 1.1; }
.hero__title { font-size: clamp(2.1rem, 3.3vw, 3.7rem); }
.phero__copy h1, .contact__copy h1 { font-size: clamp(2rem, 3.2vw, 3.3rem); }
.tp__text .d-md { font-size: clamp(1.5rem, 2vw, 2.25rem); }
.card .big { font-size: clamp(2.5rem, 3.4vw, 4rem); font-weight: 700; }
.voice blockquote { font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1.12; font-weight: 650; max-width: 18ch; }
.ptease b, .plan__price b { font-size: 1.5rem; font-weight: 650; }
.adv b { font-size: 1.125rem; font-weight: 650; }
.margin { font-weight: 650; }
.arch__bar b { font-size: 1.25rem; font-weight: 650; }
.stp h3, .alt__txt .d-md { font-family: var(--display); }
.cta h2 { font-weight: 650; }

/* hover ladder: every interactive surface moves one step. White cards on grey bands go darker, not white. */
.btn svg, .ghost svg { transition: transform .15s var(--ease); }
.btn:hover svg { transform: translate(2px, -2px); }
.btn:active svg { transform: none; }
.btn--tertiary:hover, .btn--white:hover { box-shadow: none; }
.band--s1 .lcard:hover, .band--s1 .scard:hover, .band--s1 .card:hover, .band--s1 .adv:hover, .band--s1 .art a:hover, .band--s1 .path:hover { background: var(--hover-1); }
.card:hover, .lcard:hover, .scard:hover, .adv:hover { background: var(--s1); }
.lcard:hover .lcard__pic, .scard:hover .scard__pic { color: var(--primary); }
.lcard__pic, .scard__pic { transition: color .15s var(--ease); }
.path:hover, .ptease:hover { background: var(--s1); } .band--s1 .ptease:hover { background: var(--hover-1); }
.mtile:hover, .arch__m:hover { background: var(--s1); }
.nav__link:hover, .nav__btn:hover, .anchors a:hover, .ptab:hover { background: var(--s1); }
.ph--img img { transition: transform 1s var(--ease-out); }
.scard:hover .ph--img img, .art a:hover .ph--img img { transform: scale(1.045); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* navy product chrome (the colour of the wordmark) */
.d2__top { background: var(--navy-deep); } .d2__search { background: rgba(255,255,255,.08); } .d2__user { background: rgba(255,255,255,.14); }
.d2__nav { background: var(--navy); border-right: 0; }
.d2__grp { color: rgba(255,255,255,.5); }
.d2__it { color: rgba(255,255,255,.78); }
.d2__it.is-on { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 3px 0 0 var(--logo-green); }
.win__bar, .arch__bar { background: var(--navy); }
.d2 .ic { width: 1.3em; height: 1.3em; }

/* grain on every surface, and brand materials in the empty areas */
body { background-color: var(--canvas); background-image: url(../img/grain-dark.png); }
.band--s1 { background: var(--s1) url(../img/grain-dark.png); }
.hero { background: url(../img/corridor-lines.svg) no-repeat -14% 170% / min(52rem, 60vw) auto, url(../img/grain-dark.png), linear-gradient(105deg, var(--canvas) 38%, var(--blue-10) 100%); }
.phero { background: url(../img/corridor-lines.svg) no-repeat -10% 175% / min(46rem, 60vw) auto, url(../img/grain-dark.png), linear-gradient(105deg, var(--canvas) 45%, var(--blue-10) 100%); }
.cta { background: url(../img/mark-wm-light.png) no-repeat right -4rem center / auto 190%, url(../img/grain-light.png), var(--primary); }
.footer { background: url(../img/mark-wm-light.png) no-repeat right -3rem bottom -6rem / auto 130%, url(../img/grain-light.png), var(--navy); color: rgba(255,255,255,.78); }
.voice { background: var(--tint, #edf5ff) url(../img/grain-dark.png); }
.voice__text { position: relative; }
.brandband { background: url(../img/mark-wm-light.png) no-repeat -10rem center / auto 170%, url(../img/grain-light.png), var(--navy); color: #fff; padding: var(--section) 0; }
.brandband .d-md, .brandband h3 { color: #fff; } .brandband .sec-head p:not(.label) { color: var(--inv-ink-2); } .brandband .label { color: rgba(255,255,255,.6); }
.bm { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 1.4vw, 1.5rem); }
.bm--5 { grid-template-columns: repeat(6, 1fr); } .bm--5 figure:nth-child(-n+2) { grid-column: span 3; } .bm--5 figure:nth-child(n+3) { grid-column: span 2; }
.bm figure { margin: 0; } .bm .ph { border: 0; } .bm figcaption { margin-top: .75rem; font-size: .8125rem; color: var(--inv-ink-2); display: flex; justify-content: space-between; gap: 1rem; }
.bm figcaption b { color: #fff; font-weight: 600; }
.band:not(.band--s1) .bm figcaption { color: var(--ink-2); } .band:not(.band--s1) .bm figcaption b { color: var(--ink); }
.lockups { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--hair); }
.lk { display: grid; place-items: center; min-height: 12rem; padding: 2rem; border-left: 1px solid var(--hair); background: #fff; position: relative; }
.lk:first-child { border-left: 0; } .lk img { max-width: 100%; max-height: 4.5rem; width: auto; }
.lk--navy { background: var(--navy) url(../img/grain-light.png); border-color: var(--navy); } .lk--grey { background: var(--s1) url(../img/grain-dark.png); } .lk--green { background: var(--logo-green) url(../img/grain-light.png); }
.lk small { position: absolute; left: 1rem; bottom: .75rem; font: 400 .6875rem var(--mono); color: var(--ink-3); } .lk--navy small, .lk--green small { color: rgba(255,255,255,.7); }
.swatches { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 1.5rem; }
.sw { padding: 4.5rem 1rem 1rem; font: 400 .75rem/1.4 var(--mono); border: 1px solid var(--hair); margin-left: -1px; }
.sw b { display: block; font: 600 .875rem var(--sans); letter-spacing: .1px; margin-bottom: .125rem; }

/* photography */
.ph--img { border: 0; background: var(--s2); }
.ph--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* real map */
.cmap { width: 100%; height: auto; display: block; }
.map--real { padding: 0; background: #e5eef9; }
.livemap { display: grid; grid-template-columns: 1.7fr 1fr; gap: 0; border: 1px solid var(--hair); background: #fff; }
.livemap__map { position: relative; min-width: 0; border-right: 1px solid var(--hair); }
.livemap__side { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.livemap__side h3 { font-size: 1rem; font-weight: 600; }
.livemap__side .tbl td { padding: .75rem .5rem .75rem 0; }
.livemap__leg { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .75rem; color: var(--ink-2); margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--hair); }
.livemap__leg i { display: inline-block; width: .6rem; height: .6rem; margin-right: .4rem; background: var(--c); }
.livemap__cap { position: absolute; left: 1rem; bottom: .75rem; font: 400 .6875rem var(--mono); color: #525252; background: rgba(255,255,255,.85); padding: .15rem .4rem; }

@media (max-width: 1056px) { .livemap { grid-template-columns: 1fr; } .livemap__map { border-right: 0; border-bottom: 1px solid var(--hair); } .lockups { grid-template-columns: 1fr 1fr; } .lk:nth-child(3) { border-left: 0; } .swatches { grid-template-columns: repeat(3, 1fr); } .bm--5 { grid-template-columns: repeat(2, 1fr); } .bm--5 figure:nth-child(n) { grid-column: span 1; } .bm--5 figure:first-child { grid-column: span 2; } }
@media (max-width: 672px) { .bm, .bm--5 { grid-template-columns: 1fr; } .bm--5 figure:first-child { grid-column: auto; } .lockups { grid-template-columns: 1fr; } .lk { border-left: 0; border-top: 1px solid var(--hair); } .lk:first-child { border-top: 0; } .swatches { grid-template-columns: 1fr 1fr; } }

.livemap__kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--ink); margin-top: .5rem; }
.livemap__kpis div { padding: 1rem .75rem 0 0; } .livemap__kpis small { display: block; font-size: .75rem; color: var(--ink-2); line-height: 1.3; }
.livemap__kpis b { display: block; font: 700 1.5rem/1.2 var(--display); font-stretch: 108%; letter-spacing: -.02em; margin-top: .25rem; }

/* =====================================================================================
   v6: buttons that stay distinct on hover, rounded product dashboard, intent cards
   ===================================================================================== */
/* every button state has its own look: primary darkens, outline washes light blue, white washes blue */
.btn:hover { background: #0043ce; }
.btn:active { background: #002d9c; }
.btn--tertiary { background: #fff; color: var(--primary); border-color: var(--primary); }
.btn--tertiary:hover { background: var(--blue-10); color: #0043ce; border-color: #0043ce; }
.btn--tertiary:active { background: #d0e2ff; border-color: #002d9c; color: #002d9c; }
.btn--secondary:hover { background: #393939; }
.btn--white { background: #fff; color: var(--primary); }
.btn--white:hover { background: #d0e2ff; color: #0043ce; }
.btn--white:active { background: #a6c8ff; }
.btn--line:hover { background: var(--blue-10); }
.ghost:hover { color: #0043ce; text-decoration: underline; text-underline-offset: 3px; }
.mbar .btn--tertiary:hover { background: var(--blue-10); }
.hero__actions { gap: .75rem; }

/* intent cards: duotone icon, filled ground, colour on hover */
.icards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.75rem, 1.2vw, 1.25rem); }
.icard { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem 1.75rem 4.25rem; min-height: 19rem; background: #fff; border: 1px solid var(--hair); text-decoration: none; color: var(--ink); overflow: hidden; transition: background .18s var(--ease), border-color .18s, transform .18s var(--ease); }
.icard::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--c, var(--primary)); }
.icard--0 { --c: #0f62fe; --t: #edf5ff; } .icard--1 { --c: #198038; --t: #defbe6; } .icard--2 { --c: #011e39; --t: #e6ecf3; } .icard--3 { --c: #0f62fe; --t: #edf5ff; }
.icard__tag { font-size: .75rem; color: var(--ink-2); letter-spacing: .32px; }
.duo { width: 4rem; height: 4rem; color: var(--c, var(--primary)); margin: .25rem 0 .5rem; transition: transform .25s var(--ease-out); }
.icard h3 { font-family: var(--display); font-weight: 650; font-stretch: 108%; font-size: 1.375rem; line-height: 1.2; letter-spacing: -.015em; }
.icard p { color: var(--ink-2); font-size: .875rem; line-height: 1.45; }
.icard__go { position: absolute; left: 1.75rem; bottom: 1.5rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--t); color: var(--c); transition: background .18s, color .18s, transform .18s var(--ease-out); }
.icard__go .ic { width: 1.125rem; height: 1.125rem; }
.icard:hover { background: var(--t); border-color: transparent; }
.icard:hover .duo { transform: translateY(-3px) scale(1.04); }
.icard:hover .icard__go { background: var(--c); color: #fff; transform: translateX(4px); }
@media (max-width: 1056px) { .icards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 672px) { .icards { grid-template-columns: 1fr; } .icard { min-height: 0; } }

/* ---------- product dashboard: rounded, filled, full navigation ---------- */
.hero { height: clamp(37rem, 50vw, 90rem); }
.d2 { width: 104em; border-radius: 16px 0 0 0; border: 1px solid #d5dbe6; border-right: 0; overflow: hidden; background: #eef2f8; box-shadow: 0 30px 60px -30px rgba(1,30,57,.35); }
.d2__top { height: 3.7em; background: var(--navy-deep); gap: 1em; padding: 0 1.2em; }
.d2__top img { width: 2.1em; } .d2__top b { margin-right: 1.2em; font-weight: 650; font-family: var(--display); font-stretch: 112%; letter-spacing: .02em; }
.d2__search { border-radius: 999px; background: rgba(255,255,255,.1); height: 2.4em; width: 28em; padding: 0 1.1em; }
.d2__ico { border-radius: 50%; }
.d2__me { display: flex; align-items: center; gap: .7em; color: #fff; font-size: .9em; line-height: 1.2; }
.d2__me u { text-decoration: none; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--logo-green); font-weight: 600; font-size: .85em; }
.d2__me small { display: block; color: rgba(255,255,255,.6); font-size: .8em; }
.d2__body { grid-template-columns: 16.5em 1fr; height: 66em; }
.d2__nav { background: var(--navy); padding: .6em .7em 2em; overflow: hidden; border-radius: 0; }
.d2__grp { padding: 1.1em .8em .35em; font-size: .72em; letter-spacing: .08em; text-transform: none; color: rgba(255,255,255,.45); }
.d2__it { padding: .5em .8em; gap: .85em; border-radius: 8px; font-size: .88em; color: rgba(255,255,255,.78); box-shadow: none; }
.d2__it.is-on { background: var(--logo-green); color: #fff; font-weight: 600; box-shadow: none; }
.d2__it .ic { width: 1.35em; height: 1.35em; opacity: .9; }
.d2__main { background: #eef2f8; padding: 1.3em 1.5em 2em; gap: 1.1em; }
.d2__head h4 { font-family: var(--display); font-stretch: 112%; font-weight: 650; font-size: 1.7em; letter-spacing: -.02em; line-height: 1.15; }
.d2__crumb { font-size: .8em; color: var(--ink-2); margin-bottom: .15em; }
.d2__sel { border: 0; border-radius: 999px; background: #fff; padding: 0 1em; box-shadow: 0 0 0 1px #d5dbe6; }
.d2__new { border-radius: 999px; gap: .6em; padding: 0 1.2em; background: var(--primary); }
.d2__tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8em; }
.d2__tile { border-radius: 14px; padding: 1em 1.1em 1.05em; display: grid; gap: .2em; align-content: start; min-height: 8.2em; }
.d2__tl { display: flex; justify-content: space-between; align-items: center; font-size: .85em; opacity: .92; } .d2__tl .ic { width: 1.4em; height: 1.4em; }
.d2__tile b { font-family: var(--display); font-stretch: 108%; font-weight: 700; font-size: 2.3em; letter-spacing: -.03em; line-height: 1.1; margin-top: .15em; }
.d2__tile small { font-size: .78em; opacity: .8; }
.d2__tile--blue { background: #0f62fe; color: #fff; } .d2__tile--green { background: #198038; color: #fff; } .d2__tile--navy { background: #011e39; color: #fff; }
.d2__tile--sky { background: #d0e2ff; color: #001d6c; } .d2__tile--sand { background: #fcf4d6; color: #483700; } .d2__tile--rose { background: #ffd7d9; color: #750e13; }
.d2__grid { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: .9em; }
.d2__grid--b { grid-template-columns: 1.9fr 1fr 1fr; }
.d2__card { background: #fff; border-radius: 14px; padding: 1.1em 1.25em 1.2em; border: 0; box-shadow: 0 0 0 1px #e2e7f0; min-width: 0; }
.d2__card h5 { font-size: .95em; margin-bottom: .9em; } .d2__card h5 span { font-size: .85em; color: var(--ink-2); }
.d2__card--rose { background: #fff5f5; box-shadow: 0 0 0 1px #ffd7d9; }
.d2__fleet { display: grid; grid-template-columns: 6em 1fr; gap: 1em; align-items: center; }
.d2__fleet small { display: block; text-align: center; font-size: .72em; color: var(--ink-2); margin-top: .3em; line-height: 1.2; }
.ring { width: 100%; height: auto; }
.d2__sbar { display: flex; height: .9em; border-radius: 999px; overflow: hidden; gap: 2px; margin-bottom: .8em; }
.d2__sbar i { display: block; height: 100%; }
.d2__fleet ul li { display: grid; grid-template-columns: .8em 1fr auto; gap: .6em; align-items: center; padding: .3em 0; font-size: .88em; }
.d2__fleet ul li i { width: .7em; height: .7em; border-radius: 50%; }
.d2__map { border-radius: 10px; overflow: hidden; background: #e5eef9; }
.d2__map .cmap { display: block; width: 100%; height: auto; }
.d2__card--map .d2__leg { margin-top: .7em; }
.d2__dec li { display: grid; grid-template-columns: 2em 1fr auto; gap: .7em; align-items: center; padding: .6em 0; border-bottom: 1px solid #ffd7d9; }
.d2__dec li:last-child { border-bottom: 0; }
.d2__dec li .ic { width: 1.5em; height: 1.5em; color: #a2191f; }
.d2__dec b { display: block; font-size: .88em; font-weight: 600; } .d2__dec small { display: block; font-size: .76em; color: var(--ink-2); }
.d2__dec em { font-style: normal; font-size: .78em; font-weight: 600; background: #fff; color: #a2191f; border-radius: 999px; padding: .3em .8em; box-shadow: 0 0 0 1px #ffb3b8; }
.d2__age li { display: grid; grid-template-columns: 6.5em 1fr 4em; gap: .7em; align-items: center; padding: .5em 0; font-size: .85em; }
.d2__age i { display: block; height: .7em; background: #eef2f8; border-radius: 999px; overflow: hidden; } .d2__age u { display: block; height: 100%; border-radius: 999px; }
.d2__age b { text-align: right; font-weight: 500; }
.d2 .tbl { font-size: .86em; } .d2 .tbl th { border-bottom-color: #d5dbe6; } .d2 .tbl td { border-bottom-color: #eef2f8; padding: .65em .7em .65em 0; }
.d2 .chip { border-radius: 999px; }
@media (max-width: 1056px) { .d2 { font-size: max(10px, 1.1vw); } }
@media (max-width: 672px) { .d2__tiles { grid-template-columns: repeat(3, 1fr); } }

.d2 .tbl td, .d2 .tbl th { white-space: nowrap; }
.d2__sub { font-size: .78em; color: var(--ink-2); margin: 1.1em 0 .2em; }
.d2__age--dep li { grid-template-columns: 7em 1fr 3em; }

/* =====================================================================================
   v7: dashboard back to square hairline cards, grouped sidebar, tinted mega menu, help interactions
   ===================================================================================== */
.bar { display: none; }
.anchors { top: var(--nav); }

/* mega menu panel: light brand blue with grain, white items on hover */
.mega { background: #e8f0fc url(../img/grain-dark.png); border-top-color: #c9d8f0; border-bottom-color: #c9d8f0; }
.mi:hover { background: #fff; }
.mega__promo { background: #fff; }
.mega__h { color: #3a557f; }

/* dashboard: square, hairline, like the first version, but with the fuller data */
.d2 { border-radius: 0; border: 1px solid var(--hair); border-right: 0; box-shadow: none; background: #fff; }
.d2__search { border-radius: 0; background: rgba(255,255,255,.08); }
.d2__ico { border-radius: 0; }
.d2__me u { border-radius: 0; background: rgba(255,255,255,.14); }
.d2__body { height: 62em; }
.d2__main { background: var(--s1); padding: 1.2em 1.6em 2em; gap: 1em; }
.d2__head h4 { font-family: var(--sans); font-stretch: 100%; font-weight: 300; font-size: 1.9em; letter-spacing: 0; }
.d2__sel { border-radius: 0; background: #fff; box-shadow: none; border-bottom: 1px solid #8d8d8d; }
.d2__new { border-radius: 0; }
.d2__kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.d2__kpi { background: #fff; padding: .9em 1em; border: 0; }
.d2__card { border-radius: 0; background: #fff; box-shadow: none; border: 1px solid var(--hair); padding: 1em 1.2em; }
.d2__map { border-radius: 0; }
.d2__sbar { border-radius: 0; } .d2__sbar i { border-radius: 0; }
.d2__fleet ul li i { border-radius: 0; }
.d2__age i, .d2__age u { border-radius: 0; }
.d2__dec li { border-bottom-color: var(--hair); } .d2__dec .ic { color: var(--primary); }
.d2__dec em { border-radius: 0; box-shadow: none; background: var(--blue-10); color: var(--primary); }
.d2 .chip { border-radius: 9999px; }

/* sidebar: Dashboard, then collapsible groups with counts. Open groups show their pages on a guide line. */
.d2__nav { padding: .7em .8em 2em; display: block; }
.d2__it { border-radius: 0; padding: .6em .8em; gap: .85em; color: rgba(255,255,255,.85); display: flex; align-items: center; }
.d2__it.is-on { background: rgba(255,255,255,.1); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--logo-green); }
.d2__g { margin-top: .15em; border-top: 1px solid rgba(255,255,255,.08); }
.d2__gh { display: flex; align-items: center; gap: .85em; padding: .75em .8em; font-size: .88em; color: rgba(255,255,255,.85); margin: 0; }
.d2__gh .ic { width: 1.3em; height: 1.3em; opacity: .9; }
.d2__gh span { flex: 1; }
.d2__gh em { font: 500 .8em var(--mono); font-style: normal; color: rgba(255,255,255,.5); }
.d2__gh .d2__car { width: .95em; height: .95em; opacity: .55; transition: transform .15s; }
.d2__g.is-open .d2__car { transform: rotate(180deg); }
.d2__g.is-open .d2__gh { color: #fff; font-weight: 600; }
.d2__kids { display: grid; margin: 0 0 .6em 1.35em; border-left: 1px solid rgba(255,255,255,.18); }
.d2__kids a { padding: .42em 0 .42em 1.6em; font-size: .85em; color: rgba(255,255,255,.7); position: relative; }
.d2__kids a:first-child { color: #fff; }
.d2__kids a:first-child::before { content: ''; position: absolute; left: -1px; top: .35em; bottom: .35em; width: 2px; background: var(--logo-green); }

/* help center: advisor cards open a panel, support cards reveal contact */
.adv { font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.adv[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.adv[aria-pressed="true"] span { color: rgba(255,255,255,.85); } .adv[aria-pressed="true"] .ic { color: #fff; }
.advpanel { margin-top: -1px; border: 1px solid var(--hair); background: #fff; }
.advp { display: grid; grid-template-columns: 1.1fr 1fr auto; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; padding: 2rem; animation: panelIn .3s var(--ease-out); }
.advp[hidden] { display: none; }
.advp .d-md { font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.2; margin: 0; }
.advp .label { margin-bottom: .5rem; } .advp .ticks { margin: 0; }
.advp--hint { display: block; color: var(--ink-2); font-size: .9375rem; }
.cap--act { padding: 0; }
.cap--act .act { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 1fr auto; gap: 0 1rem; align-items: start; width: 100%; padding: 2rem; cursor: pointer; }
.cap--act .act .cap__ic { grid-column: 1; margin-bottom: 1.25rem; } .cap--act .act h3 { grid-column: 1; margin: 0; font-size: 1rem; font-weight: 600; }
.cap--act .act__plus { grid-column: 2; grid-row: 1; width: 1.25rem; height: 1.25rem; color: var(--ink); transition: transform .15s; }
.cap--act .act:hover { background: var(--s1); } .cap--act .act:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.cap--act.is-open .act__plus { transform: rotate(45deg); } .cap--act.is-open .act { background: var(--blue-10); }
.act__more { padding: 0 2rem 1.75rem; background: var(--blue-10); display: grid; gap: .5rem; justify-items: start; animation: panelIn .25s var(--ease-out); }
.act__more[hidden] { display: none; }
.act__val { font: 500 1.0625rem var(--mono); color: var(--ink); letter-spacing: 0; } .act__more p { font-size: .875rem; color: var(--ink-2); }
.copy { min-height: 2.25rem; padding: 0 1rem; border: 1px solid var(--primary); background: #fff; color: var(--primary); font-size: .8125rem; cursor: pointer; margin-top: .25rem; }
.copy:hover { background: var(--blue-10); border-color: #0043ce; color: #0043ce; }
@media (max-width: 1056px) { .advp { grid-template-columns: 1fr; } }

/* =====================================================================================
   v8: rounded corners across the site. Scale: 8px controls, 12px cards and images, 16px dashboard and dialogs.
   Joined-border grids become separate rounded cards with a small gap.
   ===================================================================================== */
:root { --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --gap-c: clamp(.75rem, 1.2vw, 1.25rem); }

/* controls */
.btn, .copy, .chips span, .field select, .field input, .field textarea, .demo__x { border-radius: var(--r-sm); }
.field input, .field select, .field textarea { border: 1px solid #c6c6c6; background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 0; }
.header__cta { align-items: center; gap: .5rem; }
.header__cta .btn { min-height: 2.5rem; padding: 0 1.25rem; gap: 1rem; }
.hero__actions .btn, .cta .btn { border-radius: var(--r-sm); }
.hsearch { border-radius: var(--r-md); border-bottom-width: 1px; }
.hsearch:focus-within { outline-offset: 0; }
.msg { border-radius: var(--r-sm); }
.nav__link, .nav__btn, .anchors a { border-radius: 0; }

/* card grids: separate rounded cards */
.lcards, .scards, .caps, .paths, .pteases, .plans, .advs, .cards, .arts__grid, .benefits__grid, .icards { gap: var(--gap-c); }
.lcard, .scard, .cap, .path, .ptease, .plan, .adv, .card, .art, .icard {
  margin: 0 !important; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--hair);
}
.cap--act { overflow: hidden; }
.plan--hi { border: 2px solid var(--primary); }
.scard .ph { border-width: 0 0 1px 0; border-radius: 0; }
.advpanel { margin-top: var(--gap-c); border-radius: var(--r-md); overflow: hidden; }
.lockups, .matrix, .livemap, .contact__form, .ptease-box, .arch, .win, .fcard, .mega__promo { border-radius: var(--r-md); }
.lockups, .matrix, .livemap, .win, .contact__form { overflow: hidden; }
.win__bar { border-radius: 0; }
.swatches { gap: .75rem; margin-top: 1rem; } .sw { margin: 0; border-radius: var(--r-md); }
.lockups { gap: 0; }
.arch__bar { border-radius: var(--r-sm); } .arch__m, .arch__base span { border-radius: var(--r-sm); margin: 0; } .arch__mods, .arch__base { gap: .5rem; padding: 0; }

/* images: rounded, and the logo sweep replaces the cut corner (one big curve) */
.ph, .ph--img { border-radius: var(--r-md); overflow: hidden; }
.ph--img img, .art__img img { border-radius: 0; }
.art__img, .art .ph { border-radius: 0; }
.cut, .swoosh, .ph.cut { clip-path: none !important; border-radius: clamp(3rem, 6vw, 5.5rem) var(--r-md) var(--r-md) var(--r-md) !important; overflow: hidden; }
.mega__promo .ph { border-radius: var(--r-sm); }
.bm .ph { border-radius: var(--r-md); }
.seg__img, .seg:first-child .seg__img { clip-path: none; border-radius: var(--r-md); }
.voice__img .ph { border-radius: 0; }

/* dialog and mega menu */
.demo { border-radius: var(--r-lg); }
.mega { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.mi { border-radius: var(--r-sm); }
.faq details { border-radius: 0; }

/* product dashboard */
.d2 { border-radius: var(--r-lg) 0 0 0; }
.d2__top { border-radius: var(--r-lg) 0 0 0; }
.d2__search { border-radius: 999px; }
.d2__sel, .d2__new { border-radius: var(--r-sm); border-bottom: 0; box-shadow: 0 0 0 1px #d5dbe6; } .d2__new { box-shadow: none; }
.d2__ico, .d2__me u { border-radius: 50%; }
.d2__it, .d2__it.is-on { border-radius: 8px; } .d2__it.is-on { box-shadow: none; background: rgba(255,255,255,.12); }
.d2__kids a:first-child::before { border-radius: 2px; }
.d2__kpis { gap: .8em; background: none; border: 0; }
.d2__kpi { border-radius: 14px; box-shadow: 0 0 0 1px #e2e7f0; }
.d2__grid { gap: .8em; background: none; border: 0; }
.d2__grid--a { grid-template-columns: 1.35fr 1fr; }
.d2__grid--b { grid-template-columns: 1.9fr 1fr 1fr; }
.d2__card { border: 0; border-radius: 14px; box-shadow: 0 0 0 1px #e2e7f0; }
.d2__map { border-radius: 10px; overflow: hidden; }
.d2__dec em { border-radius: 999px; }
.d2__sbar, .d2__sbar i, .d2__age i, .d2__age u { border-radius: 999px; }
.d2__leg i { border-radius: 2px; }

/* misc */
.livemap__cap { border-radius: 4px; }
.crumb { border-radius: 0; }
.ph--sm { border-radius: var(--r-sm); }
@media (max-width: 672px) { .path, .ptease, .plan, .adv, .card { margin: 0 !important; } .cta .btn { width: 100%; } }
.d2__grid--a { grid-template-columns: 1fr 1fr; align-items: stretch; }
.d2__grid--a .d2__card:first-child svg { max-height: 17em; }
.d2__grid--a .d2__map .cmap { height: 100%; object-fit: cover; }

.d2__grid--a .d2__map .cmap { height: auto; }
.d2__grid--a .d2__card:first-child svg { max-height: none; }
.d2__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; margin-top: 1em; padding-top: .9em; border-top: 1px solid #e2e7f0; }
.d2__stats small { display: block; font-size: .78em; color: var(--ink-2); } .d2__stats b { font: 700 1.5em/1.2 var(--display); font-stretch: 108%; letter-spacing: -.02em; }

/* =====================================================================================
   v9: one-trip walkthrough, margin-by-route list, form note
   ===================================================================================== */
.flow6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap-c); position: relative; counter-reset: fl; }
.flow6::before { content: ''; position: absolute; left: 2%; right: 2%; top: 3.15rem; height: 2px; background: repeating-linear-gradient(to right, #a8a8a8 0 8px, transparent 8px 16px); }
.flow6 li { position: relative; background: #fff; border: 1px solid var(--hair); border-radius: var(--r-md); padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.fl__t { font: 400 .75rem var(--mono); color: var(--ink-2); letter-spacing: 0; }
.fl__n { position: relative; z-index: 1; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--primary); color: #fff; font: 600 .8rem var(--sans); margin: .25rem 0 .5rem; }
.flow6 li:nth-child(4) .fl__n, .flow6 li:nth-child(6) .fl__n { background: var(--ok); }
.flow6 h3 { font: 650 1.125rem/1.2 var(--display); font-stretch: 108%; letter-spacing: -.015em; }
.flow6 p { font-size: .8125rem; line-height: 1.45; color: var(--ink-2); flex: 1; }
.fl__tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
.fl__tags em { font-style: normal; font-size: .6875rem; padding: .125rem .5rem; border-radius: 999px; background: var(--blue-10); color: #0043ce; }
.flow6__id { margin-top: 1.25rem; font-size: .8125rem; color: var(--ink-2); } .flow6__id b { font-family: var(--mono); font-weight: 500; color: var(--ink); margin-right: .5rem; }
@media (max-width: 1056px) { .flow6 { grid-template-columns: repeat(3, 1fr); } .flow6::before { display: none; } }
@media (max-width: 672px) { .flow6 { grid-template-columns: 1fr; } }
.d2__age--rt li { grid-template-columns: 8.5em 1fr 3em; }
.form__note { grid-column: 1 / -1; font-size: .8125rem; color: var(--ink-2); margin-top: -.5rem; }

/* v10: dashboard cards get a crisp bordered frame with a divided header (enterprise-console look) */
.d2 { border: 1px solid #c3cdde; }
.d2__kpi, .d2__card { border: 1px solid #d3dae6; box-shadow: 0 1px 2px rgba(1,30,57,.06); }
.d2__card { padding: 0 1.2em 1.1em; border-radius: 12px; overflow: hidden; }
.d2__kpi { border-radius: 12px; }
.d2__card h5 { margin: 0 -1.2em .95em; padding: .8em 1.2em; background: #f7f9fc; border-bottom: 1px solid #e1e7f1; }
.d2__grid--a .d2__card { display: flex; flex-direction: column; }
.d2__grid--a .d2__stats { margin-top: auto; }
.d2__grid--a .d2__map { border: 1px solid #e1e7f1; border-radius: 8px; }
.d2__card--map .d2__leg { margin-top: .8em; }

/* v11: dashboard main area uses soft shadows instead of borders (sidebar unchanged) */
.d2__main { background: #eaeff7; }
.d2__kpi, .d2__card {
  border: 0;
  box-shadow: 0 1px 2px rgba(1,30,57,.06), 0 6px 16px -4px rgba(1,30,57,.10), 0 18px 36px -12px rgba(1,30,57,.10);
}
.d2__card h5 { background: transparent; border-bottom: 0; padding-bottom: .2em; margin-bottom: .6em; }
.d2__grid--a .d2__map { border: 0; box-shadow: inset 0 0 0 1px rgba(1,30,57,.06); }
.d2__stats { border-top-color: #e6ebf3; }
.d2 .tbl th { border-bottom-color: #e1e7f1; }
.d2__sel { box-shadow: 0 1px 2px rgba(1,30,57,.10); }

/* v12: wireframe (ghost) dashboard content in brand tints. Sidebar and top bar stay real. */
.g { display: block; border-radius: 6px; background: linear-gradient(90deg, rgba(1,30,57,.08) 0%, rgba(1,30,57,.13) 50%, rgba(1,30,57,.08) 100%); background-size: 200% 100%; animation: ghost 2.8s var(--ease) infinite; flex: none; }
.g--n2 { background-color: transparent; background-image: linear-gradient(90deg, rgba(1,30,57,.15) 0%, rgba(1,30,57,.22) 50%, rgba(1,30,57,.15) 100%); background-size: 200% 100%; }
.g--bl { background-image: linear-gradient(90deg, rgba(15,98,254,.14) 0%, rgba(15,98,254,.22) 50%, rgba(15,98,254,.14) 100%); background-size: 200% 100%; }
.g--bf { background-image: linear-gradient(90deg, rgba(15,98,254,.55) 0%, rgba(15,98,254,.72) 50%, rgba(15,98,254,.55) 100%); background-size: 200% 100%; }
.g--gn { background-image: linear-gradient(90deg, rgba(83,174,51,.28) 0%, rgba(83,174,51,.42) 50%, rgba(83,174,51,.28) 100%); background-size: 200% 100%; }
@keyframes ghost { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .g { animation: none; } }
.d2--ghost .d2__head { align-items: flex-start; }
.d2--ghost .d2__tools { align-items: center; }
.d2--ghost .d2__kpi { padding: 1em 1.1em; min-height: 7.4em; }
.d2--ghost .d2__row { display: flex; align-items: flex-end; justify-content: space-between; }
.d2--ghost .d2__card { padding: 1.1em 1.25em 1.2em; }
.d2__ch { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1em; }
.d2--ghost .d2__map { background: #e8f0fc; border: 0; border-radius: 10px; box-shadow: none; overflow: hidden; }
.d2__gmap { display: block; width: 100%; height: auto; }
.d2__legend { display: flex; gap: 1.2em; margin-top: .9em; }
.d2__lg { display: flex; align-items: center; gap: .5em; } .d2__lg > i:first-child { width: .7em; height: .7em; border-radius: 3px; display: block; }
.d2__chart { position: relative; height: 15em; border-radius: 10px; background: linear-gradient(#f3f6fb 1px, transparent 1px) 0 0 / 100% 25%; padding: 0 .3em; }
.d2__bars { position: absolute; inset: 0 .3em; display: flex; align-items: flex-end; gap: 3.5%; }
.d2__bars i { flex: 1; border-radius: 4px 4px 0 0; display: block; }
.d2__tgt { position: absolute; left: 0; right: 0; top: 38%; border-top: 2px dashed rgba(1,30,57,.35); }
.d2--ghost .d2__stats { margin-top: 1.1em; }
.d2--ghost .d2__stats > div { padding-top: .2em; }
.d2__tbl { display: grid; gap: 0; }
.d2__tr { display: flex; justify-content: space-between; align-items: center; gap: 4%; padding: .85em 0; border-bottom: 1px solid #edf1f7; }
.d2__tr:last-child { border-bottom: 0; }
.d2__li { display: grid; grid-template-columns: 2.2em 1fr auto; gap: .8em; align-items: center; padding: .7em 0; border-bottom: 1px solid #edf1f7; }
.d2__li:last-child { border-bottom: 0; } .d2__av { width: 2.2em !important; height: 2.2em !important; border-radius: 50%; }
.d2__ag { display: grid; grid-template-columns: 5em 1fr 2.6em; gap: .8em; align-items: center; padding: .7em 0; }
.d2__bar { display: block; height: .7em; border-radius: 999px; background: #eaeff7; overflow: hidden; } .d2__bar u { display: block; height: 100%; border-radius: 999px; }

/* v13: professional wireframe dashboard. Flat, hairline cards, no shadows, strict grid, one neutral placeholder tone. */
.d2--ghost { box-shadow: none; border: 1px solid #cfd8e6; }
.d2--ghost .d2__main { background: #f4f6fa; padding: 1.4em 1.5em 2em; display: grid; gap: 1.1em; align-content: start; }
.g { display: block; border-radius: 4px; flex: none; animation: none; background: #e4e9f2; }
.g--m { background: #e4e9f2; } .g--l { background: #edf0f6; } .g--d { background: #d3dbe8; } .g--w { background: rgba(255,255,255,.55); }
.g--gn { background: rgba(83,174,51,.45); } .g--bl, .g--bf { background: #e4e9f2; } .g--n2 { background: #d3dbe8; }
.dg-card { background: #fff; border: 1px solid #dde3ee; border-radius: 12px; box-shadow: none; }
.dg-pad { padding: 1.2em 1.3em 1.3em; min-width: 0; }
.dg-head { display: flex; justify-content: space-between; align-items: center; }
.dg-tools { display: flex; gap: .6em; }
.dg-btn { display: grid; place-items: center; height: 2.4em; min-width: 8em; padding: 0 1.2em; border: 1px solid #d3dbe8; border-radius: 8px; background: #fff; }
.dg-btn--p { background: #0f62fe; border-color: #0f62fe; min-width: 7em; }
.dg-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1em; }
.dg-kpi { padding: 1.1em 1.2em 1em; }
.dg-kpi__f { display: flex; justify-content: space-between; align-items: flex-end; }
.dg-kpi__f svg { width: 5em; height: 1.6em; }
.dg-pill { display: grid; place-items: center; height: 1.5em; padding: 0 .7em; border-radius: 999px; background: rgba(83,174,51,.14); }
.dg-row { display: grid; gap: 1.1em; align-items: stretch; }
.dg-row--a { grid-template-columns: 2fr 1fr; } .dg-row--b { grid-template-columns: 2fr 1fr; }
.dg-ch { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.1em; }
.dg-seg { display: flex; gap: .25em; padding: .25em; border: 1px solid #dde3ee; border-radius: 8px; } .dg-seg i { display: block; width: 2.2em; height: 1.4em; border-radius: 5px; background: #edf0f6; } .dg-seg i:first-child { background: #e4e9f2; }
.dg-chart { display: block; width: 100%; height: auto; }
.dg-donut { display: grid; grid-template-columns: 9em 1fr; gap: 1.4em; align-items: center; }
.dg-ring { width: 100%; height: auto; }
.dg-lg { display: grid; grid-template-columns: .65em 1fr auto; gap: .7em; align-items: center; padding: .55em 0; border-bottom: 1px solid #eef1f7; } .dg-lg:last-child { border-bottom: 0; } .dg-lg i { width: .65em; height: .65em; border-radius: 50%; display: block; }
.dg-th, .dg-tr { display: grid; grid-template-columns: 1.3fr 1.4fr 1fr 1fr .9fr .9fr .6fr; gap: 1em; align-items: center; }
.dg-th { padding: 0 0 .8em; border-bottom: 1px solid #dde3ee; } .dg-tr { padding: .85em 0; border-bottom: 1px solid #eef1f7; } .dg-tr:last-child { border-bottom: 0; }
.dg-th .r, .dg-tr .r { display: flex; justify-content: flex-end; }
.dg-st { display: inline-grid; place-items: center; height: 1.5em; padding: 0 .8em; border-radius: 999px; } .dg-st--gn { background: rgba(83,174,51,.5); } .dg-st--bl { background: rgba(15,98,254,.42); } .dg-st--am { background: rgba(241,194,27,.7); }
.dg-li { display: grid; grid-template-columns: 2.1em 1fr 1em; gap: .9em; align-items: center; padding: .8em 0; border-bottom: 1px solid #eef1f7; } .dg-li:last-child { border-bottom: 0; }
.dg-ic { display: block; width: 2.1em; height: 2.1em; border-radius: 8px; background: #edf0f6; }
.dg-li u { display: block; width: .55em; height: .55em; border-right: 2px solid #c3cddd; border-top: 2px solid #c3cddd; transform: rotate(45deg); }
@media (max-width: 672px) { .dg-kpis { grid-template-columns: repeat(2, 1fr); } .dg-row--a, .dg-row--b { grid-template-columns: 1fr; } }
.d2--ghost { width: 88em; }
.d2--ghost .d2__body { height: 56em; }

/* v14: Selcom-style home. Centred statement, pill buttons, product in a browser frame, plenty of white. */
.btn--pill { border-radius: 999px; min-height: 3.25rem; padding: 0 1.75rem; }
.shero { background: #fff url(../img/grain-dark.png); padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5.5rem); }
.shero__in { display: grid; justify-items: center; text-align: center; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.shero .label { margin: 0; }
.shero__in h1 { font-size: clamp(2.5rem, 5.2vw, 5rem); max-width: 15em; line-height: 1.04; }
.shero .lede { max-width: 40rem; text-align: center; }
.shero__act { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-top: .5rem; }
.bframe { border: 1px solid #cfd8e6; border-radius: 18px; overflow: hidden; background: #fff; }
.bframe__bar { display: flex; align-items: center; gap: .5rem; height: 2.75rem; padding: 0 1rem; background: #e9edf4; border-bottom: 1px solid #d8dfeb; }
.bframe__bar i { width: .7rem; height: .7rem; border-radius: 50%; background: #c3cddd; display: block; }
.bframe__bar span { margin: 0 auto; transform: translateX(-1.2rem); padding: .2rem 4rem; border-radius: 999px; background: #f7f9fc; font-size: .75rem; color: var(--ink-2); }
.bframe .d2--ghost { width: 100%; font-size: calc(var(--content) / 88); border: 0; border-radius: 0; }
.bframe .d2__top { border-radius: 0; }
.alts { gap: clamp(4rem, 8vw, 8rem); }
.alt .ph, .alt .ph--img { border-radius: 18px; }
@media (max-width: 672px) {
  .bframe .d2--ghost { font-size: calc(var(--content) / 60); }
  .bframe .d2__body { grid-template-columns: 1fr; } .bframe .d2__nav { display: none; }
  .bframe__bar span { padding: .2rem 1.5rem; }
  .shero__act .btn { width: 100%; }
}

/* =====================================================================================
   v15: fill-in button hovers, demo dialog, partners, plan cards, element-only dashboard, FAQ motion
   ===================================================================================== */
/* buttons: a fill slides in from the left on hover */
.btn { position: relative; overflow: hidden; isolation: isolate; --fill: #002d9c; transition: color .3s var(--ease), border-color .3s; }
.btn::before { content: ''; position: absolute; inset: 0; background: var(--fill); transform: scaleX(0); transform-origin: left center; transition: transform .42s var(--ease); z-index: -1; }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:hover { background: var(--primary); }
.btn--tertiary { --fill: #011e39; } .btn--tertiary:hover { background: #fff; color: #fff; border-color: #011e39; }
.btn--white { --fill: #011e39; } .btn--white:hover { background: #fff; color: #fff; }
.btn--secondary { --fill: #0f62fe; } .btn--secondary:hover { background: var(--ink); }
.btn--line { --fill: var(--ink); } .btn--line:hover { background: #fff; color: #fff; }
.mbar .btn--tertiary:hover { background: #fff; color: #fff; }
.copy { position: relative; }

/* headline emphasis */
.hl { color: var(--primary); }
.stop { color: var(--logo-green); }

/* demo dialog */
.demo { width: min(54rem, calc(100vw - 2rem)); border-radius: 18px; overflow: hidden; }
.demo__grid { display: grid; grid-template-columns: 19rem 1fr; }
.demo__side { position: relative; background: var(--navy) url(../img/grain-light.png); color: #fff; padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; }
.demo__side img { width: 2.75rem; height: auto; }
.demo__side h2 { font: 650 1.75rem/1.1 var(--display); font-stretch: 108%; letter-spacing: -.02em; }
.demo__side p { color: var(--inv-ink-2); font-size: .9375rem; }
.demo__side ul { margin-top: auto; display: grid; gap: .75rem; border-top: 1px solid rgba(255,255,255,.18); padding-top: 1.25rem; }
.demo__side li { font-size: .875rem; color: rgba(255,255,255,.88); padding-left: 1.5rem; position: relative; }
.demo__side li::before { content: ''; position: absolute; left: 0; top: .45rem; width: .75rem; height: .4rem; border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime); transform: rotate(-45deg); }
.demo__main { position: relative; padding: 1.75rem 1.75rem 1.5rem; }
.demo__x { position: absolute; top: .5rem; right: .5rem; margin: 0; }
.demo__main .form { padding: 0; gap: .875rem; margin-top: .75rem; }
.demo__main .field { gap: .375rem; }
.demo__main .field input, .demo__main .field select { min-height: 2.75rem; }
.demo__main .chips span { min-height: 2.25rem; padding: 0 .875rem; border-radius: 999px; font-size: .8125rem; }
.msg { background: var(--s1); border: 0; border-radius: 10px; padding: .75rem 1rem; min-height: 0; font-size: .8125rem; color: var(--ink-2); }
.msg small { display: block; font-size: .6875rem; font-weight: 600; color: var(--ink); margin-bottom: .25rem; letter-spacing: .32px; }
.msg p { line-height: 1.45; }
.form .btn { min-width: 0; }
@media (max-width: 760px) { .demo__grid { grid-template-columns: 1fr; } .demo__side { padding: 1.5rem; } .demo__side ul, .demo__side p { display: none; } .demo__main { padding: 1.25rem; } }

/* partners */
.partners { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(1rem, 3vw, 2rem); }
.partners__h { text-align: center; font-size: .9375rem; color: var(--ink-2); margin-bottom: 1.75rem; }
.partners__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap-c); }
.partners__row > .pslot { flex: 0 1 11rem; min-width: 9rem; }
.pslot { display: grid; gap: .75rem; text-align: center; }
.pslot__logo { display: flex; align-items: center; justify-content: center; gap: .625rem; height: 5.25rem; border: 1px dashed #b6c2d6; border-radius: 14px; background: #fff; color: #8a97ad; transition: border-color .25s var(--ease), color .25s, transform .25s var(--ease-out), background .25s; }
.pslot__logo .ic { width: 1.25rem; height: 1.25rem; } .pslot__logo b { font-weight: 500; font-size: .8125rem; }
.pslot small { font-size: .75rem; color: var(--ink-2); }
.pslot:hover .pslot__logo { border-color: var(--primary); border-style: solid; color: var(--primary); transform: translateY(-3px); background: var(--blue-10); }

.pslot__link { display: block; text-decoration: none; }
.pslot--partner .pslot__logo { border: 1px solid var(--hair); background: #fff; padding: .75rem; color: var(--ink); }
.pslot--partner .pslot__logo img { max-height: 2.75rem; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .25s, opacity .25s; }
.pslot--partner .pslot__logo b { font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.pslot--partner:hover .pslot__logo, .pslot__link:focus-visible .pslot__logo { background: #fff; color: var(--ink); }
.pslot--partner:hover img, .pslot__link:focus-visible img { filter: grayscale(0); opacity: 1; }
@media (max-width: 480px) { .partners__row > .pslot { flex-basis: calc((100% - var(--gap-c)) / 2); min-width: min(9rem, calc((100% - var(--gap-c)) / 2)); } }

/* plan cards */
.sizepick { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 1.75rem; font-size: .9375rem; color: var(--ink-2); }
.plans { gap: var(--gap-c); align-items: stretch; }
.plan { position: relative; padding: 2rem; border: 1px solid var(--hair); border-radius: 18px; background: #fff; display: flex; flex-direction: column; gap: 1.25rem; transition: transform .3s var(--ease-out), border-color .25s, opacity .3s; margin: 0 !important; }
.plan:hover { transform: translateY(-5px); border-color: #a9bde0; }
.plan__head { display: grid; gap: .625rem; justify-items: start; }
.plan__fit { font-size: .75rem; padding: .25rem .75rem; border-radius: 999px; background: var(--s1); color: var(--ink-2); }
.plan h3 { font: 650 1.75rem/1.1 var(--display); font-stretch: 108%; letter-spacing: -.02em; }
.plan__t { font-size: .875rem; color: var(--ink-2); min-height: 3.6rem; }
.plan__price { padding: 1.1rem 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); display: grid; gap: .125rem; }
.plan__price b { font: 650 1.375rem/1.2 var(--display); font-stretch: 108%; letter-spacing: -.015em; } .plan__price span { font-size: .75rem; color: var(--ink-2); }
.plan .btn { align-self: stretch; justify-content: space-between; }
.plan__lh { font-size: .75rem; font-weight: 600; color: var(--ink-2); margin: .25rem 0 -.5rem; letter-spacing: .32px; }
.plan ul { margin: 0; border: 0; }
.plan li { display: flex; gap: .75rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid #eef1f6; font-size: .875rem; }
.plan li:last-child { border-bottom: 0; }
.plan li .tick { width: 1.1rem; height: 1.1rem; color: var(--ok); flex: none; } .plan__x .tick { color: var(--ink-3); }
.plan--hi { background: var(--navy) url(../img/grain-light.png); border-color: var(--navy); color: #fff; }
.plan--hi:hover { border-color: var(--navy); }
.plan--hi h3, .plan--hi .plan__price b { color: #fff; } .plan--hi .plan__t, .plan--hi .plan__price span, .plan--hi .plan__lh { color: var(--inv-ink-2); }
.plan--hi .plan__fit { background: rgba(255,255,255,.14); color: #fff; }
.plan--hi .plan__price { border-color: rgba(255,255,255,.18); } .plan--hi li { border-color: rgba(255,255,255,.12); } .plan--hi li .tick { color: var(--lime); } .plan--hi .plan__x .tick { color: rgba(255,255,255,.6); }
.plans[data-pick] .plan:not(.is-pick) { opacity: .55; } .plans[data-pick] .plan:not(.is-pick):hover { opacity: 1; }
.plan.is-pick:not(.plan--hi) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

/* dashboard: elements only, no graph lines, fades out at the bottom like the Selcom frame */
.bframe { border-bottom: 0; border-radius: 18px 18px 0 0; }
.bframe .d2--ghost { -webkit-mask-image: linear-gradient(#000 52%, transparent 97%); mask-image: linear-gradient(#000 52%, transparent 97%); }
.dg-mini { display: flex; align-items: flex-end; gap: .28em; height: 1.9em; }
.dg-mini i { display: block; width: .42em; border-radius: 2px; background: rgba(15,98,254,.18); } .dg-mini i:last-child { background: rgba(15,98,254,.34); }
.dg-sk { display: flex; align-items: flex-end; gap: 2.6%; height: 15em; padding-top: 1em; border-bottom: 1px solid #e7ecf4; }
.dg-sk i { flex: 1; display: block; border-radius: 6px 6px 0 0; background: linear-gradient(rgba(15,98,254,.17), rgba(15,98,254,.06)); transform-origin: bottom; transition: transform .5s var(--ease-out); }
.dg-sk i:last-child { background: linear-gradient(rgba(15,98,254,.3), rgba(15,98,254,.1)); }
.dg-st, .dg-st--gn, .dg-st--bl, .dg-st--am { background: rgba(15,98,254,.13); }
.dg-lg i { background: #d3dbe8 !important; }
.dg-card { position: relative; overflow: hidden; transition: transform .35s var(--ease-out), border-color .3s var(--ease); }
.dg-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(15,98,254,.08) 50%, transparent 62%); transform: translateX(-110%); pointer-events: none; }
.dg-card:hover { transform: translateY(-4px); border-color: #a9bde0; }
.dg-card:hover::after { transform: translateX(110%); transition: transform .95s var(--ease); }
.dg-card:hover .dg-sk i { transform: scaleY(1.07); }
.dg-card:hover .dg-ring { transform: rotate(40deg); } .dg-ring { transition: transform .8s var(--ease-out); }

/* faq motion */
.faq details p { animation: none; }
.faq details { transition: background .2s; }
.faq summary { transition: color .2s, padding .3s var(--ease-out); }
.faq details[open] summary { color: var(--primary); }
.faq details.is-anim p { will-change: opacity, transform; }

/* =====================================================================================
   v16: fog fade, editorial page hero, varied image treatments, framed product screens
   ===================================================================================== */
/* dashboard dissolves into fog at the bottom: eased mask on the whole frame plus a blur veil */
.bframe .d2--ghost { -webkit-mask-image: none; mask-image: none; }
.bframe--home { position: relative; border-bottom: 0; border-radius: 18px 18px 0 0;
  -webkit-mask-image: linear-gradient(#000 0%, #000 72%, rgba(0,0,0,.8) 82%, rgba(0,0,0,.45) 90%, rgba(0,0,0,.14) 96%, transparent 100%);
          mask-image: linear-gradient(#000 0%, #000 72%, rgba(0,0,0,.8) 82%, rgba(0,0,0,.45) 90%, rgba(0,0,0,.14) 96%, transparent 100%); }
.bframe--home::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; pointer-events: none; z-index: 5;
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(transparent 0%, #000 80%); mask-image: linear-gradient(transparent 0%, #000 80%);
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.6) 75%, #fff); }
.bframe--home .d2__body { height: 46em; }

/* editorial page hero: headline left, lede right, visual runs full width below */
.phero--ed { background: #fff url(../img/grain-dark.png); }
.phero__top { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: end; padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.75rem, 3vw, 2.75rem); }
.phero__top .label { margin-bottom: 1rem; }
.phero__side { display: grid; gap: 1.5rem; }
.phero--ed .phero__vis { margin-bottom: clamp(2rem, 4vw, 3.5rem); min-width: 0; }
.phero--ed .phero__vis .ph { aspect-ratio: 21 / 9 !important; }
.phero--ed:not(:has(.phero__vis)) .phero__top { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.phero--ed .btn--tertiary { border-radius: 999px; } .phero--ed .btn { border-radius: 999px; }
@media (max-width: 1056px) { .phero__top { grid-template-columns: 1fr; } .phero--ed .phero__vis .ph { aspect-ratio: 16 / 9 !important; } }

/* image treatments */
.collage { position: relative; padding-bottom: 3.25rem; }
.collage__in { position: absolute; right: -1.25rem; bottom: 0; width: 42%; border: .5rem solid #fff; border-radius: 20px; overflow: hidden; background: #fff; }
.collage__in .ph { border-radius: 14px; }
.sweep .ph, .sweep .ph--img { border-radius: clamp(4rem, 8vw, 7rem) 14px 14px 14px; }
.tall .ph { aspect-ratio: 4 / 5 !important; max-width: 30rem; margin-inline: auto; }
.bnr { position: relative; }
.bnr > .ph { aspect-ratio: 21 / 9 !important; border-radius: 22px; }
.bnr__panel { position: absolute; left: clamp(1rem, 3vw, 3rem); bottom: clamp(-2.5rem, -3vw, -1rem); width: min(30rem, 46%); background: var(--navy) url(../img/grain-light.png); color: #fff; border-radius: 18px; padding: 1.75rem; display: grid; gap: .75rem; }
.bnr__panel .label { color: rgba(255,255,255,.6); margin: 0; } .bnr__panel .d-md { color: #fff; font-size: clamp(1.4rem, 2vw, 2rem); }
.bnr__panel p:not(.label) { color: var(--inv-ink-2); font-size: .9375rem; } .bnr__panel .ghost { color: var(--lime); min-height: 0; } .bnr__panel .ghost:hover { color: #fff; }
.bnr { margin-bottom: 2.5rem; }
@media (max-width: 900px) { .collage__in { right: 0; width: 46%; } .bnr__panel { position: static; width: auto; margin-top: -2rem; margin-inline: 1rem; } .bnr > .ph { aspect-ratio: 16 / 9 !important; } }

/* product screen inside a browser frame on module pages */
.bframe--win .bframe__body .win { border: 0; border-radius: 0; }
.bframe--win .bframe__body .win__body { min-height: 0; }
.bframe--win { border-bottom: 1px solid #cfd8e6; border-radius: 18px; }
.bframe--win .bframe__body { background: #fff; }

/* contact: chosen plan */
.planchip { display: inline-block; justify-self: start; padding: .375rem .875rem; border-radius: 999px; background: var(--blue-10); color: #0043ce; font-size: .8125rem; font-weight: 600; }

/* v17: the dashboard ends in a bank of white cloud (mawingu): soft billows, no straight fade */
.bframe--home { -webkit-mask-image: none; mask-image: none; border-radius: 18px 18px 0 0; overflow: hidden; }
.bframe--home .d2__body { height: 40em; }
.bframe--home::after {
  content: ''; position: absolute; left: -3%; right: -3%; bottom: -14px; height: 17%; z-index: 5; pointer-events: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none;
  filter: blur(9px);
  background:
    radial-gradient(ellipse 11% 78% at 4% 100%, #fff 55%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 13% 98% at 14% 100%, #fff 55%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 10% 70% at 24% 100%, #fff 55%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 14% 105% at 35% 100%, #fff 55%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 11% 80% at 46% 100%, #fff 55%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 13% 100% at 57% 100%, #fff 55%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 10% 72% at 67% 100%, #fff 55%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 14% 102% at 78% 100%, #fff 55%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 11% 82% at 89% 100%, #fff 55%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse 12% 90% at 98% 100%, #fff 55%, rgba(255,255,255,0) 100%),
    linear-gradient(rgba(255,255,255,0), #fff 62%);
}
.bframe--home { overflow: visible; }
.bframe--home .d2--ghost { border-radius: 0; overflow: hidden; }
.bframe--home .d2__body { height: 41em; }
.bframe--home::after { bottom: -46px; height: calc(9% + 46px); left: -2%; right: -2%; }

/* =====================================================================================
   v18: cloud, compact cards, menu icons, support accordion, help and article pages, phones, 3D plans
   ===================================================================================== */
/* dashboard frame keeps its rounded top; cloud is puffier */
.bframe--home .bframe__bar { border-radius: 17px 17px 0 0; }
.bframe--home .d2--ghost { border-radius: 0; }
.bframe--home::after {
  bottom: -34px; left: -2%; right: -2%; height: 118px; filter: blur(3px) drop-shadow(0 -5px 7px rgba(150,172,208,.30));
  background:
    radial-gradient(circle 40px at 3% 100%, #fff 97%, transparent 100%), radial-gradient(circle 58px at 11% 100%, #fff 97%, transparent 100%),
    radial-gradient(circle 46px at 19% 100%, #fff 97%, transparent 100%), radial-gradient(circle 66px at 29% 100%, #fff 97%, transparent 100%),
    radial-gradient(circle 44px at 38% 100%, #fff 97%, transparent 100%), radial-gradient(circle 60px at 48% 100%, #fff 97%, transparent 100%),
    radial-gradient(circle 48px at 57% 100%, #fff 97%, transparent 100%), radial-gradient(circle 68px at 67% 100%, #fff 97%, transparent 100%),
    radial-gradient(circle 46px at 77% 100%, #fff 97%, transparent 100%), radial-gradient(circle 60px at 86% 100%, #fff 97%, transparent 100%),
    radial-gradient(circle 42px at 95% 100%, #fff 97%, transparent 100%), linear-gradient(transparent 40%, #fff 70%);
}

/* mega menu: small icon tiles, tighter rows */
.mi { grid-template-columns: 2.125rem 1fr; gap: .75rem; padding: .5rem .5rem; align-items: center; }
.mi__ic { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 8px; background: #fff; color: var(--primary); transition: background .15s, color .15s; }
.mi__ic .ic { width: 1.0625rem; height: 1.0625rem; }
.mi:hover .mi__ic { background: var(--primary); color: #fff; }
.mi b { font-size: .8125rem; } .mi small { font-size: .71875rem; margin-top: 0; }
.mega__in { padding: 1.5rem 0 1.75rem; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
.mega__h { margin-bottom: .375rem; font-size: .71875rem; }

/* compact cards everywhere */
.lcard { min-height: 0; padding: 1.375rem 1.5rem; gap: .5rem; }
.lcard__pic { width: 2.125rem; height: 2.125rem; margin-bottom: .375rem; }
.lcard .card-title { font-size: 1.0625rem; } .lcard p { font-size: .8125rem; }
.scard__pic { width: 1.875rem; height: 1.875rem; } .path__pic { width: 2.125rem; height: 2.125rem; } .tp__pic { width: 2.25rem; height: 2.25rem; margin-bottom: .75rem; }
.arch__pic { width: 1.75rem; height: 1.75rem; }
.phero--ed .phero__vis .ph { max-height: 26rem; }
.stcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.stc, .tcard { display: grid; grid-template-columns: 2.5rem 1fr auto; gap: .875rem; align-items: center; padding: .875rem 1rem; border: 1px solid var(--hair); border-radius: 14px; background: #fff; text-decoration: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .2s var(--ease), transform .25s var(--ease-out), background .2s; }
.stc__ic, .tcard__ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--blue-10); color: var(--primary); transition: background .2s, color .2s; }
.stc__ic .ic, .tcard__ic .ic { width: 1.25rem; height: 1.25rem; }
.stc__t b, .tcard__t b { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.25; } .stc__t small, .tcard__t small { display: block; font-size: .8125rem; color: var(--ink-2); line-height: 1.35; margin-top: .125rem; }
.stc__go { width: .9rem; height: .9rem; color: var(--ink-3); transition: transform .2s var(--ease-out), color .2s; }
.stc:hover, .tcard:hover { border-color: #a9bde0; transform: translateY(-2px); }
.stc:hover .stc__ic, .tcard:hover .tcard__ic { background: var(--primary); color: #fff; } .stc:hover .stc__go { transform: translateX(3px); color: var(--primary); }
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.tcard__n { font: 500 .75rem var(--mono); color: var(--ink-2); background: var(--s1); border-radius: 999px; padding: .125rem .5rem; }
.tcard[aria-pressed="true"] { border-color: var(--primary); background: var(--blue-10); } .tcard[aria-pressed="true"] .tcard__ic { background: var(--primary); color: #fff; }
.glist { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.glist__h { font-size: .8125rem; color: var(--ink-2); margin-bottom: .75rem; }
.glist li { border-bottom: 1px solid #dfe4ec; } .glist li[hidden] { display: none; }
.glist a { display: grid; grid-template-columns: 2rem 1fr auto; gap: .75rem; align-items: center; padding: .875rem .25rem; text-decoration: none; border-radius: 10px; transition: background .2s, padding .25s var(--ease-out); }
.glist a:hover { background: #fff; padding-left: .75rem; }
.gl__ic { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: #fff; color: var(--primary); } .gl__ic .ic { width: 1.0625rem; height: 1.0625rem; }
.gl__t b { display: block; font-size: .9375rem; font-weight: 500; } .gl__t small { font-size: .75rem; color: var(--ink-2); } .gl__go { width: .9rem; height: .9rem; color: var(--ink-3); }
.glist__empty { padding: 1.5rem 0; color: var(--ink-2); }
.pop { columns: auto; }

/* contact support: smooth accordion */
.sups { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; align-items: start; }
.sup { background: #fff; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; transition: border-color .25s var(--ease), background .35s var(--ease); }
.sup:hover { border-color: #a9bde0; } .sup.is-open { border-color: var(--primary); background: #fbfdff; }
.sup__h { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 2.5rem 1fr auto; gap: .875rem; align-items: center; width: 100%; padding: 1rem 1.125rem; cursor: pointer; }
.sup__h:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 14px; }
.sup__ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--blue-10); color: var(--primary); transition: background .3s, color .3s; } .sup__ic .ic { width: 1.25rem; height: 1.25rem; }
.sup.is-open .sup__ic { background: var(--primary); color: #fff; }
.sup__t b { display: block; font-size: .9375rem; font-weight: 600; } .sup__t small { font-size: .8125rem; color: var(--ink-2); }
.sup__p { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--s1); transition: transform .45s var(--ease-out), background .3s; } .sup__p .ic { width: .9rem; height: .9rem; }
.sup.is-open .sup__p { transform: rotate(135deg); background: var(--blue-10); }
.sup__b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.sup.is-open .sup__b { grid-template-rows: 1fr; }
.sup__in { overflow: hidden; min-height: 0; padding: 0 1.125rem; display: grid; gap: .5rem; justify-items: start; opacity: 0; transform: translateY(-6px); transition: opacity .35s var(--ease) .05s, transform .45s var(--ease-out) .05s, padding .45s var(--ease); }
.sup.is-open .sup__in { opacity: 1; transform: none; padding: .25rem 1.125rem 1.25rem; }
.sup__in p:not(.act__val) { font-size: .8125rem; color: var(--ink-2); }

/* guide page */
.phero__top--one { grid-template-columns: 1fr; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); } .phero__top--one h1 { max-width: 22ch; }
.gpage { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.gsteps { display: grid; gap: 0; counter-reset: gs; }
.gsteps li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid var(--hair); }
.gsteps li:first-child { border-top: 1px solid var(--ink); }
.gs__n { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--blue-10); color: #0043ce; font: 600 .875rem var(--sans); }
.gsteps h3 { font: 650 1.1875rem/1.25 var(--display); font-stretch: 106%; letter-spacing: -.01em; margin-bottom: .25rem; } .gsteps p { color: var(--ink-2); max-width: 52ch; }
.helpful { margin-top: 2.5rem; padding: 1.25rem 1.5rem; border-radius: 14px; background: var(--s1); display: grid; gap: .875rem; }
.helpful > div { display: flex; gap: .5rem; } .hbtn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: 0 1rem; border: 1px solid #c6c6c6; border-radius: 999px; background: #fff; cursor: pointer; font-size: .875rem; transition: background .2s, border-color .2s, transform .15s; }
.hbtn .ic { width: 1rem; height: 1rem; } .hbtn:hover { border-color: var(--primary); background: var(--blue-10); } .hbtn:active { transform: scale(.97); }
.helpful__r { font-size: .875rem; color: var(--ink-2); animation: panelIn .35s var(--ease-out); }
.gside { position: sticky; top: calc(var(--nav) + 1.5rem); display: grid; gap: .5rem; padding: 1.25rem; border: 1px solid var(--hair); border-radius: 14px; background: #fff; }
.gside__h { font-size: .75rem; font-weight: 600; color: var(--ink-2); letter-spacing: .32px; }
.gside li a { display: flex; gap: .625rem; align-items: center; padding: .5rem 0; text-decoration: none; font-size: .875rem; } .gside li a:hover { color: var(--primary); } .gside li .ic { width: 1rem; height: 1rem; color: var(--ink-3); flex: none; }
.gside__none { font-size: .8125rem; color: var(--ink-2); } .gside .ghost { min-height: 2.25rem; }

/* article page */
.readbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; background: transparent; } .readbar i { display: block; height: 100%; width: 100%; background: var(--primary); transform: scaleX(var(--p, 0)); transform-origin: left; }
.ahead { max-width: 52rem; } .ahead__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-size: .8125rem; color: var(--ink-2); margin-bottom: 1rem; }
.apage { display: grid; grid-template-columns: 15rem minmax(0, 40rem); gap: clamp(2rem, 6vw, 6rem); justify-content: center; align-items: start; }
.atoc { position: sticky; top: calc(var(--nav) + 1.5rem); display: grid; gap: .5rem; }
.atoc ol { display: grid; border-left: 1px solid var(--hair); } .atoc li a { display: block; padding: .5rem 0 .5rem 1rem; font-size: .875rem; color: var(--ink-2); text-decoration: none; margin-left: -1px; border-left: 2px solid transparent; transition: color .2s, border-color .2s; }
.atoc li a:hover, .atoc li a.is-on { color: var(--ink); border-left-color: var(--primary); }
.prose { font-size: 1.0625rem; line-height: 1.75; color: #262626; }
.prose h2 { font: 650 1.625rem/1.2 var(--display); font-stretch: 108%; letter-spacing: -.02em; margin: 2.5rem 0 .875rem; color: var(--ink); scroll-margin-top: calc(var(--nav) + 1.5rem); } .prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.25rem; } .prose ul { margin: 0 0 1.5rem; padding-left: 1.25rem; list-style: disc; } .prose li { margin-bottom: .5rem; padding-left: .25rem; } .prose li::marker { color: var(--primary); }
.anote { margin: 1.75rem 0; padding: 1.125rem 1.375rem; border-radius: 14px; background: var(--blue-10); } .anote b { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: #0043ce; margin-bottom: .375rem; } .anote .ic { width: 1rem; height: 1rem; } .anote p { margin: 0; font-size: .9375rem; line-height: 1.6; }

/* driver app phones */
.phones { position: relative; display: flex; justify-content: center; align-items: center; min-height: 30rem; padding: 1rem 0; }
.phone { position: relative; width: 14.5rem; aspect-ratio: 9 / 18.5; border-radius: 2.5rem; padding: .55rem; background: #0b1017; box-shadow: 0 0 0 1px #2a3340, inset 0 0 0 2px #1b232e; z-index: 2; }
.phone::before { content: ''; position: absolute; top: .9rem; left: 50%; width: 4.2rem; height: 1.1rem; border-radius: 999px; background: #0b1017; transform: translateX(-50%); z-index: 3; }
.phone--b { position: absolute; width: 12.5rem; left: 50%; margin-left: -13.5rem; top: 3rem; z-index: 1; transform: rotate(-5deg); opacity: .96; }
.phone__scr { position: relative; width: 100%; height: 100%; border-radius: 2rem; overflow: hidden; }
.phone__scr--splash { background: var(--navy) url(../img/grain-light.png); display: grid; place-items: center; align-content: center; gap: 1rem; justify-items: center; color: #fff; }
.phone__mark { width: 4.25rem; height: auto; animation: splashIn 1s var(--ease-out) both; } .phone__word { width: 6.5rem; height: auto; animation: splashIn 1s var(--ease-out) .25s both; }
.phone__ld { width: 5rem; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; margin-top: 1.25rem; } .phone__ld i { display: block; height: 100%; width: 100%; background: var(--logo-green); transform-origin: left; animation: load 2.6s var(--ease) infinite; }
.phone__scr small { position: absolute; bottom: 1.5rem; font-size: .6875rem; letter-spacing: .08em; color: rgba(255,255,255,.55); }
.phone__scr--ui { background: #f4f6fa; padding: 2.4rem .9rem .9rem; display: grid; gap: .7rem; align-content: start; }
.ph2__top { display: flex; justify-content: space-between; align-items: center; } .ph2__card { background: #fff; border-radius: 12px; padding: .8rem; display: grid; gap: .5rem; border: 1px solid #e1e7f1; }
.ph2__row { display: grid; grid-template-columns: 2em 1fr; gap: .6rem; align-items: center; background: #fff; border-radius: 12px; padding: .55rem; border: 1px solid #e1e7f1; } .ph2__row > span { display: grid; gap: .4rem; }
@keyframes splashIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes load { 0% { transform: scaleX(0); } 70% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.alt__vis.phonecol { display: grid; place-items: center; }
@media (max-width: 672px) { .phone--b { margin-left: -11rem; width: 10.5rem; } .phones { min-height: 26rem; } }

/* plan cards: 3D tilt on hover */
.plans { perspective: 1200px; }
.plan { transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out), border-color .25s, opacity .3s; will-change: transform; animation: planIn .7s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
.plan:hover { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(14px); border-color: #a9bde0; }
.plan.is-tilt { transition: transform .1s linear, border-color .25s, opacity .3s; }
.plan::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(15,98,254,.10), transparent 55%); }
.plan--hi::after { background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.18), transparent 55%); }
.plan:hover::after { opacity: 1; }
.plan__head, .plan__price { transform: translateZ(18px); } .plan .btn { transform: translateZ(30px); }
@keyframes planIn { from { opacity: 0; transform: translateY(24px) rotateX(8deg); } }

/* image reveal: unveil plus a slow settle */
.js-motion [data-reveal="image"] img { transform: scale(1.1); transition: clip-path 1.1s var(--ease), transform 1.6s var(--ease-out); }
.js-motion [data-reveal="image"].is-in img { transform: none; }
.js-motion .scard:hover [data-reveal="image"].is-in img, .js-motion .art a:hover [data-reveal="image"].is-in img { transform: scale(1.045); }

@media (max-width: 1056px) { .stcs, .tgrid, .sups { grid-template-columns: 1fr 1fr; } .glist { grid-template-columns: 1fr; } .gpage, .apage { grid-template-columns: 1fr; } .gside, .atoc { position: static; } }
@media (max-width: 672px) { .stcs, .tgrid, .sups { grid-template-columns: 1fr; } }
.bframe--home::after { left: 0; right: 0; bottom: -40px; height: 124px; }
.bframe--home::after {
  background:
    radial-gradient(circle 40px at 3% 100%, #fff 97%, transparent 100%), radial-gradient(circle 58px at 11% 100%, #fff 97%, transparent 100%),
    radial-gradient(circle 46px at 19% 100%, #fff 97%, transparent 100%), radial-gradient(circle 66px at 29% 100%, #fff 97%, transparent 100%),
    radial-gradient(circle 44px at 38% 100%, #fff 97%, transparent 100%), radial-gradient(circle 60px at 48% 100%, #fff 97%, transparent 100%),
    radial-gradient(circle 48px at 57% 100%, #fff 97%, transparent 100%), radial-gradient(circle 68px at 67% 100%, #fff 97%, transparent 100%),
    radial-gradient(circle 46px at 77% 100%, #fff 97%, transparent 100%), radial-gradient(circle 60px at 86% 100%, #fff 97%, transparent 100%),
    radial-gradient(circle 42px at 95% 100%, #fff 97%, transparent 100%),
    linear-gradient(transparent 28%, #fff 52%, #fff 66%, rgba(255,255,255,0) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* v19: cloud drawn from overlapping circles: white billows over a faint blue-grey rim, fading out at the base */
.bframe--home::after { left: -1%; right: -1%; bottom: -46px; height: 120px; filter: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%20150%22%20preserveAspectRatio%3D%22none%22%3E%3Crect%20x%3D%220%22%20y%3D%22125%22%20width%3D%221440%22%20height%3D%2225%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%224%22%20cy%3D%22122%22%20r%3D%2263%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%2274%22%20cy%3D%22122%22%20r%3D%2271%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%22154%22%20cy%3D%22122%22%20r%3D%2253%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%22211%22%20cy%3D%22122%22%20r%3D%2255%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%22271%22%20cy%3D%22122%22%20r%3D%2259%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%22336%22%20cy%3D%22122%22%20r%3D%2259%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%22401%22%20cy%3D%22122%22%20r%3D%2263%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%22471%22%20cy%3D%22122%22%20r%3D%2253%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%22528%22%20cy%3D%22122%22%20r%3D%2253%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%22585%22%20cy%3D%22122%22%20r%3D%2253%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%22642%22%20cy%3D%22122%22%20r%3D%2259%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%22707%22%20cy%3D%22122%22%20r%3D%2277%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%22794%22%20cy%3D%22122%22%20r%3D%2271%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%22874%22%20cy%3D%22122%22%20r%3D%2267%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%22949%22%20cy%3D%22122%22%20r%3D%2267%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%221024%22%20cy%3D%22122%22%20r%3D%2253%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%221081%22%20cy%3D%22122%22%20r%3D%2263%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%221151%22%20cy%3D%22122%22%20r%3D%2277%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%221238%22%20cy%3D%22122%22%20r%3D%2277%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%221325%22%20cy%3D%22122%22%20r%3D%2271%22%20fill%3D%22%23e3ebf6%22/%3E%3Ccircle%20cx%3D%221405%22%20cy%3D%22122%22%20r%3D%2271%22%20fill%3D%22%23e3ebf6%22/%3E%3Crect%20x%3D%220%22%20y%3D%22128%22%20width%3D%221440%22%20height%3D%2222%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%22126%22%20r%3D%2256%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22125%22%20r%3D%2264%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%22128%22%20r%3D%2246%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%22217%22%20cy%3D%22127%22%20r%3D%2248%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%22277%22%20cy%3D%22124%22%20r%3D%2252%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%22342%22%20cy%3D%22134%22%20r%3D%2252%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%22407%22%20cy%3D%22128%22%20r%3D%2256%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%22477%22%20cy%3D%22128%22%20r%3D%2246%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%22534%22%20cy%3D%22127%22%20r%3D%2246%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%22591%22%20cy%3D%22126%22%20r%3D%2246%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%22648%22%20cy%3D%22128%22%20r%3D%2252%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%22713%22%20cy%3D%22128%22%20r%3D%2270%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%22800%22%20cy%3D%22134%22%20r%3D%2264%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%22880%22%20cy%3D%22129%22%20r%3D%2260%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%22955%22%20cy%3D%22125%22%20r%3D%2260%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%221030%22%20cy%3D%22133%22%20r%3D%2246%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%221087%22%20cy%3D%22129%22%20r%3D%2256%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%221157%22%20cy%3D%22134%22%20r%3D%2270%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%221244%22%20cy%3D%22130%22%20r%3D%2270%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%221331%22%20cy%3D%22132%22%20r%3D%2264%22%20fill%3D%22%23fff%22/%3E%3Ccircle%20cx%3D%221411%22%20cy%3D%22127%22%20r%3D%2264%22%20fill%3D%22%23fff%22/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(#000 0%, #000 66%, transparent 100%); mask-image: linear-gradient(#000 0%, #000 66%, transparent 100%); }

/* v20: no zoom on photos. The unveil stays, the scale settle and hover scale are gone; crops favour the subject. */
.js-motion [data-reveal="image"] img, .js-motion [data-reveal="image"].is-in img,
.js-motion .scard:hover [data-reveal="image"].is-in img, .js-motion .art a:hover [data-reveal="image"].is-in img,
.scard:hover .ph--img img, .art a:hover .ph--img img, .art a:hover .art__img img, .seg:hover .seg__img img { transform: none !important; }
.js-motion [data-reveal="image"] img { transition: clip-path 1.1s var(--ease); }
.phero__vis .ph--img img { object-position: 50% 38%; }
.tall .ph--img img { object-position: 50% 30%; }
.collage__in .ph--img img { object-position: 50% 35%; }

/* demo form: honeypot for bots, and the thank-you state after it is sent to the CMS */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__done { padding: 2rem 0; }
.form__done h3 { font: 650 1.6rem/1.2 var(--display); font-stretch: 108%; margin-bottom: .5rem; }
.form__done p { color: var(--ink-2); }

/* =====================================================================================
   Phone layer (2026-10-31). Most visitors are on a phone: fewer screens to scroll,
   card lists swipe sideways with the next card peeking, footer groups open on tap,
   long pages get a sticky row of section shortcuts. Phones only; desktop is unchanged.
   ===================================================================================== */
@media (max-width: 672px) {
  /* card lists become swipe rows */
  .caps, .lcards, .scards, .plans, .icards, .pteases, .paths {
    display: flex !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: .75rem;
    margin-inline: calc(-1 * var(--gutter)); padding: .25rem var(--gutter) .75rem; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .caps::-webkit-scrollbar, .lcards::-webkit-scrollbar, .scards::-webkit-scrollbar, .plans::-webkit-scrollbar,
  .icards::-webkit-scrollbar, .pteases::-webkit-scrollbar, .paths::-webkit-scrollbar { display: none; }
  .caps > *, .lcards > *, .scards > *, .icards > *, .pteases > *, .paths > * { flex: 0 0 80%; scroll-snap-align: start; margin: 0 !important; }
  .plans > * { flex: 0 0 86%; scroll-snap-align: center; margin: 0 !important; }
  .cap { padding: 1.5rem 1.25rem; }
  /* partners: same layout as desktop, scaled down (three to a row) */
  .partners { padding: 2rem 0 .5rem; }
  .partners__h { margin-bottom: 1rem; padding-inline: 1rem; font-size: .875rem; }
  .partners__row { display: flex !important; flex-wrap: wrap; justify-content: center; gap: .5rem; }
  .partners__row > .pslot { flex: 0 1 calc((100% - 1rem) / 3) !important; min-width: 0 !important; gap: .375rem; }
  .pslot__logo { height: 3.25rem; padding: 0 .5rem; gap: .375rem; }
  .pslot__logo img { max-height: 1.75rem; max-width: 100%; }
  .pslot__logo b { font-size: .75rem; line-height: 1.2; }
  .pslot__logo .ic { width: 1rem; height: 1rem; }
  .pslot small { font-size: .6875rem; }
  /* "swipe" hint and dots under every swipe row */
  .swipe-ui { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .25rem; font-size: .8125rem; color: var(--ink-2); }
  .swipe-ui__dots { display: flex; gap: .375rem; }
  .swipe-ui__dots i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--s2); transition: background .2s, width .2s; }
  .swipe-ui__dots i.is-on { background: var(--primary); width: 1.1rem; border-radius: 1rem; }

  /* footer: groups open on tap, links are 48px tall */
  .footer__top { grid-template-columns: 1fr !important; gap: 0; }
  .footer__top > div:not(.footer__brand) { grid-column: auto !important; border-top: 1px solid rgba(255,255,255,.14); }
  .footer__top > div:not(.footer__brand):last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
  .footer__brand { padding-bottom: 1.5rem; }
  .footer h4.is-tap { display: flex; justify-content: space-between; align-items: center; min-height: 3.25rem; margin: 0; cursor: pointer; font-size: 1rem; }
  .footer h4.is-tap::after { content: ''; width: .55rem; height: .55rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); }
  .footer h4.is-tap[aria-expanded="true"]::after { transform: rotate(-135deg); }
  .footer h4.is-tap + ul { display: none; columns: 1 !important; padding-bottom: .75rem; }
  .footer h4.is-tap[aria-expanded="true"] + ul { display: block; }
  .footer h4.is-tap + ul a { display: flex; align-items: center; min-height: 2.75rem; }

  /* sticky row of section shortcuts on long pages */
  .jump { position: sticky; top: var(--nav); z-index: 40; display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: .5rem var(--gutter);
          background: #fff; border-bottom: 1px solid var(--hair); }
  .jump::-webkit-scrollbar { display: none; }
  .jump a { flex: none; display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .9rem; border: 1px solid var(--hair); border-radius: 999px; font-size: .8125rem; text-decoration: none; color: var(--ink-2); background: #fff; }
  .jump a.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

  /* pricing: the three fleet sizes fit as equal segments */
  .sizepick { display: grid; gap: .75rem; }
  .sizepick .ptabs { display: grid !important; grid-template-columns: repeat(3, 1fr); width: 100%; border: 1px solid var(--hair) !important; border-radius: 999px; padding: 3px; }
  .sizepick .ptab { min-height: 2.75rem; padding: 0 .25rem; font-size: .8125rem; border-radius: 999px; border: 0; white-space: normal; line-height: 1.2; }
  .sizepick .ptab[aria-pressed="true"] { background: var(--ink); color: #fff; }

  /* tap targets and no iPhone zoom on fields */
  .btn { min-height: 3rem; }
  input, select, textarea { font-size: 16px !important; }
  .faq summary { min-height: 3.25rem; }
}
@media (min-width: 673px) { .swipe-ui, .jump { display: none !important; } }


/* =====================================================================================
   Smoothness and the demo form (2026-10-31)
   ===================================================================================== */
/* ---------- motion on phones (desktop keeps its original motion) ----------
   Phones: no page cross-fade (capturing the old page is what stutters), no word-by-word headlines.
   The opening section rises once as a single piece; lower sections use short, small entrances. */
@media (max-width: 672px) {
  @view-transition { navigation: none; }
  /* visible but light: only opacity and transform animate (the phone's compositor does the work) */
  .js-motion [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--pd, 0ms); }
  .js-motion [data-reveal].is-in { opacity: 1; transform: none; }
  .js-motion [data-reveal="stagger"] { opacity: 1; transform: none; }
  .js-motion [data-reveal="stagger"] > * { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .5s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1), background .11s var(--ease);
    transition-delay: calc(min(var(--i, 0), 5) * 70ms), calc(min(var(--i, 0), 5) * 70ms), 0s; }
  .js-motion [data-reveal="stagger"].is-in > * { opacity: 1; transform: none; }
  /* photos: a soft fade and settle instead of the clip unveil (clip-path repaints every frame on phones) */
  .js-motion [data-reveal="image"] { opacity: 0; transform: none; transition: opacity .7s cubic-bezier(.22, 1, .36, 1); }
  .js-motion [data-reveal="image"].is-in { opacity: 1; }
  .js-motion [data-reveal="image"] img { clip-path: none !important; transform: scale(1.06) !important; transition: transform 1s cubic-bezier(.22, 1, .36, 1) !important; }
  .js-motion [data-reveal="image"].is-in img { transform: none !important; }
  /* headline words: short and quick on phones, moved by the compositor only */
  .js-motion .word > span { transform: translate3d(0, 105%, 0); transition: transform .48s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(min(var(--w), 10) * 28ms); will-change: transform; }
  .js-motion .is-in .word > span, .js-motion .word.is-in > span { transform: none; will-change: auto; }
}

/* section links land below the sticky header (and the shortcut row on phones) */
html { scroll-padding-top: calc(var(--nav) + 1.25rem); }
@media (max-width: 672px) { html { scroll-padding-top: calc(var(--nav) + 4rem); } }

/* the page behind an open dialog does not scroll */
html.is-locked { overflow: hidden; }

/* demo form: the dialog never grows past the screen; the form scrolls inside it and Send stays in reach */
.demo { max-height: calc(100dvh - 2rem); display: none; flex-direction: column; overscroll-behavior: contain; }
.demo[open] { display: flex; }
.demo__grid { flex: 1; min-height: 0; }
.demo__side { overflow: hidden; }
.demo__main { min-height: 0; max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.demo__main .form button[type="submit"] { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -14px 18px 6px #fff; }
@media (max-width: 760px) {
  .demo { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .demo__grid { display: flex; flex-direction: column; height: 100%; }
  .demo__side { flex: none; padding: 1rem 3.5rem 1rem 1.25rem; flex-direction: row; align-items: center; gap: .75rem; }
  .demo__side img { width: 2rem; }
  .demo__side h2 { font-size: 1.25rem; }
  .demo__main { flex: 1; max-height: none; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom)); }
  .demo__x { position: fixed; top: .5rem; right: .5rem; color: #fff; z-index: 3; }
  .demo__main .form button[type="submit"] { bottom: env(safe-area-inset-bottom); }
}

/* no zoom when a field is tapped, on any touch phone (iOS zooms below 16px) */
@media (hover: none), (pointer: coarse) { input, select, textarea { font-size: 16px !important; } }

/* phone mockup on the platform page: the mark alone, a little larger */
.phone__scr--splash .phone__mark { width: 5.5rem; }
@media (max-width: 760px) { .demo__main .form button[type="submit"] { width: 100%; justify-content: space-between; } }

/* ---------- 2026-10-31 (b) ---------- */
/* the open phone menu keeps the page behind it still */
.sheet { overscroll-behavior: contain; }


/* the home page dashboard picture is the desktop layout scaled down on every screen, never rearranged */
@media (max-width: 1056px) { .bframe .d2--ghost { font-size: calc(var(--content) / 88) !important; } }
@media (max-width: 672px) {
  .bframe .d2--ghost { font-size: calc(var(--content) / 88) !important; }
  .bframe .d2__body { grid-template-columns: 16.5em 1fr !important; }
  .bframe .d2__nav { display: block !important; }
  .bframe .d2__tiles { grid-template-columns: repeat(6, 1fr) !important; }
  .bframe .dg-kpis { grid-template-columns: repeat(4, 1fr) !important; }
  .bframe .dg-row--a { grid-template-columns: 2fr 1fr !important; }
  .bframe .dg-row--b { grid-template-columns: 2fr 1fr !important; }
  .bframe__bar { height: 1.75rem; gap: .3rem; padding: 0 .6rem; }
  .bframe__bar i { width: .45rem; height: .45rem; }
  .bframe__bar span { font-size: .5625rem; padding: .1rem 1.25rem; }
  .bframe--home .d2__body { height: 41em; }
  /* platform: the hero diagram repeats the module list right below it, so phones skip it */
  .phero .arch { display: none; }
}
/* while the page is pinned, the header (and the menu's close button) stays on top */
html.is-locked .header { position: fixed; top: 0; left: 0; right: 0; transform: none !important; }
/* home on phones: the photo story starts right under the dashboard picture */
@media (max-width: 672px) {
  .shero { padding-bottom: .5rem; }
  .shero + .band, .shero + section { padding-top: 2.25rem; }
}