/* ============================================================================
   artificial.inc, shared stylesheet
   Canon: docs/brand/DESIGN-CANON.md section 2, light Apple Liquid Glass,
   sky cyan cool water over a dark teal anchor.
   One file for every page on the site. No build step: nginx serves it as is.
   ========================================================================= */

:root{
  /* background: cool light base + gradient blooms */
  --bg:#eaf1f9;
  --bg-mesh:
    radial-gradient(60% 55% at 8% 0%, rgba(56,198,244,.28), transparent 60%),
    radial-gradient(55% 50% at 100% 4%, rgba(34,201,224,.20), transparent 60%),
    radial-gradient(50% 60% at 60% 100%, rgba(129,140,248,.12), transparent 60%);

  /* frosted glass surfaces */
  --glass:rgba(255,255,255,.55);
  --glass-strong:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.70);
  --glass-hair:inset 0 1px 0 rgba(255,255,255,.85);
  --border:rgba(15,45,90,.08);
  --border-strong:rgba(15,45,90,.12);

  /* text (cool near black, never pure black) */
  --ink:#0b1b2e; --ink2:#37485c; --muted:#5b6c7e; --muted2:#93a2b4; --on-accent:#ffffff;

  /* sky cyan accent ramp */
  --a50:#ecfbff; --a100:#d3f3fe; --a200:#a9e7fc; --a300:#6fd6f8;
  --a400:#38c0f0; --accent:#0aa5ec; --accent-600:#0787c7; --accent-700:#0a6d9e;
  --accent-grad:linear-gradient(135deg,#38c6f4 0%,#0aa5ec 55%,#12b5d8 100%);
  --accent-soft:rgba(10,165,236,.10);
  --accent-glow:rgba(10,165,236,.30);

  /* validated 2026-07-18: cyan fails AA as text on white, this is the safe one */
  --accent-ink:#0561c9;
  --aqua:#25e9c5;
  --anchor:#0A2E34;
  --anchor-grad:linear-gradient(152deg,#123f47,#0a2c33,#08303a);
  --cyan:#22d3ee;

  /* semantic (pastel chip bg + readable ink) */
  --mint:#10c7a0; --mint-bg:rgba(16,199,160,.14); --mint-ink:#0a8f70;
  --amber:#f5a524; --amber-bg:rgba(245,165,36,.16); --amber-ink:#a9700c;
  --rose:#f2557a; --rose-bg:rgba(242,85,122,.14); --rose-ink:#c23359;

  /* elevation, Apple soft, cool tinted */
  --sh-sm:0 1px 2px rgba(15,45,90,.06);
  --sh-md:0 10px 30px -10px rgba(15,45,90,.16);
  --sh-lg:0 28px 64px -22px rgba(15,45,90,.24);
  --sh-dark:0 30px 68px -24px rgba(8,32,40,.55);

  /* radii (iOS generous) + motion */
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --ease:cubic-bezier(.22,1,.36,1);          /* strong ease out, entrances */
  --ease-io:cubic-bezier(.77,0,.175,1);      /* on screen movement */
  --dur:.6s;

  --font:"Satoshi","Inter",-apple-system,system-ui,sans-serif;
  --display:"Clash Display","Satoshi",sans-serif;
}

/* ---------------------------------------------------------------- base --- */
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scrollbar-color:rgba(15,45,90,.22) transparent;scrollbar-width:thin}
body{
  margin:0;background-color:var(--bg);background-image:var(--bg-mesh);background-attachment:fixed;
  font-family:var(--font);font-size:17px;font-weight:400;line-height:1.62;color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.025em;text-wrap:balance;line-height:1.06}
h4{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
svg{display:block}
ul{margin:0;padding:0;list-style:none}
strong{font-weight:600}

/* the surfaces we did not draw still belong to the palette */
::selection{background:rgba(10,165,236,.22);color:var(--ink)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(15,45,90,.20);border:3px solid transparent;background-clip:content-box;border-radius:var(--r-full)}
::-webkit-scrollbar-thumb:hover{background:rgba(15,45,90,.34);border:3px solid transparent;background-clip:content-box}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible{outline-color:#8be7ff}

.skip{position:absolute;left:16px;top:-64px;z-index:80;background:var(--anchor);color:#fff;
  padding:12px 18px;border-radius:var(--r-full);font-size:14px;font-weight:600;transition:top .18s ease-out}
.skip:focus{top:14px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:100%;max-width:1128px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.wrap-narrow{max-width:880px}

/* ------------------------------------------------------- house glass ----- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-md), var(--glass-hair);
}
.glass-card{background:var(--glass-strong)}
.glass-cyan{background:rgba(56,198,244,.12);border-color:rgba(56,198,244,.34)}
.anchor-card{
  background:var(--anchor-grad);border:1px solid rgba(255,255,255,.10);border-radius:var(--r-xl);
  color:#fff;box-shadow:var(--sh-dark),inset 0 1px 0 rgba(255,255,255,.10);position:relative;overflow:hidden;
}
.anchor-card::after{content:"";position:absolute;top:-34%;right:-12%;width:66%;height:132%;pointer-events:none;
  background:radial-gradient(circle,rgba(34,211,238,.30),transparent 62%)}
.anchor-card > *{position:relative}
/* the frost is a material, not decoration: without blur support it stays a panel */
@media (prefers-reduced-transparency:reduce){
  .glass{background:rgba(255,255,255,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------------------------------------------------------- buttons ------ */
.btn{
  font-family:var(--font);font-size:15px;font-weight:600;letter-spacing:-.005em;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:var(--r-full);border:0;cursor:pointer;white-space:nowrap;
  transition:transform .16s cubic-bezier(.23,1,.32,1), box-shadow .2s ease, background-color .2s ease;
}
.btn svg{width:17px;height:17px}
.btn-d{background:var(--anchor);color:#fff;box-shadow:0 14px 30px -14px rgba(10,46,52,.72)}
.btn-g{background:rgba(255,255,255,.66);color:var(--ink);border:1px solid var(--glass-border);box-shadow:var(--sh-sm)}
.btn-l{background:#eaf6ff;color:var(--anchor);box-shadow:0 14px 30px -16px rgba(4,20,26,.8)}
.btn-sm{padding:11px 19px;font-size:14.5px}
@media (hover:hover) and (pointer:fine){
  .btn-d:hover{transform:translateY(-2px);box-shadow:0 20px 36px -16px rgba(10,46,52,.78)}
  .btn-g:hover{transform:translateY(-2px);background:rgba(255,255,255,.9)}
  .btn-l:hover{transform:translateY(-2px);background:#fff}
}
.btn:active{transform:scale(.972)}

/* the arrow leans out of a link on hover, the one shared hover idiom */
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15.5px;color:var(--accent-ink)}
.tlink svg{width:16px;height:16px;transition:transform .22s var(--ease)}
@media (hover:hover) and (pointer:fine){ .tlink:hover svg{transform:translateX(4px)} }

/* ----------------------------------------------------------- header ------ */
.top-sentinel{position:absolute;top:0;left:0;width:1px;height:2px;pointer-events:none}
header{position:fixed;top:0;left:0;right:0;z-index:40;border-bottom:1px solid transparent;
  transition:background-color .4s ease, border-color .4s ease, -webkit-backdrop-filter .4s ease, backdrop-filter .4s ease}
header.stuck{background:rgba(234,241,249,.74);border-bottom-color:var(--border);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
.nav{display:flex;align-items:center;gap:18px;height:70px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;
  font-size:19px;letter-spacing:-.03em;color:var(--ink)}
.mark{width:30px;height:30px;flex:0 0 auto}
.nav .links{display:flex;gap:2px;margin-left:auto}
.nav .links a{font-size:14.5px;font-weight:500;color:var(--ink2);padding:9px 14px;border-radius:var(--r-full);
  transition:background-color .2s ease, color .2s ease}
.nav .links a:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.nav .links a[aria-current="page"]{color:var(--ink);background:rgba(255,255,255,.72)}
.nav .navcta{margin-left:6px}
@media (max-width:940px){
  .nav .links{display:none}
  .nav .navcta{margin-left:auto}
}

/* ---------------------------------------------------------- sections ----- */
section{position:relative;z-index:1}
.tint::before,.tint2::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:0}
.tint::before{background:
  radial-gradient(44% 46% at 10% 16%, rgba(56,198,244,.22), transparent 62%),
  radial-gradient(40% 44% at 92% 78%, rgba(37,233,197,.17), transparent 62%)}
.tint2::before{background:
  radial-gradient(46% 48% at 88% 14%, rgba(34,201,224,.21), transparent 62%),
  radial-gradient(38% 42% at 6% 84%, rgba(129,140,248,.14), transparent 62%)}
.sec{padding:104px 0}
.sec-tight{padding-top:0}
.sec-head{max-width:60ch}
.sec-head h2{font-size:clamp(27px,3.7vw,42px)}
.sec-head p{margin-top:16px;max-width:62ch;font-size:clamp(16.5px,1.4vw,18.5px);color:var(--ink2)}
@media (max-width:720px){ .sec{padding:72px 0} }

/* ------------------------------------------------------------- hero ------ */
.hero{position:relative;min-height:clamp(560px,88svh,800px);display:flex;align-items:center;
  padding:118px 0 92px;isolation:isolate}
.hero-still,.water,.hero-bloom{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border:0}
.hero-still{
  background:
    radial-gradient(78% 62% at 18% 104%, rgba(37,233,197,.34), transparent 62%),
    radial-gradient(84% 64% at 76% 108%, rgba(56,192,240,.44), transparent 64%),
    radial-gradient(60% 44% at 50% 30%, rgba(211,243,254,.7), transparent 70%);
  z-index:0;
}
.water{z-index:1;opacity:0;transition:opacity .9s var(--ease)}
html[data-scene="drawn"] .water{opacity:1}
html[data-scene="unavailable"] .water{display:none}
/* one overlay carries both jobs: the page blooms continue across the water,
   and the water dissolves into the page at the bottom edge */
.hero-bloom{
  z-index:2;
  background:
    radial-gradient(60% 55% at 8% 0%, rgba(56,198,244,.155), transparent 60%),
    radial-gradient(55% 50% at 100% 4%, rgba(34,201,224,.11), transparent 60%),
    radial-gradient(50% 60% at 60% 100%, rgba(129,140,248,.066), transparent 60%),
    linear-gradient(to bottom, rgba(234,241,249,0) 76%, rgba(234,241,249,.82) 92%, var(--bg) 100%);
}
.hero .wrap{z-index:3;display:flex;justify-content:center}

.hero-panel{
  width:min(820px,100%);padding:46px 48px 44px;border-radius:34px;text-align:center;position:relative;
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(28px) saturate(190%);backdrop-filter:blur(28px) saturate(190%);
  border:1px solid var(--glass-border);
  box-shadow:var(--sh-lg), var(--glass-hair), 0 1px 0 rgba(255,255,255,.4) inset;
}
.hero-panel h1{font-size:clamp(31px,4.6vw,50px);letter-spacing:-.032em}
.hero-panel h1 em{font-style:normal;color:var(--accent-700)}
/* each sentence is an atomic box, so the headline breaks where the writing does */
.hero-panel h1 .s{display:inline-block}
.hero-panel p{margin:20px auto 0;max-width:48ch;font-size:clamp(16.5px,1.5vw,19px);color:var(--ink2)}
.hero-cta{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}

/* the drifting satellites: two small glass chips that float over the blooms.
   Purely atmospheric, so they leave on small screens and under reduced motion. */
.drifter{
  position:absolute;z-index:3;border-radius:20px;padding:13px 17px;
  background:rgba(255,255,255,.52);
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 18px 40px -20px rgba(15,45,90,.4), var(--glass-hair);
  font-size:13.5px;font-weight:500;color:var(--ink2);white-space:nowrap;
  display:flex;align-items:center;gap:9px;pointer-events:none;
  animation:drift 17s ease-in-out infinite;
}
.drifter b{font-family:var(--display);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.drifter .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);flex:0 0 auto;
  box-shadow:0 0 0 4px var(--mint-bg)}
.drifter.d1{left:2%;top:26%;animation-delay:-3s}
.drifter.d2{right:2%;bottom:24%;animation-duration:21s;animation-delay:-9s}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) rotate(-.6deg)}
  50%    {transform:translate3d(10px,-16px,0) rotate(.7deg)}
}
@media (max-width:1180px){ .drifter{display:none} }

/* ---------------------------------------------------- the terms strip ---- */
.terms-wrap{position:relative;z-index:6;margin-top:-52px}
.terms{display:grid;grid-template-columns:1.7fr 1fr 1fr;align-items:center;padding:22px 10px;border-radius:var(--r-xl)}
.terms .tcell{padding:8px 26px;border-right:1px solid var(--border);min-width:0}
.terms .tcell:last-child{border-right:0}
.terms .lead{display:flex;align-items:center;gap:13px}
.terms .tick{width:34px;height:34px;flex:0 0 auto;border-radius:11px;background:var(--mint-bg);color:var(--mint-ink);
  display:grid;place-items:center}
.terms .tick svg{width:18px;height:18px}
.terms .lead span{font-weight:600;font-size:16.5px;line-height:1.36}
.terms .fig{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.terms .lbl{font-size:13.5px;color:var(--ink2);margin-top:2px}
@media (max-width:820px){
  .terms{grid-template-columns:1fr;padding:8px 6px}
  .terms .tcell{border-right:0;border-bottom:1px solid var(--border);padding:16px 20px}
  .terms .tcell:last-child{border-bottom:0}
}

/* ------------------------------------------------- problems we solve ----- */
/* Not six identical tiles. The first problem is the one we lead with, so it
   takes a wide panel with the outcome pulled out; the rest sit in a tighter
   grid underneath it. */
.problems{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:46px}
.prob{padding:30px 32px;border-radius:var(--r-xl);min-width:0;display:flex;flex-direction:column}
.prob.wide{grid-column:span 6;display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:center}
.prob.half{grid-column:span 3}
.prob.third{grid-column:span 2}
.prob .ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--accent-soft);color:var(--accent-700);border:1px solid rgba(10,165,236,.16)}
.prob .ico svg{width:22px;height:22px}
.prob h3{font-size:clamp(18.5px,1.75vw,22px);margin-top:19px;line-height:1.2}
.prob.wide h3{font-size:clamp(22px,2.6vw,30px)}
.prob p{margin-top:11px;font-size:16px;color:var(--ink2);max-width:42ch}
.prob .out{
  margin-top:auto;padding-top:19px;display:flex;align-items:flex-start;gap:10px;
  font-size:15px;font-weight:500;color:var(--mint-ink);line-height:1.45;
}
.prob .out svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px}
.prob.wide .outbox{
  background:var(--anchor-grad);color:#fff;border-radius:var(--r-lg);padding:26px 28px;
  box-shadow:var(--sh-dark),inset 0 1px 0 rgba(255,255,255,.10);position:relative;overflow:hidden;
}
.prob.wide .outbox::after{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;height:170%;
  background:radial-gradient(circle,rgba(34,211,238,.32),transparent 62%);pointer-events:none}
.prob.wide .outbox > *{position:relative}
.prob.wide .outbox .k{font-size:13.5px;color:#9fd9e8;font-weight:500}
.prob.wide .outbox .v{font-family:var(--display);font-weight:600;font-size:clamp(26px,3vw,34px);
  letter-spacing:-.025em;margin-top:6px;line-height:1.1}
.prob.wide .outbox .n{margin-top:12px;font-size:14.5px;color:rgba(255,255,255,.76);line-height:1.5}
@media (max-width:980px){
  .prob.half,.prob.third{grid-column:span 3}
  .prob.wide{grid-template-columns:1fr;gap:26px}
}
/* Five half width cards would orphan the last one on its own row, so between
   these two widths it takes the full row and reads as a deliberate closer.
   Bounded at the bottom: span 6 inside the single column grid below would
   conjure five implicit columns and blow the page sideways. */
@media (min-width:681px) and (max-width:980px){
  .prob.third:last-child{grid-column:span 6}
}
@media (max-width:680px){
  .problems{grid-template-columns:1fr;gap:14px}
  .prob,.prob.wide,.prob.half,.prob.third{grid-column:1 / -1;padding:26px 24px}
}

/* ----------------------------------------------------- platform strip ---- */
.strip{padding:56px 0 60px}
.strip p.note{text-align:center;max-width:56ch;margin:0 auto;font-size:16px;color:var(--ink2)}
.strip h2{text-align:center;font-size:clamp(20px,2.1vw,25px);margin-bottom:14px}
.marquee{position:relative;margin-top:34px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track .lg{
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding:0 34px;height:68px;color:var(--ink2);flex:0 0 auto;
  font-size:17px;font-weight:600;letter-spacing:-.012em;opacity:.86;
  transition:opacity .22s ease,color .22s ease;
}
.marquee-track .lg svg{width:27px;height:27px;fill:currentColor}
@media (hover:hover) and (pointer:fine){ .marquee-track .lg:hover{opacity:1;color:var(--ink)} }
@keyframes marquee{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }

/* ------------------------------------------------- approach, 3 steps ----- */
.approach{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:70px;align-items:start;margin-top:14px}
.approach-stick{position:sticky;top:112px}
.approach-stick h2{font-size:clamp(27px,3.7vw,42px)}
.approach-stick p{margin-top:16px;font-size:clamp(16.5px,1.4vw,18px);color:var(--ink2);max-width:40ch}
.rail{display:flex;gap:16px;margin-top:34px}
.rail-line{width:3px;border-radius:2px;background:rgba(15,45,90,.10);position:relative;flex:0 0 auto}
.rail-fill{position:absolute;inset:0;border-radius:2px;background:var(--accent-grad);
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.rail-names{display:flex;flex-direction:column;gap:22px;padding:2px 0}
.rail-names li{font-size:15.5px;font-weight:500;color:var(--muted);transition:color .3s ease;display:flex;gap:11px}
.rail-names li .num{font-variant-numeric:tabular-nums;font-family:var(--display);font-weight:600;
  color:var(--muted);transition:color .3s ease}
.rail-names li.on{color:var(--ink)}
.rail-names li.on .num{color:var(--accent-700)}
.steps{display:flex;flex-direction:column;gap:20px}
.step{padding:34px 36px;border-radius:var(--r-xl);scroll-margin-top:120px}
.step .n{font-family:var(--display);font-weight:600;font-size:14px;color:var(--accent-700);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.step h3{font-size:clamp(21px,2.2vw,27px);margin-top:10px}
.step p{margin-top:14px;font-size:16.5px;color:var(--ink2);max-width:52ch}
.step ul{margin-top:20px;display:flex;flex-direction:column;gap:11px}
.step ul li{display:flex;gap:11px;font-size:15.5px;color:var(--ink2);line-height:1.5}
.step ul li svg{width:17px;height:17px;flex:0 0 auto;margin-top:4px;color:var(--mint-ink)}
@media (max-width:980px){
  .approach{grid-template-columns:1fr;gap:34px}
  .approach-stick{position:static}
  .rail{display:none}
}
@media (max-width:680px){ .step{padding:28px 24px} }

/* ------------------------------------------------------- the numbers ---- */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
.fig-card{padding:34px 34px 30px;border-radius:var(--r-xl);min-width:0}
.fig-card .v{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1;
  font-size:clamp(38px,5vw,58px);font-variant-numeric:tabular-nums;color:var(--ink)}
.fig-card .v .sm{font-size:.52em;letter-spacing:-.02em;color:var(--ink2)}
/* the figure being moved away from, said quietly and struck through once */
.fig-card .v .was{position:relative;opacity:.72}
.fig-card .v .was::after{content:"";position:absolute;left:-.04em;right:-.04em;top:52%;height:2px;
  background:currentColor;opacity:.5;border-radius:2px}
.fig-card .v .arrow{color:var(--muted);font-size:.5em;margin:0 .2em;vertical-align:.16em}
.fig-card .k{margin-top:16px;font-size:16px;font-weight:600;color:var(--ink);line-height:1.35}
.fig-card .s{margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.5}
.fig-card.dark .v{color:#fff}
.fig-card.dark .v .sm{color:#9fd9e8}
.fig-card.dark .v .arrow{color:rgba(255,255,255,.45)}
.fig-card.dark .k{color:#fff}
.fig-card.dark .s{color:rgba(255,255,255,.66)}
.src{margin-top:26px;font-size:13.5px;color:var(--muted);max-width:74ch}
@media (max-width:900px){ .figs{grid-template-columns:1fr} }

/* quotes: real ones only, so the slots stay visibly empty until Raed fills them */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.quote{padding:28px 30px;border-radius:var(--r-xl);display:flex;flex-direction:column;min-height:196px}
.quote .q{font-size:16.5px;line-height:1.55;color:var(--ink2)}
.quote .who{margin-top:auto;padding-top:20px;font-size:14.5px;color:var(--muted);font-weight:500}
.quote.empty{border-style:dashed;border-color:rgba(15,45,90,.20);background:rgba(255,255,255,.34);box-shadow:none}
.quote.empty .q{color:var(--muted)}
@media (max-width:900px){ .quotes{grid-template-columns:1fr} }

/* --------------------------------------------------- what we do, bento -- */
.offers{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:46px}
.offer{padding:32px 34px;border-radius:var(--r-xl);min-width:0;display:flex;flex-direction:column;
  position:relative;overflow:hidden}
.offer.o1{grid-column:span 7}
.offer.o2{grid-column:span 5}
.offer.o3{grid-column:span 5}
.offer.o4{grid-column:span 7}
.offer .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);color:#bff0ff;border:1px solid rgba(255,255,255,.14)}
.offer.light .ico{background:var(--accent-soft);color:var(--accent-700);border-color:rgba(10,165,236,.16)}
.offer .ico svg{width:23px;height:23px}
.offer h3{font-size:clamp(21px,2.1vw,26px);margin-top:20px}
.offer p{margin-top:12px;font-size:16px;color:rgba(255,255,255,.76);max-width:44ch;line-height:1.56}
.offer.light p{color:var(--ink2)}
.offer .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.offer .tags span{font-size:13px;font-weight:500;padding:6px 12px;border-radius:var(--r-full);
  background:rgba(255,255,255,.12);color:#cfeaf4;border:1px solid rgba(255,255,255,.12)}
.offer.light .tags span{background:rgba(255,255,255,.66);color:var(--ink2);border-color:var(--border)}
.offer .go{margin-top:auto;padding-top:26px}
.offer .go .tlink{color:#8be7ff}
.offer.light .go .tlink{color:var(--accent-ink)}
/* the drawn geometry that gives two of the four cells a picture, not a paragraph */
.offer .plot{margin-top:24px;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(15,45,90,.08)}
.offer .plot svg{width:100%;height:auto;display:block}
@media (max-width:900px){
  .offer.o1,.offer.o2,.offer.o3,.offer.o4{grid-column:span 12}
}
@media (max-width:680px){ .offer{padding:26px 24px} }

/* -------------------------------------------------------- guarantee ----- */
.promise{padding:56px 60px;border-radius:34px;display:grid;grid-template-columns:1fr auto;gap:46px;align-items:center}
.promise h2{font-size:clamp(26px,3.4vw,40px);color:#fff}
.promise p{margin-top:18px;font-size:clamp(16.5px,1.5vw,18.5px);color:rgba(255,255,255,.8);max-width:56ch}
.promise .list{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.promise .list li{display:flex;gap:12px;font-size:16px;color:rgba(255,255,255,.88);line-height:1.5}
.promise .list li svg{width:19px;height:19px;flex:0 0 auto;margin-top:3px;color:var(--cyan)}
.promise .seal{width:150px;height:150px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);text-align:center;padding:16px}
.promise .seal .big{font-family:var(--display);font-weight:600;font-size:40px;color:#fff;line-height:1}
.promise .seal .sub{font-size:12.5px;color:#9fd9e8;margin-top:7px;line-height:1.35}
@media (max-width:900px){
  .promise{grid-template-columns:1fr;padding:38px 28px;gap:30px;justify-items:start}
}

/* ------------------------------------------------------- closing CTA ---- */
.close{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
  padding:52px 56px;border-radius:34px}
.close h2{font-size:clamp(27px,3.6vw,42px)}
.close p{margin-top:18px;font-size:clamp(16.5px,1.5vw,18.5px);color:var(--ink2);max-width:46ch}
.close .cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.chips span{font-size:13.5px;font-weight:500;padding:7px 14px;border-radius:var(--r-full);
  background:rgba(255,255,255,.7);border:1px solid var(--border);color:var(--ink2)}
.dm{padding:12px 0 12px 34px;border-left:1px solid var(--border)}
.dm .h{display:flex;align-items:center;gap:11px;font-weight:600;font-size:16px}
.dm .h svg{width:22px;height:22px;color:var(--accent-700)}
.dm p{margin-top:14px;font-size:15.5px;color:var(--ink2);line-height:1.56}
.dm .word{display:inline-block;font-family:var(--display);font-weight:600;letter-spacing:.02em;
  background:var(--anchor);color:#fff;padding:3px 11px;border-radius:9px;font-size:14.5px}
@media (max-width:900px){
  .close{grid-template-columns:1fr;padding:34px 26px;gap:30px}
  /* the divider follows the stack: a left rule becomes a rule above */
  .dm{border-left:0;border-top:1px solid var(--border);padding:26px 0 4px}
}

/* ----------------------------------------------------------- footer ----- */
footer{padding:64px 0 54px;border-top:1px solid var(--border);margin-top:104px}
.foot{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between;align-items:flex-start}
.foot .brand{font-size:18px}
.foot .cols{display:flex;gap:64px;flex-wrap:wrap}
.foot .col .ftitle{font-size:13.5px;color:var(--muted);font-weight:500;letter-spacing:.01em;margin-bottom:14px}
.foot .col a{display:block;font-size:15px;color:var(--ink2);padding:5px 0;transition:color .2s ease}
.foot .col a:hover{color:var(--ink)}
.foot-legal{margin-top:46px;padding-top:26px;border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:14px 26px;font-size:13.5px;color:var(--muted)}

/* ================================================== offering page bits === */
.page-hero{padding:150px 0 62px;position:relative}
.page-hero .kind{font-size:14.5px;font-weight:500;color:var(--accent-700);display:flex;align-items:center;gap:9px}
.page-hero .kind svg{width:17px;height:17px}
.page-hero h1{font-size:clamp(33px,5vw,56px);letter-spacing:-.033em;margin-top:18px;max-width:17ch}
.page-hero .sub{margin-top:22px;font-size:clamp(17px,1.6vw,20px);color:var(--ink2);max-width:56ch}
.page-hero .cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}

/* the Hormozi block: one labelled row per answer, the answer is the content */
.shape{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 46px;margin-top:10px}
.shape > .lbl{padding:30px 0;font-size:14.5px;font-weight:500;color:var(--muted);
  border-top:1px solid var(--border)}
.shape > .val{padding:30px 0;border-top:1px solid var(--border)}
.shape > .val > h2{font-size:clamp(21px,2.3vw,27px)}
.shape > .val > p{margin-top:14px;font-size:17px;color:var(--ink2);max-width:66ch;line-height:1.62}
.shape > .val > p + p{margin-top:14px}
.shape .pts{margin-top:20px;display:grid;gap:12px}
.shape .pts li{display:flex;gap:12px;font-size:16px;color:var(--ink2);line-height:1.55}
.shape .pts li svg{width:18px;height:18px;flex:0 0 auto;margin-top:4px;color:var(--mint-ink)}
.shape .mech{margin-top:22px;display:grid;gap:14px}
.shape .mech .m{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;align-items:start}
.shape .mech .m .i{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-700);border:1px solid rgba(10,165,236,.16);
  font-family:var(--display);font-weight:600;font-size:14.5px}
.shape .mech .m h3{font-size:17.5px;letter-spacing:-.015em}
.shape .mech .m p{margin-top:6px;font-size:15.5px;color:var(--ink2);max-width:60ch;line-height:1.55}
.shape .note{margin-top:18px;font-size:14.5px;color:var(--muted);max-width:66ch;line-height:1.55}
@media (max-width:860px){
  .shape{grid-template-columns:1fr;gap:0}
  .shape > .lbl{padding:26px 0 0;border-top:1px solid var(--border)}
  .shape > .val{padding:12px 0 26px;border-top:0}
}
.price{padding:30px 32px;border-radius:var(--r-xl);margin-top:22px;display:flex;gap:26px;
  align-items:center;flex-wrap:wrap;justify-content:space-between}
.price .amt{font-family:var(--display);font-weight:600;font-size:clamp(25px,3vw,34px);letter-spacing:-.025em}
.price .amt small{display:block;font-family:var(--font);font-weight:400;font-size:14.5px;
  color:var(--ink2);letter-spacing:0;margin-top:7px}
.todo{display:inline-block;font-family:var(--display);font-weight:600;font-size:.86em;letter-spacing:.01em;
  background:var(--amber-bg);color:var(--amber-ink);border:1px dashed rgba(169,112,12,.42);
  padding:1px 9px;border-radius:8px;vertical-align:.04em}

.diagram{margin:40px 0 0;border-radius:var(--r-xl);overflow:hidden;padding:26px 28px}
.diagram svg{width:100%;height:auto;display:block}
.diagram figcaption{margin-top:16px;font-size:14px;color:var(--muted);text-align:center}
/* Squeezed into a phone the diagram's labels stop being readable, so below
   this width it keeps its real size and the reader swipes it instead. */
@media (max-width:760px){
  .diagram{overflow-x:auto;overflow-y:hidden;padding:24px 22px}
  .diagram svg{min-width:600px}
  .diagram figcaption{position:sticky;left:0;max-width:calc(100vw - 92px)}
}

/* the other offerings, at the foot of each offering page */
.also{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.also a{padding:24px 26px;border-radius:var(--r-lg);display:flex;flex-direction:column;min-width:0;
  transition:transform .2s var(--ease), box-shadow .2s ease}
.also a h3{font-size:18px}
.also a p{margin-top:9px;font-size:14.5px;color:var(--ink2);line-height:1.5}
.also a .tlink{margin-top:18px;font-size:14.5px}
@media (max-width:860px){ .also{grid-template-columns:1fr} }

/* ------------------------------------------------------- book page ------ */
.book-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;margin-top:12px}
.book-card{padding:38px 40px;border-radius:var(--r-xl)}
.book-card h2{font-size:clamp(22px,2.4vw,28px)}
.book-card p{margin-top:16px;font-size:16.5px;color:var(--ink2);line-height:1.6}
.book-card .cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
.agenda{display:grid;gap:16px;margin-top:22px}
.agenda li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:15px;align-items:start}
.agenda li .i{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-700);border:1px solid rgba(10,165,236,.16);
  font-family:var(--display);font-weight:600;font-size:13.5px}
.agenda li b{display:block;font-weight:600;font-size:16px}
.agenda li span{display:block;margin-top:5px;font-size:15px;color:var(--ink2);line-height:1.5}
@media (max-width:900px){ .book-grid{grid-template-columns:1fr;gap:26px} .book-card{padding:30px 26px} }

/* ================================================================ motion =
   Reveal targets start visible. Script hides them only when it is going to
   animate them, so a crawler, a print, or a dead CDN all get a finished page.
   ======================================================================== */
/* The .js class is set by motion.js itself, on its first line. So the hero is
   only ever hidden when the thing that will animate it is definitely running.
   If the module 404s, throws on parse, or is blocked, nothing hides at all. */
html.js [data-first] [data-r]{opacity:0}

/* Page to page: the browser's own cross document crossfade. No JS, no delay
   added to a navigation, and nothing to clean up if it is unsupported. */
@view-transition{ navigation:auto }
::view-transition-old(root),::view-transition-new(root){
  animation-duration:.26s;animation-timing-function:cubic-bezier(.22,1,.36,1)
}

@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none }
  html{scroll-behavior:auto}
  [data-r]{opacity:1 !important;transform:none !important}
  .water{transition:none}
  .drifter{animation:none}
  .marquee-track{animation:none}
  .rail-fill{transition:none;transform:scaleY(1)}
}
@media print{ [data-r]{opacity:1 !important} }