/* Orisma. Layout system shared with the house sites (floating header, dark hero + fact strip,
   alternating sections, one card style, dark CTA band, accordion FAQ, dark footer), Orisma colours.
   Tokens mirror brand/tokens.json. Fonts self-hosted (Host Grotesk + IBM Plex Mono, SIL OFL). */
@font-face { font-family: "Host Grotesk"; font-weight: 400 800; font-style: normal; font-display: swap; src: url(/fonts/HostGrotesk.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/ibm-plex-mono-500-latin.woff2) format("woff2"); }

:root {
  --ink: #0f1a17;          /* hero, dark bands, footer */
  --ink-2: #172620;        /* cards on dark */
  --head: #14201b;         /* headings on light */
  --text: #2c3531;         /* body text */
  --mut: #5b6660;          /* secondary text */
  --line: #dfe1db;         /* borders, rules */
  --paper: #f5f4ef;        /* quiet section ground (limestone) */
  --accent: #1f7a57;       /* field green: buttons and links on light */
  --accent-hover: #186447;
  --accent-ink: #17604a;   /* link text on light */
  --mint: #9fd8ba;         /* accent on dark: the one contrast line, rules on dark, buttons on dark */
  --mint-hover: #b6e3cb;
  --sans: "Host Grotesk", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r-card: 16px;
  --r-ctl: 12px;
  --h2: 40px;              /* one h2 size for stacked and rail sections; the scale itself is open (board DS-Q4) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); font-size: 17px; line-height: 1.62; color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
h1, h2, h3 { color: var(--head); font-weight: 700; text-wrap: balance; }
.lede, .prose p { text-wrap: pretty; }
h2 { font-size: var(--h2); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: 20px; line-height: 1.3; font-weight: 650; }
b, strong { font-weight: 650; color: var(--head); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: var(--ink); padding: 10px 14px; border-radius: var(--r-ctl); font-weight: 600; }
.skip:focus { left: 12px; }

/* Mark: four strokes close a square, the last one in accent */
.mark { width: 30px; height: 30px; flex: none; }
.mark .s { stroke: currentColor; }
.mark .last { stroke: var(--accent); }
footer .mark .last, .dark .mark .last { stroke: var(--mint); }

/* Header: floating white bar */
.top { position: sticky; top: 16px; z-index: 50; padding: 0 20px; margin-top: 16px; margin-bottom: -84px; }
.top .bar { max-width: 1140px; margin: 0 auto; background: #fff; border-radius: var(--r-card); box-shadow: 0 8px 30px rgb(0 0 0 / 0.12); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 20px; height: 68px; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 21px; letter-spacing: -0.015em; color: var(--ink); text-decoration: none; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav a { font-size: 15px; font-weight: 600; color: var(--head); text-decoration: none; }
.nav a:hover, .nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.acts { display: flex; align-items: center; gap: 10px; }
.acts .signin { padding: 0 8px; font-size: 14px; font-weight: 500; color: inherit; text-decoration: none; opacity: .8; }
.acts .signin:hover { opacity: 1; }
.acts .short { display: none; }
.menu-btn { display: none; align-items: center; gap: 8px; font: 600 14px var(--sans); color: var(--head); background: #fff; border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 10px 12px; cursor: pointer; }
.menu-btn span { width: 16px; height: 2px; background: currentColor; position: relative; }
.menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; }
.menu-btn span::before { top: -5px; } .menu-btn span::after { top: 5px; }
.mnav { max-width: 1140px; margin: 8px auto 0; background: #fff; border-radius: var(--r-card); box-shadow: 0 8px 30px rgb(0 0 0 / 0.16); padding: 10px 18px 18px; }
.mnav[hidden] { display: none; }
.mnav a:not(.btn) { display: block; padding: 11px 0; font-weight: 600; color: var(--head); text-decoration: none; border-bottom: 1px solid var(--line); }
.mnav .btn { width: 100%; margin-top: 14px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 650 16px/1.3 var(--sans); padding: 16px 28px; border-radius: var(--r-ctl); border: 1px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s ease, border-color .15s ease; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.bright { background: var(--mint); color: var(--ink); }
.btn.bright:hover { background: var(--mint-hover); }
.btn.glass { background: rgb(255 255 255 / 0.06); color: #fff; border-color: rgb(255 255 255 / 0.4); }
.btn.glass:hover { background: rgb(255 255 255 / 0.14); }
.btn.line { background: #fff; color: var(--head); border-color: var(--line); }
.btn.line:hover { border-color: var(--head); }
.btn.sm { font-size: 14px; padding: 12px 18px; }
.textlink { font-weight: 650; color: var(--head); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Home hero: dark, centred, the one contrast line */
.hero { background: var(--ink); color: #fff; padding: 184px 0 100px; text-align: center; }
.hero .kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: rgb(255 255 255 / 0.72); margin-bottom: 22px; }
.hero .kicker::before, .hero .kicker::after { content: ""; width: 24px; height: 2px; background: var(--mint); }
.hero h1 { color: #fff; font-size: 62px; line-height: 1.04; letter-spacing: -0.03em; max-width: 1060px; margin: 0 auto; }
.hero h1 span { color: var(--mint); display: block; }
.hero .lede { font-size: 20px; line-height: 1.55; color: rgb(255 255 255 / 0.84); max-width: 680px; margin: 26px auto 0; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero .ctas { justify-content: center; }

/* Hero price: the offer in one look */
.hero .hprice { margin-top: 26px; font-size: 22px; color: rgb(255 255 255 / 0.8); }
.hero .hprice strong { color: #fff; font-size: 34px; font-weight: 700; letter-spacing: -0.02em; margin-right: 4px; }
.hero .hprice + .lede { margin-top: 10px; }

/* Price card (home) */
.pricecard { max-width: 920px; padding: 36px; box-shadow: 0 20px 44px rgb(15 26 23 / 0.10); border-color: #c9d8cf; }
.pricecard .pc-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.pricecard .price { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; color: var(--head); line-height: 1.05; margin-top: 6px; }
.pricecard .price span { font-size: 16px; font-weight: 400; color: var(--mut); letter-spacing: 0; }
.pricecard .meta { margin-top: 6px; }
.pricecard .ticks { margin-top: 10px; }
.pricecard .ticks li:nth-child(-n+2) { border-top: 0; }
.pc-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; color: var(--mut); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fsteps.grid3 .card { padding: 28px; }
.fsteps.grid3 h3 { font-size: 22px; }

/* Fact strip */
.strip { background: var(--ink-2); color: rgb(255 255 255 / 0.8); border-top: 1px solid rgb(255 255 255 / 0.08); }
.strip ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; padding: 18px 0; font-size: 15px; }
.strip li { display: flex; align-items: center; gap: 10px; }
.strip li::before { content: ""; width: 9px; height: 9px; border: 2px solid var(--mint); border-radius: 2px; flex: none; }
.strip strong { color: #fff; font-weight: 650; }
.strip li strong:first-child { color: var(--mint); font-family: var(--mono); font-weight: 500; margin-right: 6px; }
.strip ul.steps3 li::before { display: none; }

/* Page hero (sub-pages): dark, left aligned */
.phero { background: var(--ink); color: #fff; padding: 152px 0 76px; }
.phero h1 { color: #fff; font-size: 52px; line-height: 1.07; letter-spacing: -0.025em; max-width: 880px; }
.phero .lede { font-size: 19.5px; line-height: 1.55; color: rgb(255 255 255 / 0.82); max-width: 720px; margin-top: 22px; }
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; color: rgb(255 255 255 / 0.6); margin-bottom: 24px; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: rgb(255 255 255 / 0.35); }
.crumbs a { color: rgb(255 255 255 / 0.78); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

/* Sections: white / paper alternate, dark band */
section.k { padding: 112px 0; }
section.k.paper { background: var(--paper); }
section.k.dark { background: var(--ink); color: rgb(255 255 255 / 0.8); }
section.k.dark h2, section.k.dark h3, section.k.dark strong { color: #fff; }
section.k.dark a { color: var(--mint); }
.head { max-width: 760px; margin-bottom: 44px; }
.head .lede, .lede { font-size: 18px; color: var(--mut); margin-top: 14px; }
section.k.dark .head .lede { color: rgb(255 255 255 / 0.7); }
.sec { display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: start; }
.sec > * { min-width: 0; }
.sec-h h2 { position: sticky; top: 110px; }

/* Prose from markdown */
.prose > * + * { margin-top: 16px; }
.prose h3 { margin-top: 30px; }
.prose ul, .prose ol { padding-left: 0; list-style: none; display: grid; gap: 0; }
.prose ul > li { padding: 12px 0 12px 24px; border-top: 1px solid var(--line); position: relative; }
.prose ul > li:last-child { border-bottom: 1px solid var(--line); }
.prose ul > li::before { content: ""; position: absolute; left: 0; top: 22px; width: 10px; height: 2px; background: var(--accent); }
.prose ol { counter-reset: n; gap: 14px; }
.prose ol > li { counter-increment: n; position: relative; padding-left: 46px; }
.prose ol > li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-family: var(--mono); font-size: 14px; color: var(--mut); border-top: 2px solid var(--accent); padding-top: 2px; }
.note { padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--paper); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; font-size: 15.5px; color: var(--text); }
section.k.paper .note { background: #fff; }
.more { font-weight: 650; }
.prose.after { margin-top: 28px; max-width: 860px; }
.head + .prose.after { margin-top: 0; }
.prose .more a, .head .more a { color: var(--head); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* One card style */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 32px; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 16px; }
.card p + p { margin-top: 10px; }
.meta { color: var(--mut); font-size: 15px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dark .card { background: var(--ink-2); border-color: rgb(255 255 255 / 0.1); color: rgb(255 255 255 / 0.78); }

/* Four-step cards (dark band): the mark fills one stroke per step */
.fsteps { list-style: none; counter-reset: s; }
.fsteps .card { display: flex; flex-direction: column; gap: 10px; }
.fsteps .sq { width: 34px; height: 34px; margin-bottom: 6px; }
.fsteps .sq path { stroke: rgb(255 255 255 / 0.22); }
.fsteps .sq path.on { stroke: var(--mint); }
.fsteps .n { font-family: var(--mono); font-size: 13px; color: rgb(255 255 255 / 0.6); }
.fsteps h3 { font-size: 19px; }
.fsteps p { font-size: 15.5px; }

/* Step timeline (how it works) */
.steps { list-style: none; display: grid; gap: 0; max-width: 860px; }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps .n { font-family: var(--mono); font-size: 14px; color: var(--mut); border-top: 2px solid var(--accent); padding-top: 4px; align-self: start; width: 30px; }
.steps h3 { font-size: 18.5px; margin-bottom: 2px; }
.steps p { margin-top: 6px; font-size: 16px; }
.steps .need { font-size: 15px; color: var(--mut); }
.steps .opt { display: inline; color: var(--accent-ink); font-weight: 600; }
.steps.compact li { padding: 15px 0; }
.steps.compact h3 { font-size: 17px; }

/* Packages: the featured one is the only card with a shadow */
.pkgs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.pkg { display: flex; flex-direction: column; }
.pkg .ticks { margin-bottom: 22px; }
.pkg .price { font-size: 40px; font-weight: 700; letter-spacing: -0.025em; color: var(--head); margin-top: 6px; line-height: 1.1; }
.pkg .price span { font-size: 15px; color: var(--mut); font-weight: 400; letter-spacing: 0; }
.pkg .meta { margin-top: 6px; }
.pkg .btn { margin-top: auto; width: 100%; }
.pkg.feat { box-shadow: 0 20px 44px rgb(15 26 23 / 0.10); border-color: #c9d8cf; }
.ticks { list-style: none; margin-top: 18px; }
.ticks li { padding: 9px 0 9px 28px; position: relative; border-top: 1px solid var(--line); font-size: 15.5px; }
.ticks li::before { content: ""; position: absolute; left: 3px; top: 16px; width: 11px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.ticks.cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; margin-top: 0; }

/* Tables */
.tblwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
th, td { text-align: left; vertical-align: top; padding: 13px 16px; border-top: 1px solid var(--line); }
thead th { border-top: 0; background: var(--paper); font-weight: 650; font-size: 14px; color: var(--mut); }
td:first-child { font-weight: 600; color: var(--head); }
td.num { white-space: nowrap; }
section.k.paper .tblwrap { background: #fff; }

/* FAQ: accordion rows as cards */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.faq summary { list-style: none; cursor: pointer; padding: 19px 62px 19px 22px; font-weight: 650; color: var(--head); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2314201b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center no-repeat; transition: transform .15s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details > div { padding: 0 22px 20px; font-size: 16px; }
.faq details > div > * + * { margin-top: 10px; }
section.k.paper .faq summary::after { background-color: var(--paper); }
.faq + .more, .faq + p { margin-top: 24px; }

/* CTA band */
.ctaband { display: flex; justify-content: space-between; align-items: center; gap: 28px; background: var(--ink); color: rgb(255 255 255 / .8); border-radius: 20px; padding: 40px 44px; margin-top: 48px; }
.ctaband h3 { color: #fff; font-size: 26px; }
.ctaband p { margin-top: 8px; max-width: 620px; }
.ctaband .btn { flex: none; }

/* Footer: dark, columns, accent top rule */
footer { background: var(--ink); color: rgb(255 255 255 / 0.66); border-top: 3px solid var(--mint); font-size: 15px; }
footer .cols { display: grid; grid-template-columns: 2.3fr 1fr 1fr 1fr; gap: 40px; padding: 56px 0 44px; }
footer .brand { color: #fff; margin-bottom: 14px; }
footer h2.fh { font-size: 14px; line-height: 1.4; letter-spacing: 0; font-weight: 650; color: #fff; margin-bottom: 12px; }
footer ul { list-style: none; display: grid; gap: 8px; }
footer a { color: rgb(255 255 255 / 0.75); text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }
footer .disc { font-size: 14px; max-width: 420px; }
footer .legal a { text-decoration: underline; text-underline-offset: 2px; }
footer .legal { border-top: 1px solid rgb(255 255 255 / 0.1); padding: 22px 0 30px; font-size: 13.5px; color: rgb(255 255 255 / 0.5); }

/* Responsive */
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 1000px) {
  .grid4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .sec { grid-template-columns: 1fr; gap: 20px; }
  .sec-h h2 { position: static; }
  .phero h1 { font-size: 42px; }
  .ctaband { flex-direction: column; align-items: flex-start; padding: 32px 26px; }
  .pkgs, .grid2 { grid-template-columns: 1fr; }
  footer .cols { grid-template-columns: 1fr 1fr; }
  footer .cols > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 16px; }
  .top { padding: 0 8px; top: 10px; margin-top: 10px; margin-bottom: -74px; }
  .top .bar { height: 60px; padding: 8px; gap: 8px; }
  .brand { font-size: 19px; min-height: 44px; } .mark { width: 26px; height: 26px; }
  .acts .btn.sm { padding: 10px 12px; font-size: 13.5px; min-height: 44px; }
  .acts .signin { display: none; }
  .menu-btn { padding: 9px 10px; min-height: 44px; }
  .hero { padding: 124px 0 60px; }
  .hero h1 { font-size: 38px; }
  .hero .kicker::before, .hero .kicker::after { display: none; }
  .hero .lede { font-size: 17.5px; }
  .ctas .btn { width: 100%; }
  .strip ul { justify-content: flex-start; align-items: center; flex-direction: column; gap: 8px; font-size: 14.5px; }
  section.k { padding: 64px 0; }
  :root { --h2: 30px; }
  .head { margin-bottom: 28px; }
  .head .lede, .lede { font-size: 17px; }
  .grid4, .grid3 { grid-template-columns: 1fr; }
  .hero .hprice { font-size: 18px; margin-top: 18px; }
  .hero .hprice strong { font-size: 28px; }
  .pricecard { padding: 24px; }
  .pricecard .pc-top { flex-direction: column; align-items: stretch; }
  .pricecard .pc-top .btn { width: 100%; }
  .pricecard .price { font-size: 38px; }
  .pricecard .ticks li:nth-child(2) { border-top: 1px solid var(--line); }
  .fsteps.grid3 .card { padding: 20px 22px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
  .fsteps.grid3 .sq { margin: 0; width: 28px; height: 28px; }
  .fsteps.grid3 .n { width: calc(100% - 46px); }
  .fsteps.grid3 h3 { width: 100%; font-size: 19px; }
  .card { padding: 24px; }
  .phero { padding: 112px 0 52px; }
  .phero h1 { font-size: 34px; }
  .phero .lede { font-size: 17.5px; }
  .ticks.cols { grid-template-columns: 1fr; }
  .pkg .price { font-size: 34px; }
  .steps li { grid-template-columns: 40px 1fr; gap: 10px; }
  .ctaband .btn { width: 100%; }
  footer .cols { grid-template-columns: 1fr; }
  footer ul { gap: 0; }
  footer ul a { display: block; padding: 11px 0; }
  .crumbs { margin-bottom: 13px; }
  .crumbs a { display: inline-block; padding: 11px 0; }
  table { font-size: 14.5px; } th, td { padding: 11px 12px; }
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; }
  table.stack tr { padding: 12px 14px; border-top: 1px solid var(--line); }
  table.stack tr:first-child { border-top: 0; }
  table.stack td { border: 0; padding: 2px 0; }
  table.lbl td:not(:first-child)::before { content: attr(data-label) ": "; color: var(--mut); font-weight: 400; }
}
@media (max-width: 374px) {
  .top .bar { gap: 6px; }
  .acts { gap: 6px; }
  .acts .long { display: none; }
  .acts .short { display: inline; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Legal pages: one calm column, version line, review banner, summary box */
.legalmeta { margin-top: 18px; font-size: 14px; color: rgb(255 255 255 / 0.6); }
.draftline { display: inline-block; margin-top: 12px; padding: 6px 12px; border: 1px solid var(--mint); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--mint); }
.summary { margin-top: 28px; max-width: 760px; background: var(--ink-2); border: 1px solid rgb(255 255 255 / 0.12); border-radius: var(--r-card); padding: 24px 28px; }
.summary h2 { color: #fff; font-size: 18px; margin-bottom: 10px; }
.summary ul { margin: 0; padding-left: 20px; color: rgb(255 255 255 / 0.84); font-size: 16.5px; }
.summary li + li { margin-top: 6px; }
.legaldoc section.k { padding: 44px 0 0; }
.legaldoc section.k:last-child { padding-bottom: 96px; }
.legaldoc .sec-h h2 { font-size: 24px; position: static; }
.legaldoc .sec { gap: 40px; }
.legaldoc .prose { font-size: 16.5px; }
@media (max-width: 760px) {
  .summary { padding: 18px 20px; }
  .legaldoc section.k { padding-top: 32px; }
  .legaldoc .sec { gap: 10px; }
  .legaldoc .sec-h h2 { font-size: 21px; }
  .legaldoc section.k:last-child { padding-bottom: 64px; }
}

/* ---------------------------------------------------------------- Final suggestion, Phase 1 "Sell" (board final.json)
   Split hero with the real price card, timed strip, one dashboard section, four objections, the name box joined to the
   footer, the mobile price bar, pricing with switches and a live total, four phases. Same tokens, 1100 / 760 measures. */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dflt { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 8px; border: 1px dashed #c9a400; border-radius: 6px; background: #fff7d6; color: #5a4a00; font: 600 12px/1.5 var(--sans); letter-spacing: 0; white-space: nowrap; }
.dflt.wide { white-space: normal; margin-left: 0; }

/* Hero: headline and three no's left, the real price card right (design-site-6 B) */
.hero.split { text-align: left; padding: 150px 0 88px; }
.hero.split .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.hero.split h1 { font-size: 60px; max-width: none; margin: 0; }
.hero.split .ctas { justify-content: flex-start; margin-top: 0; }
.nos { list-style: none; margin: 26px 0 30px; display: grid; gap: 12px; font-size: 18px; color: rgb(255 255 255 / 0.86); }
.nos li { display: flex; gap: 12px; align-items: center; }
.nos svg { width: 18px; height: 18px; flex: none; color: var(--mint); }
.hcard { background: #fff; color: var(--text); border-radius: var(--r-card); padding: 30px; box-shadow: 0 24px 60px rgb(0 0 0 / 0.35); }
.hcard .t { font-weight: 650; color: var(--head); }
.hcard .p { font-size: 46px; font-weight: 700; letter-spacing: -0.03em; color: var(--head); line-height: 1.1; margin-top: 4px; }
.hcard .p span { font-size: 15px; font-weight: 400; color: var(--mut); letter-spacing: 0; }
.hcard .m { color: var(--mut); font-size: 15px; margin-top: 4px; }
.hcard .ticks { margin-top: 14px; }
.hcard .ticks li:first-child { border-top: 0; }
.hcard .y2 { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #d9dcd5; font-size: 14.5px; color: var(--mut); }
.hcard .vs { font-size: 13.5px; color: var(--mut); margin-top: 8px; }
.hcard .btn { width: 100%; margin-top: 18px; }
.strip ul.steps3 { justify-content: flex-start; gap: 10px 48px; }
.strip .tm { font-family: var(--mono); font-style: normal; font-size: 13px; color: var(--mint); margin-left: 8px; }

/* One dashboard section: real app, demo data, labelled */
.wrap.dash { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: center; }
.dash h2 { font-size: 36px; margin-bottom: 12px; }
.dash p { font-size: 18px; color: var(--mut); }
.dash p + p { margin-top: 10px; }
.frame { margin: 0; }
.frame .tb { height: 30px; background: #eceee8; display: flex; gap: 6px; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; }
.frame .tb i { width: 10px; height: 10px; border-radius: 50%; background: #cfd3cb; }
.frame img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border: 1px solid var(--line); border-radius: 0 0 14px 14px; box-shadow: 0 20px 50px rgb(15 26 23 / 0.18); }
.frame figcaption { font-size: 13.5px; color: var(--mut); margin-top: 10px; }

/* Four objections as cards */
.obj { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.obj .card { padding: 22px; }
.obj h3 { font-size: 20px; }
.obj p { color: var(--mut); font-size: 16px; }
.obj + .prose.after { margin-top: 24px; }

/* The ending (design-site-10 B): a light box on the content grid; the footer is the only dark block */
.endcta { background: #fff; padding: 64px 0; }
.endcta.cont { padding-top: 0; }
.endcta .ebox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 24px 48px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 44px; }
.endcta h2 { font-size: 30px; }
.endcta p { color: var(--text); margin-top: 10px; font-size: 18px; max-width: 560px; }
.namebox { display: flex; gap: 10px; max-width: 640px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px; }
.namebox input { flex: 1; min-width: 0; border: 0; font: inherit; font-size: 18px; padding: 0 12px; color: var(--head); background: transparent; }
.namebox input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.namebox .sfx { align-self: center; color: var(--mut); padding-right: 6px; }

/* Mobile price bar */
.mbb { display: none; }

/* Pricing: two doors, one package with switches, live total rail */
section.k.plain { padding-top: 64px; }
section.k.plain .head { margin-bottom: 0; }
.doors { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin-bottom: 28px; }
.doors button { font: 600 15px var(--sans); color: var(--mut); background: none; border: 0; border-radius: 999px; padding: 10px 20px; cursor: pointer; min-height: 44px; }
.doors button[aria-selected="true"] { background: var(--ink); color: #fff; }
.pr { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.pr[hidden] { display: none; }
.prm { display: grid; gap: 20px; min-width: 0; }
.pbox h3, .pr .card h3 { font-size: 20px; }
.card .big { font-size: 40px; font-weight: 700; color: var(--head); letter-spacing: -0.02em; line-height: 1.15; }
.card .big span { font-size: 15px; font-weight: 400; color: var(--mut); letter-spacing: 0; }
.card .big.sm { font-size: 30px; }
.pbox .ticks.cols { margin-top: 14px; }
.pbox .ticks.cols li:nth-child(-n+2) { border-top: 0; }
.pbox h4 { margin: 26px 0 4px; font-size: 16px; color: var(--head); }
.sw { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw .cb { width: 20px; height: 20px; border: 2px solid #b9beb6; border-radius: 6px; margin-top: 3px; position: relative; }
.sw input:checked + .cb { background: var(--accent); border-color: var(--accent); }
.sw input:checked + .cb::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sw input:focus-visible + .cb { outline: 2px solid var(--accent); outline-offset: 2px; }
.sw b { display: block; }
.sw .d { display: block; font-size: 14.5px; color: var(--mut); margin-top: 2px; }
.sw .pp { font-weight: 650; color: var(--head); white-space: nowrap; }
.pbox .free { margin-top: 12px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.two .card { display: flex; flex-direction: column; }
.two .btn { margin-top: auto; }
.two.eq .ticks { margin-bottom: 22px; }
ul.never { list-style: none; margin-top: 8px; }
ul.never li { padding: 8px 0 8px 22px; border-top: 1px solid var(--line); position: relative; font-size: 15.5px; }
ul.never li::before { content: ""; position: absolute; left: 0; top: 19px; width: 10px; height: 2px; background: var(--mut); }
ul.split { list-style: none; margin-top: 10px; }
ul.split li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15.5px; }
ul.split li b { white-space: nowrap; }
ul.split li.sum { font-weight: 650; color: var(--head); }
.pr .card .meta { margin-top: 10px; }
.ng { margin-top: 14px; padding: 12px 14px; background: var(--paper); border-radius: var(--r-ctl); font-size: 15.5px; }
.tot { position: sticky; top: 110px; background: var(--ink); color: #fff; border-radius: var(--r-card); padding: 26px; }
.tot .l { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: rgb(255 255 255 / 0.75); padding: 6px 0; }
.tot .l small { font-size: 12px; color: rgb(255 255 255 / 0.55); }
.tot .t2 { display: flex; justify-content: space-between; font-size: 22px; font-weight: 700; border-top: 1px solid rgb(255 255 255 / 0.15); margin-top: 8px; padding-top: 12px; }
.tot .btn { width: 100%; margin-top: 18px; }
.tot .fine { font-size: 13px; color: rgb(255 255 255 / 0.6); margin-top: 12px; }
.tot .fine b { color: #fff; }

/* Four phases */
.phases { list-style: none; display: grid; gap: 20px; max-width: 860px; }
.phases > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; }
.phases > li > * { grid-column: 2; }
.phases .sq { grid-column: 1; grid-row: 1 / span 3; width: 34px; height: 34px; }
.phases .sq path { stroke: var(--line); }
.phases .sq path.on { stroke: var(--accent); }
.phases .n { font-family: var(--mono); font-size: 13px; color: var(--mut); }
.phases h3 { font-size: 22px; margin: 2px 0 6px; }
.phases details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.phases summary { cursor: pointer; font-weight: 650; color: var(--accent-ink); min-height: 32px; }
.pst { list-style: none; margin-top: 8px; }
.pst li { padding: 12px 0; border-top: 1px solid var(--line); }
.pst li:first-child { border-top: 0; }
.pst b { display: block; color: var(--head); }
.pst p { font-size: 15.5px; margin-top: 4px; }
.pst .need { color: var(--mut); font-size: 15px; }
.pst .opt { color: var(--accent-ink); font-weight: 600; }

@media (max-width: 1000px) {
  .obj { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hero.split { padding: 112px 0 48px; }
  .hero.split .wrap, .wrap.dash, .pr, .two { grid-template-columns: 1fr; gap: 32px; }
  .hero.split h1 { font-size: 38px; }
  .tot { position: static; }
  .has-mbb .mbb { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--ink); color: #fff; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 12px; align-items: center; justify-content: space-between; box-shadow: 0 -8px 24px rgb(0 0 0 / 0.2); }
  .mbb b { font-size: 18px; color: #fff; }
  .mbb span { font-size: 12px; color: rgb(255 255 255 / 0.65); display: block; }
  .mbb .btn { padding: 12px 16px; font-size: 15px; min-height: 44px; }
  .has-mbb .acts .hstart { display: none; }
  .has-mbb footer { padding-bottom: 84px; }
  .namebox { flex-wrap: wrap; }
  .namebox input { height: 48px; }
  .namebox .btn { width: 100%; }
}
@media (max-width: 640px) {
  .hero.split .hcard { padding: 22px; }
  .hcard .p { font-size: 38px; }
  .hero.split .ctas .btn.glass { display: none; }
  .nos { font-size: 16.5px; margin: 18px 0 22px; }
  .obj { grid-template-columns: 1fr; }
  .endcta { padding: 40px 0; }
  .endcta.cont { padding-top: 0; }
  .endcta .ebox { padding: 24px 20px; border-radius: 18px; }
  .endcta h2 { font-size: 26px; }
  .endcta p { font-size: 17px; }
  .dash h2 { font-size: 30px; }
  .doors { display: flex; width: 100%; }
  .doors button { flex: 1; padding: 10px 8px; font-size: 14px; }
  .sw { grid-template-columns: 22px minmax(0, 1fr); }
  .sw .pp { grid-column: 2; }
  .card .big { font-size: 34px; }
  .phases > li { grid-template-columns: 1fr; }
  .phases > li > * { grid-column: 1; }
  .phases .sq { grid-row: auto; width: 28px; height: 28px; margin-bottom: 6px; }
}
@media (max-width: 640px) { .strip ul.steps3 { align-items: flex-start; } }

/* ---------------------------------------------------------------- Offer round 3: three tiers, comparison table, plan
   tiers, banks as cards (owner picks OF1, OF3, OF6). Same tokens and card style as the rest of the site. */
.prw { display: grid; gap: 24px; min-width: 0; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.prw .tier { display: flex; flex-direction: column; padding: 28px; }
.prw .tier.feat { border-color: var(--accent); box-shadow: 0 14px 40px rgb(15 26 23 / 0.08); }
.prw .tier h3 { font-size: 20px; }
.prw .tier .pill { align-self: flex-start; margin-bottom: 10px; padding: 2px 10px; border-radius: 999px; background: #e3f3ea; color: var(--accent-ink); font-size: 13px; font-weight: 650; }
.prw .tier .big { margin-top: 8px; }
.prw .tier .tag { margin-top: 10px; font-size: 15.5px; color: var(--text); }
.prw .tier .meta { margin-top: 4px; }
.prw .tier .ticks { margin: 14px 0 22px; }
.prw .tier .ticks li:first-child { border-top: 0; }
.prw .tier .btn { margin-top: auto; width: 100%; }
.exlink { font-size: 15.5px; color: var(--mut); }
.subh { font-size: 26px; margin-top: 24px; scroll-margin-top: 110px; }
.subl { margin-top: -12px; }
table.cmp th[scope="row"] { font-weight: 600; color: var(--head); background: #fff; }
table.cmp th, table.cmp td { width: 22%; }
table.cmp th:first-child { width: 34%; }
table.cmp tr.grp th { background: var(--paper); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mut); font-weight: 650; padding-top: 10px; padding-bottom: 10px; }
table.cmp tr.price td b { font-size: 18px; }
table.cmp td.inc { color: var(--accent-ink); font-weight: 650; }
table.cmp td.inc::before { content: ""; display: inline-block; width: 10px; height: 5px; margin: 0 8px 3px 1px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
table.cmp td.book { color: var(--head); white-space: nowrap; }
table.cmp td.na { color: var(--mut); }
table.cmp td.req { color: var(--mut); }
table.cmp .why { display: block; font-size: 13.5px; font-weight: 400; color: var(--mut); white-space: normal; margin-top: 2px; }
.plan h3 { font-size: 20px; }
.plan .tblwrap { margin-top: 14px; }
.plan .ticks.cols { margin-top: 10px; }
.plan .ticks.cols li:nth-child(-n+2) { border-top: 0; }
table.ptiers th[scope="row"] { font-weight: 600; color: var(--head); }
.banks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bank { padding: 22px; display: flex; flex-direction: column; }
.bank .kind { font-size: 12.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mut); }
.bank h3 { font-size: 18px; margin: 4px 0 6px; }
.bank .meta { font-size: 14px; margin-top: 4px; }
.bank .btn { margin-top: 14px; align-self: flex-start; }
.bnote { margin-top: 14px; }
.bhelp { margin-top: 20px; }
@media (max-width: 1000px) {
  .banks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .tiers { grid-template-columns: 1fr; }
  .prw .tier.feat { order: -1; }
}
@media (max-width: 640px) {
  .prw .tier { padding: 22px; }
  .banks { grid-template-columns: 1fr; }
  .subh { font-size: 22px; }
  table.cmp thead { display: none; }
  table.cmp, table.cmp tbody, table.cmp tr, table.cmp th, table.cmp td { display: block; width: auto; }
  table.cmp tr { padding: 10px 14px 12px; border-top: 1px solid var(--line); }
  table.cmp tr:first-child { border-top: 0; }
  table.cmp th, table.cmp td { border: 0; padding: 2px 0; }
  table.cmp th:first-child { width: auto; padding-bottom: 4px; }
  table.cmp tr.grp { padding: 0; }
  table.cmp tr.grp th { padding: 8px 14px; }
  table.cmp td { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
  table.cmp td > span { text-align: right; }
  table.cmp td::before { content: attr(data-label); color: var(--mut); font-weight: 400; }
  table.cmp td.inc::before { content: attr(data-label); width: auto; height: auto; margin: 0; border: 0; transform: none; }
  table.cmp .why { display: none; }
  table.ptiers thead { display: none; }
  table.ptiers, table.ptiers tbody, table.ptiers tr, table.ptiers th, table.ptiers td { display: block; }
  table.ptiers tr { padding: 10px 14px; border-top: 1px solid var(--line); }
  table.ptiers tr:first-child { border-top: 0; }
  table.ptiers th, table.ptiers td { border: 0; padding: 2px 0; }
  table.ptiers td::before { content: attr(data-label) ": "; color: var(--mut); }
}

/* ---------------------------------------------------------------- Home, owner picks R3 (board site SI1 C, SI2 A, SI3 B, SI5 B)
   Direction A hero (branch site-direction-a): light mint ground, trust line, centred headline, four ticks, ink buttons,
   price line, then the real dashboard as its visual. Everything here is scoped to the home hero (.ha), the shot under it (.hshot) and
   the four step cards (.tline), so no other page changes. */
:root { --hero: #e4f2ea; --hero-2: #f3f9f5; --wash: #e9f2ee; --ink-hover: #24332d; }
.hero.ha { background: radial-gradient(1200px 520px at 50% 100%, var(--hero-2), transparent), var(--hero); color: var(--text); padding: 176px 0 0; text-align: center; overflow: hidden; }
.ha .trust { list-style: none; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; font-size: 14px; font-weight: 600; color: var(--head); background: rgb(255 255 255 / 0.65); border-radius: 999px; padding: 7px 18px; }
.ha .trust li + li::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .35; margin-right: 12px; vertical-align: middle; }
.ha h1 { color: var(--head); font-size: 68px; line-height: 1.04; letter-spacing: -0.03em; max-width: 1000px; margin: 22px auto 0; }
.ha h1 span { color: var(--accent); display: inline; }
.hchecks { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; max-width: 900px; margin: 26px auto 0; font-size: 16px; color: var(--head); }
.hchecks li { display: flex; align-items: center; gap: 8px; }
.hchecks svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.ha .ctas { justify-content: center; }
.ha .btn { border-radius: 999px; min-height: 48px; }
.ha .btn.ink { background: var(--ink); color: #fff; }
.ha .btn.ink:hover { background: var(--ink-hover); }
.ha .btn.outline { background: transparent; color: var(--head); border-color: var(--head); }
.ha .btn.outline:hover { background: rgb(15 26 23 / 0.04); }
.ha .btn span[aria-hidden] { transition: transform .15s ease; }
.ha .btn:hover span[aria-hidden] { transform: translateX(3px); }
.ha .hprice { margin-top: 16px; font-size: 15px; color: var(--mut); }
.ha .hprice strong { color: var(--head); font-size: inherit; font-weight: 650; letter-spacing: 0; margin: 0; }

/* SI2 A: the dashboard is the hero's visual: the mint ground runs on behind the top of the frame and fades out */
.hero.ha { background: var(--hero); padding-bottom: 0; }
.hshot { padding: 44px 0 96px; background: linear-gradient(180deg, var(--hero) 0, var(--hero) 30%, var(--hero-2) 52%, #fff 72%); }
.hshot .frame.big .tb { background: #f4f6f2; border-color: rgb(15 26 23 / 0.08); }
.hshot .frame.big img { border-color: rgb(15 26 23 / 0.08); box-shadow: 0 30px 80px rgb(15 26 23 / 0.16), 0 6px 18px rgb(15 26 23 / 0.06); }
.hshot .frame.big figcaption { margin-top: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .hshot .frame.big { animation: hshot-in .6s cubic-bezier(.2, .7, .2, 1) both .1s; }
  @keyframes hshot-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
.frame .tb span { margin-left: 14px; padding: 2px 10px; background: #fff; border-radius: 6px; font: 500 12.5px var(--mono); color: var(--mut); }
.frame.big figcaption { text-align: center; }

/* SI3 B: four step cards with a time pill (times from process.json phases) */
.tline { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tline .card { border-radius: 22px; padding: 28px; }
.tline .n { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-content: center; font-weight: 700; margin-bottom: 18px; }
.tline h3 { font-size: 20px; }
.tline .when { display: inline-block; margin: 10px 0; font-size: 13px; font-weight: 650; color: var(--accent-ink); background: var(--wash); border-radius: 999px; padding: 3px 11px; }
.tline p:not(.when) { font-size: 15px; color: var(--mut); }
#before-you-ask .obj + .prose.after a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 1000px) {
  .tline { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .ha h1 { font-size: 52px; }
}
@media (max-width: 640px) {
  .hero.ha { padding: 116px 0 0; }
  .ha h1 { font-size: 40px; }
  .ha .trust { flex-direction: column; font-size: 13px; border-radius: 16px; padding: 8px 16px; }
  .ha .trust li + li::before { display: none; }
  .hchecks { flex-direction: column; align-items: flex-start; text-align: left; font-size: 15px; gap: 8px; }
  .ha .hprice { font-size: 14px; }
  .hshot { padding: 32px 0 56px; background: linear-gradient(180deg, var(--hero) 0, var(--hero) 22%, var(--hero-2) 40%, #fff 60%); }
  .frame .tb span { display: none; }
  .tline { grid-template-columns: minmax(0, 1fr); }
  .tline .card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .ha .btn:hover span[aria-hidden] { transform: none; } }

/* SI4: the tiers as cards on home, the featured one highlighted */
.tiers3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.tiers3 .tier { display: flex; flex-direction: column; border-radius: 22px; padding: 28px; position: relative; }
.tiers3 .tier.feat { border: 2px solid var(--accent); box-shadow: 0 20px 44px rgb(15 26 23 / 0.10); }
.tiers3 .badge { position: absolute; top: -13px; left: 26px; font-size: 12.5px; font-weight: 650; color: #fff; background: var(--accent); border-radius: 999px; padding: 3px 12px; }
.tiers3 h3 { font-size: 20px; }
.tiers3 .tp { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--head); line-height: 1.15; margin-top: 8px; }
.tiers3 .tp span { font-size: 14.5px; font-weight: 400; color: var(--mut); letter-spacing: 0; }
.tiers3 .tl { font-size: 15.5px; color: var(--text); margin-top: 8px; }
.tiers3 .tt { font-size: 14px; color: var(--mut); margin-top: 4px; }
.tiers3 .ticks { margin: 14px 0 22px; }
.tiers3 .ticks li { font-size: 15px; }
.tiers3 .btn { margin-top: auto; width: 100%; }
.tiers3 + .prose.after a { display: inline-flex; align-items: center; min-height: 44px; }

/* SI6 B: us and a typical law firm, our column highlighted */
.tblwrap.vs table { font-size: 16px; }
.tblwrap.vs th, .tblwrap.vs td { padding: 16px 20px; }
.tblwrap.vs thead td { background: var(--paper); border-top: 0; }
.tblwrap.vs tbody th { font-weight: 650; color: var(--head); width: 26%; }
.tblwrap.vs .us { background: var(--wash); color: var(--head); font-weight: 650; }
.tblwrap.vs thead th.us { color: var(--accent-ink); font-size: 16px; }
.tblwrap.vs td:first-child { font-weight: inherit; }
.tblwrap.vs + .prose.after p { font-size: 14px; color: var(--mut); }

@media (max-width: 1000px) {
  .tiers3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tiers3 .tier { padding: 22px; }
  .tblwrap.vs thead { display: none; }
  .tblwrap.vs table, .tblwrap.vs tbody, .tblwrap.vs tr, .tblwrap.vs th, .tblwrap.vs td { display: block; width: auto; }
  .tblwrap.vs tr { padding: 14px 16px; border-top: 1px solid var(--line); }
  .tblwrap.vs tr:first-child { border-top: 0; }
  .tblwrap.vs th, .tblwrap.vs td { border: 0; padding: 4px 0; }
  .tblwrap.vs tbody th { margin-bottom: 4px; width: auto; }
  .tblwrap.vs td::before { content: attr(data-label) ": "; color: var(--mut); font-weight: 400; }
  .tblwrap.vs td.us { background: none; }
}

/* SI10 A on home: the price bar waits for the hero CTA to leave the screen (site.js adds .on) */
@media (max-width: 860px) {
  .has-mbb .mbb.gated { transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  .has-mbb .mbb.gated.on { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
}
@media (prefers-reduced-motion: reduce) { .has-mbb .mbb.gated, .has-mbb .mbb.gated.on { transition: none; } }

/* Home "Before you ask" as a foldable list (owner R3): same accordion as /faq; the link under it is a 44 px target */
#before-you-ask .faq + .prose.after a { display: inline-flex; align-items: center; min-height: 44px; }

/* Footer (design-site-10 B): four columns, 2-up link groups on a phone, 44 px link rows */
footer { border-top: 0; }
footer .cols { padding: 64px 0 48px; align-items: start; }
footer .cols > div:first-child { max-width: 420px; padding-right: 16px; }
footer .cols > div:first-child .disc, footer .cols > div:first-child p { max-width: 380px; }
footer .cols > div:first-child .brand { margin: 0 0 16px; }
footer .op1, footer .disc { font-size: 14px; line-height: 1.6; color: rgb(255 255 255 / 0.72); max-width: none; }
footer .disc { margin-top: 8px; }
footer .dflt { display: inline; margin: 0; padding: 0; border: 0; border-bottom: 1px dashed rgb(255 255 255 / 0.5); border-radius: 0; background: none; color: rgb(255 255 255 / 0.85); font: inherit; white-space: normal; }
footer ul a { display: inline-block; padding: 3px 0; }
footer .legal { color: rgb(255 255 255 / 0.62); }
@media (max-width: 860px) {
  .endcta .ebox { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  footer .cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding: 48px 0 32px; }
  footer .cols > div:first-child { grid-column: 1 / -1; }
  footer ul a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  footer .legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Mobile price bar: steps aside when the end box or the footer is on screen (site.js .off); footer never covered */
@media (max-width: 860px) {
  .has-mbb footer { padding-bottom: calc(var(--mbb-h, 70px) + 16px + env(safe-area-inset-bottom)); }
  .has-mbb .mbb.off { transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
}
@media (prefers-reduced-motion: reduce) { .has-mbb .mbb.off { transition: none; } }

/* SI11 B, phones (< 768 px): headline, one line, one button, short price + pricing link, then the desktop dashboard;
   the trust line and ticks follow under the picture. Desktop is unchanged (.mline, .mlink, .ph-after hidden). */
.mline, .mlink, .ph-after { display: none; }
@media (max-width: 767px) {
  .ha .dk, .ha .btn.outline { display: none; }
  .hero.ha { padding-top: 108px; }
  .ha h1 { margin-top: 0; }
  .mline { display: block; margin: 14px auto 0; max-width: 34ch; font-size: 17px; line-height: 1.5; color: var(--text); }
  .ha .ctas { margin-top: 22px; }
  .ha .hprice { margin-top: 12px; font-size: 15px; }
  .mlink { display: block; }
  .mlink a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--accent-ink); }
  .hshot { padding-top: 8px; }
  .ph-after { display: block; margin-top: 28px; text-align: center; }
  .ph-after .trust { list-style: none; display: inline-flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--head); background: rgb(255 255 255 / 0.7); border-radius: 16px; padding: 8px 16px; }
  .ph-after .hchecks { margin-top: 18px; }
}

/* ---------------------------------------------------------------- Guilloche (board patterns/guilloche; owner picks: waves, net FAV, ribbon FAV)
   Engraved line tiles from make_guilloche.py (board folder), tonal mixes of the brand colours. Backgrounds only, no box changes.
   Waves = two layers that draw the same rope field: waves-base (240x8, plain lines, repeats everywhere) and waves-lens
   (1200x640, transparent except two lens windows where the lines part around an outlined "Orisma"). Centred, the lenses sit
   +-600 px from the middle at rows 140 and 460: clear of the header pill, the headline, the ticks, the buttons and the price.
   Worst case text on a solid line: body 9.5, muted 4.51; the radial clearing keeps the text column quieter still. */
.hero.ha {
  background: linear-gradient(180deg, rgb(228 242 234 / 0) calc(100% - 220px), var(--hero)),
              radial-gradient(860px 440px at 50% 55%, rgb(228 242 234 / 0.8), rgb(228 242 234 / 0.5) 60%, rgb(228 242 234 / 0) 100%),
              url(/img/patterns/waves-lens-light.svg) 50% 0 / 1200px 640px repeat,
              url(/img/patterns/waves-base-light.svg) 50% 0 / 240px 8px repeat, var(--hero);
}

/* Page heads (dark .phero; the dense FAQ/legal/guide heads are pat-mark's): the plain waves in the dark colourway at low
   strength under an ink veil, plus one lens on the far right (+600 px from the centre, row 140), away from the h1 */
.phero:not(.dense) {
  background: linear-gradient(90deg, rgb(15 26 23 / 0.82) 0, rgb(15 26 23 / 0.62) 55%, rgb(15 26 23 / 0.3) 100%),
              url(/img/patterns/waves-lens1-dark.svg) calc(50% + 600px) 25px / 300px 230px no-repeat,
              url(/img/patterns/waves-base-dark.svg) 50% 0 / 240px 8px repeat, var(--ink);
}

/* Footer: plain dark body; the ribbon (ORISMA and the mark on an engraved wave) as one thin strip in its top padding */
footer { position: relative; }
footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 64px; pointer-events: none;
  background: url(/img/patterns/ribbon-dark.svg) 50% -88px / 600px 240px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
@media (max-width: 640px) {
  footer::before { height: 46px; background-position: 50% -66px; background-size: 450px 180px; }
}

/* The featured tier (home .tiers3, /pricing .prw): security net with ORISMA microprint in the card head, fading to white
   before the tick list. Worst case muted text on a solid line under the 0.35 veil: 4.63. */
.tiers3 .tier.feat, .prw .tier.feat {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.35) 0, rgb(255 255 255 / 0.6) 110px, #fff 230px),
              url(/img/patterns/net-light.svg) 0 0 / 240px 120px repeat, #fff;
}

/* ---------------------------------------------------------------- pat-mark (board patterns/mark, owner favourites 2026-11-01)
   Tiles in /img/mark/, built by make_patterns.py in the board folder. Backgrounds only, no box changes.
   End box: the embossed mark field, very subtle, calmer behind the text column. Contrast: body text 9.7, muted 4.6 worst case. */
.endcta .ebox { background: linear-gradient(90deg, rgb(245 244 239 / 0.7), rgb(245 244 239 / 0.35) 55%, rgb(245 244 239 / 0)),
                            url(/img/mark/emboss-light.svg) 50% 50% / 264px 264px repeat, var(--paper); }
/* Dense pages (FAQ, legal, guides: .phero.dense from build.py): the dot-and-stroke grid behind the h1 band, held at 35%
   behind the text column so the rare mint marks never sit at full strength under the crumbs. Replaces the rosette there. */
.phero.dense { background: var(--ink); position: relative; isolation: isolate; }
.phero.dense::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url(/img/mark/dotgrid-dark.svg) 50% 0 / 360px 360px repeat;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .35) calc(50% + 260px), #000 calc(50% + 460px));
          mask-image: linear-gradient(90deg, rgb(0 0 0 / .35) calc(50% + 260px), #000 calc(50% + 460px)); }
/* ---------------------------------------------------------------- end pat-mark */

/* Footer: start in your AI (owner 11-01) */
footer .aistart { margin-top: 22px; }
footer .aih { font-size: 14px; font-weight: 650; color: #fff; margin-bottom: 10px; }
footer .aibs { display: flex; flex-wrap: wrap; gap: 6px; }
footer a.aib { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.18); color: #fff; font-size: 14px; font-weight: 550; text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease; }
footer a.aib svg { width: 16px; height: 16px; flex: none; }
footer a.aib:hover { border-color: var(--mint); background: rgb(255 255 255 / 0.05); text-decoration: none; }
footer a.aib:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
footer a.aimore { display: inline-block; margin-top: 10px; font-size: 13.5px; text-decoration: underline; text-underline-offset: 2px; }

/* Footer: payment methods on the bottom line (owner 11-01) */
footer .legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
footer .pays { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
footer .pays li { display: grid; place-items: center; width: 48px; height: 30px; border-radius: 6px;
  border: 1px solid rgb(255 255 255 / 0.16); color: rgb(255 255 255 / 0.8); }
footer .pays svg { width: 22px; height: 22px; }
footer .pays li { overflow: hidden; }
footer .pays li.w svg { width: 34px; height: 34px; }

/* Step screenshots in guides (AI setup) */
figure.shot { margin: 8px 0 22px; }
figure.shot img { display: block; width: auto; max-width: min(100%, 640px); max-height: 640px; object-fit: contain; height: auto; border: 1px solid var(--line, #e3e4df); border-radius: 12px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); }
figure.shot figcaption { margin-top: 8px; font-size: 14px; color: var(--muted, #5b6560); }
main code, .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: rgb(15 26 23 / 0.06); border-radius: 5px; padding: 1px 6px; overflow-wrap: anywhere; }

/* Dashboard blocks: 'flip' sections put the screenshot on the left (alternating rhythm on long pages) */
.wrap.dash.flip { grid-template-columns: minmax(0, 1fr) 340px; }
.wrap.dash.flip > figure { order: -1; }
@media (max-width: 860px) { .wrap.dash.flip { grid-template-columns: 1fr; } .wrap.dash.flip > figure { order: 0; } }

/* Process demo (owner 11-01, Atlas-style): steps left, animated start form + company card right.
   .pd[data-s] = scene 0..9; 9 = finished state (no JS, reduced motion). */
.pd { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.pd-steps { list-style: none; display: grid; gap: 6px; }
.pd-steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 16px; padding: 16px 18px; border-radius: var(--r-card);
  border: 1px solid transparent; transition: background-color .35s ease, border-color .35s ease, opacity .35s ease; opacity: .55; }
.pd-steps li.on { background: #fff; border-color: var(--line); opacity: 1; box-shadow: 0 6px 18px rgb(15 26 23 / .06); }
.pd[data-s="9"] .pd-steps li { opacity: 1; }
.pd-steps .n { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-content: center; font-weight: 700; }
.pd-steps h3 { font-size: 19px; }
.pd-steps .when { display: inline-block; margin: 6px 0; font-size: 13px; font-weight: 650; color: var(--accent-ink); background: var(--wash, #e6f2ec); border-radius: 999px; padding: 2px 10px; }
.pd-steps p:not(.when) { font-size: 15px; color: var(--mut); }

.pd-stage { position: relative; min-height: 520px; }
.pd-a, .pd-b { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgb(15 26 23 / .12); }
.pd-a { left: 0; top: 56px; width: 70%; padding: 26px 26px 24px; }
.pd-a h4 { font-size: 22px; margin-bottom: 14px; color: var(--head); }
.pd-a label { display: block; font-size: 13px; font-weight: 650; color: var(--head); margin: 12px 0 6px; }
.pd-a .fld { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: 15px; }
.pd-a .fld em { font-style: normal; color: var(--mut); }
.pd-a .ty::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--head); animation: pdcar 1s steps(1) infinite; }
.pd[data-s="9"] .ty::after { display: none; }
@keyframes pdcar { 50% { opacity: 0; } }
.pd-a .own { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-a .own span { font-size: 13.5px; padding: 6px 10px; border-radius: 999px; background: var(--paper); transition: opacity .3s ease, transform .3s ease; }
.pd-a .own b { color: var(--accent-ink); }
.pd-a .pk { display: grid; gap: 6px; }
.pd-a .opt { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); transition: border-color .3s ease, box-shadow .3s ease; }
.pd-a .opt i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #b9c0bb; flex: none; transition: border .3s ease; }
.pd-a .opt div { display: flex; justify-content: space-between; flex: 1; font-size: 14px; }
.pd-a .opt span { color: var(--mut); }
.pd[data-s] .opt.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(31 122 87 / .12); }
.pd[data-s] .opt.on i { border: 5px solid var(--accent); }
.pd-a .btn { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 650; font-size: 15px; transition: transform .15s ease; }
.pd-a .sp { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .4); border-top-color: #fff; animation: pdspin .8s linear infinite; }
.pd-a .l2 { display: none; }
@keyframes pdspin { to { transform: rotate(360deg); } }
.pd-b { right: 0; top: 0; width: 56%; min-width: 300px; padding: 18px; }
.pd-b .hd { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.pd-b .lg { width: 40px; height: 40px; border-radius: 10px; background: var(--ink); position: relative; flex: none; }
.pd-b .lg::after { content: ""; position: absolute; inset: 11px 12px; border: 2px solid var(--mint); border-left-width: 4px; border-radius: 2px; }
.pd-b .hd b { display: block; font-size: 15px; color: var(--head); }
.pd-b .hd span { font-size: 13px; color: var(--mut); }
.pd-b .r { display: flex; justify-content: space-between; gap: 10px; white-space: nowrap; padding: 10px 12px; font-size: 14px; border-top: 1px solid var(--line); background: #fafaf7; }
.pd-b .r:first-of-type { border-radius: 10px 10px 0 0; }
.pd-b .r:last-child { border-radius: 0 0 10px 10px; }
.pd-b .r b { font-weight: 600; color: var(--head); transition: opacity .35s ease; }
.pd-b .r b::before { content: "\2713"; color: var(--accent); margin-right: 6px; }
.pd-note { position: absolute; left: 0; bottom: -30px; font-size: 13px; color: var(--mut); }
.cur { position: absolute; width: 22px; height: 22px; left: 62%; top: 92%; opacity: 0; pointer-events: none; transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.6L16 20l-3 1.4-3.6-7.5L4 18z' fill='%230f1a17' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E"); }

/* Scenes: hidden until their scene number (JS sets data-s 0..8, then holds; 9 = everything shown) */
.pd[data-s="0"] .own span, .pd[data-s="1"] .own span { opacity: 0; transform: translateY(4px); }
.pd[data-s="0"] .opt.on, .pd[data-s="1"] .opt.on, .pd[data-s="2"] .opt.on { border-color: var(--line); box-shadow: none; }
.pd[data-s="0"] .opt.on i, .pd[data-s="1"] .opt.on i, .pd[data-s="2"] .opt.on i { border: 1.5px solid #b9c0bb; }
.pd[data-s="3"] .cur, .pd[data-s="4"] .cur { opacity: 1; left: 16%; top: 93%; }
.pd[data-s="2"] .cur { opacity: 1; left: 55%; top: 60%; }
.pd[data-s="4"] .btn { transform: scale(.97); }
.pd[data-s="4"] .sp, .pd[data-s="5"] .sp, .pd[data-s="6"] .sp, .pd[data-s="7"] .sp { display: inline-block; }
.pd[data-s="4"] .l1, .pd[data-s="5"] .l1, .pd[data-s="6"] .l1, .pd[data-s="7"] .l1 { display: none; }
.pd[data-s="4"] .l2, .pd[data-s="5"] .l2, .pd[data-s="6"] .l2, .pd[data-s="7"] .l2 { display: inline; }
.pd-b { transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.pd[data-s="0"] .pd-b, .pd[data-s="1"] .pd-b, .pd[data-s="2"] .pd-b, .pd[data-s="3"] .pd-b, .pd[data-s="4"] .pd-b { opacity: 0; transform: translateY(14px); }
.pd[data-s="5"] .r[data-at="3"] b, .pd[data-s="5"] .r[data-at="4"] b,
.pd[data-s="6"] .r[data-at="4"] b,
.pd[data-s="0"] .r b, .pd[data-s="1"] .r b, .pd[data-s="2"] .r b, .pd[data-s="3"] .r b, .pd[data-s="4"] .r b { opacity: 0; }

@media (max-width: 860px) {
  .pd { grid-template-columns: 1fr; gap: 28px; }
  .pd-steps li { opacity: 1; }
  .pd-stage { min-height: 0; display: flex; flex-direction: column; padding-bottom: 30px; }
  .pd-a, .pd-b { position: relative; left: auto; right: auto; top: auto; width: auto; min-width: 0; }
  .pd-a { margin-right: 28px; }
  .pd-b { margin: -12px 0 0 28px; }
  .cur { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pd *, .pd-b, .cur { transition: none !important; animation: none !important; } }