/* ==========================================================================
   OPDkit landing page: Apple-inspired, single typeface (Inter).
   Hierarchy comes from size and weight only (800/700/600/500/400).
   Brand #ea3c65 is used sparingly; interactive pink is #d12a54 (WCAG AA).
   ========================================================================== */

/* Inter, self-hosted (SIL Open Font License 1.1, https://rsms.me/inter/).
   Variable font: weights 300–800 plus optical sizing in one file per subset.
   latin-ext includes the ₹ sign (U+20B9). */
@font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 300 800;
   font-display: swap;
   src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 300 800;
   font-display: swap;
   src: url("assets/fonts/inter-latin.woff2") format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Indian scripts for the language pages (Noto Sans, SIL Open Font License, self-hosted).
   unicode-range means each file downloads only on pages that use that script. */
@font-face {
   font-family: "OPD Indic";
   font-style: normal;
   font-weight: 300 800;
   font-display: swap;
   src: url("assets/fonts/noto-sans-devanagari.woff2") format("woff2");
   unicode-range: U+0900-097F, U+1CD0-1CFF, U+A8E0-A8FF, U+200C-200D, U+20B9, U+25CC;
}

@font-face {
   font-family: "OPD Indic";
   font-style: normal;
   font-weight: 300 800;
   font-display: swap;
   src: url("assets/fonts/noto-sans-bengali.woff2") format("woff2");
   unicode-range: U+0980-09FF, U+200C-200D, U+25CC;
}

@font-face {
   font-family: "OPD Indic";
   font-style: normal;
   font-weight: 300 800;
   font-display: swap;
   src: url("assets/fonts/noto-sans-gurmukhi.woff2") format("woff2");
   unicode-range: U+0A00-0A7F, U+200C-200D, U+25CC;
}

@font-face {
   font-family: "OPD Indic";
   font-style: normal;
   font-weight: 300 800;
   font-display: swap;
   src: url("assets/fonts/noto-sans-gujarati.woff2") format("woff2");
   unicode-range: U+0A80-0AFF, U+200C-200D, U+25CC;
}

@font-face {
   font-family: "OPD Indic";
   font-style: normal;
   font-weight: 300 800;
   font-display: swap;
   src: url("assets/fonts/noto-sans-oriya.woff2") format("woff2");
   unicode-range: U+0B00-0B7F, U+200C-200D, U+25CC;
}

@font-face {
   font-family: "OPD Indic";
   font-style: normal;
   font-weight: 300 800;
   font-display: swap;
   src: url("assets/fonts/noto-sans-tamil.woff2") format("woff2");
   unicode-range: U+0B80-0BFF, U+200C-200D, U+25CC;
}

@font-face {
   font-family: "OPD Indic";
   font-style: normal;
   font-weight: 300 800;
   font-display: swap;
   src: url("assets/fonts/noto-sans-telugu.woff2") format("woff2");
   unicode-range: U+0C00-0C7F, U+200C-200D, U+25CC;
}

@font-face {
   font-family: "OPD Indic";
   font-style: normal;
   font-weight: 300 800;
   font-display: swap;
   src: url("assets/fonts/noto-sans-kannada.woff2") format("woff2");
   unicode-range: U+0C80-0CFF, U+200C-200D, U+25CC;
}

@font-face {
   font-family: "OPD Indic";
   font-style: normal;
   font-weight: 300 800;
   font-display: swap;
   src: url("assets/fonts/noto-sans-malayalam.woff2") format("woff2");
   unicode-range: U+0D00-0D7F, U+200C-200D, U+25CC;
}

:root {
   --text: #1d1d1f;
   --text-2: #6e6e73;
   --text-3: #707074; /* was #86868b (3.3–3.6:1, failed WCAG AA); now ≥4.5:1 on #fff and #f5f5f7 */
   --bg: #ffffff;
   --bg-alt: #f5f5f7;
   --line: #d2d2d7;
   --line-soft: #e8e8ed;

   --brand: #ea3c65;
   --accent: #d12a54;
   --accent-hover: #b8214a;
   --accent-soft: #fdeef2;

   --ok: #1a7f4b;
   --ok-soft: #e7f5ed;
   --warn: #b25000;
   --warn-soft: #fff1e0;

   --font: "Inter", "OPD Indic", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
   --container: 1120px;
   --nav-h: 52px;
   --r: 18px;
   --r-lg: 28px;
}

*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: calc(var(--nav-h) + 16px);
   -webkit-text-size-adjust: 100%;
}

body {
   margin: 0;
   background: var(--bg);
   color: var(--text);
   font-family: var(--font);
   font-size: 17px;
   line-height: 1.47;
   font-weight: 400;
   font-optical-sizing: auto;
   letter-spacing: -0.011em;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

a {
   color: var(--accent);
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
   text-underline-offset: 3px;
}

h1,
h2,
h3,
p {
   margin: 0;
}

h1 {
   font-size: clamp(48px, 8.4vw, 96px);
   font-weight: 700;
   line-height: 1.04;
   letter-spacing: -0.045em;
}

h2 {
   font-size: clamp(36px, 5.4vw, 64px);
   font-weight: 700;
   line-height: 1.06;
   letter-spacing: -0.04em;
}

h3 {
   font-size: 21px;
   font-weight: 600;
   line-height: 1.24;
   letter-spacing: -0.02em;
}

:focus-visible {
   outline: 3px solid rgb(209 42 84 / .45);
   outline-offset: 2px;
   border-radius: 8px;
}

.container {
   width: 100%;
   max-width: var(--container);
   margin: 0 auto;
   padding: 0 22px;
}

.narrow {
   max-width: 820px;
}

.center {
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

.hp {
   position: absolute !important;
   left: -9999px !important;
   width: 1px;
   height: 1px;
   opacity: 0;
}

.skip {
   position: absolute;
   left: 12px;
   top: -48px;
   background: var(--text);
   color: #fff;
   padding: 8px 14px;
   border-radius: 8px;
   z-index: 100;
}

.skip:focus {
   top: 8px;
}

.i {
   width: 20px;
   height: 20px;
   flex: none;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.75;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.eyebrow {
   font-size: 21px;
   font-weight: 600;
   letter-spacing: -0.015em;
   color: var(--accent);
   margin-bottom: 10px;
}

.lead {
   font-size: clamp(19px, 2vw, 24px);
   line-height: 1.38;
   font-weight: 400;
   color: var(--text-2);
   letter-spacing: -0.02em;
   margin-top: 20px;
}

.fine {
   font-size: 13px;
   color: var(--text-3);
   margin-top: 24px;
   letter-spacing: -0.005em;
}

/* ---------- Pill buttons ---------- */
.pill {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   font: 500 17px/1 var(--font);
   letter-spacing: -0.015em;
   color: #fff;
   background: var(--accent);
   border: 0;
   border-radius: 980px;
   padding: 13px 24px;
   min-height: 46px;
   cursor: pointer;
   white-space: nowrap;
   transition: background .2s;
}

.pill:hover {
   background: var(--accent-hover);
   color: #fff;
   text-decoration: none;
}

.pill--sm {
   font-size: 13px;
   padding: 6px 14px;
   min-height: 30px;
   font-weight: 500;
}

.pill--lg {
   font-size: 18px;
   padding: 16px 30px;
   min-height: 54px;
}

.pill--block {
   width: 100%;
}

.pill--ghost {
   background: transparent;
   color: var(--accent);
   box-shadow: inset 0 0 0 1.5px var(--accent);
}

.pill--ghost:hover {
   background: var(--accent);
   color: #fff;
}

.pill[disabled] {
   opacity: .6;
   cursor: progress;
}

.link {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   font-size: 18px;
   font-weight: 400;
}

.link .i {
   width: 16px;
   height: 16px;
   stroke-width: 2.2;
}

.logo-text {
   font-weight: 600;
}

/* ---------- Nav ---------- */
.nav {
   position: sticky;
   top: 0;
   z-index: 50;
   height: var(--nav-h);
   background: rgb(255 255 255 / .8);
   backdrop-filter: saturate(180%) blur(20px);
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   border-bottom: 1px solid transparent;
   transition: border-color .3s;
}

.nav.is-scrolled {
   border-bottom-color: rgb(0 0 0 / .08);
}

.nav__inner {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
}

.brand {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--text);
   font-size: 19px;
   font-weight: 700;
   letter-spacing: -0.03em;
}

.brand:hover {
   text-decoration: none;
   color: var(--text);
}

.nav__links {
   display: flex;
   gap: 28px;
}

.nav__links a {
   color: var(--text);
   opacity: .8;
   font-size: 13px;
   font-weight: 400;
   letter-spacing: -0.01em;
}

.nav__links a:hover {
   opacity: 1;
   text-decoration: none;
}

.nav__cta {
   display: flex;
   align-items: center;
   gap: 6px;
}

.nav__toggle {
   display: none;
   background: none;
   border: 0;
   width: 40px;
   height: 40px;
   align-items: center;
   justify-content: center;
   color: var(--text);
   cursor: pointer;
}

/* ---------- Sections ---------- */
.section {
   padding: clamp(88px, 11vw, 140px) 0;
}

.section--alt {
   background: var(--bg-alt);
}

.section--dark {
   background: #000;
   color: #f5f5f7;
}

/* ---------- Hero ---------- */
.hero {
   padding: clamp(56px, 8vw, 104px) 0 clamp(72px, 9vw, 120px);
   overflow: hidden;
}

.hero .eyebrow {
   font-size: clamp(21px, 2.4vw, 28px);
}

.hero__sub {
   font-size: clamp(20px, 2.3vw, 28px);
   line-height: 1.3;
   font-weight: 400;
   letter-spacing: -0.025em;
   color: var(--text-2);
   margin: 26px auto 0;
   max-width: 700px;
}

.capture {
   margin: 40px auto 0;
   max-width: 480px;
}

.capture__row {
   display: flex;
   gap: 6px;
   padding: 5px;
   background: var(--bg-alt);
   border-radius: 980px;
   border: 1px solid var(--line-soft);
   transition: box-shadow .2s, background .2s;
}

.capture__row:focus-within {
   background: #fff;
   box-shadow: 0 0 0 4px rgb(209 42 84 / .15);
   border-color: var(--accent);
}

.capture input[type=email] {
   flex: 1;
   min-width: 0;
   border: 0;
   outline: 0;
   background: transparent;
   font: 400 17px var(--font);
   color: var(--text);
   padding: 0 18px;
   letter-spacing: -0.015em;
}

.capture input::placeholder {
   color: var(--text-3);
}

.hero__fine {
   font-size: 14px;
   color: var(--text-3);
   margin-top: 16px;
}

.caption {
   text-align: center;
   font-size: 13px;
   color: var(--text-3);
   margin-top: 22px;
}

.form-msg {
   font-size: 15px;
   margin-top: 14px;
}

.form-msg:empty {
   display: none;
}

.form-msg.is-ok {
   color: var(--ok);
   font-weight: 500;
}

.form-msg.is-err {
   color: #c4291c;
   font-weight: 500;
}

/* ---------- Device + product UI ---------- */
.device {
   margin: 72px auto 0;
   max-width: 1040px;
}

.device__screen {
   background: #fff;
   border: 1px solid var(--line-soft);
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 28px 56px -28px rgb(0 0 0 / .22);
}

/* The UI sits flush inside the card, under the title bar */
.device__screen .ui {
   border-radius: 0;
}

.ui {
   display: grid;
   grid-template-columns: 176px 1fr 236px;
   background: #fff;
   border-radius: 10px 10px 0 0;
   overflow: hidden;
   font-size: 13px;
   letter-spacing: -0.01em;
   min-height: 430px;
   text-align: left;
}

.ui__side {
   background: #fbfbfd;
   border-right: 1px solid var(--line-soft);
   padding: 16px 10px;
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.ui__logo {
   display: flex;
   align-items: center;
   gap: 7px;
   font-weight: 600;
   font-size: 14px;
   padding: 0 8px 14px;
}

.ui__side span {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 8px;
   border-radius: 8px;
   color: var(--text-2);
   font-weight: 500;
}

.ui__side .i {
   width: 16px;
   height: 16px;
}

.ui__side .is-active {
   background: var(--accent-soft);
   color: var(--accent);
}

.ui__main {
   padding: 16px 20px;
   min-width: 0;
}

.ui__top {
   display: flex;
   gap: 10px;
   align-items: center;
}

.ui__search {
   flex: 1;
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--bg-alt);
   border-radius: 9px;
   padding: 8px 12px;
   color: var(--text-3);
   white-space: nowrap;
   overflow: hidden;
}

.ui__search .i {
   width: 15px;
   height: 15px;
}

.ui__btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   background: var(--accent);
   color: #fff;
   font-weight: 500;
   border-radius: 9px;
   padding: 8px 12px;
   white-space: nowrap;
}

.ui__btn .i {
   width: 14px;
   height: 14px;
   stroke-width: 2.2;
}

.ui__btn--ghost {
   background: var(--bg-alt);
   color: var(--text);
}

.ui__btn--block {
   display: flex;
   width: 100%;
   margin-top: 8px;
}

.ui__head {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin: 22px 0 14px;
   gap: 12px;
}

.ui__title {
   font-size: 24px;
   font-weight: 700;
   letter-spacing: -0.03em;
}

.ui__date {
   color: var(--text-3);
   font-size: 12.5px;
}

.ui__stats {
   display: flex;
   gap: 14px;
   color: var(--text-2);
   font-size: 12.5px;
   white-space: nowrap;
}

.ui__stats b {
   color: var(--text);
   font-weight: 600;
}

.ui__queue {
   list-style: none;
   margin: 0;
   padding: 0;
   border-top: 1px solid var(--line-soft);
}

.ui__queue li {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 8px;
   border-bottom: 1px solid var(--line-soft);
}

.ui__queue li.is-sel {
   background: var(--bg-alt);
   border-radius: 10px;
   border-bottom-color: transparent;
}

.ui__queue li.is-dim {
   opacity: .5;
}

.tok {
   width: 34px;
   text-align: center;
   font-weight: 700;
   font-size: 14px;
   font-variant-numeric: tabular-nums;
   color: var(--text);
   background: var(--bg-alt);
   border-radius: 7px;
   padding: 4px 0;
}

.is-sel .tok {
   background: #fff;
}

.tok--live,
.is-sel .tok--live {
   background: var(--accent);
   color: #fff;
}

.who {
   flex: 1;
   min-width: 0;
   font-weight: 600;
   display: flex;
   flex-direction: column;
   line-height: 1.3;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.who small {
   font-weight: 400;
   color: var(--text-3);
   font-size: 12px;
}

.st {
   font-size: 12px;
   font-weight: 500;
   color: var(--text-2);
   white-space: nowrap;
}

.st--live {
   color: var(--accent);
}

.st--ok {
   color: var(--ok);
}

.st--done {
   color: var(--text-3);
}

.ui__panel {
   border-left: 1px solid var(--line-soft);
   padding: 22px 18px;
   background: #fff;
}

.ui__avatar {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: var(--accent-soft);
   color: var(--accent);
   display: grid;
   place-items: center;
   font-weight: 600;
   font-size: 17px;
   margin-bottom: 12px;
}

.ui__name {
   font-size: 17px;
   font-weight: 600;
   letter-spacing: -0.02em;
}

.ui__meta {
   color: var(--text-3);
   font-size: 12.5px;
   margin-bottom: 14px;
}

.ui__field {
   padding: 10px 0;
   border-top: 1px solid var(--line-soft);
   display: flex;
   flex-direction: column;
   gap: 3px;
   font-size: 13px;
}

.ui__field small {
   color: var(--text-3);
   font-size: 11.5px;
}

.tag-warn {
   align-self: flex-start;
   background: var(--warn-soft);
   color: var(--warn);
   font-weight: 600;
   font-size: 12px;
   padding: 2px 8px;
   border-radius: 6px;
}











/* ---------- Flow cards ---------- */
.flow {
   list-style: none;
   margin: 72px 0 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 16px;
}

.card {
   background: var(--bg-alt);
   border-radius: var(--r);
   padding: 24px 20px;
   display: flex;
   flex-direction: column;
}

.card__step {
   font-size: 12px;
   font-weight: 600;
   color: var(--text-3);
   text-transform: uppercase;
   letter-spacing: .04em;
   margin-bottom: 8px;
}

.card h3 {
   font-size: 19px;
   margin-bottom: 18px;
}

.card>p:last-child {
   font-size: 14.5px;
   color: var(--text-2);
   margin-top: 18px;
}

.mini {
   background: #fff;
   border-radius: 14px;
   padding: 14px;
   font-size: 12.5px;
   min-height: 176px;
   box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}

.mf {
   border-bottom: 1px solid var(--line-soft);
   padding: 6px 0 8px;
   display: flex;
   flex-direction: column;
}

.mf small {
   font-size: 11px;
   color: var(--text-3);
}

.mf__val {
   font-weight: 600;
   font-size: 13.5px;
   display: inline-flex;
   align-items: center;
}

.mf--opt span {
   color: var(--text-3);
}

.caret {
   display: inline-block;
   width: 1.5px;
   height: 15px;
   background: var(--accent);
   margin-left: 2px;
   animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
   50% {
      opacity: 0;
   }
}

.mini__btn {
   display: block;
   text-align: center;
   margin-top: 12px;
   background: var(--accent);
   color: #fff;
   border-radius: 8px;
   padding: 7px;
   font-weight: 600;
}

.mini--token {
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.tk__label {
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--text-3);
}

.tk__num {
   font-size: 64px;
   font-weight: 800;
   letter-spacing: -0.05em;
   line-height: 1;
   color: var(--accent);
   margin: 4px 0 6px;
}

.tk__who {
   font-weight: 600;
   font-size: 14px;
}

.tk__meta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   color: var(--ok);
   font-size: 12px;
   margin-top: 4px;
}

.tk__meta .i {
   width: 13px;
   height: 13px;
}

/* Follow-up card: a date is wider than a token number */
.mini--fu .tk__num {
   font-size: 40px;
   margin: 10px 0 8px;
}

.mini--vitals {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
   align-content: start;
}

.mini--vitals>div {
   background: var(--bg-alt);
   border-radius: 9px;
   padding: 8px 10px;
   display: flex;
   flex-direction: column;
   line-height: 1.2;
}

.mini--vitals small {
   font-size: 10.5px;
   color: var(--text-3);
}

.mini--vitals b {
   font-size: 17px;
   font-weight: 700;
   letter-spacing: -0.03em;
}

.mini--vitals em {
   font-style: normal;
   font-size: 10.5px;
   color: var(--text-3);
}

.mini__warn {
   grid-column: 1 / -1;
   display: flex;
   align-items: center;
   gap: 6px;
   background: var(--warn-soft);
   color: var(--warn);
   font-weight: 600;
   border-radius: 9px;
   padding: 7px 10px;
   font-size: 12px;
}

.mini__warn .i {
   width: 14px;
   height: 14px;
}

.mini--bill p {
   display: flex;
   justify-content: space-between;
   padding: 6px 0;
   border-bottom: 1px solid var(--line-soft);
}

.bill__total {
   font-weight: 700;
   font-size: 14.5px;
   border-bottom: 0 !important;
}

.bill__pay {
   display: flex;
   gap: 6px;
   margin-top: 10px;
}

.bill__pay span {
   flex: 1;
   text-align: center;
   border-radius: 7px;
   padding: 6px 0;
   background: var(--bg-alt);
   font-weight: 500;
}

.bill__pay .is-on {
   background: var(--text);
   color: #fff;
}

/* ---------- Feature illustrations: calendar, search, totals, chips ---------- */





.cal {
   display: grid;
   gap: 8px;
}

.cal__row {
   display: grid;
   grid-template-columns: 48px 1fr;
   align-items: center;
   gap: 10px;
   font-size: 14px;
}

.cal__t {
   color: var(--text-3);
   font-variant-numeric: tabular-nums;
   font-size: 13px;
}

.cal__e {
   background: var(--bg-alt);
   border-radius: 10px;
   padding: 10px 14px;
   font-weight: 500;
   border-left: 3px solid var(--line);
}

.cal__e--done {
   color: var(--text-3);
}

.cal__e--live {
   background: var(--accent-soft);
   border-left-color: var(--accent);
   color: var(--accent-hover);
}

.cal__e--free {
   background: transparent;
   border: 1.5px dashed var(--line);
   border-left-width: 1.5px;
   color: var(--text-3);
}

.srch {
   margin-top: auto;
   padding-top: 24px;
   display: grid;
   gap: 6px;
}

.srch__box {
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--bg-alt);
   border-radius: 12px;
   padding: 11px 14px;
   font-weight: 500;
   font-size: 15px;
   box-shadow: inset 0 0 0 1.5px var(--accent);
}

.srch__box .i {
   width: 16px;
   height: 16px;
   color: var(--text-3);
}

.srch__res {
   display: flex;
   flex-direction: column;
   padding: 8px 14px;
   font-size: 14px;
   line-height: 1.35;
}

.srch__res span {
   color: var(--text-3);
   font-size: 12.5px;
}

.srch__res:first-of-type {
   background: var(--bg-alt);
   border-radius: 10px;
}


.big {
   font-size: clamp(56px, 6vw, 76px);
   font-weight: 800;
   letter-spacing: -0.055em;
   line-height: 1;
   color: var(--text) !important;
   margin-top: auto;
}

.big__label {
   font-size: 15px;
   margin-top: 6px;
}

.split3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
   margin-top: 22px;
   padding-top: 18px;
   border-top: 1px solid var(--line-soft);
}

.split3 span {
   display: flex;
   flex-direction: column;
   font-size: 12.5px;
   color: var(--text-3);
}

.split3 b {
   font-size: 18px;
   font-weight: 700;
   color: var(--text);
   letter-spacing: -0.03em;
}

.chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: auto;
   padding-top: 24px;
}

.chips span {
   padding: 9px 16px;
   border-radius: 980px;
   background: var(--bg-alt);
   font-weight: 500;
   font-size: 15px;
}

.chips .is-on {
   background: var(--text);
   color: #fff;
}






.plain {
   list-style: none;
   padding: 0;
   margin: 28px 0 0;
   display: grid;
   gap: 14px;
}

.plain li {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   font-size: 17px;
}

.plain li>.i {
   width: 20px;
   height: 20px;
   color: var(--accent);
   stroke-width: 2.2;
   margin-top: 2px;
}







/* ---------- Privacy (dark) ---------- */
.privacy__icon {
   width: 64px;
   height: 64px;
   color: var(--brand);
   stroke-width: 1.4;
   margin: 0 auto 24px;
   display: block;
}

.section--dark h2 {
   color: #f5f5f7;
}

.section--dark .lead {
   color: #a1a1a6;
}

.pgrid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 48px 40px;
   margin-top: 80px;
}

.pgrid__icon {
   display: block;
   width: 26px;
   height: 26px;
   color: var(--brand);
   margin-bottom: 16px;
}

.pgrid h3 {
   color: #f5f5f7;
   font-size: 19px;
   margin-bottom: 8px;
}

.pgrid p {
   color: #a1a1a6;
   font-size: 16px;
}

/* ---------- Compare ---------- */
.cmp {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-top: 72px;
   max-width: 920px;
   margin-left: auto;
   margin-right: auto;
}

.cmp__col {
   border-radius: var(--r-lg);
   padding: 36px;
   background: var(--bg-alt);
}

.cmp__col--us {
   background: #fff;
   box-shadow: inset 0 0 0 2px var(--accent);
}

.cmp__name {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 21px;
   font-weight: 600;
   letter-spacing: -0.025em;
   padding-bottom: 20px;
   border-bottom: 1px solid var(--line);
}

.cmp__col:not(.cmp__col--us) .cmp__name {
   color: var(--text-2);
}

.cmp dl {
   margin: 0;
}

.cmp dt {
   font-size: 12px;
   font-weight: 600;
   color: var(--text-3);
   text-transform: uppercase;
   letter-spacing: .05em;
   margin-top: 20px;
}

.cmp dd {
   margin: 4px 0 0;
   font-size: 17px;
   font-weight: 500;
}

.cmp__col:not(.cmp__col--us) dd {
   color: var(--text-2);
   font-weight: 400;
}

/* ---------- Pricing ---------- */
.billing-toggle {
   display: flex;
   width: fit-content;
   margin: 44px auto 0;
   background: #e8e8ed;
   border-radius: 980px;
   padding: 3px;
}

.billing-toggle button {
   font: 500 14px var(--font);
   letter-spacing: -0.01em;
   color: var(--text);
   background: none;
   border: 0;
   padding: 8px 18px;
   border-radius: 980px;
   cursor: pointer;
}

.billing-toggle button[aria-checked=true] {
   background: #fff;
   box-shadow: 0 1px 3px rgb(0 0 0 / .12);
}

.plans {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 40px;
   align-items: stretch;
}

.plan {
   position: relative;
   background: #fff;
   border-radius: var(--r-lg);
   padding: 40px 32px;
   display: flex;
   flex-direction: column;
}

.plan--featured {
   box-shadow: inset 0 0 0 2px var(--accent);
}

.plan__badge {
   position: absolute;
   top: 18px;
   right: 20px;
   font-size: 12px;
   font-weight: 600;
   color: var(--accent);
   background: var(--accent-soft);
   padding: 4px 10px;
   border-radius: 980px;
}

.plan h3 {
   font-size: 28px;
   font-weight: 700;
   letter-spacing: -0.035em;
}

.plan__for {
   color: var(--text-2);
   font-size: 15px;
   margin-top: 4px;
}

.plan__price {
   font-size: 52px;
   font-weight: 700;
   letter-spacing: -0.045em;
   line-height: 1;
   margin-top: 28px;
}

.plan__price small {
   font-size: 17px;
   font-weight: 500;
   color: var(--text-2);
   letter-spacing: -0.01em;
   margin-left: 4px;
}

.plan__billed {
   font-size: 13px;
   color: var(--text-3);
   margin: 8px 0 26px;
   min-height: 18px;
}

.plan .plain {
   margin-top: 28px;
   padding-top: 24px;
   border-top: 1px solid var(--line-soft);
   gap: 12px;
}

.plan .plain li {
   font-size: 15.5px;
}

.plan .plain li>.i {
   width: 18px;
   height: 18px;
}

/* ---------- Form ---------- */
.form {
   max-width: 640px;
   margin: 56px auto 0;
   display: grid;
   gap: 16px;
}

.field {
   display: grid;
   gap: 6px;
   min-width: 0;
   border: 0;
   padding: 0;
   margin: 0;
}

.field-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
}

.field label,
.field legend {
   font-size: 14px;
   font-weight: 500;
   color: var(--text);
   padding: 0;
}

.field legend {
   margin-bottom: 6px;
}

.opt {
   color: var(--text-3);
   font-weight: 400;
}

.field input,
.field select,
.field textarea {
   width: 100%;
   font: 400 17px var(--font);
   letter-spacing: -0.015em;
   color: var(--text);
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 12px;
   padding: 14px 16px;
   min-height: 52px;
   transition: border-color .15s, box-shadow .15s;
}

.field textarea {
   resize: vertical;
   min-height: 84px;
}

.field select {
   appearance: none;
   -webkit-appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 16px center;
   padding-right: 42px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
   outline: none;
   border-color: var(--accent);
   box-shadow: 0 0 0 4px rgb(209 42 84 / .15);
}

.field [aria-invalid=true] {
   border-color: #e30000;
}

.seg {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
}

.seg label {
   position: relative;
   cursor: pointer;
}

.seg input {
   position: absolute;
   opacity: 0;
   inset: 0;
}

.seg span {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 14px 8px;
   border: 1px solid var(--line);
   border-radius: 12px;
   font-weight: 600;
   font-size: 15px;
   text-align: center;
   transition: border-color .15s, box-shadow .15s;
}

.seg small {
   font-weight: 400;
   color: var(--text-3);
   font-size: 13px;
}

.seg input:checked+span {
   border-color: var(--accent);
   box-shadow: inset 0 0 0 1px var(--accent);
}

.seg input:focus-visible+span {
   box-shadow: 0 0 0 4px rgb(209 42 84 / .2);
}

.checks {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

.checks label {
   display: flex;
   gap: 10px;
   align-items: center;
   padding: 12px 14px;
   border: 1px solid var(--line);
   border-radius: 12px;
   font-size: 15px;
   font-weight: 500;
   line-height: 1.3;
   cursor: pointer;
   transition: border-color .15s, box-shadow .15s;
}

.checks input {
   flex: none;
   width: 18px;
   height: 18px;
   margin: 0;
   accent-color: var(--accent);
   cursor: pointer;
}

.checks label:has(input:checked) {
   border-color: var(--accent);
   box-shadow: inset 0 0 0 1px var(--accent);
}

.checks label:has(input:focus-visible) {
   box-shadow: 0 0 0 4px rgb(209 42 84 / .2);
}

.form .pill {
   margin-top: 8px;
}

.consent {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   font-size: 14px;
   line-height: 1.45;
   color: var(--text-2);
   cursor: pointer;
   margin-top: 4px;
}

.consent input {
   flex: none;
   width: 20px;
   height: 20px;
   margin: 1px 0 0;
   accent-color: var(--accent);
   cursor: pointer;
}

.consent input[aria-invalid=true] {
   outline: 2px solid #e30000;
   outline-offset: 2px;
}

.hero__fine a {
   color: var(--text-3);
   text-decoration: underline;
   text-underline-offset: 2px;
}

.form-success {
   max-width: 560px;
   margin: 56px auto 0;
   text-align: center;
   background: var(--bg-alt);
   border-radius: var(--r-lg);
   padding: 48px 32px;
}

.form-success .feature__icon {
   display: inline-grid;
   place-items: center;
   color: var(--ok);
   margin-bottom: 14px;
}

.form-success .feature__icon .i {
   width: 52px;
   height: 52px;
   stroke-width: 1.5;
}

.form-success h3 {
   font-size: 32px;
   font-weight: 700;
   letter-spacing: -0.04em;
   margin-bottom: 8px;
}

.form-success p {
   color: var(--text-2);
}

/* ---------- FAQ ---------- */
.faq {
   margin-top: 56px;
   border-top: 1px solid var(--line);
}

.faq details {
   border-bottom: 1px solid var(--line);
}

.faq summary {
   list-style: none;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   padding: 24px 0;
   font-size: 21px;
   font-weight: 600;
   letter-spacing: -0.025em;
}

.faq summary::-webkit-details-marker {
   display: none;
}

.faq summary .i {
   width: 22px;
   height: 22px;
   color: var(--text-2);
   transition: transform .3s;
}

.faq details[open] summary .i {
   transform: rotate(45deg);
}

.faq details p {
   padding: 0 48px 26px 0;
   color: var(--text-2);
   font-size: 17px;
}

/* ---------- Final ---------- */
.final {
   padding: clamp(100px, 13vw, 168px) 0;
}

.final h2 {
   font-size: clamp(44px, 7vw, 80px);
}

.final__cta {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 28px;
   flex-wrap: wrap;
   margin-top: 36px;
}

/* ---------- Mid-page CTA ---------- */
.inline-cta {
   margin-top: 72px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 12px;
   text-align: center;
}

.inline-cta p {
   font-size: 17px;
   color: var(--text-2);
}











/* ---------- Doctor + reception (call next) ----------
   #duo-demo has data-step 1|2|3; .xN hides an element at step N. */
.duo {
   display: grid;
   grid-template-columns: 1fr 120px 1fr;
   align-items: center;
   gap: 0;
   margin-top: 64px;
}

.duo__win .win__main {
   min-height: 340px;
}

.duo[data-step="1"] .x1,
.duo[data-step="2"] .x2,
.duo[data-step="3"] .x3 {
   display: none !important;
}

.duo__link {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   text-align: center;
   font-size: 12px;
   color: var(--text-3);
   padding: 0 10px;
}

.duo__link .i {
   width: 28px;
   height: 28px;
   color: var(--accent);
}

.duo__done {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12.5px;
   color: var(--text-3);
   margin-bottom: 12px;
}

.duo__done .i,
.duo__status .i {
   width: 14px;
   height: 14px;
   stroke-width: 2.4;
}

.duo__next {
   border: 1px solid var(--line-soft);
   border-radius: 12px;
   padding: 10px 12px;
   margin-bottom: 10px;
}

.duo__next.is-picked {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px var(--accent-soft);
}

.duo__label {
   font-size: 11px;
   color: var(--text-3);
   margin-bottom: 6px;
}

.duo__row {
   display: flex;
   align-items: center;
   gap: 12px;
}

.ui__btn--ok {
   background: var(--ok-soft);
   color: var(--ok);
}

.duo__status {
   display: flex;
   align-items: center;
   gap: 6px;
   margin-top: auto;
   padding: 9px 12px;
   border-radius: 10px;
   background: var(--accent-soft);
   color: var(--accent-hover);
   font-weight: 600;
   font-size: 12.5px;
}

.duo__status--ok {
   background: var(--ok-soft);
   color: var(--ok);
}

.duo__banner {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 12px;
   margin-bottom: 14px;
   border-radius: 12px;
   background: var(--accent-soft);
   color: var(--accent-hover);
}

.duo[data-step="3"] .duo__banner {
   background: var(--ok-soft);
   color: var(--ok);
}

.duo__banner > .i {
   width: 18px;
   height: 18px;
}

.duo__banner p {
   flex: 1;
   line-height: 1.3;
   font-size: 12.5px;
}

.duo__banner b {
   display: block;
   font-size: 13.5px;
}

.duo__steps {
   list-style: none;
   margin: 48px 0 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
}

.duo__steps li {
   background: #fff;
   border-radius: var(--r);
   padding: 22px 22px 24px;
}

.duo__steps h3 {
   font-size: 19px;
   margin-bottom: 6px;
}

.duo__steps li > p:last-child {
   color: var(--text-2);
   font-size: 15px;
}

@media (prefers-reduced-motion: no-preference) {
   .duo__banner,
   .duo__status {
      animation: rise .4s ease-out;
   }
}

@media (max-width: 1060px) {
   .duo {
      grid-template-columns: 1fr 64px 1fr;
   }

   .duo__link span {
      display: none;
   }
}

@media (max-width: 834px) {
   .duo {
      grid-template-columns: 1fr;
      gap: 14px;
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
   }

   .duo__link .i {
      transform: rotate(90deg);
   }

   .duo__steps {
      grid-template-columns: 1fr;
      max-width: 520px;
      margin-left: auto;
      margin-right: auto;
   }
}

@media (max-width: 600px) {
   .duo__win .win__main {
      min-height: 0;
   }
}

/* ---------- Feature tour ----------
   One row per feature: copy + "what it means for you" on one side, an app
   window illustration (HTML, sample data) on the other. Rows alternate. */
.fmap {
   margin: 56px auto 0;
   max-width: 980px;
   display: grid;
   gap: 22px;
   text-align: center;
}

.fmap__label {
   font-size: 13px;
   font-weight: 600;
   color: var(--text-3);
   text-transform: uppercase;
   letter-spacing: .06em;
   margin-bottom: 10px;
}

.fmap ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px;
}

.fmap a {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 8px 14px;
   border-radius: 980px;
   background: #fff;
   border: 1px solid var(--line-soft);
   color: var(--text);
   font-size: 15px;
   font-weight: 500;
}

.fmap a:hover {
   text-decoration: none;
   border-color: var(--accent);
   color: var(--accent);
}

.fmap .i {
   width: 16px;
   height: 16px;
   color: var(--accent);
}

.fmap__group--opt a {
   border-style: dashed;
   border-color: var(--line);
}

.fx {
   display: grid;
   grid-template-columns: 1fr 1.15fr;
   gap: 64px;
   align-items: center;
   margin-top: 128px;
}

.fmap + .fx {
   margin-top: 96px;
}

.fx--flip .fx__copy {
   order: 2;
}

.fx__tag {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 600;
   color: var(--accent);
   letter-spacing: -0.005em;
}

.fx__tag .i {
   width: 18px;
   height: 18px;
}

.fx h3 {
   font-size: clamp(28px, 3.2vw, 40px);
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -0.035em;
   margin: 12px 0 16px;
}

.fx__copy > p:not(.fx__tag) {
   color: var(--text-2);
   font-size: 18px;
   line-height: 1.5;
}

.fx__gain {
   margin-top: 24px;
   padding: 18px 22px 20px;
   border-radius: var(--r);
   background: var(--bg-alt);
}

.section--alt .fx__gain {
   background: #fff;
}

.fx__gain > p {
   font-size: 13px;
   font-weight: 600;
   color: var(--text-3);
   text-transform: uppercase;
   letter-spacing: .06em;
}

.fx__gain ul,
.fx__gains {
   list-style: none;
   margin: 10px 0 0;
   padding: 0;
   display: grid;
   gap: 8px;
}

.fx__gain li,
.fx__gains li {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   font-size: 16px;
   font-weight: 500;
   line-height: 1.4;
}

.fx__gain .i,
.fx__gains .i {
   width: 18px;
   height: 18px;
   color: var(--ok);
   stroke-width: 2.4;
   margin-top: 1px;
}

/* Full-width feature (patient trends): copy on top, big screen below */
.fx--wide {
   display: block;
}

.fx__copy--center {
   max-width: 760px;
   margin: 0 auto;
   text-align: center;
}

.fx__copy--center .fx__tag {
   justify-content: center;
}

.fx__gains {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px 24px;
   margin-top: 20px;
}

.fx--wide .device {
   margin-top: 48px;
}

/* App window */
.win {
   background: #fff;
   border: 1px solid var(--line-soft);
   border-radius: 16px;
   overflow: hidden;
   font-size: 13px;
   letter-spacing: -0.01em;
   box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 28px 56px -28px rgb(0 0 0 / .22);
   min-width: 0;
}

.win__bar {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 10px 14px;
   background: #fbfbfd;
   border-bottom: 1px solid var(--line-soft);
   font-size: 12px;
   color: var(--text-2);
   font-weight: 500;
}

.win__bar i {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #e3e3e8;
}

.win__bar span {
   margin-left: 8px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.win__body {
   display: grid;
   grid-template-columns: 52px 1fr;
   min-height: 360px;
}

.win__rail {
   background: #fbfbfd;
   border-right: 1px solid var(--line-soft);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
   padding: 14px 0;
}

.win__rail img {
   margin-bottom: 10px;
}

.win__rail span {
   width: 34px;
   height: 34px;
   display: grid;
   place-items: center;
   border-radius: 9px;
   color: var(--text-3);
}

.win__rail .i {
   width: 17px;
   height: 17px;
}

.win__rail .is-active {
   background: var(--accent-soft);
   color: var(--accent);
}

.win__main {
   padding: 18px 20px 20px;
   min-width: 0;
   display: flex;
   flex-direction: column;
}

.win__h {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
   margin-bottom: 14px;
}

.win__h b {
   font-size: 18px;
   font-weight: 700;
   letter-spacing: -0.03em;
   white-space: nowrap;
}

.win__h small {
   color: var(--text-3);
   font-size: 12px;
   text-align: right;
}

.win__stat {
   color: var(--text);
   font-weight: 600;
}

.win__actions {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 8px;
   margin-top: auto;
   padding-top: 16px;
}

.win .srch,
.win .chips {
   margin-top: 0;
   padding-top: 0;
}

.win .chips span {
   font-size: 13px;
   padding: 7px 13px;
}

.win .big {
   font-size: 48px;
   margin-top: 4px;
}

.win .big__label {
   color: var(--text-2);
   font-size: 13px;
}

.win .split3 {
   margin-top: 16px;
   padding-top: 14px;
}

/* Registration form */
.wf {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 8px;
}

.wf__f {
   border: 1px solid var(--line-soft);
   border-radius: 10px;
   padding: 7px 11px;
   display: flex;
   flex-direction: column;
   gap: 1px;
   min-width: 0;
}

.wf__f small {
   font-size: 11px;
   color: var(--text-3);
}

.wf__f em {
   font-style: normal;
   color: var(--accent);
}

.wf__f > span {
   font-weight: 600;
   font-size: 13.5px;
   display: flex;
   align-items: center;
   min-height: 20px;
}

.wf__f .tag-warn {
   font-size: 11.5px;
}

.wf__f--full {
   grid-column: 1 / -1;
}

.wf__f.is-focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px var(--accent-soft);
}

.wf__hint {
   font-size: 12px;
   color: var(--text-3);
   margin-top: 8px;
}

.walert {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 12px;
   padding: 10px 12px;
   border-radius: 10px;
   background: var(--warn-soft);
   color: var(--warn);
   font-size: 12.5px;
   line-height: 1.35;
}

.walert .i {
   width: 16px;
   height: 16px;
}

.walert p {
   flex: 1;
}

.walert .ui__btn {
   background: #fff;
   padding: 6px 10px;
   font-size: 12px;
}

/* Consultation note */
.wn {
   display: grid;
   grid-template-columns: 1.55fr 1fr;
   gap: 16px;
}

.wn__note {
   display: flex;
   flex-direction: column;
   min-width: 0;
}

.wn__f {
   padding: 7px 0 8px;
   border-bottom: 1px solid var(--line-soft);
}

.wn__f small,
.wn__side-l {
   display: block;
   font-size: 11px;
   color: var(--text-3);
}

.wn__f p {
   font-weight: 500;
}

.wn__f--fu p {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 5px;
   margin-top: 3px;
}

.wn__f--fu b {
   margin-left: 4px;
   color: var(--accent);
}

.wchip {
   padding: 3px 9px;
   border-radius: 999px;
   background: var(--bg-alt);
   font-size: 12px;
}

.wchip.is-on {
   background: var(--text);
   color: #fff;
}

.wvit {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 6px;
   margin: 8px 0 2px;
}

.wvit span {
   background: var(--bg-alt);
   border-radius: 8px;
   padding: 5px 8px;
   font-weight: 700;
   font-size: 13px;
   line-height: 1.25;
   white-space: nowrap;
}

.wvit small {
   display: block;
   font-weight: 400;
   font-size: 10.5px;
   color: var(--text-3);
}

.wn__side {
   background: var(--bg-alt);
   border-radius: 12px;
   padding: 12px;
   display: flex;
   flex-direction: column;
   gap: 6px;
   align-self: start;
}

.wn__side-h {
   font-weight: 600;
   line-height: 1.3;
}

.wn__side-h small {
   display: block;
   font-weight: 400;
   color: var(--text-3);
   font-size: 11.5px;
}

.wn__side .tag-warn {
   font-size: 11.5px;
}

.wn__side-l {
   margin-top: 6px;
}

.wn__visit {
   background: #fff;
   border-radius: 8px;
   padding: 6px 9px;
   font-size: 12px;
   color: var(--text-2);
   display: flex;
   flex-direction: column;
   line-height: 1.3;
}

.wn__visit b {
   color: var(--text);
   font-weight: 600;
}

/* Follow-ups */
.fu {
   border-top: 1px solid var(--line-soft);
}

.fu__row {
   display: grid;
   grid-template-columns: 1fr auto auto;
   align-items: center;
   gap: 12px;
   padding: 11px 4px;
   border-bottom: 1px solid var(--line-soft);
}

.fu__row.is-done {
   opacity: .55;
}

.due {
   font-size: 12px;
   font-weight: 600;
   color: var(--accent);
   background: var(--accent-soft);
   border-radius: 6px;
   padding: 3px 8px;
   display: inline-flex;
   align-items: center;
   gap: 4px;
   white-space: nowrap;
}

.due--late {
   color: var(--warn);
   background: var(--warn-soft);
}

.due--ok {
   color: var(--ok);
   background: var(--ok-soft);
}

.due .i {
   width: 12px;
   height: 12px;
   stroke-width: 2.6;
}

.fu__call {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 12px;
   color: var(--text-2);
   white-space: nowrap;
}

.fu__call .i {
   width: 13px;
   height: 13px;
   color: var(--accent);
}

/* Receipt */
.rc p {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   padding: 7px 0;
   border-bottom: 1px solid var(--line-soft);
}

.rc .rc__total {
   font-weight: 700;
   font-size: 14.5px;
   border-bottom-color: var(--line);
}

.rc__paid {
   color: var(--ok);
   font-weight: 500;
}

.rc__paid span:first-child {
   display: inline-flex;
   align-items: center;
   gap: 5px;
}

.rc__paid .i {
   width: 13px;
   height: 13px;
   stroke-width: 2.6;
}

.rc .rc__due {
   color: var(--warn);
   font-weight: 700;
   border-bottom: 0;
}

.rc__label {
   font-size: 11px;
   color: var(--text-3);
   margin: 10px 0 6px;
}

/* Payment-method bars */
.mb {
   display: grid;
   gap: 7px;
   margin-top: 16px;
}

.mb p {
   display: grid;
   grid-template-columns: 40px 1fr 56px;
   align-items: center;
   gap: 10px;
   font-size: 12.5px;
}

.mb span {
   color: var(--text-2);
}

.mb i {
   height: 10px;
   border-radius: 0 4px 4px 0;
   background: var(--accent);
   width: var(--w);
}

.mb b {
   text-align: right;
   font-weight: 600;
}

/* Audit trail */
.al {
   list-style: none;
   margin: 0;
   padding: 0;
   border-top: 1px solid var(--line-soft);
}

.al li {
   display: grid;
   grid-template-columns: 40px 28px 1fr;
   gap: 10px;
   align-items: start;
   padding: 10px 2px;
   border-bottom: 1px solid var(--line-soft);
}

.al time {
   color: var(--text-3);
   font-variant-numeric: tabular-nums;
   font-size: 12px;
   padding-top: 4px;
}

.al p {
   line-height: 1.35;
   padding-top: 3px;
}

.al p b {
   font-weight: 600;
}

.al small {
   display: block;
   color: var(--text-3);
   font-size: 12px;
}

.al__who {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   display: inline-grid;
   place-items: center;
   font-size: 11px;
   font-weight: 700;
   background: var(--accent-soft);
   color: var(--accent);
   flex: none;
}

.al__who--r {
   background: var(--bg-alt);
   color: var(--text-2);
}

/* Who sees what */
.two {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

.two__col {
   padding: 16px 18px 20px;
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.two__col + .two__col {
   border-left: 1px solid var(--line-soft);
   background: #fbfbfd;
}

.two__h {
   display: flex;
   align-items: center;
   gap: 9px;
   font-weight: 700;
   font-size: 15px;
   margin-bottom: 10px;
}

.two__col > span {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 7px 8px;
   border-radius: 8px;
   font-weight: 500;
}

.two__col > span .i {
   width: 15px;
   height: 15px;
   color: var(--accent);
}

.two__col > span.is-off {
   color: var(--text-3);
   text-decoration: line-through;
   text-decoration-color: var(--line);
}

.two__col > span.is-off .i {
   color: var(--text-3);
}

/* Printed prescription (A4 sheet) */
.rx {
   background: #fff;
   border: 1px solid var(--line-soft);
   border-radius: 6px;
   padding: 30px 32px 28px;
   font-size: 13px;
   line-height: 1.45;
   box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 28px 56px -28px rgb(0 0 0 / .25);
   max-width: 520px;
   width: 100%;
   justify-self: center;
}

.rx small {
   display: block;
   color: var(--text-3);
   font-size: 11.5px;
   font-weight: 400;
}

.rx__head {
   display: flex;
   justify-content: space-between;
   gap: 16px;
   padding-bottom: 14px;
   border-bottom: 2px solid var(--accent);
}

.rx__head b {
   font-size: 17px;
   letter-spacing: -0.02em;
}

.rx__dr {
   text-align: right;
}

.rx__dr b {
   font-size: 14px;
}

.rx__pt {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   flex-wrap: wrap;
   padding: 10px 0;
   border-bottom: 1px solid var(--line-soft);
   color: var(--text-2);
}

.rx__pt b {
   color: var(--text);
}

.rx__dx,
.rx__adv {
   padding-top: 10px;
}

.rx__sym {
   font-size: 22px;
   font-weight: 800;
   font-style: italic;
   color: var(--accent);
   margin-top: 12px;
}

.rx__meds {
   margin: 4px 0 0;
   padding-left: 20px;
   display: grid;
   gap: 8px;
}

.rx__meds li {
   padding-left: 4px;
}

.rx__meds b {
   display: block;
   font-weight: 600;
}

.rx__meds span {
   color: var(--text-2);
}

.rx__foot {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   margin-top: 22px;
}

.rx__sign {
   min-width: 130px;
   text-align: center;
   border-top: 1px solid var(--text-3);
   padding-top: 4px;
   font-size: 11.5px;
   color: var(--text-3);
}

/* Expenses & profit */
.kpis.kpis--3 {
   grid-template-columns: repeat(3, 1fr);
   gap: 8px;
}

.kpis--3 .kpi {
   padding: 10px 12px;
}

.kpis--3 .kpi b {
   font-size: 19px;
   white-space: nowrap;
}

.kpi--hi {
   background: var(--ok-soft);
   border-color: transparent;
}

.kpi--hi b {
   color: var(--ok);
}

.be {
   height: 8px;
   border-radius: 4px;
   background: var(--ok-soft);
   margin-top: 16px;
   overflow: hidden;
}

.be i {
   display: block;
   height: 100%;
   width: var(--w);
   background: var(--ok);
   border-radius: 4px;
}

.be__note {
   display: flex;
   align-items: center;
   gap: 6px;
   margin-top: 8px;
   font-size: 12.5px;
   color: var(--text-2);
}

.be__note .i {
   width: 14px;
   height: 14px;
   color: var(--ok);
   stroke-width: 2.6;
}

.ex {
   margin-top: 14px;
   border-top: 1px solid var(--line-soft);
}

.ex p {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
   padding: 8px 2px;
   border-bottom: 1px solid var(--line-soft);
}

.ex span {
   font-weight: 500;
   display: flex;
   align-items: baseline;
   gap: 8px;
}

.ex small {
   font-size: 11px;
   color: var(--text-3);
   font-weight: 400;
}

.ex b {
   font-weight: 600;
}

@media (max-width: 1060px) {
   .fx {
      gap: 40px;
   }

   .wn {
      grid-template-columns: 1fr;
   }

   .wn__side {
      order: -1;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
   }

   .wn__side .wn__side-l,
   .wn__side .wn__visit {
      display: none;
   }
}

@media (max-width: 834px) {
   .fx {
      grid-template-columns: 1fr;
      margin-top: 96px;
   }

   .fx--flip .fx__copy {
      order: 0;
   }

   .fx__copy--center,
   .fx__copy--center .fx__tag {
      text-align: left;
      justify-content: flex-start;
   }

   .fx__gains {
      flex-direction: column;
      align-items: flex-start;
   }
}

@media (max-width: 600px) {
   .fmap a {
      font-size: 14px;
      padding: 7px 12px;
   }

   .fx {
      margin-top: 80px;
      gap: 28px;
   }

   .fx__copy > p:not(.fx__tag) {
      font-size: 17px;
   }

   .win__body {
      grid-template-columns: 1fr;
      min-height: 0;
   }

   .win__rail {
      display: none;
   }

   .win__main {
      padding: 14px;
   }

   .win__h {
      flex-wrap: wrap;
   }

   .win__h small {
      text-align: left;
   }

   .wvit {
      grid-template-columns: 1fr 1fr;
   }

   .fu__row {
      grid-template-columns: 1fr auto;
   }

   .fu__call {
      grid-column: 1 / -1;
      margin-top: -4px;
   }

   .two__col {
      padding: 14px 10px 16px;
   }

   .two__col > span {
      padding: 6px 4px;
      font-size: 12px;
      gap: 7px;
   }

   .rx {
      padding: 22px 18px 20px;
   }

   .rx__head {
      flex-direction: column;
      gap: 8px;
   }

   .rx__dr {
      text-align: left;
   }

   .kpis.kpis--3 {
      grid-template-columns: 1fr 1fr;
   }

   .kpis--3 .kpi--hi {
      grid-column: 1 / -1;
   }

   .walert {
      flex-wrap: wrap;
   }
}

/* ---------- Patient trends dashboard (mock) ----------
   Two series: returning (accent) and new (light pink). Validated with the
   dataviz palette script: CVD ΔE 18, normal ΔE 20. The light pink is under
   3:1 on white, so the legend and a screen-reader table carry identity. */
.ui--dash {
   grid-template-columns: 176px 1fr;
   --ret: #d12a54;
   --new: #f08aa5;
}

.ui__head--dash {
   margin-top: 4px;
}

.dash__range {
   display: flex;
   background: var(--bg-alt);
   border-radius: 9px;
   padding: 3px;
   font-size: 12px;
   color: var(--text-2);
}

.dash__range span {
   padding: 5px 10px;
   border-radius: 7px;
}

.dash__range .is-on {
   background: #fff;
   color: var(--text);
   font-weight: 600;
   box-shadow: 0 1px 2px rgb(0 0 0 / .08);
}

.kpis {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 10px;
}

.kpi {
   border: 1px solid var(--line-soft);
   border-radius: 12px;
   padding: 12px 14px;
   display: grid;
   gap: 2px;
}

.kpi small {
   color: var(--text-3);
   font-size: 12px;
}

.kpi b {
   font-size: 24px;
   font-weight: 700;
   letter-spacing: -0.03em;
   color: var(--text);
}

.kpi em {
   font-style: normal;
   font-size: 12px;
   color: var(--text-3);
}

.kpi .up {
   color: var(--ok);
   font-weight: 500;
}

.dash__grid {
   display: grid;
   grid-template-columns: 1.6fr 1fr;
   gap: 10px;
   margin-top: 10px;
}

.dcard {
   border: 1px solid var(--line-soft);
   border-radius: 12px;
   padding: 14px 16px;
   min-width: 0;
}

.dcard__head {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: 10px;
   margin-bottom: 12px;
}

.dcard__head > p:first-child {
   font-weight: 600;
   color: var(--text);
}

.legend {
   display: flex;
   gap: 12px;
   font-size: 12px;
   color: var(--text-2);
}

.legend span {
   display: inline-flex;
   align-items: center;
   gap: 5px;
}

.sw {
   width: 10px;
   height: 10px;
   border-radius: 3px;
}

.sw--ret { background: var(--ret); }
.sw--new { background: var(--new); }

/* Stacked columns: one baseline, 2px surface gap between segments,
   4px rounded top, value on the cap, recessive hairline grid. */
.tc {
   position: relative;
   height: 190px;
   padding-left: 30px;
}

.tc__grid {
   position: absolute;
   inset: 0 0 20px 30px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.tc__grid span {
   position: relative;
   height: 0;
   border-top: 1px solid var(--line-soft);
}

.tc__grid span::before {
   content: attr(data-v);
   position: absolute;
   right: calc(100% + 6px);
   top: -7px;
   font-size: 11px;
   line-height: 1;
   color: var(--text-3);
}

.tc__cols {
   position: absolute;
   inset: 0 0 20px 30px;
   display: flex;
   justify-content: space-around;
   align-items: stretch;
}

.tc__col {
   position: relative;
   width: 24px;
   display: flex;
   flex-direction: column-reverse;
   justify-content: flex-start;
   align-items: stretch;
   gap: 2px;
   cursor: default;
}

.tc__seg {
   display: block;
   width: 100%;
}

.tc__seg--new {
   background: var(--new);
}

.tc__seg--ret {
   background: var(--ret);
}

/* column-reverse puts "returning" on the baseline and "new" on top,
   so "new" carries the rounded cap */
.tc__seg--new {
   border-radius: 4px 4px 0 0;
}

.tc__val {
   order: 99;
   font-size: 11px;
   font-weight: 600;
   color: var(--text-2);
   text-align: center;
   margin-bottom: 2px;
}

.tc__m {
   position: absolute;
   bottom: -20px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 11px;
   color: var(--text-3);
}

.tc__col:hover .tc__seg {
   filter: brightness(.92);
}

/* Heatmap: one hue, light to dark */
.hm {
   display: grid;
   grid-template-columns: 34px 1fr 1fr;
   gap: 3px;
   align-items: center;
}

.hm__h {
   font-size: 11px;
   color: var(--text-3);
   text-align: center;
}

.hm__d {
   font-size: 11.5px;
   color: var(--text-2);
}

.hm__c {
   height: 18px;
   border-radius: 4px;
}

.hm--1 { background: #fdeef2; }
.hm--2 { background: #f8c6d3; }
.hm--3 { background: #f08aa5; }
.hm--4 { background: #e0507a; }
.hm--5 { background: #b8214a; }

.hm__note {
   margin-top: 10px;
   font-size: 12px;
   color: var(--text-2);
   line-height: 1.35;
}

.hm__scale {
   display: flex;
   align-items: center;
   gap: 3px;
   margin-top: 8px;
   font-size: 11px;
   color: var(--text-3);
}

.hm__scale i {
   width: 14px;
   height: 8px;
   border-radius: 2px;
}

.hm__scale span:first-child { margin-right: 4px; }
.hm__scale span:last-child { margin-left: 4px; }

@media (max-width: 834px) {
   .kpis {
      grid-template-columns: repeat(2, 1fr);
   }

   .dash__grid {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 600px) {
   .ui--dash {
      grid-template-columns: 1fr;
   }

   .dash__range {
      display: none;
   }

   .kpi b {
      font-size: 20px;
   }
}









/* ---------- Founding-clinic perks ---------- */
.perks {
   list-style: none;
   padding: 0;
   max-width: 640px;
   margin: 40px auto 0;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 14px 28px;
}

.perks li {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   font-size: 17px;
   line-height: 1.4;
}

.perks .i {
   flex: none;
   width: 20px;
   height: 20px;
   margin-top: 1px;
   color: var(--brand);
   stroke-width: 2.2;
}

@media (max-width: 600px) {
   .perks {
      grid-template-columns: 1fr;
   }
}

/* ---------- Share after sign-up ---------- */
.share {
   margin-top: 24px;
   padding-top: 20px;
   border-top: 1px solid var(--line);
}

.share p {
   font-size: 15px;
   margin-bottom: 12px;
}

.form-msg .share-link {
   font-weight: 500;
}

/* ---------- Footer ---------- */
.footer {
   background: var(--bg-alt);
   padding: 24px 0 32px;
   font-size: 12px;
   color: var(--text-2);
   letter-spacing: -0.005em;
}

.footer__fine {
   padding-bottom: 16px;
   border-bottom: 1px solid var(--line);
   line-height: 1.5;
}

.footer__bar {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 10px 24px;
   padding-top: 16px;
}

.footer nav {
   display: flex;
   gap: 20px;
}

.footer nav a {
   color: var(--text-2);
}

.sticky-cta {
   display: none;
}

/* ---------- Static pieces used by the animations ---------- */
.cal {
   position: relative;
}

.cal__note {
   font-size: 13px;
   font-weight: 500;
   min-height: 20px;
   margin: 4px 0 0 58px;
   display: flex;
   align-items: center;
   gap: 6px;
   opacity: 0;
   transition: opacity .3s;
}

.cal__note.is-warn {
   color: var(--warn);
   opacity: 1;
}

.cal__note.is-ok {
   color: var(--ok);
   opacity: 1;
}

.cal__e.is-new {
   background: var(--ok-soft);
   border-left-color: var(--ok);
   color: var(--ok);
}

.srch__list {
   min-height: 156px;
   display: grid;
   gap: 6px;
   align-content: start;
}

.srch__res mark {
   background: none;
   color: var(--accent);
   font-weight: 700;
}

.bill__done {
   display: flex;
   align-items: center;
   gap: 5px;
   justify-content: center;
   margin-top: 10px;
   color: var(--ok);
   font-weight: 600;
   font-size: 12px;
}

.bill__done .i {
   width: 14px;
   height: 14px;
   stroke-width: 2.4;
}

.st--bill {
   color: var(--warn);
}

.nav__links a.is-current {
   opacity: 1;
   color: var(--accent);
}

/* ---------- Helpful micro-animations (motion allowed only) ---------- */
@keyframes rise {
   from {
      opacity: 0;
      transform: translateY(8px);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

@keyframes pop {
   0% {
      opacity: 0;
      transform: scale(.85);
   }

   60% {
      opacity: 1;
      transform: scale(1.04);
   }

   100% {
      transform: scale(1);
   }
}

@keyframes draw {
   from {
      transform: scaleX(0);
   }

   to {
      transform: scaleX(1);
   }
}

@keyframes flash {
   from {
      background-color: var(--accent-soft);
   }

   to {
      background-color: transparent;
   }
}

@keyframes progress {
   from {
      transform: scaleX(0);
   }

   to {
      transform: scaleX(1);
   }
}

@keyframes nudge {

   0%,
   100% {
      transform: none;
   }

   20%,
   60% {
      transform: translateX(-4px);
   }

   40%,
   80% {
      transform: translateX(4px);
   }
}

@keyframes tokenIn {
   from {
      opacity: 0;
      transform: translateY(40%);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

@media (prefers-reduced-motion: no-preference) {

   /* Hero queue */
   .ui__queue li {
      will-change: transform;
   }

   .ui__queue li.is-changed {
      animation: flash 1.6s ease-out;
   }

   .ui__queue li.is-changed .st {
      animation: rise .45s ease-out;
   }

   .ui__queue.is-reset {
      opacity: 0;
      transition: opacity .3s;
   }

   .ui__queue {
      transition: opacity .3s;
   }

   #panel-btn {
      transition: background .3s, color .3s;
   }

   /* Five steps: one plays at a time, with a progress line on top */
   .card {
      position: relative;
      overflow: hidden;
      transition: opacity .5s, transform .5s cubic-bezier(.2, .7, .2, 1), background .5s, box-shadow .5s;
   }

   .card::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 3px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
   }

   .flow.is-playing .card:not(.is-active) {
      opacity: .55;
   }

   .flow.is-playing .card.is-active {
      background: #fff;
      box-shadow: 0 12px 32px -12px rgb(0 0 0 / .18);
      transform: translateY(-4px);
   }

   .flow.is-playing .card.is-active::before {
      animation: progress 2.8s linear both;
   }

   .card.is-active .mini__btn {
      animation: pop .4s .85s both;
   }

   .card.is-active .tk__num {
      animation: tokenIn .5s cubic-bezier(.2, .7, .2, 1) both;
   }

   .card.is-active .tk__who {
      animation: rise .4s .25s both;
   }

   .card.is-active .tk__meta {
      animation: rise .4s .5s both;
   }

   .card.is-active .mini--vitals>div {
      animation: pop .4s both;
   }

   .card.is-active .mini--vitals>div:nth-child(2) {
      animation-delay: .15s;
   }

   .card.is-active .mini--vitals>div:nth-child(3) {
      animation-delay: .3s;
   }

   .card.is-active .mini--vitals>div:nth-child(4) {
      animation-delay: .45s;
   }

   .card.is-active .mini__warn {
      animation: rise .4s .8s both;
   }

   .card.is-active .mini--bill>p {
      animation: rise .35s both;
   }

   .card.is-active .mini--bill>p:nth-child(2) {
      animation-delay: .15s;
   }

   .card.is-active .mini--bill>p:nth-child(3) {
      animation-delay: .3s;
   }

   .card.is-active .bill__pay .is-on {
      animation: pop .4s .6s both;
   }

   .card.is-active .bill__done {
      animation: rise .4s 1s both;
   }

   /* Feature illustrations */
   .srch__res {
      animation: rise .3s ease-out both;
   }

   .cal__row.is-clash .cal__e {
      animation: nudge .45s ease-in-out;
      box-shadow: inset 0 0 0 1.5px var(--warn);
   }

   .cal__e {
      transition: background .4s, color .4s, border-color .4s;
   }

   .chips span {
      transition: background .35s, color .35s;
   }

   /* FAQ answers ease in */
   .faq details[open] p {
      animation: rise .35s ease-out;
   }

   .faq summary:hover {
      color: var(--accent);
   }

   .faq summary {
      transition: color .2s;
   }

   /* Buttons respond to touch */
   .pill {
      transition: background .2s, transform .15s;
   }

   .pill:active {
      transform: scale(.97);
   }

   .billing-toggle button {
      transition: background .25s, box-shadow .25s;
   }
}

/* ---------- Reveal (subtle, Apple-like) ---------- */
.js .reveal {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}

.js .reveal.is-in {
   opacity: 1;
   transform: none;
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   .js .reveal {
      opacity: 1;
      transform: none;
      transition: none;
   }

   .caret {
      animation: none;
   }
}

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
   .ui {
      grid-template-columns: 150px 1fr;
   }

   .ui__panel {
      display: none;
   }

   .flow {
      grid-template-columns: repeat(3, 1fr);
   }



}

@media (max-width: 834px) {
   .nav__toggle {
      display: inline-flex;
   }

   .nav__links {
      position: absolute;
      top: var(--nav-h);
      left: 0;
      right: 0;
      flex-direction: column;
      gap: 0;
      background: rgb(255 255 255 / .97);
      backdrop-filter: blur(20px);
      padding: 8px 22px 20px;
      display: none;
      border-bottom: 1px solid var(--line-soft);
   }

   .nav__links.is-open {
      display: flex;
   }

   .nav__links a {
      font-size: 17px;
      padding: 12px 0;
      opacity: 1;
      border-bottom: 1px solid var(--line-soft);
   }

   .flow {
      grid-template-columns: 1fr 1fr;
   }

   .pgrid {
      grid-template-columns: 1fr 1fr;
   }

   .cmp,
   .plans {
      grid-template-columns: 1fr;
   }

   .plans {
      max-width: 480px;
      margin-left: auto;
      margin-right: auto;
   }

}

@media (max-width: 600px) {
   body {
      font-size: 16px;
   }

   .container {
      padding: 0 16px;
   }

   .nav__cta .pill {
      display: none;
   }

   .capture__row {
      flex-direction: column;
      border-radius: 22px;
      padding: 6px;
   }

   .capture input[type=email] {
      padding: 14px 16px;
   }

   .ui {
      grid-template-columns: 1fr;
      min-height: 0;
      font-size: 12px;
   }

   .ui__side,
   .ui__stats,
   .ui__btn span {
      display: none;
   }

   .ui__main {
      padding: 12px;
   }

   .ui__top .ui__btn {
      padding: 8px;
      font-size: 0;
   }

   .ui__top .ui__btn .i {
      width: 16px;
      height: 16px;
   }

   .ui__title {
      font-size: 20px;
   }

   .device {
      margin-top: 48px;
   }

   .flow,
   .pgrid {
      grid-template-columns: 1fr;
   }





   .field-row,
   .checks {
      grid-template-columns: 1fr;
   }

   .cmp__col,
   .plan {
      padding: 30px 24px;
   }

   .faq summary {
      font-size: 18px;
   }

   .faq details p {
      padding-right: 0;
   }

   .sticky-cta {
      display: flex;
      position: fixed;
      left: 16px;
      right: 16px;
      bottom: 16px;
      z-index: 40;
      box-shadow: 0 10px 30px rgb(0 0 0 / .2);
      transform: translateY(160%);
      transition: transform .3s;
   }

   .sticky-cta.is-visible {
      transform: none;
   }

   .footer {
      padding-bottom: 96px;
   }
}

/* ---------- Pains ("Sound familiar?") ---------- */
.pains {
   list-style: none;
   margin: 64px 0 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
}

.pain {
   background: var(--bg);
   border-radius: var(--r);
   padding: 28px 24px;
   display: flex;
   flex-direction: column;
}

.pain__icon {
   width: 26px;
   height: 26px;
   color: var(--brand);
   margin-bottom: 16px;
}

.pain h3 {
   font-size: 19px;
   line-height: 1.25;
}

.pain__ctx {
   font-size: 14.5px;
   color: var(--text-3);
   margin-top: 6px;
   margin-bottom: 18px;
}

.pain__fix {
   font-size: 15.5px;
   color: var(--text);
   margin-top: auto;
   padding-top: 16px;
   border-top: 1px solid var(--line-soft);
}

.pains__close {
   text-align: center;
   font-size: clamp(19px, 2vw, 24px);
   font-weight: 600;
   letter-spacing: -0.02em;
   margin-top: 48px;
}

/* Hero proof points */
.hero__points {
   list-style: none;
   padding: 0;
   margin: 22px auto 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 8px 22px;
   font-size: 15px;
   color: var(--text-2);
}

.hero__points li {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.hero__points .i {
   width: 16px;
   height: 16px;
   color: var(--ok);
}

/* Small source note under a feature */
.fx__src {
   font-size: 12.5px;
   color: var(--text-3);
   margin-top: 12px;
}

@media (max-width: 1060px) {
   .pains {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 600px) {
   .pains {
      grid-template-columns: 1fr;
   }

   .hero__points {
      flex-direction: column;
      align-items: center;
   }
}

.price-anchor {
   font-size: 16px;
   color: var(--text-2);
   margin: 18px auto 0;
   max-width: 560px;
   padding: 12px 18px;
   background: var(--bg);
   border-radius: 12px;
}

/* ---------- Two-plan pricing ---------- */
.plans--two {
   grid-template-columns: repeat(2, 1fr);
   max-width: 820px;
   margin-left: auto;
   margin-right: auto;
}

.founding {
   margin: 14px auto 0;
   max-width: 560px;
   font-size: 15.5px;
   color: var(--accent);
}

.plan__offer {
   margin-top: auto;
   padding-top: 18px;
   font-size: 13.5px;
   font-weight: 500;
   color: var(--accent);
}

.plan .plain {
   margin-bottom: 4px;
}

.soon {
   display: inline-block;
   margin-left: 6px;
   padding: 1px 8px;
   font-size: 11.5px;
   font-weight: 600;
   color: var(--warn);
   background: var(--warn-soft);
   border-radius: 980px;
   vertical-align: 1px;
   white-space: nowrap;
}

/* ---------- Founder card ---------- */
.founder {
   display: flex;
   gap: 18px;
   align-items: center;
   max-width: 640px;
   margin: 40px auto 0;
   padding: 22px 24px;
   background: var(--bg-alt);
   border-radius: var(--r);
}

.founder__avatar {
   flex: none;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-weight: 700;
   color: var(--accent);
   background: var(--accent-soft);
}

.founder__label {
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: var(--text-3);
}

.founder__name {
   font-size: 19px;
   font-weight: 600;
   margin-top: 2px;
}

.founder__meta {
   font-size: 14.5px;
   color: var(--text-2);
   margin-top: 2px;
}

.founder__links {
   display: flex;
   flex-wrap: wrap;
   gap: 4px 16px;
   margin-top: 8px;
   font-size: 14.5px;
}

.founder__links a {
   color: var(--accent);
   overflow-wrap: anywhere;
}

@media (max-width: 834px) {
   .plans--two {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 600px) {
   .founder {
      align-items: flex-start;
   }
}

.guarantee {
   max-width: 640px;
   margin: 32px auto 0;
   padding: 16px 20px;
   text-align: center;
   font-size: 15.5px;
   background: var(--ok-soft);
   color: var(--text);
   border-radius: var(--r);
}


/* ---------- Language pages ----------
   Indian scripts need normal letter-spacing (negative tracking breaks
   conjuncts) and a little more line height for vowel signs. */
html:not(:lang(en)) * {
   letter-spacing: normal !important;
}

/* Indian-script words are longer and taller than English at the same size. */
html:not(:lang(en)) h1 {
   font-size: clamp(34px, 5.6vw, 68px);
   line-height: 1.22;
}

html:not(:lang(en)) h2 {
   font-size: clamp(28px, 4vw, 50px);
   line-height: 1.25;
}

html:not(:lang(en)) h1,
html:not(:lang(en)) h2,
html:not(:lang(en)) h3 {
   overflow-wrap: break-word;
}

html:not(:lang(en)) .hero__sub {
   font-size: clamp(18px, 2vw, 24px);
}

/* Translated nav labels are longer than the 1120px container allows: use the menu button at every width. */
@media all {
   html:not(:lang(en)) .nav__toggle {
      display: inline-flex;
   }

   html:not(:lang(en)) .nav__links {
      position: absolute;
      top: var(--nav-h);
      left: 0;
      right: 0;
      flex-direction: column;
      gap: 0;
      background: rgb(255 255 255 / .97);
      backdrop-filter: blur(20px);
      padding: 8px 22px 20px;
      display: none;
      border-bottom: 1px solid var(--line-soft);
   }

   html:not(:lang(en)) .nav__links.is-open {
      display: flex;
   }

   html:not(:lang(en)) .nav__links a {
      font-size: 17px;
      padding: 12px 0;
      opacity: 1;
      border-bottom: 1px solid var(--line-soft);
   }
}

html:not(:lang(en)) .nav__links a {
   white-space: nowrap;
}

html:not(:lang(en)) h3,
html:not(:lang(en)) .hero__sub,
html:not(:lang(en)) .lead {
   line-height: 1.4;
}

html:not(:lang(en)) body {
   line-height: 1.6;
}

/* ---------- Language switcher ---------- */
.lang {
   position: relative;
}

.lang summary {
   list-style: none;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   height: 32px;
   padding: 0 10px;
   border-radius: 980px;
   font-size: 13px;
   color: var(--text-2);
   cursor: pointer;
   user-select: none;
}

.lang summary::-webkit-details-marker {
   display: none;
}

.lang summary:hover,
.lang[open] summary {
   background: var(--bg-alt);
   color: var(--text);
}

.lang summary .i {
   width: 16px;
   height: 16px;
}

.lang__list {
   position: absolute;
   right: 0;
   top: calc(100% + 6px);
   z-index: 60;
   list-style: none;
   margin: 0;
   padding: 6px;
   min-width: 168px;
   background: var(--bg);
   border: 1px solid var(--line-soft);
   border-radius: 14px;
   box-shadow: 0 12px 32px rgb(0 0 0 / .12);
}

.lang__list a {
   display: block;
   padding: 8px 12px;
   border-radius: 8px;
   font-size: 15px;
   color: var(--text);
   text-decoration: none;
}

.lang__list a:hover {
   background: var(--bg-alt);
}

.lang__list a[aria-current="true"] {
   color: var(--accent);
   font-weight: 600;
}

@media (max-width: 600px) {
   .lang__current {
      display: none;
   }
}

.hero__demo {
   margin-top: 14px;
   font-size: 16px;
}

.hero__demo a,
.price-anchor a {
   color: var(--accent);
   font-weight: 500;
   text-decoration: none;
}

.hero__demo a:hover,
.price-anchor a:hover {
   text-decoration: underline;
}

.hero__demo .i {
   width: 15px;
   height: 15px;
   vertical-align: -2px;
}

.hero__sub,
.hero .eyebrow {
   text-wrap: balance;
}

.hero__sub b {
   display: block;
   margin-top: 10px;
   font-size: .8em;
   font-weight: 600;
   color: var(--text);
}

.pains__demo {
   text-align: center;
   margin-top: 12px;
   font-size: 17px;
}

.pains__demo a {
   color: var(--accent);
   font-weight: 500;
   text-decoration: none;
}

.pains__demo a:hover {
   text-decoration: underline;
}

.hero__by {
   margin-top: 14px;
   font-size: 15px;
   font-weight: 600;
   color: var(--text-2);
}

/* Hero: wider on desktop, light text below the form */
.hero__in.narrow {
   max-width: 1000px;
}

.hero__sub {
   max-width: 860px;
}

.hero__fine {
   font-size: 14.5px;
   color: var(--text-2);
}

.hero__fine b {
   color: var(--text);
}

.hero__consent {
   margin-top: 4px;
   font-size: 12.5px;
   color: var(--text-3);
}

.hero__consent a {
   color: inherit;
}

.hero__by {
   margin-top: 14px;
   font-size: 15px;
   font-weight: 600;
   color: var(--text-2);
}

.hero__by a {
   color: var(--accent);
   text-decoration: none;
   font-weight: 600;
}

.hero__by a:hover {
   text-decoration: underline;
}

.hero__by .i {
   width: 15px;
   height: 15px;
   vertical-align: -2px;
}

@media (min-width: 900px) {
   .hero__sub {
      text-wrap: pretty;
      max-width: 900px;
   }
}

/* ==========================================================================
   Nov 2026 audit additions: hero secondary CTA, grouped feature map,
   roles block, demo section, privacy note, footer.
   ========================================================================== */

/* Hero: bring the product screen closer to the fold */
.hero {
   padding-top: clamp(40px, 6vw, 72px);
}

.hero__alt {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 10px 16px;
   margin-top: 22px;
}

.hero__alt span {
   font-size: 14.5px;
   color: var(--text-2);
}

.hero__alt .i,
.dcta .i {
   width: 16px;
   height: 16px;
}

.hero__by {
   margin-top: 18px;
}

/* Feature map: four labelled groups */
.fmap--groups {
   grid-template-columns: repeat(4, 1fr);
   max-width: var(--container);
   gap: 28px 20px;
   text-align: left;
}

.fmap--groups .fmap__group {
   padding-top: 14px;
   border-top: 1px solid var(--line);
}

.fmap--groups ul {
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   gap: 4px;
}

.fmap--groups a {
   background: transparent;
   border: 0;
   padding: 6px 0;
   border-radius: 6px;
}

.fmap--groups a:hover {
   color: var(--accent);
   text-decoration: underline;
   text-underline-offset: 3px;
}

@media (max-width: 834px) {
   .fmap--groups {
      grid-template-columns: repeat(2, 1fr);
   }
}

/* Roles: who sees what */
.roles {
   margin-top: clamp(80px, 10vw, 128px);
}

.roles__title {
   font-size: clamp(30px, 4.2vw, 48px);
   font-weight: 700;
   line-height: 1.08;
   letter-spacing: -0.035em;
}

.roles .lead {
   margin-top: 16px;
}

.roles__grid {
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
   gap: 48px;
   align-items: center;
   margin-top: 56px;
}

.roles__notes {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 26px;
}

.roles__notes h4 {
   margin: 0 0 4px;
   font-size: 17px;
   font-weight: 600;
   letter-spacing: -0.015em;
}

.roles__notes p {
   color: var(--text-2);
   font-size: 16px;
}

@media (max-width: 834px) {
   .roles__grid {
      grid-template-columns: 1fr;
      gap: 36px;
   }
}

/* Demo section */
.dsteps {
   list-style: none;
   counter-reset: d;
   margin: 56px auto 0;
   padding: 0;
   max-width: 980px;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 12px;
}

.dsteps li {
   counter-increment: d;
   padding: 16px 14px 18px;
   border: 1px solid var(--line-soft);
   border-radius: 14px;
   font-weight: 600;
   font-size: 15px;
   line-height: 1.3;
   letter-spacing: -0.01em;
}

.dsteps li::before {
   content: counter(d);
   display: block;
   font-size: 13px;
   font-weight: 700;
   color: var(--accent);
   margin-bottom: 8px;
   font-variant-numeric: tabular-nums;
}

.dsteps__who {
   display: block;
   font-size: 12px;
   font-weight: 600;
   color: var(--text-3);
   text-transform: uppercase;
   letter-spacing: .05em;
   margin-bottom: 4px;
}

.dcta {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 12px;
   margin-top: 40px;
}

@media (max-width: 1060px) {
   .dsteps {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media (max-width: 600px) {
   .dsteps {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
   }

   .dcta .pill {
      width: 100%;
   }
}

/* Privacy: scope note */
.pnote {
   max-width: 760px;
   margin: 64px auto 0;
   padding-top: 28px;
   border-top: 1px solid #333336;
   text-align: center;
   font-size: 15px;
   color: #a1a1a6;
}

.pnote a {
   color: #f5f5f7;
   text-decoration: underline;
   text-underline-offset: 3px;
}

/* Footer */
.footer {
   padding-top: 48px;
   font-size: 13px;
}

.footer__top {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr;
   gap: 32px;
   padding-bottom: 32px;
   margin-bottom: 20px;
   border-bottom: 1px solid var(--line);
}

.footer__brand p {
   margin-top: 10px;
   font-size: 14px;
   color: var(--text-2);
}

.footer .footer__nav {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.footer__h {
   font-size: 12px;
   font-weight: 600;
   color: var(--text);
   text-transform: uppercase;
   letter-spacing: .06em;
   margin-bottom: 4px;
}

.footer .footer__nav a {
   color: var(--text-2);
   font-size: 14px;
}

.footer__fine + .footer__fine {
   padding-top: 0;
}

.footer__fine {
   border-bottom: 0;
}

.footer__bar {
   border-top: 1px solid var(--line);
}

@media (max-width: 600px) {
   .footer__top {
      grid-template-columns: 1fr 1fr;
   }

   .footer__brand {
      grid-column: 1 / -1;
   }
}

/* Long Tamil/Malayalam words: let the roles matrix and call banner shrink and wrap at 360px */
.two {
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.two__col > span,
.two__h,
.duo__banner p,
.duo__banner .ui__btn {
   min-width: 0;
   overflow-wrap: anywhere;
}

.duo__banner .ui__btn {
   white-space: normal;
}

.fx > *,
.flow > *,
.dsteps > * {
   min-width: 0;
}

.fx__tag,
.fx h3,
.dsteps li {
   overflow-wrap: anywhere;
}

/* Long translated button labels (e.g. Tamil) must wrap instead of overflowing on phones */
.pill {
   max-width: 100%;
}

@media (max-width: 600px) {
   .pill:not(.pill--sm) {
      white-space: normal;
      text-align: center;
      line-height: 1.25;
   }
}