* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --brand: #2F6EA8; --brand-dark: #245783; --link: #275f91; --ink: #16233b; --soft: #5b6b82;
  --line: #e3e9f1; --bg: #f6f8fb; --ok: #16a34a;
}
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--ink); background: #fff; line-height: 1.6; }
a { color: var(--link); text-decoration: none; }
img { max-width: 100%; }

.nav { position: sticky; top: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(210, 221, 234, .82);
  box-shadow: 0 1px 0 rgba(15, 35, 56, .03); z-index: 50; }
.nav-inner { max-width: 1180px; margin: 0 auto; padding: 0 22px; min-height: 64px;
  display: flex; align-items: center; gap: 12px; position: relative; }
.nav-logo { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 8px 0; }
.nav .logo img { height: 32px; width: auto; display: block; }
.nav-links { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; }
.nav .link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
  padding: 0 11px; border-radius: 8px; color: var(--soft); font-size: 14.5px; font-weight: 600; }
.nav .link:hover { background: #f3f7fb; color: var(--ink); }
.nav .link.on { background: #eaf4ff; color: var(--brand-dark); }
.nav .link:focus-visible,
.nav-menu-toggle:focus-visible,
.nav-panel-link:focus-visible { outline: 3px solid rgba(47, 110, 168, .24); outline-offset: 2px; }
.nav-dropdown { position: relative; }
.nav-summary { cursor: pointer; gap: 7px; list-style: none; user-select: none; }
.nav-summary::-webkit-details-marker { display: none; }
.nav-summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  margin-top: -3px; transform: rotate(45deg); transition: transform .16s ease, margin-top .16s ease; }
.nav-dropdown[open] .nav-summary::after { margin-top: 3px; transform: rotate(225deg); }
.nav-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; display: grid; gap: 2px;
  width: 282px; padding: 8px; border: 1px solid rgba(210, 221, 234, .96); border-radius: 12px;
  background: #fff; box-shadow: 0 18px 42px rgba(15, 35, 56, .14); }
.nav-panel-link { display: grid; gap: 1px; padding: 10px 12px; border-radius: 8px; color: var(--soft); }
.nav-panel-link b { color: var(--ink); font-size: 13.5px; line-height: 1.35; }
.nav-panel-link span { color: var(--soft); font-size: 12.5px; line-height: 1.35; }
.nav-panel-link:hover,
.nav-panel-link.on { background: #f2f7fc; color: var(--brand-dark); }
.nav-panel-link:hover b,
.nav-panel-link.on b { color: var(--brand-dark); }
.nav .spacer { flex: 1; }
.nav-auth, #navAuth { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.nav-auth .btn.sm { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.nav-language { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-width: 0; }
.nav-language span { color: var(--soft); font-size: 12px; font-weight: 650; }
.nav-language select {
  width: auto;
  min-width: 112px;
  min-height: 38px;
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}
.nav-language select:focus-visible {
  outline: 3px solid rgba(47, 110, 168, .24);
  outline-offset: 2px;
}
.nav-menu-toggle { display: none; align-items: center; justify-content: center; flex-direction: column;
  gap: 4px; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; }
.nav-menu-toggle:hover { border-color: #cbd8e8; background: #f7f9fc; }
.nav-menu-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .16s ease, opacity .16s ease; }
.nav.is-open .nav-menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav-menu-toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.btn { display: inline-block; background: linear-gradient(180deg, #2f78b6, var(--brand));
  color: #fff; border: none; border-radius: 10px; padding: 12px 24px; font-size: 15px;
  font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(61,133,198,.3);
  transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(61,133,198,.35); }
.btn.ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
.btn.ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn.big { padding: 15px 32px; font-size: 16.5px; }
.btn.sm { padding: 8px 16px; font-size: 13.5px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
/* 84px of nothing under a sticky nav pushed the first real thing on every
   page below the fold on a laptop. The space was doing no work: the nav
   already separates itself with a border. */
.hero { text-align: center; padding: 44px 0 40px; }
.hero h1 { font-size: 46px; line-height: 1.15; letter-spacing: 0; max-width: 820px;
  margin: 0 auto 18px; text-wrap: balance; }
.hero h1 em { color: var(--brand); font-style: normal; white-space: nowrap; }
.hero p.sub { font-size: 19px; color: var(--soft); max-width: 660px; margin: 0 auto 34px; text-wrap: pretty; }
.hero .ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .note { margin-top: 16px; font-size: 13.5px; color: var(--soft); }

/* Asymmetric on purpose. Space above the first heading is dead - the nav is
   right there - while space below the last element still separates sections. */
.section { padding: 30px 0 52px; }
.section.alt { background: var(--bg); }
.section h1, .section h2 { font-size: 30px; text-align: center; margin-bottom: 8px; letter-spacing: 0; }
.section h2.subhead { font-size: 1.17em; text-align: left; letter-spacing: 0; }
.section p.lead { text-align: center; color: var(--soft); max-width: 620px; margin: 0 auto 26px; }

.grid { display: grid; gap: 22px; }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px; }
.card h2, .card h3 { font-size: 17px; margin-bottom: 8px; }
.card p { font-size: 14.5px; color: var(--soft); }
.card .ico { font-size: 26px; margin-bottom: 12px; }
.legal h2 { font-size: 17px; text-align: left; letter-spacing: 0; }

.price-card { text-align: center; position: relative; }
.price-card.featured { border-color: var(--brand); box-shadow: 0 10px 34px rgba(61,133,198,.14); }
.price-card .tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 3px 14px; border-radius: 12px; letter-spacing: .4px; }
.price-card .amount { font-size: 40px; font-weight: 700; margin: 12px 0 2px; }
.price-card .amount small { font-size: 15px; color: var(--soft); font-weight: 400; }
.local-price-charge {
  display: block;
  margin-top: 4px;
  color: var(--soft);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}
.price-card ul { list-style: none; margin: 18px 0 24px; text-align: left; }
.price-card li { padding: 6px 0 6px 26px; font-size: 14px; color: var(--soft);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2316a34a' viewBox='0 0 16 16'%3E%3Cpath d='M13.485 3.929a1 1 0 0 1 0 1.414l-6.364 6.364a1 1 0 0 1-1.414 0L2.515 8.515A1 1 0 1 1 3.93 7.1l2.485 2.485 5.657-5.657a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E") no-repeat left center; }

label { display: block; font-size: 13px; font-weight: 600; color: #43536b; margin: 14px 0 6px; }
/* Text fields fill their row. A radio or a checkbox is not a text field, and
   this rule used to hit them too - a 100% wide, 12px padded, bordered radio
   button, which is why the payment options rendered as four big empty boxes
   with the label squeezed out past the edge of the card. */
input:not([type="radio"]):not([type="checkbox"]), select, textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid #d5dde8; border-radius: 9px;
  font-size: 14.5px; font-family: inherit; }
input[type="radio"], input[type="checkbox"] {
  width: 16px; height: 16px; flex: none; accent-color: var(--brand); cursor: pointer; }
input:not([type="radio"]):not([type="checkbox"]):focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(61,133,198,.12); }
.msg { display: none; padding: 11px 14px; border-radius: 9px; font-size: 13.5px; margin-top: 14px; }
.msg.err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.msg.ok { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

.auth-box { max-width: 430px; margin: 60px auto; }
/*
 * For a form with more than about four fields.
 *
 * A single 430px column turns seven fields into a page you have to scroll,
 * and a sign-up form where the button is below the fold is a sign-up form
 * people abandon. Two columns and a wider box put the whole thing - heading,
 * fields, spam check and button - on one screen at 768px tall, which is the
 * shortest laptop still in shops.
 */
.auth-box.wide { max-width: 760px; margin: 34px auto; }
.auth-box.wide label { margin: 10px 0 5px; }
.auth-box.wide input, .auth-box.wide select { padding: 10px 13px; }
.auth-box.wide .card { padding: 22px 26px; }
@media (max-width: 620px) {
  /* One column again on a phone, where two would be two half-width fields. */
  .auth-box.wide .grid.c2 { grid-template-columns: 1fr; gap: 0; }
}
.muted { color: var(--soft); font-size: 13.5px; }
.center { text-align: center; }

main p a:not(.btn),
main li a:not(.btn),
main td a:not(.btn),
main figcaption a:not(.btn),
main details a:not(.btn),
main small a:not(.btn),
.footer .brand-line a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
}

main .seo-link-grid a,
main .contextual-link-list a,
main .proof-strip a,
main .screen-card > a,
main .pos-guide-shot > a,
.nav a,
.footer a {
  text-decoration: none;
}

.toggle { display: inline-flex; background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 4px; gap: 4px; }
.toggle button { border: none; background: none; padding: 8px 20px; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer; color: var(--soft); }
.toggle button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.1); }

/* Payment methods. Whole rows are clickable, because a bare radio button is a
   small target on a phone and this is the last step before someone pays. */
.paylist { display: grid; gap: 8px; margin-top: 8px; }
.payopt { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; }
.payopt:hover { border-color: var(--brand); }
.payopt input { margin-top: 2px; }
/* min-width:0 so a long line wraps inside the card instead of pushing the
   text out past its border. */
.payopt span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.payopt b { font-size: 14.5px; font-weight: 600; color: var(--ink, #1e293b); }
.payopt small { color: var(--soft); font-size: 13px; margin-top: 2px; }
.payopt:has(input:checked) { border-color: var(--brand); background: #f6f9ff; }

.payblock { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; }
.payblock > b { display: block; margin-bottom: 10px; }
.qrwrap { display: flex; justify-content: center; padding: 10px 0; }
.qrwrap svg { width: 220px; height: 220px; }
.paytable { width: 100%; border-collapse: collapse; font-size: 14px; }
.paytable td { padding: 6px 0; vertical-align: top; }
.paytable td:first-child { color: var(--soft); width: 45%; }

/* Outlet count. Built from the same tokens as .toggle so it reads as part of
   the page rather than a control borrowed from somewhere else. */
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; background: #fff; }
.stepper button { border: none; background: var(--bg); width: 42px; font-size: 20px;
  line-height: 1; cursor: pointer; color: var(--ink); }
.stepper button:hover { background: #eef1f6; }
.stepper button:active { background: #e4e8f0; }
.stepper input { border: none; width: 72px; text-align: center; font-size: 16px;
  font-weight: 600; color: var(--ink); background: #fff; }
.stepper input:focus { outline: none; }
/* The native spinners duplicate the buttons either side of them. */
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.footer { border-top: 1px solid var(--line); padding: 36px 0; margin-top: 40px; }
.footer .cols { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.footer .cols > * { min-width: 130px; }
.footer .footer-brand { flex: 1 1 220px; }
.footer .logo img { display: block; height: 30px; }
.footer h2 { font-size: 13px; line-height: 1.4; margin: 0 0 7px; text-align: left;
  letter-spacing: 0; text-transform: uppercase; color: var(--ink); }
.footer a { color: var(--soft); font-size: 13.5px; display: block; padding: 3px 0; }
.footer .brand-line { font-size: 13px; color: var(--soft); margin-top: 18px; }
.footer .brand-line a { display: inline; padding: 0; }

.contextual-links { border-top: 1px solid var(--line); padding-bottom: 34px; }
.contextual-links h2 { font-size: 21px; letter-spacing: 0; }
.contextual-links p.lead { max-width: 760px; margin-bottom: 14px; font-size: 13.5px; }
.contextual-link-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
.contextual-link-list a { border-bottom: 1px solid var(--line); font-size: 14px; }

code.snippet { display: block; background: #0f172a; color: #d7e3f4; padding: 16px 18px;
  border-radius: 10px; font-size: 13px; overflow-x: auto; white-space: pre; font-family: Consolas, monospace; }

@media (max-width: 980px) {
  .nav-inner { max-width: none; padding: 0 18px; gap: 8px; }
  .nav-links { margin-left: 4px; gap: 2px; }
  .nav .link { padding: 0 8px; font-size: 14px; }
  .nav-panel { width: 252px; }
  .nav-language span { display: none; }
  .nav-language select { min-width: 96px; max-width: 108px; padding-right: 24px; }
  #navAuth > a { white-space: nowrap; }
}

@media (max-width: 760px) {
  .nav-inner { min-height: 60px; padding: 0 14px; }
  .nav .logo img { height: 30px; }
  .nav-menu-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    left: 14px;
    right: 14px;
    top: calc(100% + 8px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
    margin-left: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(15, 35, 56, .14);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    visibility: hidden;
  }
  .nav.is-open .nav-links {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }
  .nav .link { justify-content: flex-start; min-height: 42px; width: 100%; padding: 0 12px; }
  .nav-dropdown { width: 100%; }
  .nav-summary { justify-content: space-between; }
  .nav-panel {
    position: static;
    width: 100%;
    margin: 4px 0 6px;
    padding: 4px;
    border-radius: 10px;
    background: #f8fbff;
    box-shadow: none;
  }
  .nav-panel-link { padding: 9px 12px; }
  .nav-language { margin-left: auto; }
  .nav-language select { min-width: 78px; max-width: 88px; padding: 7px 20px 7px 8px; font-size: 12.5px; }
  #navAuth { margin-left: auto; gap: 8px; min-width: 0; }
  #navAuth > a.link { display: none; }
  #navAuth .btn.sm { min-height: 40px; padding: 8px 13px; white-space: nowrap; }
}

@media (max-width: 640px) {
  .hero h1 { font-size: 32px; }
  .hero h1 em { white-space: normal; }
  .grid.c2, .grid.c3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .nav-inner { padding: 0 12px; }
  .nav-language select { min-width: 72px; max-width: 78px; }
  #navAuth .btn.sm {
    max-width: 118px;
    overflow: hidden;
    padding: 8px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-links { left: 12px; right: 12px; }
}

.cookiebar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: #0f172a;
  color: #d7e3f4; font-size: 13.5px; padding: 12px 20px; display: flex; gap: 16px;
  align-items: center; justify-content: center; flex-wrap: wrap; }
.cookiebar a { color: #9cc3ec; }
.cookiebar-btns { display: flex; gap: 10px; flex-shrink: 0; }

/* Corporate trust elements */
.trustbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: #fff; padding: 18px 0; }
.trustbar .items { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px 26px; font-size: 13px; color: var(--soft); }
.trustbar .items > span { flex: 1 1 auto; text-align: center; white-space: nowrap; }
@media (max-width: 900px) { .trustbar .items { justify-content: center; } }
.trustbar b { color: var(--ink); font-weight: 650; }
.stat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; margin-top: 8px; }
.stat { text-align: center; }
.stat .n { font-size: 32px; font-weight: 700; color: var(--brand); letter-spacing: 0; }
.stat .l { font-size: 13.5px; color: var(--soft); }

.release-activity { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, auto);
  gap: 14px 30px; align-items: center; margin: 24px 0 20px; padding: 22px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.release-activity .eyebrow { text-align: left; margin-bottom: 3px; }
.section .release-activity h2 { text-align: left; font-size: 22px; line-height: 1.3; margin-bottom: 6px; }
.release-activity-copy > p:last-child { color: var(--soft); font-size: 14px; }
.release-activity-stats { display: grid; grid-template-columns: repeat(3, minmax(88px, 1fr));
  gap: 1px; margin: 0; background: var(--line); }
.release-activity-stats div { min-height: 78px; padding: 12px 14px; background: #fff; text-align: center; }
.release-activity-stats dt { color: var(--soft); font-size: 12.5px; }
.release-activity-stats dd { color: var(--ink); font-size: 26px; line-height: 1.2; font-weight: 700; }
.release-activity-limit, .release-activity-links { grid-column: 1 / -1; }
.release-activity-limit { max-width: 960px; }
.release-activity-links { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13.5px; }

/* Generated SEO pages */
.seo-hero { padding-top: 46px; }
.seo-hero h1 { font-size: 38px; line-height: 1.18; text-align: center; max-width: 860px;
  margin: 10px auto 16px; text-wrap: balance; }
.seo-hero .lead { font-size: 18px; max-width: 760px; }
.seo-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 24px auto 0; }
.eyebrow { text-align: center; color: var(--brand); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; color: var(--soft); font-size: 13px; margin-bottom: 16px; }
.breadcrumbs a { color: var(--soft); }
.breadcrumbs a:hover { color: var(--brand); }
.seo-byline { max-width: 760px; margin: 14px auto 0; color: var(--soft); font-size: 13px;
  text-align: center; }
.guide-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.guide-toc strong { color: var(--ink); }
.guide-toc a { color: var(--brand); font-weight: 650; }
.guide-toc a:hover { text-decoration: underline; }
.section[id], h2[id] { scroll-margin-top: 78px; }
.seo-narrow { max-width: 860px; }
.seo-card-grid { margin-top: 24px; }
.seo-steps { counter-reset: step; list-style: none; display: grid; gap: 14px; margin-top: 22px; }
.seo-steps li { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 18px 18px 56px; color: var(--soft); font-size: 14.5px; }
.seo-steps code { overflow-wrap: anywhere; }
.seo-steps li::before { counter-increment: step; content: counter(step); position: absolute;
  left: 18px; top: 18px; width: 24px; height: 24px; border-radius: 999px; background: var(--brand);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.faq-list { display: grid; gap: 14px; margin-top: 22px; }
.seo-link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px; margin-top: 24px; }
.seo-link-grid a { display: block; border: 1px solid var(--line); background: #fff; border-radius: 10px;
  padding: 12px 14px; color: var(--ink); font-size: 14px; font-weight: 600; }
.seo-link-grid a:hover { border-color: var(--brand); color: var(--brand); }
.guide-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px; margin-top: 24px; }
.guide-list { padding-left: 18px; color: var(--soft); font-size: 14.5px; }
.guide-list li { margin: 8px 0; }
.flow-diagram { display: grid; gap: 12px; margin-top: 24px; }
.flow-node { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start;
  border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 16px; }
.flow-node .tag { color: var(--brand); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.flow-node h3 { font-size: 16px; margin-bottom: 4px; }
.flow-node p { color: var(--soft); font-size: 14.5px; }
.flow-connector { width: 2px; height: 18px; background: var(--line); margin-left: 42px; }
.pos-architecture { margin: 28px 0 30px; }
.pos-architecture-heading { max-width: 700px; margin: 0 auto 20px; text-align: center; }
.pos-architecture-heading h3 { font-size: 22px; line-height: 1.25; margin-bottom: 7px; }
.pos-architecture-heading p { color: var(--soft); font-size: 14.5px; }
.pos-architecture-kicker { color: #0f766e !important; font-size: 12px !important; font-weight: 700;
  text-transform: uppercase; }
.pos-architecture-flow { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px; margin: 0; padding: 0; counter-reset: pos-flow-stage; }
.pos-architecture-flow li { position: relative; min-height: 216px; padding: 20px 18px 18px;
  border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: 8px; background: #fff;
  counter-increment: pos-flow-stage; }
.pos-architecture-flow li::before { content: counter(pos-flow-stage); display: grid; place-items: center;
  width: 28px; height: 28px; margin-bottom: 14px; border-radius: 50%; color: #fff; background: var(--brand);
  font-size: 12px; font-weight: 700; }
.pos-architecture-flow li:not(:last-child)::after { content: ""; position: absolute; z-index: 1;
  width: 18px; height: 18px; right: -25px; top: calc(50% - 9px); border-top: 2px solid #8190a5;
  border-right: 2px solid #8190a5; transform: rotate(45deg); }
.pos-architecture-flow strong { display: block; margin: 4px 0 6px; font-size: 16px; }
.pos-architecture-flow p { color: var(--soft); font-size: 14px; }
.pos-architecture-flow small { display: block; margin-top: 10px; color: #43536b; font-size: 12.5px; }
.pos-flow-label { color: #0f766e; font-size: 11.5px; font-weight: 700; text-transform: uppercase; }
.pos-responsibility-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin-top: 18px; padding-top: 18px; border-top: 1px dashed #aeb8c6; }
.pos-responsibility-grid section { padding: 13px 14px; border-left: 3px solid #b45309; background: #fff; }
.pos-responsibility-grid h4 { margin-bottom: 4px; font-size: 14px; }
.pos-responsibility-grid p { color: var(--soft); font-size: 13px; }
.pos-architecture figcaption { margin-top: 16px; padding: 12px 14px; border: 1px solid #b7dfd6;
  border-radius: 8px; background: #f0fdfa; color: #43536b; font-size: 13px; }
.pos-architecture figcaption strong { color: #115e59; }
.operator-view { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px; margin-top: 24px; }
.seo-note { border-top: 1px solid var(--line); padding-top: 22px; }
.seo-note h2 { font-size: 22px; margin-bottom: 8px; }
.seo-note p { color: var(--soft); font-size: 14.5px; }
.seo-note-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.seo-note-links a { color: var(--brand); font-weight: 700; }
.seo-note-links span { color: var(--line); }
.proof-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin: 24px auto 0; max-width: 860px; }
.proof-strip span { border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 8px 14px; color: var(--soft); font-size: 13.5px; }
.proof-strip b { color: var(--ink); }
.table-wrap { width: 100%; overflow-x: auto; margin-top: 24px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; }
.comparison-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
.comparison-table caption { text-align: left; padding: 12px 14px; color: var(--soft);
  font-size: 13px; border-bottom: 1px solid var(--line); }
.comparison-table th, .comparison-table td { text-align: left; vertical-align: top;
  padding: 14px 16px; border-bottom: 1px solid var(--line); }
.comparison-table th { background: var(--bg); color: var(--ink); font-weight: 700; }
.comparison-table tbody tr:last-child td { border-bottom: 0; }
.comparison-table td:first-child { color: var(--ink); font-weight: 650; }
.score-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px; margin-top: 24px; }
.score-grid div { border: 1px solid var(--line); border-radius: 10px; padding: 18px;
  background: #fff; display: flex; gap: 14px; align-items: flex-start; }
.score-grid b { display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; color: #fff; background: var(--brand); flex: none; }
.score-grid span { color: var(--soft); font-size: 14px; }
.source-list { display: grid; gap: 10px; margin-top: 22px; }
.source-list a { display: block; border: 1px solid var(--line); background: #fff;
  border-radius: 10px; padding: 12px 14px; font-weight: 650; color: var(--ink); }
.source-list a:hover { border-color: var(--brand); color: var(--brand); }
.screen-grid, .trust-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px; margin-top: 24px; }
.screen-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.screen-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg); }
.feature-screen-grid .screen-card img { height: auto; object-fit: contain; padding: 8px; }
.trust-media .screen-card img { aspect-ratio: 4 / 3; object-fit: contain; padding: 10px; }
.home-office-media img { height: 360px; aspect-ratio: auto; object-fit: cover; object-position: center 68%; }
.screen-card figcaption { display: grid; gap: 4px; padding: 14px 16px; }
.screen-card figcaption b { color: var(--ink); font-size: 14.5px; }
.screen-card figcaption span { color: var(--soft); font-size: 13.5px; }
.research-figure { max-width: 1080px; margin: 28px auto; }
.research-figure > a { display: block; }
.research-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.research-figure figcaption { margin-top: 12px; color: var(--soft); font-size: 14px; line-height: 1.65; }
.research-figure figcaption strong { color: var(--ink); }
.vid { position: relative; width: 100%; padding-top: 56.25%; border-radius: 8px;
  overflow: hidden; background: #0b1220; }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-version-boundary { max-width: 900px; margin: 0 auto 32px; padding: 4px 0 4px 18px;
  border-left: 3px solid var(--brand); }
.video-version-boundary h2 { margin: 0 0 8px; text-align: left; font-size: 20px; }
.video-version-boundary p { margin: 0; color: var(--soft); }
.video-watch { max-width: 960px; margin: 26px auto 0; text-align: left; }
.video-watch .vid { border: 1px solid #25324a; }
.video-watch-meta { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start;
  padding-top: 12px; color: var(--soft); font-size: 14px; }
.video-watch-meta p { margin: 0; }
.video-watch-meta strong { color: var(--ink); }
.video-watch-meta .video-meta { justify-content: flex-end; flex: none; }
.video-watch-actions { margin: 24px 0 14px; }
.video-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px; row-gap: 34px; }
.video-guide { min-width: 0; padding-top: 18px; border-top: 1px solid var(--line);
  display: grid; align-content: start; gap: 14px; }
.video-guide-copy h2 { margin: 0 0 8px; text-align: left; font-size: 20px; line-height: 1.3; }
.video-guide-copy > p { margin: 0; }
.video-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px !important;
  color: var(--soft); font-size: 13px; }
.video-source { margin: 0; font-size: 14px; font-weight: 650; }
.video-review-note { margin-top: 18px; }
.calc-card h2 { text-align: left; font-size: 20px; letter-spacing: 0; margin-bottom: 12px; }
.calc-result { display: flex; justify-content: space-between; gap: 18px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line); }
.calc-result span { color: var(--soft); font-size: 14px; }
.calc-result b { color: var(--ink); font-size: 22px; }
.calc-result.total { border-bottom: 0; margin-top: 8px; padding-top: 16px; }
.calc-result.total b { color: var(--brand); font-size: 30px; }

/* Evidence comparison is a working form, with stable table and result dimensions. */
.selection-tool-intro { max-width: 820px; margin: 0 auto 24px; text-align: center; }
.selection-tool-intro .lead { font-size: 17px; }
.selection-scorecard { padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.selection-scorecard fieldset { min-width: 0; }
.selection-name-fieldset legend { padding: 0 8px; color: var(--ink); font-size: 18px; font-weight: 700; }
.selection-name-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.selection-name-grid .field { min-width: 0; }
.selection-name-grid input { margin-bottom: 0; }
.selection-table-wrap { margin-top: 22px; }
.selection-score-table { min-width: 940px; font-variant-numeric: tabular-nums; }
.selection-score-table th:first-child { width: 30%; }
.selection-score-table td:nth-child(2) { width: 72px; }
.selection-score-table td:nth-child(3) { width: 112px; }
.selection-score-table select { width: 100%; min-width: 176px; margin: 0; padding: 9px 32px 9px 10px; }
.selection-gate { display: inline-block; padding: 4px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.selection-gate.is-mandatory { color: #9f1239; background: #fff1f2; }
.selection-gate.is-weighted { color: #166534; background: #f0fdf4; }
.selection-tool-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.selection-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  margin-top: 24px; border-top: 1px solid var(--line); }
.selection-results section { min-width: 0; padding: 20px 4px 2px; }
.selection-results h3 { margin-bottom: 7px; font-size: 17px; overflow-wrap: anywhere; }
.selection-results strong { display: block; color: var(--ink); font-size: 28px; }
.selection-results p { margin-top: 8px; padding-left: 11px; border-left: 3px solid #be123c;
  color: var(--soft); font-size: 13.5px; }
.selection-results p[data-state="conditional"] { border-left-color: #b45309; }
.selection-results p[data-state="pilot-ready"] { border-left-color: #15803d; }
.selection-decision { margin-top: 18px; padding: 13px 15px; border: 1px solid #b7dfd6;
  border-radius: 6px; background: #f0fdfa; color: #134e4a; font-weight: 650; }
.selection-privacy { margin-top: 12px; color: var(--soft); font-size: 13px; }

/* The TCO worksheet is a framed tool rather than a stack of article cards.
   Stable columns keep labels and results from shifting as values change. */
.tco-form { display: grid; gap: 22px; }
.tco-form fieldset { min-width: 0; }
.tco-form legend { padding: 0 8px; color: var(--ink); font-size: 18px; font-weight: 700; }
.tco-shared-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 18px; }
.tco-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
.tco-field { min-width: 0; }
.tco-field label { line-height: 1.35; min-height: 36px; display: flex; align-items: end; }
.tco-scenario > .tco-field label { min-height: 0; }
.tco-action-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tco-results { margin-top: 30px; }
.tco-results h2 { font-size: 24px; }
.tco-summary { margin: 14px 0 18px; padding: 14px 16px; border-left: 4px solid var(--brand);
  background: #fff; color: var(--ink); font-weight: 650; }
.tco-result-table { min-width: 680px; font-variant-numeric: tabular-nums; }
.tco-result-table th[scope="row"] { color: var(--ink); font-weight: 650; }
.tco-result-table td { text-align: right; }
.tco-total-row th, .tco-total-row td { background: #eef6fd; color: var(--ink); font-size: 16px; font-weight: 750; }
.tco-privacy { color: var(--soft); font-size: 13px; margin-top: 12px; }
.tco-formula { margin-top: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tco-roi-formula { margin-top: 22px; white-space: pre-wrap; }
.tco-method-note, .tco-source-reviewed { margin-top: 14px; }

@media (max-width: 760px) {
  .selection-name-grid, .selection-results { grid-template-columns: 1fr; }
  .selection-scorecard { padding: 18px 14px; }
  .selection-table-wrap { overflow: visible; }
  .comparison-table.selection-score-table { display: block; width: 100%; min-width: 0; max-width: 100%;
    box-sizing: border-box; }
  .selection-score-table caption { display: block; overflow-wrap: anywhere; }
  .selection-score-table thead { display: none; }
  .selection-score-table tbody { display: grid; width: 100%; max-width: 100%; gap: 12px; padding: 12px;
    box-sizing: border-box; }
  .selection-score-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
  .selection-score-table th[scope="row"] { grid-column: 1 / -1; width: auto; padding: 12px;
    border-bottom: 1px solid var(--line); }
  .selection-score-table td { width: auto; min-width: 0; padding: 10px 12px; border-bottom: 0; }
  .selection-score-table td::before { display: block; margin-bottom: 5px; color: var(--soft);
    font-size: 11px; font-weight: 700; text-transform: uppercase; }
  .selection-score-table td:nth-child(2)::before { content: "Weight"; }
  .selection-score-table td:nth-child(3)::before { content: "Gate"; }
  .selection-score-table td:nth-child(4), .selection-score-table td:nth-child(5) {
    grid-column: 1 / -1; display: grid; grid-template-columns: 86px minmax(0, 1fr);
    align-items: center; gap: 10px; border-top: 1px solid var(--line); }
  .selection-score-table td:nth-child(4)::before, .selection-score-table td:nth-child(5)::before {
    margin-bottom: 0; }
  .selection-score-table td:nth-child(4)::before { content: "Option A"; }
  .selection-score-table td:nth-child(5)::before { content: "Option B"; }
  .selection-score-table select { min-width: 0; max-width: 100%; }
  .selection-tool-actions { display: grid; grid-template-columns: 1fr; }
  .selection-tool-actions .btn { width: 100%; text-align: center; }
  .tco-shared-grid, .tco-field-grid { grid-template-columns: 1fr; gap: 0; }
  .tco-scenarios { grid-template-columns: minmax(0, 1fr); }
  .tco-field label { min-height: 0; }
  .tco-action-row { display: grid; grid-template-columns: 1fr; }
  .tco-action-row .btn { width: 100%; text-align: center; }
}

@media print {
  body { color: #000; }
  .nav, .footer, .cookiebar, .tco-action-row, .selection-tool-actions, .contextual-links, .source-list { display: none !important; }
  .section, .section.alt { padding: 14px 0; background: #fff; }
  .tco-form .card, .table-wrap { break-inside: avoid; border-color: #aaa; }
  .tco-result-table { min-width: 0; }
  a { color: #000; }
}

@media (max-width: 640px) {
  .seo-hero h1 { font-size: 30px; }
  .seo-hero .lead { font-size: 16px; }
  .flow-node { grid-template-columns: 1fr; }
  .flow-connector { margin-left: 20px; }
  .pos-architecture-flow, .pos-responsibility-grid { grid-template-columns: 1fr; }
  .pos-architecture-flow { gap: 26px; }
  .pos-architecture-flow li { min-height: 0; }
  .pos-architecture-flow li:not(:last-child)::after { width: 16px; height: 16px; right: auto;
    left: calc(50% - 8px); top: auto; bottom: -21px; transform: rotate(135deg); }
  .proof-strip { justify-content: flex-start; }
  .comparison-table { min-width: 680px; }
  [data-security-matrix] .table-wrap { overflow: visible; border: 0; background: transparent; }
  [data-security-matrix] .comparison-table { display: block; min-width: 0; }
  [data-security-matrix] .comparison-table caption { display: block; margin-bottom: 10px;
    border: 1px solid var(--line); border-radius: 8px; background: #fff; }
  [data-security-matrix] .comparison-table thead { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  [data-security-matrix] .comparison-table tbody { display: grid; gap: 12px; }
  [data-security-matrix] .comparison-table tr { display: block; border: 1px solid var(--line);
    border-radius: 8px; background: #fff; overflow: hidden; }
  [data-security-matrix] .comparison-table td { display: block; padding: 11px 14px;
    border-bottom: 1px solid var(--line); }
  [data-security-matrix] .comparison-table td:last-child { border-bottom: 0; }
  [data-security-matrix] .comparison-table td::before { display: block; margin-bottom: 4px;
    color: #52627a; font-size: 11px; font-weight: 700; text-transform: uppercase; }
  [data-security-matrix] .comparison-table td:nth-child(1)::before { content: "Boundary"; }
  [data-security-matrix] .comparison-table td:nth-child(2)::before { content: "Published evidence"; }
  [data-security-matrix] .comparison-table td:nth-child(3)::before { content: "Operator action"; }
  .video-guide-grid { grid-template-columns: 1fr; row-gap: 28px; }
  .video-version-boundary { margin-bottom: 26px; }
  .video-guide-copy h2 { font-size: 19px; }
  .video-watch-meta { display: grid; gap: 8px; }
  .video-watch-meta .video-meta { justify-content: flex-start; }
  main[data-free-download-owner-reviewed] .seo-hero { padding-top: 28px; padding-bottom: 34px; }
  main[data-free-download-owner-reviewed] .proof-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main[data-free-download-owner-reviewed] .proof-strip span { display: grid; align-content: center; min-height: 56px; border-radius: 8px; }
  main[data-offline-pos-owner-reviewed] .seo-hero { padding-top: 28px; padding-bottom: 32px; }
  main[data-offline-pos-owner-reviewed] .seo-hero h1 { font-size: 28px; }
  main[data-offline-pos-owner-reviewed] .breadcrumbs { margin-bottom: 12px; }
  main[data-offline-pos-owner-reviewed] .proof-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main[data-offline-pos-owner-reviewed] .proof-strip span { display: grid; align-content: center; min-height: 52px; border-radius: 8px; padding: 6px 12px; }
  main[data-product-facts-owner-reviewed] .seo-hero { padding-top: 28px; padding-bottom: 32px; }
  main[data-product-facts-owner-reviewed] .seo-hero h1 { font-size: 28px; }
  main[data-product-facts-owner-reviewed] .breadcrumbs { margin-bottom: 12px; }
  main[data-product-facts-owner-reviewed] .proof-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main[data-product-facts-owner-reviewed] .proof-strip span { display: grid; align-content: center; min-height: 52px; border-radius: 8px; padding: 6px 12px; }
  .home-office-media img { height: 240px; }
  .release-activity { grid-template-columns: minmax(0, 1fr); padding: 18px 0; }
  .release-activity-stats { min-width: 0; }
  .release-activity-stats div { min-height: 70px; padding: 10px 8px; }
  .release-activity-stats dd { font-size: 23px; }
}

/* ------------------------------------------------------------------
 * The two ways to start selling (account > set up my shop, step 3).
 *
 * Boxed and headed so they read as a CHOICE rather than as a numbered
 * sequence. The step used to offer only the download, so a new customer
 * had no way to know their shop was already open at their own address.
 * ------------------------------------------------------------------ */
.setup-route {
  border: 1px solid var(--line, #e3e9f1);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.setup-route:last-child { margin-bottom: 0; }
.setup-route-head {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink, #16233b);
  margin-bottom: 6px;
}

/* ------------------------------------------------------------------
 * The note under "Create your Posnic account".
 *
 * It says the local app needs no account - the most useful sentence on
 * the page for the person least likely to read it, since somebody who
 * only wants a till should not fill in six fields to find that out.
 *
 * As grey body copy it read as a disclaimer. A tinted rule down the
 * left makes it an aside worth reading, without competing with the
 * heading it sits under.
 * ------------------------------------------------------------------ */
.signup-note {
  margin: 8px 0 16px;
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink, #16233b);
  background: #f4f8fc;
  border-left: 3px solid var(--brand, #3D85C6);
  border-radius: 0 8px 8px 0;
}
.signup-note b { font-weight: 700; }
.signup-note a { color: var(--brand, #3D85C6); font-weight: 600; }

:root[data-theme="dark"] .signup-note,
html[data-theme="dark"] .signup-note {
  background: rgba(61, 133, 198, 0.12);
  color: inherit;
}

/* Homepage product experience below the critical, page-local hero styles. */
.home-product-section { padding-top: 44px; }
.home-product-section .eyebrow, .home-evidence-section .eyebrow {
  margin-bottom: 2px;
  color: #23775e;
}
.home-showcase {
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #d9e1eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(18, 35, 59, .1);
}
.home-showcase-tabs {
  display: flex;
  gap: 20px;
  min-height: 52px;
  padding: 0 20px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: #f7f9fc;
}
.home-showcase-tabs button {
  flex: 0 0 auto;
  min-height: 52px;
  padding: 0 3px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--soft);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.home-showcase-tabs button[aria-selected="true"] { border-color: var(--brand); color: var(--ink); }
.home-showcase-tabs button:focus-visible { outline: 3px solid rgba(61,133,198,.28); outline-offset: -3px; }
.home-showcase-panel[hidden] { display: none; }
.home-showcase-panel figure { margin: 0; }
.home-showcase-media { aspect-ratio: 16 / 9; overflow: hidden; background: #eef2f7; }
.home-showcase-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-showcase-panel figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}
.home-showcase-panel figcaption span { display: grid; gap: 2px; color: var(--soft); font-size: 13.5px; }
.home-showcase-panel figcaption strong { color: var(--ink); font-size: 15px; }
.home-showcase-panel figcaption small { color: #64748b; font-size: 11.5px; text-align: right; }
.home-showcase-more { margin-top: 18px; }
.home-showcase-more span { margin: 0 7px; color: #9aa7b8; }

.home-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 960px;
  margin: 26px auto 0;
  border-top: 1px solid #cfd8e4;
  border-bottom: 1px solid #cfd8e4;
}
.home-mode-grid article { min-width: 0; padding: 30px 34px; }
.home-mode-grid article + article { border-left: 1px solid #cfd8e4; }
.home-mode-label {
  margin-bottom: 6px;
  color: #23775e;
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}
.home-mode-grid article + article .home-mode-label { color: #a64b31; }
.home-mode-grid h3 { margin-bottom: 8px; font-size: 20px; letter-spacing: 0; }
.home-mode-grid article > p:not(.home-mode-label) { min-height: 78px; color: var(--soft); font-size: 14px; }
.home-mode-grid a { display: inline-block; margin-top: 14px; font-weight: 650; }

.home-evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.home-evidence-item {
  min-width: 0;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: 8px;
  background: #fff;
}
.home-evidence-item:nth-child(2) { border-top-color: #a64b31; }
.home-evidence-item:nth-child(3) { border-top-color: #23775e; }
.home-evidence-item:nth-child(4) { border-top-color: #7659a8; }
.home-evidence-number { color: var(--brand-dark); font-size: 31px; font-weight: 750; line-height: 1; }
.home-evidence-item:nth-child(2) .home-evidence-number { color: #a64b31; }
.home-evidence-item:nth-child(3) .home-evidence-number { color: #23775e; }
.home-evidence-item:nth-child(4) .home-evidence-number { color: #7659a8; }
.home-evidence-item h3 { min-height: 50px; margin: 10px 0 7px; font-size: 16px; line-height: 1.4; }
.home-evidence-item > p:not(.home-evidence-number) { min-height: 66px; color: var(--soft); font-size: 13.5px; }
.home-evidence-item details { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.home-evidence-item summary { color: var(--brand-dark); font-size: 13px; font-weight: 650; cursor: pointer; }
.home-evidence-item details p { margin-top: 10px; color: var(--soft); font-size: 12.5px; }
.home-evidence-source { max-width: 860px; margin: 20px auto 0; color: var(--soft); font-size: 12.5px; }

@media (max-width: 900px) {
  .home-evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-evidence-item h3, .home-evidence-item > p:not(.home-evidence-number) { min-height: 0; }
}

@media (max-width: 640px) {
  .home-product-section { padding-top: 34px; }
  .home-showcase-tabs { gap: 18px; padding: 0 14px; }
  .home-showcase-panel figcaption { display: grid; gap: 5px; min-height: 92px; padding: 12px 14px; }
  .home-showcase-panel figcaption small { text-align: left; }
  .home-mode-grid { grid-template-columns: 1fr; }
  .home-mode-grid article { padding: 24px 18px; }
  .home-mode-grid article + article { border-top: 1px solid #cfd8e4; border-left: 0; }
  .home-mode-grid article > p:not(.home-mode-label) { min-height: 0; }
  .home-evidence-grid { grid-template-columns: 1fr; }
  .home-evidence-item { padding: 18px; }
}

/* Broad POS guide product view */
.pos-guide-review-notes {
  max-width: 760px;
  margin: 20px auto 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.pos-guide-review-notes summary {
  width: fit-content;
  margin: 0 auto;
  color: var(--brand-dark);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.pos-guide-review-notes[open] summary { margin-bottom: 12px; }
.pos-guide-review-notes > div { display: grid; gap: 10px; }
.pos-guide-review-notes p { color: var(--soft); font-size: 13px; }
.pos-guide-product {
  padding-top: 38px;
  padding-bottom: 42px;
  border-top: 1px solid #d7e0e8;
  border-bottom: 1px solid #d7e0e8;
  background: #f3f7f9;
}
.pos-guide-product-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  gap: 36px;
  align-items: end;
}
.pos-guide-product-heading .eyebrow { margin-bottom: 7px; text-align: left; color: #23775e; }
.section .pos-guide-product-heading h2 { margin: 0; text-align: left; font-size: 28px; }
.pos-guide-product-heading > p { color: var(--soft); font-size: 14px; }
.pos-guide-visual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(290px, .9fr);
  gap: 14px;
  margin-top: 24px;
}
.pos-guide-shot {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #c9d4df;
  border-radius: 8px;
  background: #fff;
}
.pos-guide-shot-primary { grid-row: 1 / span 2; }
.pos-guide-shot > a {
  display: block;
  aspect-ratio: 16 / 7.4;
  overflow: hidden;
  background: #101928;
}
.pos-guide-shot-primary > a { aspect-ratio: 16 / 10; }
.pos-guide-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pos-guide-shot figcaption {
  display: grid;
  gap: 3px;
  min-height: 66px;
  padding: 11px 14px;
  border-top: 3px solid var(--brand);
}
.pos-guide-shot:nth-child(2) figcaption { border-top-color: #a64b31; }
.pos-guide-shot:nth-child(3) figcaption { border-top-color: #23775e; }
.pos-guide-shot figcaption b { color: var(--ink); font-size: 14px; }
.pos-guide-shot figcaption span { color: var(--soft); font-size: 12.5px; }
.pos-guide-product-more { margin-top: 16px; font-size: 14px; font-weight: 650; }

@media (max-width: 820px) {
  .pos-guide-product-heading { grid-template-columns: 1fr; gap: 8px; }
  .pos-guide-visual-grid { grid-template-columns: 1fr; }
  .pos-guide-shot-primary { grid-row: auto; }
  .pos-guide-shot > a, .pos-guide-shot-primary > a { aspect-ratio: 16 / 9; }
  .pos-guide-shot figcaption { min-height: 0; }
}

@media (max-width: 640px) {
  main[data-feature-evidence-reviewed] .seo-hero { padding-top: 28px; padding-bottom: 32px; }
  main[data-feature-evidence-reviewed] .seo-hero h1 { font-size: 30px; }
  .pos-guide-review-notes { margin-top: 17px; }
  .pos-guide-product { padding-top: 30px; padding-bottom: 34px; }
  .section .pos-guide-product-heading h2 { font-size: 23px; }
  .pos-guide-visual-grid { gap: 12px; margin-top: 18px; }
}

/* Support conversion route chooser */
main.support-experience .support-trust-hero {
  padding-top: 34px;
  padding-bottom: 42px;
  background:
    linear-gradient(90deg, #f5fbff 0, #fff 62%, #f6faf5 100%);
  border-bottom: 1px solid #dce5ee;
}
main.support-experience .support-trust-hero .breadcrumbs {
  justify-content: flex-start;
  margin-bottom: 24px;
}
main.support-experience .support-trust-hero .breadcrumbs a,
main.support-experience .support-trust-hero .breadcrumbs span {
  color: var(--soft);
}
.support-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .82fr);
  gap: 28px;
  align-items: center;
}
.support-hero-copy {
  min-width: 0;
  color: var(--ink);
}
main.support-experience .support-hero-copy .eyebrow {
  color: #23775e;
  text-align: left;
}
main.support-experience .support-hero-copy h1 {
  max-width: 760px;
  margin: 8px 0 14px;
  color: var(--ink);
  font-size: 42px;
  text-align: left;
}
main.support-experience .support-hero-copy .lead {
  max-width: 690px;
  margin: 0;
  color: var(--soft);
  font-size: 18px;
  text-align: left;
}
.support-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.support-hero-actions .btn.ghost {
  background: #fff;
  color: var(--ink);
  border-color: #cfd9e5;
}
.support-hero-actions .btn.ghost:hover {
  background: #f8fbff;
  color: var(--brand-dark);
  border-color: var(--brand);
}
.support-quick-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #d7e1ec;
}
.support-quick-facts div {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid #d7e1ec;
  border-radius: 8px;
  background: #fff;
}
.support-quick-facts dt {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.support-quick-facts dd {
  margin: 0;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.45;
}
.support-route-panel {
  min-width: 0;
  padding: 22px;
  border: 1px solid #cbd8e5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(18, 35, 59, .14);
}
.support-route-panel .eyebrow {
  margin-bottom: 4px;
  color: #23775e;
  text-align: left;
}
.support-route-panel h2 {
  margin: 0 0 16px;
  font-size: 23px;
}
.support-route-list {
  display: grid;
  gap: 9px;
}
.support-route-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #d7e1ec;
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--ink);
  text-decoration: none;
}
.support-route-card:hover {
  transform: translateY(-1px);
  border-color: #b8c7d7;
  box-shadow: 0 8px 22px rgba(18, 35, 59, .1);
}
.support-route-card span {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.support-route-card b,
.support-route-card small {
  overflow-wrap: anywhere;
}
.support-route-card b {
  font-size: 14px;
}
.support-route-card small {
  color: var(--soft);
  font-size: 12.5px;
  line-height: 1.35;
}
.support-route-card strong {
  color: var(--brand-dark);
  font-size: 12px;
  text-transform: uppercase;
}
.support-route-urgent { border-left-color: #a64b31; background: #fff8f5; }
.support-route-urgent strong { color: #a64b31; }
.support-route-whatsapp { border-left-color: #23775e; background: #f4fbf7; }
.support-route-whatsapp strong { color: #23775e; }
.support-route-security { border-left-color: #7659a8; background: #f8f6ff; }
.support-route-security strong { color: #7659a8; }
.support-route-record { border-left-color: #b88317; background: #fffaf0; }
.support-route-record strong { color: #946514; }
.support-route-boundary {
  margin: 15px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--soft);
  font-size: 12.8px;
  line-height: 1.5;
}

@media (max-width: 980px) {
  main.support-experience .support-trust-hero {
    background: #f7fbff;
  }
  .support-hero-layout { grid-template-columns: 1fr; gap: 22px; }
  .support-route-panel { max-width: 640px; }
}

@media (max-width: 680px) {
  main.support-experience .support-trust-hero {
    padding-top: 26px;
    padding-bottom: 32px;
    background: #f7fbff;
  }
  main.support-experience .support-trust-hero .breadcrumbs { margin-bottom: 18px; }
  main.support-experience .support-hero-copy h1 { font-size: 31px; }
  main.support-experience .support-hero-copy .lead { font-size: 16px; }
  .support-hero-actions .btn { width: 100%; text-align: center; }
  .support-quick-facts { display: none; }
  .support-route-panel { padding: 14px; }
  .support-route-panel .eyebrow,
  .support-route-panel h2 { display: none; }
  .support-route-list { gap: 7px; }
  .support-route-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 11px;
  }
  .support-route-card b { font-size: 13px; }
  .support-route-card small { font-size: 11.6px; }
  .support-route-card strong { font-size: 11px; }
  .support-route-boundary { margin-top: 10px; padding-top: 10px; font-size: 11.8px; }
}