@import url("site-grid.css");
/* Genie site · inner pages (everything except Homepage and Genie Playable).
   One quiet system, matched to the homepage: Cream ground, Jakarta 300/400, Instrument Serif
   italic for the one payoff word, DM Mono labels, Ink pills. No dot grids, no dashed frames,
   no coloured card walls. Images sit in warm frames; type does the rest. */
.gi{--ink:#3C084D;--plum:#845AA7;--lilac:#CFB3EF;--tint:#F3EBFB;--butter:#FFF4AB;--peach:#FF9C5B;--cream:#FEF9F3;--warm:#F3EEE8;--line:rgba(60,8,77,.12);--muted:rgba(60,8,77,.72);
  --sans:var(--font-sans,'Plus Jakarta Sans',system-ui,sans-serif);--serif:var(--font-serif,'Instrument Serif',Georgia,serif);--mono:var(--font-mono,'DM Mono',ui-monospace,monospace);--ease:cubic-bezier(.16,1,.3,1);
  font-family:var(--sans);font-weight:400;color:var(--ink);background:var(--cream)}
.gi *,.gi *::before,.gi *::after{box-sizing:border-box}
.gi h1,.gi h2,.gi h3,.gi h4,.gi p,.gi figure,.gi blockquote,.gi ul,.gi ol{margin:0}
.gi a{color:inherit}
.gi .wrap{max-width:1280px;margin:0 auto;padding:0 56px}
.gi .narrow{max-width:880px;margin:0 auto;padding:0 56px}
.gi em,.gi .it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
.gi .plum{color:var(--plum)}

/* labels and actions */
.gi .tag{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--lilac);border-radius:999px;font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap}
.gi .label{font:400 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--plum)}
.gi .num{font:400 13px/1 var(--mono);letter-spacing:.06em;color:var(--plum)}
.gi .btn{display:inline-flex;align-items:center;gap:8px;font:500 15px/1 var(--sans);text-decoration:none;padding:15px 26px;border-radius:999px;background:var(--ink);color:var(--cream);border:1px solid var(--ink);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.gi .btn:hover{background:#2A0536;color:var(--cream)}
.gi .btn.ghost{background:transparent;color:var(--ink)}
.gi .btn.ghost:hover{background:var(--ink);color:var(--cream)}
.gi .link{font:500 15px/1 var(--sans);color:var(--ink);text-decoration:none;display:inline-flex;gap:6px;align-items:center;transition:color .2s}
.gi .link:hover{color:var(--plum)}
.gi .ctas{display:flex;flex-wrap:wrap;align-items:center;gap:24px}

/* hero */
.gi-hero{padding:120px 0 72px;text-align:center}
.gi-hero .wrap{display:flex;flex-direction:column;align-items:center}
.gi-hero h1{margin-top:36px;font-weight:300;font-size:clamp(44px,6.5vw,100px);line-height:1.08;letter-spacing:-.035em;max-width:14ch;text-wrap:balance}
.gi-hero .sub{margin-top:32px;font-size:20px;line-height:1.5;color:var(--muted);max-width:56ch;text-wrap:pretty}
.gi-hero .ctas{margin-top:48px;justify-content:center}
.gi-hero .meta{margin-top:28px}
.gi-hero.left{text-align:left}
.gi-hero.left .wrap{align-items:flex-start}

/* media frames */
.gi-frame{position:relative;overflow:hidden;border-radius:28px;background:var(--warm)}
.gi-frame.tint{background:var(--tint)}
.gi-frame.white{background:#fff;box-shadow:0 1px 2px rgba(60,8,77,.05),0 30px 60px -36px rgba(60,8,77,.35)}
.gi-frame > image-slot,.gi-frame > img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.gi-frame > image-slot::part(image){min-width:calc(100% + 2px);min-height:calc(100% + 2px)}
.gi-frame > image-slot::part(frame){background:transparent}
.gi-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(60,8,77,.06);pointer-events:none}
.gi-frame.r16x9{aspect-ratio:16/9}.gi-frame.r21x9{aspect-ratio:21/9}.gi-frame.r4x3{aspect-ratio:4/3}.gi-frame.r1x1{aspect-ratio:1/1}.gi-frame.r4x5{aspect-ratio:4/5}.gi-frame.r3x2{aspect-ratio:3/2}
.gi-showcase{padding:0 0 40px}
.gi-showcase .caption{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:20px;font-size:15px;color:var(--muted)}

/* sections */
.gi-sec{padding:128px 0}
.gi-sec.tight{padding:88px 0}
.gi-sec.warm{background:var(--warm)}
.gi-sec.white{background:#fff}
.gi-sec.fade{background:linear-gradient(180deg,var(--cream) 0%,#fff 40%,var(--cream) 100%)}
.gi-head{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:end;margin-bottom:72px}
.gi-head.solo{grid-template-columns:1fr;margin-bottom:56px}
.gi-head .label{display:block;margin-bottom:20px}
.gi-head h2,.gi h2.big{font-weight:400;font-size:clamp(40px,4.6vw,68px);line-height:1.1;letter-spacing:-.035em;text-wrap:balance}
.gi-head p{font-size:18px;line-height:1.55;color:var(--muted);max-width:44ch;text-wrap:pretty}
.gi-head .ctas{margin-top:24px}
.gi h3.title{font-weight:400;font-size:clamp(28px,2.6vw,40px);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.gi p.lead{font-size:18px;line-height:1.55;color:var(--muted);text-wrap:pretty}

/* alternating feature rows (Wix / monday product rows) */
.gi-rows{display:flex;flex-direction:column;gap:120px}
.gi-row{display:grid;grid-template-columns:7fr 5fr;gap:80px;align-items:center}
.gi-row:nth-child(even){grid-template-columns:5fr 7fr}
.gi-row:nth-child(even) .gi-frame{order:2}
.gi-row .copy{display:flex;flex-direction:column;gap:18px;max-width:440px}
.gi-row .copy .use{font-size:15px;line-height:1.5;color:var(--plum);padding-top:18px;border-top:1px solid var(--line)}
.gi-row .copy ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.gi-row .copy li{font-size:16px;line-height:1.45;padding-left:22px;position:relative}
.gi-row .copy li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--plum)}

/* card grid (monday template cards) */
.gi-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
.gi-cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.gi-cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.gi-card{display:flex;flex-direction:column;gap:20px;text-decoration:none;color:var(--ink)}
.gi-card .gi-frame{transition:transform .5s var(--ease)}
a.gi-card:hover .gi-frame{transform:translateY(-4px)}
.gi-card h3{font-weight:400;font-size:24px;line-height:1.2;letter-spacing:-.015em}
.gi-card p{font-size:16px;line-height:1.5;color:var(--muted);margin-top:8px;text-wrap:pretty}
.gi-card .label{margin-bottom:10px;display:block}

/* hairline list (replaces coloured "More in" blocks) */
.gi-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--line)}
.gi-list.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.gi-list > *{padding:28px 0 32px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink)}
.gi-list h4{font-weight:400;font-size:20px;line-height:1.25;letter-spacing:-.01em}
.gi-list p{font-size:15px;line-height:1.5;color:var(--muted)}

/* chips */
.gi-chips{display:flex;flex-wrap:wrap;gap:8px}
.gi-chip{font:400 15px/1 var(--sans);padding:12px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.gi-chip.on,.gi-chip:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* quote and stats (same cards as homepage customers) */
.gi-quote{background:var(--ink);color:var(--cream);border-radius:28px;padding:64px;display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:end}
.gi-quote blockquote{font-weight:300;font-size:clamp(26px,2.6vw,38px);line-height:1.3;letter-spacing:-.015em;text-wrap:pretty}
.gi-quote blockquote em{color:var(--lilac)}
.gi-quote cite{display:block;margin-top:28px;font-style:normal;font-size:15px;color:rgba(254,249,243,.75)}
.gi-quote .label{color:var(--lilac)}
.gi-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.gi-stat{background:var(--butter);border-radius:24px;padding:32px;min-height:260px;display:flex;flex-direction:column;justify-content:space-between}
.gi-stat .big{font-weight:300;font-size:clamp(52px,5vw,76px);line-height:1;letter-spacing:-.035em}
.gi-stat p{font-size:16px;line-height:1.4;margin-top:10px}

/* FAQ */
.gi-faq{display:grid;grid-template-columns:1fr 1.5fr;gap:64px;align-items:start}
.gi-faq h2{font-weight:400;font-size:clamp(40px,4.2vw,60px);line-height:1;letter-spacing:-.035em}
.gi-faq .items{border-top:1px solid var(--line)}
.gi-faq .item{border-bottom:1px solid var(--line)}
.gi-faq button{width:100%;border:0;background:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;text-align:left;color:var(--ink);font:400 18px/1.35 var(--sans);letter-spacing:-.005em}
.gi-faq .pm{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:transform .3s var(--ease),background .3s}
.gi-faq .item.open .pm{transform:rotate(45deg)}
.gi-faq .ans{padding:0 48px 24px 0;font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty}

/* closing band: warm, light, centred (same idea as the Genie Playable closing) */
.gi-closing{position:relative;overflow:hidden;padding:150px 0 140px;text-align:center;background:var(--cream)}
.gi-closing::before{content:"";position:absolute;inset:-20%;pointer-events:none;filter:blur(60px);
  background:radial-gradient(40% 50% at 22% 70%,rgba(255,244,171,.85),transparent 70%),radial-gradient(36% 46% at 78% 62%,rgba(255,156,91,.22),transparent 70%),radial-gradient(30% 40% at 88% 12%,rgba(207,179,239,.28),transparent 70%)}
.gi-closing .wrap{position:relative}
.gi-closing h2{font-weight:400;font-size:clamp(44px,6vw,88px);line-height:1.08;letter-spacing:-.035em;max-width:14ch;margin:0 auto;text-wrap:balance}
.gi-closing .ctas{justify-content:center;margin-top:44px}
.gi-closing small{display:block;margin-top:20px;font-size:14px;color:var(--plum)}

/* sticky sub-nav pills (tools, learn) */
.gi-subnav{position:sticky;top:73px;z-index:20;background:rgba(254,249,243,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.gi-subnav .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:12px;padding-bottom:12px;overflow-x:auto;scrollbar-width:none}
.gi-subnav .wrap::-webkit-scrollbar{display:none}
.gi-subnav nav{display:flex;gap:4px;flex:none}
.gi-subnav nav a{font:500 14px/1 var(--sans);padding:10px 16px;border-radius:999px;color:var(--plum);text-decoration:none;white-space:nowrap}
.gi-subnav nav a.on{background:var(--ink);color:var(--cream)}
.gi-subnav nav a:not(.on):hover{color:var(--ink)}

/* tables (pricing, compare) */
.gi-table{width:100%;border-collapse:collapse;font-size:15px}
.gi-table th,.gi-table td{padding:18px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.gi-table thead th{font:400 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--plum);border-bottom:1px solid var(--ink)}
.gi-table tbody th{font-weight:400}

/* reading (articles, guides, prompts) */
.gi-prose{font-size:18px;line-height:1.7;color:var(--ink)}
.gi-prose > * + *{margin-top:1.1em}
.gi-prose h2{font-weight:400;font-size:36px;line-height:1.12;letter-spacing:-.025em;margin-top:2em}
.gi-prose h3{font-weight:400;font-size:24px;line-height:1.25;letter-spacing:-.015em;margin-top:1.6em}
.gi-prose a{color:var(--plum);text-underline-offset:3px}
.gi-prose ul,.gi-prose ol{padding-left:1.2em}
.gi-prose blockquote{font-family:var(--sans);font-style:normal;font-weight:300;font-size:28px;line-height:1.3;padding-left:24px;border-left:1px solid var(--plum)}

@media (max-width:1000px){
  .gi-cards,.gi-cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gi-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gi-stats{grid-template-columns:1fr}
}
@media (max-width:900px){
  .gi .wrap,.gi .narrow{padding:0 16px}
  .gi-hero{padding:72px 0 48px}
  .gi-sec{padding:88px 0}
  .gi-head,.gi-faq,.gi-quote{grid-template-columns:1fr;gap:28px}
  .gi-head{margin-bottom:48px}
  .gi-rows{gap:72px}
  .gi-row,.gi-row:nth-child(even){grid-template-columns:1fr;gap:28px}
  .gi-row:nth-child(even) .gi-frame{order:0}
  .gi-quote{padding:36px 28px}
  .gi-closing{padding:96px 0}
  .gi-frame{border-radius:20px}
  .gi-frame.r21x9{aspect-ratio:16/10}
}
@media (max-width:640px){
  .gi-cards,.gi-cards.two,.gi-cards.four,.gi-list,.gi-list.two{grid-template-columns:1fr}
  .gi-hero .sub{font-size:18px}
  .gi .ctas{flex-direction:column;align-items:center}
  .gi-hero.left .ctas{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.gi *{transition:none!important}}

/* ---------- v2 · quieter (Amit 2026-10-28: "too busy") ----------
   One ground (Cream), no coloured blocks, hairlines instead of cards, fewer accents, more air. */
.gi-sec{padding:160px 0}
.gi-sec.tight{padding:120px 0}
.gi-sec.warm,.gi-sec.white,.gi-sec.fade{background:transparent}
.gi-sec.warm{border-top:1px solid var(--line)}
.gi-frame,.gi-frame.tint,.gi-frame.white{background:var(--warm);box-shadow:none}
.gi-head{margin-bottom:88px}
.gi-head .label{margin-bottom:24px}
.gi-rows{gap:160px}
.gi-row{grid-template-columns:6fr 5fr;gap:96px}
.gi-row:nth-child(even){grid-template-columns:5fr 6fr}
.gi-row .copy{gap:16px}
.gi-row .copy .use{padding-top:0;border-top:0}
.gi-cards{gap:64px 32px}
.gi-quote{background:transparent;color:var(--ink);border-radius:0;padding:56px 0 0;border-top:1px solid var(--line)}
.gi-quote blockquote em{color:var(--plum)}
.gi-quote cite,.gi-quote p{color:var(--muted)!important}
.gi-quote .label{color:var(--plum)}
.gi-stats{gap:0;border-top:1px solid var(--line)}
.gi-stat{background:transparent;border-radius:0;padding:32px 32px 0 0;min-height:0}
.gi-stat + .gi-stat{padding-left:32px;border-left:1px solid var(--line)}
.gi-chip{background:transparent}
.gi-closing{padding:180px 0;border-top:1px solid var(--line)}
.gi-closing::before{display:none}
.gi-subnav{background:rgba(254,249,243,.94)}
.tools-chips{display:none!important}
@media (max-width:900px){.gi-sec{padding:96px 0}.gi-rows{gap:88px}.gi-stat + .gi-stat{padding-left:0;border-left:0}.gi-closing{padding:112px 0}}

/* ---------- v3 · fewer labels, fewer items per row (Amit 2026-10-28) ---------- */
.gi .num,.gi-head .label,.gi-quote .label,.gi-card .label{display:none!important}
.gi-cards,.gi-cards.four{grid-template-columns:repeat(2,minmax(0,1fr));gap:88px 40px}
.gi-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 80px}
.gi-list > *{padding:36px 0 40px}
.gi-list h4{font-size:24px}
.gi-card{gap:24px}
.gi-card h3{font-size:30px;letter-spacing:-.02em}
.gi-card p{font-size:17px}
.gi-head{grid-template-columns:1fr;gap:28px;margin-bottom:96px}
.gi-head h2,.gi h2.big{font-size:clamp(44px,5.4vw,80px)}
.gi-head p{max-width:52ch;font-size:19px}
.gi-faq{grid-template-columns:1fr 1.6fr}
@media (max-width:640px){.gi-cards,.gi-cards.four,.gi-list{grid-template-columns:1fr}}

/* ---------- v4 · grounds (Amit 2026-10-28) ----------
   Base: one soft white ↔ beige gradient that flows down the whole page (sections are transparent,
   so it never breaks at a section edge). Figma backgrounds rebuilt in CSS, without dots:
   E (quiet blurred Lilac circles) behind heroes, B (Lilac gradient) behind quotes, G (soft focus) behind closings. */
.gi{--beige:#F5EEE4;background:#FFFFFF repeating-linear-gradient(180deg,#FFFFFF 0px,#FBF7F1 520px,var(--beige) 1100px,#FBF7F1 1680px,#FFFFFF 2200px)}
.gi-sec,.gi-sec.warm,.gi-sec.white,.gi-sec.fade,.gi-showcase,.gi-closing{background:transparent}
.gi-sec.warm,.gi-closing{border-top:0}
.gi-subnav{background:rgba(255,255,255,.82)}

/* E · quiet shapes, hero */
.gi-hero{position:relative;overflow:hidden}
.gi-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;filter:blur(40px);
  background:radial-gradient(22vw 22vw at 8% 34%,rgba(207,179,239,.26),transparent 70%),radial-gradient(18vw 18vw at 92% 64%,rgba(207,179,239,.2),transparent 70%)}
.gi-hero > .wrap{position:relative;z-index:1}

/* B · Lilac gradient, quote bands */
.gi section:has(> .wrap > .gi-quote){position:relative;padding:160px 0;
  background:linear-gradient(180deg,rgba(243,235,251,0) 0%,#F3EBFB 22%,#EADDF8 62%,rgba(243,235,251,0) 100%)}
.gi section:has(> .wrap > .gi-quote) .gi-quote{border-top:0;padding-top:0}

/* G · soft focus, closing */
.gi-closing{padding:200px 0}
.gi-closing::before{display:block;content:"";position:absolute;inset:0;pointer-events:none;filter:blur(70px);
  background:radial-gradient(34% 46% at 18% 72%,rgba(255,244,171,.75),transparent 70%),radial-gradient(38% 52% at 50% 30%,rgba(255,255,255,.9),transparent 70%),radial-gradient(34% 50% at 84% 40%,rgba(207,179,239,.55),transparent 70%),radial-gradient(26% 36% at 70% 92%,rgba(132,90,167,.18),transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 100%)}
@media (max-width:900px){.gi-closing{padding:120px 0}.gi section:has(> .wrap > .gi-quote){padding:96px 0}}

/* ---------- v5 · background shapes (site-deco.js) ---------- */
.gi{overflow-x:clip}
.gi .has-deco{position:relative}
.gi .has-deco > .wrap,.gi .has-deco > .narrow{position:relative;z-index:1}
.gi-deco{position:absolute;z-index:0;pointer-events:none;will-change:transform}
@media (max-width:900px){.gi-deco{display:none}.gi-deco:nth-of-type(-n+2){display:block;transform:scale(.6)!important}}

/* ---------- v6 · Amit's Figma art in the grounds: grained clouds, and the boat on the sea ---------- */
@keyframes giDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(26px)}}
@keyframes giDrift2{0%,100%{transform:translateX(0)}50%{transform:translateX(-20px)}}
@keyframes giRock{0%,100%{transform:translateY(0) rotate(-2.2deg)}50%{transform:translateY(-7px) rotate(2.2deg)}}
@keyframes giSwell{0%,100%{transform:translateX(0)}50%{transform:translateX(-36px)}}
.gi-deco .drift{animation:giDrift 18s ease-in-out infinite}
.gi-deco .drift2{animation:giDrift2 22s ease-in-out infinite}
.gi .has-sea{padding-bottom:340px}
.gi-sea{position:absolute;left:0;right:0;bottom:0;height:360px;pointer-events:none;z-index:0;overflow:hidden}
.gi-sea-waves{position:absolute;left:-80px;right:-80px;bottom:0;height:190px;background:url(https://genielabspublic.s3.us-east-2.amazonaws.com/website/v2/assets/deco/sea.webp) center top/100% auto no-repeat;animation:giSwell 14s ease-in-out infinite}
.gi-boat{position:absolute;right:16%;bottom:120px;width:220px;transform-origin:50% 90%;animation:giRock 6s ease-in-out infinite}
@media (max-width:900px){.gi .has-sea{padding-bottom:220px}.gi-sea{height:240px}.gi-sea-waves{height:110px;background-size:auto 160px;background-position:left top}.gi-boat{width:130px;bottom:70px;right:10%}}
@media (prefers-reduced-motion:reduce){.gi-deco .drift,.gi-deco .drift2,.gi-sea-waves,.gi-boat{animation:none}}

/* ---------- v7 · one site grid (site-grid.css): 12 cols, 24px gutter, edges from .g-wrap only ---------- */
.gi .wrap,.gi .narrow{width:100%;max-width:calc(var(--g-max) + 2 * var(--g-margin));margin-inline:auto;padding-inline:var(--g-margin);box-sizing:border-box}
.gi .narrow{display:grid;grid-template-columns:repeat(var(--g-cols),minmax(0,1fr));column-gap:var(--g-gutter)}
.gi .narrow > *{grid-column:3 / 11;min-width:0}
.gi-head,.gi-faq,.gi-quote,.gi-row,.gi-row:nth-child(even){grid-template-columns:repeat(var(--g-cols),minmax(0,1fr));column-gap:var(--g-gutter)}
.gi-head{row-gap:24px}
.gi-head > *{grid-column:1 / 9;min-width:0}
.gi-head.solo > *{grid-column:1 / 9}
.gi-faq > :first-child,.gi-quote > :first-child{grid-column:1 / 6}
.gi-faq > :last-child,.gi-quote > :last-child{grid-column:7 / 13}
.gi-row{row-gap:24px}
.gi-row > *{grid-row:1;min-width:0}
.gi-row > .gi-frame,.gi-row > figure,.gi-row > .cr-media{grid-column:1 / 7}
.gi-row > :not(.gi-frame):not(figure):not(.cr-media){grid-column:8 / 13}
.gi-row:nth-child(even) > .gi-frame,.gi-row:nth-child(even) > figure,.gi-row:nth-child(even) > .cr-media{grid-column:7 / 13}
.gi-row:nth-child(even) > :not(.gi-frame):not(figure):not(.cr-media){grid-column:1 / 6}
.gi-cards,.gi-cards.two,.gi-cards.four{column-gap:var(--g-gutter)}
.gi-list,.gi-list.two{column-gap:var(--g-gutter)}
.gi-stats{column-gap:var(--g-gutter)}
.gi-stat{padding-right:0}
.gi-stat + .gi-stat{padding-left:24px}
.gi-sec{padding:160px 0}
.gi-sec.tight{padding:160px 0}
.gi-hero{padding:140px 0 96px}
.gi-closing{padding:180px 0}
.gi section:has(> .wrap > .gi-quote){padding:160px 0}
@media (max-width:1023px){
  .gi .narrow > *,.gi-head > *,.gi-head.solo > *,.gi-faq > *,.gi-quote > *,.gi-row > *,.gi-row:nth-child(even) > *{grid-column:1 / -1;grid-row:auto}
  .gi-faq,.gi-quote{row-gap:24px}
}
@media (max-width:900px){.gi .wrap,.gi .narrow{padding-inline:var(--g-margin)}}
@media (max-width:767px){
  .gi-sec,.gi-sec.tight,.gi section:has(> .wrap > .gi-quote){padding:96px 0}
  .gi-closing{padding:108px 0}
  .gi-hero{padding:84px 0 58px}
  .gi-stat + .gi-stat{padding-left:0}
}

/* ---------- article grids: three per row (2026-10-29) ---------- */
.gi-cards.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:64px var(--g-gutter,32px)}
.gi-cards.three .gi-card h3{font-size:22px;line-height:1.2}
.gi-cards.three .gi-card p{font-size:16px}
@media (max-width:1000px){.gi-cards.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.gi-cards.three{grid-template-columns:1fr}}

/* hero eyebrow tags removed site-wide (2026-11-01) */
.gi .gi-hero .wrap > .tag,.gi .ln-hero .wrap > .tag,.gi .lr-hero .wrap > .tag{display:none!important}
.gi .gi-hero .wrap > .tag + h1,.gi .ln-hero .wrap > .tag + h1{margin-top:0}

/* closing headlines: one line when it fits (2026-11-01) */
.gi .gi-closing h2{max-width:none!important;text-wrap:balance}

/* ---------- type and rhythm (2026-11-01): serif is an accent, headlines breathe ---------- */
.gi em,.gi em.it,.gi span.it{font-size:.92em;letter-spacing:.015em;line-height:inherit;display:inline-block}
.gi-hero h1{line-height:1.08}.gi-hero h1 em{font-size:.92em;line-height:inherit}
.gi-head h2,.gi h2.big{line-height:1.1}.gi-head h2 em,.gi h2.big em{font-size:.92em}
.gi h3.title{line-height:1.12}
.gi-closing h2{line-height:1.08}.gi-closing h2 em{font-size:.92em}
.gi-quote blockquote{line-height:1.3}.gi-quote blockquote em{font-size:.92em}
.cr-tie{font-family:var(--sans);font-style:normal;font-size:15px;line-height:1.5;color:var(--plum)}
.gi-head,.gi-head.solo{margin-bottom:96px}
.gi-row .copy{gap:20px}.gi-row .copy ul{margin-top:4px}
@media (max-width:767px){.gi-hero .sub{margin-top:19px}.gi-hero .ctas{margin-top:29px}.gi-head,.gi-head.solo{margin-bottom:58px}.gi-row .copy{gap:12px}.gi-row .copy ul{margin-top:2px}}

/* secondary CTA next to a primary button is always an outlined pill */
.gi .ctas > .btn + a.link{display:inline-flex;align-items:center;font:500 15px/1 var(--sans);text-decoration:none;padding:15px 26px;border-radius:999px;border:1px solid var(--ink);color:var(--ink);background:transparent}
.gi .ctas > .btn + a.link:hover{background:var(--ink);color:var(--cream)}

/* mobile QA 2026-11-01: single-column collapse must beat the desktop column rules; no decorative shapes over text on phones */
@media (max-width:1023px){
  .gi .gi-row > *,.gi .gi-row:nth-child(even) > *,.gi .gi-faq > *,.gi .gi-quote > *,.gi .gi-head > *{grid-column:1 / -1!important;grid-row:auto!important}
  .gi .gi-row > .gi-frame,.gi .gi-row > figure,.gi .gi-row > .cr-media{order:0}
}
@media (max-width:767px){
  .gi .gi-deco{display:none!important}
}
@media (max-width:767px){
  .csl-tabs .wrap{min-width:0}
  .csl-tabs nav{flex:none;width:calc(100% + 48px);box-sizing:border-box;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -24px;padding:0 24px 4px}
  .csl-tabs nav::-webkit-scrollbar{display:none}
  .csl-tabs nav a{flex:none;white-space:nowrap}
  .lr-share a,.lr-share button,.lr-ask a{min-height:40px}
}
@media (max-width:767px){
  .gi .gi-closing .ctas,.gi .gi-hero .ctas{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:12px;width:100%;max-width:400px}
  .gi .gi-closing .ctas{margin-left:auto;margin-right:auto}
  .gi .gi-closing .ctas .btn,.gi .gi-hero .ctas .btn{justify-content:center;text-align:center;width:100%;box-sizing:border-box;padding-left:12px;padding-right:12px;white-space:nowrap}
}
.gi .gi-closing .ctas .btn,.gi .gi-hero .ctas .btn,.gi .btn{box-sizing:border-box;height:48px;padding-top:0;padding-bottom:0;font-size:15px}
/* text links next to a button stay plain text, never framed */
.gi .ctas a.link{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;height:auto!important;width:auto!important;min-height:0!important}
@media (max-width:767px){.gi .ctas:has(> a.link){flex-direction:row!important;flex-wrap:wrap;align-items:center!important;gap:12px 20px!important;width:auto!important}}