/* ============================================================================
   Viola / Charlie shared design system.
   One design language: Baloo 2 display + Nunito Sans body, 10px buttons,
   12px cards, teal-on-near-white. Charlie overrides only the palette and the
   hero art via [data-site=charlie]; everything structural is shared.
   ============================================================================ */
/* ================= Fonts (Baloo 2 display + Nunito Sans body) ================= */

@font-face{font-family:'Baloo 2';font-style:normal;font-weight:500 800;font-display:swap;src:url("fonts/baloo2-latin.woff2") format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/nunito-sans-latin.woff2") format('woff2')}

/* ================= Tokens (extracted from the template) ================= */
:root{
  --bg:#0a0a0a;         /* page */
  --fg:#fff;            /* primary text */
  --card:#121212;       /* raised card */
  --gray:#858585;       /* secondary text */
  --line:rgba(255,255,255,.16); /* hairline (cards/rows) */
  --line2:rgba(255,255,255,.2);  /* hairline (controls) */
  --light:#dedede;      /* nav/footer links */
  --btn-bg:#fff;        /* primary button */
  --btn-fg:#0f0f0f;
  --ring:rgba(255,255,255,.2);
  --white:#fff;
  /* type */
  --font-d:'Baloo 2',sans-serif;  /* display */
  --font-b:'Nunito Sans',sans-serif;       /* body */
  --w-d:400;
  --fs-h1:56px; --lh-h1:56px; --ls-h1:-1.68px;
  --fs-h2:36px; --lh-h2:39.6px; --ls-h2:-1.08px;
  --ls-t20:-.4px;
  /* shape + surface */
  --r-btn:48px; --r-card:0px; --r-img:0px;
  --r-inner:max(calc(var(--r-card) - 6px),0px);  /* media inside a card */
  --pad-card:14px;   /* outer padding on media cards */
  --pad-box:24px;    /* padding inside plain boxes */
  --w-page:1080px;   /* every section shares this measure */
  --stroke:inset 0 0 0 0 transparent;   /* midnight = untouched template control */
  --card-shadow:0 0 0 0 transparent;
  --edge:inset 0 0 0 1px var(--line);  /* pricing/faq hairline */
}
/* Body copy is black-based like the headings; the teal now only appears where it is the
   surface colour (cards, gradients), not in running text. */
[data-theme=altruist]{--bg:#f5f5f5;--fg:#16526e;--card:#ebf8ff;--gray:rgba(0,0,0,.58);
  --line:rgba(22,82,110,.14);--line2:rgba(22,82,110,.2);--light:rgba(0,0,0,.78);
  --btn-bg:#16526e;--btn-fg:#f5f5f5;--ring:rgba(22,82,110,.18)}

/* ================= Base ================= */
*{box-sizing:border-box;margin:0;padding:0}

body{position:relative;background:var(--bg);color:var(--fg);transition:background .5s ease,color .5s ease;font-family:var(--font-b);font-size:16px;line-height:1.2;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Film grain — the template's "Noise" layer: full-page, z5, 13% opacity, 256px tile at 153.5px */
.noise{position:fixed;inset:0;z-index:5;opacity:.13;pointer-events:none}
/* Altruist's page colour is the light grey #f5f5f5; the grain tile is opaque near-black,
   so a full-bleed layer would composite it to ~rgb(229) — visibly gray. This theme keeps
   the grain on the hero photo only, where the hero's own mask fades it out with the image. */
[data-theme=altruist] .noise{display:none}
[data-theme=altruist] .hero .bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.13;background:url(img/grain.png) 50% 0 repeat;background-size:153.5px auto}
.noise-tile{position:absolute;inset:0;background:url(img/grain.png) 50% 0 repeat;background-size:153.5px auto}
a{color:inherit;text-decoration:none}
img{display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

h1{font-family:var(--font-d);font-weight:var(--w-d);font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
h2{font-family:var(--font-d);font-weight:var(--w-d);font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.t20{font-family:var(--font-d);font-weight:var(--w-d);font-size:20px;line-height:24px;letter-spacing:var(--ls-t20)}
.b16{font-size:16px;line-height:19.2px}
.b14{font-size:14px;line-height:18.2px}
.gray{color:var(--gray)}
h2 .gray{color:var(--gray)}

/* ================= Buttons (white pill, radius 48) ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--btn-bg);color:var(--btn-fg);
  border-radius:var(--r-btn);height:40px;padding:0 18px;font-size:16px;font-weight:500;line-height:19.2px;
  box-shadow:0 0 0 0 var(--ring);transition:box-shadow .3s ease,background .5s ease,color .5s ease;white-space:nowrap}
.btn:hover{box-shadow:0 0 0 4px var(--ring)}
.btn.sm{height:34px;padding:0 14px}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.ghost:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--line2)}

/* ================= Nav (fixed, centered cluster) ================= */
nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:32px;display:flex;align-items:flex-start}
/* the fixed bar rides over page content, so it carries its own surface */
/* three tracks so the links sit dead centre of the bar regardless of how wide the brand or
   the button are — a flex row with space-between would centre them between the two instead. */
.navin{position:relative;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  height:64px;padding:0 var(--pad-box);border-radius:var(--r-card);
  transition:background .35s ease,box-shadow .35s ease,backdrop-filter .35s ease;
  background:color-mix(in srgb, var(--card) 82%, transparent);
  box-shadow:inset 0 0 0 1px var(--line),0 8px 26px rgba(10,20,30,.10);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
nav .brand{display:flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:var(--w-d);font-size:20px;letter-spacing:-.4px;line-height:24px}
nav .brand{grid-column:1}
nav .links{grid-column:2;display:flex;align-items:center;justify-content:center;gap:28px}
nav .nav-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
.nav-burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:40px;height:40px;border-radius:10px;color:inherit;background:none;cursor:pointer}
.nav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .25s ease}
nav[data-open] .nav-burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
nav[data-open] .nav-burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
nav .links a{font-family:var(--font-d);font-weight:var(--w-d);font-size:16px;line-height:19.2px;
  color:var(--light);transition:color .3s ease}
nav .nav-dl{font-family:var(--font-d);font-weight:var(--w-d)}
nav .links a:hover{color:var(--fg)}

/* nav rides bare over the hero, then picks up a surface once content is behind it */
html[data-athero] .navin{background:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
html[data-athero] nav{color:#fff}
html[data-athero] nav .links a{color:#fff}
html[data-athero] nav .links a:hover{color:#fff}
/* over the hero the mark and the button invert; the brand svg uses an explicit fill, so
   inheriting nav's white colour isn't enough */
html[data-athero] nav .brand svg path{fill:#fff}
html[data-athero] .nav-dl{background:#fff;color:var(--fg)}
html[data-athero] .nav-dl:hover{box-shadow:0 0 0 4px rgba(255,255,255,.24)}

/* ================= Layout ================= */
.wrap{max-width:var(--w-page);margin:0 auto}
section{margin-top:200px}
.eyebrow{font-size:13px;line-height:1.2;font-weight:600;letter-spacing:.01em;color:var(--gray);margin-bottom:10px}
.sec-h2{max-width:660px}
.sec-body{margin-top:40px}

/* ================= Hero ================= */
.hero{position:relative;height:calc(100svh - 16px);min-height:640px;overflow:hidden;
  margin:16px 16px 0;border-radius:max(var(--r-card),16px) max(var(--r-card),16px) 0 0;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:160px}
.hero .bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 52%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(#000 52%,rgba(0,0,0,0) 100%)}
.hero .bgmove{position:absolute;inset:0;will-change:transform}
.hero .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  animation:heroZoom 2s cubic-bezier(.12,.23,.5,1) both}
@keyframes heroZoom{from{transform:scale(1.05)}to{transform:scale(1)}}
.hero .inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  animation:rise24 1.5s cubic-bezier(.12,.23,.17,.99) .4s both}
@keyframes rise24{from{opacity:.001;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero h1{max-width:500px}
.hero .sub{margin-top:16px;max-width:350px;font-size:16px;line-height:19.2px;color:var(--fg)}
.hero .btn{margin-top:55px}
.plats{display:flex;align-items:center;gap:14px}
.hero .plats{justify-content:center;margin-top:50px}
.hero .plats a,.hero .plats span{color:#fff}
.plats a,.plats span{position:relative;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:var(--r-inner);opacity:.85;
  border:1px solid color-mix(in srgb, currentColor 30%, transparent);
  transition:opacity .3s ease,transform .3s cubic-bezier(.22,.7,.2,1),border-color .3s ease}
.plats a:hover{opacity:1;transform:translateY(-3px);
  border-color:color-mix(in srgb, currentColor 60%, transparent)}
.plats .soon{opacity:.3;cursor:default}
.plats .soon:hover{opacity:.5}
/* hover tooltip */
.plats [data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);left:50%;
  transform:translateX(-50%) translateY(-4px);white-space:nowrap;background:rgba(12,18,26,.88);color:#fff;
  font-size:12px;line-height:1;font-weight:500;letter-spacing:0;padding:6px 9px;border-radius:6px;
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.plats [data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
/* two-line tooltip variant */
.plats [data-tip2]::after{content:attr(data-tip) "\A" attr(data-tip2);white-space:pre;text-align:center;line-height:1.35}
.plats svg{display:block}
/* each mark carries different optical weight — size them so they read evenly */
.plats [data-os=mac] svg{width:19px;height:19px}
.plats [data-os=windows] svg{width:17px;height:17px}
.plats [data-os=linux] svg{width:19px;height:19px}
.plats [data-os=android] svg{width:21px;height:21px}
.plats [data-os=ios] svg{width:24px;height:24px}
.hero .cue{position:absolute;bottom:40px;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;line-height:18.2px;color:var(--gray);
  animation:rise8 .6s cubic-bezier(.12,.23,.5,1) .8s both}
@keyframes rise8{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ================= Scroll-in reveal (section-level, matches template appear) ================= */
.rv{opacity:.001;transform:translateY(40px)}
.rv.in{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.12,.23,.17,.99) .1s,transform 1s cubic-bezier(.12,.23,.17,.99) .1s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .hero .bgimg,.hero .inner,.hero .cue{animation:none}
}

/* ================= Features (3-up image cards) ================= */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.fcard .im{position:relative;height:320px;overflow:hidden;border-radius:var(--r-img);
  background:#cfe6f5 no-repeat center/cover}
/* Feature grid: each card is one product composition at its own aspect — no crop, no shadow */
#about .grid3{grid-template-columns:1fr 1fr;gap:20px}
#about .fcard .im{height:auto;aspect-ratio:1100/800;background-size:cover;background-position:center;box-shadow:none}
.fcard .tx{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.fcard .tx p{color:var(--gray)}
/* ================= Paths (tabs + crossfade deck + side panel) ================= */
.tabs{display:flex;gap:32px;margin-top:48px;margin-left:12px}
.tabs button{font-size:16px;line-height:19.2px;color:var(--gray);transition:color .3s ease}
.tabs button.on,.tabs button:hover{color:var(--fg)}
.duo{display:flex;margin-top:17px;align-items:stretch}
.deck{position:relative;width:516px;height:397px;flex:none;overflow:hidden;border-radius:var(--r-img)}
.deck > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.deck > img.on{opacity:1}
/* use-case deck: a UI capture centred on the sky, same treatment as the feature cards */
.deck .slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;
  display:flex;align-items:center;justify-content:center;
  background:#cfe6f5 url(img/sky.webp) no-repeat;background-size:300%}
.deck .slide.on{opacity:1}
.deck .slide img{border-radius:14px;box-shadow:0 26px 60px rgba(16,40,56,.34),0 6px 18px rgba(16,40,56,.16)}
.deck .slide img.ui{width:340px}        /* real UI captures */
.deck .slide img.ui-pad{width:420px}    /* captures that include their own padding */
.deck .slide.full{background-size:auto 100%;background-position:center;background-repeat:no-repeat}
.deck .slide img.win{width:440px}       /* full-window placeholders */
.panel{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding-top:127px;padding-left:106px}
.panel .cat{font-size:14px;line-height:18.2px;color:var(--gray)}
.panel .desc{margin-top:12px;max-width:320px;font-size:16px;line-height:19.2px;color:var(--fg)}
.panel .btn{margin-top:24px;align-self:flex-start}

/* steps variant */
.deck.steps{width:521px;height:404px}
.steplist{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding-top:64px;gap:24px;padding-left:160px}
.step{cursor:pointer}
.step .t20{color:var(--gray);transition:color .3s ease}
.step p{margin-top:8px;max-width:320px;color:var(--gray);font-size:16px;line-height:19.2px}
.step.on .t20,.step:hover .t20{color:var(--fg)}

/* ================= Benefits (3×2 dark cards) ================= */
.bcard{background:var(--card);border-radius:var(--r-card);box-shadow:var(--stroke),var(--card-shadow);padding:20px;height:194px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:inset 0 0 46px rgba(255,255,255,0);transition:box-shadow .5s ease}
.bcard:hover{box-shadow:inset 0 0 46px rgba(255,255,255,.06)}
.bcard .ic{width:64px;height:64px;display:flex;align-items:center;justify-content:center}
.bcard .tx{display:flex;flex-direction:column;gap:8px}
.bcard .tx p{color:var(--gray)}

/* ================= Testimonials (slider) ================= */
.twin{overflow:hidden}
.track{display:flex;gap:12px;transition:transform .7s cubic-bezier(.12,.23,.17,.99)}
.tcard{flex:none;width:352px;height:240px;background:var(--card);border-radius:var(--r-card);box-shadow:var(--stroke),var(--card-shadow);padding:var(--pad-box);display:flex;flex-direction:column;justify-content:space-between}
.tcard .q{font-family:var(--font-d);font-weight:var(--w-d);font-size:20px;line-height:24px;letter-spacing:var(--ls-t20)}
.tcard .who{display:flex;align-items:flex-end;justify-content:space-between;font-size:14px;line-height:18.2px}
.tcard .who .role{color:var(--gray);margin-top:2px}
.tcard .who .n{color:var(--gray)}
.arrows{display:flex;justify-content:flex-end;gap:16px;margin-top:24px}
.arrows button{width:40px;height:40px;border-radius:40px;background:var(--btn-bg);display:flex;align-items:center;justify-content:center;transition:opacity .3s ease}
.arrows button:hover{opacity:.85}
.arrows svg{width:24px;height:24px}

/* ================= Pricing ================= */
.toggle{display:flex;align-items:center;gap:16px;margin-top:28px}
.toggle button{font-family:var(--font-d);font-weight:var(--w-d);font-size:20px;line-height:24px;letter-spacing:var(--ls-t20);color:var(--gray);transition:color .3s ease}
.toggle button.on{color:var(--fg)}
.switch{width:48px;height:24px;border-radius:48px;box-shadow:inset 0 0 0 1px var(--line2);position:relative;cursor:pointer;flex:none}
.switch .knob{position:absolute;top:3px;left:4px;width:16px;height:16px;border-radius:50%;background:var(--fg);transition:transform .3s cubic-bezier(.12,.23,.17,.99)}
.switch.yr .knob{transform:translateX(23px)}
.pill{background:var(--card);border-radius:100px;padding:6px 12px;font-size:14px;line-height:18.2px;font-weight:500;color:var(--fg)}
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:31px}
.pcard{background:var(--card);border-radius:var(--r-card);box-shadow:var(--stroke),var(--card-shadow);padding:var(--pad-box);min-height:451px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:16px}
.pcard .nm{display:flex;align-items:center;justify-content:space-between;width:100%}
.pcard .price{display:flex;align-items:baseline;gap:4px;height:40px}
.pcard .price h2{font-size:36px;line-height:39.6px;letter-spacing:-1.08px}
.pcard .price .per{font-size:14px;color:var(--gray)}
.pcard .d{color:var(--gray);font-size:16px;line-height:19.2px}
.pcard .fl{display:flex;align-items:center;gap:12px;width:100%;font-size:14px;line-height:18.2px;color:var(--gray)}
.pcard .fl::before,.pcard .fl::after{content:"";flex:1;border-top:1px dashed var(--line)}
.pcard ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.pcard ul li{display:flex;align-items:center;gap:8px;font-size:14px;line-height:18.2px;color:var(--gray)}
.pcard ul li svg{width:16px;height:16px;flex:none;fill:var(--fg)}

/* ================= FAQ ================= */
.vfaq .wrap{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
.faq-intro{position:sticky;top:96px}
.faq-intro .eyebrow{width:max-content}
.faq-intro h2{max-width:440px;margin-top:0}
.faq-intro>p{max-width:390px;margin-top:20px;color:var(--gray);font-size:15px;line-height:1.55}
.faqs{display:grid;grid-template-columns:1fr;gap:14px;padding:var(--pad-card);border-radius:var(--r-card);
  background:color-mix(in srgb,var(--card) 76%,var(--bg));box-shadow:inset 0 0 0 1px var(--line)}
.faq{padding:0 var(--pad-box);cursor:pointer;background:var(--card);border-radius:var(--r-inner);
  box-shadow:inset 0 0 0 1px var(--line)}
.faq .qrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.faq .qrow{min-height:72px}
.faq .qrow p{font-family:var(--font-d);font-weight:var(--w-d);font-size:17px;line-height:1.3;letter-spacing:var(--ls-t20)}
.faq .x{width:16px;height:16px;flex:none;position:relative;transition:transform .4s cubic-bezier(.12,.23,.17,.99)}
.faq .x::before,.faq .x::after{content:"";position:absolute;background:var(--fg);left:50%;top:50%}
.faq .x::before{width:16px;height:1.5px;transform:translate(-50%,-50%)}
.faq .x::after{width:1.5px;height:16px;transform:translate(-50%,-50%)}
.faq.open .x{transform:rotate(45deg)}
.faq .a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.12,.23,.17,.99)}
.faq.open .a{max-height:220px}
.faq .a p{padding:0 34px 22px 0;font-size:15px;line-height:1.55;color:var(--gray)}

/* Card stroke, matching the FAQ cards. Drawn as an overlay on surfaces whose child
   <img> or scrim would otherwise paint over an inset ring. */
.blog-media::after,.why-story::after,.cta::after{content:"";position:absolute;inset:0;
  border-radius:inherit;box-shadow:var(--stroke);pointer-events:none;z-index:4}


/* ================= Charlie CTA ================= */
/* A separate product, so it carries its own gradient rather than the browser's theme tokens.
   Same page-width box and radius as every other panel; the shot is clipped by the box floor. */
#charlie,.crosscta{position:relative;overflow:hidden;text-align:center;color:#fff;
  max-width:var(--w-page);width:calc(100% - 32px);margin:200px auto;
  border-radius:max(var(--r-card),16px);padding:76px 40px 0;
  background:var(--cta-img,url(img/charlie-sunset.webp)) no-repeat center var(--chy,100%) / cover}
/* The sunset runs 1.68:1 against white at its brightest, so the copy needs a scrim. It is
   weighted to the top where the text sits and clears before the meadow, so the horizon and
   hills stay untouched. Worst band lands at 5.6:1. */
#charlie::before,.crosscta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,30,42,.62) 0%,rgba(16,30,42,.52) 42%,rgba(16,30,42,.22) 68%,rgba(16,30,42,0) 84%)}
#charlie > *,.crosscta > *{position:relative}
#charlie h2,.crosscta h2{margin:0 auto;max-width:760px;color:#fff}
#charlie .ch-sub,.crosscta .ch-sub{margin:18px auto 0;max-width:520px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.88)}
.ch-cta{display:flex;justify-content:center;gap:12px;margin-top:34px}
#charlie .btn{background:#fff;color:#0e4a6b;box-shadow:none}
#charlie .btn:hover,.crosscta .btn:hover{box-shadow:0 0 0 4px rgba(255,255,255,.22)}
/* Charlie is a deliberately shallow preview, not a second full-page hero. Use an explicit
   crop viewport rather than length multiplication in a negative margin: unsupported typed
   arithmetic caused the entire 1702×1442 image to determine the live section height. */
#charlie,.crosscta{--ch-w:min(860px,88%)}
.ch-shot{width:var(--ch-w);height:clamp(220px,28vw,320px);margin:64px auto 0;
  overflow:hidden;border-radius:16px 16px 0 0}
.ch-shot>img{display:block;width:100%;height:auto}
.product-window{position:relative;overflow:visible;border-radius:0;
  width:110%;margin:-5% -5% 0;background:transparent;box-shadow:none}
.product-window img{display:block;width:100%;height:auto}
@media (max-width:980px){
  #charlie,.crosscta{padding:56px 24px 0;margin:120px auto}
}

/* ================= Footer ================= */
footer{background:transparent;padding:48px 0;margin-top:0}
.fwrap{max-width:var(--w-page);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px}
.fleft .brand{display:flex;align-items:center;gap:8px;font-family:var(--font-d);font-weight:var(--w-d);font-size:20px;letter-spacing:-.4px;line-height:24px}
.fleft .tag{margin-top:16px;max-width:300px;font-size:14px;line-height:1.6;color:var(--gray)}
.socials{display:flex;gap:8px;margin-top:24px}
.socials a{width:40px;height:40px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:background .3s ease}
.socials a:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.socials svg{width:19px;height:19px}
.credit{display:flex;align-items:center;gap:6px;margin-top:24px;font-size:14px;line-height:18.2px;color:var(--gray)}
.credit img{width:24px;height:24px;border-radius:50%}
.credit a{color:var(--light)}
.fcol .lbl{font-family:var(--font-d);font-weight:var(--w-d);font-size:14px;line-height:18.2px;
  color:var(--fg);margin-bottom:14px}
.fcol a,.fcol .soon-link{display:block;font-size:14px;line-height:18.2px;margin-bottom:10px;
  transition:color .3s ease}
.fcol a{color:var(--light)}
.fcol a:hover{color:var(--fg)}
.fcol .soon-link{color:var(--gray);cursor:default}
.soon-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;font-size:11px;
  line-height:16px;color:var(--gray);box-shadow:inset 0 0 0 1px var(--line2)}
/* bottom bar sits under a hairline, credit left, legal right */
.fbar{max-width:var(--w-page);margin:44px auto 0;padding-top:22px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;box-shadow:inset 0 1px 0 var(--line)}
.fbar .credit{margin:0;font-size:13px;line-height:18px;color:var(--gray);font-weight:700}
.fbar-right{display:flex;align-items:center;gap:16px}.manage-link{font-size:12px;color:var(--gray);opacity:.72;
  transition:opacity .2s ease,color .2s ease}.manage-link:hover{opacity:1;color:var(--fg)}

.bcard .ic svg{stroke:var(--fg)}
nav .brand svg path,.fleft .brand svg path{fill:var(--fg)}
.arrows svg path{fill:var(--btn-fg)}
.cue svg{stroke:var(--gray)}
.cue svg circle,.cue svg path{stroke:var(--gray)}
/* CTA banner text stays light — it always sits on the dark photo */
.cta .ov h2{color:#fff}
.cta .d{color:rgba(255,255,255,.82)}/* Eased hero falloff — a linear mask changes slope abruptly at its first stop,which
   reads as a hard band. These stops follow a smoothstep so the fade has no visible
   start or end. Midnight keeps the template's original linear mask untouched. */
[data-theme=altruist] .hero .bg{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.995) 36%,rgba(0,0,0,.975) 44%,rgba(0,0,0,.93) 52%,rgba(0,0,0,.85) 59%,rgba(0,0,0,.73) 66%,rgba(0,0,0,.58) 73%,rgba(0,0,0,.42) 80%,rgba(0,0,0,.26) 86%,rgba(0,0,0,.13) 92%,rgba(0,0,0,.04) 97%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.995) 36%,rgba(0,0,0,.975) 44%,rgba(0,0,0,.93) 52%,rgba(0,0,0,.85) 59%,rgba(0,0,0,.73) 66%,rgba(0,0,0,.58) 73%,rgba(0,0,0,.42) 80%,rgba(0,0,0,.26) 86%,rgba(0,0,0,.13) 92%,rgba(0,0,0,.04) 97%,transparent 100%);
}[data-theme=altruist] .hero .shot{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.97) 30%,rgba(0,0,0,.88) 45%,rgba(0,0,0,.72) 58%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.28) 81%,rgba(0,0,0,.11) 91%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.97) 30%,rgba(0,0,0,.88) 45%,rgba(0,0,0,.72) 58%,rgba(0,0,0,.5) 70%,rgba(0,0,0,.28) 81%,rgba(0,0,0,.11) 91%,transparent 100%);
}

/* The hero window must own the lower half of the viewport, not read as a tiny thumbnail
   stranded beneath the copy. The alpha bleed still maps its visible frame to `.shot`. */
.hero .shot{display:none}[data-theme=altruist]{--shot-peek:min(520px,48vh)}[data-theme=altruist] .hero .shot{
  display:block;position:absolute;left:0;right:0;bottom:0;margin-inline:auto;
  width:min(var(--w-page),calc(100% - 64px));height:var(--shot-peek);overflow:visible;will-change:opacity;
  z-index:6;pointer-events:none;                       /* above the grain (z5) */
  -webkit-mask-image:linear-gradient(#000 68%,rgba(0,0,0,.92) 76%,rgba(0,0,0,.68) 85%,rgba(0,0,0,.34) 93%,transparent 100%);
          mask-image:linear-gradient(#000 68%,rgba(0,0,0,.92) 76%,rgba(0,0,0,.68) 85%,rgba(0,0,0,.34) 93%,transparent 100%);
}[data-theme=altruist] .hero .shot .product-window{width:110%}
[data-theme=altruist] .hero .shot img{display:block;width:100%;height:auto}/* text sits centred between the nav's underside and the shot's top edge */
[data-theme=altruist] .hero{padding-top:80px;padding-bottom:var(--shot-peek);justify-content:center}[data-theme=altruist] .hero .inner{z-index:7}[data-theme=altruist] .hero .cue{display:none}

/* ============ ALTRUIST — pastel cards on warm off-white (Instrument Sans) ============ */
[data-theme=altruist]{
  --font-d:'Baloo 2',sans-serif;--w-d:700;--font-b:'Nunito Sans',sans-serif;
  --fs-h1:54px;--lh-h1:58px;--ls-h1:-.5px;
  --fs-h2:33px;--lh-h2:39px;--ls-h2:-.3px;--ls-t20:0px;
  --r-btn:10px;--r-card:12px;--r-img:10px;--r-inner:10px;
  --card-shadow:0 0 0 0 transparent;
  --edge:0 0 0 0 transparent;
  --stroke:inset 0 0 0 1px var(--line);
  /* the template's pastel set — every card is tinted, none are white */
  --c1:#deeff8;--c2:#fff2e3;--c3:#f9fae3;--c4:#ffead1;--c5:#ddd1ff;
  --ink-warm:#6e4616;--ink-olive:#6e5f16;
}
[data-theme=altruist] .btn{font-weight:700}
[data-theme=altruist] .btn.ghost{background:var(--c1);color:var(--fg)}

/* White card on the grey page, but the media wells keep their own colour — each screenshot
   carries its own gradient backdrop, so the four tiles stay visually distinct. */
/* Section headings run pure black. Headings on the dark surfaces (.cta, .why-story, #charlie)
   keep their own white and are not touched. */
/* Read more runs black, matching the section headings rather than the teal ink. */
/* Footer runs on the same black as the headings rather than the teal ink; secondary lines
   keep their hierarchy through alpha instead of a different hue. */
[data-theme=altruist] .fcol .lbl,[data-theme=altruist] .fcol a,[data-theme=altruist] .fleft .brand{color:#000}
[data-theme=altruist] .fleft .brand svg path{fill:#000}
[data-theme=altruist] .fleft .tag,[data-theme=altruist] .fcol .soon-link,[data-theme=altruist] .soon-tag,[data-theme=altruist] .fbar .credit{color:rgba(0,0,0,.58)}
[data-theme=altruist] .soon-tag{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
[data-theme=altruist] .fcol a:hover{color:#000;opacity:.7}
[data-theme=altruist] .socials a{color:#000}
/* Sticky bar only: the brand goes black to match the headings. Scoped with :not([data-athero])
   because a plain `nav .brand` rule sets colour directly on the element and would beat the
   inherited white the hero state relies on. */
html[data-theme=altruist]:not([data-athero]) nav .brand{color:#000}
html[data-theme=altruist]:not([data-athero]) nav .brand svg path{fill:#000}
[data-theme=altruist] .navin{background:#fff;box-shadow:0 8px 26px rgba(10,20,30,.10);
  -webkit-backdrop-filter:none;backdrop-filter:none}
[data-theme=altruist] .blog-cta .btn{background:#000;color:#fff}
[data-theme=altruist] .blog-cta .btn:hover{box-shadow:0 0 0 4px rgba(0,0,0,.16)}
[data-theme=altruist] .why-head h2,[data-theme=altruist] .blog-head h2,[data-theme=altruist] .faq-intro h2,[data-theme=altruist] .why-tile .t20,[data-theme=altruist] .blog-copy h3,[data-theme=altruist] .faq .qrow p{color:#000}
/* the +/x glyph is drawn from --fg, so it follows the question text */
[data-theme=altruist] .faq .x::before,[data-theme=altruist] .faq .x::after{background:#000}
[data-theme=altruist] .why-tile,[data-theme=altruist] .blog-card,[data-theme=altruist] .faq{background:#fff;box-shadow:none}
/* Strokes off on CARDS only. --stroke stays a valid shadow value so it can still compose into
   comma-separated box-shadow lists; --line/--line2 are left alone because the nav bar hairline,
   the footer's Soon pills and the ghost buttons all read from them. .faq/.faqs hardcode
   var(--line) rather than --stroke, so they need nulling by hand. */
[data-theme=altruist]{--stroke:inset 0 0 0 0 transparent}
[data-theme=altruist] .faqs,[data-theme=altruist] .faq{box-shadow:none}
[data-theme=altruist] .blog-media,/* Media bleeds to the card's top and sides: no padding there, top corners inherit the card's
   radius and the bottom two are square where it meets the copy. Height stays at the base
   250px. The well drops its own stroke; flush to the card edge it would double the card's. */
/* Section headers run left in this theme; the base template centres them. The 64px
   header-to-body gap the template uses reads too loose here, so both come down to 40px. */
[data-theme=altruist] .why-head,[data-theme=altruist] .blog-head{text-align:left}
[data-theme=altruist] .why-head{margin-bottom:40px}
[data-theme=altruist] .blog-grid{margin-top:40px}
[data-theme=altruist] .why-head h2,[data-theme=altruist] .blog-head h2{margin-left:0;margin-right:0}
/* Blog: two posts, laid out horizontally. Media bleeds to the card's left edge the same way
   the why tiles bleed to their top, so it drops its own stroke and takes the card's radius on
   that side only. The third card is hidden rather than deleted — the markup is shared, and the
   other themes still run a three-up grid. */
[data-theme=altruist] .blog-card{padding:0;min-height:210px;overflow:hidden;
  display:grid;grid-template-columns:42% minmax(0,1fr);align-items:stretch}
[data-theme=altruist] .blog-media::after{box-shadow:none}

[data-theme=altruist] .why-tile{padding:0 0 26px;overflow:hidden}
[data-theme=altruist] .why-visual{box-shadow:none;border-radius:var(--r-card) var(--r-card) 0 0}
[data-theme=altruist] .why-tile .tx{padding:var(--pad-box) var(--pad-box) 0}

/* FAQ sits in its own light-blue band, cards a shade deeper so they still read as cards. */
/* Hard-edged band, in the same blue the footer fade passes through. */
[data-theme=altruist] .faqs{background:transparent;box-shadow:none;padding:0}
[data-theme=altruist] .faq{box-shadow:var(--stroke)}

/* The page fades into the footer's light blue instead of meeting it at a hard edge. */
/* The blue fade here dated from when the page ran light-blue bands; on #f5f5f5 it read as a
   stray tint, so the footer just sits on the page colour now. */
[data-theme=altruist] footer{padding:200px 0 48px;
  background:linear-gradient(180deg,rgba(222,239,248,0) 0%,#deeff8 58%,#deeff8 100%)}/* Light themes: content floats above the grain; grain textures only bg + hero backdrop */
[data-theme=altruist] section,[data-theme=altruist] .cta,[data-theme=altruist] footer{position:relative;z-index:6}[data-theme=altruist] .hero .inner,[data-theme=altruist] .hero .cue{z-index:6}/* SKY: hero sits on saturated blue photo — invert its text; nav follows only while over the hero */
[data-theme=altruist] .hero h1,[data-theme=altruist] .hero .sub{color:#fff}/* themed headlines wrap naturally (inline max-widths are tuned to Host Grotesk) */
[data-theme=altruist] .sec-h2{max-width:720px!important}


/* ================= Why (tiles + tall story card) ================= */
.why-head{text-align:center;margin-bottom:64px}
.why-head .eyebrow{margin:0 auto 10px}
.why-head h2{margin:0 auto;max-width:620px}
.why-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:stretch}
.why-tiles{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.why-tile{background:var(--card);border-radius:var(--r-card);
  box-shadow:var(--stroke);padding:var(--pad-card) var(--pad-card) 26px;display:flex;flex-direction:column}
/* The well is a CSS gradient with the (now transparent) UI art floating on top, so the
   gradient can be parallaxed independently — the old v2 assets had it baked in. The gradient
   layer is oversized vertically to give --gy room to travel. Same soft TL->BR pastel aesthetic
   as the baked ones; the stops below are lifted from those originals. */
/* The gradients are baked into the art now, so this is a single layer again. The source is
   1000x1000 in a 343x250 well, so `cover` leaves ~93px of vertical overflow — that surplus is
   the parallax travel, driven by --gy. The UI sits in the middle third of each square, so it
   stays clear of the crop at both ends of the range. */
.why-visual{height:250px;border-radius:var(--r-inner);overflow:hidden;box-shadow:var(--stroke);
  background:var(--ui) no-repeat center var(--gy,50%) / cover}
/* These are finished 1000px square Studio artboards, not loose UI cutouts. The card
   crops equal amounts from the artboard's generous top/bottom breathing room while
   preserving the authored background, component scale, depth, and centering. */
.why-visual-capture{background-position:center var(--gy,50%);background-size:cover}
.why-tile .tx{padding:var(--pad-box) 10px 0}
.why-tile .tx p:last-child{margin-top:10px;color:var(--gray);font-size:15px;line-height:1.55}
.why-story{position:relative;overflow:hidden;border-radius:var(--r-card);min-height:600px;will-change:background-position;
  background:
    radial-gradient(115% 85% at 100% 100%, rgba(255,216,231,.66), rgba(255,216,231,0) 58%)
      no-repeat center var(--gy,50%) / 100% 130%,
    linear-gradient(135deg,#93395a,#d48ca6) no-repeat center var(--gy,50%) / 100% 130%;
  display:flex;flex-direction:column;
  justify-content:flex-start;padding:0 var(--pad-box);--story-split:38%}
/* White type, so the pink has to be dark enough to carry it. The reference pastel measured
   1.57:1 behind the copy. These stops are the LIGHTEST pink (hue 338) that still clears AA
   across the band the copy actually sits in — the top 38%, which samples t 0.20-0.42 of the
   135deg ramp — landing at 4.55:1. Below the copy it lightens again, and the phone covers it. */
.why-story .body{position:relative;text-align:center;color:#fff;height:var(--story-split);
  display:flex;flex-direction:column;justify-content:center}
.why-story h3{font-family:var(--font-d);font-weight:var(--w-d);font-size:27px;line-height:1.25;color:#fff}
.why-story p{margin:12px 0 0;font-size:15px;line-height:1.55;color:#fff}
.why-story .plats{justify-content:center;margin-top:22px}
.why-story .plats a,.why-story .plats span{color:#fff}
/* The folded Fold 7 rising out of the card floor: .44131 body aspect, radius and bezel at the
   same 1.9% / 1.15% of height used everywhere else. Inset by --pad-card to line up with the
   tiles' media, anchored from the top so the copy clears it however tall the grid row ends up. */
.story-phone{position:absolute;left:var(--pad-card);right:var(--pad-card);top:var(--story-split);
  transform:translate3d(0,var(--uy,0px),0);will-change:transform;aspect-ratio:.44131;padding:8px;border-radius:14px;pointer-events:none;
  background:linear-gradient(100deg,#1a1f27 0%,#0c0f13 16%,#0a0d11 84%,#1e242c 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 0 0 .5px rgba(0,0,0,.55),
    0 10px 26px rgba(8,14,20,.34),0 26px 60px rgba(8,14,20,.26)}
.story-phone img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px}
.why-story .btn:hover{box-shadow:0 0 0 4px rgba(255,255,255,.22)}
.why-story .btn + .btn{margin-top:10px;background:rgba(255,255,255,.18);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.why-story .btn + .btn:hover{background:rgba(255,255,255,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}

/* ================= Responsive (simplified below desktop) ================= */
@media (max-width:1160px){
  .wrap{padding:0 32px}
  .fwrap,.fbar{padding:0 32px}
  .fwrap{grid-template-columns:1fr 1fr;gap:32px}
  .pcards{grid-template-columns:1fr 1fr}
  .why-grid{grid-template-columns:1fr}
  .why-story{min-height:520px}
  .vfaq .wrap{grid-template-columns:1fr;gap:42px}
  .faq-intro{position:static}
  .faqs{grid-template-columns:1fr}
}
/* A tablet asking for the desktop site can expose a tall, comparatively narrow
   viewport. Keep the product window below the complete download row instead of
   letting the absolutely positioned capture collide with it. Ordinary desktop
   windows (which are typically shorter at this width) retain the larger preview. */
@media (min-width:701px) and (max-width:1160px) and (min-height:800px){
  [data-theme=altruist]{--shot-peek:min(420px,36vh)}
  [data-theme=altruist] .hero{padding-top:64px}
  [data-theme=altruist] .hero .plats{margin-top:36px}
}
@media (max-width:700px){
  h1{font-size:40px;line-height:42px;letter-spacing:-1.1px}
  h2{font-size:28px;line-height:32px;letter-spacing:-.7px}
  .pcards,.why-tiles{grid-template-columns:1fr}
  section{margin-top:120px}
  .why-head{margin-bottom:32px}
  .why-visual{height:210px}
  .faqs{padding:0}
  /* below this the links move into a panel under the bar, opened by the burger */
  /* burger sits outboard of the wordmark, the usual place a thumb looks for it */
  .nav-burger{display:flex;grid-column:1;margin-left:-9px}
  nav .navin{grid-template-columns:auto auto 1fr;column-gap:4px}
  nav .brand{grid-column:2}
  /* grid-column:1/-1 matters: an abspos grid child is contained by its GRID AREA, so with
     the links pinned to track 2 the panel's left:0 resolved to the middle of the bar */
  nav .links{position:absolute;grid-column:1 / -1;top:calc(100% + 10px);left:0;right:0;z-index:2;
    flex-direction:column;align-items:stretch;gap:2px;padding:8px;
    background:#fff;border-radius:16px;box-shadow:0 14px 34px rgba(10,20,30,.18);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s}
  nav[data-open] .links{opacity:1;visibility:visible;transform:none}
  /* the panel is white whatever the bar is doing, so the links stay ink even over the hero */
  nav .links a,html[data-athero] nav .links a{color:var(--fg);padding:13px 14px;border-radius:11px}
  nav .links a:hover,html[data-athero] nav .links a:hover{color:var(--fg);background:rgba(0,0,0,.05)}
  /* nav shrinks with the viewport instead of eating it */
  nav{padding:16px}
  .navin{height:56px;padding:0 14px}
  nav .brand{font-size:18px}
  .nav-dl{height:36px;padding:0 14px;font-size:14px}
  /* hero: the shot is the smallest useful thing on the page, so give it back some height */
  .hero{padding-top:64px}
  .hero h1{max-width:none}
  .hero .sub{max-width:320px}
  /* the story card's copy band was 179px for a heading, three lines and two icons */
  .why-story{min-height:600px;--story-split:46%}
  .why-story h3{font-size:24px}
  /* section headers centre up on a narrow column */
  .why-head,.blog-head{text-align:center}
  .why-head h2,.blog-head h2{margin-left:auto;margin-right:auto}
  [data-theme=altruist] .why-head,[data-theme=altruist] .blog-head{text-align:center}
  .faq-intro{text-align:center}
  .faq-intro h2,.faq-intro>p{margin-left:auto;margin-right:auto}
  /* Charlie goes edge to edge; a floating rounded box wastes width at this size */
  #charlie,.crosscta{width:100%;max-width:none;margin:120px 0;border-radius:0;padding:48px 20px 0}
  #charlie h2,.crosscta h2{font-size:28px;line-height:32px}
  #charlie .ch-sub,.crosscta .ch-sub{font-size:15px}
  /* hero goes edge to edge like Charlie; the 16px inset and rounded top read as wasted
     margin at this size. Height picks up the 16px the top margin was using. */
  .hero{margin:0;border-radius:0;height:100svh;padding-inline:24px}
  /* Preserve the complete product frame edge-to-edge on phones. The shot keeps
     the hero's 12px layout inset, while the authored capture bleeds back to both
     viewport edges so no browser UI is cropped away. */
  [data-theme=altruist]{--shot-peek:min(470px,42svh)}
  [data-theme=altruist] .hero .shot{
    left:12px;right:12px;margin-inline:0;width:auto}
  [data-theme=altruist] .hero .shot .product-window{
    width:calc(100% + 24px);margin:0 0 0 -12px}
  [data-theme=altruist] .hero .shot img{width:100%;max-width:none}
  /* two columns, with the brand spanning both so its paragraph isn't crushed into 150px */
  .fwrap{grid-template-columns:1fr 1fr;gap:34px 24px}
  .fleft{grid-column:1 / -1}
  .fbar{flex-direction:column;gap:8px;margin-top:34px;padding-top:0;box-shadow:none}
  .fbar-right{justify-content:space-between;width:100%}
  footer{padding:32px 0}
}
@media (max-width:420px){
  h1{font-size:34px;line-height:37px;letter-spacing:-.8px}
  .hero .sub{font-size:15px}
  .hero .plats{gap:10px}
  .plats a,.plats span{width:40px;height:40px}
  .why-story{min-height:540px}
}


/* ============================================================================
   CHARLIE — the companion site.
   Same type, same geometry, same components. Only the hue rotates: Viola takes
   the blue-grey sky of the hero photograph, Charlie takes the amber horizon
   below it. Both inks already exist in the altruist pastel set, so the two
   sites read as one designer's work rather than two.
   ============================================================================ */
[data-site=charlie]{--fg:#6e4616;--card:#fff2e3;
  --line:rgba(110,70,22,.14);--line2:rgba(110,70,22,.2);
  --btn-bg:#6e4616;--btn-fg:#f5f5f5;--ring:rgba(110,70,22,.18)}
[data-site=charlie] footer{
  background:linear-gradient(180deg,rgba(255,234,209,0) 0%,#ffead1 58%,#ffead1 100%)}
[data-site=charlie] ::selection{background:#ffead1}
.crosscta .btn{background:#fff;color:var(--fg);box-shadow:none}

/* Charlie uses a compact two-by-two feature grid. Each card reads left to
   right — visual first, explanation second — rather than reserving half the
   section for a one-off chat-bubble illustration. */
[data-site=charlie] .why-grid{display:block}
[data-site=charlie] .why-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-site=charlie] .why-tile{
  display:grid;grid-template-columns:42% minmax(0,1fr);align-items:stretch;
  min-height:210px;padding:0;overflow:hidden}
[data-site=charlie] .why-tile .why-visual{
  height:auto;min-height:210px;border-radius:var(--r-card) 0 0 var(--r-card)}
[data-site=charlie] .why-tile .tx{
  display:flex;flex-direction:column;justify-content:center;padding:28px 26px}

/* Feature tiles carry a tinted panel until real Charlie captures exist. */
.why-visual[data-fill]{background:var(--fill) no-repeat center var(--gy,50%) / cover;
  display:flex;align-items:center;justify-content:center}
.why-visual[data-fill] svg{width:54px;height:54px;opacity:.82}

@media (max-width:700px){
  [data-site=charlie] .why-tiles{grid-template-columns:1fr}
  [data-site=charlie] .why-tile{grid-template-columns:36% minmax(0,1fr);min-height:180px}
  [data-site=charlie] .why-tile .why-visual{min-height:180px}
  [data-site=charlie] .why-tile .tx{padding:22px 20px}
}