/* theme.css — the Cobalt design language.
 *
 * Ported from the Cobalt ERP Homepage canvas file. Every colour, size, radius
 * and weight below is the reference's own value; nothing has been reinterpreted.
 * The reference carries its layout in inline styles, so most of the page's look
 * lives in the markup — this file holds the tokens, the shared primitives, the
 * animation keyframes, and the responsive behaviour the reference never had.
 *
 * The reference is a fixed desktop composition: no media queries, several hard
 * two-column grids and a 104px gutter that leaves 271px of content on a phone.
 * The breakpoints at the end change nothing at desktop widths — they only give
 * the same design somewhere to go below 1100px.
 */

/* ---------- fonts ----------
 *
 * Self-hosted, so the page does not open connections to two Google origins and
 * wait on a stylesheet from one before it can even ask the other for a font.
 * Both text faces are single variable files covering every weight the design
 * uses; both are SIL Open Font License 1.1 and fonts/LICENSES.md travels with
 * them.
 *
 * The icon font is the one that mattered. Google serves this family as a
 * 5,358,720-byte variable font carrying every icon in the set across four axes.
 * The design draws 152 of them at one instance — rounded, optical size 24,
 * weight 400 — which is 18,556 bytes. tools/build_icons.py rescans the source
 * and refetches it; tools/sitecheck.py fails if a page starts using an icon the
 * subset does not carry.
 *
 * No preload on any of them. A preload competes with the stylesheet that
 * decides whether the font is needed at all, and these are small enough that
 * swap covers the gap. The icon font keeps `block` rather than `swap`, because
 * the fallback for a ligature is the word "check" rather than a tick.
 */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-latin.woff2?v=a0d054c4") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin.woff2?v=2c32b9b3") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/material-symbols-rounded-subset.woff2?v=16f6634a") format("woff2");
}

:root {
  /* Surfaces — warm stone, not grey. The page sits on --bg and sections
     alternate onto white, separated by a single hairline. */
  --bg:        #F5F5F4;
  --surface:   #ffffff;
  --surface-2: #FAFAF9;
  --surface-3: #FCFCFB;
  --surface-4: #EFEFEC;

  /* Hairlines, lightest to strongest */
  --line-3:    #F1F1EF;
  --line-2:    #ECECEA;
  --line:      #E5E5E2;
  --line-4:    #E0E0DD;

  /* Ink ramp */
  --ink:       #16181A;
  --ink-2:     #2C3034;
  --ink-3:     #54595F;
  --ink-4:     #5F6368;
  /* Muted text. Both reach WCAG AA (4.5:1) on white, stone, #FAFAF9, #EFEFEC
     and the green-100 chip — the five surfaces they are actually used on. The
     old #7A7F85 / #8A8F94 reached 3.70 and 2.99 on stone. */
  --ink-5:     #63686D;
  --ink-6:     #6B7075;
  /* On the green band. #5C7568 read at 2.32:1 against --green-900. */
  --on-green:  #9CC2AE;

  /* Green: 900 carries buttons and the mark, 700 carries links and kickers,
     500 is the live accent used for pulses, ticks and emphasis. */
  --green-900: #0A4130;
  --green-700: #0D5B45;
  --green-500: #12805C;
  --green-100: #DCEDE6;

  /* Amber — "needs a person". Never used for errors. */
  --amber-700: #8A5A12;
  --amber-500: #E0A94A;
  --amber-100: #FBF0DC;

  /* Red — refusals and hard stops only. */
  --red-700:   #A03530;
  --red-100:   #FBE6E4;

  --radius-sm: 9px;
  --radius:    11px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: 104px;
  --maxw: 1660px;
}

/* ---------- figure accent palette ----------
   The figures are colour-coded per item, the way the reference designs are: an
   engine, a module and an industry each keep the same hue wherever they appear.
   Every pair below was chosen to clear WCAG AA on its own tint (5.2:1 at worst)
   and on white, because these tiles carry text as well as icons.
   tools/sitecheck.py recomputes all of it. */
:root {
  --a-green-bg:  #DCEDE6;  --a-green:  #0D5B45;
  --a-violet-bg: #E9E4F6;  --a-violet: #4B3A93;
  --a-blue-bg:   #DEE9F8;  --a-blue:   #1D4E87;
  --a-amber-bg:  #FBF0DC;  --a-amber:  #8A5A12;
  --a-rose-bg:   #FBE4E4;  --a-rose:   #9A3535;
  --a-teal-bg:   #D8EDEF;  --a-teal:   #12585E;
  --a-indigo-bg: #E2E5F8;  --a-indigo: #333F8C;
  --a-slate-bg:  #E8EAED;  --a-slate:  #3F454E;
  --a-plum-bg:   #F3E3F0;  --a-plum:   #7A2F69;
  --a-moss-bg:   #E4EEDC;  --a-moss:   #3D5A22;
  --a-clay-bg:   #F7E6DA;  --a-clay:   #8A4A1C;
}

/* ---------- base ---------- */

/* The page never scrolls sideways. `clip`, not `hidden`: hidden makes the
   root a scroll container and breaks every sticky element on the page.
   It has to sit on the root — overflow on <body> is propagated up to the
   viewport, so setting it there just moves the scrollbar. */
html { scroll-behavior: smooth; background: var(--bg); overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: var(--green-700); text-decoration: none; }
a:hover { color: var(--ink); }
p { text-wrap: pretty; }
img, svg { max-width: 100%; }

/* The reference repeats this container inline on every section. Hoisting it to
   a class keeps the desktop value identical and gives the gutter somewhere to
   shrink to on small screens. */
.wrap { width: min(var(--maxw), 100% - var(--gutter)); margin-left: auto; margin-right: auto; }
.wrap-mid { width: min(1000px, 100% - var(--gutter)); margin-left: auto; margin-right: auto; }

/* ---------- icons ---------- */

/* Centring an icon-font glyph.
   A Material Symbol's line box is taller than the glyph, and the extra space is
   not shared evenly — the glyph sits low. `text-box` trims to the cap box where
   it is supported; the transform is the fallback that needs nothing, measured
   at 6px low in a 34px tile on an 18px glyph. */
.fig-ic > .ms { transform: translateY(-6.5%); }
@supports (text-box: trim-both cap alphabetic) {
  .fig-ic > .ms { transform: none; text-box: trim-both cap alphabetic; }
}

.ms {
  font-family: "Material Symbols Rounded";
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  /* A Material Symbol is a ligature on the exact lowercase name, and
     text-transform is inherited. Any uppercased ancestor — a table header, a
     kicker, an eyebrow — silently breaks every icon inside it and the raw name
     is drawn instead. This is the one place that can prevent it. */
  text-transform: none;
  font-variant: normal;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased;
}

/* ---------- disclosure ---------- */

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
details[open] .plus { transform: rotate(45deg); }
.plus { transition: transform .22s cubic-bezier(.22,1,.36,1); }

/* ---------- animation keyframes ----------
   Used by the three ported components. Names are the originals so the ported
   logic, which builds animation shorthands as strings, still resolves them. */

/* Verbatim from the reference components; dcfade is from the page's own
   stylesheet. Do not paraphrase these — the logic composes animation
   shorthands by name, and a wrong one silently fights the inline
   transform bindings on the same element. */
@keyframes dcfade { 0%,3% { opacity:.45; } 10%,92% { opacity:1; } 100% { opacity:.45; } }
@keyframes dcblink { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
@keyframes dccaret { 0%,49% { opacity:1; } 50%,100% { opacity:0; } }
@keyframes dcdot { 0%,70%,100% { opacity:.22; transform:translateY(0); } 35% { opacity:1; transform:translateY(-1.5px); } }
@keyframes dcflow { to { stroke-dashoffset:-24; } }
@keyframes dcin { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@keyframes dcnode { from { transform:translateY(7px) scale(.97); } to { transform:translateY(0) scale(1); } }
@keyframes dcpulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@keyframes dcring { 0% { box-shadow:0 0 0 0 rgba(18,128,92,.32); } 70% { box-shadow:0 0 0 12px rgba(18,128,92,0); } 100% { box-shadow:0 0 0 0 rgba(18,128,92,0); } }
@keyframes dcscan { 0% { background-position:-45% 0; } 100% { background-position:145% 0; } }
@keyframes dcspin { to { transform:rotate(360deg); } }
@keyframes dcsweep { from { background-position:132% 0; } to { background-position:-32% 0; } }
@keyframes dcunspin { to { transform:rotate(-360deg); } }

/* ---------- animation hosts ----------
   Each component is authored against a 1440px design width and scales itself
   down to whatever the host gives it, so the host only needs to be a clean
   measuring box. overflow hidden clips the flight paths during the handoff. */

/* width:100% matters: a nested host sits in a centred flex column, where a bare
   block shrinks to its content. That made the exposure mockup measure its own
   text — so as the question typed out, the host width changed, the scale
   recomputed, and the whole mockup shrank mid-animation. Stretching it makes the
   measurement depend on the layout instead of the content. */
/* The clip has to stay: a frame is laid out at its full design width (1600px)
   and only scaled by transform, which does not shrink its layout box, so
   without this the page overflows sideways.
   But clipping at the content edge sliced the frame's drop shadow off flat —
   a hard line straight across the section under the replay row. The padding
   moves the clip edge below the shadow; the negative margin takes the space
   back, so nothing below moves. */
.dc-host {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 100px;
  margin-bottom: -100px;
}
.dc-host > * { transform-origin: top left; }

/* ---------- skip link ---------- */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green-900); color: #fff;
  padding: 12px 18px; border-radius: 0 0 var(--radius) 0;
  font-size: 14px; font-weight: 600;
}
.skip:focus { left: 0; color: #fff; }

:where(a, button, summary, input, select):focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- responsive ----------
   The reference has none of this. Desktop rendering is untouched: every rule
   below sits inside a max-width query, so at >=1101px the computed styles are
   the reference's exactly. */

@media (max-width: 1400px) {
  :root { --gutter: 72px; }
}

@media (max-width: 1100px) {
  :root { --gutter: 56px; }

  /* The reference's fixed two-column grids. Below this width the .86fr column
     drops under 300px and the copy inside it starts breaking mid-word. */
  .g2, .g2-tight { grid-template-columns: minmax(0, 1fr) !important; }
  .g2 { gap: 32px !important; align-items: start !important; }
  .g2-tight { gap: 28px !important; }
}

@media (max-width: 860px) {
  :root { --gutter: 40px; }

  /* Five nav items plus a wordmark plus two actions do not fit. The nav becomes
     a scrollable strip on its own row rather than wrapping into the actions. */
  .site-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  /* Multi-word items wrap inside the strip and double its height otherwise. */
  .site-nav a { white-space: nowrap; }
  .site-head-inner {
    height: auto !important;
    flex-wrap: wrap;
    padding: 12px 0 10px;
    gap: 12px !important;
  }
  .sec { padding: 68px 0 !important; }
}

@media (max-width: 620px) {
  /* Bare minimum at the edges on a phone. */
  :root { --gutter: 20px; }
  .hide-sm { display: none !important; }
  /* Stacked CTAs read better full-width than centred and ragged. */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas > a { justify-content: center; }
}

/* ---------- reduced motion ----------
   The components already render their finished frame and skip the clock; this
   covers the CSS-only flourishes. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- solutions cards ----------
   Nine routes into the deeper pages. The lift is deliberately slight; a grid
   of nine cards all rearing up on hover reads as noise. */

.soln { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.soln:hover {
  border-color: var(--green-900);
  box-shadow: 0 6px 18px rgba(22, 24, 26, .07);
  transform: translateY(-1px);
  color: var(--ink);
}
.soln:hover .soln-arw { color: var(--green-500); }

/* ---------- finance core ---------- */

@media (max-width: 1100px) {
  /* The block's two halves are split by a vertical rule that only reads as a
     divider while they sit side by side. */
  .g2 > [style*="border-right:1px solid #F1F1EF"] { border-right: 0 !important; border-bottom: 1px solid #F1F1EF; }
}

/* ---------- plan rail ----------
   Six plans, four on screen. The track is a real scroller so touch, trackpad
   and keyboard work with the buttons removed; the buttons page by one card. */

.pcar { position: relative; }

.pcar-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 14px) / 4);
  gap: 14px;
  overflow-x: auto;
  /* proximity, not mandatory: mandatory fought every programmatic scroll and
     snapped the track straight back to the first card. */
  scroll-snap-type: x proximity;
  /* scroll-behavior deliberately not set here — with it, assigning scrollLeft
     or calling scrollBy was animated and then immediately cancelled, so the
     arrows did nothing. carousel.js asks for smooth per call instead. */
  scrollbar-width: none;
  /* Room for the cards' badges, which sit above the top edge. */
  padding: 14px 2px 4px;
  margin: -14px -2px -4px;
}
.pcar-track::-webkit-scrollbar { display: none; }
.pcar-track > .plan { scroll-snap-align: start; }
.pcar-track:focus-visible { outline: 2px solid var(--green-500); outline-offset: 4px; border-radius: 18px; }

.pcar-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-4);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(22, 24, 26, .10);
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
.pcar-btn:hover:not(:disabled) { border-color: var(--green-900); background: var(--surface-2); }
.pcar-btn:disabled { opacity: 0; pointer-events: none; }
.pcar-prev { left: -20px; }
.pcar-next { right: -20px; }
.pcar-static .pcar-btn { display: none; }

@media (max-width: 1100px) {
  .pcar-track { grid-auto-columns: calc((100% - 14px) / 2); }
  .pcar-prev { left: -8px; }
  .pcar-next { right: -8px; }
}
@media (max-width: 620px) {
  .pcar-track { grid-auto-columns: 84%; }
  /* At this width the buttons overlap the cards; the track still scrolls. */
  .pcar-btn { display: none; }
}

/* The phone mockups' inner scroller — no visible bar inside a mockup. */
.mscroll { scrollbar-width: none; }
.mscroll::-webkit-scrollbar { display: none; }

/* The closing CTA card carries desktop padding that leaves no room for its
   own columns on a phone. */
@media (max-width: 620px) {
  .cta-card { padding: 28px 18px !important; }
  /* <figure> defaults to margin-inline: 40px — not on a phone. */
  figure { margin-left: 0; margin-right: 0; }
}

/* ---------- homepage hover states ----------
   The homepage carries its layout inline; these are the few rules that cannot
   be expressed that way. They lived in a <style> block in the page until the
   duplicate <helmet> fragment was removed from the body. */
.h1:hover      { color: var(--ink); }
.h2:hover      { background: var(--green-500); color: #fff; }
.h3:hover      { border-color: var(--green-900); color: var(--ink); }
.h4:hover      { border-color: var(--green-900); color: var(--green-700); }
.h_nav:hover   { color: var(--ink); }
.h_cta:hover   { background: var(--green-500); color: #fff; }
.roi_cta:hover { background: var(--green-100); color: var(--green-900); }

/* ---------- mobile navigation ----------
   One pattern for every page. The button and the drawer are inert markup until
   nav.js adds `js-nav` to the root, so a browser with no JavaScript keeps the
   plain inline nav rather than being shown a button that does nothing. */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-right: -6px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-4);
  border-radius: 11px;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--green-900); }
.nav-toggle .ms { font-size: 22px; }
.nav-toggle .nav-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-open  { display: none; }
.nav-toggle[aria-expanded="true"] .nav-close { display: inline-block; }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(22, 24, 26, .38);
  backdrop-filter: blur(2px);
}

#site-menu {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto auto;
  width: min(340px, 88vw);
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 22px 32px;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 48px rgba(22, 24, 26, .1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#site-menu[hidden] { display: none; }
#site-menu .nav-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
#site-menu a {
  padding: 13px 12px;
  border-radius: 12px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
#site-menu a:hover, #site-menu a:focus-visible { background: var(--surface-4); }
#site-menu a[aria-current="page"] { color: var(--green-700); background: var(--green-100); }
#site-menu .nav-menu-sep {
  margin: 12px 2px;
  border: 0;
  border-top: 1px solid var(--line-2);
}
#site-menu .nav-menu-cta {
  margin-top: 4px;
  text-align: center;
  background: var(--green-900);
  color: #fff;
}
#site-menu .nav-menu-cta:hover, #site-menu .nav-menu-cta:focus-visible {
  background: var(--green-500);
  color: #fff;
}

/* Above the breakpoint the inline nav is the navigation and the drawer does not
   exist; below it, the reverse. Never both. */
@media (max-width: 860px) {
  .js-nav .nav-toggle { display: inline-flex; }
  .js-nav .site-nav, .js-nav .nav-links { display: none !important; }
}
@media (min-width: 861px) {
  .nav-toggle, #site-menu, .nav-scrim { display: none !important; }
}

/* ---------- animated mockup hosts ----------
   The host reserves its space before dc.js fetches anything, so the page does
   not jump when a mockup mounts a screen ahead of the viewport. The ratios are
   the components' own: 1600x948 for the desktop builds, 390x880 for the phone
   ones. */
.dc-host {
  aspect-ratio: 1600 / 948;
  contain: layout paint;
}
@media (max-width: 767.98px) {
  .dc-host { aspect-ratio: 390 / 880; }
}
/* Once mounted the component sizes its own frame, and a fixed ratio would
   either crop it or leave a gap under it. */
.dc-host.dc-ready { aspect-ratio: auto; }

.dc-fallback {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
}
.dc-fallback b { display: block; font-size: 18px; letter-spacing: -.02em; margin-bottom: 8px; }
.dc-fallback p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: var(--ink-3); }

/* The ported components build every control as a styled box; these are the
   parts a browser gives a <button> that the composition does not want, plus the
   focus ring it very much does. */
.dc-host button { cursor: pointer; }
.dc-host button:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; }

/* ---------- homepage inline-style extraction ----------
 *
 * The homepage carries its layout in inline style attributes, ported from the
 * design canvas. 36 of those declarations were repeated six times or more —
 * one of them 45 times — which is 28KB of duplicated text, and a separate
 * inline style object for the browser to parse and hold per element.
 *
 * These are the repeats, and only the repeats: a declaration that appears once
 * stays where it is, because a class name would cost as much as it saved and
 * the markup would be harder to read. Generated by hand once; if the homepage
 * is re-exported from the canvas, re-derive rather than patch.
 */
  .ic1 { flex:0 0 auto; font-size:16px; color:#12805C; margin-top:1px; }
  .ic2 { display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.5; color:#54595F; }
  .ic3 { font-size:13.5px; color:#6B7075; }
  .ic4 { font-size:18px; color:#0D5B45; }
  .ic5 { flex:0 0 34px; width:34px; height:34px; border-radius:10px; background:#F1F6F3; display:grid; place-items:center; }
  .ic6 { flex:1 1 auto; min-width:0; font-size:13px; color:#54595F; }
  .ic7 { display:flex; align-items:center; gap:10px; padding:11px 13px; border-bottom:1px solid #F1F1EF; }
  .ic8 { margin:0; font-size:13.5px; line-height:1.65; color:#5F6368; }
  .ic9 { display:flex; flex-direction:column; background:#fff; border:1px solid #E0E0DD; border-radius:16px; padding:22px 22px 20px; }
  .ic10 { font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#0D5B45; margin-bottom:20px; }
  .ic11 { flex:0 0 auto; font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color:#16181A; }
  .ic12 { margin:0; font-size:16px; line-height:1.75; color:#54595F; }
  .ic13 { font-size:13px; line-height:1.6; color:#6B7075; }
  .ic14 { display:flex; gap:13px; align-items:flex-start; }
  .ic15 { display:block; font-size:14px; letter-spacing:-.015em; margin-bottom:5px; }
  .ic16 { margin:0; font-size:14px; line-height:1.65; color:#5F6368; }
  .ic17 { font-size:16px; color:#12805C; }
  .ic18 { flex:1 1 auto; min-width:0; font-size:15px; letter-spacing:-.02em; }
  .ic19 { display:flex; gap:8px; }
  .ic20 { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
  .ic21 { font-size:15px; letter-spacing:-.02em; }
  .ic22 { flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:#12805C; }
  .ic23 { flex:0 0 auto; font-size:10px; font-weight:700; letter-spacing:.06em; color:#0D5B45; background:#DCEDE6; border-radius:5px; padding:3px 7px; }
  .ic24 { display:flex; justify-content:space-between; background:#FAFAF9; border-radius:9px; padding:9px 11px; }
  .ic25 { margin:0; font-size:clamp(18px,1.9vw,24px); line-height:1.3; letter-spacing:-.02em; font-weight:600; color:#12805C; }
  .ic26 { margin:0 0 16px; font-size:12.5px; line-height:1.5; color:#63686D; min-height:34px; }
  .ic27 { margin:0 0 14px; font-size:clamp(30px,4vw,54px); line-height:1.04; letter-spacing:-.035em; font-weight:700; }
  .ic28 { margin-top:14px; padding-top:13px; border-top:1px solid #F1F1EF; display:grid; gap:5px; font-size:11.5px; color:#63686D; }
  .ic29 { font-size:34px; font-weight:700; letter-spacing:-.04em; color:#16181A; }
  .ic30 { font-size:17px; letter-spacing:-.02em; }
  .ic31 { font-size:13px; font-weight:500; color:#63686D; }
  .ic32 { flex:0 0 38px; width:38px; height:38px; border-radius:11px; background:#DCEDE6; color:#0D5B45; display:grid; place-items:center; }
  .ic33 { display:grid; gap:9px; margin-bottom:20px; }
  .ic34 { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .ic35 { display:flex; align-items:center; gap:11px; margin-bottom:11px; }
  .ic36 { display:flex; align-items:baseline; gap:3px; margin-bottom:18px; }