/* Layout: white pages, one black hero band, left-aligned 12-column wrap; ASCII drawings are the house illustration style, photos carry the real-world material */
:root {
  --paper: #FFFFFF;
  --ink: #050505;
  --blue: #6B95F7;
  --blue-soft: #93AEE8;
  --blue-border: #CCD6E8;
  --ink-2: #4C5059;
  --ink-3: #8A8F99;
  --rule: #E3E8F0;
  --wash: #F3F6FE;
  --blue-text: #324DAE;
  --accent: var(--blue);
  --f-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-md: 1.25rem;
  --t-lg: 1.625rem;
  --t-xl: clamp(1.875rem, 3.2vw, 2.625rem);
  --t-xxl: clamp(2.5rem, 5.4vw, 4.5rem);
  --gap: clamp(40px, 6vw, 88px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
pre, code, .ascii, .ascii-scene, .milestones, .plan-log, .checks, .timeline time { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-base)/1.6 var(--f-sans); }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--t-xxl); line-height: 1.02; letter-spacing: -0.032em; }
h2 { font-size: var(--t-xl); line-height: 1.1; letter-spacing: -0.024em; }
h3 { font-size: var(--t-md); line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.sect { padding-block: clamp(64px, 8.5vw, 116px); }
.lede { font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.muted { color: var(--ink-2); }
.tbd { background: #FFF3B0; color: var(--ink); padding: 0 0.25em; border-radius: 2px; font-weight: 500; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; font: 600 0.95rem/1 var(--f-sans); text-decoration: none; border: 1.5px solid var(--ink); border-radius: 2px; appearance: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn-primary, .btn-head { background: linear-gradient(110deg, #324DAE, #4B73CB); border-color: #A8BEEA; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.btn-primary:visited, .btn-head:visited { color: #FFFFFF; border-color: #A8BEEA; }
.btn-primary:hover, .btn-head:hover { background: linear-gradient(110deg, #293F96, #4065B9); border-color: #89A6DF; color: #FFFFFF; }
.btn-quiet { background: #FFFFFF; border-color: #CCD6E8; color: #3B4352; -webkit-text-fill-color: #3B4352; }
.btn-quiet:visited { color: #3B4352; border-color: #CCD6E8; }
.btn-quiet:hover { background: #F1F5FD; border-color: #93AEE8; color: #324DAE; -webkit-text-fill-color: #324DAE; }
.link { display: inline-block; color: var(--blue-text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.link:hover { color: var(--blue-text); }

.site-head { border-bottom: 1px solid var(--rule); background: var(--paper); position: relative; z-index: 5; }
.head-row { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; }
.logo { flex: none; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { text-decoration: none; font-size: 0.95rem; font-weight: 500; color: var(--ink-2); padding-block: 6px; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--blue-text); }
.nav a[aria-current="page"] { color: var(--blue-text); border-bottom-color: var(--blue); }
.nav-cta-m { display: none; }
.btn-head { min-height: 40px; padding: 0 16px; font-size: 0.9rem; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1.5px solid currentColor; color: inherit; font: 600 0.9rem var(--f-sans); padding: 8px 14px; border-radius: 2px; cursor: pointer; }
.head-dark { position: absolute; top: 0; left: 0; right: 0; background: transparent; color: var(--paper); border-bottom-color: rgba(255, 255, 255, 0.08); }
.head-dark .nav a { color: #B9BDC6; }
.head-dark .nav a:hover { color: var(--paper); }
.head-dark .btn-head { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.head-dark .btn-head:hover { background: var(--paper); border-color: var(--paper); }

.hero { position: relative; background: var(--paper); color: var(--ink); overflow: hidden; border-bottom: 1px solid var(--rule); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-height: clamp(560px, 76vh, 760px); padding-block: clamp(64px, 6.5vw, 96px) 104px; }
.hero-ascii { position: absolute; right: -9%; bottom: 0; width: min(1500px, 100%); height: auto; aspect-ratio: 12 / 5; display: block; pointer-events: none; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 720px; min-width: 0; gap: 24px; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.4rem, 3.8vw, 3.5rem); line-height: 1.08; letter-spacing: -.035em; }
.hero-accent { color: var(--blue-soft); padding-right: .1em; margin-right: -.1em; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-accent {
    background-image: linear-gradient(112deg, #7F9FE0 0%, #ADC5F0 23%, #86A6E5 43%, #C0D2F2 61%, #91AFE7 80%, #AAC3EF 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.hero-description { display: grid; gap: 14px; max-width: min(25em, 45vw); color: var(--ink-2); font-size: 1.125rem; line-height: 1.65; }
@media (min-width: 901px) and (max-width: 1200px) {
  .hero-ascii { right: -10%; }
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .actions { justify-self: start; max-width: 100%; }

.ascii { margin: 0; font: 400 0.82rem/1.5 var(--f-mono); white-space: pre; color: var(--ink); overflow-x: auto; }
.ascii b { color: var(--blue); font-weight: 500; }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: center; }
.split.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.rev > .split-copy { order: 2; }
.split-copy { display: grid; gap: 20px; align-content: start; min-width: 0; }
.split-copy p { color: var(--ink-2); max-width: 34em; }
.split-art { min-width: 0; }

.portfolio { background: var(--wash); border-bottom: 1px solid var(--blue-border); }
.portfolio .tree-ascii { padding: 28px 0 28px 28px; border-left: 2px solid var(--blue-border); }

.story { background: var(--wash); }
.sect-head { display: grid; gap: 10px; margin-bottom: 56px; }
.sect-head p { color: var(--ink-2); }
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 44px; border-top: 2px solid var(--blue-border); }
.timeline li { display: grid; gap: 10px; align-content: start; padding: 22px 24px 0 0; position: relative; }
.timeline li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--blue); }
.timeline time { font: 500 0.9rem var(--f-sans); color: var(--blue-text); }
.timeline .quote { font-size: 1rem; color: var(--ink); }
.timeline p { color: var(--ink-2); font-size: 0.98rem; }

.who h2 { margin-bottom: 48px; }
.segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.seg { display: grid; gap: 14px; align-content: start; }
.seg img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; filter: grayscale(0.15); }
.seg p { color: var(--ink-2); font-size: 0.98rem; }
.callwhen { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; padding-top: 32px; border-top: 1px solid var(--rule); }
.callwhen ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.callwhen li { padding-left: 22px; position: relative; color: var(--ink-2); }
.callwhen li::before { content: "+"; position: absolute; left: 0; font-family: var(--f-sans); color: var(--blue-text); }

.cta { background: var(--paper); padding-block: clamp(24px, 3vw, 40px) clamp(40px, 4.5vw, 64px); }
.cta h2 { color: #FFFFFF; }
.cta .btn-primary { background: #FFFFFF; border-color: #FFFFFF; color: var(--blue-text); -webkit-text-fill-color: var(--blue-text); box-shadow: 0 10px 30px rgba(8, 18, 52, .25); }
.cta .btn-primary:visited { color: var(--blue-text); border-color: #FFFFFF; }
.cta .btn-primary:hover { background: var(--wash); border-color: var(--wash); color: #24398A; -webkit-text-fill-color: #24398A; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 4vw, 64px); align-items: center; padding: clamp(28px, 3.6vw, 52px); border-radius: 18px; overflow: hidden; background: linear-gradient(115deg, #24398A 0%, #324DAE 45%, #4B73CB 100%); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
.cta-img img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.cta-copy { display: grid; gap: 22px; justify-items: start; }
.cta-copy p { color: #DCE5FB; -webkit-text-fill-color: #DCE5FB; max-width: 30em; }
/* Carousel preview: the free post we send back, three slides fanned out.
   The posts have their own look (serif + condensed type, cream / charcoal / brass) so they read as a builder's posts, not as the site. */
.cta-art { margin: 0; display: grid; gap: 16px; justify-items: start; padding-block: 12px; --p-cream: #F4EFE6; --p-ink: #1C2421; --p-brass: #C9A86E; --p-serif: "DM Serif Display", Georgia, serif; --p-cond: "Oswald", "Arial Narrow", sans-serif; }
.cr { position: relative; width: min(250px, 50%); aspect-ratio: 4 / 5; }
.cr-card { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; background: var(--p-ink); box-shadow: 0 24px 60px rgba(8, 18, 52, .4); container-type: inline-size; }
.cr-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-back1 { transform: translateX(48%) rotate(5deg) scale(.94); }
.cr-back2 { transform: translateX(90%) rotate(10deg) scale(.86); }
.ps { position: absolute; inset: 0; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
.ps p, .ps ul { margin: 0; }
.ps em { font-style: italic; }
.cr-dots { position: absolute; left: 0; right: 0; bottom: 3.4cqw; display: flex; justify-content: center; gap: 1.8cqw; }
.cr-dots i { width: 2cqw; height: 2cqw; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.cr-dots i.on { background: #FFFFFF; }

/* Slide 1: listing cover */
.ps-1 { display: grid; align-content: end; padding: 8cqw 8cqw 10cqw; background: linear-gradient(180deg, rgba(10, 14, 12, .5) 0%, rgba(10, 14, 12, 0) 24%, rgba(10, 14, 12, 0) 34%, rgba(10, 14, 12, .72) 58%, rgba(10, 14, 12, .92) 100%); }
.p1-frame { position: absolute; inset: 3.6cqw; border: 1px solid rgba(244, 239, 230, .55); border-radius: 6px; pointer-events: none; }
.p1-body { display: grid; gap: 3.4cqw; }
.p1-kicker { justify-self: start; padding: 2cqw 3.4cqw 1.8cqw; background: var(--p-brass); color: var(--p-ink); -webkit-text-fill-color: var(--p-ink); font: 600 3.3cqw/1 var(--p-cond); letter-spacing: .3em; text-transform: uppercase; border-radius: 2px; }
.p1-title { font: 400 10.6cqw/1.02 var(--p-serif); letter-spacing: -.01em; }
.p1-title em { color: #EBDDBF; -webkit-text-fill-color: #EBDDBF; }
.p1-specs { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin-top: 1.6cqw; border-top: 1px solid rgba(244, 239, 230, .4); padding-top: 3.4cqw; }
.p1-specs span { display: grid; gap: 1cqw; padding: 0 4.4cqw; border-left: 1px solid rgba(244, 239, 230, .4); font: 400 2.9cqw/1 var(--p-cond); letter-spacing: .2em; text-transform: uppercase; color: #D9D2C4; -webkit-text-fill-color: #D9D2C4; }
.p1-specs span:first-child { padding-left: 0; border-left: 0; }
.p1-specs b { font: 400 6.2cqw/1 var(--p-serif); letter-spacing: 0; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }

/* Slide 2: open house announcement (date block on the right so it shows past the cover) */
.ps-2 { display: grid; align-content: end; }
.p2-panel { display: grid; gap: 3cqw; justify-items: end; text-align: right; padding: 7cqw 7cqw 9cqw; background: var(--p-cream); color: var(--p-ink); -webkit-text-fill-color: var(--p-ink); border-top: 1.6cqw solid var(--p-brass); }
.p2-kicker { font: 500 3.4cqw/1 var(--p-cond); letter-spacing: .32em; text-transform: uppercase; color: #8C7444; -webkit-text-fill-color: #8C7444; }
.p2-title { font: 600 13.5cqw/.88 var(--p-cond); letter-spacing: .01em; text-transform: uppercase; }
.p2-when { display: flex; align-items: baseline; gap: 3cqw; padding: 3cqw 4.4cqw; background: var(--p-ink); color: var(--p-cream); -webkit-text-fill-color: var(--p-cream); text-align: center; border-radius: 3px; }
.p2-day { font: 400 6.6cqw/1 var(--p-serif); white-space: nowrap; }
.p2-day em { color: var(--p-brass); -webkit-text-fill-color: var(--p-brass); }
.p2-time { font: 500 3.6cqw/1 var(--p-cond); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.p2-note { max-width: 58%; font: italic 400 4.6cqw/1.25 var(--p-serif); color: #4A4F4B; -webkit-text-fill-color: #4A4F4B; }

/* Slide 3: feature callouts (labels hang to the left of their dots, toward the right edge that shows) */
.ps-3 { display: grid; grid-template-rows: auto 1fr auto; background: linear-gradient(180deg, rgba(28, 36, 33, .78) 0%, rgba(28, 36, 33, 0) 30%, rgba(28, 36, 33, 0) 72%, rgba(28, 36, 33, .7) 100%); }
.p3-head { display: flex; justify-content: flex-end; align-items: start; gap: 3cqw; padding: 8cqw 7cqw 0; }
.p3-title { display: grid; justify-items: end; font: 400 13cqw/.95 var(--p-serif); }
.p3-title small { font: 500 3.6cqw/1.4 var(--p-cond); letter-spacing: .3em; text-transform: uppercase; color: var(--p-cream); -webkit-text-fill-color: var(--p-cream); }
.p3-spots { list-style: none; padding: 0; position: relative; }
.p3-spots li { position: absolute; top: var(--y); left: var(--x); display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 1.6cqw; transform: translate(-2.2cqw, -50%); }
.p3-spots span { padding: 1.8cqw 3cqw; background: var(--p-cream); color: var(--p-ink); -webkit-text-fill-color: var(--p-ink); font: 500 3.5cqw/1 var(--p-cond); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; border-radius: 2px; }
.p3-spots i { width: 4.4cqw; height: 4.4cqw; flex: none; border-radius: 50%; background: var(--p-brass); box-shadow: 0 0 0 1.4cqw rgba(201, 168, 110, .35); }
.p3-foot { padding: 0 7cqw 8cqw; text-align: right; font: italic 400 4.4cqw/1 var(--p-serif); color: var(--p-cream); -webkit-text-fill-color: var(--p-cream); }

.page-head { padding-block: clamp(64px, 9vw, 120px) clamp(40px, 5vw, 64px); }
.ph-grid { display: grid; gap: 28px; }
.ph-copy { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.ph-copy h1 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); }
.ph-img { margin-top: clamp(16px, 3vw, 32px); }
.ph-img img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }



.auto { background: var(--wash); }
.auto .split { align-items: start; }
.trig { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 0.95rem; }
.trig th { text-align: left; font-weight: 600; font-size: var(--t-sm); padding: 0 12px 10px 0; border-bottom: 2px solid var(--ink); }
.trig td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-2); }
.trig td:first-child { color: var(--ink); width: 52%; }

.factcheck { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1.5px solid var(--ink); }
.fs, .draft { padding: 24px; display: grid; gap: 16px; align-content: start; }
.fs { border-right: 1.5px solid var(--ink); }
.fs-title, .draft-title { font-weight: 600; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fs-title span, .draft-title span { font: 400 0.78rem var(--f-sans); color: var(--ink-3); }
.fs dl { margin: 0; display: grid; gap: 10px; font-size: 0.92rem; }
.fs dl div { display: grid; gap: 2px; }
.fs dt { font: 400 0.78rem var(--f-sans); color: var(--ink-3); }
.fs dd { margin: 0; }
.draft-text { font-size: 0.98rem; line-height: 1.6; }
mark.ok { background: #E3ECFF; color: var(--ink); padding: 0 2px; }
mark.bad { background: var(--ink); color: var(--paper); padding: 0 3px; text-decoration: line-through; text-decoration-color: var(--blue); }
.checks { display: grid; gap: 8px; font: 400 0.8rem/1.45 var(--f-sans); }
.checks li { padding-left: 34px; position: relative; color: var(--ink-2); }
.checks li.ok::before { content: "[ok]"; position: absolute; left: 0; color: var(--blue-text); }
.checks li.bad::before { content: "[x]"; position: absolute; left: 0; color: var(--ink); font-weight: 500; }

.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); }
.two > div { display: grid; gap: 16px; align-content: start; }
.two p { color: var(--ink-2); }
.platforms { display: flex; flex-wrap: wrap; gap: 8px; }
.platforms li { border: 1.5px solid var(--ink); padding: 6px 14px; font-weight: 500; font-size: 0.95rem; }

.next { border-top: 1px solid var(--rule); }
.next-link { display: flex; align-items: baseline; gap: 20px; padding-block: 44px; text-decoration: none; font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; }
.next-link span { font: 400 0.85rem var(--f-sans); color: var(--blue-text); }
.next-link:hover { color: var(--blue-text); }

.steps { display: grid; gap: 0; counter-reset: s; }
.steps li { display: grid; row-gap: 6px; padding-block: 22px; border-top: 1px solid var(--rule); counter-increment: s; }
.steps p { color: var(--ink-2); }

.convo { display: grid; gap: 10px; padding: 24px; border: 1.5px solid var(--ink); font-size: 0.95rem; }
.convo-h { display: flex; justify-content: space-between; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.convo-h span, .lead-h span, .rep-h span { font: 400 0.78rem var(--f-sans); color: var(--ink-3); font-weight: 400; }
.msg { max-width: 84%; padding: 10px 14px; line-height: 1.45; }
.msg.them { background: var(--wash); justify-self: start; }
.msg.us { background: var(--ink); color: var(--paper); justify-self: end; }
.convo-meta { font: 400 0.78rem var(--f-sans); color: var(--blue-text); justify-self: end; padding-top: 6px; }

.handoff { background: var(--wash); }
.lead { background: var(--paper); border: 1.5px solid var(--ink); padding: 24px; display: grid; gap: 18px; }
.lead-h { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.lead dl, .rep { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.lead dt, .rep dt { font: 400 0.78rem var(--f-sans); color: var(--ink-3); }
.lead dd, .rep dd { margin: 2px 0 0; }
.lead-sum { padding-top: 16px; border-top: 1px dashed var(--rule); color: var(--ink-2); font-size: 0.95rem; }

.guard h2 { margin-bottom: 40px; }
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.rules li { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid var(--ink); }
.rules p { color: var(--ink-2); font-size: 0.96rem; }

.flow-ascii { font-size: clamp(0.62rem, 1vw, 0.85rem); padding: 28px; background: var(--ink); color: #D9DCE2; }

.guarantees { display: grid; counter-reset: g; }
.g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px 48px; padding-block: 40px; border-top: 2px solid var(--ink); counter-increment: g; }
.g:last-child { border-bottom: 2px solid var(--ink); }
.g-p { font-size: clamp(1.5rem, 2.6vw, 2.125rem); letter-spacing: -0.02em; line-height: 1.15; }
.g-d { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.g-d h3 { font-size: var(--t-sm); margin-bottom: 8px; }
.g-d p { color: var(--ink-2); font-size: 0.98rem; }
.g-miss p { color: var(--ink); font-weight: 500; }
.draft-note { grid-column: 2; font-size: var(--t-sm); }
.notp .split:not(:has(figure)) { grid-template-columns: minmax(0, 1fr); }
.notp .split:not(:has(figure)) > * { max-width: 640px; width: 100%; }
.notp-img img, .addon-img img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.plain-list { display: grid; gap: 0; }
.plain-list li { padding-block: 12px; border-bottom: 1px solid var(--rule); }
.plain-list li:first-child { border-top: 1px solid var(--rule); }
.h-gap { margin-top: 28px; }

.scope { padding-top: clamp(24px, 4vw, 48px); }
.scope-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); align-items: start; }
.picker { display: grid; gap: 28px; }
.picker fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.picker legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.picker label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--rule); cursor: pointer; font-size: 0.96rem; }
.picker label:has(input:checked) { border-color: var(--ink); background: var(--wash); }
.picker input { accent-color: var(--blue-text); margin: 4px 0 0; }
.depth p { color: var(--ink-2); font-size: 0.95rem; }
.eng-wrap { min-width: 0; overflow-x: auto; }
.eng { width: 100%; border-collapse: collapse; min-width: 560px; }
.eng th, .eng td { text-align: left; vertical-align: top; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--rule); font-size: 0.96rem; }
.eng thead th { font-size: var(--t-sm); border-bottom: 2px solid var(--ink); padding-top: 0; }
.eng tbody th { font-size: var(--t-md); font-weight: 600; width: 18%; padding-left: 16px; }
.eng tbody td { color: var(--ink-2); }
.eng tr.is-match { background: var(--ink); }
.eng tr.is-match th, .eng tr.is-match td { color: var(--paper); border-bottom-color: var(--ink); }
.eng tr.is-match th { box-shadow: inset 4px 0 0 var(--blue); }
.eng-out { margin-top: 18px; font: 400 0.85rem/1.5 var(--f-sans); color: var(--blue-text); min-height: 3em; }

.path h2, .weeks h2 { margin-bottom: 40px; }
.path-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: p; }
.path-list li { display: grid; gap: 10px; align-content: start; padding: 20px 28px 0 0; border-top: 2px solid var(--ink); counter-increment: p; position: relative; }
.path-list p { color: var(--ink-2); font-size: 0.96rem; }
.weeks { background: var(--wash); }
.week-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1.5px solid var(--ink); background: var(--paper); }
.wk { padding: 24px; display: grid; gap: 10px; align-content: start; min-height: 220px; }
.wk:not(:last-child) { border-right: 1px solid var(--rule); }
.wk p:last-child { color: var(--ink-2); font-size: 0.96rem; }
.wk.live { background: var(--ink); color: var(--paper); }
.wk.live p:last-child { color: #B9BDC6; }
.report { border: 1.5px solid var(--ink); padding: 24px; display: grid; gap: 20px; }
.rep-h { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.rep dd { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.02em; }
.need-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); }
.checklist { display: grid; gap: 0; }
.checklist li { padding: 14px 0 14px 40px; border-bottom: 1px solid var(--rule); position: relative; }
.checklist li::before { content: "[ ]"; position: absolute; left: 0; font-family: var(--f-sans); color: var(--blue-text); }

.portrait-ph { aspect-ratio: 4 / 5; background: var(--wash); border: 1.5px dashed var(--ink-3); display: grid; place-items: center; }
.founder .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.principles h2 { margin-bottom: 40px; }
.pr { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pr div { display: grid; gap: 8px; padding-top: 18px; border-top: 2px solid var(--ink); }
.pr dt { font-weight: 600; font-size: var(--t-md); }
.pr dd { margin: 0; color: var(--ink-2); }
.compare { background: var(--wash); }
.compare h2 { margin-bottom: 40px; }
.table-scroll { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; min-width: 620px; background: var(--paper); }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 18px 20px; border-bottom: 1px solid var(--rule); }
.cmp thead th { font-size: var(--t-sm); border-bottom: 2px solid var(--ink); }
.cmp thead th:last-child { background: var(--ink); color: var(--paper); }
.cmp tbody th { font-weight: 600; width: 22%; }
.cmp td { color: var(--ink-2); }
.cmp td:last-child { color: var(--ink); font-weight: 500; box-shadow: inset 2px 0 0 var(--blue); }
.fit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.fit-grid > div { display: grid; gap: 20px; }
.fit-img img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.start-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap); align-items: start; }
.start-copy { display: grid; gap: 22px; }
.start-copy h1 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); }
.start-img img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.vform { display: grid; gap: 18px; padding: clamp(20px, 3vw, 36px); border: 1.5px solid var(--ink); }
.field { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; }
.field label, .field legend { font-weight: 600; font-size: 0.92rem; padding: 0; }
.opt { font-weight: 400; color: var(--ink-3); }
.field input:not([type="checkbox"]), .field textarea { font: inherit; font-size: 1rem; padding: 11px 12px; border: 1.5px solid var(--rule); border-radius: 2px; background: var(--paper); color: var(--ink); width: 100%; min-width: 0; }
.field input:focus, .field textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px #DCE6FF; }
.field input[aria-invalid="true"] { border-color: var(--ink); background: #FFF6F6; }
.hint { font-size: var(--t-sm); color: var(--ink-3); }
.plats { display: flex; flex-wrap: wrap; gap: 8px; }
.plats legend { margin-bottom: 8px; width: 100%; }
.plats label { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; padding: 8px 12px; border: 1.5px solid var(--rule); cursor: pointer; }
.plats label:has(input:checked) { border-color: var(--ink); }
.plats input { accent-color: var(--blue-text); margin: 0; }
.form-err { font-size: 0.92rem; padding: 10px 12px; background: #FFF6F6; border-left: 3px solid var(--ink); }
.vform .btn { justify-self: start; }
.form-ok { padding: 16px; background: var(--wash); border-left: 3px solid var(--blue); display: grid; gap: 4px; }
.ok-h { font-weight: 600; }

.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 16px 20px; position: relative; font-size: 0.76rem; color: var(--ink-3); }
.foot-base::before { content: ""; position: absolute; top: 0; left: max(24px, env(safe-area-inset-left, 0px)); right: max(24px, env(safe-area-inset-right, 0px)); height: 1px; background: var(--rule); }

@media (max-width: 1080px) {
  .nav { gap: 18px; }
  .btn-head { display: none; }
}
@media (max-width: 900px) {
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px max(24px, env(safe-area-inset-right, 0px)) 20px max(24px, env(safe-area-inset-left, 0px)); background: inherit; border-bottom: 1px solid var(--rule); }
  .site-head:not(.head-dark) { background: var(--paper); }
  .head-dark .nav { background: var(--ink); }
  .nav.open { display: flex; }
  .nav a { padding-block: 12px; border-bottom: 1px solid var(--rule); }
  .head-dark .nav a { border-bottom-color: #22252B; }
  .nav-cta-m { display: block; font-weight: 600; color: var(--ink) !important; }
  .head-dark .nav-cta-m { color: var(--blue) !important; }
  .menu-btn { display: inline-block; }
  .hero-grid { min-height: 0; padding-top: 40px; padding-bottom: 24px; }
  .hero-break { display: none; }
  .hero-description { max-width: 25em; }
  .hero-ascii { position: relative; right: auto; width: 175%; max-width: none; margin-left: -61%; margin-top: 0; height: auto; }
  .hero-grid, .split, .cta-grid, .scope-grid, .need-grid, .start-grid, .founder .split, .two, .ph-copy, .callwhen { grid-template-columns: minmax(0, 1fr); }
  .split.rev { grid-template-columns: minmax(0, 1fr); }
  .split.rev > .split-copy { order: 0; }
  .timeline, .path-list, .week-grid, .rules, .pr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline { row-gap: 32px; border-top: 0; }
  .timeline li { border-top: 2px solid var(--ink); }
  .path-list { row-gap: 32px; }
  .path-list li:not(:last-child)::after { display: none; }
  .wk:nth-child(2) { border-right: 0; }
  .wk:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .segments, .fit-grid { grid-template-columns: minmax(0, 1fr); }
  .segments { gap: 44px; }
  .g, .g-d { grid-template-columns: minmax(0, 1fr); }
  .draft-note { grid-column: auto; }
  .factcheck { grid-template-columns: minmax(0, 1fr); }
  .fs { border-right: 0; border-bottom: 1.5px solid var(--ink); }
  .ph-img img { aspect-ratio: 16 / 10; }
  .portrait-ph { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .timeline, .path-list, .week-grid, .rules, .pr, .callwhen ul, .lead dl, .rep { grid-template-columns: minmax(0, 1fr); }
  .wk:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--rule); }
  .portfolio .tree-ascii { padding-left: 14px; font-size: 0.66rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- "Be different." graphic: choose what we handle ---- */
.lv { max-width: 600px; margin-left: auto; background: #FFFFFF; border: 1px solid var(--rule); border-radius: 14px; padding: 24px; box-shadow: 0 18px 50px rgba(20, 33, 61, .08); display: grid; gap: 18px; }
.lv-h { font-weight: 600; font-size: var(--t-md); color: var(--ink); }
.lv-tabs { display: flex; gap: 6px; background: var(--wash); padding: 5px; border-radius: 10px; }
.lv-tab { position: relative; cursor: pointer; }
.lv-tab input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lv-tab { display: grid; flex: 1 1 0; }
.lv-tab span { display: grid; place-items: center; text-align: center; line-height: 1.25; padding: 10px 12px; border-radius: 7px; font-weight: 600; font-size: 0.92rem; color: var(--ink-2); transition: background .15s, color .15s, box-shadow .15s; }
.lv-tab input:checked + span { background: #FFFFFF; color: var(--blue-text); -webkit-text-fill-color: var(--blue-text); box-shadow: 0 2px 8px rgba(20, 33, 61, .12); }
.lv-tab input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.lv-fit { font-size: 0.98rem; color: var(--ink); min-height: 2.9em; }
.lv-fit span { display: none; }
.lv:has(#lv-focused:checked) :is(.lv-fit-focused, .lv-price-focused),
.lv:has(#lv-core:checked) :is(.lv-fit-core, .lv-price-core),
.lv:has(#lv-portfolio:checked) :is(.lv-fit-portfolio, .lv-price-portfolio) { display: block; }
.lv-block { display: grid; gap: 10px; border-top: 1px solid var(--rule); padding-top: 16px; }
.lv-list { display: grid; gap: 9px; }
.lv-i { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: var(--ink); transition: color .15s; }
.lv-mark { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--blue-text); position: relative; }
.lv-mark::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid #FFFFFF; border-width: 0 2px 2px 0; rotate: 45deg; }
.lv-i::after { margin-left: auto; padding-left: 8px; font: 500 0.66rem/1 var(--f-sans); color: var(--ink-3); white-space: nowrap; }
.lv:has(#lv-focused:checked) .lv-i-core,
.lv:has(#lv-focused:checked, #lv-core:checked) .lv-i-portfolio { color: var(--ink-3); }
.lv:has(#lv-focused:checked) .lv-i-core .lv-mark,
.lv:has(#lv-focused:checked, #lv-core:checked) .lv-i-portfolio .lv-mark { background: #EEF0F3; }
.lv-mark::before { content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 2px; border-radius: 1px; background: #B5BAC4; opacity: 0; scale: 0 1; }
.lv:has(#lv-focused:checked) .lv-i-core .lv-mark::after,
.lv:has(#lv-focused:checked, #lv-core:checked) .lv-i-portfolio .lv-mark::after { opacity: 0; scale: .2; }
.lv:has(#lv-focused:checked) .lv-i-core .lv-mark::before,
.lv:has(#lv-focused:checked, #lv-core:checked) .lv-i-portfolio .lv-mark::before { opacity: 1; scale: 1; }
.lv-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; border-top: 1px solid var(--rule); padding-top: 18px; }

@media (max-width: 900px) {
  .lv { margin-left: 0; max-width: 100%; }
}
@media (max-width: 600px) {
  .lv { padding: 18px; }
  .lv-fit { min-height: 4.3em; }
  .lv-tabs { flex-direction: column; }
  .lv-tab { flex: none; }
}

/* ---- Social page ---- */
.sp-head { padding-block: clamp(48px, 6vw, 88px); }
.sp-head-copy { display: grid; gap: 22px; justify-items: center; text-align: center; max-width: 760px; margin: 0 auto clamp(36px, 5vw, 56px); }
.sp-head-copy .lede { max-width: 34em; }
.sp-head-copy h1 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); }
.sp-strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: end; }
.sp-ph { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -24px rgba(10, 10, 11, .4); height: clamp(220px, 24vw, 330px); }
.sp-strip .sp-ph:nth-child(2) { height: clamp(260px, 29vw, 400px); }
.sp-ph img { width: 100%; height: 100%; object-fit: cover; }
.sp-head { position: relative; z-index: 0; }

.sp-make { background: var(--paper); }
.sp-sect-head { display: grid; gap: 12px; margin-bottom: 40px; max-width: 40em; }
.sp-sect-head p { color: var(--ink-2); }

.sp-auto { background: linear-gradient(135deg, #18265F 0%, #24398A 50%, #324DAE 100%); color: #FFFFFF; }
.sp-auto-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gap); align-items: center; }
.sp-auto-copy { display: grid; gap: 18px; align-content: start; }
.sp-auto-copy h2 { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
.sp-auto-copy > p { color: #DCE5FB; max-width: 34em; }
.sp-trig { margin-top: 8px; }
.sp-trig th { color: #FFFFFF; border-bottom-color: rgba(255, 255, 255, .55); }
.sp-trig td { color: #C9D5F5; border-bottom-color: rgba(255, 255, 255, .14); }
.sp-trig td:first-child { color: #FFFFFF; }
.sp-flow { display: grid; width: 100%; max-width: 440px; justify-self: end; }
.sp-step { position: relative; display: grid; gap: 12px; padding: 18px 20px; border-radius: 14px; background: #FFFFFF; color: var(--ink); box-shadow: 0 18px 44px rgba(5, 10, 40, .32); }
.sp-step + .sp-step { margin-top: 36px; }
.sp-step + .sp-step::before { content: ""; position: absolute; left: 34px; top: -36px; width: 2px; height: 36px; background: repeating-linear-gradient(to bottom, #A8BEEA 0 5px, transparent 5px 10px); }
.sp-step:nth-child(2) { margin-left: 22px; margin-right: -22px; }
.sp-step:nth-child(2)::before { left: 12px; }
.sp-step:nth-child(3)::before { left: 56px; }
.sp-step-h { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.92rem; }
.sp-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--wash); color: var(--blue-text); }
.sp-time { margin-left: auto; font: 500 0.72rem/1 var(--f-sans); color: var(--ink-3); white-space: nowrap; }
.sp-rec { display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; background: #F7F8FA; border: 1px solid var(--rule); }
.sp-rec-label { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.sp-rec-change { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--ink-3); }
.sp-rec-change b { padding: 4px 10px; border-radius: 999px; background: #E2F4E8; color: #1D7443; font-size: 0.82rem; font-weight: 600; }
.sp-checks { display: grid; gap: 8px; font-size: 0.88rem; color: var(--ink-2); }
.sp-checks li { display: flex; align-items: flex-start; gap: 10px; }
.sp-checks li::before { content: "\2713"; flex: none; width: 18px; height: 18px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-text); color: #FFFFFF; font-size: 0.66rem; font-weight: 700; }
.sp-post { display: flex; align-items: center; gap: 14px; }
.sp-thumb { position: relative; width: 52px; height: 64px; flex: none; border-radius: 8px; overflow: hidden; }
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-play { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(5, 5, 5, .55); }
.sp-play::after { content: ""; position: absolute; left: 8px; top: 6px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #FFFFFF; }
.sp-post-meta { display: grid; gap: 8px; font-size: 0.9rem; font-weight: 600; }
.sp-mini { display: flex; gap: 6px; }
.sp-mini .sp-logo { width: 22px; height: 22px; border-radius: 6px; }

.sp-logo { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--brand); color: #FFFFFF; }
.sp-logo-ig { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }

.sp-final-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); }
.sp-control, .sp-where { display: grid; gap: 16px; align-content: start; }
.sp-control > p { color: var(--ink-2); max-width: 36em; }
.sp-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 16px; }
.sp-mode { display: grid; gap: 8px; align-content: start; }
.sp-mode h3 { font-size: 1.05rem; }
.sp-mode p { color: var(--ink-2); font-size: 0.9rem; }
.sp-meter { display: flex; gap: 4px; margin-bottom: 4px; }
.sp-meter i { flex: 1; height: 6px; border-radius: 3px; background: #E3E8F0; }
.sp-meter-1 i:nth-child(-n+1), .sp-meter-2 i:nth-child(-n+2), .sp-meter-3 i { background: var(--blue-text); }
.sp-platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 10px; margin-top: 16px; }
.sp-platforms li { display: grid; justify-items: center; gap: 8px; padding-block: 6px; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); text-align: center; }

@media (max-width: 900px) {
  .sp-auto-grid, .sp-final-grid { grid-template-columns: minmax(0, 1fr); }
  .sp-flow { justify-self: start; }
  .sp-step:nth-child(2) { margin-right: 0; }
}
@media (max-width: 600px) {
  .sp-modes { grid-template-columns: minmax(0, 1fr); }
  .sp-platforms { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .sp-platforms li { font-size: 0.72rem; }
  .sp-logo { width: 34px; height: 34px; border-radius: 9px; }
}

/* Why us? */
.sp-why { background: var(--wash); border-block: 1px solid var(--blue-border); }
.sp-why h2 { margin-bottom: 40px; }
.sp-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.sp-why-item { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 2px solid var(--blue-text); }
.sp-why-item h3 { font-size: 1.4rem; letter-spacing: -0.02em; }
.sp-why-item p { color: var(--ink-2); }
@media (max-width: 900px) {
  .sp-why-grid { grid-template-columns: minmax(0, 1fr); }
}

/* What we make */

/* What we make: a phone scrolling through example videos, with the list of formats beside it */
.mk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--gap); align-items: center; }
.mk-phone { position: relative; display: grid; place-items: center; padding-block: 12px; }
.mk-phone::before { content: ""; position: absolute; width: min(520px, 110%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(107, 149, 247, .26) 0%, rgba(107, 149, 247, .08) 45%, rgba(107, 149, 247, 0) 70%); }
.phone { position: relative; z-index: 1; width: min(322px, 84%); aspect-ratio: 1 / 2.06; padding: 10px; border-radius: 56px; background: linear-gradient(150deg, #3A3D45 0%, #16171B 40%, #0B0C0E 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 0 3px #050506, 0 50px 90px -20px rgba(20, 33, 61, .45), 0 18px 36px -12px rgba(20, 33, 61, .3); }
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #24262C; }
.phone::before { left: -3px; top: 21%; height: 8.5%; box-shadow: 0 70px 0 #24262C; }
.phone::after { right: -3px; top: 27%; height: 13%; }
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 46px; background: #000; isolation: isolate; container-type: inline-size; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
.phone-screen p { margin: 0; }
.phone-island { position: absolute; top: 3.6cqw; left: 50%; z-index: 6; width: 31%; height: 9cqw; border-radius: 6cqw; background: #000; transform: translateX(-50%); }
.phone-bar { position: absolute; bottom: 2.4cqw; left: 50%; z-index: 6; width: 36%; height: 1.5cqw; border-radius: 1cqw; background: #FFFFFF; transform: translateX(-50%); }

/* feed area (everything above the bottom bar) */
.feed-view { position: absolute; top: 0; left: 0; right: 0; bottom: 19cqw; overflow: hidden; }
.feed { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; transition: transform .95s cubic-bezier(.7, 0, .2, 1); will-change: transform; }
.feed-item { position: relative; height: 100%; overflow: hidden; container-type: inline-size; background: #0F1A3D; }
.feed-item > img, .ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feed-item::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .62) 100%); pointer-events: none; }
.reel-t { position: absolute; left: 10cqw; right: 22cqw; top: 36cqw; z-index: 2; margin: 0; text-align: center; font: 700 6.6cqw/1.45 var(--f-sans); letter-spacing: -0.01em; }
.reel-t span { padding: .12em .4em; border-radius: 6px; background: #FFFFFF; color: #111111; -webkit-text-fill-color: #111111; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ba { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.ba-l { left: 0; }
.ba-r { right: 0; }
.ba-line { position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; background: #FFFFFF; z-index: 1; }
.ba-line::after { content: ""; position: absolute; top: 58%; left: 50%; width: 8cqw; height: 8cqw; transform: translate(-50%, -50%); border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.reel-reply { position: absolute; left: 6cqw; right: 22cqw; top: 36cqw; z-index: 2; display: grid; gap: 1.6cqw; padding: 4cqw 4.6cqw; border-radius: 3.6cqw; background: #FFFFFF; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.reel-reply span { font-size: 3.8cqw; line-height: 1.2; color: #8A8F99; -webkit-text-fill-color: #8A8F99; }
.reel-reply b { font-size: 5.4cqw; line-height: 1.25; font-weight: 700; color: #111111; -webkit-text-fill-color: #111111; }

/* fixed chrome: status bar, tabs */
.tk-status { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; height: 16cqw; padding: 0 9cqw 0 11cqw; font-weight: 600; font-size: 4.6cqw; letter-spacing: -0.01em; }
.tk-sys { display: flex; align-items: center; gap: 1.6cqw; }
.tk-sys svg { height: 3.4cqw; width: auto; fill: #FFFFFF; }
.tk-batt { position: relative; width: 7cqw; height: 3.4cqw; border: 1px solid rgba(255, 255, 255, .55); border-radius: 1.1cqw; padding: 0.5cqw; }
.tk-batt span { display: block; height: 100%; width: 80%; border-radius: .5cqw; background: #FFFFFF; }
.tk-tabs { position: absolute; top: 16cqw; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; align-items: center; gap: 5cqw; font-size: 4.8cqw; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.tk-tabs span { color: rgba(255, 255, 255, .62); -webkit-text-fill-color: rgba(255, 255, 255, .62); padding-bottom: 1.4cqw; }
.tk-tabs .on { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; box-shadow: inset 0 -0.7cqw 0 #FFFFFF; }
.tk-search { position: absolute; right: 5cqw; top: -0.4cqw; width: 6.4cqw; fill: none; stroke: #FFFFFF; stroke-width: 2.4; }

/* per-video overlay: action rail and caption */
.tk-rail { position: absolute; right: 2.6cqw; bottom: 6cqw; z-index: 3; display: grid; justify-items: center; gap: 4.4cqw; }
.tk-avatar { position: relative; display: grid; place-items: center; width: 11.5cqw; height: 11.5cqw; margin-bottom: 2cqw; border-radius: 50%; border: 0.5cqw solid #FFFFFF; background: linear-gradient(135deg, #24398A, #4B73CB); }
.tk-avatar svg { width: 6cqw; fill: #FFFFFF; }
.tk-follow { position: absolute; bottom: -2.6cqw; left: 50%; display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 50%; background: #FE2C55; font-size: 4.2cqw; font-weight: 700; line-height: 1; transform: translateX(-50%); }
.tk-act { display: grid; justify-items: center; gap: 0.8cqw; }
.tk-act svg { width: 8.4cqw; fill: #FFFFFF; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.tk-act b { font-size: 3.2cqw; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.tk-disc { display: grid; place-items: center; width: 10cqw; height: 10cqw; margin-top: 1cqw; border-radius: 50%; background: radial-gradient(circle, #3A3A3A 0 30%, #161616 31% 100%); box-shadow: 0 0 0 1.8cqw rgba(30, 30, 30, .9); animation: tk-spin 5s linear infinite; }
.tk-disc span { width: 5cqw; height: 5cqw; border-radius: 50%; background: linear-gradient(135deg, #24398A, #4B73CB); }
.tk-info { position: absolute; left: 4cqw; right: 20cqw; bottom: 4.6cqw; z-index: 3; display: grid; gap: 1.6cqw; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.tk-handle { font-size: 4.4cqw; font-weight: 700; }
.tk-cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 3.8cqw; line-height: 1.35; }
.tk-sound { display: flex; align-items: center; gap: 1.6cqw; font-size: 3.6cqw; overflow: hidden; white-space: nowrap; }
.tk-sound svg { width: 3.8cqw; flex: none; fill: #FFFFFF; }
.tk-sound > span { overflow: hidden; width: 52cqw; -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
.tk-sound > span > span { display: inline-block; animation: tk-marquee 7s linear infinite; }
.tk-sound frontage-copy { white-space: pre; }

/* fixed chrome: bottom bar */
.tk-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; height: 19cqw; padding-top: 2.4cqw; background: #000; border-top: 1px solid rgba(255, 255, 255, .08); }
.tk-nav-i { display: grid; justify-items: center; gap: 0.6cqw; font-size: 2.7cqw; font-weight: 500; color: rgba(255, 255, 255, .62); -webkit-text-fill-color: rgba(255, 255, 255, .62); }
.tk-nav-i svg { width: 6.2cqw; height: 6.2cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.tk-nav-i .fill { fill: currentColor; stroke: none; }
.tk-nav-i.on { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
.tk-create { justify-self: center; position: relative; display: grid; place-items: center; width: 10.6cqw; height: 7cqw; margin-top: 0.4cqw; border-radius: 2cqw; background: #FFFFFF; box-shadow: -0.9cqw 0 0 #25F4EE, 0.9cqw 0 0 #FE2C55; }
.tk-create span { color: #000; -webkit-text-fill-color: #000; font-size: 5.6cqw; font-weight: 700; line-height: 1; }
@keyframes tk-spin { to { transform: rotate(360deg); } }
@keyframes tk-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .tk-disc, .tk-sound > span > span { animation: none; }
}

.mk-copy { display: grid; gap: 28px; align-content: center; }
.mk-list { border-top: 1px solid var(--rule); }
.mk-list li { position: relative; padding-block: 15px; border-bottom: 1px solid var(--rule); font-size: clamp(1.15rem, 1.9vw, 1.55rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; color: #A9AEB8; cursor: pointer; transition: color .35s; }
.mk-list li:hover { color: var(--ink-2); }
.mk-list li.is-on { color: var(--ink); }
.mk-list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue-text); transform: scaleX(0); transform-origin: left; }
.mk-list li.is-on::after { animation: mk-progress var(--mk-delay, 3.2s) linear forwards; }
@keyframes mk-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .feed { transition: none; }
  .mk-list li.is-on::after { animation: none; transform: none; }
}
@media (max-width: 900px) {
  .mk { grid-template-columns: minmax(0, 1fr); }
  .mk-copy { order: -1; }
  .phone { width: min(300px, 80%); }
}

/* Footer: one compact row */
.site-foot { background: var(--paper); color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 28px; font-size: 0.875rem; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-bottom: 22px; }
.foot-brand { display: grid; gap: 6px; max-width: 26em; }
.foot-brand .brand { color: var(--ink); font-size: 1rem; }
.foot-brand .brand .logo { width: 23px; height: 19px; }
.foot-brand p { font-size: 0.85rem; line-height: 1.5; color: var(--ink-3); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--blue-text); }
.foot-mail { color: var(--blue-text); font-weight: 600; text-decoration: none; }
.foot-mail:hover { text-decoration: underline; }

/* Social flow: a time on each Frontage step */
.sp-checks li { align-items: baseline; }
.sp-checks li > span:first-child { flex: 1; }
.sp-checks .sp-time { margin-left: 8px; white-space: nowrap; }

/* Sales Lifecycle: message to qualified lead */
.ld { display: grid; gap: 18px; max-width: 460px; justify-self: end; width: 100%; }
.ld-dm, .ld-card { border-radius: 16px; background: #FFFFFF; border: 1px solid var(--rule); box-shadow: 0 18px 44px rgba(20, 33, 61, .1); }
.ld-dm { display: grid; gap: 8px; padding: 18px; margin-right: 36px; }
.ld-dm-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); }
.ld-logo { width: 24px; height: 24px; border-radius: 7px; }
.ld-msg { max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: 0.88rem; line-height: 1.4; }
.ld-msg.them { justify-self: start; background: #EFF1F5; color: var(--ink); border-bottom-left-radius: 5px; }
.ld-msg.us { justify-self: end; background: linear-gradient(135deg, #3B5BDB, #6B4DE6); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; border-bottom-right-radius: 5px; }
.ld-card { display: grid; gap: 14px; padding: 18px 20px; margin-left: 36px; }
.ld-card-h { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; }
.ld-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--wash); color: var(--blue-text); }
.ld-status { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #E2F4E8; color: #1D7443; -webkit-text-fill-color: #1D7443; font-size: 0.78rem; font-weight: 600; }
.ld-status.ld-hot { display: inline-flex; align-items: center; gap: 6px; background: #FFEDE3; color: #C2410C; -webkit-text-fill-color: #C2410C; }
.ld-status.ld-hot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #F97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, .2); }
.ld-card dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.ld-card dt { font-size: 0.78rem; color: var(--ink-3); }
.ld-card dd { margin: 2px 0 0; font-size: 0.92rem; font-weight: 500; color: var(--ink); }
.ld-assign { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 0.85rem; font-weight: 600; color: var(--blue-text); }
.ld-assign::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2FB463; box-shadow: 0 0 0 3px rgba(47, 180, 99, .18); }

/* Sales Lifecycle: accounts to Frontage to your CRM */
.ig-flow { display: grid; grid-template-columns: auto minmax(20px, 1fr) auto minmax(20px, 1fr) auto; align-items: center; max-width: 520px; justify-self: end; width: 100%; }
.ig-src { display: grid; gap: 10px; }
.ig-src .sp-logo { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 6px 16px rgba(20, 33, 61, .14); }
.ig-link { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--blue-soft) 0 6px, transparent 6px 11px); }
.ig-link::after { content: ""; position: absolute; right: -2px; top: -4px; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var(--blue-soft); }
.ig-hub { display: grid; gap: 4px; padding: 18px 16px; border-radius: 16px; background: linear-gradient(135deg, #1B2B6B, #324DAE); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; text-align: center; box-shadow: 0 18px 40px rgba(36, 57, 138, .3); }
.ig-hub p { margin: 0; font-weight: 700; font-size: 1.05rem; }
.ig-hub span { font-size: 0.78rem; color: #C9D5F5; -webkit-text-fill-color: #C9D5F5; max-width: 9em; }
.ig-dest { display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--rule); box-shadow: 0 18px 44px rgba(20, 33, 61, .1); }
.ig-dest p { margin: 0; font-weight: 700; }
.ig-dest ul { display: grid; gap: 7px; }
.ig-dest li { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--ink-2); white-space: nowrap; }
.ig-dest li::before { content: "\2713"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--wash); color: var(--blue-text); font-size: 0.6rem; font-weight: 700; }

/* About: consolidated */

@media (max-width: 900px) {
  .ld, .ig-flow { justify-self: start; }
}
@media (max-width: 600px) {
  .ld-dm { margin-right: 0; }
  .ld-card { margin-left: 0; }
  .ig-flow { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; }
  .ig-src { grid-auto-flow: column; }
  .ig-link { width: 2px; height: 24px; background: repeating-linear-gradient(180deg, var(--blue-soft) 0 6px, transparent 6px 11px); }
  .ig-link::after { right: -4px; top: auto; bottom: -2px; border-width: 7px 5px 0 5px; border-color: var(--blue-soft) transparent transparent transparent; }
}

/* Free post questionnaire */
.qz-sect { background: linear-gradient(180deg, var(--wash) 0%, #FFFFFF 70%); padding-block: clamp(48px, 6vw, 88px) clamp(56px, 7vw, 104px); }
.qz-wrap { max-width: 820px; display: grid; gap: 28px; }
.qz-intro { display: grid; gap: 14px; text-align: center; justify-items: center; }
.qz-intro h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
.qz-intro .lede { max-width: 30em; }
.qz { position: relative; display: grid; gap: 28px; padding: clamp(24px, 4vw, 44px); padding-top: clamp(32px, 4.6vw, 52px); border-radius: 22px; background: #FFFFFF; border: 1px solid var(--rule); box-shadow: 0 30px 70px -20px rgba(20, 33, 61, .18); overflow: hidden; }
.qz-bar { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: #EDF1F8; }
.qz-bar span { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, #324DAE, #6B95F7); border-radius: 0 3px 3px 0; transition: width .45s cubic-bezier(.3, .7, .2, 1); }
.qz-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 18px; align-content: start; }
.qz.is-js .qz-step { min-height: 300px; }
.qz.is-js .qz-step:not(.is-on) { display: none; }
.qz.is-js .qz-step.is-on { animation: qz-in .4s cubic-bezier(.3, .7, .2, 1); }
@keyframes qz-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.qz-q { padding: 0; margin-bottom: 8px; font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.qz-help { margin-top: -10px; color: var(--ink-3); font-size: 0.95rem; }
.qz-opts { display: grid; gap: 12px; }
.qz-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qz-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qz-opt { position: relative; display: grid; gap: 4px; align-content: center; min-height: 64px; padding: 16px 48px 16px 18px; border: 1px solid var(--rule); border-radius: 14px; background: #FFFFFF; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; }
.qz-opt:hover { border-color: var(--blue-soft); background: #FAFBFF; }
.qz-opt:active { transform: scale(.99); }
.qz-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.qz-t { font-weight: 600; font-size: 1rem; color: var(--ink); }
.qz-s { font-size: 0.86rem; color: var(--ink-3); }
.qz-opt::after { content: ""; position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; border: 1.5px solid #CDD3DD; transition: background .15s, border-color .15s; }
.qz-opt:has(input[type="checkbox"])::after { border-radius: 6px; }
.qz-opt:has(input:checked) { border-color: var(--blue-text); background: #F4F7FF; box-shadow: 0 0 0 1px var(--blue-text) inset; }
.qz-opt:has(input:checked)::after { border-color: var(--blue-text); background: var(--blue-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.qz-opt:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.qz-cols-4 .qz-opt { padding: 16px; justify-items: center; text-align: center; }
.qz-cols-4 .qz-opt::after { display: none; }
.qz-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.qz-wide { grid-column: 1 / -1; }
.qz .field input:not([type="checkbox"]) { padding: 13px 14px; border-radius: 10px; border: 1px solid var(--rule); }
.qz .field input:focus { border-color: var(--blue-text); box-shadow: 0 0 0 3px #DCE6FF; }
.qz-photos { display: grid; gap: 10px; }
.qz-photos-h { font-weight: 600; font-size: 0.92rem; }
.qz-small .qz-opt { min-height: 52px; padding-block: 12px; }
.qz-drop { display: grid; gap: 2px; justify-items: center; padding: 18px; border: 1.5px dashed var(--blue-border); border-radius: 14px; background: #FAFBFF; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.qz-drop:hover { border-color: var(--blue-soft); background: #F4F7FF; }
.qz-drop[hidden] { display: none; }
.qz-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qz-drop:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.qz-drop-t { font-weight: 600; color: var(--blue-text); }
.qz-drop-s { font-size: 0.82rem; color: var(--ink-3); }
.qz[hidden] { display: none; }
.qz-err { font-size: 0.92rem; padding: 10px 12px; border-radius: 10px; background: #FFF4F4; color: #9B1C1C; }
.qz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 22px; border-top: 1px solid var(--rule); }
.qz-back { appearance: none; border: 0; background: none; padding: 10px 4px; font: inherit; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.qz-back:hover { color: var(--ink); }
.qz-back[hidden], .qz-next[hidden], .qz-send[hidden] { display: none; }
.qz-next, .qz-send { margin-left: auto; border-radius: 10px; }
.qz-next:disabled { opacity: .4; cursor: default; }
.qz-done { display: grid; gap: 14px; justify-items: center; text-align: center; padding: clamp(32px, 5vw, 56px); border-radius: 22px; background: #FFFFFF; border: 1px solid var(--rule); box-shadow: 0 30px 70px -20px rgba(20, 33, 61, .18); animation: qz-in .4s cubic-bezier(.3, .7, .2, 1); }
.qz-done[hidden] { display: none; }
.qz-done p { color: var(--ink-2); max-width: 30em; }
.qz-done-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 30px no-repeat; box-shadow: 0 12px 30px rgba(50, 77, 174, .35); }
.qz-alt { text-align: center; font-size: 0.92rem; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  .qz.is-js .qz-step.is-on, .qz-done { animation: none; }
}
@media (max-width: 600px) {
  .qz-cols-2, .qz-fields { grid-template-columns: minmax(0, 1fr); }
  .qz-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ======================================================================
   Cohesion pass: one black / white / blue system.
   Light sections alternate white and wash; each page has one dark band
   (near-black navy, blue glow, fine diagonal stripes). Rounded corners,
   buttons and photos match everywhere.
   ====================================================================== */
:root {
  --night: #070B1A;
  --night-2: #0D1638;
  --on-dark: #C3CDE6;
  --radius: 16px;
  --stripes: repeating-linear-gradient(135deg, rgba(107, 149, 247, .2) 0 1px, transparent 1px 13px);
}

/* Shared dark band */
.sp-auto, .integrate, .compare, .cta-grid {
  position: relative;
  isolation: isolate;
  color: #FFFFFF;
  background:
    radial-gradient(900px 480px at 88% 0%, rgba(75, 115, 203, .42), rgba(75, 115, 203, 0) 62%),
    radial-gradient(700px 420px at 0% 100%, rgba(50, 77, 174, .26), rgba(50, 77, 174, 0) 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
}
.sp-auto::before, .integrate::before, .compare::before, .cta-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--stripes);
  -webkit-mask-image: linear-gradient(115deg, transparent 30%, #000 78%);
  mask-image: linear-gradient(115deg, transparent 30%, #000 78%);
}
.integrate h2, .compare h2, .cta-grid h2 { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
.integrate .split-copy p, .cta-copy p, .sp-auto-copy > p { color: var(--on-dark); -webkit-text-fill-color: var(--on-dark); }

/* Homepage closing panel */
.cta-grid { border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(7, 11, 26, .55); }
.cta-grid .cr-card { box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .1); }

/* Integration diagram on dark */
.ig-hub { background: linear-gradient(135deg, #324DAE, #5B82E8); box-shadow: 0 18px 44px rgba(50, 77, 174, .5); }
.ig-hub span { color: #E1E8FB; -webkit-text-fill-color: #E1E8FB; }
.ig-dest { border-color: transparent; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); color: var(--ink); -webkit-text-fill-color: var(--ink); }
.ig-dest li { -webkit-text-fill-color: var(--ink-2); }
.ig-src .sp-logo { box-shadow: 0 6px 16px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .08); }

/* Comparison table as a white card on the dark band */
.compare .table-scroll { border-radius: var(--radius); background: #FFFFFF; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.cmp { background: #FFFFFF; color: var(--ink); }
.cmp thead th { border-bottom: 1px solid var(--rule); padding-block: 16px; }
.cmp thead th:last-child { background: linear-gradient(135deg, #24398A, #4B73CB); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
.cmp td:last-child { background: #F7F9FF; box-shadow: inset 2px 0 0 var(--blue-text); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }

/* Light sections: alternate white and wash so no page runs long and blank */
.sp-final { background: var(--wash); border-top: 1px solid var(--blue-border); }

/* Headline highlight: the brand blue, readable */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-accent { background-image: linear-gradient(112deg, #324DAE 0%, #4B73CB 45%, #6B95F7 100%); }
}

/* Buttons, menu, photos: one corner radius family */
.btn { border-radius: 10px; }
.btn-head { border-radius: 9px; }
.btn-quiet { border-color: var(--blue-border); }
.menu-btn { border: 1px solid var(--blue-border); border-radius: 10px; background: #FFFFFF; color: var(--blue-text); -webkit-text-fill-color: var(--blue-text); padding: 8px 14px; }
.seg img, .ph-img img { border-radius: var(--radius); filter: none; }

/* Footer: a thin black-to-blue stripe instead of a grey rule */
.site-foot { position: relative; border-top: 0; }
.site-foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #050505 0%, #24398A 50%, #6B95F7 100%); }

/* Free post page: faint stripes in the background corners */
.qz-sect { position: relative; isolation: isolate; overflow: hidden; }
.qz-sect::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(50, 77, 174, .09) 0 1px, transparent 1px 13px); -webkit-mask-image: radial-gradient(60% 70% at 100% 0%, #000, transparent 70%), radial-gradient(50% 60% at 0% 100%, #000, transparent 70%); mask-image: radial-gradient(60% 70% at 100% 0%, #000, transparent 70%), radial-gradient(50% 60% at 0% 100%, #000, transparent 70%); }

/* Comparison table stacks on phones instead of scrolling sideways */
@media (max-width: 700px) {
  .cmp { min-width: 0; }
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tr { padding: 18px; border-bottom: 1px solid var(--rule); }
  .cmp tbody tr:last-child { border-bottom: 0; }
  .cmp th, .cmp td { padding: 0; border: 0; }
  .cmp tbody th { width: auto; font-size: 1.02rem; }
  .cmp td { display: grid; gap: 2px; margin-top: 10px; padding: 2px 0 2px 12px; border-left: 2px solid var(--rule); background: none; box-shadow: none; }
  .cmp td:last-child { background: none; box-shadow: none; border-left-color: var(--blue-text); }
  .cmp td::before { content: attr(data-label); font-size: 0.78rem; font-weight: 600; color: var(--ink-3); }
  .cmp td:last-child::before { color: var(--blue-text); }
}

/* Mobile menu: a solid panel under the header, not text floating over the page */
@media (max-width: 900px) {
  .site-head:not(.head-dark) .nav { background: #FFFFFF; border-bottom: 1px solid var(--rule); box-shadow: 0 18px 40px -18px rgba(20, 33, 61, .25); }
  .site-head:not(.head-dark) .nav a { color: var(--ink); }
}

/* Hero art: site.js sizes and places it in the space beside the text (never under it), as large as that space allows.
   The far-left hillside softens out; when the art stops short of the screen edge, its right side softens too. */
@media (min-width: 901px) {
  .hero-ascii { right: -15%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 27%); mask-image: linear-gradient(90deg, transparent 0%, #000 27%); }
  .hero-ascii.is-inset { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 27%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 27%, #000 95%, transparent 100%); }
}

/* ======================================================================
   Neutral pass: off-white, gray and black carry the structure; blue is
   the accent (buttons, links, highlights, rules, glows).
   ====================================================================== */
:root {
  --wash: #F5F5F3;
  --rule: #E6E6E2;
  --night: #0A0A0B;
  --night-2: #151619;
  --on-dark: #B9BDC6;
  --stripes: repeating-linear-gradient(135deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 13px);
}

/* Black bands (one or two per page), with a hint of blue */
.sp-auto, .integrate, .compare, .cta-grid, .sp-why {
  position: relative;
  isolation: isolate;
  color: #FFFFFF;
  background:
    radial-gradient(820px 440px at 92% 0%, rgba(75, 115, 203, .28), rgba(75, 115, 203, 0) 62%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  border: 0;
}
.sp-why::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--stripes);
  -webkit-mask-image: linear-gradient(115deg, transparent 30%, #000 78%);
  mask-image: linear-gradient(115deg, transparent 30%, #000 78%);
}
.sp-why h2, .sp-why-item h3 { color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }
.sp-why-item { border-top-color: var(--blue); }
.sp-why-item p { color: var(--on-dark); -webkit-text-fill-color: var(--on-dark); }

/* Off-white sections with neutral edges */
.portfolio, .sp-final, .handoff { background: var(--wash); border-color: var(--rule); }
.qz-sect { background: var(--wash); }
.qz-sect::before { background: repeating-linear-gradient(135deg, rgba(10, 10, 11, .05) 0 1px, transparent 1px 13px); }

/* Cards on off-white read as white panels with a neutral edge */
.lv, .ld-dm, .ld-card, .qz, .qz-done { border-color: var(--rule); }
.qz-opt { border-color: #E1E1DC; }
.qz-opt:hover { background: #FAFAF8; border-color: #C9CED8; }

/* Our Approach */
.ap-head { padding-block: clamp(48px, 6vw, 88px); }
.ap-head-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: center; }
.ap-head-copy { display: grid; gap: 22px; justify-items: start; }
.ap-head-copy h1 { font-size: clamp(2.4rem, 4.6vw, 3.75rem); }
.ap-photos { position: relative; isolation: isolate; height: clamp(320px, 34vw, 470px); }
.ap-photos::before { content: ""; position: absolute; right: -18px; bottom: -18px; width: 58%; height: 56%; z-index: -1; border-radius: 18px; background: repeating-linear-gradient(135deg, rgba(10, 10, 11, .12) 0 1px, transparent 1px 10px); }
.ap-ph { position: absolute; margin: 0; overflow: hidden; border-radius: 18px; box-shadow: 0 24px 60px -20px rgba(10, 10, 11, .35); }
.ap-ph img { width: 100%; height: 100%; object-fit: cover; }
.ap-ph-1 { right: 0; top: 0; width: 82%; height: 84%; }
.ap-ph-2 { left: 0; bottom: 0; width: 44%; height: 50%; border: 6px solid #FFFFFF; }
.ap-story { background: var(--wash); border-block: 1px solid var(--rule); }
.ap-story-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap); align-items: center; }
.ap-story-img { margin: 0; }
.ap-story-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; }
.ap-story-copy { display: grid; gap: 18px; }
.ap-story-copy p { color: var(--ink-2); font-size: var(--t-md); line-height: 1.55; }
.ap-how h2 { margin-bottom: 36px; }
.ap-how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.ap-point { display: grid; gap: 10px; align-content: start; }
.ap-point figure { margin: 0 0 8px; overflow: hidden; border-radius: 16px; }
.ap-point img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ap-point h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
.ap-point p { color: var(--ink-2); }
@media (max-width: 900px) {
  .ap-head-grid, .ap-story-grid, .ap-how-grid { grid-template-columns: minmax(0, 1fr); }
  .ap-photos { height: clamp(260px, 62vw, 400px); margin-right: 18px; }
}
@media (max-width: 600px) {
  .sp-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sp-strip .sp-ph:nth-child(2) { grid-column: 1 / -1; grid-row: 1; height: 240px; }
  .sp-ph { height: 170px; }
}

/* Text the editor wraps (frontage-copy is pre-wrap) must still respect one-line labels */
:is(.p2-day, .p2-time, .p3-spots span, .sp-time, .ig-dest li, .ld-status) frontage-copy { white-space: nowrap; }

/* ======================================================================
   Motion. Everything below is off for prefers-reduced-motion, and the
   scroll/entrance parts only run when the script adds .anim to <html>
   (never in the editor), so nothing is hidden without JavaScript.
   ====================================================================== */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); }

/* Page to page: no crossfade. The browser keeps the old page on screen until the new one paints, and the
   new page's own entrance plays once. (A crossfade showed both pages at once, washed out, and then the
   entrance played again on top of it.) */

/* Header: stays at the top, turns to frosted glass once the page scrolls */
.site-head { position: sticky; top: 0; z-index: 50; transition: background .3s, box-shadow .3s, border-color .3s; }
.site-head.is-scrolled { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom-color: transparent; box-shadow: 0 10px 30px -20px rgba(10, 10, 11, .4); }

/* Nav: an underline that slides in */
.nav a { position: relative; border-bottom: 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Buttons and links */
.btn { transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease-out), box-shadow .25s var(--ease-out); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(36, 57, 138, .6); }
.btn-quiet:hover { box-shadow: 0 12px 24px -16px rgba(10, 10, 11, .35); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
.link { transition: text-underline-offset .25s var(--ease-out), color .2s; }
.link:hover { text-underline-offset: 8px; }

/* Photos: a slow, gentle zoom on hover */
.ap-point img, .sp-strip .sp-ph img, .ap-story-img img, .ap-ph img { transition: transform 1.1s var(--ease-out); }
.ap-point:hover img, .sp-strip .sp-ph:hover img, .ap-story-img:hover img, .ap-ph:hover img { transform: scale(1.045); }
.ap-story-img { overflow: hidden; border-radius: 18px; }

/* Homepage carousel: the slides fan out on hover */
.cr-card { transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out); }
.cta-art:hover .cr-front { transform: translateY(-6px) rotate(-1.5deg); }
.cta-art:hover .cr-back1 { transform: translateX(56%) rotate(7deg) scale(.94); }
.cta-art:hover .cr-back2 { transform: translateX(104%) rotate(13deg) scale(.86); }

/* Ambient: stripes drift, integration lines flow, status dots pulse */
.sp-auto, .integrate, .compare, .sp-why { overflow: clip; }
.sp-auto::before, .integrate::before, .compare::before, .cta-grid::before, .sp-why::before { inset: -20px; animation: stripe-drift 7s linear infinite; will-change: transform; }
@keyframes stripe-drift { to { transform: translateX(18.385px); } }
.ig-link { background-size: 22px 2px; animation: line-flow 1.1s linear infinite; }
@keyframes line-flow { to { background-position: 22px 0; } }
@media (max-width: 600px) {
  .ig-link { background-size: 2px 22px; animation-name: line-flow-down; }
}
@keyframes line-flow-down { to { background-position: 0 22px; } }
.ld-hot::before, .ld-assign::before { animation: dot-ping 2.2s ease-out infinite; }
@keyframes dot-ping { 0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(249, 115, 22, 0); } }
.ld-assign::before { animation-name: dot-ping-green; }
@keyframes dot-ping-green { 0% { box-shadow: 0 0 0 0 rgba(47, 180, 99, .45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(47, 180, 99, 0); } }

/* Entrances on load. The page is marked .anim before it paints (inline script in <head>), so these
   start hidden; site.js adds .anim-go once fonts are ready (at most ~0.6s), then they play.
   Arriving from another page of the site (.arrive), the top of the page is simply there on the first
   paint, so a click swaps pages in one step with no blank frame and no second entrance. */
.anim:not(.arrive) :is(.hero-copy, .sp-head-copy, .ap-head-copy, .ap-intro-head, .pc-head-copy, .qz-intro, .ph-copy) > *, .anim:not(.arrive) :is(.ap-head .ap-photos, .ph-img, .qz, .qz-alt) { opacity: 0; }
.anim.anim-go:not(.arrive) :is(.hero-copy, .sp-head-copy, .ap-head-copy, .ap-intro-head, .pc-head-copy, .qz-intro, .ph-copy) > * { animation: rise .8s var(--ease-out) both; }
.anim.anim-go:not(.arrive) :is(.hero-copy, .sp-head-copy, .ap-head-copy, .ap-intro-head, .pc-head-copy, .qz-intro, .ph-copy) > :nth-child(2) { animation-delay: .08s; }
.anim.anim-go:not(.arrive) :is(.hero-copy, .sp-head-copy, .ap-head-copy, .ap-intro-head, .pc-head-copy, .qz-intro, .ph-copy) > :nth-child(3) { animation-delay: .16s; }
.anim.anim-go:not(.arrive) :is(.hero-copy, .sp-head-copy, .ap-head-copy, .ap-intro-head, .pc-head-copy, .qz-intro, .ph-copy) > :nth-child(4) { animation-delay: .24s; }
.anim.anim-go:not(.arrive) :is(.ap-head .ap-photos, .ph-img) { animation: rise 1s var(--ease-out) .18s both; }
.anim.anim-go:not(.arrive) .qz { animation: rise .9s var(--ease-out) .22s both; }
.anim.anim-go:not(.arrive) .qz-alt { animation: fade-in .8s var(--ease-out) .5s both; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Scroll reveals: hidden from the first paint by selector (no late tagging), revealed by site.js. */
.anim main > section:not(:first-child) > .wrap > h2, .anim :is(.split-copy, .sp-auto-copy, .mk-copy, .ap-story-copy, .sp-control, .lv, .cta-grid, .table-scroll, .ig-flow, .callwhen, .mk-phone, .pl-copy, .pl-card, .pt-copy, .ab-team-copy, .ab-photo, .who-lede), .anim .sp-where > h2, .anim :is(.st-grid, .segments, .sp-why-grid, .ap-how-grid, .sp-modes, .sp-platforms, .sp-flow, .ld-dm, .ld, .sp-checks, .pt-steps) > *, .anim .cmp tbody > tr { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--rv-delay, 0ms); }
.anim :is(.ap-story-img, .sp-strip .sp-ph) { opacity: 0; transform: scale(.975); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--rv-delay, 0ms); }
.anim .is-in { opacity: 1 !important; transform: none !important; }
/* The pricing card holds the frosted estimate panel. A parent below full opacity cuts backdrop-filter off from
   the ribbon behind it, so a faded-in card showed empty glass and the blur popped in at the end. The card itself
   only slides; its two halves and its edge fade in, and the panel blurs the ribbon from the very first frame. */
.anim .pc-card { transform: translate3d(0, 22px, 0); border-color: transparent; box-shadow: 0 30px 70px -24px rgba(20, 33, 61, 0); transition: transform .8s var(--ease-out), border-color .7s var(--ease-out), box-shadow .7s var(--ease-out); }
.anim .pc-card > * { opacity: 0; transition: opacity .7s var(--ease-out); }
.anim .pc-card.is-in { transform: none; border-color: var(--rule); box-shadow: 0 30px 70px -24px rgba(20, 33, 61, .16); }
.anim .pc-card.is-in > * { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sp-auto::before, .integrate::before, .compare::before, .cta-grid::before, .sp-why::before, .ig-link, .ld-hot::before, .ld-assign::before { animation: none; }
  .btn:hover, .ap-point:hover img, .sp-strip .sp-ph:hover img, .ap-story-img:hover img, .ap-ph:hover img { transform: none; }
}

/* ---- First screen: the hero fills the screen except for a strip of the next section, so there is clearly more below ---- */
@media (min-width: 901px) {
  .hero-grid { min-height: clamp(540px, calc(100svh - 193px), 900px); padding-bottom: 72px; }
  .portfolio { padding-top: clamp(40px, 4vw, 56px); }
  .ap-head { padding-block: clamp(40px, 4.5vw, 64px) clamp(44px, 4.5vw, 60px); }
  .ap-photos { height: clamp(300px, 30vw, 420px); }
  .ap-story { padding-top: clamp(48px, 5.5vw, 76px); }
}

/* ---- Comparison table never scrolls: it fits, and rounded corners clip without a scroll box ---- */
.table-scroll { overflow: visible; }
.compare .table-scroll { overflow: clip; }
.anim .cmp tbody > tr { transform: none !important; }

/* ---- Performance: the header blur stays off (it re-blurs on every scroll frame). Ambient motion is either a
   compositor-only transform or a few pixels, and site.js marks each section .is-live only while it is on screen,
   so at most one or two loops ever run at once. ---- */
.site-head.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: #FFFFFF; }
main > section:not(.is-live):is(.sp-auto, .integrate, .compare, .sp-why)::before,
main > section:not(.is-live) .cta-grid::before, main > section:not(.is-live) .ig-link,
main > section:not(.is-live) .ld-hot::before, main > section:not(.is-live) .ld-assign::before { animation-play-state: paused; }
.phone:not(.is-live) :is(.tk-disc, .tk-sound > span > span) { animation-play-state: paused; }

/* ---- Small interactions: cards lift, logos nudge, the coverage picker eases between choices ---- */
.seg img { transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.seg:hover img { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(10, 10, 11, .45); }
.sp-platforms li > :first-child { transition: transform .4s var(--ease-out); }
.sp-platforms li:hover > :first-child { transform: translateY(-3px) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .seg:hover img, .sp-platforms li:hover > :first-child { transform: none; }
}

/* ---- Coverage picker: a white pill slides to the chosen level (site.js places it), the summary slides in,
   and the list re-checks itself from the top down ---- */
.lv-tabs { position: relative; }
.lv-tabs.is-pill::before { content: ""; position: absolute; left: 0; top: 0; width: var(--pill-w, 0px); height: var(--pill-h, 0px); transform: translate(var(--pill-x, 0px), var(--pill-y, 0px)); border-radius: 7px; background: #FFFFFF; box-shadow: 0 2px 8px rgba(20, 33, 61, .12), 0 0 0 1px rgba(20, 33, 61, .04); transition: transform .5s cubic-bezier(.3, .8, .2, 1), width .5s cubic-bezier(.3, .8, .2, 1), height .5s cubic-bezier(.3, .8, .2, 1); }
.lv-tabs.is-pill.is-still::before { transition: none; }
.lv-tabs.is-pill .lv-tab input:checked + span { background: none; box-shadow: none; }
.lv-tab span { transition: color .3s; }
.lv-fit span { animation: lv-fit-in .45s var(--ease-out); }
@keyframes lv-fit-in { from { opacity: 0; transform: translateY(8px); } }
.lv-i { transition: color .35s var(--ease-out) var(--lv-d, 0ms); }
.lv-mark { transition: background-color .35s var(--ease-out) var(--lv-d, 0ms); }
.lv-mark::after { transition: scale .45s cubic-bezier(.34, 1.56, .64, 1) var(--lv-d, 0ms), opacity .25s var(--lv-d, 0ms); }
.lv-mark::before { transition: scale .35s var(--ease-out) var(--lv-d, 0ms), opacity .25s var(--lv-d, 0ms); }
.lv-i:nth-child(2) { --lv-d: 55ms; }
.lv-i:nth-child(3) { --lv-d: 110ms; }
.lv-i:nth-child(4) { --lv-d: 165ms; }
.lv-i:nth-child(5) { --lv-d: 220ms; }

/* ---- Free post questionnaire: steps slide in from the direction you are going, ticks pop,
   the photo drop and errors animate in, and the finish check pops ---- */
.qz.is-js .qz-step.is-on { animation: qz-fwd .42s cubic-bezier(.3, .7, .2, 1); }
.qz.is-js.is-back .qz-step.is-on { animation-name: qz-back; }
@keyframes qz-fwd { from { opacity: 0; transform: translateX(22px); } }
@keyframes qz-back { from { opacity: 0; transform: translateX(-22px); } }
.qz-opt:has(input:checked)::after { animation: qz-tick .38s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes qz-tick { from { scale: .55; } }
.qz-drop:not([hidden]) { animation: qz-drop-in .35s var(--ease-out); }
@keyframes qz-drop-in { from { opacity: 0; transform: translateY(-6px); } }
.qz-err.is-shake { animation: qz-shake .45s var(--ease-out); }
@keyframes qz-shake { 0% { opacity: 0; transform: none; } 20% { opacity: 1; transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } 100% { transform: none; } }
.qz-next { transition: opacity .25s, background .2s, color .2s, border-color .2s, transform .2s var(--ease-out), box-shadow .25s var(--ease-out); }
.qz-done-mark { animation: qz-tick .55s cubic-bezier(.34, 1.56, .64, 1) .2s both; }

/* ---- Phone menu: drops open with the links following, folds away on close ---- */
@media (max-width: 900px) {
  .nav.open { animation: nav-in .3s var(--ease-out); }
  .nav.open a { animation: nav-link .4s var(--ease-out) both; }
  .nav.open a:nth-child(2) { animation-delay: .04s; }
  .nav.open a:nth-child(3) { animation-delay: .08s; }
  .nav.open a:nth-child(4) { animation-delay: .12s; }
  .nav.open a:nth-child(5) { animation-delay: .16s; }
  .nav.open.is-closing { animation: nav-out .18s ease-in forwards; }
  .nav.open.is-closing a { animation: none; }
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-10px); } }
@keyframes nav-link { from { opacity: 0; transform: translateY(-6px); } }
@keyframes nav-out { to { opacity: 0; transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  .lv-tabs.is-pill::before { transition: none; }
  .lv-fit span, .qz-opt:has(input:checked)::after, .qz-drop:not([hidden]), .qz-err.is-shake, .qz-done-mark, .nav.open, .nav.open a { animation: none; }
  .qz.is-js .qz-step.is-on, .qz.is-js.is-back .qz-step.is-on { animation: none; }
  .lv-i, .lv-mark, .lv-mark::after, .lv-mark::before { transition-duration: .01s; transition-delay: 0s; }
}

/* ======================================================================
   About us: our approach first (statement + photo pair, then the three
   points), then the founder as a team-page card, then the comparison.
   ====================================================================== */
.ap-head-copy .lede { font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.45; color: var(--ink); letter-spacing: -0.012em; }
.ap-head.ap-intro { padding-bottom: clamp(64px, 8.5vw, 116px); }
.ap-intro-head { display: grid; gap: 18px; }
.ap-intro-head h1 { font-size: clamp(2.4rem, 4.6vw, 3.75rem); }
.ap-intro .ap-how-grid { margin-top: clamp(40px, 5vw, 64px); }
.ab-team { background: var(--wash); border-top: 1px solid var(--rule); }
.ab-team-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: center; }
.ab-team-copy { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.ab-team-copy .actions { margin-top: 8px; }
.ab-team-copy .lede { color: var(--ink); }
.ab-photo { margin: 0; overflow: hidden; border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(20, 33, 61, .35); }
.ab-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 600px; object-fit: cover; object-position: 50% 18%; background: #E9EDF5; transition: transform 1.1s var(--ease-out); }
.ab-photo:hover img { transform: scale(1.03); }
.ab-sig { display: grid; gap: 6px; max-width: 34em; padding-top: 18px; border-top: 1px solid var(--rule); }
.ab-sig-name { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.ab-sig-name span { display: block; margin-top: 2px; font-size: 0.9rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.ab-sig-bio { font-size: 0.92rem; line-height: 1.55; color: var(--ink-3); }
@media (max-width: 900px) {
  .ab-team-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-photo { max-width: 420px; }
  .ab-photo img { max-height: 460px; }
}
@media (prefers-reduced-motion: reduce) { .ab-photo:hover img { transform: none; } }

/* ---- Homepage: what we do, under "Who we work with" ---- */
.who h2:has(+ .who-lede) { margin-bottom: 14px; }
.who-lede { margin-bottom: 48px; }

/* ======================================================================
   Pricing: controls on a white panel, the price on a dark panel that stays
   in view while you adjust. Every change re-prices with a count, a slide
   or a fade (site.js). Phones get a pinned price bar instead.
   ====================================================================== */
.pc-head { padding-block: clamp(48px, 6vw, 88px) clamp(8px, 2vw, 20px); }
.pc-head-copy { display: grid; gap: 14px; }
.pc-head-copy h1 { font-size: clamp(2.4rem, 4.6vw, 3.75rem); }
.pc-sect { position: relative; isolation: isolate; overflow: clip; padding-top: clamp(32px, 4vw, 56px); }
.pc-sect::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(10, 10, 11, .05) 0 1px, transparent 1px 13px); -webkit-mask-image: radial-gradient(50% 60% at 0% 100%, #000, transparent 70%); mask-image: radial-gradient(50% 60% at 0% 100%, #000, transparent 70%); }
.pc-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); overflow: hidden; border-radius: 22px; background: transparent; border: 1px solid var(--rule); box-shadow: 0 30px 70px -24px rgba(20, 33, 61, .16); }
.pc { display: grid; gap: 32px; align-content: center; min-width: 0; padding: clamp(24px, 3.5vw, 44px); background: #FFFFFF; }
.pc-field { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pc-label, .pc-row label { font-weight: 600; color: var(--ink); }
.pc-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.pc-row { align-items: center; flex-wrap: nowrap; }
.pc-row label { min-width: 0; }
.pc-row output { flex: none; }
.pc-row output { min-width: 56px; padding: 6px 12px; border-radius: 10px; background: #F4F7FF; border: 1px solid var(--blue-border); text-align: center; font-size: 1.05rem; font-weight: 600; line-height: 1.2; color: var(--blue-text); font-variant-numeric: tabular-nums; transition: background .25s, border-color .25s; }
.pc-field:has(input[type="range"]:active) output, .pc-field:has(input[type="range"]:focus-visible) output { background: #E6EEFF; border-color: var(--blue-text); }
.pc-help { font-size: 0.88rem; color: var(--ink-3); }

.pc input[type="range"] { --fill: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.pc input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #324DAE 0%, #6B95F7 var(--fill), #E6E8EE var(--fill)); }
.pc input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, #324DAE 0%, #6B95F7 var(--fill), #E6E8EE var(--fill)); }
.pc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--blue-text); box-shadow: 0 4px 12px rgba(36, 57, 138, .3); transition: transform .2s var(--ease-out), box-shadow .2s; }
.pc input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--blue-text); box-shadow: 0 4px 12px rgba(36, 57, 138, .3); }
.pc input[type="range"]:hover::-webkit-slider-thumb, .pc input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 6px 18px rgba(36, 57, 138, .4); }
.pc input[type="range"]:focus-visible { outline: none; }
.pc input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid #DCE6FF; outline-offset: 2px; }


.pc-switch { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--rule); border-radius: 14px; cursor: pointer; transition: border-color .25s, background .25s; }
.pc-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pc-knob { position: relative; width: 44px; height: 26px; margin-top: 1px; border-radius: 26px; background: #DADDE3; transition: background .3s; }
.pc-knob::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(10, 10, 11, .25); transition: transform .35s cubic-bezier(.34, 1.4, .64, 1); }
.pc-switch-t { display: grid; gap: 3px; }
.pc-switch-t b { color: var(--ink); }
.pc-switch-t span { font-size: 0.9rem; color: var(--ink-3); }
.pc-switch:has(input:checked) { border-color: var(--blue-text); background: #F7F9FF; }
.pc-switch:has(input:checked) .pc-knob { background: var(--blue-text); }
.pc-switch:has(input:checked) .pc-knob::after { transform: translateX(18px); }
.pc-switch:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }

.pc-sum { display: grid; gap: 16px; align-content: center; justify-items: start; min-width: 0; padding: clamp(24px, 3.5vw, 44px); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; background: radial-gradient(520px 320px at 100% 0%, rgba(75, 115, 203, .35), rgba(75, 115, 203, 0) 65%), linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); }
/* Frosted glass where the ribbon runs behind it: a blurred, softened glimpse of the silk through a dark tint */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pg-pricing .pc-sum { background: radial-gradient(520px 320px at 100% 0%, rgba(75, 115, 203, .2), rgba(75, 115, 203, 0) 65%), linear-gradient(180deg, rgba(24, 40, 120, .34) 0%, rgba(16, 26, 84, .48) 100%); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .14); }
  /* Lighter glass shows more of whatever is behind it, white page included; a soft shadow keeps the text readable on both. */
  .pg-pricing .pc-sum { text-shadow: 0 1px 14px rgba(7, 11, 26, .4); }
  .pg-pricing .pc-sum :is(.pc-note, .pc-incl-line) { color: rgba(255, 255, 255, .9); -webkit-text-fill-color: rgba(255, 255, 255, .9); }
}
.pc-tier { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.015em; }
.pc-total { display: flex; align-items: baseline; gap: 6px; font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.pc-per { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--on-dark); -webkit-text-fill-color: var(--on-dark); }
.pc-note { font-size: 0.85rem; color: var(--on-dark); -webkit-text-fill-color: var(--on-dark); }

@media (prefers-reduced-motion: reduce) {
  .pc-knob::after { transition: none; }
}

/* ---- Homepage results band: four figures on black, right under the hero ---- */
.st-band { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(40px, 5vw, 64px); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; background: radial-gradient(700px 360px at 0% 0%, rgba(75, 115, 203, .3), rgba(75, 115, 203, 0) 60%), linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); }
.st-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--stripes); -webkit-mask-image: linear-gradient(100deg, transparent 45%, #000 100%); mask-image: linear-gradient(100deg, transparent 45%, #000 100%); }
.st-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.st { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 2px solid var(--blue); }
.st-fig { display: flex; align-items: baseline; gap: 4px; font-size: clamp(2.6rem, 5vw, 3.9rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.st-num { background-image: linear-gradient(112deg, #9DB7F7 0%, #FFFFFF 70%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-right: .06em; margin-right: -.06em; }
.st-unit, .st-pre { font-size: 0.5em; font-weight: 600; letter-spacing: -0.01em; color: #9DB7F7; -webkit-text-fill-color: #9DB7F7; }
.st-t { max-width: 22em; font-size: 0.95rem; line-height: 1.5; color: var(--on-dark); -webkit-text-fill-color: var(--on-dark); }
.st-t sup, .st-src sup { font-size: 0.7em; }
.st-src { margin-top: clamp(24px, 3vw, 36px); font-size: 0.78rem; color: #80858F; -webkit-text-fill-color: #80858F; }
ol.st-src { display: grid; gap: 4px; padding: 0; list-style: none; line-height: 1.5; }
@media (max-width: 900px) { .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } }
@media (max-width: 420px) { .st-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Pricing: 90-day pilot (offer card) ---- */
.pl-sect { background: var(--wash); border-top: 1px solid var(--rule); scroll-margin-top: 80px; }
.pl-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: center; }
.pl-copy { display: grid; gap: 18px; min-width: 0; }
.pl-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: fit; }
.pl-fit li { position: relative; display: grid; gap: 8px; align-content: start; padding: 16px 18px 18px; border: 1px solid rgba(195, 205, 230, .7); border-radius: 16px; background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); color: var(--ink); font-size: 0.95rem; line-height: 1.45; counter-increment: fit; }
.pl-fit li::before { content: "0" counter(fit); font-size: 0.78rem; font-weight: 700; letter-spacing: .06em; background: linear-gradient(135deg, #24398A, #6B95F7); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pg-pricing .pl-copy .pl-fit li { text-shadow: none; }
@media (max-width: 560px) { .pl-fit { grid-template-columns: minmax(0, 1fr); } }
.pl-ask { justify-self: start; margin-top: 4px; font-weight: 600; }
.pl-fit-h { margin-top: 10px; font-weight: 600; color: var(--ink); }
.pl-card { position: relative; display: grid; gap: 12px; min-width: 0; padding: clamp(24px, 3vw, 36px); border-radius: 22px; background: #FFFFFF; border: 1px solid var(--rule); box-shadow: 0 30px 70px -24px rgba(20, 33, 61, .18); }
.pl-off { justify-self: start; padding: 6px 12px; border-radius: 999px; background: linear-gradient(135deg, #24398A, #4B73CB); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; font-size: 0.85rem; font-weight: 600; }
.pl-was { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pl-was s { text-decoration-thickness: 1.5px; }
.pl-price { display: flex; align-items: baseline; gap: 6px; font-size: clamp(2.4rem, 4.4vw, 3.2rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.pl-price span { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.pl-scope { display: grid; gap: 10px; margin: 8px 0 6px; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--rule); }
.pl-scope li { position: relative; padding-left: 28px; font-size: 0.95rem; font-weight: 500; color: var(--ink); line-height: 1.45; }
.pl-scope li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 6px; background: #EAF0FF; }
.pl-scope li::after { content: ""; position: absolute; left: 6px; top: 5px; width: 5px; height: 9px; border: solid var(--blue-text); border-width: 0 2px 2px 0; transform: rotate(42deg); }
.pl-save { font-size: 0.92rem; font-weight: 600; color: var(--blue-text); }
@media (max-width: 900px) { .pl-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Pricing: header links, platforms (all included), and "Every plan is custom" (no checkout, book a call) ---- */
.pc-head-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.pc-cap { max-width: 26em; font-size: 0.9rem; color: #C9D6F5; -webkit-text-fill-color: #C9D6F5; }
.pc-cap:not([hidden]) { animation: pc-in .4s var(--ease-out); }
.pc-once { font-size: 0.9rem; font-weight: 600; color: #9DB7F7; -webkit-text-fill-color: #9DB7F7; }
.pc-once:not([hidden]) { animation: pc-in .4s var(--ease-out); }
.pc-sum [hidden] { display: none !important; }
@keyframes pc-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .pc-once:not([hidden]), .pc-cap:not([hidden]) { animation: none; } }
.pc-sum .btn { justify-self: start; }
.pc-incl-line { font-size: 0.95rem; color: var(--on-dark); -webkit-text-fill-color: var(--on-dark); }
.pc-logos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.pc-logos li { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; }
.pc-logos li span:not(.sp-logo) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pc-logos .sp-logo { display: inline-grid; width: auto; height: auto; border-radius: 0; background: none; color: var(--brand); -webkit-text-fill-color: var(--brand); }
@media (max-width: 900px) { .pc-card { grid-template-columns: minmax(0, 1fr); } }


.pt-sect { border-top: 1px solid var(--rule); }
.pt-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--gap); align-items: center; }
.pt-copy { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.pt-copy > p:not(.lede) { max-width: 36em; color: var(--ink-2); }
.pt-copy .actions { margin-top: 8px; }
.pt-steps { position: relative; display: grid; gap: 0; margin: 0; padding: clamp(22px, 3vw, 32px); list-style: none; border-radius: 22px; background: #FFFFFF; border: 1px solid var(--rule); box-shadow: 0 30px 70px -24px rgba(20, 33, 61, .16); }
.pt-step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding-block: 16px; }
.pt-step + .pt-step { border-top: 1px solid var(--rule); }
.pt-step:not(:last-child) .pt-n::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 26px; background: linear-gradient(var(--blue-soft), transparent); }
.pt-n { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #24398A, #4B73CB); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pt-step h3 { font-size: 1.08rem; letter-spacing: -0.01em; }
.pt-step p { margin-top: 3px; font-size: 0.95rem; color: var(--ink-2); }
@media (max-width: 900px) { .pt-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Pricing: a silk ribbon down the middle of the page (drawn by mono_silk.js) behind every section.
   Text that crosses it gets a soft white glow so it always stays readable. ---- */
.pg-pricing { position: relative; isolation: isolate; overflow-x: clip; }
.pg-ribbon { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease-out); will-change: transform; }
.pg-ribbon.is-drawn { opacity: 1; }
.pg-pricing .pl-sect { background: transparent; }
.pg-pricing :is(.pc-head-copy, .pl-copy, .pt-copy) :is(h1, h2, p, li, .link) { text-shadow: 0 0 12px rgba(255, 255, 255, .85), 0 0 26px rgba(255, 255, 255, .6); }
.arrive .pg-ribbon { transition: none; }
@media (prefers-reduced-motion: reduce) { .pg-ribbon { transition: none; } }

/* ---- Book a call: the free post form's format; meeting choice, a few taps, contact, then a time ---- */
.bk-meet { justify-items: center; gap: 10px; text-align: center; }
.bk-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #EEF2FC; color: var(--blue-text); transition: background .25s, color .25s, transform .35s var(--ease-out); }
.bk-ico svg { width: 20px; height: 20px; }
.bk-meet:has(input:checked) .bk-ico { background: linear-gradient(135deg, #24398A, #6B95F7); color: #FFFFFF; transform: scale(1.06); }
.bk-est { padding: 8px 14px; border-radius: 999px; background: #EEF2FC; color: var(--blue-text); font-size: 0.92rem; font-weight: 600; }
.bk-est[hidden] { display: none; }
.qz-trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.bk .field textarea { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--rule); font: inherit; resize: vertical; }
.bk .field textarea:focus { outline: none; border-color: var(--blue-text); box-shadow: 0 0 0 3px #DCE6FF; }
.bk-pick { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.bk-pick[hidden], .bk-cal[hidden] { display: none; }
.bk-col { display: grid; gap: 12px; align-content: start; min-width: 0; }
.bk-h { font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.bk-tz { font-weight: 500; color: var(--ink-3); }
.bk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bk-day, .bk-slot { position: relative; cursor: pointer; }
.bk-day input, .bk-slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bk-day span { display: grid; justify-items: center; gap: 1px; padding: 8px 2px; border: 1px solid var(--rule); border-radius: 12px; background: #FFFFFF; transition: border-color .15s, background .15s, transform .15s; }
.bk-day small { font-size: 0.7rem; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.bk-day b { font-size: 1.05rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.bk-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bk-slots[hidden], .bk-empty[hidden] { display: none; }
.bk-slots.is-in { animation: qz-in .35s cubic-bezier(.3, .7, .2, 1); }
.bk-slot span { display: block; padding: 10px 8px; border: 1px solid var(--rule); border-radius: 10px; background: #FFFFFF; text-align: center; font-size: 0.92rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; transition: border-color .15s, background .15s, color .15s, transform .15s; }
.bk-empty { padding: 28px 16px; border: 1.5px dashed var(--rule); border-radius: 12px; text-align: center; font-size: 0.92rem; color: var(--ink-3); }
:is(.bk-day, .bk-slot):hover span { border-color: var(--blue-soft); background: #FAFBFF; }
:is(.bk-day, .bk-slot):active span { transform: scale(.97); }
:is(.bk-day, .bk-slot) input:checked + span { border-color: var(--blue-text); background: #F4F7FF; box-shadow: 0 0 0 1px var(--blue-text) inset; color: var(--blue-text); }
.bk-day input:checked + span :is(b, small) { color: var(--blue-text); }
.bk-slot input:checked + span { border-color: transparent; background: linear-gradient(135deg, #24398A, #4B73CB); color: #FFFFFF; box-shadow: 0 8px 18px -10px rgba(36, 57, 138, .8); }
.bk-slot.is-off { cursor: default; pointer-events: none; }
.bk-slot.is-off span { border-style: dashed; background: transparent; color: var(--ink-3); opacity: .55; text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
:is(.bk-day, .bk-slot) input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.bk-cal iframe { display: block; width: 100%; height: 640px; border: 0; border-radius: 14px; background: #FFFFFF; }
.qz-send:disabled { opacity: .4; cursor: default; }
@media (max-width: 640px) {
  .bk-pick { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .bk-days { gap: 4px; }
  .bk-day span { padding: 7px 0; border-radius: 10px; }
  .bk-day small { font-size: 0.62rem; letter-spacing: 0; }
  .bk-day b { font-size: 0.95rem; }
  .bk-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .bk-ico, .bk-day span, .bk-slot span { transition: none; } }