/* Public site — the brief's "Sesudah" mock, made real. Sections: header,
   hero (two cards), proof bar, logo bar, bento, narrative, product grid,
   testimonials, FAQ, CTA band, footer; plus page templates and calculators.
   Since 2026-09-26 corporate.css sits on top of this file and restyles the hero,
   proof bar, bento, narrative and product grid (ADR 007); read both before
   changing a homepage component. */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;color:var(--navy);font-size:1.15rem;text-decoration:none;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand .o{width:28px;height:28px;border-radius:50%;background:conic-gradient(var(--orange) 0 70%,var(--navy) 70% 100%);flex:none}
.brand em{color:var(--orange);font-style:normal}
/* An uploaded logo renders at the same height as the built-in wordmark, so the
   header keeps its height whichever is in use and nothing below it shifts. */
/* The HRKita logo is round, so it needs height for its lettering to read.
   Vida asked for it larger twice on 2026-10-01 ("terlalu kecil"); each size is
   the largest the header row holds at that width, measured in a browser in
   both languages with the trimmed logo (no empty margin around the circle):
   60px on a full desktop row, 40px in the tight 961-1200px row, 56px with the
   burger (tablets), 40px on phones, 30px on the smallest phones. From 1201px
   the nav links give up 1px of padding a side to make room for it. */
.brand-logo{height:60px;width:auto;max-width:220px;object-fit:contain;display:block}
@media (min-width:961px) and (max-width:1200px){.brand-logo{height:40px}}
@media (max-width:960px){.brand-logo{height:56px}}
@media (max-width:520px){.brand-logo{height:40px;max-width:160px}}
@media (max-width:374px){.brand-logo{height:30px}}
.site-footer .brand-logo{height:88px}
.nav-links{display:flex;gap:4px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links>li{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:5px;padding:10px 12px;border-radius:var(--r-sm);font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--ink-2);background:none;border:0;cursor:pointer;text-decoration:none}
.nav-link:hover,.nav-link[aria-expanded=true]{color:var(--navy);background:var(--surface-2);text-decoration:none}
.nav-link .caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.nav-link[aria-expanded=true] .caret{transform:rotate(225deg) translateY(-2px)}
.menu{position:absolute;top:calc(100% + 8px);left:0;min-width:300px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:10px;display:grid;gap:2px}
.menu[hidden]{display:none}
.menu a{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none}
.menu a:hover{background:var(--surface-2)}
.menu a b{font-family:var(--display);font-weight:700;font-size:.92rem;color:var(--navy)}
.menu a small{color:var(--ink-3);font-size:.82rem;line-height:1.35}
.nav-cta{display:flex;gap:10px;align-items:center}
.lang-switch{display:inline-flex;align-items:stretch;border:1.5px solid var(--line-2);border-radius:var(--r-pill);overflow:hidden;font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.04em}
.lang-switch > *{padding:10px 14px;min-height:44px;min-width:46px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);text-decoration:none}
.lang-switch a{cursor:pointer}
.lang-switch a:hover,.lang-switch a:focus-visible{background:var(--surface-2);color:var(--navy);text-decoration:none}
.lang-switch .on{background:var(--navy);color:var(--white)}
/* Light/dark switch in the header. The button itself (size, icon swap, the
   [hidden] rule) is in base.css, because the admin layout uses it too; only
   its header placement lives here. */
/* The labelled form, a full-width row at the end of the burger menu. Its <li>
   is off until the 960px block below turns it on. */
.theme-toggle--row{display:flex;justify-content:flex-start;gap:10px;width:100%;padding:0 12px;border:0;border-radius:var(--r-sm);font-family:var(--display);font-weight:600;font-size:.92rem}
.nav-theme{display:none}
.nav-burger{display:none;background:none;border:1.5px solid var(--line-2);border-radius:var(--r-sm);width:44px;height:44px;flex:none;place-items:center;cursor:pointer;color:var(--navy)}
.nav-burger:hover{background:var(--surface-2)}
/* Header widths. The burger menu stays at 960px and below (Vida, 2026-09-30:
   keep the original burger). Above that the full row (logo, seven nav items,
   language pill, theme switch, calculator button, demo button) is about 1215px
   wide in English, so from 961px it made every page scroll sideways up to
   about 1176px (measured 2026-09-30). The row now sheds width in three steps
   instead; the widths were measured in a browser, in both languages:
     961-1200px   tight: no calculator button (it stays in the Kepatuhan menu
                  and on the homepage), no arrow in the demo button, 5px
                  nav padding, no gap between items, and the text
                  wordmark (shown when no logo is uploaded) reduced to its mark;
     1201-1319px  no calculator button, 8px nav padding;
     from 1320px  everything, 8px nav padding. The row must fit the 76rem
                  page column, which the English labels at 12px did not.
   The text wordmark is about 68px wider than the uploaded logo, so without a
   logo the calculator button stays hidden at every width.
   A new nav item, a longer label or a wider logo changes these sums:
   re-measure (header_fit_test pins the rules, it cannot measure pixels).
   The side padding is NOT narrowed here: the header shares the page's padding
   so its edges line up with the content below (a 16px header padding over a
   40px page made the screen look unfinished, Vida 2026-10-01). Only the
   320px phone tier below narrows it, where the row does not fit otherwise. */
@media (min-width:961px){.nav-link{padding-inline:8px}}
/* 7px from 1201px: room for the 48px logo (see .brand-logo). */
@media (min-width:1201px){.nav-link{padding-inline:7px}}
@media (min-width:961px) and (max-width:1319px){.nav-cta .btn-ghost{display:none}}
.site-header:not(:has(.brand-logo)) .nav-cta .btn-ghost{display:none}
@media (min-width:961px) and (max-width:1200px){
  .nav{gap:10px}
  .nav-links{gap:0}
  .nav-link{padding-inline:5px}
  .nav-cta{gap:6px}
  .nav-cta .btn-arrow__icon{display:none}
  /* Without its icon the arrow button needs its ordinary right padding back
     (corporate.css trims it to 4px to hug the icon). */
  .nav-cta .btn-sm.btn-arrow{padding-right:14px}
  .brand>span:not(.o){display:none}
}
/* Phones. The burger row (logo, language pill, demo button, burger) needs
   391px in Indonesian: it ate the side padding at 390px and scrolled sideways
   at 360px (measured 2026-09-30). The burger itself keeps its design; the
   other three give way. At 480px and below the demo button loses its arrow and
   the text wordmark shrinks to its mark; at 374px and below (360px phones) the
   language pill, the demo button and the gaps tighten; at 339px and below
   (320px phones) they tighten once more and the side padding drops to 12px. */
@media (max-width:480px){
  .nav-cta .btn-arrow__icon{display:none}
  .nav-cta .btn-sm.btn-arrow{padding-right:14px}
  .brand>span:not(.o){display:none}
}
@media (max-width:374px){
  .nav{gap:6px}
  .nav-cta{gap:6px}
  .lang-switch > *{min-width:38px;padding-inline:8px}
  .nav-cta .btn-sm.btn-arrow{padding-inline:10px}
}
@media (max-width:339px){
  .wrap.nav{padding-inline:12px}
  .lang-switch > *{min-width:34px;padding-inline:6px}
  .nav-cta .btn-sm.btn-arrow{padding-inline:8px;font-size:.76rem}
}
@media (max-width:960px){
  /* The icon-only theme switch leaves the row here; its labelled twin shows
     as the last line of the open menu. */
  .nav-links,.nav-cta .btn-ghost,.nav-cta .theme-toggle{display:none}
  .site-header.open .nav-theme{display:block}
  .nav-burger{display:grid}
  .nav{min-height:64px;gap:10px}
  /* The demo CTA stays visible but must never crowd the burger off the row. */
  .nav-cta{gap:8px;margin-left:auto}
  .brand{font-size:1.05rem}
  .site-header.open .nav-links{display:grid;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);padding:12px clamp(16px,4vw,40px) 20px;gap:2px;box-shadow:var(--shadow-2)}
  .site-header.open .nav-links>li{width:100%}
  .site-header.open .menu{position:static;box-shadow:none;border:0;padding:0 0 8px 12px;min-width:0}
}
/* Hero: two cards */
.hero{padding-block:var(--s5) var(--s6)}
.hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--s4);align-items:stretch}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}
.hcard{background:var(--navy);color:var(--white);border-radius:var(--r-xl);padding:clamp(26px,4vw,40px);position:relative;overflow:hidden;display:grid;align-content:start;gap:var(--s5)}
.hcard::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 80% 0%,var(--black) 10%,transparent 65%);pointer-events:none}
.hcard>*{position:relative}
.hcard h1{color:var(--white);font-size:var(--fs-d3);max-width:22ch;letter-spacing:-.02em}
.hcard h1 mark{background:none;color:var(--orange)}
.hcard .q{font-family:var(--display);font-weight:600;font-size:var(--fs-base);color:var(--on-navy-2);margin-bottom:var(--s3)}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:520px){.chips{grid-template-columns:1fr 1fr}}
.chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px;font-family:var(--display);font-weight:600;font-size:var(--fs-md);line-height:1.3;color:var(--white);display:grid;grid-template-rows:auto 1fr;gap:8px;align-content:start;text-decoration:none;transition:background .15s,border-color .15s;min-height:76px}
.chip:hover{background:rgba(255,255,255,.14);border-color:rgba(250,170,33,.6);text-decoration:none}
.chip i{width:14px;height:14px;border:1.5px solid var(--orange);border-radius:50%;display:block}
.hero-acts{display:flex;gap:var(--s3);flex-wrap:wrap}
@media (max-width:560px){.hero-acts{display:grid}.hero-acts .btn{width:100%}}
.pcard{background:var(--surface-2);border-radius:var(--r-xl);overflow:hidden;display:grid;grid-template-rows:1fr auto;gap:16px;padding:var(--s5) var(--s5) 0;min-height:360px}
.pcard img{border-radius:12px 12px 0 0;box-shadow:var(--shadow-3);object-fit:cover;object-position:top;width:100%;aspect-ratio:4/3;align-self:end}
.pcard .cap{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink-3);line-height:1.5}
/* With a real photograph the card IS the photograph: no padding, no inner
   frame, filling the full height of the hero row so it squares up with the
   navy card beside it. The padded variant above exists for the placeholder
   mock, which is a fake screenshot and reads correctly peeking up from the
   bottom of a card. A photo in that frame reads as a picture hung on a grey
   wall, which is what Vida saw on 13 Sep 2026. */
.pcard--photo{padding:0;gap:0;grid-template-rows:1fr;background:var(--navy)}
/* `contain`, not `cover`, and this is deliberate. The hero image is usually a
   designed graphic with labels near its edges, and cropping it to the card's
   near-square shape cut the logo and three role labels off (observed
   13 Sep 2026). Contain shows the whole image every time; the navy behind it
   is the same navy as the card on the left, so the bands read as part of the
   composition rather than as empty space. A photograph whose edges do not
   matter can be cropped by the uploader before uploading; a graphic whose
   edges carry meaning cannot be repaired after the fact. */
.pcard--photo img{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;object-fit:contain;object-position:center;align-self:stretch}
@media (max-width:860px){.pcard--photo{min-height:280px}.pcard--photo img{aspect-ratio:16/10;height:auto}}
.photo-slot{border:1.5px dashed var(--line-2);border-radius:var(--r-lg);display:grid;align-content:center;justify-items:center;gap:var(--s2);text-align:center;padding:var(--s5);min-height:120px;color:var(--ink-3)}
.photo-slot span{font-family:var(--display);font-weight:700;font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase}
.photo-slot small{font-size:var(--fs-md);max-width:34ch;line-height:1.45}
/* Mini product shot (placeholder until a real screenshot is uploaded) */
.mshot{background:var(--surface);border-radius:12px 12px 0 0;box-shadow:var(--shadow-3);padding:16px 16px var(--s4);color:var(--ink);font-size:var(--fs-sm);width:100%;align-self:end;max-width:100%;overflow:hidden}
.mshot .tabs{display:flex;gap:var(--s2);margin-bottom:var(--s3);flex-wrap:wrap}
.mshot .tabs span{padding:4px var(--s3);border-radius:6px;background:var(--surface-2);color:var(--ink-2);font-family:var(--display);font-weight:600;font-size:var(--fs-xs)}
.mshot .tabs span.on{background:var(--navy);color:var(--white)}
.mshot .kp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:var(--s3)}
.mshot .kp div{border:1px solid var(--line);border-radius:8px;padding:8px var(--s3)}
.mshot .kp small{color:var(--ink-3);display:block;font-size:var(--fs-xs)}
.mshot .kp b{font-family:var(--display);font-size:var(--fs-lg);color:var(--navy)}
.mshot table{border-collapse:collapse;width:100%;font-size:var(--fs-xs)}
.mshot th{background:var(--bg);color:var(--ink-3);font-size:var(--fs-2xs);padding:var(--s2) 8px;letter-spacing:.04em;text-align:left;text-transform:uppercase}
.mshot td{padding:var(--s2) 8px;border-bottom:1px solid var(--surface-2);white-space:nowrap}
@media (max-width:620px){
  .mshot th:nth-child(3),.mshot td:nth-child(3),.mshot th:nth-child(4),.mshot td:nth-child(4){display:none}
  .mshot .kp{grid-template-columns:1fr 1fr}
  .mshot .kp div:last-child{grid-column:span 2}
}
.tag{display:inline-block;padding:1px var(--s2);border-radius:999px;font-size:var(--fs-2xs);font-weight:700;font-family:var(--display)}
.tag.g{background:var(--ok-bg);color:var(--ok)}.tag.y{background:var(--warn-bg);color:var(--warn)}
/* Proof bar + logos */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:var(--s5)}
@media (max-width:560px){.proof{grid-template-columns:1fr}}
.proof div{font-family:var(--display);background:var(--surface);padding:16px var(--s4)}
.proof strong{display:block;font-size:var(--fs-2xl);font-weight:800;color:var(--navy);letter-spacing:-.01em;line-height:1.15;margin-bottom:2px}
.proof small{color:var(--ink-3);font-size:var(--fs-sm);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.logos{display:flex;align-items:center;justify-content:flex-start;gap:var(--s4) var(--s5);flex-wrap:wrap;padding-block:var(--s5) var(--s2);font-family:var(--display);font-weight:700;color:var(--ink-3);font-size:var(--fs-md)}
.logos small{color:var(--ink-3);font-weight:600;font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;width:100%;margin-bottom:2px}
.logos img{height:28px;width:auto;max-width:120px;object-fit:contain;filter:grayscale(1);opacity:.75}
.logos .name{letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
/* Sections */
.section{padding-block:clamp(56px,8vw,var(--s9))}

/* ---- Section grounds -----------------------------------------------------
   A long page needs a rhythm, not one flat colour: alternating grounds tell a
   reader where one idea ends and the next begins, which is the composition the
   brief takes from Deel (almost monochrome, one accent, changes of ground
   rather than changes of hue).

   Each variant REDEFINES ITS TEXT TOKENS rather than only setting a
   background. That is the whole point: a tinted ground darkens the muted and
   eyebrow colours so they still clear 4.5:1, and the dark ground flips them
   entirely. Anything dropped inside a section — a card, a badge, a table —
   then adapts without knowing which ground it is on. Setting only
   `background` here would quietly push muted text to 3.9:1 on the pale tint. */
.section--paper{background:var(--paper)}
.section--tint,.section.alt{background:var(--surface-2);--ink-3:var(--ink-3-on-tint);--orange-text:var(--orange-text-on-tint)}
.section--pale{background:var(--pale);--ink-3:var(--ink-3-on-tint);--orange-text:var(--orange-text-on-tint);--surface:var(--surface-on-pale);--line:var(--line-on-pale)}
.section--navy,.section.navy{
  background:var(--navy);
  --ink:var(--white); --ink-2:var(--on-navy-2); --ink-3:var(--on-navy-3);
  --orange-text:var(--orange); --action:var(--action-on-navy);
  --surface:rgba(255,255,255,.06); --surface-2:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.24);
  color:var(--ink);
}
.section--navy h1,.section--navy h2,.section--navy h3,.section--navy h4,.section.navy h2,.section.navy h3{color:var(--white)}
/* A hairline between two sections that share a ground, so the rhythm survives
   when two neutral sections sit together. */
.section--ruled{border-top:1px solid var(--line)}
.sec-head{display:grid;gap:var(--s3);margin-bottom:var(--s6);max-width:none}
.sec-head h2{max-width:30ch}
@media (min-width:1100px){.sec-head h2{max-width:46ch}}
.sec-head .lede{max-width:56ch}
/* A heading alone leaves the right half of every section empty. The split head
   puts the title on the left and the sentence that qualifies it on the right,
   so the band reads as one composed row rather than a label floating over a
   grid. Collapses to one column before the two halves get narrow. */
.sec-head--split{max-width:none;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px var(--s7);align-items:end}
.sec-head--split .eyebrow{grid-column:1}
.sec-head--split h2{grid-column:1}
.sec-head--split .lede{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:48ch;padding-bottom:4px}
@media (max-width:860px){
  .sec-head--split{grid-template-columns:1fr}
  .sec-head--split .lede{grid-column:1;grid-row:auto}
}
/* Bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s4)}
.mb{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);font-size:var(--fs-base);color:var(--ink-2);display:grid;align-content:start;gap:8px;text-decoration:none;transition:border-color .15s,box-shadow .15s}
a.mb:hover{border-color:var(--line-2);box-shadow:var(--shadow-2);text-decoration:none}
.mb h3{font-size:var(--fs-lg);color:var(--navy)}
.mb.w3{grid-column:span 3}.mb.w2{grid-column:span 2}.mb.w4{grid-column:span 4}.mb.w6{grid-column:span 6}
.mb .ic{width:34px;height:34px;border-radius:8px;background:var(--warn-bg);display:grid;place-items:center;color:var(--navy);font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;letter-spacing:.02em}
.mb .calc{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:var(--s2);font-family:var(--mono);font-size:var(--fs-sm)}
.mb .calc div{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px}
.mb .calc small{display:block;color:var(--ink-3);font-size:var(--fs-2xs)}
.mb .calc b{color:var(--navy);font-size:var(--fs-md)}
.mb .more{color:var(--action);font-family:var(--display);font-weight:700;font-size:var(--fs-base);margin-top:auto}
.mini-list{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:var(--s2);font-size:var(--fs-base)}
.mini-list li{display:flex;gap:var(--s2);align-items:flex-start}
.mini-list li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--orange);margin-top:8px}
/* A full-width bento cell reads better as a banner than as a tall card: the
   text takes the left, the action sits at the right edge where the eye exits. */
.mb--wide{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s5)}
.mb--wide > div{display:grid;gap:8px}
.mb--wide .more{margin-top:0;white-space:nowrap}
@media (max-width:760px){.mb--wide{grid-template-columns:1fr}.mb--wide .more{margin-top:4px}}
/* The proof band is a thin rest between the hero and the first real section. */
.trust-band{background:var(--bg);border-top:1px solid var(--line);padding-block:var(--s4) var(--s5)}
@media (max-width:860px){.bento{grid-template-columns:1fr 1fr}.mb.w3,.mb.w4,.mb.w2,.mb.w6{grid-column:span 2}}
@media (max-width:520px){.bento{grid-template-columns:1fr}.mb.w3,.mb.w4,.mb.w2,.mb.w6{grid-column:span 1}}
/* Narrative 3 panels */
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s4);counter-reset:panel}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);display:grid;gap:var(--s3);align-content:start}
.panel::before{counter-increment:panel;content:"0" counter(panel);font-family:var(--mono);color:var(--ink-3);font-size:var(--fs-md)}
.panel h3{color:var(--navy)}
.panel p{color:var(--ink-2);font-size:var(--fs-base)}
/* Product grid cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s4)}
.pcardx{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);display:grid;gap:var(--s3);align-content:start;text-decoration:none;color:var(--ink-2)}
.pcardx:hover{text-decoration:none;box-shadow:var(--shadow-2)}
.pcardx h3{color:var(--navy)}
.pcardx .tagline{font-size:var(--fs-base)}
/* Testimonials */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s4)}
.quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:grid;gap:var(--s4)}
.quote p{font-size:var(--fs-lg);color:var(--ink);line-height:1.5}
.quote footer{font-size:var(--fs-base);color:var(--ink-3)}
.quote footer b{display:block;color:var(--ink);font-family:var(--display)}
/* FAQ */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(22rem,1fr));gap:var(--s3);max-width:none;align-items:start}
/* One column once two would be narrower than a comfortable question. */
@media (max-width:820px){.faq{grid-template-columns:1fr;max-width:var(--measure)}}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0}
.faq summary{cursor:pointer;padding:16px var(--s5);font-family:var(--display);font-weight:700;color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::after{content:"+";font-weight:400;color:var(--ink-3);font-size:var(--fs-2xl);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 var(--s5) var(--s4);color:var(--ink-2)}
/* CTA band */
.cta-band{background:var(--navy);border-radius:var(--r-xl);padding:clamp(28px,5vw,48px);color:var(--white);display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center}
.cta-band h2{color:var(--white)}
.cta-band p{color:var(--on-navy-2)}
.cta-band .acts{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:flex-end}
@media (max-width:760px){.cta-band{grid-template-columns:1fr}.cta-band .acts{justify-content:flex-start}}
/* Page header (inner pages) */
.page-head{padding-block:var(--s6) var(--s5);display:grid;gap:var(--s3);max-width:none}
/* A heading is scanned, not read line after line, so the measure does not
   apply to it — it may run the full column. `text-wrap:balance` (set on every
   heading in base.css) then splits it evenly if it does need a second line,
   rather than leaving one orphaned word. Until 2026-10-01 it was capped at
   26ch below 1100px, which on a tablet kept a long article title in a narrow
   block with the right side of the banner empty (Vida: "tidak proporsional
   kalau di resize"); the cap is gone so the title follows the width. */
.page-head h1{font-size:var(--fs-d2);line-height:1.08;max-width:none}
.page-head .lede{font-size:var(--fs-xl);max-width:60ch}
.page-head .muted{max-width:60ch}
/* Company profile (/profil-perusahaan): a 1920px slide document scaled to the column by
   fit_frame_controller.js. Without JS (no .is-fitted) the frame scrolls inside a 16:9 box. */
.profile-frame{position:relative;overflow:auto;aspect-ratio:16/9;max-width:100%;margin-block:var(--s4) var(--s6);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.profile-frame iframe{display:block;width:1920px;border:0;transform-origin:0 0}
.profile-frame.is-fitted{overflow:hidden;aspect-ratio:auto}
/* Article head: the title runs the full banner width (two balanced lines on a
   laptop instead of three or four squeezed ones) and the excerpt beneath it
   gets a wider measure, so a long title never sits in a narrow block with the
   right side of the banner empty. */
.page-head--article h1{font-size:var(--fs-d2)}
.page-head--article .lede{max-width:72ch;margin-top:var(--s2)}
/* .page-head--split USED to put the title left and the lede right. Vida,
   2026-10-01: every page head must behave like the article and product heads
   she approved, "samakan semua behaviour nya": eyebrow, title, then the lede
   paragraphs stacked beneath it at a 72ch measure. A short title beside two
   paragraphs left a large empty block under the title on solution pages. The
   class is kept so the views need no change; it is now just the stacked head
   with a wider lede. */
.page-head--split{grid-template-columns:1fr}
.page-head--split .lede,.page-head--article .lede{max-width:72ch}
.page-head--split .lede + .lede{margin-top:2px}
/* Two intro paragraphs side by side instead of one measure-capped column with
   an empty right half. A grid, not CSS columns: these are two distinct
   paragraphs that should stay whole, not one text stream cut in the middle.
   minmax(26rem,1fr) means they stack on their own below roughly 900px, so the
   measure is never stretched past comfort and never squeezed below it. */
.page-lead{display:grid;grid-template-columns:repeat(auto-fit,minmax(26rem,1fr));gap:var(--s5) var(--s7);align-items:start;max-width:none;margin-top:var(--s3)}
.page-lead > *{max-width:60ch;margin:0}

/* The working-method note as a full-width band: its label sits in its own
   column so the body keeps a readable measure without leaving the right side
   of the section empty. Below 860px it collapses to label over body. */
.callout--band{display:grid;grid-template-columns:minmax(11rem,1fr) 2.2fr;gap:var(--s3) var(--s6);align-items:start;max-width:none}
.callout--band .callout-label{color:var(--ink);font-family:var(--display);font-weight:700}
.callout--band p{margin:0;max-width:68ch}
@media (max-width:860px){.callout--band{grid-template-columns:1fr}}
/* The article's opening paragraph: body size, slightly darker than the rest so
   it still reads as an opening without becoming a second lede. */
.opening{color:var(--ink-2);font-size:var(--fs-lg)}
.two-col{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr);gap:var(--s6) var(--s7);align-items:stretch}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}
.sticky{display:grid;align-content:start;gap:var(--s4)}
.sticky > *{position:sticky;top:100px}
@media (max-width:860px){.sticky > *{position:static}}
/* Compact navigation list for an aside: the other modules, so the column
   carries something useful for the whole length of the article. */
.side-list{list-style:none;padding:0;margin:0;display:grid}
.side-list li{border-bottom:1px solid var(--line)}
.side-list li:last-child{border-bottom:0}
.side-list a{display:grid;gap:2px;padding:12px 0;text-decoration:none;color:var(--ink)}
.side-list a:hover{text-decoration:none}
.side-list a:hover b{color:var(--action)}
.side-list b{font-family:var(--display);font-weight:600;font-size:var(--fs-base)}
.side-list small{color:var(--ink-3);font-size:var(--fs-md);line-height:1.4}
.after-cols{padding-top:var(--s6);margin-top:var(--s6);border-top:1px solid var(--line);max-width:none}
.after-cols > .prose:not(.prose--cols){max-width:var(--measure)}
.prose .feature-list,.feature-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;max-width:var(--measure)}
.feature-list li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2)}
.feature-list li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--ok-bg);margin-top:4px;box-shadow:inset 0 0 0 5px var(--ok-bg),inset 0 0 0 7px var(--ok)}
.claims-table td:first-child{width:100%}
.claims-table td:last-child{white-space:nowrap;text-align:right}
.claims-table tbody tr:hover{background:var(--surface-2)}
.product-shot{border-radius:var(--r-lg);border:1px solid var(--line);margin-bottom:var(--s5);width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
/* Calculator */
.calc-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:grid;gap:var(--s4)}
.calc-box .result{background:var(--navy);color:var(--white);border-radius:var(--r-lg);padding:var(--s5);display:grid;gap:12px}
.calc-box .result small{color:var(--on-navy-3);font-family:var(--display);font-weight:600;font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase}
.calc-box .result .big{font-family:var(--display);font-weight:800;font-size:var(--fs-d4);letter-spacing:-.02em;line-height:1.05}
.calc-box .result .row{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:var(--fs-base);color:var(--on-navy-2);border-top:1px solid rgba(255,255,255,.15);padding-top:8px}
.calc-box .result .row b{color:var(--white);font-family:var(--mono);font-weight:500}
.calc-box .note{font-size:var(--fs-md);color:var(--ink-3)}
/* Loading state: the previous result stays readable but visibly stale while
   the next one is computed. No spinner — the swap is server-fast and a
   spinner that flashes for 80ms is noise. */
.calc-box turbo-frame[aria-busy="true"]{opacity:.45;transition:opacity .12s ease-out}
.calc-box .result.warn{background:var(--warn-bg);color:var(--warn)}
.calc-box .result.warn small{color:var(--warn)}
/* Team, clients, posts */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4)}
.people--cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.people--cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.people--cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){.people--cols-3,.people--cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.people[class*="people--cols-"]{grid-template-columns:1fr}}
/* align-content:start: without it the grid rows stretch to the tallest card in
   the row, opening large gaps between name, title and bio (seen 2026-10-13). */
.person{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);display:grid;gap:var(--s2);align-content:start}
.person .avatar{width:64px;height:64px;border-radius:50%;background:var(--pale);display:grid;place-items:center;font-family:var(--display);font-weight:800;color:var(--navy);font-size:var(--fs-2xl);overflow:hidden}
.person .avatar img{width:100%;height:100%;aspect-ratio:1;object-fit:cover}
.person b{font-family:var(--display);color:var(--ink)}
.person small{color:var(--ink-3)}
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.logo-grid div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-height:84px;display:grid;place-items:center;padding:var(--s4);font-family:var(--display);font-weight:700;color:var(--ink-2);text-align:center;font-size:var(--fs-base)}
.logo-grid img{max-height:44px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.8}
.post-list{display:grid;gap:var(--s4)}
.post-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);display:grid;gap:8px}
.post-item h3 a{color:var(--navy)}
.post-meta{font-family:var(--mono);font-size:var(--fs-sm);color:var(--ink-3)}
.post-cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--line);margin-bottom:var(--s5)}
/* Decorative page photograph under an inner page's heading. It carries no
   claim, so its alt text describes the scene and never the product. */
.page-hero{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--line);margin-bottom:var(--s6);display:block}
/* Gallery. The card image and every photo state an aspect-ratio so the grid
   holds its shape before the images arrive; without it a gallery page jumps
   several screens as each photo lands (CLS). */
/* auto-FILL, not auto-fit: a section with one gallery keeps a card-sized card
   instead of stretching a single photograph across the full width. */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:var(--s4);max-width:none}
.gallery-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit}
.gallery-card:hover{border-color:var(--line-2);text-decoration:none}
.gallery-card__media{display:block;width:100%;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden}
.gallery-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.gallery-card:hover .gallery-card__media img{transform:scale(1.04)}
.gallery-card__body{display:grid;gap:var(--s2);padding:var(--s4) 16px;justify-items:start}
.gallery-card__body b{font-family:var(--display);color:var(--navy)}
.gallery-card__body small{color:var(--ink-3);font-size:var(--fs-md)}

@media (max-width:700px){.page-hero{aspect-ratio:16/9}}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.metric b{display:block;font-family:var(--display);font-size:var(--fs-3xl);color:var(--navy);letter-spacing:-.01em}
.metric small{color:var(--ink-3);font-size:var(--fs-md);font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-family:var(--display)}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s4)}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:grid;gap:var(--s3);align-content:start}
.tier.featured{border-color:var(--navy);box-shadow:var(--shadow-2)}
.tier .price{font-family:var(--mono);color:var(--ink-3);font-size:var(--fs-md)}
/* Footer */
.site-footer{background:var(--navy);color:var(--on-navy-2);margin-top:var(--s8);padding-block:var(--s7) var(--s5)}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s6)}
@media (max-width:860px){.site-footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.site-footer .cols{grid-template-columns:1fr}}
.site-footer h4{color:var(--white);margin-bottom:var(--s3);font-size:var(--fs-md);letter-spacing:.08em;text-transform:uppercase}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:var(--fs-base)}
.site-footer a{color:var(--on-navy-2)}.site-footer a:hover{color:var(--white)}
.site-footer .brand{color:var(--white)}
.site-footer .bottom{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:var(--fs-md);color:var(--on-navy-3)}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:40;background:var(--ok);color:var(--white);border-radius:var(--r-pill);padding:12px var(--s4);font-family:var(--display);font-weight:700;box-shadow:var(--shadow-2);display:inline-flex;gap:8px;align-items:center;text-decoration:none}
.wa-float:hover{text-decoration:none;filter:brightness(1.05)}
.breadcrumb{font-size:var(--fs-md);color:var(--ink-3);display:flex;gap:8px;flex-wrap:wrap;padding-top:var(--s5)}
.breadcrumb a{color:var(--ink-3)}
/* ---- Images inside editor content (ActionText attachments) ---------------
   An image uploaded through Trix renders as <figure class="attachment"> with a
   <figcaption> that Rails fills with the FILENAME and BYTE SIZE. Unstyled,
   that is what shipped: a small "images.jpg 12.1 KB" sitting at its natural
   size against the left margin.

   Two decisions here, both deliberate:

   1. The default caption is HIDDEN. "images.jpg 12.1 KB" is metadata for the
      person who uploaded the file, never for the reader. Rails marks a caption
      the author actually typed with `attachment__caption--edited`, and only
      that one is shown — so a real caption still works.
   2. The image fills the reading measure and gets the card radius, so an
      article image reads as part of the page rather than as an attachment
      stuck to it (the Deel article composition in the brief: one column, wide
      image, generous space, no chrome). */
/* break-inside:avoid because article bodies render in two CSS columns
   (.prose--cols): without it a figure is sliced, image at the bottom of one
   column and caption at the top of the next. */
.prose .attachment{margin:var(--s6) 0;display:grid;gap:var(--s3);break-inside:avoid}
/* Important information in an article (Post#highlight_lines, HighlightArticle).
   Orange text, not an orange background: --orange-text is the theme's orange
   darkened to stay readable on the light page, and turns back into the full
   orange in dark mode (tokens.css). In the dark banner the full orange is
   used, because the darkened one would vanish on navy. A deliberate exception
   to "orange once per viewport", made by Vida on 2026-10-01 (DESIGN.md). */
.prose mark.key{background:none;color:var(--orange-text);font-weight:600}
.page-head mark.key{background:none;color:var(--orange);font-weight:600}
/* The same mark on compliance, product, solution and page-section text
   (HighlightLines, 2026-10-01): darkened orange on light grounds, full orange
   on the dark hero and CTA band. */
mark.key{background:none;color:var(--orange-text);font-weight:600}
.hero mark.key,.cta-band mark.key{color:var(--orange)}
/* Tables inside an ActionText body (allowed by config/initializers/action_text_tables.rb).
   Same look as table.data in base.css. A table is kept whole within one column;
   `display:block` + overflow lets a wide table scroll sideways on a phone instead
   of pushing the page wider than the screen. */
.prose table{display:block;overflow-x:auto;border-collapse:collapse;width:100%;margin:var(--s5) 0;font-size:var(--fs-base);break-inside:avoid;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.prose th,.prose td{padding:var(--s3) 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--display);font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:var(--surface-2)}
.prose tr:last-child td{border-bottom:0}
.prose .attachment img,.prose .attachment picture,.prose .attachment video{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line);display:block;background:var(--surface-2);min-height:120px}
/* Rails prints the filename and size here; only a caption the author wrote is
   worth a reader's attention. */
.prose .attachment__caption{display:none}
.prose .attachment__caption--edited{display:block;font-size:var(--fs-md);color:var(--ink-3);line-height:1.45;text-align:left}
.prose .attachment--content{margin:var(--s5) 0}
/* A non-image file reads as a download row, not as a broken picture. */
.prose .attachment--file{border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) 16px;background:var(--surface)}
.prose .attachment--file .attachment__caption{display:block;font-size:var(--fs-base);color:var(--ink-2)}
.prose .attachment--file .attachment__name{font-family:var(--display);font-weight:600;color:var(--ink)}
.prose .attachment--file .attachment__size{color:var(--ink-3);margin-left:8px}
/* Two or four images in a row stay a row, and collapse on a phone. */
.prose .attachment-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:var(--s6) 0}
.prose .attachment-gallery .attachment{margin:0}
@media (max-width:620px){.prose .attachment-gallery{grid-template-columns:1fr}}
/* An image may break the measure to the full column width — the Deel treatment
   for a figure that carries the section. Authors opt in with a caption
   starting "lebar:" is too clever; instead every image simply fills the
   measure, which is the predictable behaviour. */

/* ---- Two-column article text --------------------------------------------
   A single 66ch column on a 1280px page leaves half the row empty, which is
   what Vida kept seeing. Flowing the article into two columns uses the width
   without making the LINE longer — the measure stays readable, there is just
   more than one of it.

   The rules that make multi-column text work rather than annoy:
   - headings, images and callouts SPAN both columns, so a section never starts
     at the bottom of the left column and finishes at the top of the right;
   - nothing breaks across the gap mid-item (a list item split between columns
     is the classic multi-column defect);
   - one column again below 900px — on a phone, two columns means a reader
     scrolls to the bottom and back up, which is worse than an empty margin.
   - `column-fill: balance` so the two columns end level instead of the left
     one running to the floor while the right holds three lines. */
/* 26rem per column (about 50 characters at 17px, still a comfortable
   measure) so two columns start at about 980px instead of about 1050px. Below
   that the single column is centred (see the 980px block). Vida, 2026-10-01:
   an article at about 985px showed one column against the left edge with a
   third of the row empty. */
.prose--cols{max-width:none;column-width:26rem;column-count:2;column-gap:var(--s7);column-fill:balance}
/* DELIBERATE: the .trix-content wrapper is NOT dissolved, and the selectors
   below are child selectors that therefore match nothing inside an ActionText
   body. Both were tried the other way on 13 Sep 2026 and both made the page
   worse, so do not "fix" this:
   - display:contents on .trix-content makes each paragraph its own column
     item. Combined with the spanning headings below, every section between two
     headings holds one short paragraph, so each fragment renders as a single
     column and the right half of the article goes empty again.
   - Without display:contents the whole body is one item and the browser flows
     it continuously down the left column and up the right, which is the
     two-column article Vida asked for.
   The rules below still apply to non-ActionText prose, where the children ARE
   direct children: the pages that compose their own paragraphs. */
.prose--cols > h2,.prose--cols > h3,.prose--cols > figure,.prose--cols > .attachment,
.prose--cols > .attachment-gallery,.prose--cols > .callout,.prose--cols > table,.prose--cols > .tbl{
  column-span:all;
}
/* A heading that spans the columns needs its air back: `column-span` resets the
   margin collapse, so the space above it has to be stated. */
.prose--cols > h2{margin-top:var(--s6)}
.prose--cols > h2:first-child,.prose--cols > h3:first-child{margin-top:0}
.prose--cols > p,.prose--cols > ul,.prose--cols > ol,.prose--cols > blockquote{break-inside:avoid-column}
.prose--cols li{break-inside:avoid-column}
.prose--cols > :first-child{margin-top:0}
/* Keep a heading with the text it introduces when the column breaks. These are
   descendant selectors on purpose: inside an ActionText body the headings are
   not children of .prose--cols, and break-* still applies to descendants of the
   fragmented block, unlike column-span which needs the element to be a direct
   column item. Without this a section heading lands at the foot of the left
   column and its paragraph starts the right one. */
.prose--cols h2,.prose--cols h3,.prose--cols h4{break-after:avoid-column;break-inside:avoid-column}

/* Short bodies: a heading that spans both columns needs enough text after it
   to fill a second column, and a solution page has one heading and one
   paragraph. Spanning there leaves the heading alone on a line with the
   paragraph stranded in the right column, so this modifier lets the heading
   sit in the flow and the text wrap under it into column two. Use it only
   where the body is a few paragraphs; long articles keep the spanning rule. */
.prose--cols.prose--flow > h2,.prose--cols.prose--flow > h3{column-span:none;margin-top:0}
/* One column at 980px and below. Two 26rem columns plus the gap need about
   880px of text width, which a window gets from about 975px; between 900 and
   975px the browser fell back to ONE column about 100 characters wide
   (measured 2026-10-01). So the single column is declared up to 980px, keeps
   the reading measure, and is CENTRED: pinned to the left edge, the unused
   width all collapsed on the right and the page read as not responsive.
   Below the measure (phones) it simply fills the width. */
@media (max-width:980px){
  .prose--cols{column-width:auto;column-count:1;max-width:var(--measure);margin-inline:auto}
  .prose--cols > h2{margin-top:1.6em}
}

/* ---- Classes that replaced inline style="" in public views (2026-10-05) ---- */
/* Flash message strip at the top of <main>. */
.wrap--flash{padding-top:var(--s4)}
.footer-tagline{margin-top:var(--s3);max-width:36ch}
.footer-address{margin-top:var(--s3);font-size:var(--fs-base)}
/* Caption under the illustrative product mock: it says the figures are not client data. */
.shot-note{margin-top:var(--s3);font-size:var(--fs-xs);color:var(--ink-3)}
.panels--wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.member-bio{margin-top:var(--s2);font-size:var(--fs-base);color:var(--ink-2)}
/* Honeypot field: off-screen, not display:none, because some bots skip hidden inputs
   but fill anything they can see in the DOM. Real visitors never reach it (aria-hidden,
   tabindex -1). Do NOT "tidy" this to display:none; it would stop catching bots. */
.hp-field{position:absolute;left:-9999px}
.steps-list{padding-left:var(--s5);margin:var(--s3) 0 0;color:var(--ink-2);display:grid;gap:var(--s2)}
.trust-band .trust-more{color:var(--ink-3);font-weight:600}
.panel-blurb{margin:var(--s2) 0 var(--s4);font-size:var(--fs-base)}
.stack-2{display:grid;gap:var(--s2)}
.side-h{font-size:var(--fs-lg)}
.quote--case{max-width:70ch}
.claim-rule{max-width:62ch;margin-bottom:var(--s4)}
.thanks--card{max-width:62ch;margin-inline:auto;padding:var(--s7)}
.thanks-title{margin:var(--s3) 0;font-size:var(--fs-5xl)}
.page-head--flush{padding-top:0}
/* Captioned product screenshot (HireKita example report). The caption carries
   the honesty statement, so it sits right under the image, not in a footnote. */
.product-figure{margin:0 0 var(--s5)}
.product-figure .product-shot{margin-bottom:var(--s2);cursor:zoom-in}
.product-figure figcaption{font-size:var(--fs-sm);color:var(--ink-3);line-height:1.45}
.product-figure .product-shot{aspect-ratio:auto;object-fit:contain}