/* ==========================================================================
   Zirafah Zenith Teknologi — main.css
   One stylesheet. Tokens -> base -> layout -> components -> utilities.
   No override stacking: every value has exactly one source of truth.
   ========================================================================== */

/* --- 1. TOKENS ---------------------------------------------------------- */
:root{
  /* colour */
  --ink:#171817;
  --ink-soft:#2a2b29;
  --muted:#555950;
  --paper:#fbfaf6;
  --cream:#f5f1e8;
  --white:#fffefb;
  --gold:#7a5b18;
  --gold-lt:#ead9a9;
  --line:rgba(23,24,23,.14);
  --line-inv:rgba(255,255,255,.16);

  /* type */
  --font-display:Georgia,"Times New Roman",serif;
  --font-body:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-xs:12px; --fs-sm:13.5px; --fs-base:15px; --fs-md:17px; --fs-lg:19px;

  /* space (4px scale) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:88px;

  /* layout */
  --max:1180px;
  --gutter:20px;
  --radius:0px;              /* deliberately square: editorial, not SaaS */
  --ease:cubic-bezier(.2,.75,.2,1);

  /* z-index ladder */
  --z-header:100;
  --z-menu:110;
  --z-skip:200;
}

/* --- 2. RESET / BASE ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:var(--fs-base); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
ul{list-style:none}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.08}
h1{font-size:clamp(32px,5vw,58px)}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:var(--fs-lg)}
p{max-width:70ch}

/* visible focus everywhere — WCAG 2.2 */
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:var(--z-skip);
  background:var(--ink);color:var(--white);padding:var(--s3) var(--s5);font-weight:700;
}
.skip:focus{left:0}

/* --- 3. LAYOUT ---------------------------------------------------------- */
.wrap{width:min(100% - (var(--gutter) * 2),var(--max));margin-inline:auto}
.section{padding:var(--s9) 0;border-top:1px solid var(--line)}
.section--dark{background:var(--ink);color:var(--white);border-top:0}
.section--cream{background:var(--cream);border-top:0}
.section--flush{border-top:0}

.head{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start;margin-bottom:var(--s7)}
.head p{color:var(--muted)}
.section--dark .head p{color:rgba(255,255,255,.78)}

.kicker{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:var(--s3);
}
.section--dark .kicker{color:var(--gold-lt)}
.lead{font-size:var(--fs-md);color:var(--muted);line-height:1.65}
.section--dark .lead{color:rgba(255,255,255,.78)}

/* --- 4. BUTTONS --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:14px 22px;font-size:14px;font-weight:700;
  border:1px solid var(--ink);transition:background .2s var(--ease),color .2s var(--ease);
  min-height:48px;                      /* touch target */
}
.btn--primary{background:var(--ink);color:var(--white)}
.btn--primary:hover{background:#000}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--white)}
.section--dark .btn--ghost{border-color:var(--line-inv);color:var(--white)}
.section--dark .btn--ghost:hover{background:var(--white);color:var(--ink)}
.btn--wa{background:#25D366;border-color:#25D366;color:#06210f}
.btn--wa:hover{background:#1eb857;border-color:#1eb857}

.textlink{color:var(--gold);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.textlink:hover{color:#5c440f}

/* --- 5. HEADER / NAV ---------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:var(--z-header);
  background:rgba(251,250,246,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
/* flex-shrink:0 always, on the wrapper, not just at desktop: a fixed-height
   auto-width image as a shrinkable flex item collapses to 0 width in a
   tight flex layout (the browser can't shrink width while height stays
   pinned), so the logo must never be a shrink target at any size. */
.header__logo{flex-shrink:0}
.header__logo img{height:42px;width:auto}
.nav__list{display:flex;gap:12px;font-size:14px;flex-wrap:nowrap}
/* Pad the clickable/focusable area to meet the WCAG 2.5.8 24px minimum
   (the text itself renders at ~17px) without changing visible spacing —
   the matching negative margin cancels the padding out for layout. */
.nav__list a{display:inline-block;padding:4px 2px;margin:-4px -2px;white-space:nowrap}
.nav__list a:hover,.nav__list a[aria-current=page],.nav__list a[aria-current=true]{color:var(--gold)}
.header__cta{display:flex;gap:var(--s2);align-items:center}
/* Logo and header buttons only need to hold their full size against the
   nav (preventing the squeeze that caused the nav to overflow) once the
   nav row is actually showing, at 1221px+. Below that the burger menu
   has already taken the nav's place, so these go back to shrinking
   normally — forcing them not to shrink at mobile widths pushed the
   burger button off-screen. */
@media (min-width:1221px){
  .header__logo{flex:none}
  .header__cta{flex:none}
}
/* The homepage nav runs 8 items (vs. 5 on inner pages) and doesn't fit
   next to the WhatsApp button inside the fixed 1180px container at any
   desktop width, so that secondary button steps aside here — the burger
   menu already covers it below 900px, same as everywhere else. */
.header--home .header__cta .btn--ghost{display:none}

/* language toggle — EN and ID are both live sites now (EN under /en/).
   A real <a> links to the other language; the current language renders
   as an inert, filled span (aria-current, no href, nothing to click). */
.langtoggle{display:flex;border:1px solid var(--ink);flex:none}
.langtoggle__item{
  display:flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 10px;
  font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink);
  text-decoration:none;
}
.langtoggle__item[aria-current=true]{background:var(--ink);color:#fff}
.langtoggle__item[aria-disabled=true]{opacity:.4;cursor:not-allowed}
a.langtoggle__item:hover,a.langtoggle__item:focus-visible{background:var(--cream)}

.burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;border:1px solid var(--line)}
.burger span{display:block;width:22px;height:2px;background:var(--ink);position:relative;transition:.25s var(--ease)}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink);transition:.25s var(--ease);
}
.burger span::before{top:-7px} .burger span::after{top:7px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}

.mobilenav{
  position:fixed;inset:0;z-index:var(--z-menu);background:var(--paper);
  padding:88px var(--gutter) var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);
  transform:translateY(-100%);visibility:hidden;transition:transform .3s var(--ease);
}
.mobilenav[data-open=true]{transform:translateY(0);visibility:visible}
.mobilenav[data-open=true]{transition:transform .3s var(--ease)}
/* The link list scrolls on its own; the CTA buttons sit in a flex-shrink:0
   footer below it so "Chat via WhatsApp" is always on screen without
   scrolling, even on short phones where 8 nav items + 2 buttons don't fit
   in one viewport (previously the whole panel scrolled together, so the
   WhatsApp button could end up cut off below the fold / under the browser
   chrome, looking broken rather than merely scrollable). */
.mobilenav__links{
  overflow-y:auto;flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;gap:var(--s2);
}
.mobilenav a{
  font-family:var(--font-display);font-size:24px;padding:var(--s4) 0;
  border-bottom:1px solid var(--line);
}
.mobilenav__cta{
  flex-shrink:0;display:flex;flex-direction:column;gap:var(--s2);
  padding-top:var(--s2);
}
.mobilenav .btn{justify-content:center}

/* --- 6. HERO ------------------------------------------------------------ */
.hero{background:var(--cream);padding:var(--s8) 0 0;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1fr 360px;gap:var(--s7);align-items:end}
.hero__badge{height:44px;width:auto;margin-bottom:var(--s5)}
.hero h1{margin:var(--s3) 0 var(--s5)}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s6) 0}
.hero__media{align-self:end;line-height:0;pointer-events:none;margin-bottom:-1px;position:relative}
.hero__media video,.hero__media img{
  width:100%;
  -webkit-mask-image:radial-gradient(150% 125% at 50% 100%,#000 74%,transparent 100%);
          mask-image:radial-gradient(150% 125% at 50% 100%,#000 74%,transparent 100%);
}
.hero__media::after{
  content:"";
  position:absolute;
  inset:4% 10% 8%;
  border:1px solid var(--gold);
  border-radius:50%;
  opacity:.5;
  pointer-events:none;
}

/* proof strip */
.proof{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof__item{padding:var(--s4) var(--s5) var(--s4) 0;margin-right:var(--s5)}
.proof__n{display:block;font-family:var(--font-display);font-size:22px;color:var(--ink)}
.proof__l{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.proof__note{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--s3);font-style:italic}

/* context bar under header */
.contextbar{background:var(--ink);color:rgba(255,255,255,.82);font-size:var(--fs-xs)}
.contextbar ul{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);padding:10px 0}
.contextbar li{position:relative;padding-left:14px}
.contextbar li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;background:var(--gold-lt)}

/* --- 7. CARD GRIDS ------------------------------------------------------ */
.grid{display:grid;gap:var(--s4)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--white);border:1px solid var(--line);padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s2);
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
a.card:hover{border-color:var(--ink);transform:translateY(-2px)}
.card h3{font-size:var(--fs-md)}
.card p{font-size:var(--fs-sm);color:var(--muted);flex:1;line-height:1.55}
.card__more{font-size:var(--fs-xs);font-weight:800;color:var(--gold);margin-top:auto}
.section--dark .card{background:var(--ink-soft);border-color:var(--line-inv)}
.section--dark .card p{color:rgba(255,255,255,.7)}

/* numbered process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.steps>div{background:var(--paper);padding:var(--s5)}
.steps__n{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--gold)}
.steps h3{font-size:var(--fs-md);margin:var(--s3) 0 var(--s2);color:var(--ink)}
.steps p{font-size:var(--fs-sm);color:var(--muted)}

/* value chain */
.chain{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s5)}
.chain span{
  border:1px solid var(--line);background:var(--white);color:var(--ink);
  padding:8px 14px;font-size:var(--fs-sm);font-weight:600;
}
.chain i{color:var(--gold);font-style:normal}

/* --- 8. PRICING --------------------------------------------------------- */
.tier{border:1px solid var(--line);background:var(--white);padding:var(--s6) var(--s5);display:flex;flex-direction:column}
.tier--feature{border:2px solid var(--ink);position:relative}
.tier__flag{
  position:absolute;top:-11px;left:var(--s5);background:var(--ink);color:var(--white);
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;
}
.tier__price{font-family:var(--font-display);font-size:28px;margin:var(--s3) 0 var(--s1)}
.tier__price small{font-size:var(--fs-sm);color:var(--muted);font-family:var(--font-body)}
.tier ul{margin:var(--s4) 0;flex:1}
.tier li{font-size:var(--fs-sm);padding:7px 0 7px 20px;position:relative;border-bottom:1px solid var(--line)}
.tier li::before{content:"→";position:absolute;left:0;color:var(--gold)}

/* --- 9. FAQ ------------------------------------------------------------- */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:var(--s5) 0;font-family:var(--font-display);font-size:var(--fs-md);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s5);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:var(--s5);color:var(--muted)}

/* --- 10. FORM ----------------------------------------------------------- */
.form{display:grid;gap:var(--s4)}
.field label{display:block;font-size:var(--fs-sm);font-weight:700;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);background:var(--white);
  font:inherit;font-size:14px;color:var(--ink);min-height:48px;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:2px solid var(--gold);outline-offset:1px}
.field__hint{font-size:var(--fs-xs);color:var(--muted);margin-top:4px}
.field__error{font-size:var(--fs-xs);color:#a3241d;margin-top:4px;display:none}
.field[data-invalid=true] input,.field[data-invalid=true] select,.field[data-invalid=true] textarea{border-color:#a3241d}
.field[data-invalid=true] .field__error{display:block}
.form__status{padding:var(--s4);border:1px solid var(--line);display:none;font-size:var(--fs-sm)}
.form__status[data-state=ok]{display:block;border-color:#1c7c3e;background:#f0f9f3}
.form__status[data-state=err]{display:block;border-color:#a3241d;background:#fdf2f1}
.hp{position:absolute;left:-9999px}   /* honeypot */

/* --- 11. FOOTER --------------------------------------------------------- */
.footer{background:var(--ink);color:rgba(255,255,255,.62);padding:var(--s8) 0 var(--s5);font-size:var(--fs-sm)}
.footer__cols{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s6);margin-bottom:var(--s7)}
.footer h4{font-family:var(--font-body);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:var(--s3)}
.footer li{margin-bottom:var(--s2)}
/* Pad the clickable/focusable area to meet the WCAG 2.5.8 24px minimum
   without changing visible spacing — negative margin cancels the padding
   out for layout. */
.footer a{display:inline-block;padding:4px 2px;margin:-4px -2px}
.footer a:hover{color:var(--white)}
.footer__base{border-top:1px solid var(--line-inv);padding-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;font-size:var(--fs-xs)}

/* --- 12. BREADCRUMB / ARTICLE ------------------------------------------- */
.crumb{font-size:var(--fs-xs);color:var(--muted);padding:var(--s5) 0 0}
.crumb a:hover{color:var(--gold)}
.prose h2{margin:var(--s7) 0 var(--s4)}
.prose h3{margin:var(--s6) 0 var(--s3)}
.prose p,.prose ul{margin-bottom:var(--s4);color:var(--muted)}
.prose ul{padding-left:var(--s5)}
.prose li{list-style:disc;margin-bottom:var(--s2)}
.prose strong{color:var(--ink)}

/* callout used for honest "not yet available" states */
.notice{border-left:3px solid var(--gold);background:var(--cream);padding:var(--s5);font-size:var(--fs-sm)}
.prose .notice{margin:var(--s5) 0}
/* Comparison tables: the wrapper scrolls sideways on narrow screens so the page itself never does. */
.tblwrap{overflow-x:auto;margin:var(--s5) 0;border:1px solid var(--line);background:var(--white)}
.tblwrap:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tbl caption{caption-side:top;text-align:left;font-size:var(--fs-xs);color:var(--muted);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.tbl th,.tbl td{text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{background:var(--cream);color:var(--ink);font-weight:700}
.tbl td{color:var(--muted)}
.tbl tbody tr:last-child td{border-bottom:0}
@media(max-width:600px){.tbl{font-size:var(--fs-xs)}.tbl th,.tbl td{padding:10px 10px}}

/* --- 13. RESPONSIVE ----------------------------------------------------- */
@media (max-width:1024px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .footer__cols{grid-template-columns:repeat(3,1fr)}
}
/* Header switches to the burger menu at 1220px rather than the 900px used
   elsewhere: the homepage nav (8 items) plus the header buttons don't fit
   in the fixed 1180px content width below that point, on any page. */
@media (max-width:1220px){
  .nav,.header__cta .btn--ghost{display:none}
  .burger{display:flex}
  .header__logo img{height:54px}
}
/* On phones, the logo + language toggle + a full "Konsultasikan Kebutuhan
   Anda" button don't fit next to the burger either — and that button is
   already duplicated inside the burger's mobile nav panel, so it steps
   aside here rather than overlapping. */
@media (max-width:560px){
  .header__cta .btn--primary{display:none}
  .header__logo img{height:46px}
  .header__bar{gap:8px}
  .langtoggle__item{min-width:44px;padding:0 6px}
}
@media (max-width:900px){
  .hero{padding-top:var(--s7)}
  .hero__grid{grid-template-columns:1fr;gap:var(--s5)}
  .hero__media{max-width:230px;margin:var(--s4) auto -1px;justify-self:center}
  .head,.grid--3,.grid--2{grid-template-columns:1fr;gap:var(--s5)}
  .section{padding:var(--s7) 0}
}
@media (max-width:620px){
  :root{--gutter:16px}
  .grid--4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr;gap:var(--s5)}
  .section{padding:var(--s6) 0}
  .proof__item{padding-right:var(--s4);margin-right:var(--s4)}
}
@media (max-width:360px){
  .hero__cta .btn{width:100%;justify-content:center}
}

/* --- 14. MOTION / PRINT ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
@media print{
  .header,.mobilenav,.hero__media,.footer{display:none}
  body{background:#fff;color:#000}
}

/* --- 15. VIDEO EMBED ----------------------------------------------------- */
.video-frame{position:relative;width:100%;padding-top:56.25%;background:var(--ink);overflow:hidden}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* SEO: card/step/footer titles as styled text, linked cards keep full-card click area */
.card__t,.steps__t{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.08;font-size:var(--fs-md);margin:0 0 var(--s2)}
.card .card__t,.section--dark .card .card__t{color:inherit;flex:none;font-size:var(--fs-md);line-height:1.08}
.steps p.steps__t{font-size:var(--fs-md);color:var(--ink);margin:var(--s3) 0 var(--s2)}
.steps__t{margin:var(--s3) 0 var(--s2);color:var(--ink)}
.card--link{position:relative;display:flex;flex-direction:column;transition:transform .15s,border-color .15s}
.card--link:hover{border-color:var(--ink);transform:translateY(-2px)}
.card--link .card__a{color:inherit;text-decoration:none}
.card--link .card__a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.card--link .card__a:focus-visible{outline:none}
.card--link:focus-within{outline:2px solid var(--gold,#b8892b);outline-offset:2px}
.footer__t{font-family:var(--font-body);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lt);margin:0 0 var(--s3);font-weight:600}

/* a11y: standalone links need a 24px+ target (WCAG 2.5.8); card titles already span the whole card via ::after */
.crumb a{display:inline-block;padding:8px 0}
.card p>a.textlink,.card p>a.textlink:only-child{display:inline-block;padding:6px 0}
.skip:focus{min-height:44px}
.csx{display:grid;gap:var(--s4);grid-template-columns:repeat(2,1fr);margin:var(--s5) 0}
.csx .card p{flex:none}
.csx .card h3{margin:0 0 var(--s2)}
.cs-facts{background:var(--cream);margin:var(--s5) 0}
.cs-facts p{flex:none;margin:0;color:var(--ink)}
.cs-tag{font-family:var(--font-display);font-size:var(--fs-md);font-style:italic;margin:var(--s6) 0 0;color:var(--ink)}
@media (max-width:900px){.csx{grid-template-columns:1fr}}
.lead>a.textlink{display:inline-block;padding:5px 0}
td>a.textlink,li>a.textlink,.wrap>p>a.textlink:only-child{display:inline-block;padding:5px 0}

.h1kick{display:block;font-family:var(--font-body);letter-spacing:.14em;line-height:1.4;margin-bottom:var(--s3)}
.prose ol.olist{padding-left:var(--s5);margin-bottom:var(--s4);color:var(--muted)}
.prose ol.olist li{list-style:decimal;margin-bottom:var(--s2)}
.byline{font-size:var(--fs-sm);color:var(--muted);margin-top:12px}
.ai-pr{margin-bottom:var(--s5)}
.ai-pr .card h3{margin-top:0}
.ai-num{font-family:var(--font-display);font-size:28px;color:var(--gold);line-height:1;margin-bottom:var(--s3)}
.ai-feat{margin-top:auto;padding-top:var(--s3);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.csx .card{display:flex;flex-direction:column}
.ai-src{margin-top:var(--s6);font-size:var(--fs-sm);color:var(--muted)}
.card p.ai-num{flex:none;font-family:var(--font-display);font-size:28px;line-height:1;color:var(--gold);margin:0 0 var(--s3)}
.card p.ai-feat{flex:none;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-top:var(--s3)}
.prose .ai-pr .card h3{margin:0 0 var(--s2)}
.nav__list a{min-width:24px;min-height:24px;text-align:center}