/* TagVomo brand layer v2 — loaded last on every public page so all pages share the home page's
   type, colour and component language, with text colours that meet WCAG AA contrast. */
:root {
  --tv-display: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tv-ink: #0b1220; --tv-ink-2: #3c4a5e; --tv-green-text: #0f6e3d; --tv-lime: #c8ff3d;
  /* legacy tokens re-pointed to AA-safe values */
  --muted: #4f5e59; --brand-muted: #4f5e59; --ink: #0b1220; --navy: #0b1220;
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Typography: one display face for headings everywhere */
h1, h2, h3, .h-title, .page-hero h1, .subhero h1 { font-family: var(--tv-display); }
h1 { letter-spacing: -.035em; font-weight: 800; }
h2 { letter-spacing: -.028em; font-weight: 800; }
h3 { letter-spacing: -.015em; }
.lead { color: var(--tv-ink-2); line-height: 1.6; }
.section-dark .lead, .section-dark .muted, .photo-band .lead { color: #c9d4e0; }

/* Eyebrows / kickers / section labels: one style, AA contrast */
.kicker { font: 700 12px/1 var(--tv-display); letter-spacing: .14em; color: var(--tv-green-text); }  /* background left to each context (dark bands keep theirs) */
.kicker i { width: 8px; height: 8px; background: var(--tv-lime); box-shadow: 0 0 0 4px rgba(200, 255, 61, .35); border-radius: 50%; }
.section-label { font: 700 12px/1.2 var(--tv-display); letter-spacing: .14em; color: var(--tv-green-text); }
.section-dark .kicker, .photo-band .kicker, .page-hero.dark .kicker { background: rgba(200, 255, 61, .14); border-color: rgba(200, 255, 61, .5); color: #e6ffb8; }
.section-dark .section-head > .section-label, .section-dark .wrap > .section-label, .photo-band .wrap > .section-label { color: #d6ff7a; }

/* Buttons: pill shape, ink primary, consistent focus */
.btn { border-radius: 999px; min-height: 48px; padding: 0 22px; font-family: var(--tv-display); font-weight: 700; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn.primary { background: var(--tv-ink); border-color: var(--tv-ink); color: #fff; box-shadow: 0 12px 26px -14px rgba(11, 18, 32, .6); }
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -14px rgba(11, 18, 32, .65); }
.btn.lime { background: var(--tv-lime); border-color: #a6d931; color: var(--tv-ink); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #0f6e3d; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn.primary:hover { transform: none; } }

/* Cards and tables: softer, rounder, readable */
.card, .spec, .feature, .guide-card, .tier, .price-card, .faq-item { border-radius: 22px; }
table td, table th { color: inherit; }
.bidua-price-table th { font-family: var(--tv-display); }

/* Targeted contrast fixes found by the page audit */
.visual-guide .guide-card h3 { color: var(--tv-ink); }                                   /* shop: headings were white on white */
.visual-guide .guide-card p, .visual-guide .guide-card small { color: var(--tv-ink-2); }
.emergency-mock-body .emergency-privacy { color: #cbd5e1 !important; }                  /* health: note on dark card */
.records-timeline .timeline-date { color: #5b6472 !important; }
td.check { color: #0f6e3d; }

/* franchise: feature rows sit on a dark panel but had a white background behind white text */
.product-visual .feature-row { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
/* readable minimum sizes for small print */
small, .micro { font-size: max(12px, .8em); }
.design-grid figcaption small { font-size: 13px; color: var(--tv-ink-2); }
.status-label { font-size: 12px; }
/* labels/kickers inside dark cards and dark bands */
.dark .section-label, .journey.dark .section-label { color: #d6ff7a; }
.workflow-band .kicker, .dark .kicker { background: rgba(200, 255, 61, .14); border-color: rgba(200, 255, 61, .5); color: #e6ffb8; }
.product-visual .feature-row p, .product-visual .feature-row small { color: #c9d4e0; }
.tag { font-size: 12px; }
.health-mock .lbl, div.lbl { font-size: 12px; }
/* Legacy bundles set fixed negative tracking (up to -3.2px) and ~1.0 line-height, which crushes the
   display face on small screens. Normalise headings to proportional tracking and readable leading. */
h1 { letter-spacing: -.03em !important; line-height: 1.08 !important; }
h2 { letter-spacing: -.022em !important; line-height: 1.14 !important; }
h3 { letter-spacing: -.012em !important; }
/* Footer legal block: one compact line under a dashed divider (operator, billing, marketing partner, registered details) */
.global-footer .legal { display: flex !important; justify-content: space-between; align-items: flex-start; gap: 24px; border-top: 1px dashed rgba(255,255,255,.22); margin-top: 40px; padding-top: 22px; }
.global-footer .legal p { margin: 0; font: 400 12.5px/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #a9b8c6; letter-spacing: .01em; }
.global-footer .legal .tvf-legal { max-width: 110ch; }
.global-footer .legal .tvf-made { white-space: nowrap; color: #8fa2b3; }
.global-footer .legal a { display: inline !important; padding: 0 !important; color: #d6ff7a; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .global-footer .legal { flex-direction: column; gap: 10px; } .global-footer .legal .tvf-made { white-space: normal; } }

/* ===================== Design system v2 — public pages (Oct 2026) =====================
   Ink #0F1E2E · Road green #17803D · Reflective lime #D4F56B (only on ink) · Paper #F4F6F2 · Line #DCE2DA
   One family (Plus Jakarta Sans). Labels in sentence case. Phone first: 16px gutters, 44px targets. */
:root{--ds-ink:#0f1e2e;--ds-road:#17803d;--ds-signal:#d4f56b;--ds-paper:#f4f6f2;--ds-line:#dce2da;--ds-muted:#55655f;--ds-danger:#c2362b;--ds-r-card:18px;--ds-r-row:12px}

/* Kicker / eyebrow labels: sentence case, body font, brand green — not tracked monospace capitals */
.eyebrow,.kicker,.h-eyebrow,.section-kicker,.section-label,.portal-kicker,.page-hero .eyebrow{text-transform:none!important;letter-spacing:0!important;font-family:inherit!important;font-size:14px!important;font-weight:650!important;line-height:1.3!important}
.eyebrow,.h-eyebrow,.section-label{color:var(--ds-road)!important}
.kicker{padding:6px 12px!important}

/* Trust chips on light heroes (activate etc.): readable ink on white */
.page-hero .trust span,.trust span{color:var(--ds-ink)!important;background:#fff!important;border:1px solid var(--ds-line)!important;font-weight:600!important}

/* Phone type scale: headlines fit in 3–4 lines, not 9 */
@media (max-width:640px){
  main h1,.subhero h1,.page-hero h1,.hero h1,.h-hero h1{font-size:clamp(30px,8.4vw,38px)!important;line-height:1.08!important;letter-spacing:-.02em!important}
  main h2{font-size:clamp(23px,6.2vw,28px)!important;line-height:1.15!important}
  .lead,.subhero .lead,.page-hero .lead{font-size:16px!important;line-height:1.6!important}
  .wrap{padding-left:16px!important;padding-right:16px!important}
}

/* Bottom tab bar: line icons, quiet labels, active tab in road green */
.tvb a,.tvb button{gap:4px!important;color:var(--ds-muted)!important;font-weight:600!important}
.tvb a:first-child{color:var(--ds-muted)!important}
.tvb a span,.tvb button span{font-size:11.5px!important;line-height:1.1!important}
.tvb .tvb-ico{display:block;width:22px;height:22px}
.tvb a[aria-current="page"]{color:var(--ds-road)!important;position:relative}
.tvb a[aria-current="page"]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--ds-road)}
.tvb a[aria-current="page"] .tvb-ico{stroke-width:2.2}

/* Language picker in the page flow (pages without a header slot) */
.language-inline{display:flex;justify-content:center;padding:24px 16px 8px}
.language-inline .language-select{min-height:44px;padding:0 14px;border:1px solid var(--ds-line);border-radius:var(--ds-r-row);background:#fff;color:var(--ds-ink);font:inherit;font-size:15px}
.language-floating{display:none!important}

/* Footer: self-contained so every page renders it the same, whatever base bundle it loads */
.global-footer{background:var(--ds-ink)!important;color:#e6ecef!important;padding:56px 0 calc(28px + env(safe-area-inset-bottom,0px))!important}
.global-footer .tvf{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:32px 24px}
.global-footer .tvf-brand{grid-column:1/-1;max-width:62ch}
.global-footer .tvf-brand p{color:#b9c6d0!important;margin:12px 0 0;font-size:15px;line-height:1.6}
.global-footer .tvf-brand .brand img{background:#fff;border-radius:12px;padding:6px 10px;width:150px!important}
.global-footer .tvf-mail a{display:inline!important;color:#fff!important;text-decoration:underline;text-underline-offset:3px}
.global-footer nav b{display:block;color:#fff!important;font-size:14px;font-weight:700;margin:0 0 10px}
.global-footer nav a{display:block!important;color:#b9c6d0!important;font-size:14.5px;padding:7px 0!important;margin:0!important;text-decoration:none}
.global-footer nav a:hover{color:#fff!important}
@media (max-width:900px){.global-footer .tvf{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.global-footer .tvf{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}.global-footer{padding-top:40px!important}}
body.tv-has-bar .global-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}

/* Small text links get a comfortable tap area */
@media (max-width:640px){
  .portal-login-card a:not(.btn),.form-card p a,.tv-hint a{display:inline-block;padding:10px 0}
}

/* Category price table (pricing page): a real table on wide screens, a stack of cards on phones */
.tv-price-table-wrap{margin-top:20px}
.tv-price-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-r-card);overflow:hidden;font-size:15px}
.tv-price-table th,.tv-price-table td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--ds-line);color:var(--ds-ink)}
.tv-price-table thead th{background:var(--ds-paper);font-size:13px;font-weight:700;color:var(--ds-muted)}
.tv-price-table tbody th{font-weight:700}
.tv-price-table tbody tr:last-child>*{border-bottom:0}
.tv-price-table .tv-pt-price{font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:720px){
  .tv-price-table,.tv-price-table tbody{display:block;background:none;border:0;border-radius:0;min-width:0!important;width:100%!important}
  .tv-price-table thead{display:none}
  .tv-price-table tbody{display:grid;gap:12px}
  .tv-price-table tbody tr{display:block;background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-r-card);padding:4px 16px}
  .tv-price-table tbody th{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0 10px;font-size:16px;border-bottom:1px solid var(--ds-line)}
  .tv-price-table tbody td{display:flex;justify-content:space-between;gap:16px;padding:10px 0;text-align:right;border-bottom:1px solid #edf1ec}
  .tv-price-table tbody td::before{content:attr(data-label);flex:0 0 auto;color:var(--ds-muted);font-size:13.5px;font-weight:600;text-align:left}
  .tv-price-table tbody td:last-child{border-bottom:0}
}

/* Bottom bar: solid, so page text never shows through it */
.tvb{background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* Track-order / order-success key row: input and Show button breathe; submit sits below with space */
#track-order-form .field,#track-order-form label{margin-bottom:14px}
#track-order-form button[type=submit],.tv-order-lookup button[type=submit]{margin-top:8px}

/* Shared header chrome, repeated here so pages on older base bundles (track order, 404, partner) match the rest */
.announcement{background:var(--ds-ink);color:#fff;font-size:13px;border-bottom:1px solid rgba(255,255,255,.1)}
.announcement .wrap{display:flex;justify-content:center;gap:16px;padding:8px 0;font-weight:650}
.announcement b{color:var(--ds-signal)}
.announcement a{color:#fff!important}
@media (max-width:600px){.announcement{display:none}}
.global-header{position:sticky;top:0;z-index:80;background:rgba(250,251,247,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--ds-line);box-shadow:0 12px 40px rgba(7,27,51,.06)}
.is-navigating .global-header{cursor:progress}

/* Order access key: the key on its own line, Copy as a normal button beside or below it */
.tv-key{display:flex!important;flex-wrap:wrap;align-items:stretch;gap:10px}
.tv-key code{flex:1 1 220px;min-width:0;word-break:break-all;padding:14px 16px;border-radius:12px;font-size:15px;line-height:1.45}
.tv-key .btn{flex:0 0 auto;align-self:center;min-height:44px;height:auto!important;padding:0 20px!important;border-radius:12px!important;aspect-ratio:auto!important}

/* Tag ID chip — the one signature element: an ID shown like a reflective tag (ink plate, lime type, a punched hole) */
.tv-tag-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 10px;border-radius:9px;background:var(--ds-ink);color:var(--ds-signal);font:700 14px/1.2 inherit;font-variant-numeric:tabular-nums;letter-spacing:.04em;white-space:nowrap}
.tv-tag-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ds-paper);box-shadow:inset 0 0 0 1.5px rgba(15,30,46,.35)}
.tv-tag-ids{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}

/* Checkout section headings (1 · Your tag …): sentence case in the body font */
form fieldset>legend{text-transform:none!important;letter-spacing:0!important;font-family:inherit!important;font-size:15px!important;font-weight:700!important;color:var(--ds-ink)!important}

/* Desktop: a .narrative grid with a single child (terms, privacy …) is long-form reading, not a two-column split.
   One centred column at a comfortable line length, with section headings at document size. */
.narrative:has(> :only-child){display:block!important}
.narrative:has(> :only-child) > *{max-width:72ch;margin-left:auto;margin-right:auto}
.narrative:has(> :only-child) h2{font-size:clamp(24px,2.2vw,32px)!important;line-height:1.2!important;letter-spacing:-.015em!important;margin:2.2em 0 .6em!important}
.narrative:has(> :only-child) h2:first-child{margin-top:0!important}
.narrative:has(> :only-child) h3{font-size:clamp(19px,1.6vw,22px)!important;margin:1.6em 0 .4em!important}
.narrative:has(> :only-child) p,.narrative:has(> :only-child) li{font-size:17px;line-height:1.7}

/* ---- Desktop type and alignment fixes (Oct 2026) ---- */
@media (min-width:641px){
  /* Hero headlines: big, but not 76px wrapping to six lines */
  main h1,.subhero h1,.page-hero h1,.hero h1{font-size:clamp(40px,4.1vw,60px)!important;line-height:1.06!important;letter-spacing:-.025em!important}
  .subhero h1{max-width:20ch!important}
  /* Card headings are card titles, not section headings */
  main .grid-3>.card h2,main .grid-3>article h2,main .grid-2>.card h2,main .card h2{font-size:clamp(20px,1.6vw,24px)!important;line-height:1.2!important;letter-spacing:-.01em!important;margin:0 0 .5em!important}
  main .card h3{font-size:19px!important;line-height:1.25!important}
}
/* Section guide (label · heading · actions): one left-aligned column instead of a lopsided two-column grid */
.page-guide-head{display:flex!important;flex-direction:column;align-items:flex-start;gap:12px;grid-template-columns:none!important}
.page-guide-head>.section-label{order:0}
.page-guide-head>h2{order:1;max-width:28ch!important;margin:0!important;font-size:clamp(26px,2.6vw,38px)!important;line-height:1.15!important}
.page-guide-head>div{order:2;display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.page-guide-head>div .btn{width:auto!important}
@media (min-width:641px){
  /* Numbered steps (how it works, franchise roles): step titles at card size */
  .feature-row h2,.feature-row h3{font-size:clamp(20px,1.8vw,26px)!important;line-height:1.2!important;margin:0 0 .3em!important}
  /* A lone last card in a three-column grid takes the full row instead of sitting in a narrow column */
  .grid-3>.card:last-child:nth-child(3n+1){grid-column:1/-1}
}
/* Contrast fixes (WCAG AA) */
.page-guide-grid article b,.guide-card .guide-body > b{color:#0F1E2E!important}
.h-dark .h-eyebrow,.h-panel-body .h-eyebrow{color:#8fe3a8!important}
.cta-global .section-label{color:#0b4a24!important}
/* Agency sign-up: e-mail verification row */
.email-verify{display:grid;gap:8px;margin-top:-4px}
.email-verify .ev-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.email-verify .btn{min-height:44px}
.email-verify #ev-otp{max-width:180px;letter-spacing:.35em;font-size:18px;text-align:center}
.email-verify .ev-state{font-size:14px;font-weight:600}
.email-verify .ev-state.ok{color:#17803d}
.email-verify .ev-state.warn{color:#b42318}
/* /login and /signup: one card per kind of account, button at the bottom */
.account-grid{align-items:stretch}
.account-card{display:flex;flex-direction:column;gap:10px}
.account-card h2{margin:0;font-size:clamp(20px,2.2vw,24px)}
.account-card p{margin:0}
.account-card .btn{margin-top:auto;align-self:flex-start;min-height:44px}
.account-card .micro{font-size:13px;color:var(--ds-muted,#5b6b66)}
.account-new{background:var(--ds-paper,#f4f6f2)}

/* Wordmark stays readable when a browser force-darkens the page (Samsung Internet "dark mode for websites" leaves the dark letters on a dark bar). The halo is invisible on a light background. */
html .brand-wordmark img,html .global-header .brand img,html .tvd-top .brand img,html .tvf-brand .brand img{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 3px rgba(255,255,255,.9))!important}