/* GetMacros — Direction D, "Clean"
 * =========================================================================
 * White, one green, generous space, one weight of type, nothing decorative.
 *
 * This layer does its work at the TOKEN level rather than by restyling
 * components. The site carries six token systems -- --u-, --gm6-, --v3-,
 * --v8-, --gm- and --premium- -- with 789 uses between them, so redefining
 * those reaches nearly every surface, border and text colour at once. What is
 * left after that is decoration, which is removed explicitly below.
 *
 * Loads last, after editorial-v8.
 *
 * Type: Instrument Sans was the face in the chosen sketch, but the site's CSP
 * is font-src 'self' and this environment has no network, so it cannot be
 * fetched and self-hosted here. Inter is already self-hosted at 400-800 and is
 * the same category of neutral grotesque; at 600 with tight tracking it sits
 * very close. Swapping in Instrument Sans later is a font file plus two lines.
 * ========================================================================= */

:root,
html[data-theme="light"] {
  --d-bg:        #ffffff;
  --d-bg-soft:   #f7f9f8;
  --d-surface:   #ffffff;
  --d-surface-2: #f7f9f8;
  --d-surface-3: #f2f8f4;
  --d-ink:       #0d1b14;
  --d-muted:     #5c6b64;   /* 5.61:1 on white */
  --d-muted-2:   #68776f;   /* 4.71:1 on white -- the sketch's #7c8b83 was 3.57 */
  --d-line:      #e8ece9;
  --d-line-2:    #dfe5e1;
  --d-accent:    #0f7a4a;   /* 5.38:1 on white */
  --d-accent-in: #ffffff;
  --d-tint:      #f2f8f4;
  --d-r-sm: 10px;
  --d-r:    14px;
  --d-r-lg: 18px;
  --d-shadow: 0 1px 2px rgba(13, 27, 20, .04);
  --d-fill:    #0d1b14;   /* a dark panel or chip -- stays dark in both themes */
  --d-fill-in: #ffffff;
  --d-btn:     #0d1b14;   /* primary button */
  --d-btn-in:  #ffffff;
  --d-lime:    #dcf0e4;   /* light fill; dark text sits on it */
}

html[data-theme="dark"] {
  --d-bg:        #0c1210;
  --d-bg-soft:   #101815;
  --d-surface:   #141b18;
  --d-surface-2: #19221e;
  --d-surface-3: #1f2a25;
  --d-ink:       #f2f6f3;
  --d-muted:     #a9b8b0;
  --d-muted-2:   #8c9c94;
  --d-line:      rgba(242, 246, 243, .12);
  --d-line-2:    rgba(242, 246, 243, .22);
  --d-accent:    #57c98d;   /* 9.14:1 on the page */
  --d-accent-in: #0c1210;
  --d-tint:      #16241d;
  --d-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --d-fill:    #1f2a25;
  --d-fill-in: #f2f6f3;
  --d-btn:     #57c98d;
  --d-btn-in:  #0c1210;
  --d-lime:    #57c98d;
}

/* ---- Every existing token system now resolves to the D palette ---------- */
:root, html[data-theme="light"], html[data-theme="dark"],
body.site-v3, body.modern-site, body.finder-v2, body.legacy-unified,
body.tools-page, body.calculator-suite, body.home-studio, body.order-match-page {
  --u-bg: var(--d-bg);            --u-bg-soft: var(--d-bg-soft);
  --u-surface: var(--d-surface);  --u-surface-2: var(--d-surface-2);
  --u-surface-3: var(--d-surface-3);
  --u-ink: var(--d-ink);          --u-muted: var(--d-muted);
  --u-muted-2: var(--d-muted-2);
  --u-line: var(--d-line);        --u-line-strong: var(--d-line-2);
  /* Three families, not one colour. The old system used "lime" as a LIGHT fill
     that carries dark text, and "forest" as a DARK fill that carries light
     text; mint and aqua were mostly text accents. Collapsing all of them onto
     one mid-green broke both fill relationships at once -- dark labels landed
     on a dark green at 2.6-3.3:1. Each family keeps its role. */
  --u-mint: var(--d-accent);      --u-aqua: var(--d-accent);
  --u-lime: var(--d-lime);
  --u-shadow-sm: var(--d-shadow); --u-shadow: var(--d-shadow);
  --u-shadow-lg: var(--d-shadow);
  --u-radius-sm: var(--d-r-sm);   --u-radius: var(--d-r);
  --u-radius-lg: var(--d-r-lg);

  --gm6-ink: var(--d-ink);        --gm6-line: var(--d-line);
  --gm6-forest: var(--d-fill);    --gm6-forest-deep: var(--d-fill);
  --gm6-lime: var(--d-lime);      --gm6-paper: var(--d-bg);
  --gm6-shadow-soft: var(--d-shadow);
  --gm6-radius-lg: var(--d-r);    --gm6-radius-xl: var(--d-r-lg);

  --v3-ink: var(--d-ink);         --v3-muted: var(--d-muted);
  --v3-paper: var(--d-bg);        --v3-card: var(--d-surface);
  --v3-line: var(--d-line);       --v3-forest: var(--d-fill);
  --v3-lime: var(--d-lime);       --v3-mint: var(--d-tint);

  --v8-ink: var(--d-ink);         --v8-ink-soft: var(--d-muted);
  --v8-paper: var(--d-bg);        --v8-paper-warm: var(--d-bg-soft);
  --v8-line: var(--d-line);       --v8-lime: var(--d-lime);
  --v8-coral: var(--d-accent);    --v8-aqua: var(--d-accent);
  --v8-muted: var(--d-muted);     --v8-solid: var(--d-ink);
  --v8-shadow: var(--d-shadow);

  --gm-forest: var(--d-fill);     --gm-forest-dark: var(--d-fill);
  --gm-shadow: var(--d-shadow);
  --premium-forest: var(--d-fill);
  --premium-forest-deep: var(--d-fill);
}

/* ---- Page ground -------------------------------------------------------- */
html, body.site-v3 {
  background: var(--d-bg) !important;
  color: var(--d-ink) !important;
}

/* ---- Type: one family, one weight for headings, tight tracking ---------- */
body.site-v3, body.site-v3 :is(h1, h2, h3, h4, h5, h6, p, li, span, a, b, strong,
  em, small, label, button, input, select, textarea, td, th, dt, dd, figcaption) {
  font-family: "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;
}
body.site-v3 :is(h1, h2, h3, h4) {
  font-weight: 600 !important;
  letter-spacing: -.032em !important;
  color: var(--d-ink) !important;
  text-wrap: balance;
}
body.site-v3 h1 { line-height: 1.02 !important; }
body.site-v3 :is(h2, h3, h4) { line-height: 1.12 !important; }
body.site-v3 :is(p, li) { color: var(--d-muted); line-height: 1.62; }

/* ---- Decoration off ----------------------------------------------------- */
/* The old system leant on gradients, blurred colour blobs and heavy drop
   shadows. None of that belongs in this direction: a clean layout earns its
   depth from spacing and a single hairline. */
body.site-v3 .liquid-surface::before,
body.site-v3 .liquid-surface::after,
body.site-v3 .liquid-blob { display: none !important; }

body.site-v3 :is(section, header, div, article, aside, main)[class*="hero"],
body.site-v3 .home-intro, body.site-v3 .match-intro,
body.site-v3 .gm6-hero, body.site-v3 .gm6-band, body.site-v3 .gm6-tools,
body.site-v3 .gm6-final, body.site-v3 .data-section, body.site-v3 .compact-calc {
  background: var(--d-bg) !important;
  background-image: none !important;
  color: var(--d-ink) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
body.site-v3 :is(section, header, div)[class*="hero"] :is(h1, h2, h3, strong, b) {
  color: var(--d-ink) !important;
}
body.site-v3 :is(section, header, div)[class*="hero"]
  :is(p, li, small, span, dd, .eyebrow):not(:where(.btn, .btn *)) {
  color: var(--d-muted) !important;
}

/* Cards: a hairline and a small radius, no lift, no glow. */
body.site-v3 :is(.card, .panel, .quiz-card, .tool-card, .guide-card, .goal-card,
  .chain-card, .result-card, .explore-card, .pick-card, .meal-card, .blog-card,
  .gm6-tool, .search-hit, .advice-card, .calculator-card, .calc-card,
  .single-macro-card, .order-console, .sample-card) {
  background: var(--d-surface) !important;
  border: 1px solid var(--d-line) !important;
  border-radius: var(--d-r) !important;
  box-shadow: none !important;
  background-image: none !important;
}
body.site-v3 :is(.guide-card, .tool-card, .goal-card, .chain-card, .blog-card,
  .gm6-tool, .search-hit, .meal-card, .pick-card):hover {
  border-color: var(--d-accent) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ---- Buttons: one dark fill, one hairline outline ----------------------- */
body.site-v3 :is(a, button).btn {
  border-radius: var(--d-r-sm) !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  box-shadow: none !important;
  background-image: none !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease !important;
}
body.site-v3 :is(a, button).btn:is(.btn-primary, .home-primary, .match-primary, .quiz-continue) {
  background: var(--d-btn) !important;
  border: 1px solid var(--d-btn) !important;
  color: var(--d-btn-in) !important;
}
body.site-v3 :is(a, button).btn:is(.btn-primary, .home-primary, .match-primary,
  .quiz-continue) :is(span, b, strong, small) { color: var(--d-btn-in) !important; }
body.site-v3 :is(a, button).btn:is(.btn-outline, .btn-ghost, .quiz-back) {
  background: transparent !important;
  border: 1px solid var(--d-line-2) !important;
  color: var(--d-ink) !important;
}
body.site-v3 :is(a, button).btn:hover { transform: none !important; }
body.site-v3 :is(a, button).btn:is(.btn-outline, .btn-ghost):hover {
  border-color: var(--d-ink) !important;
}

/* ---- Links -------------------------------------------------------------- */
body.site-v3 main a:not(.btn):not([class*="card"]):not(.gm6-tool) {
  color: var(--d-accent);
  text-underline-offset: 3px;
}
body.site-v3 main a:not(.btn):hover { color: var(--d-ink); }

/* ---- Header and footer ------------------------------------------------- */
body.site-v3 .site-header, body.site-v3 .modern-header {
  background: var(--d-bg) !important;
  border-bottom: 1px solid var(--d-line) !important;
  box-shadow: none !important;
}
/* The footer stays dark in both themes. Its base is a hard-coded #0f241b with
   white text and a dozen child rules written for that; lightening the ground
   alone left light text on a light footer across all 67 pages. A dark footer
   closing a white page is also the right shape for this direction -- it ends
   the page instead of dissolving into it. */
body.site-v3 .modern-footer {
  background: #0d1b14 !important;
  color: #ffffff !important;
  border-top: 0 !important;
}
body.site-v3 .modern-footer :is(p, a, small, span, strong, li) {
  color: #c3cfc8 !important;
}
body.site-v3 .modern-footer :is(a:hover, .modern-brand, .footer-brand) {
  color: #ffffff !important;
}

/* ---- Tables: hairlines, no fills --------------------------------------- */
body.site-v3 :is(.data-table, .comparison-table) {
  background: transparent !important;
  border-radius: 0 !important;
}
body.site-v3 :is(.data-table, .comparison-table) :is(td, th) {
  border-color: var(--d-line) !important;
  background: transparent !important;
  color: var(--d-ink);
}
body.site-v3 :is(.data-table, .comparison-table) thead th {
  color: var(--d-muted-2) !important;
}

/* ---- Figures never break away from their units -------------------------- */
/* The stat blocks carry the value and unit as `1,950<em>mg</em>` in a box that
   can be narrower than the pair, and an inherited overflow-wrap:break-word
   then splits inside the word: the homepage sodium figure rendered as
   "1,950 m" with the "g" on the next line. A quantity is one token. */
body.site-v3 strong:has(> em),
body.site-v3 :is(.gm6-macro-score, .stat-row, .results, .result, .pick-metrics,
  .sample-macros, .proof-strip) :is(strong, b, span) {
  white-space: nowrap;
  overflow-wrap: normal;
}
body.site-v3 strong:has(> em) > em {
  font-style: normal;
  font-size: .62em;
  font-weight: 500;
  margin-left: .12em;
  color: var(--d-muted-2);
}


/* ---- Anything filled with the accent takes the accent's own foreground --
   The old accent was lime -- a light fill that wanted dark text -- so a dozen
   components hard-code a near-black label. This direction's accent is a mid
   green that is dark, so those labels came to 3.3-3.6:1. */
/* Controls are filled with the dark ink, not the accent. White on the mid
   green is 5.4:1 flat, but several of these sit on a gradient whose lighter
   stop drops it to 3.9:1, and chasing that margin per component is how the
   old system ended up with a dozen one-off colour rules. The accent is a text
   colour here; fills are ink. White on ink is 17.7:1 and has no margin to
   lose. */
body.site-v3 :is(.skip-link, .nav-action, .nav-mobile-search, .option-check,
  .meal-rank, .quiz-chip input:checked + span, .mm-chip.is-on) {
  background: var(--d-fill) !important;
  background-image: none !important;
  color: var(--d-fill-in) !important;
  border-color: var(--d-fill) !important;
}
body.site-v3 :is(.skip-link, .nav-action, .nav-mobile-search) :is(span, b, strong) {
  color: var(--d-fill-in) !important;
}

/* Kickers and eyebrows were light mints written to sit on the green heroes
   this direction removed. On white they measured 1.18:1. */
body.site-v3 :is(.eyebrow, .soft-label, .kicker, .match-kicker, .home-kicker,
  .gm6-tool-num, .focused-guide-kicker, .section-head .eyebrow) {
  color: var(--d-muted-2) !important;
}
body.site-v3 :is(.eyebrow, .soft-label) :is(span, b) { color: inherit !important; }


/* ---- Dark panels and selected chips ------------------------------------
   These are components the old system painted forest green and filled with
   light text. Their fill token now flips with the theme, which turned them
   into light panels still carrying light text. They take the constant dark
   fill and its own foreground instead, so the relationship holds in both. */
body.site-v3 :is(.gm6-finder-copy, .gm6-compare-head, .gm6-panel-dark,
  .method-band, .order-console-rail, .home-console-rail) {
  background: var(--d-fill) !important;
  color: var(--d-fill-in) !important;
}
body.site-v3 :is(.gm6-finder-copy, .gm6-compare-head, .gm6-panel-dark,
  .method-band) :is(p, li, span, small, strong, b, h1, h2, h3, .eyebrow) {
  color: var(--d-fill-in) !important;
}

/* A chosen option is filled with the accent, which is a dark green here, so
   its label has to be light -- the old accent was lime and wanted dark text. */
body.site-v3 :is(.gm6-choice.is-selected, .option-check, .quiz-option:has(input:checked) .option-check) {
  background: var(--d-accent) !important;
  color: var(--d-accent-in) !important;
}
body.site-v3 .gm6-choice.is-selected :is(span, b, strong, small, h3) {
  color: var(--d-accent-in) !important;
}

/* ---- Final foreground corrections --------------------------------------
   These lose to identically-specific rules written for the old palette, so
   they carry the theme attribute to sit above them. Each one is a fill whose
   foreground has to move with it. */

/* A chosen goal chip: accent fill in light, mint fill in dark, and in both
   cases the label is the fill's own foreground rather than an inherited mint
   that was correct only against forest green. */
html[data-theme] body.site-v3 :is(.gm6-choice.is-selected, .gm6-choice.is-on, .is-on)
  :is(b, strong, small, span, h3, p) {
  color: var(--d-fill-in) !important;
}
html[data-theme] body.site-v3 :is(.gm6-choice.is-selected, .gm6-choice.is-on, .is-on) {
  background: var(--d-fill) !important;
  background-image: none !important;
  color: var(--d-fill-in) !important;
  border-color: var(--d-accent) !important;
}

/* Glyphs inside a primary button follow the button, not the page. */
html[data-theme] body.site-v3 .btn:is(.btn-primary, .home-primary, .match-primary)
  :is(.gm6-arrow, span, b, small) {
  color: var(--d-btn-in) !important;
}
html[data-theme] body.site-v3 :is(.order-console-reason, .home-console-reason) span {
  color: var(--d-fill-in) !important;
}

/* Page openings are white now, so the light mints written for the green
   billboard have to become ink and muted -- including the per-word spans the
   homepage headline treatment leaves on other pages. */
html[data-theme] body.site-v3 main :is([class*="hero"], .policy-hero)
  :is(h1, h2, .gm6-title-word, .gm6-title-word span, strong, b) {
  color: var(--d-ink) !important;
}
html[data-theme] body.site-v3 main :is([class*="hero"], .policy-hero)
  :is(p, li, small, dd, .eyebrow, .article-deck):not(:where(.btn, .btn *)) {
  color: var(--d-muted) !important;
}
html[data-theme] body.site-v3 main :is([class*="hero"], .policy-hero) .eyebrow {
  color: var(--d-muted-2) !important;
}


/* Any element carrying the dark fill carries its foreground too, so a chip
   the enumeration above missed cannot end up ink on ink. */
html[data-theme] body.site-v3 :is(.mm-chip, .quiz-chip, .chip, .tag, .pill,
  .meal-rank, .rank, .badge)[class*="on"],
html[data-theme] body.site-v3 :is(.mm-chip, .quiz-chip)[class*="on"] :is(span, b, small) {
  color: var(--d-fill-in) !important;
}

/* Some heroes carry their gradient from a rule more specific than the one
   above, so the ground stayed green under text this direction recoloured for
   white. Stated once more with the theme attribute, covering .liquid-surface
   since that is the class the decorative grounds ride on. */
html[data-theme] body.site-v3 :is([class*="hero"], .liquid-surface, .home-intro, .match-intro) {
  background-color: var(--d-bg) !important;
  background-image: none !important;
}
html[data-theme] body.site-v3 :is([class*="hero"], .liquid-surface)
  :is(p, li, span, small, dd, .eyebrow):not(:where(.btn, .btn *, [class*="card"], [class*="card"] *)) {
  color: var(--d-muted) !important;
}
html[data-theme] body.site-v3 :is([class*="hero"], .liquid-surface) .eyebrow {
  color: var(--d-muted-2) !important;
}

/* A ghost button written for a dark band: white label on a translucent white
   fill, which on the white ground this direction uses is 1.00:1 — the button
   is there and completely unreadable. */
html[data-theme] body.site-v3 :is(a, button).btn:is(.btn-ghost, .btn-outline, .quiz-back) {
  background: transparent !important;
  border: 1px solid var(--d-line-2) !important;
  color: var(--d-ink) !important;
}
html[data-theme] body.site-v3 :is(a, button).btn:is(.btn-ghost, .btn-outline, .quiz-back)
  :is(span, b, small) { color: var(--d-ink) !important; }

/* Stated with literal colours and no var(), and with the page's own body
   classes in the selector. The ghost button on the calculators hub resisted
   every token-based rule above it; a literal declaration removes var()
   resolution as a variable in the diagnosis. */
html body.site-v3 a.btn.btn-ghost,
html body.site-v3 button.btn.btn-ghost,
html body.site-v3 .calc-hero-actions a.btn.btn-ghost {
  color: #0d1b14 !important;
  background-color: transparent !important;
  border: 1px solid #dfe5e1 !important;
}
html[data-theme="dark"] body.site-v3 a.btn.btn-ghost,
html[data-theme="dark"] body.site-v3 button.btn.btn-ghost,
html[data-theme="dark"] body.site-v3 .calc-hero-actions a.btn.btn-ghost {
  color: #f2f6f3 !important;
  border-color: rgba(242, 246, 243, .22) !important;
}

/* ---- Controls inside the panels that stay dark in both themes -----------
   The block above gives six panels a constant dark fill and a light
   foreground, but it names only text tags. Anything else inside them kept
   the page's own colours: the ghost button on the editorial band rendered
   #0d1b14 ink on a #0d1b14 ground -- 1.00:1, present and completely
   unreadable, on blog.html and articles.html.
   Rather than write a competing rule for every control, the panel redefines
   the tokens the control rules already read. Custom properties inherit, so
   a button inside one of these panels resolves the same declarations against
   a palette that suits its ground. No specificity contest, and it covers the
   controls nobody has put in one of these panels yet.
   Safe because none of the six ever contains a light surface of its own --
   checked across all 67 pages; if one ever does, it needs these tokens
   restored to the page values on that surface. */
body.site-v3 :is(.gm6-finder-copy, .gm6-compare-head, .gm6-panel-dark,
  .method-band, .order-console-rail, .home-console-rail) {
  --d-ink: var(--d-fill-in);
  --d-muted: rgba(255, 255, 255, .78);
  --d-muted-2: rgba(255, 255, 255, .68);
  --d-line: rgba(255, 255, 255, .18);
  --d-line-2: rgba(255, 255, 255, .34);
  --d-btn: var(--d-fill-in);
  --d-btn-in: var(--d-fill);
  --d-accent: var(--d-fill-in);
}

/* ---- One primary button, everywhere ------------------------------------
   Three different fills were still shipping in light mode: the dark solid
   this direction asks for, a pale mint, and the old lime-to-mint gradient.
   Two reasons, both structural rather than one-off:

   1. The earlier primary rule requires .btn, so .calc-submit and a bare
      button[type="submit"] never matched it and kept the gradient.
   2. `:is(.btn-primary, .calc-submit, button[type="submit"])` in theme-fix
      scores on its MOST specific argument -- button[type="submit"], not the
      class -- so that selector is (0,3,3) and the rule above it is (0,3,2).
      A more general-looking selector was quietly winning.

   This one carries the theme attribute and an attribute on the subject to
   clear both, and names the submit controls directly. */
html[data-theme] body.site-v3 :is(a, button, input)[class]:is(.btn-primary,
  .home-primary, .match-primary, .quiz-continue, .calc-submit),
html[data-theme] body.site-v3 button[type="submit"]:not(.btn-outline):not(.btn-ghost),
html[data-theme] body.site-v3 input[type="submit"] {
  background: var(--d-btn) !important;
  background-image: none !important;
  border: 1px solid var(--d-btn) !important;
  color: var(--d-btn-in) !important;
  box-shadow: none !important;
}
html[data-theme] body.site-v3 :is(a, button, input)[class]:is(.btn-primary,
  .home-primary, .match-primary, .quiz-continue, .calc-submit)
  :is(span, b, strong, small, .gm6-arrow) {
  color: var(--d-btn-in) !important;
}

/* ---- Homepage tools: useful links, not a dashboard ----------------------
   This section used to become one tall dark slab on phones, with four
   cramped square tiles. Keep the primary calculator prominent, then let the
   remaining tools read like a short, scannable menu. These selectors are
   intentionally stronger than the older joined-hero treatment. */
html[data-theme] body.site-v3.home-studio main > section.gm6-tools.gm6-tools-joined:nth-of-type(n) {
  margin: 0 !important;
  padding: clamp(48px, 7vw, 80px) 0 !important;
  border-radius: 0 !important;
  background: var(--d-bg) !important;
  background-image: none !important;
}

body.site-v3.home-studio .gm6-tools-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--d-line);
}
body.site-v3.home-studio .gm6-tools-head .eyebrow {
  margin: 0 0 9px;
  color: var(--d-accent) !important;
}
body.site-v3.home-studio .gm6-tools-head h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--d-ink) !important;
  font-size: clamp(1.8rem, 3.2vw, 3rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.04em;
}
body.site-v3.home-studio .gm6-tools-head div > p:last-child {
  max-width: 58ch;
  margin: 13px 0 0;
  color: var(--d-muted) !important;
}
body.site-v3.home-studio .gm6-tools-all {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--d-ink) !important;
  font-weight: 700;
  text-decoration: none !important;
}
body.site-v3.home-studio .gm6-tools-all span { color: var(--d-accent) !important; }

body.site-v3.home-studio .gm6-tool-bento {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(142px, auto);
  gap: 12px;
}
html body.site-v3.home-studio .gm6-tools-joined .gm6-tool {
  grid-column: span 4;
  min-height: 0;
  padding: 22px;
  border: 1px solid var(--d-line) !important;
  border-radius: var(--d-r) !important;
  background: var(--d-surface) !important;
  backdrop-filter: none;
  box-shadow: var(--d-shadow);
  color: var(--d-ink) !important;
  transition: transform .24s ease, border-color .24s ease, background-color .24s ease;
}
html body.site-v3.home-studio .gm6-tools-joined .gm6-tool:first-child {
  grid-column: span 4;
  grid-row: span 2;
  min-height: 296px;
  border-color: var(--d-line-2) !important;
  background: var(--d-surface-3) !important;
}
html body.site-v3.home-studio .gm6-tools-joined .gm6-tool :is(h3, h4, strong, b) {
  color: var(--d-ink) !important;
}
html body.site-v3.home-studio .gm6-tools-joined .gm6-tool h3,
html body.site-v3.home-studio .gm6-tools-joined .gm6-tool:first-child h3 {
  max-width: 13ch;
  margin: 16px 0 6px;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em;
}
html body.site-v3.home-studio .gm6-tools-joined .gm6-tool p {
  max-width: 34ch;
  margin: 0;
  color: var(--d-muted) !important;
  font-size: .9rem;
  line-height: 1.45;
}
html[data-theme] body.site-v3.home-studio .gm6-tools-joined a.gm6-tool .gm6-tool-num {
  color: var(--d-muted-2) !important;
  font-size: .7rem;
  letter-spacing: .09em;
}
html body.site-v3.home-studio .gm6-tools-joined .gm6-tool-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--d-tint) !important;
  color: var(--d-accent) !important;
}
body.site-v3.home-studio .gm6-tool-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--d-accent) !important;
  font-size: 1.1rem;
  transition: transform .24s ease;
}
html body.site-v3.home-studio .gm6-tools-joined .gm6-tool:hover {
  transform: translateY(-2px);
  border-color: var(--d-line-2) !important;
  background: var(--d-surface-2) !important;
  box-shadow: var(--d-shadow);
}
body.site-v3.home-studio .gm6-tool:hover .gm6-tool-arrow { transform: translateX(3px); }

@media (max-width: 700px) {
  html[data-theme] body.site-v3.home-studio main > section.gm6-tools.gm6-tools-joined:nth-of-type(n) {
    padding: 38px 0 50px !important;
  }
  body.site-v3.home-studio .gm6-tools-head {
    display: block;
    margin-bottom: 16px;
    padding-bottom: 20px;
  }
  body.site-v3.home-studio .gm6-tools-head h2 {
    max-width: 15ch;
    font-size: clamp(1.65rem, 7.4vw, 2rem) !important;
    line-height: 1.07 !important;
  }
  body.site-v3.home-studio .gm6-tools-head div > p:last-child {
    margin-top: 10px;
    font-size: max(.9rem, 14px);
    line-height: 1.48;
  }
  body.site-v3.home-studio .gm6-tools-all {
    margin-top: 14px;
    min-height: 36px;
    font-size: .9rem;
  }
  body.site-v3.home-studio .gm6-tool-bento {
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
    border-top: 1px solid var(--d-line);
  }
  html body.site-v3.home-studio .gm6-tools-joined .gm6-tool,
  html body.site-v3.home-studio .gm6-tools-joined .gm6-tool:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 3px 12px;
    min-height: 86px !important;
    padding: 16px 4px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--d-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none;
  }
  html body.site-v3.home-studio .gm6-tools-joined .gm6-tool:first-child {
    min-height: 116px !important;
    margin-bottom: 5px;
    padding: 18px 16px !important;
    border: 1px solid var(--d-line-2) !important;
    border-radius: var(--d-r) !important;
    background: var(--d-surface-3) !important;
  }
  body.site-v3.home-studio .gm6-tool-num {
    grid-column: 1;
    grid-row: 1;
  }
  body.site-v3.home-studio .gm6-tool > div {
    grid-column: 1;
    grid-row: 2;
  }
  html body.site-v3.home-studio .gm6-tools-joined .gm6-tool h3,
  html body.site-v3.home-studio .gm6-tools-joined .gm6-tool:first-child h3 {
    max-width: none;
    margin: 3px 0 2px;
    font-size: max(1.02rem, 16px) !important;
    line-height: 1.16 !important;
  }
  html body.site-v3.home-studio .gm6-tools-joined .gm6-tool p,
  html body.site-v3.home-studio .gm6-tools-joined .gm6-tool:not(:first-child) p {
    display: block;
    margin: 0;
    font-size: max(.78rem, 12.5px) !important;
    line-height: 1.35 !important;
  }
  body.site-v3.home-studio .gm6-tool-arrow {
    position: static;
    grid-column: 2;
    grid-row: 1 / 3;
    justify-self: end;
  }
  html body.site-v3.home-studio .gm6-tools-joined .gm6-tool-icon { display: none; }
}