:root{--ink:#050508;--surface:#101016;--paper:#f8f5ef;--orange:#ff4400;--gold:#ffb300;--teal:#20c5b5;--muted:#9a9285;--accent:var(--orange)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,sans-serif}a{color:inherit;text-decoration:none}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}.mono{font-family:'Courier New',monospace;letter-spacing:.16em;text-transform:uppercase}.nav{position:sticky;top:0;z-index:20;background:#050508e8;backdrop-filter:blur(12px);border-bottom:1px solid #ffffff18}.nav .wrap{height:72px;display:flex;align-items:center;gap:28px}.brand{font-weight:900;letter-spacing:.08em;margin-left:auto}.brand b,.eyebrow{color:var(--accent)}.back{font-size:12px;color:#f8f5efaa}.back:hover{color:var(--accent)}.hero{min-height:76vh;display:grid;align-items:center;padding:90px 0 70px;position:relative;overflow:hidden;background:radial-gradient(circle at 78% 25%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 34%),repeating-linear-gradient(180deg,#ffffff08 0 1px,transparent 1px 9px)}.hero:after{content:attr(data-level);position:absolute;right:-20px;bottom:-55px;font-size:clamp(140px,26vw,360px);font-weight:900;color:#ffffff05;line-height:1}.eyebrow{font-size:13px;margin-bottom:22px}.hero h1{font-size:clamp(54px,9vw,118px);line-height:.88;letter-spacing:-.045em;text-transform:uppercase;margin:0;max-width:950px}.hero h1 span{color:var(--accent)}.lede{font-size:clamp(19px,2vw,25px);line-height:1.55;color:#f8f5efc7;max-width:760px;margin:32px 0}.actions{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;padding:16px 22px;background:var(--accent);color:var(--ink);font-weight:900;text-transform:uppercase;letter-spacing:.04em;border:0;cursor:pointer}.btn.alt{background:transparent;color:var(--paper);border:1px solid #ffffff3b}.section{padding:100px 0;border-top:1px solid #ffffff16}.section.alt{background:#0a0a0e}.label{font-size:12px;color:var(--accent);margin-bottom:18px}.section h2{font-size:clamp(38px,5.5vw,72px);line-height:.95;text-transform:uppercase;margin:0 0 32px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{background:var(--surface);padding:28px;border-top:3px solid var(--accent);min-height:220px}.card .num{color:var(--accent);font-size:12px}.card h3{font-size:22px;text-transform:uppercase;margin:28px 0 12px}.card p{color:#f8f5efb5;line-height:1.65;margin:0}.portfolio{display:grid;grid-template-columns:1.35fr .85fr;gap:16px}.portfolio-slot{min-height:360px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid #ffffff21;background:linear-gradient(145deg,#17171f,#0a0a0e);position:relative;overflow:hidden}.portfolio-slot:before{content:'PORTFOLIO ASSET PLACEHOLDER';position:absolute;inset:22px;border:1px dashed #ffffff2d;display:grid;place-items:center;color:#ffffff36;font:12px 'Courier New',monospace;letter-spacing:.16em}.portfolio-slot strong,.portfolio-slot span{position:relative;z-index:2}.portfolio-slot strong{font-size:28px;text-transform:uppercase}.portfolio-slot span{color:var(--accent);font-size:11px;margin-bottom:8px}.form-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.form-copy p{font-size:19px;line-height:1.65;color:#f8f5efb5}.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:11px;color:var(--muted)}input,select,textarea{width:100%;background:#0a0a0e;border:1px solid #ffffff28;color:var(--paper);padding:15px;font:inherit}textarea{min-height:120px;resize:vertical}.fine{font-size:11px;color:var(--muted);line-height:1.5}.success{display:none;padding:18px;border-left:3px solid var(--accent);background:#ffffff0c}.footer{padding:36px 0;color:var(--muted);font-size:11px;border-top:1px solid #ffffff16}/* Lede paragraph for bonus sections (e.g. the app-building block). */
.section-lede{font-size:19px;line-height:1.65;color:#f8f5efb5;max-width:760px;margin:-8px 0 32px}

/* Cross-solution navigation: collapsed over the hero until hover/click/focus. */
main{position:relative}
.solution-switcher{position:absolute;top:0;left:0;right:0;z-index:19;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.solution-switcher-toggle{position:relative;z-index:2;margin:14px auto 0;padding:11px 18px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:#050508e8;color:#ff4400;font-size:11px;cursor:pointer;pointer-events:auto;backdrop-filter:blur(12px);transition:border-color .2s,background .2s,transform .2s}
.solution-switcher-toggle:hover,.solution-switcher.open .solution-switcher-toggle{border-color:#ff4400;background:#101016;transform:translateY(2px)}
.solution-switcher-toggle span{display:inline-block;margin-left:8px;color:#ffb300;font-size:16px;line-height:0;transition:transform .25s}
.solution-switcher.open .solution-switcher-toggle span,.solution-switcher:hover .solution-switcher-toggle span{transform:rotate(180deg)}
.solution-switcher-panel{width:100%;max-height:0;overflow:hidden;opacity:0;transform:translateY(-14px);background:#0a0a0ef5;border-bottom:1px solid transparent;box-shadow:0 24px 55px rgba(0,0,0,0);pointer-events:none;transition:max-height .42s cubic-bezier(.2,.8,.2,1),opacity .24s,transform .35s,border-color .25s,box-shadow .35s}
.solution-switcher.open .solution-switcher-panel,.solution-switcher:hover .solution-switcher-panel{max-height:170px;opacity:1;transform:translateY(0);border-bottom-color:#ffffff16;box-shadow:0 24px 55px rgba(0,0,0,.48);pointer-events:auto}
.solution-switcher-panel .wrap{padding:18px 0 22px}
.solution-switcher-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.solution-jump{min-width:0;padding:12px 8px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--surface);border:1px solid #ffffff16;text-align:center;transition:transform .2s,border-color .2s,background .2s}
.solution-jump:hover{transform:translateY(-3px);border-color:var(--accent);background:#17171f}
.solution-jump.active{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.solution-jump img{width:100%;height:42px;display:block;object-fit:contain}
.solution-jump span{font:700 9px/1.25 'Courier New',monospace;letter-spacing:.06em;text-transform:uppercase;color:#f8f5efc7;overflow-wrap:anywhere}

/* Solution logo in the hero (white/transparent art on the dark canvas). */
/* Never upscale a logo past its natural size: wide wordmarks cap at 340px,
   small icon marks render at natural resolution and stay crisp. */
.sol-logo{display:block;max-width:min(340px,64%);max-height:120px;width:auto;height:auto;margin-bottom:28px}

/* Image-backed portfolio slots: photo fills the frame, caption sits on a
   dark gradient so the label stays readable over any artwork. */
.portfolio-slot{margin:0}
.portfolio-slot.has-image{padding:0;justify-content:flex-end}
.portfolio-slot.has-image:before{content:none}
.portfolio-slot.has-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portfolio-slot.has-image figcaption{position:relative;z-index:2;display:flex;flex-direction:column;padding:24px 26px;background:linear-gradient(180deg,transparent,rgba(5,5,8,.88) 55%)}

/* Video-backed portfolio slots: 16:9 player on top, caption bar beneath
   (no overlay — it would block the player controls). */
.portfolio-slot.has-video{padding:0;justify-content:flex-start;min-height:0}
.portfolio-slot.has-video:before{content:none}
.portfolio-slot.has-video .video-frame{width:100%;aspect-ratio:16/9;background:#000}
.portfolio-slot.has-video iframe{width:100%;height:100%;border:0;display:block}
.portfolio-slot.has-video figcaption{display:flex;flex-direction:column;padding:20px 24px}

@media(max-width:800px){.grid,.portfolio,.form-grid{grid-template-columns:1fr}.form{grid-template-columns:1fr}.field.full{grid-column:auto}.brand{font-size:14px}.section{padding:72px 0}.portfolio-slot{min-height:280px}.sol-logo{width:min(280px,80%)}.solution-switcher:hover:not(.open) .solution-switcher-panel{max-height:0;opacity:0;transform:translateY(-14px);pointer-events:none}.solution-switcher.open .solution-switcher-panel{max-height:155px;opacity:1;transform:translateY(0);pointer-events:auto}.solution-switcher-panel .wrap{padding:16px 0 18px}.solution-switcher-grid{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px}.solution-jump{flex:0 0 112px;scroll-snap-align:start}.solution-jump img{height:38px}}



/* ===========================================================================
   LVL 01 long-form sections (AI Business Brain). Built from the same
   primitives as every other solution page: --accent drives every highlight,
   type scale and spacing match .section / .card / .btn above.
   =========================================================================== */

/* Hero additions: positioning line under the headline, stat pills under the lede. */
.positioning{font-size:13px;color:var(--accent);margin:20px 0 0;letter-spacing:.16em}
.stat-pills{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px}
.stat-pill{display:flex;flex-direction:column;gap:6px;padding:14px 20px;background:var(--surface);border-left:3px solid var(--accent);min-width:150px}
.stat-pill span{font-size:10px;color:var(--muted)}
.stat-pill strong{font-size:19px;letter-spacing:-.01em}

/* The standalone line that closes THE PROBLEM. */
.big-closer{font-size:clamp(26px,3.4vw,44px);line-height:1.15;text-transform:uppercase;font-weight:900;letter-spacing:-.02em;margin:56px 0 0;max-width:900px}

/* THE TURN: full-bleed statement block. */
.turn{background:var(--accent);color:var(--ink);border-top:0}
.turn .eyebrow{color:#050508b0;margin-bottom:18px}
.turn-headline{font-size:clamp(44px,7.5vw,104px);line-height:.9;letter-spacing:-.045em;text-transform:uppercase;margin:0}
.turn-line{font-size:clamp(18px,2vw,24px);line-height:1.5;margin:28px 0 0;max-width:720px;color:#050508cc}

/* WHY IT WORKS: two columns, the right one carries the accent. */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.compare-col{background:var(--surface);padding:32px;border-top:3px solid #ffffff2e}
.compare-col.hot{border-top-color:var(--accent);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 11%,var(--surface)),var(--surface))}
.compare-col h3{font-size:12px;color:var(--muted);margin:0 0 26px}
.compare-col.hot h3{color:var(--accent)}
.compare-row{padding:20px 0;border-top:1px solid #ffffff14}
.compare-row:first-of-type{border-top:0;padding-top:0}
.compare-row strong{display:block;font-size:19px;line-height:1.3;margin-bottom:9px}
.compare-row span{color:#f8f5efb5;line-height:1.65}

/* WHAT WE BUILD: four numbered steps + a callout bar. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{background:var(--surface);padding:28px;border-top:3px solid var(--accent)}
.step .num{display:block;color:var(--accent);font-size:12px;font-family:'Courier New',monospace;letter-spacing:.16em}
.step h3{font-size:19px;text-transform:uppercase;margin:22px 0 12px}
.step p{color:#f8f5efb5;line-height:1.65;margin:0}
.callout-bar{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;margin-top:16px;padding:26px 30px;background:color-mix(in srgb,var(--accent) 12%,#0a0a0e);border-left:4px solid var(--accent)}
.callout-bar.soft{background:#0a0a0e;border-left-color:#ffffff2e}
.callout-bar strong{font-size:14px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);white-space:nowrap}
.callout-bar span{flex:1;min-width:260px;color:#f8f5efc7;line-height:1.65}
.section-note{margin:24px 0 0;color:var(--muted);line-height:1.65;max-width:820px}

/* THE DELIVERABLE: big numbered list. */
.deliverables{list-style:none;counter-reset:d;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.deliverables li{counter-increment:d;background:var(--surface);padding:28px 30px 30px;border-top:3px solid var(--accent);position:relative}
.deliverables li:before{content:counter(d);font:900 13px/1 'Courier New',monospace;color:var(--accent)}
.deliverables h3{font-size:22px;text-transform:uppercase;margin:18px 0 10px}
.deliverables p{color:#f8f5efb5;line-height:1.65;margin:0}

/* ACTIVATIONS: two-up cards, then the catalog accordion. */
.grid-2{grid-template-columns:repeat(2,1fr)}
.catalog-block{margin-top:34px;border-top:1px solid #ffffff16;padding-top:30px}
.catalog-title{font-size:12px;color:var(--accent);margin:0 0 16px}
.catalog-cat{background:var(--surface);border-left:3px solid #ffffff2e;margin-bottom:6px}
.catalog-cat[open]{border-left-color:var(--accent)}
.catalog-cat summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 22px;font-size:16px;font-weight:700}
.catalog-cat summary::-webkit-details-marker{display:none}
.catalog-cat summary:hover{background:#17171f}
.catalog-cat[open] summary{color:var(--accent)}
.catalog-count{font-size:11px;color:var(--muted)}
.catalog-cat ul{margin:0;padding:0 22px 20px 40px;columns:2;column-gap:26px}
.catalog-cat li{color:#f8f5efb5;line-height:1.75;break-inside:avoid}

/* THE IMPACT: before/after table. */
.table-scroll{overflow-x:auto}
.impact{width:100%;border-collapse:collapse;min-width:620px}
.impact th,.impact td{text-align:left;padding:18px 20px;border-bottom:1px solid #ffffff16;line-height:1.5}
.impact thead th{font-size:11px;color:var(--muted);border-bottom:1px solid #ffffff2e}
.impact thead th.hot{color:var(--accent)}
.impact tbody th{font-weight:700;font-size:17px;width:30%}
.impact td{color:#f8f5efb5}
.impact td.hot{color:var(--paper);font-weight:700}
.stat-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.stat-chip{padding:12px 18px;background:var(--surface);border-left:3px solid var(--accent);font-size:12px;color:var(--paper)}

/* THE PLAN: 30-day timeline. */
.timeline{list-style:none;padding:0;margin:0}
.timeline li{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:24px 0;border-top:1px solid #ffffff16}
.timeline li:first-child{border-top:0;padding-top:0}
.timeline .num{color:var(--accent);font-size:13px;font-family:'Courier New',monospace;letter-spacing:.16em;padding-top:5px}
.timeline h3{font-size:22px;text-transform:uppercase;margin:0 0 9px;display:flex;flex-wrap:wrap;align-items:baseline;gap:14px}
.timeline .when{font-size:11px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.timeline p{color:#f8f5efb5;line-height:1.65;margin:0}

/* YEAR ONE. */
.year-blocks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.year-block{background:var(--surface);padding:28px;border-top:3px solid var(--accent)}
.year-when{display:block;font-size:10px;color:var(--accent);line-height:1.6}
.year-price{display:block;font-size:24px;margin:16px 0 12px;letter-spacing:-.01em}
.year-block p{color:#f8f5efb5;line-height:1.65;margin:0}

/* THE INVESTMENT. */
.price-block{display:flex;flex-direction:column;gap:10px;padding:40px;margin-bottom:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,#0a0a0e),var(--surface));border-left:4px solid var(--accent)}
.price-block>span:first-child{font-size:12px;color:var(--accent)}
.price-block strong{font-size:clamp(48px,7vw,86px);line-height:.9;letter-spacing:-.04em}
.price-note{font-size:14px;color:var(--muted)}
.start-card{display:flex;flex-direction:column;align-items:flex-start}
.start-price{font-size:12px;color:var(--accent)}
.start-card h3{margin:18px 0 10px}
.start-card p{flex:1;margin-bottom:22px}
.included-title{font-size:12px;color:var(--accent);margin:44px 0 16px}
.included{list-style:none;counter-reset:inc;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
.included li{counter-increment:inc;display:flex;gap:16px;align-items:baseline;padding:17px 22px;background:var(--surface)}
.included li:before{content:'0' counter(inc);font:700 11px/1 'Courier New',monospace;letter-spacing:.1em;color:var(--accent)}

/* CLOSING CTA. */
.closing{background:#0a0a0e}
.closing h2{max-width:900px}
.closing .lede{margin:0 0 34px}

/* NEXT LEVEL NAV. */
.next-level-link{display:flex;align-items:center;gap:22px;padding:30px 34px;background:var(--surface);border-left:4px solid var(--accent);transition:background .2s,transform .2s}
.next-level-link:hover{background:#17171f;transform:translateX(8px)}
.next-lvl{font-size:12px;color:var(--accent)}
.next-level-link strong{flex:1;font-size:clamp(22px,3vw,34px);text-transform:uppercase;letter-spacing:-.01em}
.next-arrow{font-size:26px;color:var(--accent)}

@media(max-width:1000px){
  .steps,.year-blocks{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:800px){
  .compare,.steps,.year-blocks,.deliverables,.grid-2,.included{grid-template-columns:1fr}
  .stat-pill{flex:1;min-width:calc(50% - 5px)}
  .catalog-cat ul{columns:1}
  .compare-col{padding:26px 22px}
  .callout-bar{padding:22px}
  .callout-bar strong{white-space:normal}
  .timeline li{grid-template-columns:1fr;gap:8px}
  .price-block{padding:28px 24px}
  .next-level-link{flex-wrap:wrap;gap:12px;padding:24px 22px}
}


/* LVL 01 hero sizing.

   Every other solution's headline is a short product statement, so the shared
   .hero h1 can run to 118px inside a 950px column. This one is a full
   sentence: at that size it stacked into six short lines down the left half of
   the screen while the right half sat empty.

   Match the section headings instead, so the hero reads as the same system as
   "01 / THE PROBLEM" further down the page: identical type ramp and
   line-height, and no column cap, so it uses the full .wrap width.

   Scoped by the body attribute solution.js already keys off, so the other
   seven heroes are untouched. The scoped selector also outranks the
   max-width:800px rule in solution-mobile.css, hence the explicit phone size
   below. */
body[data-solution="aibrain"] .hero h1{
  font-size:clamp(38px,5.5vw,72px);
  line-height:.95;
  letter-spacing:-.035em;
  max-width:none;
}

@media(max-width:800px){
  body[data-solution="aibrain"] .hero h1{
    font-size:clamp(32px,8.4vw,48px);
    overflow-wrap:anywhere;
  }
}