/* GrowMore marketing site, the pages beyond Home (T-201 gate 2): Pricing, AI and agents, For accountants, Features, Security,
   Compare. Loaded after styles.css and built on its tokens and classes (gm-table, gm-state, gm-code, gm-btn, .sec, .h2, .eyebrow,
   .btn, .link, .qa, .final); nothing here redefines a token. Logical properties only, so ar.css mirrors by direction alone. */

/* the current page: a white chip with navy text on the dark bar, no outline (the owner, 2026-10-24) */
.nav-links a[aria-current], .nav-more a[aria-current] { background: #ffffff; color: #0b247f; }
.nav-links a[aria-current]:hover { background: #eef0f5; }

/* ── the page hero: the navy ground of Home's hero, ruled every 32 px on its start side ── */
.phero { position: relative; isolation: isolate; background: #0b1230; color: #ffffff;
  margin-block-start: -64px; padding-block: calc(64px + clamp(40px, 5vw, 72px)) clamp(56px, 7vw, 96px);
  --ink: #ffffff; --ink-secondary: #c9d1ee; --accent-ink: #f7c083; --brand-ink: #ffffff; --brand-mark: #a3b4f5; --border: #2a3663; --focus-ring: #f7c083; }
.phero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(163,180,245,0.05) 31px 32px); mask-image: linear-gradient(to right, #000 0%, transparent 75%); }
[dir="rtl"] .phero::before { mask-image: linear-gradient(to left, #000 0%, transparent 75%); }
.phero-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.phero-one { max-inline-size: 1200px; }
.phero-one > :not(.bill) { max-inline-size: 860px; }
.phero-h1 { font: 800 clamp(2.25rem, 1.3rem + 3vw, 3.75rem)/1.05 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; margin-block-end: 20px; }
.phero-answer { font-size: 17px; line-height: 27px; color: #dfe4f7; max-inline-size: 64ch; }
.phero-lede { margin-block-start: 18px; font: 700 clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem)/1.45 var(--font-display); color: #f7c083; max-inline-size: 56ch; text-wrap: pretty; }
.phero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 28px; }
.btn-line { background: var(--surface-card); border-color: var(--border-strong); color: var(--brand-ink); }
.btn-line:hover { background: var(--surface-table-head); border-color: var(--brand); }

/* ── Pricing: the billing switch, then four plan cards crossing from the navy onto the paper ── */
.bill { display: inline-flex; gap: 4px; margin: 32px 0 0; padding: 4px; border: 1px solid #2a3663; border-radius: var(--radius-pill); background: #121b40; }
.bill label { position: relative; display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding-inline: 20px; border-radius: var(--radius-pill); font-weight: 600; font-size: 15px; color: #c9d1ee; cursor: pointer; transition: var(--tr); }
.bill input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.bill label:has(input:checked) { background: #ffffff; color: #0b1230; }
.bill label:has(input:focus-visible) { outline: 2px solid #f7c083; outline-offset: 2px; }
.bill-note { font: 500 12px/16px var(--font-mono); color: #f7c083; white-space: nowrap; }
.bill label:has(input:checked) .bill-note { color: #ad5600; }
.y { display: none; }
html:has(#bill-y:checked) .m { display: none; }
html:has(#bill-y:checked) .y { display: revert; }

.pcs { padding-block-end: clamp(48px, 6vw, 80px); }
.pcards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-block-start: clamp(-96px, -6vw, -48px); align-items: stretch; }
.pc { display: flex; flex-direction: column; gap: 14px; padding: 24px 22px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgba(11,36,127,0.06), 0 18px 44px rgba(11,18,48,0.12); scroll-margin-block-start: 96px; }
.pc-feat { background: #0b247f; border-color: #0b247f; color: #ffffff; --ink: #ffffff; --ink-secondary: #dfe4f7; --ink-muted: #c9d1ee; --brand-ink: #ffffff; --border: #ffffff33; --brand-mark: #f19a3e; --focus-ring: #f7c083;
  box-shadow: 0 2px 4px rgba(4,8,28,0.25), 0 24px 56px rgba(11,36,127,0.35); }
.pc { position: relative; }
.pc-start { position: absolute; inset-block-start: -12px; inset-inline-start: 20px; }
.pc-start .gm-state { min-block-size: 24px; box-shadow: 0 4px 12px rgba(4,8,28,0.25); }
.pc-feat .gm-neutral { background: #ffffff; color: #0b247f; border-color: #ffffff; }
.pc-name { font: 800 22px/28px var(--font-display); letter-spacing: -0.01em; color: var(--brand-ink); }
.pc-line { font-size: 14px; line-height: 20px; color: var(--ink-secondary); min-block-size: 40px; }
.pc-price { display: grid; gap: 6px; padding-block: 16px; border-block: 1px solid var(--border); }
.pc-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-block-size: 24px; font: 600 12px/16px var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }
.pc-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-block-size: 60px; }
.pc-fig b { font: 800 clamp(2.75rem, 2.2rem + 1.4vw, 3.5rem)/1 var(--font-display); letter-spacing: -0.03em; color: var(--brand-ink); }
.pc-fig-word b { font-size: clamp(2rem, 1.7rem + 0.8vw, 2.5rem); line-height: 60px; }
.pc-fig > span { font-size: 15px; color: var(--ink-secondary); }
.pc-reg { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-block-size: 28px; font-size: 14px; color: var(--ink-secondary); }
.pc-reg s { font-weight: 600; color: var(--ink-secondary); text-decoration-thickness: 1.5px; }
.pc-reg .ic { color: var(--brand-mark); }
.pc-off { display: inline-flex; align-items: center; min-block-size: 24px; padding-inline: 9px; border-radius: var(--radius-pill); background: #fef2e6; border: 1px solid #ad5600; color: #8a4400; font: 700 12.5px/16px var(--font-sans); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.pc-feat .pc-off { background: #f19a3e; border-color: #f19a3e; color: #121a3a; }
.pc-list { display: grid; gap: 2px; flex: 1; align-content: start; }
.pc-list li { position: relative; padding-block: 3px; padding-inline-start: 16px; font-size: 14px; line-height: 20px; color: var(--ink-secondary); }
.pc-list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 9px; inline-size: 7px; block-size: 7px; background: var(--brand-mark); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.pc-cta { inline-size: 100%; margin-block-start: 4px; }
.pc-usd { margin-block-start: 16px; font-size: 14px; color: var(--ink-muted); }
@media (prefers-reduced-motion: no-preference) {
  .pc { transition: translate 300ms var(--motion-curve), box-shadow 300ms var(--motion-curve); }
  .pc:hover { translate: 0 -4px; }
  html:has(#bill-y:checked) .pc-fig .y, html:has(#bill-m:checked) .pc-fig .m { animation: rise var(--motion-base) var(--motion-curve); }
}

/* the full comparison: a real gm-table, groups as tbody, the head sticky under the nav on a wide screen */
.cmp-sec { background: var(--surface-card); border-block: 1px solid var(--border); }
.cmp-sec .h2 { margin-block-end: 28px; }
.cmp { min-inline-size: 760px; }
.cmp th, .cmp td { padding: 10px 14px; block-size: auto; font-size: 14px; line-height: 20px; }
.cmp > thead > tr > th { position: sticky; inset-block-start: 64px; z-index: 2; }
.cmp.gm-table > thead > tr > th:not(:first-child) { font: 800 17px/22px var(--font-display); letter-spacing: -0.01em; text-transform: none; color: var(--brand-ink); }
.cmp.gm-table > thead > tr > th:nth-child(3) { box-shadow: inset 0 -1px 0 var(--border-strong), inset 0 3px 0 #f19a3e; }
.cmp tbody th[scope="row"] { inline-size: 34%; font-weight: 400; color: var(--ink); text-align: start; }
.cmp td { inline-size: 16.5%; }
.cmp-g th { background: var(--surface-panel); color: var(--ink-muted); font: 600 12px/16px var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; padding-block: 8px; }
.yn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.yn-y { color: var(--positive); }
.yn-n { color: var(--ink-muted); font-weight: 400; }
.yn-u { font-weight: 600; color: var(--brand-ink); }
.cmp td .tnum { font-weight: 600; }
.cmp-foot { margin-block-start: 16px; color: var(--ink-secondary); max-inline-size: 760px; }
@media (max-width: 899px) {
  .cmp-wrap { overflow-x: auto; border-radius: var(--radius-lg); }
  .cmp > thead > tr > th { position: static; }
  .cmp tbody th[scope="row"], .cmp thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--surface-card); inline-size: 150px; min-inline-size: 150px; }
  .cmp thead th:first-child { background: var(--surface-table-head); }
  .cmp-g th { position: static !important; }
}

/* the 300-document start: one figure and one paragraph on the moving honeycomb */
.s3-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.s3-fig { display: grid; gap: 10px; }
.s3-fig .kpi { font-size: clamp(5rem, 3.4rem + 6vw, 9rem); color: var(--brand-ink); letter-spacing: -0.04em; }
.s3-cap { font: 600 16px/24px var(--font-sans); color: var(--ink-secondary); }
.s3-copy { display: grid; gap: 18px; justify-items: start; padding: clamp(20px, 3vw, 32px); background: rgba(255,255,255,0.86); border: 1px solid var(--border); border-radius: var(--radius-xl); }

/* yearly and Business: two plain columns under one rule */
.yb { padding-block-start: 0; }
.yb-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); padding-block-start: 32px; border-block-start: 1px solid var(--border-strong); }
.yb-col { display: grid; gap: 10px; align-content: start; justify-items: start; }
.yb-col > .ic { inline-size: 28px; block-size: 28px; color: var(--brand-mark); }
.yb-h { font-size: 22px; line-height: 30px; color: var(--brand-ink); }
.yb-col p { color: var(--ink-secondary); max-inline-size: 52ch; }

@media (max-width: 1099px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .phero-in, .s3-in, .yb-in { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .pcards { grid-template-columns: 1fr; }
  .bill { display: flex; }
  .bill label { flex: 1; justify-content: center; padding-inline: 10px; }
}

/* tabular figures after every font shorthand of this file */
.phero-h1, .phero-lede, .pc-name, .pc-label, .pc-fig b, .pc-off, .bill-note, .cmp-g th, .cmp.gm-table > thead > tr > th, .s3-cap { font-variant-numeric: tabular-nums; }

/* ══ AI and agents ══ */
.gm-action { display: inline-flex; align-items: center; min-block-size: 24px; padding-inline: 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--brand-ink); font: 600 12px/16px var(--font-sans); white-space: nowrap; }
.state-ask { color: #8a4400; background: #fef2e6; border: 1px dashed #ad5600; }
.state-ask::before { display: none; }

/* the hero's examples: a white sheet in the end column that crosses the navy's foot into the next section */
.phero-ai { padding-block-end: 56px; }
.phero-ai .phero-in { align-items: start; }
.ex { position: relative; z-index: 2; align-self: end; translate: 0 112px; padding: 16px 20px 18px; background: #ffffff; color: #121a3a; border-radius: var(--radius-xl);
  box-shadow: 0 2px 4px rgba(4,8,28,0.25), 0 24px 60px rgba(4,8,28,0.45);
  --ink: #121a3a; --ink-secondary: #343d5c; --ink-muted: #5b6480; --border: #d9deea; --border-strong: #7f8aa8; --brand-mark: #0b247f; --brand-ink: #0b247f; --accent-ink: #ad5600; --focus-ring: #0b247f; --surface-card: #ffffff; --surface-panel: #eef0f5; }
.phero-ai + .sec { padding-block-start: calc(var(--sec) + 96px); }
.ex-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-block-end: 12px; margin-block-end: 14px; border-block-end: 1px solid #d9deea; }
.ex-tabs .scene-b[aria-selected="true"] { border-color: #0b247f; color: #0b247f; background: #e8ecf8; }
.js .ex-panel[data-off] { display: none; }
.ex-panel + .ex-panel { margin-block-start: 24px; }
.js .ex-panel + .ex-panel { margin-block-start: 0; }
.ex-say { margin: 0 0 14px; max-inline-size: none; }
.ex-say .say-text { font-size: 18px; line-height: 27px; }
.ex-doc .doc-act { margin-block-start: 12px; }
.ex-doc .doc-who { display: inline-flex; align-items: center; gap: 6px; }
.ex-doc .approve { pointer-events: none; }
.ex-ask { margin-block-start: 12px; padding: 10px 14px; background: #fef2e6; border: 1px solid #f7c083; border-inline-start: 3px solid #ad5600; border-radius: var(--radius-md); }
.ex-ask p { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: #121a3a; }
.ex-ask p .ic { color: #ad5600; }
.ex-ask ul { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 8px; }
.ex-ask li { padding: 2px 8px; border: 1px solid #7f8aa8; border-radius: var(--radius-sm); background: #ffffff; }
.ex-note { margin-block-start: 10px; font-size: 12.5px; color: #5b6480; }
@media (prefers-reduced-motion: no-preference) { .ex-panel.is-in .doc { animation: rise var(--motion-base) var(--motion-curve); } .ex-panel.is-in .say { animation: rise 200ms var(--motion-curve); } }

/* the 44 tools as six families: count, name, purpose and the real tool names */
.fams { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fam { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-card); }
.fam-head { display: flex; align-items: baseline; gap: 12px; }
.fam-n.kpi { font-size: clamp(2.5rem, 2rem + 1.4vw, 3.25rem); }
.fam-name { font: 800 20px/26px var(--font-display); color: var(--brand-ink); }
.fam-d { color: var(--ink-secondary); font-size: 15px; }
.fam-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: auto; padding-block-start: 6px; }
.fam-tools li { padding: 1px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-panel); color: var(--ink-secondary); }
.fam-tools .gm-code { font-size: 12px; }
.fam-propose { background: #0b1230; border-color: #0b1230; color: #ffffff; --ink: #fff; --ink-secondary: #c9d1ee; --brand-ink: #ffffff; --border: #2a3663; --surface-panel: #121b40; }
.fam-propose .kpi { color: #f7c083; }
.fam-post { border: 1.5px solid #ad5600; background: #fffaf4; }
.fam-post .kpi { color: #ad5600; }

/* what the agent reads: the question and its list, over the moving honeycomb */
.reads-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.reads-p { margin-block-start: 16px; }
.reads-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reads-list li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; background: rgba(255,255,255,0.9); border: 1px solid var(--border); border-radius: var(--radius-md); font-weight: 600; font-size: 15px; line-height: 22px; }
.reads-list .ic { color: var(--brand-mark); }

/* the nine sentences as a table */
.drafts { background: var(--surface-card); border-block: 1px solid var(--border); }
.dtab { min-inline-size: 760px; }
.dtab th, .dtab td { padding: 12px 14px; block-size: auto; vertical-align: top; font-size: 14.5px; line-height: 21px; }
.dtab tbody th { inline-size: 34%; font-weight: 600; color: var(--brand-ink); }
.dtab td:last-child { color: var(--ink-secondary); }

/* connection: five steps on the drawn line, then one line per assistant */
@media (min-width: 900px) {
  .steps5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .steps-line5 { inline-size: calc((100% - 4 * var(--sg)) * 4 / 5 + 4 * var(--sg)); }
}
.steps5 .h3 { font-size: 18px; line-height: 25px; }
@media (prefers-reduced-motion: no-preference) {
  .io .steps5 > li { transition: none; }
  .io .steps-wrap:not(.is-seen) .steps5 > li { opacity: 1; translate: none; }
  .io .steps-wrap.is-seen .steps-line5 { animation: draw 1600ms cubic-bezier(0.4, 0, 0.2, 1) both; }
}
.per { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-block-start: clamp(32px, 4vw, 48px); }
.per > div { padding: 16px 18px; border: 1px solid var(--border); border-inline-start: 4px solid var(--brand); border-radius: var(--radius-md); background: var(--surface-card); }
.per dt { font: 800 18px/24px var(--font-display); color: var(--brand-ink); margin-block-end: 4px; }
.per dd { color: var(--ink-secondary); font-size: 15px; }

/* what it will not do: the one navy band of the page */
.never { background: radial-gradient(120% 140% at 0% 0%, #13287f 0%, #0b1a5c 55%, #0a1446 100%); color: #ffffff; --focus-ring: #f7c083; }
[dir="rtl"] .never { background: radial-gradient(120% 140% at 100% 0%, #13287f 0%, #0b1a5c 55%, #0a1446 100%); }
.never-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.never-h { font: 800 clamp(1.75rem, 1.1rem + 1.9vw, 2.75rem)/1.12 var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.never-p { margin-block-start: 16px; font-size: 18px; line-height: 28px; color: #dfe4f7; }
.nots li { display: flex; align-items: center; gap: 12px; min-block-size: 56px; border-block-end: 1px solid #ffffff26; font: 600 17px/24px var(--font-sans); }
.nots li:first-child { border-block-start: 1px solid #ffffff26; }
.nots .ic { color: #f19a3e; inline-size: 22px; block-size: 22px; }
.never-w { color: #f7c083; font-weight: 700; }
.never-key { display: flex; gap: 12px; margin-block-start: 24px; color: #dfe4f7; font-size: 16px; line-height: 25px; }
.never-key .ic { color: #f7c083; flex: none; margin-block-start: 2px; }

/* approval: the paragraph beside the "AI drafts" register */
.appr-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.reg { padding: 16px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow-x: auto; }
.reg-title { display: flex; align-items: center; gap: 8px; margin-block-end: 12px; font: 800 17px/24px var(--font-display); color: var(--brand-ink); }
.reg-title .ic { color: var(--brand-mark); }
.reg-t { min-inline-size: 520px; }
.reg-t td { font-size: 13.5px; }
.reg-t q { color: var(--ink); }

/* cost: the four allowances as one KPI row */
.cost { background: var(--surface-card); border-block: 1px solid var(--border); }
.kpis4 { grid-template-columns: repeat(4, 1fr); margin-block-end: 24px; }
@media (max-width: 1023px) {
  .kpis4 { grid-template-columns: repeat(2, 1fr); }
  .kpis4 li:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .kpis4 li:nth-child(even) { border-inline-start: 1px solid var(--border); padding-inline-start: 16px; }
  .kpis4 li:nth-child(n+3) { border-block-start: 1px solid var(--border); }
}
.kpis4 li:last-child .kpi { color: var(--brand-ink); }
.kpis4 li:first-child .kpi { color: var(--accent-ink); }

.a2a-tag { display: inline-block; margin-block-end: 12px; }
.a2a-p { color: var(--ink-secondary); max-inline-size: 64ch; }

.gloss-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-block-start: 28px; }
.gloss-dl > div { padding-block: 18px; border-block-start: 1px solid var(--border-strong); }
.gloss-dl dt { font: 700 17px/24px var(--font-display); color: var(--brand-ink); margin-block-end: 6px; }
.gloss-dl dd { color: var(--ink-secondary); font-size: 15px; line-height: 23px; }
.gloss-links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-block-start: 20px; }

@media (max-width: 1023px) { .fams, .gloss-dl { grid-template-columns: 1fr 1fr; } }
@media (max-width: 899px) {
  .ex { translate: none; }
  .phero-ai + .sec { padding-block-start: var(--sec); }
  .reads-in, .never-in, .appr-in, .per { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .fams, .gloss-dl, .reads-list { grid-template-columns: 1fr; }
  .ex { padding: 12px 12px 14px; }
  .ex .doc-lines :is(th, td) { padding-inline: 4px; font-size: 12.5px; }
}
.gm-action, .fam-name, .never-h, .nots li, .per dt, .reg-title, .gloss-dl dt { font-variant-numeric: tabular-nums; }
.appr-in > *, .reads-in > *, .never-in > *, .phero-in > * { min-inline-size: 0; }
/* a scroll container is the containing block of the visually hidden text inside it, so that text never widens the page */
.reg, .cmp-wrap, .table-scroll { position: relative; }
.appr-copy .lede { margin-block-start: 16px; }

/* ══ For accountants ══ */
.phero-acc { padding-block-end: 56px; }
.desk { position: relative; z-index: 2; align-self: end; translate: 0 112px; padding: 20px; background: #ffffff; color: #121a3a; border-radius: var(--radius-xl);
  box-shadow: 0 2px 4px rgba(4,8,28,0.25), 0 24px 60px rgba(4,8,28,0.45);
  --ink: #121a3a; --ink-secondary: #343d5c; --ink-muted: #5b6480; --border: #d9deea; --border-strong: #7f8aa8; --brand-mark: #0b247f; --brand-ink: #0b247f; --accent-ink: #ad5600; --focus-ring: #0b247f; --surface-card: #ffffff; --surface-panel: #eef0f5; }
.phero-acc + .sec { padding-block-start: calc(var(--sec) + 96px); }
.desk .evidence { margin-block: 8px 14px; }
.desk-act { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 14px; }
.desk-act .gm-btn { pointer-events: none; }

.bw-t { min-inline-size: 640px; }
.bw-t th, .bw-t td { padding: 14px 16px; block-size: auto; vertical-align: top; font-size: 15px; line-height: 23px; }
.bw-t td:first-child { inline-size: 40%; color: var(--ink-muted); }
.bw-t td:last-child { color: var(--ink); }
.bw-t td:last-child { display: flex; gap: 10px; align-items: flex-start; }
.bw-t td:last-child .ic { color: var(--positive); margin-block-start: 4px; }
.bw-t thead th:last-child { color: var(--brand-ink); }

.five { background: var(--surface-card); border-block: 1px solid var(--border); }
.five .h2 { margin-block-end: 32px; }
.five-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px; }
.five-grid li { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-page); }
.five-grid .step-n { margin-block-end: 8px; }
.five-grid .step-n svg { fill: var(--surface-card); }
.five-grid .h3 { font-size: 19px; line-height: 26px; color: var(--brand-ink); }
.five-grid p { color: var(--ink-secondary); }
.five-1 { grid-row: span 2; background: #0b247f !important; border-color: #0b247f !important; color: #ffffff; justify-content: flex-end; --ink-secondary: #dfe4f7; --brand-ink: #ffffff; --brand: #f19a3e; --surface-card: #0b247f; }
.five-1 .h3 { font-size: clamp(22px, 1.2rem + 0.8vw, 28px); line-height: 1.2; }
.five-1 p { font-size: 17px; line-height: 27px; }


.rep-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.rep-rows { margin-block-start: 28px; }
.rep-rows dt { font-size: 18px; line-height: 26px; }
.tb { position: sticky; inset-block-start: 96px; padding: 18px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.tb-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 12px; }
.tb-t { font: 800 18px/24px var(--font-display); color: var(--brand-ink); }
.tb-t td:first-child .gm-code { color: var(--ink-muted); margin-inline-end: 4px; }
.tb-note { margin-block-start: 10px; font-size: 12.5px; color: var(--ink-muted); }

.cl-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cl-in > * { min-inline-size: 0; }
.cl-in .h2 { margin-block-end: 12px; }
.shops { padding: 16px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.shops-t { display: flex; align-items: center; gap: 8px; padding-block-end: 12px; font: 800 17px/24px var(--font-display); color: var(--brand-ink); }
.shops-t .ic { color: var(--brand-mark); }
.shops li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.shops li + li { margin-block-start: 8px; }
.shops .is-cur { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--brand); }
[dir="rtl"] .shops .is-cur { box-shadow: inset -4px 0 0 var(--brand); }
.shop-n { font-weight: 600; }
.shop-d { grid-column: 1 / -1; font-size: 13px; color: var(--ink-muted); }
.cl-list a { color: var(--brand-ink); font-weight: 600; }
.nots-p li { align-items: flex-start; padding-block: 14px; font-weight: 400; }
.nots-p .ic { margin-block-start: 1px; flex: none; }
.link-dark { color: #f7c083; }

@media (max-width: 1023px) {
  .five-grid { grid-template-columns: 1fr 1fr; }
  .five-1 { grid-row: auto; grid-column: 1 / -1; }

}
@media (max-width: 899px) {
  .desk { translate: none; }
  .phero-acc + .sec { padding-block-start: var(--sec); }
  .rep-in, .cl-in { grid-template-columns: 1fr; }
  .tb { position: static; }
}
@media (max-width: 599px) {
  .five-grid { grid-template-columns: 1fr; }
  .desk { padding: 14px; }
  .desk .evidence > div { grid-template-columns: 1fr; gap: 0; }
}
.tb-t, .shops-t { font-variant-numeric: tabular-nums; }

/* ══ Features ══ */
/* the hero's index: ten rounded hexagons (the mark's own cell), a honeycomb of 3, 4 and 3, each a link to its section */
.hxidx ul { --hw: clamp(92px, 9.2vw, 132px); display: grid; grid-template-columns: repeat(8, calc(var(--hw) / 2)); justify-content: center; }
.hxidx li { grid-column: span 2; }
.hxidx li:nth-child(1) { grid-column: 2 / span 2; }
.hxidx li:nth-child(n+4):nth-child(-n+7) { margin-block-start: calc(var(--hw) * -0.26); }
.hxidx li:nth-child(4) { grid-column: 1 / span 2; }
.hxidx li:nth-child(8) { grid-column: 2 / span 2; margin-block-start: calc(var(--hw) * -0.26); }
.hxidx li:nth-child(n+9) { margin-block-start: calc(var(--hw) * -0.26); }
.hxl { position: relative; display: grid; place-items: center; inline-size: calc(var(--hw) - 6px); aspect-ratio: 179.2 / 198.27; margin-inline: 3px; color: #ffffff; text-decoration: none; }
.hxl-s { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; fill: #121b40; stroke: #2a3663; stroke-width: 1.5; }
.hxl-s use { vector-effect: non-scaling-stroke; }
.hxl-b { position: relative; display: grid; justify-items: center; gap: 4px; inline-size: 74%; text-align: center; font: 600 clamp(11px, 0.85vw, 13px)/1.2 var(--font-sans); }
.hxl-b .ic { color: #f7c083; }
.hxl:hover .hxl-s, .hxl:focus-visible .hxl-s { fill: #1b2a6c; stroke: #f19a3e; }
.hxl:focus-visible { outline: none; }
@media (prefers-reduced-motion: no-preference) { .hxl { transition: translate 250ms var(--motion-curve); } .hxl:hover { translate: 0 -4px; } }

.feats-doc { padding-block: clamp(24px, 3vw, 40px) 0; }
.feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(56px, 6vw, 88px); border-block-end: 1px solid var(--border); scroll-margin-block-start: 64px; }
.feat:last-child { border-block-end: 0; }
.feat-tint { background: var(--surface-card); box-shadow: 0 0 0 100vmax var(--surface-card); clip-path: inset(0 -100vmax); border-block-end-color: transparent; }
.feat-copy { display: grid; gap: 14px; justify-items: start; }
.feat-ic { position: relative; display: grid; place-items: center; inline-size: 52px; aspect-ratio: 179.2 / 198.27; }
.feat-ic .hxl-s { fill: #0b247f; stroke: #0b247f; }
.feat-ic .ic { position: relative; color: #f19a3e; }
.feat-pts { display: grid; gap: 6px; margin-block-start: 4px; }
.feat-pts li { position: relative; padding-inline-start: 18px; color: var(--ink-secondary); font-size: 15.5px; line-height: 23px; }
.feat-pts li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 8px; inline-size: 7px; block-size: 7px; background: var(--brand-mark); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

/* the previews: one white sheet each, the app's own table and state classes inside */
.pv { margin: 0; padding: 18px; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow-x: auto; position: relative; }
.pv-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-block-end: 12px; }
.pv-t { font: 800 17px/24px var(--font-display); color: var(--brand-ink); display: inline-flex; align-items: baseline; gap: 8px; }
table.pv-t { font: inherit; display: table; }
.pv-sub { margin-block: -4px 12px; font-size: 13.5px; color: var(--ink-muted); }
.pv .gm-table td .gm-code { color: var(--ink-secondary); }
.pv-acts { display: inline-flex; gap: 4px; }
.pv-acts .gm-btn { min-block-size: 32px; padding-inline: 8px; font-size: 13px; pointer-events: none; }
.pv-meta { margin-block-end: 12px; }
.pv-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.unit { padding: 10px 14px 12px; border: 1px solid var(--border); border-inline-start: 3px solid var(--brand); border-radius: var(--radius-md); max-inline-size: 320px; }
.unit-n { font: 700 14px/20px var(--font-display); margin-block-end: 6px; }
.unit .bars, .sticker .bars { inline-size: 100%; block-size: 44px; fill: #121a3a; margin-block-end: 8px; }
.unit dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 22px; }
.unit dt { color: var(--ink-muted); }
.pos-keys { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-secondary); }
.tenders { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 12px; }
.tender { display: inline-flex; align-items: center; gap: 6px; min-block-size: 32px; padding-inline: 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: 14px; }
.tender .ic { color: var(--brand-mark); }
.roles td, .roles th { white-space: nowrap; }
.pv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lang-card { display: grid; gap: 2px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-page); }
.lang-k { font: 600 12px/16px var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }
[lang="ar"] > .lang-k { font-size: 14px; letter-spacing: 0; text-transform: none; }
.lang-v { font: 700 18px/26px var(--font-display); margin-block-end: 8px; }
.pv-cap { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-muted); }
.pv-label { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; background: var(--surface-panel); }
.sticker { inline-size: min(100%, 300px); aspect-ratio: 2 / 1; padding: 12px 16px; background: #ffffff; border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: 0 6px 18px rgba(11,36,127,0.12); display: grid; align-content: center; }
.st-n { font: 700 14px/18px var(--font-sans); margin-block-end: 4px; }
.sticker .bars { block-size: 48px; margin-block-end: 4px; }
.st-c, .st-l { font-size: 12px; line-height: 16px; text-align: center; }
.st-l { color: var(--ink-muted); }
.sizes { display: grid; gap: 6px; }
.sizes li { padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: #ffffff; font: 600 13px/18px var(--font-sans); color: var(--ink-secondary); }
.sizes .is-on { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
.pv-lock { display: flex; align-items: center; gap: 8px; margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--border); font-size: 14px; color: var(--ink-secondary); }
.pv-lock .ic { color: var(--brand-mark); }

.feat-ai { background: var(--surface-card); border-block: 1px solid var(--border); }
.feat-ai-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.feat-ai-in .lede { margin-block-start: 14px; }
.feat-ai-links { display: grid; gap: 4px; justify-items: start; }

@media (max-width: 899px) {
  .feat, .feat-ai-in { grid-template-columns: 1fr; }
  .hxidx ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .hxidx li, .hxidx li:nth-child(n):nth-child(n) { margin: 0; }
  .hxl { inline-size: auto; aspect-ratio: auto; display: inline-flex; padding: 8px 12px; border: 1px solid #2a3663; border-radius: var(--radius-pill); background: #121b40; margin: 0; }
  .hxl .hxl-s { display: none; }
  .hxl-b { display: inline-flex; inline-size: auto; gap: 6px; font-size: 13px; }
  .hxl-b .ic { inline-size: 16px; block-size: 16px; }
}
@media (max-width: 599px) { .pv-two { grid-template-columns: 1fr; } .pv { padding: 12px; } }
.hxl-b, .pv-t, .unit-n, .lang-k, .lang-v, .st-n, .sizes li { font-variant-numeric: tabular-nums; }

/* ══ Security and Compare ══ */
.phero-sec { padding-block-end: 56px; }
.phero-sec + .sec { padding-block-start: calc(var(--sec) + 96px); }
.sec-log .pv-tab td { vertical-align: top; padding-block: 8px; font-size: 13.5px; line-height: 20px; }
.sec-log .pv-tab td:first-child { color: var(--ink-muted); }
.sec-log .pv-t .ic { color: var(--brand-mark); align-self: center; }
.layers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.layers li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.layers li:nth-child(2) { margin-block-start: 24px; } .layers li:nth-child(3) { margin-block-start: 48px; background: #0b247f; border-color: #0b247f; color: #ffffff; --ink-secondary: #dfe4f7; --brand-ink: #ffffff; --brand: #f19a3e; --surface-page: #0b247f; }
.layers .h3 { color: var(--brand-ink); font-size: 19px; line-height: 26px; }
.layers p { color: var(--ink-secondary); }
.layers-foot { display: flex; gap: 12px; align-items: flex-start; margin-block-start: clamp(28px, 4vw, 48px); max-inline-size: 860px; color: var(--ink-secondary); }
.layers-foot .ic { color: var(--brand-mark); margin-block-start: 3px; }
.sec-more { background: var(--surface-card); border-block: 1px solid var(--border); }
.sec-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 72px); }
.sec-rows > div { padding-block: 24px; border-block-start: 1px solid var(--border-strong); }
.sec-rows > div:last-child { border-block-end: 0; }
.sec-q { font: 700 20px/28px var(--font-display); color: var(--brand-ink); margin-block-end: 8px; }
.sec-rows p { color: var(--ink-secondary); }

.phero-vs .phero-h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); }
.vs-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 28px; }
.vs-jump a { display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: 14px; border: 1px solid #2a3663; border-radius: var(--radius-pill); background: #121b40; color: #ffffff; text-decoration: none; font-weight: 600; font-size: 14px; }
.vs-jump a:hover { border-color: #f19a3e; }
.vs-sec { scroll-margin-block-start: 64px; }
.vs-tint { background: var(--surface-card); border-block: 1px solid var(--border); }
.vs-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.vs-in > * { min-inline-size: 0; }
.vs-copy { display: grid; gap: 12px; position: sticky; inset-block-start: 96px; }
.vs-q { color: var(--ink); }
.vs-copy p { color: var(--ink-secondary); }
.vs { min-inline-size: 560px; }
.vs th, .vs td { padding: 12px 14px; block-size: auto; vertical-align: top; font-size: 14.5px; line-height: 21px; }
.vs tbody th { inline-size: 26%; color: var(--ink-muted); font-weight: 600; }
.vs td:not(.vs-us) { color: var(--ink-secondary); }
td.vs-us { background: var(--brand-soft); color: var(--ink); font-weight: 600; }
td.vs-us { display: table-cell; }
td.vs-us .ic { display: inline-block; vertical-align: -2px; margin-inline-end: 6px; color: var(--positive); }
.gm-table > thead > tr > th.vs-us { color: var(--brand-ink); background: var(--brand-soft); box-shadow: inset 0 -1px 0 var(--border-strong), inset 0 3px 0 #f19a3e; }
.vs-links { display: flex; gap: 24px; }

@media (max-width: 899px) {
  .phero-sec + .sec { padding-block-start: var(--sec); }
  .layers, .sec-rows, .vs-in { grid-template-columns: 1fr; }
  .layers li:nth-child(n) { margin-block-start: 0; }
  .vs-copy { position: static; }
}
.sec-q { font-variant-numeric: tabular-nums; }

/* ── For accountants: how an accountant joins a client's shop (an invitation from the owner, never a sign-up of their own) ── */
.join { background: var(--surface-card); border-block: 1px solid var(--border); scroll-margin-block-start: 64px; }
.join-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.join-copy .lede { margin-block: 16px 28px; max-inline-size: 60ch; color: var(--ink-secondary); }
.join-steps { display: grid; gap: 22px; }
.join-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.join-steps .step-n { margin: 0; }
.join-steps .step-n svg { fill: var(--surface-card); }
.join-steps .h3 { color: var(--brand-ink); }
.join-steps p { margin-block-start: 4px; color: var(--ink-secondary); max-inline-size: 60ch; }
.join-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-block-start: 24px; color: var(--ink-secondary); }
.join-sheet .pv-t { display: inline-flex; align-items: center; gap: 8px; }
.join-t { font-weight: 600; color: var(--ink); }
.join-link { margin-block-start: 8px; padding: 10px 12px; background: var(--surface-table-head); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.join-link .gm-code, .mcp-addr { direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
.join-once { margin-block-start: 8px; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
@media (max-width: 899px) { .join-in { grid-template-columns: 1fr; } }

/* ── The blog: the index and a post. A post is the page hero's navy head, then one reading column of 68 characters. ── */
.phero-blog .phero-h1 { margin-block-end: 16px; }
.post-crumb { margin-block-end: 14px; }
.post-crumb a { display: inline-flex; align-items: center; min-block-size: 44px; color: #c9d1ee; font-weight: 600; text-decoration: none; }
.post-crumb a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 4px; }
.phero-post .phero-h1 { font-size: clamp(2rem, 1.25rem + 2.4vw, 3.25rem); line-height: 1.1; }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-block-start: 22px; color: #c9d1ee; font-size: 15px; line-height: 22px; }
.post-meta time { font: 500 14px/22px var(--font-mono); font-variant-numeric: tabular-nums; }
.phero-post .phero-one { inline-size: min(100% - 2 * var(--g), 720px); }
.phero-post .phero-one > * { max-inline-size: none; }
.prose { inline-size: min(100% - 2 * var(--g), 720px); margin-inline: auto; padding-block: clamp(40px, 6vw, 72px); font-size: 17.5px; line-height: 29px; }
.prose > * + * { margin-block-start: 18px; }
.prose h2 { margin-block-start: 44px; font: 800 clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem)/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--brand-ink); text-wrap: balance; }
.prose h2 + * { margin-block-start: 12px; }
.prose ul { display: grid; gap: 10px; padding-inline-start: 22px; list-style: disc; }
.prose li::marker { color: var(--brand); }
.prose a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose code { font: 500 0.88em/1 var(--font-mono); padding: 2px 6px; background: var(--surface-panel); border-radius: var(--radius-sm); overflow-wrap: anywhere; direction: ltr; unicode-bidi: isolate; }
.prose .say { padding: 16px 20px; background: #0b1230; color: #ffffff; border-radius: var(--radius-lg); font-size: 19px; line-height: 29px; }
/* the guides: a third heading level, numbered lists, the worked examples' tables, the checklist, the GrowMore note, the FAQ, the sources */
.prose h3 { margin-block-start: 28px; font: 700 19px/1.35 var(--font-display); color: var(--ink); text-wrap: balance; }
.prose h3 + * { margin-block-start: 8px; }
.prose ol { display: grid; gap: 10px; padding-inline-start: 26px; list-style: decimal; }
.prose ol li::marker { font-variant-numeric: tabular-nums; font-weight: 700; }
.prose .table-scroll { margin-block: 22px; }
.prose .gm-table { font-variant-numeric: tabular-nums; }
.prose .gm-table th, .prose .gm-table td { padding-block: 8px; padding-inline: 12px; line-height: 21px; vertical-align: top; }
.prose .gm-table td { font-size: 15px; color: var(--ink); }
.prose .gm-table td.gm-amount { white-space: nowrap; }
.prose .checklist { list-style: none; padding-inline-start: 0; gap: 12px; }
.prose .checklist li { position: relative; padding-inline-start: 34px; }
.prose .checklist li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 4px; inline-size: 20px; block-size: 20px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-card); }
.prose .post-gm { margin-block-start: 44px; padding: 24px clamp(20px, 3vw, 28px); background: var(--brand-soft); border-radius: var(--radius-lg); }
.prose .post-gm h2 { margin-block-start: 0; }
.prose .post-gm > * + * { margin-block-start: 12px; }
.prose .post-faq > * + *, .prose .post-sources > * + * { margin-block-start: 12px; }
.prose .post-faq h3 { margin-block-start: 24px; }
.prose .post-faq h3 + p { margin-block-start: 6px; }
.prose .post-sources { margin-block-start: 44px; padding-block-start: 28px; border-block-start: 1px solid var(--border); font-size: 15px; line-height: 24px; color: var(--ink-secondary); }
.prose .post-sources h2 { margin-block-start: 0; font-size: 20px; }
.prose .post-sources ol { gap: 8px; }
.prose .post-sources a { overflow-wrap: anywhere; }
.final-say { max-inline-size: 60ch; margin: 18px auto 0; font-size: 18px; line-height: 28px; color: var(--ink-secondary); }
.post-more { background: var(--surface-card); border-block-start: 1px solid var(--border); }
.post-more .h2 { margin-block-end: clamp(24px, 3vw, 36px); }