/* The free tools (L7): the hub and the three tool pages, on site.css's tokens (L3). Mobile first.
   These pages switch language by URL: the header's and footer's language links replace the select, and nothing
   is stored. */

/* ---------- the language links ---------- */
.t-langs { display: flex; align-items: center; gap: 2px; list-style: none; }
.t-langs a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--s2); border: 2px solid transparent; border-radius: 10px; color: var(--green); font: 700 14px/1 var(--font-body); letter-spacing: 1px; text-decoration: none; font-variant-numeric: lining-nums; }
.t-langs a:hover { text-decoration: underline; }
.t-langs a[aria-current="true"] { border-color: var(--green); }
.site-footer .t-langs a { color: var(--on-green-muted); }
.site-footer .t-langs a[aria-current="true"] { color: var(--on-green); border-color: var(--on-green-muted); }
@media (max-width: 1099px) { .sh-panel .t-langs { margin-top: var(--s3); } }
/* on a tool page the header's "Tools" is the current section (aria-current="true"), marked as the current page is */
.sh-links a[aria-current="true"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }

/* ---------- the page ---------- */
/* the privacy line, under the intro */
.t-privacy { max-width: 38rem; margin: var(--s3) auto 0; color: var(--on-green-muted); font-size: 15px; line-height: 1.5; text-align: center; position: relative; }
.t-privacy svg { display: inline-block; width: 17px; height: 17px; margin-right: 6px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-main { max-width: var(--container); margin: 0 auto; padding: var(--s6) var(--s4) var(--s8); }

/* ---------- L7 (B): each tool tells its story in six sections, as bands in home's rhythm ---------- */
/* 1. the top: the tool's name, the pain headline, the subhead, the privacy line */
.t-tool-name { display: inline-flex; align-items: center; gap: var(--s2); margin: 0 auto var(--s3); padding: 6px var(--s3) 6px var(--s2); border: 1px solid var(--line-on-green); border-radius: 999px; color: var(--on-green); font-size: 15px; font-weight: 700; position: relative; }
.t-tool-name svg { width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-hero h1 { max-width: 22ch; margin-left: auto; margin-right: auto; }
/* 2–6. the bands, with home's section headings */
.t-band { padding: var(--s8) var(--s4); }
@media (min-width: 720px) { .t-band { padding: var(--s9) var(--s5); } }
.t-wrap { max-width: var(--container); margin: 0 auto; }
.t-band .t-wrap > h2 { margin-bottom: var(--s5); font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1.15; color: var(--green); text-align: center; }
.t-calc { padding-top: var(--s6); background: var(--white); }
/* the compact top (L7-OWNER §3): the name, the headline, one sentence, the privacy line, then the calculator */
.t-hero { padding-top: var(--s6); padding-bottom: var(--s6); }
.t-hero .t-tool-name { margin-bottom: var(--s2); }
.t-hero .t-lead { max-width: 36rem; }
/* a hero heading wraps rather than clips when the text grows */
.page-hero h1 { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 719px) {
  .t-hero { padding-top: var(--s5); padding-bottom: var(--s5); }
  .t-hero h1 { font-size: clamp(28px, 3vw, 40px); }   /* the site's next heading size down: its section headings' */
  .t-calc { padding-top: var(--s5); }
  .t-calc .t-wrap > h2 { margin-bottom: var(--s4); }
}
/* 4. what it means for the business: the visitor's own figures, in green beside the result's deep green */
.t-meaning { background: var(--green); color: var(--on-green); }
.t-meaning .t-wrap > h2 { color: var(--on-green); }
.t-means { display: grid; gap: var(--s4); max-width: 44rem; margin: 0 auto; text-align: center; }
.t-mean { font: 700 clamp(21px, 2.6vw, 27px)/1.4 var(--font-display); color: var(--on-green); font-variant-numeric: lining-nums; }
.t-mean strong { color: var(--gold); font-weight: 800; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.t-mean-note { font-size: 15px; color: var(--on-green-muted); }
/* 5. how Cuenta & Cocina solves it: three points */
.t-solves { background: var(--white); border-top: 1px solid var(--line); }
.t-solve-list { display: grid; gap: var(--s5); list-style: none; max-width: 60rem; margin: 0 auto; }
@media (min-width: 860px) { .t-solve-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
.t-solve-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.t-solve-list svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--cream-soft); fill: none; stroke: var(--coral-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.t-solve-list p { font-size: 17px; line-height: 1.55; color: var(--ink); }
.t-solve-list strong { color: var(--green); }
/* 6. and more in the app: three feature cards (one design on every tool), then the trial line and the one button */
.t-more { background: var(--cream); }
.t-features { display: grid; gap: var(--s4); list-style: none; }
@media (min-width: 860px) { .t-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
.t-feature { display: grid; align-content: start; gap: var(--s2); padding: var(--s5); background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); }
.t-feature-head { display: flex; align-items: center; gap: var(--s3); }
.t-feature-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--cream-soft); }
.t-feature-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--coral-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-feature h3 { font: 800 21px/1.25 var(--font-display); color: var(--green); font-variant-numeric: lining-nums; }
.t-feature p { font-size: 16px; line-height: 1.55; color: var(--ink); }
.t-more-cta { display: grid; justify-items: center; gap: var(--s3); margin-top: var(--s7); text-align: center; }
.t-trial-line { max-width: 34rem; font: 700 clamp(19px, 2.2vw, 22px)/1.4 var(--font-display); color: var(--green); font-variant-numeric: lining-nums; }
@media (min-width: 720px) { .t-main { padding: var(--s7) var(--s5) var(--s9); } }

/* ---------- a tool: the inputs, then the answer; side by side from 960 px (nothing sticky: the owner's decision) ---------- */
.t-tool { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 960px) { .t-tool { grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); gap: var(--s6); } }
@media (min-width: 960px) { .t-tool-recipe .t-ingredients-group { grid-column: 1 / -1; } }
.t-inputs { display: grid; gap: var(--s4); min-width: 0; }
/* back to the example · start from scratch */
.t-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.t-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s4); background: var(--white); color: var(--green); border: 2px solid var(--green); border-radius: 999px; font: 700 15px/1.2 var(--font-body); cursor: pointer; transition: background-color 0.2s, color 0.2s; font-variant-numeric: lining-nums; }
.t-btn:hover { background: var(--green); color: var(--on-green); }
/* the example button while the example is showing: it stays focusable and does nothing */
.t-btn[aria-disabled="true"], .t-btn[aria-disabled="true"]:hover { color: var(--ink-muted); border-color: var(--line-strong); background: transparent; cursor: default; }
/* an undo, until the next change ("Calculadora vaciada.", "Ejemplo restaurado." under the two buttons, on its own line;
   "Ingrediente eliminado." in the removed line's own place, its outline dashed) */
.t-cleared { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); padding: 6px 6px 6px var(--s3); background: var(--cream); border-radius: var(--radius); font-size: 15px; font-weight: 700; color: var(--ink); }
.t-actions > .t-cleared { flex-basis: 100%; }
.t-cleared .t-btn { min-height: 44px; }
.t-undo-slot > .t-cleared { background: transparent; border: 2px dashed var(--line-strong); }
.t-group { display: grid; gap: var(--s4); min-width: 0; padding: var(--s4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); }
@media (min-width: 720px) { .t-group { padding: var(--s5); } }
.t-group h3 { font: 700 17px/1.3 var(--font-body); color: var(--green); font-variant-numeric: lining-nums; }
.t-grid { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 560px) { .t-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t-grid > .t-field > label { min-height: 2lh; display: flex; align-items: flex-end; } }
/* where it can: two fields' names share one row, each right above its input, so the inputs stay level when a name wraps
   or its detail opens (a field's name, its input, then its notice or its message: never both) */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 560px) {
    .t-grid > .t-field { grid-row: span 3; grid-template-rows: subgrid; }
    .t-grid > .t-field > .t-label-row, .t-grid > .t-field > label { align-self: end; min-height: 0; }
  }
}
/* a last field alone in its row takes the row; its input stays one column wide */
@media (min-width: 560px) {
  .t-grid > .t-field:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .t-grid > .t-field:last-child:nth-child(odd) > .t-control { width: calc((100% - var(--s4)) / 2); }
}

.t-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.t-field > label, .t-label { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.t-hint { font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
/* a short field name and its ⓘ, which follows the name's last word; the detail opens under them, in place (it never
   covers a field or leaves the screen) (L7-OWNER §2) */
.t-label-row { display: block; min-width: 0; }
.t-label-row > label { display: inline; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.t-tip-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -8px 0 -6px 0; padding: 0; vertical-align: middle; border: 0; border-radius: 8px; background: transparent; color: var(--ink-muted); cursor: pointer; }
.t-tip-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.t-tip-btn:hover, .t-tip-btn[aria-expanded="true"] { color: var(--green); background: var(--cream); }
.t-tip { display: block; margin-top: 6px; padding: var(--s2) var(--s3); background: var(--cream); border-radius: var(--radius); font-size: 14px; line-height: 1.45; color: var(--ink); }
.t-tip[hidden] { display: none; }
.t-control { display: flex; align-items: stretch; min-width: 0; background: var(--white); border: 2px solid var(--line-ui); border-radius: var(--radius); }
.t-control:focus-within { outline: 3px solid var(--green); outline-offset: 2px; }
.t-control:has([aria-invalid="true"]) { border-color: var(--coral-ink); }
.t-control input, .t-control select { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 9px 12px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); font: 17px/1.3 var(--font-body); font-variant-numeric: tabular-nums; }
.t-control input:focus-visible, .t-control select:focus-visible { outline: none; } /* the control draws the ring */
.t-control select { cursor: pointer; }
.t-affix { display: inline-flex; align-items: center; padding: 0 12px; border-left: 1px solid var(--line); color: var(--ink-muted); font-weight: 700; white-space: nowrap; }
.t-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 8.5rem); gap: var(--s2); }
.t-error { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--coral-ink); }
/* what a number field understood, when it isn't what was typed ("Entendido: 6") */
.t-echo { display: flex; align-items: center; gap: 6px; justify-self: start; padding: 3px var(--s2); background: var(--cream); border-radius: 6px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; }
.t-echo svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.t-echo.is-warning { border: 2px solid var(--gold-ink); font-size: 15px; }
.t-answer-echo { display: flex; align-items: center; gap: 6px; padding: var(--s2) var(--s3); border: 1px solid var(--gold); border-radius: var(--radius); color: var(--gold); font-size: 15px; font-weight: 700; line-height: 1.4; font-variant-numeric: lining-nums tabular-nums; }
.t-answer-echo svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* the lines of a recipe (one field per row on a phone: its labels are long) or a menu (price and cost side by side) */
.t-row-grid { display: grid; gap: var(--s3); align-items: start; }
@media (min-width: 560px) { .t-row-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.t-row-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* where it can: the two labels share one row, as tall as the longer, so the inputs line up with no reserved line
   (a field's label, its input, then its notice or its message: never both) */
@supports (grid-template-rows: subgrid) {
  .t-row-grid-2 { row-gap: 6px; }
  .t-row-grid-2 > .t-field { grid-row: span 3; grid-template-rows: subgrid; }
  .t-row-grid-2 > .t-field > .t-label-row { align-self: end; }
}
/* a recipe line on a phone: bought and used take the row; price and waste pair */
@media (max-width: 559px) {
  #t-ingredients .t-row-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #t-ingredients .t-row-grid > .t-field:nth-child(-n+2) { grid-column: 1 / -1; }
}
@supports (grid-template-rows: subgrid) {
  @media (max-width: 559px) {
    #t-ingredients .t-row-grid > .t-field:nth-child(n+3) { grid-row: span 3; grid-template-rows: subgrid; }
    #t-ingredients .t-row-grid > .t-field:nth-child(n+3) > .t-label-row { align-self: end; }
  }
}
@media (min-width: 960px) {
  #t-ingredients .t-row-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.8fr); }
  #t-ingredients .t-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 7rem); }
  #t-ingredients .t-pair select { font-size: 15px; padding: 9px 6px; }
}
.t-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); list-style: none; }
.t-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); min-width: 0; padding: var(--s3) var(--s3) var(--s4); background: var(--cream-soft); border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 720px) { .t-row { padding: var(--s3) var(--s4) var(--s4); } }
.t-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.t-row-head .t-name { flex: 1 1 10rem; min-width: 0; }
#t-ingredients .t-row-head .t-name { flex-basis: 6rem; }   /* a line's name, cost and × on one row on a phone */
/* a line's value and its remove button stay together, at the right */
.t-row-end { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); margin-left: auto; }
#t-ingredients .t-row-value { min-width: 7ch; }
@media (min-width: 560px) { #t-dishes .t-row-end { min-width: 12rem; } }
/* a dish's name takes the row on a phone; its category and remove button go under it */
@media (max-width: 559px) { #t-dishes .t-row-head .t-name { flex-basis: 100%; } }
.t-undo-slot { min-width: 0; }
.t-row-head .t-name input { font-weight: 700; color: var(--green); }
.t-row-head .t-name input::placeholder { color: var(--ink-muted); font-weight: 400; }
/* each line's live value, in its row: a recipe line's cost, a dish's category (in the app's category colours) */
.t-row-value { min-width: 4ch; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.t-row-value.is-pending { color: var(--ink-muted); font-weight: 400; text-align: center; }
.t-row-cat[data-cat] { padding: 2px var(--s2); border-radius: 999px; font-size: 14px; }
.t-row-cat[data-cat="Star"] { background: var(--cat-star-bg); color: var(--cat-star); }
.t-row-cat[data-cat="Plowhorse"] { background: var(--cat-horse-bg); color: var(--cat-horse); }
.t-row-cat[data-cat="Puzzle"] { background: var(--cat-puzzle-bg); color: var(--cat-puzzle); }
.t-row-cat[data-cat="Dog"] { background: var(--cat-dog-bg); color: var(--cat-dog); }
/* the recipe's cost per portion, right under the ingredient list */
.t-subtotal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s1) var(--s3); padding: var(--s3) var(--s4); background: var(--cream); border-radius: var(--radius); font-weight: 700; color: var(--green); }
.t-subtotal strong { font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-subtotal-rec { margin-top: calc(-1 * var(--s2)); background: var(--cream-soft); }
.t-remove { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; padding: 0; background: transparent; color: var(--ink-muted); border: 0; border-radius: 10px; cursor: pointer; }
.t-remove svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.t-remove:hover { color: var(--coral-ink); background: var(--white); }
.t-remove:disabled { visibility: hidden; }
.t-add { justify-self: start; display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); background: var(--white); color: var(--green); border: 2px solid var(--green); border-radius: 999px; font: 700 15px/1 var(--font-body); cursor: pointer; font-variant-numeric: lining-nums; }
.t-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.t-add:hover { background: var(--cream-soft); }
.t-add:disabled { color: var(--ink-muted); border-color: var(--line-strong); cursor: not-allowed; }
/* at the row limit: "Máximo 30 ingredientes." */
.t-limit { margin-top: calc(-1 * var(--s2)); font-size: 14px; line-height: 1.45; color: var(--ink-muted); }

/* ---------- the answer ---------- */
.t-answer { display: grid; gap: var(--s4); min-width: 0; padding: var(--s5); background: var(--green-deep); color: var(--on-green); border-radius: var(--radius-lg); }
.t-answer :focus-visible { outline-color: var(--gold); }
.t-answer h3 { font: 700 15px/1.3 var(--font-body); color: var(--on-green-muted); font-variant-numeric: lining-nums; }
/* the copy's sentences, their figures in bold; "—" while a field can't be used */
.t-says { display: grid; gap: var(--s3); }
.t-say { font-size: 17px; line-height: 1.55; color: var(--on-green); }
.t-say-lead { font: 700 clamp(21px, 5.4vw, 25px)/1.35 var(--font-display); font-variant-numeric: lining-nums; }
.t-says strong { color: var(--gold); font-weight: 800; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.t-say-note { padding-top: var(--s3); border-top: 1px solid var(--line-on-green); font-size: 15px; line-height: 1.5; color: var(--on-green-muted); }
.t-pending { font: 800 40px/1 var(--font-display); color: var(--on-green-muted); font-variant-numeric: lining-nums; }
/* the menu's sentence in place of the dash: "Completa todos los platos para ver su categoría." */
.t-pending-text { font: 600 17px/1.5 var(--font-body); color: var(--on-green); font-variant-numeric: lining-nums; }
.t-pending-msg { justify-self: start; min-height: 44px; padding: 0; background: none; border: 0; color: var(--on-green); font: 700 15px/1.4 var(--font-body); text-align: left; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; font-variant-numeric: lining-nums; }

/* read by screen readers, not shown: the one place a new answer is announced */
.t-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the menu matrix: one block per category, stacked, in the app's category colours; a category without a dish isn't shown */
.t-cats { display: grid; gap: var(--s3); }
.t-cat { display: grid; gap: var(--s2); min-width: 0; padding: var(--s4); border-radius: var(--radius); }
.t-cat h4 { font: 800 19px/1.25 var(--font-display); font-variant-numeric: lining-nums; }
.t-cat-desc { font-size: 15px; line-height: 1.45; }
.t-cat-dishes { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); list-style: none; }
.t-cat-dishes li { padding: 2px var(--s2); background: var(--white); border-radius: 999px; font-size: 15px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.t-cat-act { padding-top: var(--s2); border-top: 1px solid currentColor; font-size: 15px; line-height: 1.5; }
.t-cat[data-cat="Star"] { background: var(--cat-star-bg); color: var(--cat-star); }
.t-cat[data-cat="Plowhorse"] { background: var(--cat-horse-bg); color: var(--cat-horse); }
.t-cat[data-cat="Puzzle"] { background: var(--cat-puzzle-bg); color: var(--cat-puzzle); }
.t-cat[data-cat="Dog"] { background: var(--cat-dog-bg); color: var(--cat-dog); }

/* ---------- the maths ---------- */
.t-maths { margin-top: var(--s7); }
@media (min-width: 960px) { .t-maths { max-width: calc(100% - 23rem - var(--s6)); } .t-tool-recipe ~ .t-maths { max-width: none; } }
.t-maths { background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.t-maths-h button { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; min-height: 56px; padding: var(--s4) var(--s5); background: none; border: 0; color: var(--green); font: 700 18px/1.3 var(--font-body); text-align: left; cursor: pointer; font-variant-numeric: lining-nums; }
.t-maths-h button:hover { background: var(--cream-soft); }
.t-maths-h button:focus-visible { outline-offset: -3px; border-radius: 14px; }
.t-maths-h svg { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: var(--coral-ink); stroke-width: 2.2; stroke-linecap: round; transition: transform 0.2s var(--ease-out); }
.t-maths-h button[aria-expanded="true"] svg { transform: rotate(45deg); }
.t-maths-panel { padding: 0 var(--s5) var(--s4); }
.t-maths-note { margin-bottom: var(--s2); font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .t-maths-h svg { transition: none; } }
/* one line per step: what it is, then the sum with the visitor's numbers */
.t-steps { display: grid; grid-template-columns: minmax(0, 1fr); list-style: none; }
.t-steps li { padding: var(--s3) 0; border-bottom: 1px solid var(--line); line-height: 1.6; }
.t-math-label { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.t-math-formula { color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.t-maths > p { margin-bottom: var(--s2); line-height: 1.6; }
.t-note { margin-top: var(--s3); font-size: 15px; line-height: 1.6; color: var(--ink-muted); }

/* ---------- the call to action ---------- */
.t-cta { display: grid; justify-items: center; gap: var(--s3); margin-top: var(--s7); padding: var(--s6) var(--s4); background: var(--cream); border-radius: var(--radius-lg); text-align: center; }
/* the bridge, above the trial button */
.t-bridge { max-width: 36rem; font: 700 clamp(19px, 2.4vw, 22px)/1.4 var(--font-display); color: var(--green); font-variant-numeric: lining-nums; }
.t-cta-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 var(--s6); background: var(--coral-fill); color: var(--white); border-radius: 999px; font: 700 17px/1.2 var(--font-body); text-align: center; text-decoration: none; transition: background-color 0.2s, transform 0.2s var(--ease-out); font-variant-numeric: lining-nums; }
.t-cta-btn:hover { background: var(--coral-fill-hover); transform: translateY(-1px); }
@media (max-width: 719px) { .t-cta-btn { width: 100%; max-width: 340px; } }
@media (prefers-reduced-motion: reduce) { .t-cta-btn { transition: background-color 0.2s; } .t-cta-btn:hover { transform: none; } }
.t-cta-note { font-size: 15px; color: var(--ink-muted); }

/* ---------- the hub: one card per tool, three across from 860 px ---------- */
.t-cards { display: grid; gap: var(--s4); list-style: none; }
@media (min-width: 860px) {
  .t-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); }
  .t-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--s2); }
  .t-card a { grid-row: span 4; grid-template-rows: subgrid; }
}
.t-card a { display: grid; gap: var(--s2); height: 100%; padding: var(--s5); background: var(--white); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); text-decoration: none; transition: border-color 0.2s, transform 0.25s var(--ease-out); }
.t-card a:hover { border-color: var(--green); transform: translateY(-2px); }
.t-card h2 { font: 800 22px/1.2 var(--font-display); color: var(--green); font-variant-numeric: lining-nums; }
.t-card p { line-height: 1.55; }
/* each card's worked figure, from its tool's own example */
.t-card-head { display: flex; align-items: center; gap: var(--s3); }
.t-card-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--cream-soft); }
.t-card-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--coral-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.t-card-sample { margin-top: var(--s2); padding: var(--s3) var(--s4); background: var(--green-deep); color: var(--on-green); border-radius: var(--radius); font-size: 15px; line-height: 1.5; font-variant-numeric: lining-nums tabular-nums; }
.t-card-sample strong { color: var(--gold); font-weight: 800; }
.t-card-go { align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: var(--s2); padding: 0 var(--s4); border: 2px solid var(--green); border-radius: 999px; color: var(--green); font-weight: 700; transition: background-color 0.2s, color 0.2s; }
.t-card a:hover .t-card-go { background: var(--green); color: var(--on-green); }
.t-card-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease-out); }
.t-card a:hover .t-card-go svg { transform: translateX(3px); }
/* the hub's trial row: no slab, the button and its line under the cards */
.t-cta-plain { margin-top: var(--s7); padding: 0; background: none; }
@media (prefers-reduced-motion: reduce) { .t-card a, .t-card-go svg { transition: none; } .t-card a:hover, .t-card a:hover .t-card-go svg { transform: none; } }