/* ==============================================================================================================
   Always Ahead AI, v5 (2026-09): the design system + the homepage. From the approved mockup
   (site-redesign-2026-09/j-final/index-question.html + style.css), cleaned of the rules for things that are gone.

   Every page (EN + FR) loads, after the Google Fonts link:
     <link rel="stylesheet" href="/site.css?v=1">
     homepage:     <link rel="stylesheet" href="/ideas.css?v=1">   (the clean-line workflow maps)
     inner pages:  <link rel="stylesheet" href="/inner.css?v=1">   (+ /ideas.css?v=1 on the case studies pages)
   and at the end of <body>:
     <script src="/site.js?v=1" onerror="document.documentElement.classList.remove('js','aa-m')"></script>
     <script defer src="/chat-widget.js?v=12"></script>
   Page CSS goes in /inner.css (loaded after this file), each page's rules under its own prefix. Reuse the classes
   below instead of restyling them. The exact nav / footer / page hero / closing band markup: CHROME.md (build notes).

   Fonts: Plus Jakarta Sans + JetBrains Mono (the two faces on the business card).
   Type scale (8 sizes): 12 / 14 / 16 / 18 / 22 / what-if 24-30 / h2 30-44 / h1 36-51. Spacing on a 4/8 grid.
   Layout: the nav turns into the burger under 1000px; the idea card stacks under 1200px; phone = max-width 599px.

   Robustness (see site.js): html.js is set by the head script; site.js adds the interactive states (.is-tabs on the
   ideas, the review arrows and dots, the phone menu). A site.js error removes js + aa-m and those states, so the page
   falls back to the static layout: every idea card stacked, the reviews a plain scrolling row, the nav links shown
   on phones. Motion runs only with html.js.aa-m AND prefers-reduced-motion: no-preference (section 13).

   1 tokens + base   2 buttons, links, pill   3 nav + phone menu   4 hero   5 sections   6 ideas (the card)
   7 reviews   8 how it works   9 closing band   10 footer   11 inner pages: page hero   12 tablet + phone   13 motion
   ============================================================================================================== */


/* ---------- 1. TOKENS + BASE ---------- */
:root {
  --navy: #101B33;
  --blue: #1B5BFF;
  --blue-d: #1543C9;
  --blue-l: #8FB0FF;
  --white: #FFFFFF;
  --tint: #F2F4F9;
  --ink: #101B33;
  --slate: #586682;
  --mute: #4C5A78;
  --line: #E1E6F0;
  --peri: #96A5C8;
  --peri-2: #B0BEDC;
  --star: #FF9900;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --t-xs: 12px;
  --t-s: 14px;
  --t-b: 16px;
  --t-l: 18px;
  --t-h3: 22px;
  --t-q: clamp(24px, .8vw + 18px, 30px);
  --t-h2: clamp(30px, 2.2vw + 16px, 44px);
  --t-h1: clamp(36px, 3vw + 8px, 51px);

  --r-l: 24px;
  --pad: 20px;
  --max: 1200px;
}
@media (min-width: 768px) { :root { --pad: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: var(--t-b); line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html:not(.js) .js-only { display: none; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 60; padding: 12px 16px; border-radius: 8px; background: var(--navy); color: #fff; font-weight: 600; }
.skip:focus { top: 16px; }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: var(--t-h2); line-height: 1.12; font-weight: 800; letter-spacing: -0.025em; }
h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -0.015em; }
/* type details the current copy uses: .pd pulls a closing period / question mark in; .nw keeps words together;
   .hy narrows a hyphen (the face's hyphen is wide: <span class="nw">multi<span class="hy">-</span>step</span>);
   .ap tightens an apostrophe */
.pd { margin-left: -0.08em; }
.nw { white-space: nowrap; }
.hy { display: inline-block; transform: scaleX(.56); margin: 0 -.13em; }
.ap { margin: 0 -.05em; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.close :focus-visible { outline-color: var(--blue-l); }

.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* ---------- 2. BUTTONS, LINKS, PILL ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px; border-radius: 12px; border: 1px solid transparent;
  font: inherit; font-size: var(--t-b); line-height: 1.5; font-weight: 700; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.btn .ic { width: 18px; height: 18px; transition: transform .2s ease; }
.btn:hover .ic { transform: translateX(3px); }
.btn-lg { min-height: 56px; padding: 14px 24px; }
.btn-sm { min-height: 44px; padding: 8px 16px; font-size: var(--t-s); }
.btn-primary { background: linear-gradient(94deg, #122D6B 0%, #1B5BFF 100%); color: #fff; box-shadow: 0 10px 28px rgba(27, 91, 255, .28), inset 0 1px 0 rgba(255,255,255,.16); }
.btn-primary:hover { background: linear-gradient(94deg, #16367F 0%, #2E69FF 100%); transform: translateY(-1px); box-shadow: 0 14px 34px rgba(27, 91, 255, .38), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: #1B2A4D; }
.btn-ghost { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); box-shadow: none; }
.btn-ghost:hover { background: var(--navy); color: #fff; }
/* a long label (the French ones) wraps on a phone instead of running off the screen */
@media (max-width: 599px) { .btn { max-width: 100%; white-space: normal; text-align: center; } }
/* the French booking link ("Réserver l'appel gratuit de 20 minutes", "Apportez-la à un appel gratuit...") wraps on
   a phone: two even lines with the arrow right after the last word, not alone at the button's edge. Scoped by the
   link, so buttons with a leading icon (the contact page's) keep their flex layout. */
@media (max-width: 599px) {
  a.btn-lg[href="/fr/bilan"], .ideas-end a.link[href="/fr/bilan"] { display: inline-block; text-align: center; text-wrap: balance; }
  a.btn-lg[href="/fr/bilan"] .ic, .ideas-end a.link[href="/fr/bilan"] .ic { display: inline-block; margin-left: 8px; vertical-align: -3px; }
}

.link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--blue-d); font-weight: 700; text-decoration: none; }
.link .ic { width: 18px; height: 18px; transition: transform .2s ease; }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.link:hover .ic { transform: translateX(3px); }
.link-quiet { color: var(--navy); }
.link-quiet:hover .ic { transform: translateY(3px); }

/* the section label pill */
.pill {
  display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px;
  font-family: var(--mono); font-size: var(--t-xs); line-height: 1.5; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--blue-d); background: #E9EFFF; border: 1px solid #D5E0FF;
}


/* ---------- 3. NAV + PHONE MENU ----------
   The card-back lockup (the A, the wordmark, AI / AUTOMATION), five links, EN · FR, the "Free 20 min call" button.
   Under 1000px: the burger and the #menu panel (the links, the button, the phone, the other language; site.js:
   aria-expanded, Escape, focus, scroll lock). Per page:
   aria-current="page" on its own link in BOTH lists, and the EN / FR links pointing at its counterpart. */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 24px; min-height: 80px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-right: auto; text-decoration: none; color: var(--navy); }
.brand-mark { width: 46px; height: 46px; fill: currentColor; }
.brand-txt { display: grid; gap: 5px; }
.brand-txt img { width: auto; height: 21px; }
.brand-sub { font-family: var(--mono); font-size: var(--t-xs); line-height: 1; font-weight: 500; letter-spacing: .42em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.nav-links { display: none; gap: 4px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--mute); font-size: var(--t-s); font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--navy); }
.nav-links a[aria-current] { box-shadow: inset 0 -2px 0 var(--navy); border-radius: 0; }
.nav-end { display: flex; align-items: center; gap: 8px; }
.lang { display: flex; align-items: center; font-size: var(--t-s); color: var(--mute); }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--mute); }
.lang a[aria-current] { color: var(--navy); }
.nav .lang, .nav-cta { display: none; }
.burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--navy); position: relative; transition: transform .2s ease, background-color .2s ease; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
/* the panel opens under the bar, inside the sticky header; on a short (landscape) phone it scrolls on its own */
.menu { border-top: 1px solid var(--line); background: #fff; max-height: calc(100vh - 81px); max-height: calc(100dvh - 81px); overflow-y: auto; overscroll-behavior: contain; }
.menu-in { display: grid; gap: 16px; padding-top: 16px; padding-bottom: 24px; }
.menu-links { display: grid; }
.menu-links a { display: flex; align-items: center; min-height: 48px; font-size: var(--t-l); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu-lang a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mute); font-weight: 600; }
/* the phone under the menu button, for people who would rather call (centred under it, the footer's phone icon) */
.menu-call { justify-self: center; margin-top: -8px; }
.menu-call a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--t-s); font-weight: 600; color: var(--navy); text-decoration: none; white-space: nowrap; }
.menu-call a:hover { text-decoration: underline; text-underline-offset: 4px; }
.menu-call .fic { width: 16px; height: 16px; }
/* while the menu is open the page behind does not scroll, and the chat launcher steps aside */
html.menu-open { overflow: hidden; }
html.menu-open .aac-root { visibility: hidden; }
@media (min-width: 1000px) {
  .nav-links, .nav .lang, .nav-cta { display: flex; }
  .burger, .menu { display: none !important; }
}
/* five links (Services added 2026-10): from 1000 to 1199px the bar sits a little closer, so the French one ("Accueil",
   "Réalisations", "À propos", "Appel gratuit 20 min") fits on one line at 1000px without squeezing the logo */
.brand-mark { flex: none; }
@media (min-width: 1000px) and (max-width: 1199px) { .nav-in { gap: 16px; } .nav-links a { padding: 0 6px; } }
/* no JS (or site.js failed): no burger on phones; the bar shows the five links and EN · FR instead (and scrolls
   away with the page, since it is taller) */
@media (max-width: 999px) {
  html:not(.js) .nav { position: relative; }
  html:not(.js) .burger { display: none; }
  html:not(.js) .nav-in { flex-wrap: wrap; column-gap: 12px; row-gap: 0; padding-top: 8px; padding-bottom: 4px; }
  html:not(.js) .nav .lang { display: flex; margin-right: -12px; }
  html:not(.js) .nav-links { display: flex; flex-wrap: wrap; order: 3; width: 100%; margin-left: -12px; }
}
/* small phones: the links stay on one row, EN · FR go under them */
@media (max-width: 379px) {
  html:not(.js) .nav-end { order: 4; }
  html:not(.js) .nav .lang { margin: 0 0 0 -12px; }
  html:not(.js) .nav-links { margin-left: -8px; }
  html:not(.js) .nav-links a { padding: 0 8px; }
}
@media print { .burger, .menu { display: none !important; } }
/* in-page jumps (anchor links, back / forward, Shift+Tab) stop below the sticky bar (80px, its hairline and room
   for the focus ring). A margin on what the page scrolls to, not scroll-padding on html: with that padding Chrome
   counts the sticky bar's own links as hidden under it and scrolls the page each time one takes focus (Tab into
   the nav, Escape out of the phone menu). Jump targets with their own landing set it in their own rule. */
main, main *, footer * { scroll-margin-top: 88px; }


/* ---------- 4. HERO (white, like the card back) ---------- */
.hero { position: relative; overflow: clip; padding: 56px 0 88px; background: #fff; }
.hero::before { /* faint dot grid, only behind the photo side */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(16, 27, 51, .08) 1px, transparent 1.4px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 34% 62% at 78% 48%, #000 10%, transparent 72%);
          mask-image: radial-gradient(ellipse 34% 62% at 78% 48%, #000 10%, transparent 72%);
}
/* the faint A: traced from the logo mark (#amark), very pale, feet on the hero's floor, apex running off the top.
   Shared: .big-a (inner pages place it with .page-a, section 11) */
.big-a { position: absolute; z-index: 0; pointer-events: none; height: auto; max-width: none; fill: #F2F4F9; }
.hero-a { width: 900px; left: calc(50% - 860px); bottom: -9px; } /* the mark's feet sit 1.5 units above its box */
.hero-a-m { display: none; }
.hero-in { position: relative; z-index: 1; display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) { .hero-in { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; } }
.hero h1 { max-width: none; }
/* the SEO words stay inside the H1, as the small card-style label above the question */
.hero-kicker { display: block; margin-bottom: 22px; font-family: var(--mono); font-size: var(--t-xs); line-height: 1.5;
  font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--mute); }
@media (max-width: 600px) { .hero-kicker { letter-spacing: .2em; margin-bottom: 16px; } }
.h1-blue { display: block; color: var(--blue-d); }
.lede { margin-top: 28px; max-width: 34em; font-size: var(--t-l); line-height: 1.6; color: var(--navy); text-wrap: pretty; }
.owner { margin-top: 12px; font-size: var(--t-b); line-height: 1.5; color: var(--slate); }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 36px; }

/* the photo: a tall frame that only cuts the chair and legs (bottom ~14%), so his whole right arm shows */
.hero-vis { position: relative; width: min(100%, 440px); margin: 0 auto; }
@media (min-width: 960px) { .hero-vis { width: clamp(330px, 31.5vw, 452px); margin: 0 44px 0 0; } }
.frame {
  position: relative; z-index: 1; aspect-ratio: 856 / 990; overflow: hidden; border-radius: var(--r-l);
  background: var(--tint); border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(16, 27, 51, .16), 0 2px 6px rgba(16, 27, 51, .06);
}
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.plate {
  position: absolute; right: 16px; bottom: 16px; display: grid; gap: 4px; padding: 12px 16px;
  border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 8px 24px rgba(16, 27, 51, .18);
}
.plate-name { font-size: var(--t-s); line-height: 1.2; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--navy); }
.plate-role { font-family: var(--mono); font-size: var(--t-xs); line-height: 1.2; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--mute); }

/* two notification chips on the right side of the photo, clear of his arm (the gentle bob is in section 13) */
.float {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px;
  border-radius: 16px; background: rgba(255,255,255,.96); border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(16, 27, 51, .16);
}
.float-b { right: -44px; top: 7%; }
.float-a { right: -44px; top: 36%; }
.float-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--navy); color: #fff; flex: none; }
.float-ic-l { background: #E9EFFF; color: var(--blue-d); }
.float-txt { display: grid; }
.float-txt strong { font-size: var(--t-s); line-height: 1.4; font-weight: 700; color: var(--navy); white-space: nowrap; }
.float-txt span { font-size: var(--t-xs); line-height: 1.5; color: var(--mute); white-space: nowrap; }
/* small laptops and landscape tablets: one chip is enough on a smaller photo, the IT one (as on phones) */
@media (min-width: 960px) and (max-width: 1199px) {
  .float-a { display: none; }
  .float-b { top: 30%; }
}


/* ---------- 5. SECTIONS ----------
   The rhythm: white and tint (#F2F4F9) bands in turn, centred heads (pill, h2, optional sub line). Inner pages:
   <section class="sec"> on white, <section class="sec sec-tint"> on the tint. */
.sec { padding: 88px 0; }
.sec-tint { background: var(--tint); }
.sec-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 48px; }
.sec-head h2 { max-width: 20em; }
.sec-sub { font-size: var(--t-l); line-height: 1.5; color: var(--slate); }
@media (max-width: 767px) { .sec { padding: 64px 0; } .sec-head { margin-bottom: 32px; } }


/* ---------- 5b. TWO WAYS (home, white): done for you (navy, wider) or AI training (white). ---------- */
.ways-grid { display: grid; gap: 16px; max-width: 1080px; margin: 0 auto; }
@media (min-width: 860px) { .ways-grid { grid-template-columns: 3fr 2fr; gap: 24px; } }
.way { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 36px 32px 32px; border-radius: 20px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(16, 27, 51, .05); }
.way-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tint); color: var(--navy); }
.way h3 { font-size: clamp(22px, .6vw + 18px, 26px); line-height: 1.3; color: var(--navy); }
.way p { margin-bottom: 10px; font-size: var(--t-l); line-height: 1.6; color: var(--slate); text-wrap: pretty; max-width: 30em; }
.way .btn, .way .link { margin-top: auto; }
.way-main { background: var(--navy); border-color: var(--navy); }
.way-main .way-ic { background: rgba(255, 255, 255, .1); color: #fff; }
.way-main h3 { color: #fff; }
.way-main p { color: #C9D3EA; }
.way-main .btn-ghost { border-color: #fff; }
@media (max-width: 599px) { .way { padding: 24px 20px; } .way h3 { font-size: 20px; } .way p { font-size: var(--t-b); } .way .btn { width: 100%; } }


/* ---------- 6. IDEAS: the "What eats your time?" picker and its idea cards ----------
   JS off: the picker stays hidden and every card is stacked, each with its own h3. site.js turns the row of .pick
   buttons into a tablist and adds .is-tabs to .idea-stack: one card at a time. The map inside .slot is ideas.css. */
.ideas { padding: 104px 0; background: var(--tint); }
/* a jump to #ideas (the hero's "See what's possible") lands with the pill 104px from the top, just under the bar */
.ideas { scroll-margin-top: 0; }
.ideas .sec-head { margin-bottom: 32px; }
.picker { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 24px; }
@media (min-width: 701px) { .picker { max-width: 820px; } } /* five tabs: a centred wrap, the second row in the middle */
@media (min-width: 960px) { .picker { gap: 10px; } }
html:not(.js) .picker { display: none !important; }
.pick {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid #CDD5E6; background: #fff; color: var(--navy); cursor: pointer;
  font: inherit; font-size: var(--t-b); line-height: 1.5; font-weight: 600; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pick .ic { width: 18px; height: 18px; color: var(--blue-d); transition: color .2s ease; }
/* the line under the heading says how the picker works, in bold: "Tap one below." on touch screens, "Click one
   below." with a mouse. "Pick one." is the fallback for anything else; JS off shows none of them (.js-only). */
.pick-tap, .pick-click { display: none; color: var(--navy); font-weight: 700; }
@media (pointer: coarse) { .sec-sub .pick-one { display: none; } .sec-sub .pick-tap { display: inline; } }
@media (pointer: fine) { .sec-sub .pick-one { display: none; } .sec-sub .pick-click { display: inline; } }
.pick:hover { border-color: var(--navy); }
.pick[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 10px 24px rgba(16, 27, 51, .22); }
.pick[aria-selected="true"] .ic { color: var(--blue-l); }

.idea-stack { display: grid; gap: 24px; }
.idea {
  display: grid; overflow: hidden; border-radius: 28px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(16, 27, 51, .08);
}
/* tabs on (site.js): the cards share one grid cell, so the section keeps the tallest card's height */
html.js .idea-stack.is-tabs { gap: 0; }
html.js .is-tabs > .idea { grid-area: 1 / 1; }
html.js .is-tabs > .idea[data-off] { visibility: hidden; opacity: 0; transform: translateY(8px); }
html.js .is-tabs .idea-name { display: none; }
/* from 1200px the map takes the wider side; below that the card stacks, words first, then the map */
@media (min-width: 1200px) { .idea { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@media (max-width: 1199px) {
  .idea { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "slot"; }
  .idea-body { grid-area: body; }
  .slot { grid-area: slot; }
  html.js .is-tabs > .idea { grid-area: auto; }
  html.js .is-tabs > .idea[data-off] { display: none; }
}

/* the words: the moment, the what-if, the link to the real project */
.idea-body { display: flex; flex-direction: column; justify-content: center; padding: 48px 40px 40px 48px; }
@media (min-width: 1200px) { .idea-body { padding: 48px 32px 40px 48px; } }
@media (max-width: 1199px) { .idea-body { padding: 40px 40px 32px; } }
.idea-name { align-self: flex-start; margin-bottom: 16px; font-size: var(--t-h3); line-height: 1.3; font-weight: 800; color: var(--navy); }
.moment { font-size: var(--t-h3); line-height: 1.4; font-weight: 500; color: var(--slate); text-wrap: pretty; }
.whatif { margin-top: 12px; font-size: var(--t-q); line-height: 1.22; font-weight: 800; letter-spacing: -0.025em; color: var(--navy); text-wrap: balance; }
.whatif span { color: var(--blue-d); }
.idea-src { margin-top: 12px; }
.idea-src .link { font-size: var(--t-b); }

/* the map's panel (its look is ideas.css .slot-line) */
.slot { position: relative; overflow: hidden; }
@media (min-width: 1200px) { .slot { margin: 12px 12px 12px 0; border-radius: 20px; } }

.ideas-end { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; margin-top: 40px; text-align: center; }
.ideas-end p { font-size: var(--t-b); font-weight: 500; color: var(--slate); }
.ideas-end p .link { font-size: var(--t-b); }


/* ---------- 7. REVIEWS (white): a scroll-snap row; site.js adds the arrows, the dots and the arrow keys ---------- */
.reviews { padding: 96px 0 72px; background: #fff; }
@media (max-width: 767px) { .reviews { padding: 64px 0 48px; } }
.rev-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 4px 6px 28px; margin: 0 -6px -20px; } /* the bottom padding gives the cards' shadow room inside the track */
.rev-track::-webkit-scrollbar { display: none; }
.rev { position: relative; flex: 0 0 86%; scroll-snap-align: start; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(16, 27, 51, .05); }
@media (min-width: 700px) { .rev { flex-basis: calc((100% - 16px) / 2); } .rev-wide { flex-basis: 100%; } }
@media (min-width: 1024px) { .rev-track { gap: 24px; } .rev { flex-basis: calc((100% - 48px) / 3); padding: 32px 28px 28px; } .rev-wide { flex-basis: calc((100% - 48px) / 3 * 2 + 24px); } }
.stars svg { width: 96px; height: 18px; fill: var(--star); }
.rev::after { content: ""; position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231543C9'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") no-repeat center / contain; opacity: .1; }
.rev blockquote { flex: 1; margin-top: 16px; }
.rev blockquote p { font-size: var(--t-l); line-height: 1.55; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.rev-wide blockquote p { font-size: var(--t-b); line-height: 1.6; }
/* short reviews read as pull quotes, so no card looks empty next to a long one */
.rev-short blockquote p { font-size: var(--t-h3); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
.rev-by { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--navy); color: #fff; font-size: var(--t-s); font-weight: 700; }
.who { display: grid; min-width: 0; }
.name { font-size: var(--t-b); line-height: 1.4; font-weight: 700; }
.role { font-size: var(--t-s); line-height: 1.5; color: var(--mute); }
.role-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -10px 0; width: fit-content; color: var(--blue-d); font-weight: 600; text-decoration: none; }
.role-link:hover { text-decoration: underline; }
.role-link .ic { width: 14px; height: 14px; }
/* two or three cards side by side: where one role wraps to two lines (the French ones from 700px, the English
   "Owner, Montreal wellness business" under 1200px), every footer takes the two-line height so the dividers
   line up across the row */
@media (min-width: 700px) { .rev-by:lang(fr) { min-height: 85px; } }
@media (min-width: 700px) and (max-width: 1199px) { .rev-by { min-height: 85px; } }
/* under the cards: previous arrow, the dots, next arrow (JS only) */
.rev-bottom { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.rev-nav { display: flex; gap: 8px; }
.rev-nav:not([hidden]) { display: contents; }
html:not(.js) .rev-nav, html:not(.js) .rev-dots { display: none !important; }
.rev-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid #CDD5E6; background: #fff; color: var(--navy); cursor: pointer; transition: background-color .2s ease, opacity .2s ease, border-color .2s ease; }
.rev-btn:hover { border-color: var(--navy); }
.rev-btn:disabled { opacity: .4; cursor: default; }
.rev-btn[data-dir="-1"] { order: 0; }
.rev-btn[data-dir="1"] { order: 2; }
.rev-dots { display: flex; justify-content: center; order: 1; }
.rev-dots button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.rev-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 8px; background: #7482A2; transition: width .25s ease, background-color .25s ease; }
.rev-dots button[aria-current="true"]::before { width: 24px; background: var(--navy); }
/* small phones: two arrows + the dots don't fit in one row; phones swipe, so the dots stay and the arrows go */
@media (max-width: 480px) { .rev-bottom .rev-btn { display: none; } }


/* ---------- 8. HOW IT WORKS (tint): three numerals joined by a plain navy line ---------- */
.how { background: var(--tint); padding: 88px 0 96px; }
@media (max-width: 767px) { .how { padding: 64px 0 72px; } }
.steps { position: relative; display: grid; gap: 28px; }
.step { position: relative; display: grid; align-content: start; }
.step-n { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 2px solid var(--navy); font-family: var(--mono); font-size: var(--t-l); font-weight: 500; letter-spacing: .04em; color: var(--navy); position: relative; z-index: 1; }
.step:last-child .step-n { background: var(--navy); color: #fff; }
.step h3 { margin-top: 20px; font-size: var(--t-h3); }
.step p { margin-top: 6px; color: var(--slate); font-size: var(--t-b); line-height: 1.55; max-width: 22em; }
.step:not(:last-child)::after { content: ""; position: absolute; background: var(--navy); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .step { justify-items: center; text-align: center; }
  .step p { margin-inline: auto; }
  .step:not(:last-child)::after { left: calc(50% + 32px); top: 31px; width: calc(100% - 24px); height: 2px; }
}
@media (max-width: 899px) {
  .steps { padding-left: 88px; }
  .step-n { position: absolute; left: -88px; top: -4px; }
  .step h3 { margin-top: 12px; }
  .step:not(:last-child)::after { left: -57px; top: 60px; width: 2px; height: calc(100% - 36px); }
}


/* ---------- 9. CLOSING BAND: the card front (navy) ----------
   The mark, AI / AUTOMATION, "Show us one task.", one sentence, the button, then "When you call, you get Luciano."
   with his avatar and the phone number. Same markup on every page that has a closing call to action. */
.close { position: relative; overflow: hidden; padding: 88px 0 72px; background: var(--navy); color: #fff; text-align: center; }
.close-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 40% 55% at 50% 100%, rgba(27, 91, 255, .22), transparent 72%); }
.close-in { position: relative; display: flex; flex-direction: column; align-items: center; }
.close-mark { width: 44px; height: 44px; fill: #fff; }
.close-sub { margin-top: 18px; font-family: var(--mono); font-size: var(--t-xs); line-height: 1.5; font-weight: 500; letter-spacing: .42em; text-transform: uppercase; color: var(--peri); padding-left: .5em; }
.close-h { margin-top: 12px; font-size: var(--t-h2); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.close-tag { margin-top: 16px; font-size: var(--t-l); line-height: 1.6; color: var(--peri-2); max-width: 34em; }
.close-in .btn { margin-top: 32px; }
.close-who { display: flex; align-items: center; gap: 12px; margin-top: 44px; text-align: left; }
.close-who img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--navy), 0 0 0 4px var(--peri); }
.close-who p { display: grid; font-size: var(--t-b); line-height: 1.4; }
.close-who strong { font-weight: 700; text-wrap: balance; }
.close-who a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -8px 0; color: var(--peri-2); font-weight: 600; text-decoration: none; }
.close-who a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.close-who a .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; }
@media (max-width: 700px) {
  .close { padding: 64px 0 56px; }
  .close-mark { width: 40px; height: 40px; }
  .close-tag { font-size: var(--t-b); }
  .close-who { margin-top: 36px; }
}


/* ---------- 10. FOOTER: the compact card back (footer.foot.fc) ----------
   Three quiet rows: logo left and contact right; links left and socials right; one small legal line with EN · FR
   (which sit exactly under the LinkedIn and Instagram icons). Phones: every row left-aligned. */
.foot { background: #fff; color: var(--ink); font-size: var(--t-s); line-height: 1.5; }
.fc { padding: 44px 0 20px; }
.brand-foot { margin-right: 0; }
.fc .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.fc .brand-mark { width: 38px; height: 38px; }
.fc .brand-txt img { height: 17px; }
.fc .brand-sub { font-size: 10px; }
.fic { width: 20px; height: 20px; fill: var(--navy); flex: none; }
.fc-contact { display: flex; flex-wrap: wrap; gap: 0 24px; }
.fc-contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--t-s); font-weight: 500; color: var(--ink); text-decoration: none; }
.fc-contact a:hover, .fc-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fc-contact .fic { width: 16px; height: 16px; }
/* the divider runs the content width only */
.fc-mid { position: relative; margin-top: 20px; padding-top: 12px; }
.fc-mid::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--line); }
.fc-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.fc-links a { position: relative; display: inline-flex; align-items: center; min-height: 40px; font-size: var(--t-s); color: var(--ink); text-decoration: none; }
.fc-social { display: flex; gap: 2px; margin-right: -12px; }
.fc-social a { position: relative; display: grid; place-items: center; width: 40px; height: 40px; color: var(--mute); border-radius: 8px; }
.fc-social a:hover { color: var(--navy); background: var(--tint); }
.fc-social .ic { width: 18px; height: 18px; }
.fc-bot { margin-top: 8px; font-size: var(--t-xs); color: var(--mute); }
.fc-bot .lang { display: flex; align-items: center; gap: 6px; margin-right: 0; }
.fc-bot .lang a { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 4px; color: var(--mute); text-decoration: none; font-weight: 600; }
.fc-bot .lang a[aria-current="true"] { color: var(--navy); }
/* the compact rows draw 36-40px; an invisible edge brings every tap target to 44px without moving anything
   (it stays inside the gaps, so no two targets overlap) */
.fc-links a::after { content: ""; position: absolute; left: -8px; right: -8px; top: -2px; bottom: -2px; }
.fc-social a::after { content: ""; position: absolute; left: -2px; right: -2px; top: -2px; bottom: -2px; }
.fc-bot .lang a::after { content: ""; position: absolute; left: -2px; right: -2px; top: -4px; bottom: -4px; }
@media (min-width: 701px) {
  .fc-bot .lang { position: relative; gap: 2px; margin-right: -12px; }
  .fc-bot .lang a { width: 40px; min-width: 0; justify-content: center; padding: 0; }
  .fc-bot .lang > span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}
@media (max-width: 700px) {
  .fc .wrap { justify-content: flex-start; }
  .fc .fc-bot { flex-direction: column; align-items: flex-start; gap: 0; text-align: left; }
  .fc-links { gap: 0 18px; }
  .fc-social { margin-right: 0; margin-left: -10px; }
}


/* ---------- 11. INNER PAGES: the page hero ----------
   <section class="page-hero" aria-labelledby="page-title">: a white band with the pill, the H1 and the lede, centred,
   and the faint A (its one appearance on the page) standing on the right, feet on the band's floor. Tight, like the
   homepage: the first section follows straight after (tint or white). */
.page-hero { position: relative; overflow: clip; padding: 64px 0 72px; background: #fff; text-align: center; }
.page-hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.page-hero h1 { margin-top: 20px; max-width: 18em; }
.page-hero .lede { margin-top: 20px; max-width: 36em; color: var(--slate); }
.page-a { width: 560px; right: calc(50% - 800px); bottom: -6px; }
@media (max-width: 1199px) { .page-a { width: 480px; right: -120px; } }
@media (max-width: 767px) {
  .page-hero { padding: 40px 0 48px; }
  .page-hero h1 { margin-top: 16px; }
  .page-hero .lede { margin-top: 16px; font-size: var(--t-b); }
  .page-a { width: 320px; right: -96px; }
}
@media (max-width: 599px) { .page-hero h1 { font-size: 34px; line-height: 1.1; } }


/* ---------- 12. TABLET AND PHONE ---------- */
@media (max-width: 959px) {
  .hero { padding: 32px 0 72px; }
  .hero-in { gap: 40px; }
  .hero-a { display: none; }
  .hero-lead { position: relative; }
  .hero-a-m { display: block; z-index: -1; width: 400px; left: -8px; bottom: -40px; }
  .hero-vis { width: min(100%, 460px); margin: 0 auto; }
  /* one chip on tablet and phone: the IT one, so the first screen is not only about calls */
  .float-a { display: none; }
  .float-b { right: 12px; top: 34%; }
}
@media (max-width: 599px) {
  .hero h1 { font-size: 36px; line-height: 1.08; }
  .lede { margin-top: 20px; font-size: var(--t-b); }
  .owner { font-size: var(--t-s); }
  .hero-act { flex-direction: column; align-items: stretch; margin-top: 28px; gap: 8px; }
  .hero-act .btn { width: 100%; }
  .hero-act .link { justify-content: center; }
  .hero-in { gap: 32px; }
  .float { padding: 8px 12px 8px 8px; gap: 8px; border-radius: 12px; }
  .float-ic { width: 32px; height: 32px; border-radius: 10px; }
  .float-ic .ic { width: 16px; height: 16px; }
  .plate { right: 10px; bottom: 10px; padding: 8px 12px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-txt img { height: 17px; }
  .brand-sub { letter-spacing: .3em; }
  .ideas { padding: 72px 0; scroll-margin-top: 32px; }
  /* phone: all five choices show at once, as a list (a swipe row hid four of them). The picked one says where its
     example is (a down chevron); the others carry a right chevron so they read as tappable. */
  .picker { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; margin: 0 0 20px; }
  .pick { width: 100%; justify-content: flex-start; gap: 10px; min-height: 52px; padding: 12px 16px; border-radius: 14px;
    font-size: var(--t-b); line-height: 1.3; white-space: normal; text-align: left; }
  .pick .ic { flex: none; width: 18px; height: 18px; }
  .pick::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 0 0 auto; border: solid #8C97AE; border-width: 0 2px 2px 0;
    transform: rotate(-45deg); transition: transform .2s ease, border-color .2s ease; }
  .pick[aria-selected="true"]::after { border-color: var(--blue-l); transform: translateY(-2px) rotate(45deg); }
  .idea { border-radius: 20px; }
  .idea-body { padding: 24px 20px 20px; }
  .moment { font-size: var(--t-l); }
  .whatif { margin-top: 8px; }
  .idea-src { margin-top: 4px; }
  .rev-track { scroll-padding-inline: var(--pad); gap: 12px; }
  .rev .stars { margin-top: auto; }
  .rev blockquote { flex: 0 0 auto; margin-bottom: auto; }
  .rev { flex-basis: 88%; padding: 24px 20px 20px; }
  .rev-wide blockquote p { font-size: var(--t-s); }
}
@media (max-width: 359px) {
  .hero h1 { font-size: 32px; }
  .pick { padding: 12px 14px; font-size: 15px; } /* keeps most labels on one line */
}


/* ---------- 13. MOTION ----------
   Only with html.js.aa-m (the head adds aa-m unless the browser is automated) and no reduced-motion preference.
   Without it every element sits still in its final place. The ideas map's motion is in ideas.css. */
@media (prefers-reduced-motion: no-preference) {
  html.js.aa-m .float { animation: float 6s ease-in-out infinite; }
  html.js.aa-m .float-b { animation-delay: -3s; }
  html.js.aa-m .is-tabs > .idea { transition: opacity .35s ease, transform .35s ease; }
}
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* his 'a lot of grey here': the faint A is the same tint as the ideas band, so its feet ran into the band as one grey mass.
   The A now ends 48px above the hero floor (a white strip separates them) and both paddings are tighter. */
@media (min-width: 900px) { .hero-a { bottom: 48px; } }
.hero { padding-bottom: 72px; }
.ideas { padding-top: 80px; }
@media (max-width: 767px) { .ideas { padding-top: 64px; } }

/* one line under the ideas (his ask): the reach, then the case studies button */
.ideas-end .ideas-reach { max-width: 38em; font-size: var(--t-l); line-height: 1.55; font-weight: 600; color: var(--navy); text-wrap: balance; }
.ideas-end .ideas-reach span { color: var(--blue-d); }
.ideas-end .ideas-reach + .btn { margin-top: 8px; }
@media (max-width: 767px) { .ideas-end .ideas-reach { font-size: var(--t-b); } }

/* AI COMMAND CENTER section (homepage, between the ideas and the reviews) */
.cc { position: relative; overflow: clip; padding: 96px 0; background: var(--navy); color: #fff; }
.cc-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 45% 60% at 75% 50%, rgba(27, 91, 255, .22), transparent 72%); }
.cc-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 72px; align-items: center; }
.cc h2 { color: #fff; } /* no pill above it: the chat mock's own header already says "AI command center" */
.cc-lede { margin-top: 16px; max-width: 30em; font-size: var(--t-l); line-height: 1.6; color: var(--peri-2); }
.cc-tag { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 7px 16px 7px 12px; border-radius: 999px; font-size: var(--t-s); font-weight: 600;
  color: #DCE4F5; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); }
.cc-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-l); }
.cc-link { display: flex; width: max-content; margin-top: 12px; color: var(--blue-l); }
.cc-chat { border-radius: 20px; background: #fff; color: var(--navy); overflow: hidden; box-shadow: 0 30px 60px rgba(3, 8, 20, .45); }
.cc-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.cc-av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); }
.cc-av svg { width: 20px; height: 20px; fill: #fff; }
.cc-name { display: grid; line-height: 1.3; }
.cc-name b { font-size: var(--t-s); }
.cc-name small { font-size: var(--t-xs); color: var(--blue-d); }
.cc-body { display: grid; gap: 10px; padding: 18px; background: #F7F9FC; }
.cc-msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: var(--t-s); line-height: 1.45; }
.cc-me { justify-self: end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.cc-bot { justify-self: start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.cc-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; font-size: var(--t-s); line-height: 1.45;
  background: #EEF3FF; border: 1px solid #D5E0FB; color: var(--navy); }
.cc-alert-ic { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #1B5BFF; color: #fff; font-weight: 800; font-size: 12px; }
.cc-compose { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 18px; border-top: 1px solid var(--line); color: var(--mute); font-size: var(--t-s); }
.cc-send { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(94deg, #122D6B, #1B5BFF); color: #fff; }
.cc-send .ic { width: 16px; height: 16px; }
@media (max-width: 899px) {
  .cc { padding: 64px 0; }
  .cc-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cc-lede { font-size: var(--t-b); }
}
.cc-where { margin-top: 24px; }
.cc-where p { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--peri); }
.cc-where ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 0; list-style: none; }
.cc-where li { padding: 6px 14px; border-radius: 999px; font-size: var(--t-s); font-weight: 600; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); }
.cc-where + .cc-tag { margin-top: 24px; }
/* the "Built for" tag sits above the chat (his call), like the tags on the ideas panels */
.cc-side { display: grid; justify-items: start; gap: 14px; }
.cc-side .cc-tag { margin-top: 0; }
.cc-side .cc-chat { width: 100%; }
.cc-where + .cc-link, .cc-copy .cc-link { margin-top: 28px; }
/* same size as the "Built for" tags on the ideas panels */
.cc-side .cc-tag { gap: 10px; padding: 8px 18px 8px 14px; font-size: var(--t-b); font-weight: 600; }
.cc-side .cc-tag::before { width: 8px; height: 8px; }
@media (max-width: 700px) { .cc-side .cc-tag { padding: 6px 14px 6px 12px; font-size: var(--t-s); } }
.cc-side .cc-tag { line-height: 1.5; }
/* one quiet line under the hero buttons: what the free call gives you (2026-09-28) */
.hero-note { margin-top: 18px; max-width: 34em; font-size: var(--t-s); line-height: 1.55; color: var(--slate); }
@media (max-width: 767px) { .hero-note { margin-top: 14px; text-align: center; margin-inline: auto; } }
.hero-note { text-wrap: balance; }