/* ===========================================================================
   ELEVATE AI FOR BUSINESS — THE WORLD.
   The sister of the Elevate Media Consulting site: a deep saturated world that
   moves as you scroll, white glass floating on it carrying ink type, pills, big
   geometric headings. Same family, its own colours.

   EMC lives in teal, indigo and purple. This site does not. Its world is TWO
   colours at once, her words on 5 Oct 2026: "green and teal, green and blue —
   two colours, not one." The beetle's green holds one corner; teal holds the
   other at the top of the page and turns blue by the foot. Never purple.

   The top bar is BLACK. Her words. The logo in it is the FULL LOCKUP: the
   beetle on its glowing platform above ELEVATE AI FOR BUSINESS, and it is big.
   The beetle's head on its own is the favicon and the footer mark, nowhere else.

   Reading text is never green and never fluoro blue. On glass it is ink. On the
   world it is white. Green is the one accent: the call to action, the bullets.
   ======================================================================== */

:root{
  --ink:#050b18;                       /* her ink. Type on glass. */
  --ink-2:rgba(5,11,24,.74);
  --ink-3:rgba(5,11,24,.64);
  --glass:rgba(255,255,255,.9);
  --glass-line:rgba(255,255,255,.8);
  --on-world:rgba(255,255,255,.14);
  --on-world-line:rgba(255,255,255,.28);
  --dark-glass:rgba(3,12,9,.56);
  --green:#22e07a; --green-ink:#04210f; /* the accent, and the ink that sits on it */
  --blue:#2fa3ff; --sapphire:#1d5fd6;   /* the beetle's blue: glows and hairlines only */
  --r:28px; --r2:22px; --r3:16px;
  --shadow:0 28px 70px rgba(2,14,10,.34),0 2px 6px rgba(2,14,10,.14);
  --shadow-sm:0 12px 34px rgba(2,14,10,.22),0 1px 3px rgba(2,14,10,.10);
  --gutter:20px;

  /* The world is four numbers: --hue (OKLCH degrees), --l (how deep it sits),
     --k and --k3 (chroma for the dark tones and the bright glow). js/site.js
     sets them from the scroll position. With no script, or with reduced motion,
     the world holds on emerald. */
  --hue:152;--hue2:200;--l:1;--k:1;--k3:1;
  /* the green */
  --c1:oklch(calc(.46 * var(--l)) calc(.105 * var(--k)) calc(var(--hue) + 3));
  --c2:oklch(calc(.6 * var(--l)) calc(.15 * var(--k)) var(--hue));
  --c2a:oklch(calc(.6 * var(--l)) calc(.15 * var(--k)) var(--hue) / .78);
  /* the second colour: teal at the top of the page, blue by the foot. The world
     is drawn from BOTH, corner to corner, never from one hue alone. */
  --c4:oklch(calc(.48 * var(--l)) calc(.12 * var(--k)) var(--hue2));
  --c3:oklch(calc(.86 * var(--l)) calc(.15 * var(--k3)) calc(var(--hue2) - 4));
  --c3a:oklch(calc(.86 * var(--l)) calc(.15 * var(--k3)) calc(var(--hue2) - 4) / .34);
  --deep:oklch(calc(.25 * var(--l)) calc(.05 * var(--k)) calc((var(--hue) + var(--hue2)) / 2));
}

html{background:var(--deep)}
body{color:#fff;font-size:17px}

/* ---- the world --------------------------------------------------------- */
.world{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--deep)}
.world::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(64% 56% at 88% -6%, var(--c3a), transparent 62%),
    radial-gradient(60% 70% at -8% 106%, var(--c2a), transparent 64%),
    radial-gradient(40% 40% at 58% 60%, rgba(255,255,255,.05), transparent 70%),
    linear-gradient(160deg, var(--c1) 0%, var(--c1) 30%, var(--deep) 62%, var(--c4) 100%)}
.world::after{content:"";position:absolute;inset:0;background:var(--noise) 0 0/180px 180px repeat;opacity:.07;mix-blend-mode:overlay}
.world i{position:absolute;display:block;border-radius:50%;filter:blur(90px);pointer-events:none}
.world .a{width:54vw;height:54vw;left:-12vw;top:28vh;background:var(--c2);opacity:.62}
.world .b{width:44vw;height:44vw;right:-10vw;top:-10vh;background:var(--c4);opacity:.72}
@media (prefers-reduced-motion:no-preference){
  html.anim .world .a{animation:drift 28s ease-in-out infinite alternate}
  html.anim .world .b{animation:drift 34s ease-in-out infinite alternate-reverse}
  @keyframes drift{from{transform:translate(0,0)}to{transform:translate(8vw,-6vh)}}
}

/* ---- the bar. BLACK. The lockup is the biggest thing in it. ------------- */
.bar{position:relative;z-index:40;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px var(--gutter) 12px;
  background:#000;color:#fff;border-bottom:1px solid rgba(255,255,255,.1);transition:padding .3s var(--ease)}
@media (min-width:720px){ html.anim .bar{position:sticky;top:0} }
.brand{display:block;flex:0 0 auto}
.brand .lockup{display:block;width:auto;height:112px;transition:height .32s var(--ease);
  filter:drop-shadow(0 10px 28px rgba(47,163,255,.38))}
/* on a phone the links are a second row under the logo: nothing folds away */
.seg{display:flex;order:3;flex:1 1 100%;gap:2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.07)}
.seg a{flex:1 1 auto;justify-content:center;height:42px;padding:0 10px;border-radius:999px;display:flex;align-items:center;
  font-weight:500;font-size:.92rem;white-space:nowrap;color:#fff;transition:background .2s,color .2s}
.seg a:hover{background:rgba(255,255,255,.12)}
.seg a.on{background:#fff;color:var(--ink);font-weight:600}
.bar .go.sm{margin-left:auto;height:46px;padding:0 20px;font-size:.98rem;background:#fff;color:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.bar .go.sm:hover{background:#fff}

/* ---- material ----------------------------------------------------------- */
.glass{background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);
  -webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.9);border-radius:var(--r)}
.dark{background:var(--dark-glass);border:1px solid rgba(255,255,255,.16);color:#fff;
  -webkit-backdrop-filter:blur(30px) saturate(1.3);backdrop-filter:blur(30px) saturate(1.3);
  box-shadow:var(--shadow);border-radius:var(--r)}
.label{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.88;line-height:1.2}
.glass .label{color:var(--ink-3);opacity:1}
.fine{font-size:.95rem;color:var(--ink-2)}
.fine.white{color:rgba(255,255,255,.9)}
.eyebrow{font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;opacity:.92}
.glass a.txt,.dark a.txt,a.txt{font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}

/* ---- buttons. ONE green per screen: the call to action. ----------------- */
.go,.no{height:62px;padding:0 32px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-size:1.1rem;font-weight:700;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s,background .2s,color .2s}
.go{background:var(--green);color:var(--green-ink);box-shadow:0 14px 34px rgba(2,14,10,.3)}
.go:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(2,14,10,.36);background:#3bf791}
.no{background:var(--on-world);border:1px solid var(--on-world-line);color:#fff;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.no:hover{background:rgba(255,255,255,.24)}
.glass .no{background:rgba(5,11,24,.06);border-color:rgba(5,11,24,.12);color:var(--ink)}
.glass .no:hover{background:rgba(5,11,24,.11)}
.more{display:inline-flex;align-items:center;align-self:flex-start;justify-self:start;min-height:44px;padding:10px 20px;margin-top:8px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:.98rem;font-weight:700;line-height:1.2;transition:transform .25s var(--ease),box-shadow .25s}
.more:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(5,11,24,.26)}

/* ---- layout ------------------------------------------------------------- */
.wrap{max-width:1840px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{padding-top:64px;padding-bottom:16px}
.sh{display:grid;gap:14px;max-width:62ch;margin-bottom:28px}
.sh h2{font-size:clamp(2rem,3.1vw,3.7rem);font-weight:700;letter-spacing:-.03em;line-height:.98}
.sh p:not(.label){font-size:1.12rem;line-height:1.5;opacity:.94;max-width:60ch}
.sh .go,.sh .no{justify-self:start}
.hero h1,.sh h2,.book h2,.band-h h2,.plan h2{text-wrap:balance}

/* ---- hero: the same layout as the sister site. Copy one side, a framed
   screen in a glass card the other. --------------------------------------- */
.hero{display:grid;gap:40px;padding-top:34px;padding-bottom:30px;align-items:center}
.hero-t{display:grid;gap:22px;max-width:820px;min-width:0}
.hero h1{font-size:clamp(2.4rem,3.6vw,4.4rem);font-weight:700;letter-spacing:-.03em;line-height:.98}
.lede{font-size:clamp(1.1rem,1.3vw,1.4rem);line-height:1.45;opacity:.95;max-width:56ch}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.98rem;font-weight:500;opacity:.94}
.facts li{display:flex;align-items:center;gap:9px}
.facts li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 14px rgba(34,224,122,.7);flex:0 0 auto}
.hero.solo{min-height:0;grid-template-columns:minmax(0,1fr)}
.hero.solo .hero-t{max-width:1100px}
.hero-s{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;min-width:0}

.made{position:relative;display:grid;gap:22px;padding:18px 18px 22px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);
  -webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9)}
.made .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--ink-3)}
.made .top .fine{margin-left:auto;letter-spacing:0;text-transform:none;font-weight:500;color:var(--ink-3)}

/* THE STAGE. Her logo, big, as the standout of the page. The frame is dark on
   purpose: the chrome lettering and the platform's glow were drawn for a dark
   ground. The glow and the .vid rules are already here, so her logo film is a
   four-line paste into the HTML. See the comment above the stage in index.html. */
.stage{position:relative;display:grid;justify-items:center}
.stage .glow{position:absolute;inset:6% -8% -4%;filter:blur(54px);opacity:.5;border-radius:40%;z-index:0;
  background:radial-gradient(60% 60% at 50% 46%, rgba(47,163,255,.85), transparent 70%),
             radial-gradient(50% 50% at 64% 72%, rgba(34,224,122,.6), transparent 70%)}
/* A phone, because the film is a phone-shaped reel — the sister site shows
   its logo film the same way. The bezel is real: a dark ring with an inner
   hairline, so the screen reads as a screen and not as a floating rectangle. */
.stage .phone{position:relative;z-index:1;width:min(100%,318px);padding:11px;
  border-radius:40px;
  background:linear-gradient(170deg,#1b2742,#070d1c 62%,#141d33);
  box-shadow:0 44px 96px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.1) inset,
             0 0 0 1px rgba(255,255,255,.09)}
.stage .phone::after{content:"";position:absolute;left:50%;translate:-50% 0;top:17px;
  width:62px;height:5px;border-radius:99px;background:rgba(255,255,255,.22);z-index:3}
.stage .frame{position:relative;overflow:hidden;width:100%;aspect-ratio:9/16;border-radius:30px;z-index:1;
  background:radial-gradient(70% 55% at 50% 42%, #0f2a4a 0%, #081428 46%, #030711 100%);
  box-shadow:0 40px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)}
.stage .frame .vid,.stage .frame .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;padding:0}
.stage .frame .still{z-index:0}
.stage .frame .vid{z-index:1;object-fit:cover;padding:0}
.stage .len{position:absolute;right:14px;top:30px;z-index:2;padding:6px 11px;border-radius:999px;background:rgba(5,11,24,.6);color:#fff;font-size:.86rem;font-weight:600;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@media (prefers-reduced-motion:reduce){ .stage .frame .vid{display:none} }
@media (prefers-reduced-motion:no-preference){
  html.anim .stage .glow{animation:breathe 9s ease-in-out infinite alternate}
  @keyframes breathe{from{transform:scale(.96);opacity:.42}to{transform:scale(1.06);opacity:.62}}
}
.say{display:grid;gap:16px;min-width:0;align-content:center}
.say h2{font-size:clamp(1.7rem,2.2vw,2.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.02}
.say blockquote{font-size:clamp(1.1rem,1.3vw,1.4rem);font-weight:500;line-height:1.35;color:var(--ink-2)}
.say blockquote::before{content:"\201C"} .say blockquote::after{content:"\201D"}

/* ---- the four builds: glass tiles ------------------------------------------ */
.outs{display:grid;gap:14px;grid-template-columns:1fr}
.out{position:relative;display:flex;flex-direction:column;gap:10px;padding:60px 24px 26px;min-width:0;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.out:hover{transform:translateY(-4px);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9)}
.out .num{position:absolute;left:24px;top:22px;font-size:.86rem;font-weight:700;letter-spacing:.14em;color:var(--ink-3)}
.out .tag{position:absolute;right:20px;top:18px;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;
  background:rgba(5,11,24,.06);font-size:.78rem;font-weight:700;letter-spacing:.04em;color:var(--ink)}
.out h3{font-size:clamp(1.5rem,1.9vw,2rem);font-weight:700;letter-spacing:-.025em;line-height:1.05}
.out p{font-size:1.02rem;color:var(--ink-2);line-height:1.42;max-width:44ch}
.out .price{margin-top:auto;padding-top:12px;font-size:1.02rem;font-weight:700;color:var(--ink);line-height:1.3}
.out .price small{display:block;font-size:.88rem;font-weight:500;color:var(--ink-2);margin-top:2px}
.out .more{margin-top:10px}

/* ---- points on the world, no boxes ------------------------------------------ */
.pts{display:grid;gap:0 56px;grid-template-columns:minmax(0,1fr)}
.pts>li{display:grid;gap:10px;align-content:start;padding:22px 0 26px;border-top:1px solid rgba(255,255,255,.24)}
.pts h3{font-size:clamp(1.25rem,1.6vw,1.65rem);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.pts p{font-size:1.1rem;line-height:1.5;opacity:.96;max-width:44ch}

/* ---- a real screen, in glass, FULL WIDTH, clickable to full size ------------
   Every screenshot is wrapped in <a class="pane" href="/shots/x.png"> and has an
   "Open full size" link in its caption. On a phone the picture keeps a size you
   can read and scrolls sideways. Width and height come from shots/manifest.json. */
.shot{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start;min-width:0}
.pane{position:relative;display:block;padding:10px;border-radius:var(--r);background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pane:hover{transform:translateY(-3px)}
.pane:focus-visible{outline:3px solid #fff;outline-offset:4px}
.pane .face{position:relative;display:block;border-radius:calc(var(--r) - 10px);overflow:hidden;background:#0b1214}
.pane .slide{position:relative;display:block}
.pane img{display:block;width:100%;height:auto}
.pane .zoom{position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 12px;border-radius:999px;
  background:rgba(5,11,24,.72);color:#fff;font-size:.86rem;font-weight:600;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none}
.pane .zoom::before{content:"";width:14px;height:14px;border:2px solid #fff;border-radius:50%;box-shadow:5px 5px 0 -3px #fff}
.shot figcaption{display:grid;gap:8px;max-width:76ch;font-size:1.12rem;line-height:1.45}
.shot figcaption .fine{margin:0;font-size:.95rem}
.shot .swipe{display:none}
.shot .full{justify-self:start;font-size:.98rem;font-weight:600;text-decoration:underline;text-underline-offset:4px;opacity:.92}
.shot .full:hover{opacity:1}
.shots{display:grid;gap:56px;grid-template-columns:minmax(0,1fr)}
.shots>*{max-width:1540px;min-width:0}
.shot{max-width:calc(var(--nw,1500) * 1px + 22px);width:100%;min-width:0}
/* a screenshot band: the words across the top, the screen full width beneath */
.band{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-bottom:26px}
.band-h{display:grid;gap:12px;max-width:62ch}
.band-h h2,.band-h h3{font-size:clamp(1.7rem,2.5vw,3rem);font-weight:700;letter-spacing:-.03em;line-height:1}
.band-h p:not(.label){font-size:1.1rem;line-height:1.5;opacity:.94}
.band .look{align-self:end}
.look{display:grid;gap:12px 24px;grid-template-columns:minmax(0,1fr);counter-reset:lk}
.look li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;font-size:1.04rem;font-weight:500;line-height:1.35}
.look li::before{counter-increment:lk;content:counter(lk);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:#fff;color:var(--ink);font-weight:700;font-size:.92rem;box-shadow:0 0 0 3px var(--green)}
.glass .look li::before{box-shadow:0 0 0 3px var(--green)}
@media (min-width:1100px){
  .band{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px 64px;align-items:end}
  .band>.shot,.band>.shots{grid-column:1/-1}
}

/* ---- a small glass card: a heading and a list ------------------------------- */
.card{display:grid;gap:18px;align-content:start;padding:28px 26px 32px;border-radius:var(--r)}
.card h3{font-size:clamp(1.5rem,2vw,2.2rem);font-weight:700;letter-spacing:-.03em;line-height:1.02}
.card p{font-size:1.04rem;line-height:1.5;color:var(--ink-2)}
.card.dark p{color:rgba(255,255,255,.9)}
.ticks{display:grid;gap:11px}
.ticks li{display:flex;align-items:flex-start;gap:12px;font-size:1.06rem;font-weight:500;line-height:1.3}
.ticks li::before{content:"";flex:0 0 auto;width:10px;height:10px;border-radius:3px;background:var(--green);margin-top:.42em;box-shadow:0 0 0 3px rgba(34,224,122,.18)}
.ticks li b{font-weight:700}
.duo{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);align-items:start}
.duo .sh{margin-bottom:0}
.duo .card{align-self:start}

/* ---- renting against owning: two columns of the same rows ------------------ */
.vs{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.vs>div{display:grid;gap:0;align-content:start;padding:8px 26px 14px;border-radius:var(--r)}
.vs h3{font-size:clamp(1.4rem,1.8vw,1.9rem);font-weight:700;letter-spacing:-.025em;padding:20px 0 14px;line-height:1.05}
.vs .row{display:grid;gap:3px;padding:14px 0;border-top:1px solid rgba(5,11,24,.1)}
.vs .row small{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}
.vs .row span{font-size:1.06rem;font-weight:500;line-height:1.3}
.vs .own .row{border-top-color:rgba(255,255,255,.2)}
.vs .own .row small{color:rgba(255,255,255,.7)}

/* ---- steps ------------------------------------------------------------------ */
.steps{display:grid;gap:12px;grid-template-columns:1fr}
.step{border-radius:var(--r2);padding:20px 22px;display:grid;gap:4px;grid-template-columns:auto 1fr;column-gap:18px;align-items:center;min-height:96px}
.step b{grid-row:span 2;font-size:2.8rem;font-weight:700;letter-spacing:-.04em;line-height:.9;color:var(--ink-3);min-width:1.1em}
.step h3{font-size:1.15rem;font-weight:700;line-height:1.15}
.step p{color:var(--ink-2);font-size:.98rem;line-height:1.4}
.step.yours{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.step.yours h3::after{content:"you";margin-left:10px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-2);vertical-align:middle}

/* ---- what it costs: rows, not a wall ---------------------------------------- */
.plans{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);align-items:start}
.plan{display:flex;flex-direction:column;gap:22px;padding:28px 26px 32px;border-radius:var(--r);min-width:0}
.plan header{display:grid;gap:10px}
.plan h2{font-size:clamp(1.9rem,2.6vw,3.1rem);font-weight:700;letter-spacing:-.03em;line-height:.98}
.plan .sell{font-size:1.12rem;font-weight:500;line-height:1.4;max-width:46ch;color:var(--ink-2)}
.rates{width:100%;border-collapse:collapse;font-size:1rem}
.rates caption{text-align:left;padding:0 0 8px}
.rates th,.rates td{padding:14px 0;vertical-align:top;border-top:1px solid rgba(5,11,24,.12);text-align:left;font-weight:600;line-height:1.25}
.rates tr:last-child th,.rates tr:last-child td{border-bottom:1px solid rgba(5,11,24,.12)}
.rates th{font-size:1.08rem}
.rates th small{display:block;font-size:.9rem;font-weight:500;color:var(--ink-2);margin-top:3px;line-height:1.3;max-width:40ch}
.rates td{text-align:right;font-weight:700;font-size:1.22rem;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:18px;letter-spacing:-.02em}
.rates td small{display:block;font-size:.88rem;font-weight:500;color:var(--ink-2);margin-top:3px;letter-spacing:0;white-space:normal;max-width:24ch;margin-left:auto}
.plan .why{display:grid;gap:6px;font-size:1.02rem;line-height:1.48;color:var(--ink-2)}
.plan .why b{color:var(--ink);font-size:.86rem;letter-spacing:.12em;text-transform:uppercase}
.plan.dark .why,.plan.dark .sell{color:rgba(255,255,255,.9)}
.plan.dark .why b{color:#fff}
.plan .amt{display:grid;gap:6px;padding:18px 0;border-top:1px solid rgba(5,11,24,.12);border-bottom:1px solid rgba(5,11,24,.12)}
.plan.dark .amt{border-color:rgba(255,255,255,.22)}
.big{font-size:clamp(2.4rem,4vw,4.6rem);font-weight:700;letter-spacing:-.045em;line-height:.9;display:block}
.plan .amt p{font-size:1.08rem;font-weight:600;color:var(--ink-2)}
.plan.dark .amt p{color:rgba(255,255,255,.86)}
.plan>.cta{margin-top:auto;padding-top:4px}
.plan .ticks li{font-size:1.02rem}

/* ---- questions: rows that fold. Every answer is in the DOM; with no script
   every row stands open. Folding is gated on html.anim so nothing is ever hidden
   by CSS that only a script could reveal. -------------------------------------- */
.faq-top{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.faq-top button{appearance:none;cursor:pointer;font:inherit;font-size:.95rem;font-weight:600;padding:9px 16px;border-radius:999px;color:#fff;
  background:var(--on-world);border:1px solid var(--on-world-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background .18s,color .18s}
.faq-top button:hover{background:rgba(255,255,255,.24)}
.faq-top button[aria-pressed="true"]{background:#fff;color:var(--ink);border-color:#fff}
.faq-top .n{opacity:.6;font-weight:500;margin-left:7px}
.faq{display:grid;grid-template-columns:minmax(0,1fr)}
.faq .q{border-top:1px solid rgba(255,255,255,.22);min-width:0}
.faq .q:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.faq .q[hidden]{display:none}
.faq .q>h3{margin:0;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;color:inherit}
.faq .ask{appearance:none;width:100%;cursor:pointer;font:inherit;text-align:left;color:#fff;background:none;border:0;padding:20px 0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start;
  font-size:clamp(1.12rem,1.35vw,1.42rem);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.faq .ask:hover{opacity:.82}
.faq .ask:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:8px}
.faq .sign{flex:none;width:30px;height:30px;margin-top:2px;border-radius:50%;display:grid;place-items:center;
  background:var(--on-world);border:1px solid var(--on-world-line);position:relative;transition:background .2s,rotate .28s cubic-bezier(.3,.8,.3,1)}
.faq .sign::before,.faq .sign::after{content:"";position:absolute;background:#fff;border-radius:2px}
.faq .sign::before{width:12px;height:2px}
.faq .sign::after{width:2px;height:12px;transition:opacity .2s,scale .28s cubic-bezier(.3,.8,.3,1)}
.faq .q.open .sign{rotate:180deg;background:#fff}
.faq .q.open .sign::before,.faq .q.open .sign::after{background:var(--ink)}
.faq .q.open .sign::after{opacity:0;scale:0 1}
html.anim .faq .fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.3,.8,.3,1)}
html.anim .faq .q.open .fold{grid-template-rows:1fr}
html.anim .faq .fold>div{overflow:hidden;min-height:0}
.faq .fold .a{margin:0 0 22px;padding:20px 24px 22px;border-radius:var(--r2);background:var(--glass);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);box-shadow:var(--shadow-sm)}
html.anim .faq .fold .a{opacity:0;translate:0 -8px;transition:opacity .26s ease .05s,translate .3s ease .05s}
html.anim .faq .q.open .fold .a{opacity:1;translate:0}
.faq .fold .a p{margin:0;max-width:72ch;font-size:1.06rem;line-height:1.58;font-weight:500;color:var(--ink)}
.faq .fold .a p+p{margin-top:12px}
@media (prefers-reduced-motion:reduce){ .faq .fold,.faq .fold .a,.faq .sign{transition:none} }

/* ---- the sister company, one line, no box ----------------------------------- */
.cross{display:grid;gap:18px;padding-top:34px;border-top:1px solid rgba(255,255,255,.24)}
.cross h2{font-size:clamp(1.6rem,2.3vw,2.6rem);font-weight:700;letter-spacing:-.03em;line-height:1}
.cross p:not(.label){font-size:1.1rem;line-height:1.5;opacity:.95;max-width:64ch}

/* ---- start here ------------------------------------------------------------- */
.book{padding-top:80px;padding-bottom:70px}
.book>div{display:grid;gap:22px;max-width:980px}
.book h2{font-size:clamp(2.2rem,3.4vw,4.2rem);font-weight:700;letter-spacing:-.035em;line-height:.96}

/* ---- the brief builder on the contact page. Every field feeds the email. ----- */
.brief{display:grid;gap:26px;padding:26px 22px 28px}
.brief .fields{display:grid;gap:18px}
.brief .f{display:grid;gap:7px}
.brief label{font-size:1.02rem;font-weight:700;line-height:1.2}
.brief label small{display:block;font-size:.9rem;font-weight:500;color:var(--ink-2);margin-top:2px;line-height:1.35}
.brief input,.brief textarea{width:100%;padding:13px 16px;border-radius:14px;border:1px solid rgba(5,11,24,.16);background:#fff;color:var(--ink);line-height:1.4;font-size:1rem}
.brief textarea{min-height:88px;resize:vertical}
.brief input:focus-visible,.brief textarea:focus-visible{outline:3px solid var(--green);outline-offset:1px;border-color:transparent}
.brief .out{padding:24px 22px 26px;gap:16px;border-radius:var(--r2)}
.brief .out:hover{transform:none;box-shadow:var(--shadow)}
.brief .out .label{color:rgba(255,255,255,.7)}
.brief pre{margin:0;white-space:pre-wrap;word-wrap:break-word;font:inherit;font-size:.98rem;line-height:1.5;color:rgba(255,255,255,.92);max-height:380px;overflow:auto}
.brief .out .cta{margin-top:auto}
.brief .out .go.done{background:#fff;color:var(--ink)}
.brief .out p,.brief .out .addr,.brief .out .addr a{color:#fff}
.brief .out .no{background:var(--on-world);border-color:var(--on-world-line);color:#fff}
.brief .out .no:hover{background:rgba(255,255,255,.24)}
.brief .addr{font-size:1.02rem;font-weight:600;word-break:break-all}
.brief .addr a{text-decoration:underline;text-underline-offset:4px}

/* ---- footer ------------------------------------------------------------------ */
footer{padding-top:30px;padding-bottom:44px;font-size:.92rem;display:grid;gap:6px;border-top:1px solid rgba(255,255,255,.16)}
footer p{opacity:.9;max-width:80ch}
/* THE FOOTER MARK — the beetle's head on its own lives here and in the favicon, nowhere else. */
.foot-mark{display:block;width:60px;height:60px;padding:6px;border-radius:50%;background:#000;border:1px solid rgba(255,255,255,.2);margin-bottom:18px}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:10px}
.foot-nav a{font-weight:600;opacity:.9;padding:6px 0}
.foot-nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}

/* ======================================================= RESPONSIVE ===== */
@media (min-width:600px){
  .outs{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .vs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .made{grid-template-columns:minmax(240px,340px) minmax(0,1fr);gap:26px;padding:22px 24px 26px}
  .made .top{grid-column:1/-1}
}
@media (min-width:720px){
  .brand .lockup{height:128px}
  html.scrolled .brand .lockup{height:80px}
}
/* seven links: they join the logo's row only once there is room for all of them */
@media (min-width:1100px){
  .seg + .go.sm{margin-left:0}
  .seg{order:0;flex:0 1 auto;margin-left:auto;padding:5px;gap:4px}
  .seg a{flex:0 0 auto;height:44px;padding:0 14px;font-size:.95rem}
}
@media (min-width:760px){
  :root{--gutter:32px}
  .sec{padding-top:88px}
  .hero{padding-top:44px}
  .pts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
}
@media (min-width:1100px){
  .outs.four{grid-template-columns:repeat(4,1fr)}
  .plans.two{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px}
  .faq{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
  .brief{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;padding:40px 44px 44px;align-items:start}
  .brief .out{position:sticky;top:120px}
  .cross{grid-template-columns:minmax(0,1fr) auto;gap:20px 56px;align-items:center}
  .cross>div{display:grid;gap:14px}
}
@media (min-width:1200px){
  :root{--gutter:44px}
  .shot:not(.small) .pane{margin-inline:calc(16px - var(--gutter))}
  .shot:not(.small){max-width:calc(var(--nw,1500) * 1px + 22px - 2 * (var(--gutter) - 16px))}
  .bar{padding:10px var(--gutter)}
  .brand .lockup{height:168px}
  html.scrolled .brand .lockup{height:88px}
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;min-height:calc(100vh - 200px);padding-top:30px;padding-bottom:50px}
  .made{grid-template-columns:minmax(280px,390px) minmax(0,1fr);gap:30px}
  .sec{padding-top:110px}
  .sh{margin-bottom:36px}
  .outs{gap:18px}
  .out{padding:66px 28px 28px}
  .steps{grid-template-columns:repeat(6,1fr);gap:14px}
  .step{grid-template-columns:1fr;align-content:start;min-height:200px;padding:22px}
  .step b{grid-row:auto;font-size:3.4rem;margin-bottom:12px}
  .plan{padding:40px 40px 44px}
  .card{padding:36px 40px 40px}
  .vs>div{padding:10px 32px 18px}
}
@media (min-width:1500px){
  .pts{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1600px){
  :root{--gutter:64px}
  .brand .lockup{height:190px}
  html.scrolled .brand .lockup{height:92px}
  .seg a{padding:0 18px;font-size:1rem}
  .hero{gap:80px}
  .hero-t{gap:26px}
  .made{grid-template-columns:minmax(340px,470px) minmax(0,1fr);gap:40px;padding:28px 30px 32px}
  .stage .phone{width:min(100%,360px)}
  .outs{gap:22px}
  .steps{gap:18px}
  .shots{gap:72px}
}
@media (max-width:719px){
  .seg{flex-wrap:wrap;border-radius:26px;gap:2px}
  .seg a{flex:1 1 23%;height:40px;font-size:.86rem;padding:0 6px}
}
@media (max-width:599px){
  .hero h1{font-size:2.3rem}
  .go,.no{height:58px;padding:0 24px;font-size:1.02rem}
  .bar .go.sm{height:42px;padding:0 16px;font-size:.9rem}
  .brand .lockup{height:96px}
  .made .top .fine{flex-basis:100%;margin-left:0}
  .stage .phone{width:min(100%,272px)}
  .pane{padding:6px;border-radius:var(--r2)}
  .pane .face{border-radius:calc(var(--r2) - 6px);overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .pane .slide{width:calc(var(--nw) * .52px)}
  .pane .zoom{display:none}
  .shot .swipe{display:block}
  .plan{padding:24px 20px 28px}
  .rates td{font-size:1.08rem;padding-left:12px}
  .rates th small{max-width:none}
  .brief .out{position:static}
}
@media (max-width:359px){ .seg a{flex:1 1 45%} }


/* ---- 5 Oct 2026: the shorter pages ---------------------------------------
   Screenshots two abreast on a wide screen, three plan cards side by side,
   four steps in a row, and the search box on the questions page. Nothing new
   in the language: the same glass, the same pills, the same type. */
.shots.two>*{max-width:none}
.shot figcaption b{color:inherit}
.sec.tight{padding-top:24px}
.plans.three .plan{gap:18px}
.plans.three .plan .amt{padding:14px 0}
.plans.three .big{font-size:clamp(2rem,3vw,3.4rem)}
.plans.three .plan h2{font-size:clamp(1.6rem,2.1vw,2.4rem)}
.plans.three .plan.dark .ticks li::before{box-shadow:0 0 0 3px rgba(34,224,122,.28)}
.more-shots{margin-top:28px}
.more-shots summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 22px;border-radius:999px;
  background:var(--on-world);border:1px solid var(--on-world-line);font-weight:700;font-size:1rem;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.more-shots summary::-webkit-details-marker{display:none}
.more-shots summary::after{content:"";width:8px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);margin-top:-4px;transition:transform .2s}
.more-shots[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.more-shots[open] summary{margin-bottom:28px}
.faq-find{margin:0 0 22px;max-width:640px}
.faq-find input{width:100%;height:58px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:1.05rem;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.faq-find input::placeholder{color:rgba(255,255,255,.72)}
.faq-find input:focus-visible{outline:3px solid #fff;outline-offset:2px}
.faq-none{padding:18px 0}
.faq-none[hidden]{display:none}
@media (min-width:1100px){
  .shots.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}
  .shots.two .shot:not(.small){max-width:none}
  .shots.two .shot:not(.small) .pane{margin-inline:0}
  .plans.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .steps.four{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1200px){
  .shots.two .shot:not(.small){max-width:none}
  .shots.two .shot:not(.small) .pane{margin-inline:0}
}

/* ---- the screenshot viewer ------------------------------------------------
   Opens over the page. Escape, the close button, a click outside it and the
   browser back button all close it, so nobody is ever stranded on a bare PNG. */
.viewer{position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:clamp(14px,3vw,44px); background:rgba(3,7,18,.86);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px)}
.viewer[hidden]{display:none}
.viewer figure{margin:0; display:grid; gap:14px; max-width:min(1600px,96vw); max-height:92vh}
.viewer img{display:block; width:auto; max-width:100%; max-height:78vh; object-fit:contain;
  border-radius:var(--r); border:1px solid var(--navy-2); box-shadow:0 40px 110px rgba(0,0,0,.7); background:#040a16}
.viewer figcaption{color:var(--ice); font-size:1rem; line-height:1.45; text-align:center; max-width:90ch; justify-self:center}
.viewer-x{position:fixed; top:18px; right:18px; appearance:none; cursor:pointer; font:inherit;
  font-weight:700; font-size:.95rem; padding:11px 20px; border-radius:999px;
  color:#04210f; background:var(--green); border:0; box-shadow:0 12px 30px rgba(0,0,0,.5)}
.viewer-x:hover{background:#3bf791}
.viewer-x:focus-visible{outline:2px solid #fff; outline-offset:3px}
@media (max-width:760px){
  /* on a phone the screen is wide, so let it be panned rather than shrunk away */
  .viewer figure{max-width:100%}
  .viewer img{max-height:none; max-width:none; width:auto; min-width:760px}
  .viewer figure{overflow:auto}
}

/* =============================================================================
   TOUCH — 5 Oct 2026. The same fault as the sister site, the same cure; the
   full account is at the foot of Elevate Media Consulting's css/a.css.

   In short: on every scroll frame the script wrote a new --hue to <html>, every
   oklch colour recomputed, the fixed world (90px-blurred orbs, a blend-mode
   noise layer, four gradients) repainted full-screen, and 20–45 backdrop-filter
   panels — most of them being moved by a scroll-driven translate at the same
   time — had to be re-sampled over it. iOS Safari composites such a panel flat
   when it cannot keep up, and a 90%-white panel with no backdrop is a solid
   white block the size of the panel. That is the white box; the same work is
   the jank.

   On a touch screen: no backdrop-filter anywhere (near-solid panels in the same
   tokens), gradient orbs instead of blurs, no blend-mode layer, no scroll-linked
   transforms, and the world's colour in fifteen glides through registered
   property transitions, written at most fifteen times a page (js/site.js).
   Tap targets come up to 44px. Nothing with a mouse changes.
   ========================================================================== */
@property --hue{syntax:'<number>';inherits:true;initial-value:152}
@property --l{syntax:'<number>';inherits:true;initial-value:1}
@property --k{syntax:'<number>';inherits:true;initial-value:1}
@property --k3{syntax:'<number>';inherits:true;initial-value:1}
@media (pointer:coarse){
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  :root{--glass:rgba(255,255,255,.965);--glass-line:rgba(255,255,255,.92);--on-world:rgba(255,255,255,.17);--on-world-line:rgba(255,255,255,.32);--dark-glass:rgba(3,12,9,.88)}
  html{transition:--hue 1.2s linear,--l 1.2s linear,--k 1.2s linear,--k3 1.2s linear}
  .world i{filter:none}
  .world .a{width:92vw;height:92vw;left:-32vw;top:22vh;background:radial-gradient(closest-side,var(--c2),transparent)}
  .world .b{width:74vw;height:74vw;right:-26vw;top:-22vh;background:radial-gradient(closest-side,var(--c3),transparent)}
  .world::after{display:none}
  .rv,.rvs>*{animation:none}
  .stage .glow{filter:none;opacity:.5;-webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent)}
  /* a thumb's targets: nothing to press is under 44px */
  .seg a{height:44px}
  .bar .go.sm{height:44px}
  .faq-top button{min-height:44px;padding:10px 16px}
  .shot .full,a.txt{display:inline-flex;align-items:center;min-height:44px}
  .foot-nav{gap:0 22px}
  .foot-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0}
  .viewer-x{min-height:44px}
  .brief label{min-height:44px;align-content:center}
}
/* ---- narrow screens (5 Oct 2026). Under 420px a long pill label wraps inside its
   pill instead of forcing the page wider than the screen; the panels lose a little
   side padding so a 320px phone never scrolls sideways. ---- */
@media (max-width:420px){
  .go,.no{white-space:normal;text-align:center;height:auto!important;min-height:52px;padding:12px 20px;line-height:1.2;max-width:100%;overflow-wrap:anywhere}
  .bar .go.sm{height:44px!important;min-height:0;padding:0 16px;white-space:nowrap}
  /* an email address is one word 318px long: it may break rather than widen the page */
  a.txt,.addr,.fine,.brief .out p{overflow-wrap:anywhere}
  .cross,.card,.plan,.vs>div{padding-left:18px;padding-right:18px}
  .brief{padding-left:16px;padding-right:16px}
  .demo-products button{min-height:48px}
}
/* the second world colour (--hue2, added 5 Oct) is registered too, so on touch it glides with the first */
@property --hue2{syntax:'<number>';inherits:true;initial-value:200}
@media (pointer:coarse){ html{transition:--hue 1.2s linear,--hue2 1.2s linear,--l 1.2s linear,--k 1.2s linear,--k3 1.2s linear} }
/* the price table on a phone: label, then the figure under it, each row the full width
   (at 320px the label column was being squeezed to a word a line) */
@media (max-width:520px){
  .rates tr,.rates th,.rates td{display:block;width:100%;text-align:left;padding-left:0}
  .rates th{padding:14px 0 4px;border-top:1px solid rgba(5,11,24,.12)}
  .rates td{border-top:0;padding:0 0 14px;white-space:normal}
  .rates tr:last-child th{border-bottom:0}
  .rates tr:last-child td{border-bottom:1px solid rgba(5,11,24,.12)}
  .rates th small{max-width:none}
  .rates td small{margin-left:0;max-width:none}
}