/* optilyn.com — style system.
   Distinct from the sibling teknoble.com site on purpose: a light, sticky
   nav carrying OptiLyn's own real logo (navy/cyan, not teal), a serif
   display face for headlines (premium-optical, boutique feel) paired with
   a plain system-sans body, and a single dark hero moment per page rather
   than teknoble.com's flipping-color header. No CDN, no framework, no
   webfont — the serif is a system stack. */

/* ============================================================ RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

/* ============================================================ TOKENS */
:root {
  --navy-950: #071021;
  --navy-900: #0c1b33;
  --navy-800: #122548;
  --ink:    #101826;
  --body:   #3c4457;
  --muted:  #6b7385;
  --line:        #e7eaf1;
  --line-strong: #d6dbe6;
  --bg:      #ffffff;
  --bg-alt:  #f6f8fc;
  --surface:   #ffffff;  /* cards, panels, inputs */
  --surface-2: var(--surface-2);  /* card footers, quiet fills */
  --surface-3: var(--surface-3);  /* tracks, dividers inside cards */
  --header-bg: rgba(255,255,255,.92);
  --glass:     rgba(255,255,255,.97);
  --accent-ink: #0b3d91; /* accent used as TEXT — must stay readable on --surface */
  --danger:    var(--danger);

  --accent:   #1c8fe0;  /* OptiLyn blue, from the real logo */
  --accent-2: #0b3d91;  /* deeper blue, for gradients/hover */
  --gold:     #e0a72e;  /* used sparingly — a glint, not a second theme */

  --tier-core:    #475569;  /* slate — entry tier */
  --tier-pro:     var(--accent);
  --tier-premium: var(--gold);

  --radius:    16px;
  --radius-lg: 22px;
  --sh-sm: 0 1px 2px rgba(9,20,40,.06), 0 1px 1px rgba(9,20,40,.04);
  --sh-md: 0 8px 24px rgba(9,20,40,.08);
  --sh-lg: 0 20px 48px rgba(9,20,40,.12);
  --sh-xl: 0 28px 64px rgba(9,20,40,.16);

  --ease: cubic-bezier(.22,.8,.32,1);

  --f-serif: ui-serif, Georgia, 'Times New Roman', 'Noto Serif', serif;
  --f-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --f-xs:  .8rem;
  --f-sm:  .95rem;
  --f-base: 1rem;
  --f-md:  clamp(1.15rem, 1.05rem + .4vw, 1.3rem);
  --f-lg:  clamp(1.5rem, 1.3rem + .8vw, 1.9rem);
  --f-xl:  clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  --f-2xl: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --f-3xl: clamp(3rem, 2rem + 4.5vw, 5.4rem);
}

body {
  font-family: var(--f-sans);
  color: var(--body);
  background: var(--bg);
  font-size: var(--f-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--f-serif); color: var(--ink); line-height: 1.14; font-weight: 600; }
h1 { font-size: var(--f-3xl); letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: var(--f-2xl); letter-spacing: -.005em; }
h3 { font-size: var(--f-lg); }
p.lead { font-size: var(--f-md); color: var(--body); line-height: 1.55; }
.muted { color: var(--muted); }
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.section { padding-block: clamp(3.5rem, 5vw, 6rem); }
.section-alt { background: var(--bg-alt); }
[hidden] { display: none !important; }

/* ============================================================ REVEAL */
.no-js .reveal { opacity: 1 !important; transform: none !important; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .05s; }
.reveal[data-delay="2"] { transition-delay: .1s; }
.reveal[data-delay="3"] { transition-delay: .15s; }
.reveal[data-delay="4"] { transition-delay: .2s; }
.reveal[data-delay="5"] { transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ============================================================ BUTTONS */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: .85rem 1.5rem; border-radius: 999px; font-weight: 640; font-size: var(--f-sm);
  border: 1.5px solid transparent; cursor: pointer; transition: transform .22s var(--ease), box-shadow .22s, background .22s, border-color .22s, color .22s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: var(--sh-md); }
.btn-primary:hover { box-shadow: var(--sh-lg); }
.btn-ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); }
.btn-outline { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: .6rem 1.15rem; font-size: var(--f-xs); }

/* ============================================================ HEADER */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--header-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 8px; gap: 20px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.brand-logo { display: block; height: 32px; width: auto; }
.brand-maker { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); opacity: .85; }
.brand-maker img { border-radius: 3px; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a:not(.btn) { font-size: var(--f-sm); font-weight: 560; color: var(--body); transition: color .2s; }
.site-nav a:not(.btn):hover, .site-nav a.is-active { color: var(--accent); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--surface); padding: 10px 16px; border-radius: 10px; z-index: 100; box-shadow: var(--sh-md); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed; inset: 0 0 auto 0; top: 68px; background: var(--surface); flex-direction: column;
    align-items: stretch; padding: 18px 24px 26px; border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-lg); transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .25s var(--ease), opacity .25s var(--ease);
  }
  .site-nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .site-nav a:not(.btn) { padding: 12px 4px; border-bottom: 1px solid var(--line); }
  .site-nav .btn { margin-top: 12px; }
}

/* ============================================================ HERO (dark) */
.hero-dark { position: relative; background: var(--navy-950); color: #fff; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.mesh { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: drift 26s ease-in-out infinite; }
.mesh-1 { width: 520px; height: 520px; background: radial-gradient(circle, var(--accent), transparent 70%); top: -160px; left: -120px; }
.mesh-2 { width: 460px; height: 460px; background: radial-gradient(circle, var(--accent-2), transparent 70%); bottom: -180px; right: -100px; animation-delay: -8s; }
.mesh-3 { width: 360px; height: 360px; background: radial-gradient(circle, var(--gold), transparent 72%); top: 30%; right: 18%; opacity: .18; animation-delay: -16s; }
@keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px,-18px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .mesh { animation: none; } }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(180deg, #000, transparent 85%); }
.hero-grain { position: absolute; inset: 0; opacity: .35; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.hero-spot { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx,50%) var(--my,20%), rgba(28,143,224,.16), transparent 60%); transition: background .25s; }

.h-hero-inner, .p-hero-inner { position: relative; padding-block: clamp(3.6rem, 8vw, 7rem); }
.p-hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.p-hero-copy { max-width: 560px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .9rem;
  font-size: var(--f-xs); text-transform: uppercase; letter-spacing: .16em; font-weight: 700;
  color: var(--accent-ink); font-family: var(--f-sans);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; opacity: .55; }
.hero-dark h1, .hero-dark h2, .hero-dark h3 { color: #fff; }
.hero-dark .eyebrow { color: #7ec4f2; }
.h-hero-inner h1 { max-width: 820px; }
.h-hero-inner .grad, .grad { background: linear-gradient(100deg, #bcdfff, #5fb3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-hero-inner .lead, .p-hero-inner .lead { max-width: 640px; margin-top: 1.2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.8rem; }
.h-chips, .hero-points { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 2.2rem; }
.hero-points li { display: flex; align-items: center; gap: 9px; font-size: var(--f-sm); color: rgba(255,255,255,.82); }
.hero-points .icon { color: var(--accent); flex: none; }

.page-hero-sm .p-hero-inner, .page-hero-sm { padding-block: clamp(2.6rem, 5vw, 4rem); }

/* ============================================================ PRODUCT SURFACE (hero mockup) */
.surface-wrap { position: relative; perspective: 2000px; }
.surface {
  position: relative; border-radius: 16px; overflow: hidden; background: #fdfefe;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 100px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.3);
  transform: rotateX(6deg) rotateY(-10deg) rotateZ(1deg); transform-style: preserve-3d;
  animation: surfaceIn 1.2s var(--ease) both .25s;
}
@keyframes surfaceIn { from { opacity: 0; transform: rotateX(14deg) rotateY(-18deg) translateY(40px) scale(.94); } to { opacity: 1; transform: rotateX(6deg) rotateY(-10deg) rotateZ(1deg); } }
.sf-top { display: flex; align-items: center; gap: 14px; padding: 11px 16px; background: linear-gradient(180deg, var(--navy-800), var(--navy-900)); }
.sf-dots { display: flex; gap: 6px; }
.sf-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.sf-branch { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.09); padding: 4px 11px; border-radius: 100px; }
.sf-branch::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.sf-body { display: grid; grid-template-columns: 56px 1fr; min-height: 340px; }
.sf-rail { background: var(--navy-950); padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sf-rail i { width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.1); display: block; }
.sf-rail i.on { background: var(--accent); box-shadow: 0 0 16px rgba(28,143,224,.6); }
.sf-main { padding: 15px; background: #f6f8fb; display: grid; gap: 11px; align-content: start; }
.sf-row { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; }
.sf-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex: none; }
.sf-name { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.sf-sub { font-size: 9.5px; color: var(--muted); }
.sf-pill { margin-left: auto; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 100px; background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--accent-ink); }
.sf-rx { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.sf-rx-h { display: grid; grid-template-columns: 34px repeat(4, 1fr); background: var(--navy-950); }
.sf-rx-h span { font-size: 8.5px; font-weight: 700; letter-spacing: .07em; color: rgba(255,255,255,.85); padding: 6px 7px; text-align: center; }
.sf-rx-r { display: grid; grid-template-columns: 34px repeat(4, 1fr); border-top: 1px solid var(--line); animation: slideIn .55s var(--ease) both; }
.sf-rx-r:nth-of-type(2) { animation-delay: .9s; }
.sf-rx-r:nth-of-type(3) { animation-delay: 1.05s; }
.sf-rx-r span { font-size: 10px; padding: 6px 7px; text-align: center; color: var(--ink); font-variant-numeric: tabular-nums; }
.sf-rx-r span:first-child { font-weight: 700; color: var(--accent); }
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.sf-lines { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 4px 0; }
.sf-line { display: grid; grid-template-columns: 1fr 44px 54px; gap: 8px; padding: 7px 11px; align-items: center; animation: slideIn .5s var(--ease) both; }
.sf-line:nth-of-type(1) { animation-delay: 1.2s; }
.sf-line:nth-of-type(2) { animation-delay: 1.32s; }
.sf-line:nth-of-type(3) { animation-delay: 1.44s; }
.sf-line + .sf-line { border-top: 1px solid var(--surface-3); }
.sf-line b { font-size: 10.5px; font-weight: 600; color: var(--ink); }
.sf-line span { font-size: 10px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.sf-line span.amt { color: var(--ink); font-weight: 650; }
.sf-total { display: flex; justify-content: space-between; align-items: center; background: var(--navy-950); border-radius: 9px; padding: 11px 13px; animation: slideIn .5s var(--ease) both 1.6s; }
.sf-total .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.6); }
.sf-total .v { font-size: 15px; font-weight: 750; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sf-float {
  position: absolute; z-index: 2; background: var(--glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 13px; padding: 11px 14px;
  box-shadow: 0 20px 44px rgba(0,0,0,.3); animation: floatIn .8s var(--ease) both;
}
.sf-float .k { font-size: 9px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; }
.sf-float .v { font-size: 17px; font-weight: 750; color: var(--ink); letter-spacing: -.025em; line-height: 1.15; }
.sf-float-1 { top: 16%; left: -10%; animation-delay: 1.5s; }
.sf-float-2 { bottom: 12%; right: -8%; animation-delay: 1.75s; }
@keyframes floatIn { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .surface { transform: none; animation: none; opacity: 1; } .sf-float { display: none; } }

/* ============================================================ STATS BAND */
.stats-band { background: var(--navy-900); color: #fff; padding-block: clamp(2.6rem, 5vw, 3.6rem); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 28px; }
.stat { padding-left: 18px; border-left: 2px solid; border-image: linear-gradient(180deg, var(--accent), transparent) 1; }
.stat-value { font-family: var(--f-serif); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-label { font-weight: 600; font-size: var(--f-sm); margin-top: .3rem; }
.stat-note { font-size: var(--f-xs); color: rgba(255,255,255,.5); margin-top: .15rem; }

/* ============================================================ FLOW */
.flow { list-style: none; padding: 0; margin: 0; }
.flow-step { display: grid; grid-template-columns: 52px 1fr; gap: 22px; padding-bottom: 2.4rem; position: relative; }
.flow-step:last-child { padding-bottom: 0; }
.flow-step:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 52px; bottom: 2px; width: 2px; background: linear-gradient(180deg, var(--line-strong), transparent); }
.flow-marker { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--accent); font-family: var(--f-serif); font-weight: 700; }
.flow-body h3 { padding-top: .8rem; font-size: var(--f-md); margin-bottom: .3rem; }
.flow-body p { margin: 0; font-size: var(--f-sm); }

/* ============================================================ REPLACES (today vs OptiLyn) */
.replaces { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.replaces-row { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; background: var(--surface); padding: 1.1rem 1.4rem; gap: 12px; }
.replaces-row .from { color: var(--body); font-size: var(--f-sm); text-decoration: line-through; text-decoration-color: rgba(217,69,90,.85); text-decoration-thickness: 1.5px; }
.replaces-row .to { color: var(--ink); font-weight: 560; font-size: var(--f-sm); }
.replaces-row .arrow-mid { color: var(--accent); display: flex; justify-content: center; }
@media (max-width: 700px) {
  .replaces-row { grid-template-columns: 1fr; gap: 6px; text-align: left; }
  .replaces-row .arrow-mid { display: none; }
}

/* ============================================================ MODULE SHEET (no click required) */
.mod-sheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.mod-cell { position: relative; background: var(--surface); padding: 1.9rem 1.7rem 1.7rem; transition: background .22s; }
.mod-cell:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.mod-num { position: absolute; top: 10px; right: 16px; font-family: var(--f-serif); font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--line-strong); }
.mod-cell h3 { display: flex; align-items: center; gap: 10px; font-size: var(--f-md); font-family: var(--f-sans); font-weight: 700; margin: 0 0 .55rem; padding-right: 2.4rem; }
.mod-cell-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }
.mod-cell p { margin: 0; font-size: var(--f-sm); }

/* ============================================================ DEEP DIVES */
.deep-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.deep-flip .deep-copy { order: 2; }
.deep-visual { display: flex; justify-content: center; }
.check-list { list-style: none; padding: 0; margin: 1.3rem 0 1.6rem; }
.check-list li { position: relative; padding-left: 1.9rem; margin: .65rem 0; font-size: var(--f-sm); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 15px; height: 15px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c8fe0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E") center/9px no-repeat;
}
.vis { width: 100%; max-width: 410px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-lg); overflow: hidden; }
.vis-head { display: flex; align-items: center; gap: 9px; padding: 12px 16px; background: var(--navy-900); color: #fff; font-size: var(--f-xs); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.vis-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.vis-foot, .vis-prev { padding: 11px 16px; border-top: 1px solid var(--line); font-size: var(--f-xs); color: var(--muted); background: var(--surface-2); }
.vis-prev { display: flex; justify-content: space-between; gap: 10px; }
.vis-rx table { width: 100%; border-collapse: collapse; font-size: var(--f-sm); font-variant-numeric: tabular-nums; }
.vis-rx th, .vis-rx td { padding: 10px 12px; text-align: center; }
.vis-rx thead th { background: #f4f7fb; font-size: var(--f-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.vis-rx tbody th { text-align: left; font-weight: 700; color: var(--accent); }
.vis-rx tbody tr + tr td, .vis-rx tbody tr + tr th { border-top: 1px solid var(--line); }
.vis-grid .cells { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; padding: 15px; }
.vis-grid .cells i { aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; font-style: normal; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vis-grid .lvl-0 { background: var(--surface-3); color: var(--muted); }
.vis-grid .lvl-1 { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent-ink); }
.vis-grid .lvl-2 { background: color-mix(in srgb, var(--accent) 40%, var(--surface)); color: var(--accent-ink); }
.vis-grid .lvl-3 { background: var(--accent); color: #fff; }
.vis-legend { display: flex; gap: 15px; padding: 11px 16px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: var(--f-xs); color: var(--muted); }
.vis-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vis-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.vis-branch .br, .vis-roles .role { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px; padding: 12px 16px; }
.vis-branch .br-name, .vis-roles .role-name { font-size: var(--f-sm); font-weight: 620; color: var(--ink); }
.vis-branch .br-bar { height: 9px; border-radius: 5px; background: var(--surface-3); overflow: hidden; }
.vis-branch .br-bar i { display: block; height: 100%; width: var(--pct); border-radius: 5px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: left; animation: barIn 1.1s var(--ease) both; animation-delay: var(--d); }
@keyframes barIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vis-roles .role-bits { display: flex; gap: 6px; }
.vis-roles .role-bits i { width: 100%; height: 10px; border-radius: 3px; background: var(--surface-3); animation: bitIn .5s both; animation-delay: var(--d); }
.vis-roles .role-bits i.on { background: var(--accent); }
@keyframes bitIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Dashboard mockup */
.dash-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); }
.dash-tile { background: var(--surface); padding: 12px 10px; display: flex; flex-direction: column; gap: 3px; }
.dash-tile .k { font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.dash-tile .v { font-size: 13px; font-weight: 750; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-rank { padding: 13px 16px 4px; }
.dash-rank-head { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; margin-bottom: 9px; }
.dash-rank-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 10px; padding: 6px 0; animation: slideIn .5s var(--ease) both; animation-delay: var(--d); }
.dash-rank-name { font-size: 10.5px; color: var(--ink); font-weight: 600; }
.dash-rank-bar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.dash-rank-bar i { display: block; height: 100%; width: var(--pct); border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: left; animation: barIn 1.1s var(--ease) both; }

/* POS / counter mockup */
.pos-search { margin: 13px 16px 4px; padding: 8px 12px; border: 1.5px solid var(--line-strong); border-radius: 8px; font-size: 10.5px; color: var(--muted); background: var(--surface-2); }
.pos-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 9px 16px; animation: slideIn .5s var(--ease) both; animation-delay: var(--d); }
.pos-row + .pos-row { border-top: 1px solid var(--surface-3); }
.pos-row-main { display: flex; flex-direction: column; gap: 1px; }
.pos-row-main b { font-size: 10.5px; color: var(--ink); font-weight: 700; }
.pos-row-main span { font-size: 9px; }
.pos-stock { font-size: 9px; color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); padding: 3px 8px; border-radius: 100px; font-weight: 650; white-space: nowrap; }
.pos-price { font-size: 10.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================ STRENGTHS / INDUSTRIES / DEPLOYMENT */
.str-grid, .ind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 26px 34px; }
.str, .ind-card {
  display: flex; gap: 16px; padding: 1.7rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.str:hover, .ind-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: transparent; }
.str-icon, .ind-icon, .dep-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), color-mix(in srgb, var(--accent-2) 10%, var(--surface))); color: var(--accent-ink);
}
.str h3, .ind-card h3 { font-size: var(--f-md); font-family: var(--f-sans); font-weight: 700; margin-bottom: .3rem; }
.ind-card { flex-direction: column; }
.ind-card .ind-icon { margin-bottom: .6rem; }

.dep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 24px; }
.dep { padding: 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--sh-sm); }
.dep-icon { margin-bottom: 1rem; }
.dep h3 { margin-bottom: .5rem; }

/* ============================================================ QUOTES / TESTIMONIALS */
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 22px; }
.quote-card { margin: 0; padding: 1.9rem 2rem; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); box-shadow: var(--sh-sm); }
.quote-card blockquote { margin: 0 0 1.1rem; font-family: var(--f-serif); font-size: var(--f-md); line-height: 1.5; color: var(--ink); }
.quote-card figcaption { display: flex; flex-direction: column; gap: 2px; font-size: var(--f-sm); }
.dummy-flag { margin: 0 0 1.6rem; padding: .7rem 1rem; border-radius: 9px; background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; font-size: var(--f-sm); font-weight: 620; text-align: center; }

/* ============================================================ FAQ (no accordion) */
.faq-list { display: grid; gap: 1.6rem; margin: 0; }
.faq-item { padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.faq-item dt { font-weight: 700; font-size: var(--f-md); color: var(--ink); margin-bottom: .45rem; font-family: var(--f-serif); }
.faq-item dd { margin: 0; font-size: var(--f-sm); }

/* ============================================================ PRICING */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 22px; }
.price-factor { padding: 1.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.price-factor .str-icon { margin-bottom: 1rem; }
.price-cta { background: var(--navy-950); color: #fff; border-radius: var(--radius-lg); padding: clamp(2.2rem,4vw,3.2rem); text-align: center; position: relative; overflow: hidden; }
.price-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px circle at 50% 0%, rgba(28,143,224,.25), transparent 60%); }
.price-cta > * { position: relative; }
.price-cta h2 { color: #fff; }
.price-cta .lead { color: rgba(255,255,255,.75); margin: .8rem auto 1.8rem; max-width: 520px; }

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 24px; margin-bottom: 2.6rem; }
.plan-card { padding: 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--sh-sm); }
.plan-card-alt { border-color: var(--accent); box-shadow: var(--sh-md); position: relative; }
.plan-badge { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-ink); background: rgba(28,143,224,.1); padding: .3rem .7rem; border-radius: 999px; margin-bottom: .8rem; }
.plan-card h3 { margin-bottom: .2rem; }
.plan-model { font-size: var(--f-xs); margin-bottom: 1.2rem; }
.plan-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.plan-price-num { font-family: var(--f-serif); font-size: var(--f-xl); color: var(--ink); font-weight: 600; }
.plan-price-unit { font-size: var(--f-xs); color: var(--muted); }
.plan-sub { font-size: var(--f-xs); margin-top: .3rem; }
.plan-includes { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .65rem; }
.plan-includes li { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--f-sm); }
.plan-includes svg { flex-shrink: 0; margin-top: .15rem; color: var(--accent); }

.pricing-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.pricing-col { display: flex; flex-direction: column; gap: 20px; }
.pricing-col-head h3 { font-size: var(--f-lg); margin: .3rem 0 .5rem; }
.pricing-col-head p.muted { font-size: var(--f-sm); }
.plan-card-row { border-top-width: 4px; border-top-style: solid; border-top-color: var(--line-strong); }
.plan-card-row-head { display: flex; align-items: center; gap: 10px; margin-bottom: .3rem; }
.plan-flag { font-size: 11px; font-weight: 650; color: var(--muted); }
.plan-tier-core { border-top-color: var(--tier-core); }
.plan-tier-pro { border-top-color: var(--tier-pro); }
.plan-tier-premium { border-top-color: var(--tier-premium); }
.plan-tier-core-badge { background: rgba(71,85,105,.1); color: var(--tier-core); }
.plan-tier-pro-badge { background: rgba(28,143,224,.12); color: var(--tier-pro); }
.plan-tier-premium-badge { background: rgba(224,167,46,.15); color: #92700f; }
@media (max-width: 900px) { .pricing-columns { grid-template-columns: 1fr; gap: 48px; } }

.bracket-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); border-collapse: collapse; overflow: hidden; align-self: start; }
.bracket-table th, .bracket-table td { padding: .9rem 1.4rem; text-align: left; font-size: var(--f-sm); border-bottom: 1px solid var(--line); }
.bracket-table th { font-size: var(--f-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; background: var(--bg-alt); }
.bracket-table td:last-child { font-weight: 650; color: var(--ink); }
.bracket-table-note td { color: var(--muted); font-size: var(--f-xs); font-style: italic; border-bottom: 0; }
@media (max-width: 780px) { .cloud-layout { grid-template-columns: 1fr; } }

.calc-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem,3vw,2.4rem); }
.calc-head h3 { margin-bottom: .3rem; }
.calc-body { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; margin-top: 1.6rem; align-items: start; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px; gap: 4px; }
.seg-btn { border: 0; background: none; padding: .55rem 1.1rem; border-radius: 999px; font-size: var(--f-xs); font-weight: 640; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.seg-btn.is-active { background: var(--accent); color: #fff; }
.calc-toggle { margin-bottom: 1.2rem; }
#calc-branches { width: 100%; accent-color: var(--accent); margin-top: .3rem; }
.calc-branches-readout { font-size: var(--f-sm); color: var(--ink); font-weight: 600; margin-top: .4rem; }
.calc-note { font-size: var(--f-xs); margin-top: .4rem; }
.calc-result { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.calc-result-line { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .7rem; border-bottom: 1px solid var(--line); }
.calc-result-line:first-child { padding-top: 0; }
.calc-result-label { font-size: var(--f-xs); color: var(--muted); }
.calc-result-val { font-family: var(--f-serif); font-size: var(--f-md); color: var(--ink); font-weight: 600; text-align: right; }
.calc-result-cta { margin-top: 1.4rem; }
.calc-result-cta .btn { width: 100%; }
@media (max-width: 720px) { .calc-body { grid-template-columns: 1fr; } }

/* ============================================================ DEMO FORM */
.demo-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.demo-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--sh-md); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: var(--f-xs); font-weight: 650; color: var(--ink); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .04em; }
.field input, .field select, .field textarea {
  width: 100%; padding: .75rem .9rem; border: 1.5px solid var(--line-strong); border-radius: 10px;
  font: inherit; font-size: var(--f-sm); color: var(--ink); background: var(--surface); transition: border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 100px; }
.demo-aside { display: grid; gap: 18px; }
.demo-aside-item { display: flex; gap: 14px; align-items: flex-start; padding: 1.3rem; background: var(--bg-alt); border-radius: var(--radius); }
.demo-aside-item .icon-wrap { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); }
.demo-aside-item h3 { font-size: var(--f-base); font-family: var(--f-sans); font-weight: 700; margin-bottom: .2rem; }
.demo-aside-item p { font-size: var(--f-sm); margin: 0; }
@media (max-width: 860px) { .demo-panel { grid-template-columns: 1fr; } }

/* ============================================================ CTA BAND */
.cta-band { background: var(--bg-alt); border-top: 1px solid var(--line); }
.cta-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================ PROSE (plain narrow content pages) */
.wrap.narrow > h2 { font-size: var(--f-xl); margin-top: 2.4rem; margin-bottom: .7rem; }
.wrap.narrow > h2:first-child { margin-top: 0; }
.wrap.narrow > p { margin-bottom: 1.1rem; font-size: var(--f-sm); }
.wrap.narrow > p.lead { font-size: var(--f-md); }
.wrap.narrow > ul.check-list { margin-bottom: 1.4rem; }

/* ============================================================ SEC HEAD */
.sec-head { max-width: 680px; margin-bottom: 2.6rem; }
.sec-head h2 { margin-top: .5rem; }
.sec-head .lead { margin-top: .8rem; }

/* ============================================================ FOOTER */
.site-footer { background: var(--navy-950); color: rgba(255,255,255,.7); padding-block: 3.4rem 1.6rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 2.4rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand p { margin: .9rem 0 1rem; font-size: var(--f-sm); max-width: 320px; }
.maker-credit { display: inline-flex; align-items: center; gap: 7px; font-size: var(--f-xs); color: rgba(255,255,255,.55); }
.maker-credit img { border-radius: 3px; }
.maker-credit:hover { color: #fff; }
.site-footer h4 { color: #fff; font-family: var(--f-sans); font-size: var(--f-sm); margin-bottom: .9rem; }
.site-footer ul { display: grid; gap: .55rem; }
.site-footer a { font-size: var(--f-sm); color: rgba(255,255,255,.65); }
.site-footer a:hover { color: #fff; }
.footer-legal { padding-top: 1.6rem; font-size: var(--f-xs); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ============================================================ RESPONSIVE */
@media (max-width: 900px) {
  .deep-inner { grid-template-columns: 1fr; gap: 32px; }
  .deep-flip .deep-copy { order: 0; }
  .demo-panel { grid-template-columns: 1fr; }
  .p-hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .p-hero-copy { max-width: none; }
  /* Copy before decoration: the mockup is aria-hidden, and putting it
     first pushed the headline and both CTAs below the fold on a phone. */
  .surface-wrap { order: 1; }
}
@media (max-width: 640px) {
  .mod-sheet { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2,1fr); }
  .sf-body { min-height: 280px; }
  .replaces-row { padding: .9rem 1.1rem; }
}

/* ============================================================================
   V2 REFINEMENTS
   ----------------------------------------------------------------------------
   Everything below is new for the ASP.NET build. Two jobs:

     1. Components the PHP site did not have — the module tiles that replaced a
        wall of paragraphs on the homepage, the FAQ accordion that replaced six
        open answers, the hero chips, the styled range track.

     2. A pass of polish on what was already here — a hairline reading-progress
        bar, a nav that gains depth once you scroll off the hero, consistent
        hover lift on every card, and one real focus ring instead of the
        browser default.

   Appended rather than merged into the sections above so the diff against
   optilyn.com stays readable: everything before this line is the original
   stylesheet, unchanged.
   ========================================================================== */

/* ─────────────────────────────────── Reading progress */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
  pointer-events: none; background: transparent;
}
.scroll-progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* ─────────────────────────────────── Header, once scrolled */
.site-header { transition: box-shadow .3s var(--ease), background .3s var(--ease); }
.site-header.is-stuck {
  background: var(--header-bg);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(9,20,40,.06);
}

/* ─────────────────────────────────── Hero chips
   Replaces the three-line bullet list: same three claims, a third of the
   vertical space, and they read as attributes rather than as prose. */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.6rem 0 0; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: .42rem .85rem .42rem .7rem; border-radius: 999px;
  font-size: var(--f-xs); font-weight: 620; letter-spacing: .01em;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.chip .icon { color: var(--accent); flex: none; }

/* ─────────────────────────────────── Module tiles (homepage)
   The long descriptions moved to the Features page; here each module gets one
   line, so twelve of them still scan in a few seconds. */
.mod-tiles {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.mod-tile {
  padding: 1.3rem 1.35rem 1.4rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--sh-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.mod-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.mod-tile-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px; margin-bottom: .85rem;
  color: var(--accent);
  background: linear-gradient(160deg, rgba(28,143,224,.13), rgba(11,61,145,.07));
  border: 1px solid rgba(28,143,224,.18);
}
.mod-tile h3 { font-size: var(--f-base); margin-bottom: .3rem; }
.mod-tile p { font-size: var(--f-sm); line-height: 1.5; }

.sec-more { margin-top: 1.9rem; }

/* ─────────────────────────────────── FAQ accordion
   details/summary, so it still works with JavaScript off. */
.faq-acc { border-top: 1px solid var(--line); }
.faq-q { border-bottom: 1px solid var(--line); }
.faq-q > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-family: var(--f-serif); font-size: var(--f-md); font-weight: 600;
  color: var(--ink); transition: color .2s;
}
.faq-q > summary::-webkit-details-marker { display: none; }
.faq-q > summary:hover { color: var(--accent); }
.faq-mark {
  position: relative; flex: none; width: 18px; height: 18px;
  border-radius: 50%; border: 1.5px solid var(--line-strong);
  transition: border-color .2s, transform .25s var(--ease);
}
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; inset: 50% 4px auto; height: 1.5px;
  background: var(--muted); border-radius: 2px; transform: translateY(-50%);
  transition: opacity .2s, background .2s;
}
.faq-mark::after { transform: translateY(-50%) rotate(90deg); }
.faq-q[open] .faq-mark { border-color: var(--accent); transform: rotate(90deg); }
.faq-q[open] .faq-mark::after { opacity: 0; }
.faq-q[open] .faq-mark::before { background: var(--accent); }
.faq-q > p { margin: 0; padding: 0 40px 1.35rem 0; font-size: var(--f-sm); }

/* ─────────────────────────────────── Prose (About) */
.prose h2 { margin-top: 2.6rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: 1rem; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Three-up rather than auto-fit, so the three rules on About never orphan one
   card onto a row of its own. */
@media (min-width: 900px) { .str-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ─────────────────────────────────── Centred hero variants (404) */
.eyebrow-center { justify-content: center; }
.lead-center { margin-inline: auto; }
.hero-actions-center { justify-content: center; }

/* ─────────────────────────────────── Forms */
.field-error { display: block; margin-top: .35rem; font-size: var(--f-xs); color: #b3261e; }
/* Whole-form failure (nothing was recorded), as opposed to one bad field. */
.form-alert {
  margin-bottom: 1.1rem; padding: .8rem 1rem; border-radius: 10px;
  font-size: var(--f-sm); color: var(--danger);
  background: rgba(179,38,30,.07); border: 1px solid rgba(179,38,30,.22);
}
.form-alert a { color: var(--danger); text-decoration: underline; }
.field input:focus, .field select:focus, .field textarea:focus {
  box-shadow: 0 0 0 3px rgba(28,143,224,.16);
}
/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn-block { width: 100%; }

.demo-form-done { text-align: center; }
.demo-done-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: 1rem;
  color: #0f7b4f; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3);
}

/* ─────────────────────────────────── Pricing extras */
.plan-note { margin-top: 1rem; font-size: var(--f-xs); }
.plan-card-cloud { border-top-color: var(--accent); }
.plan-card { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.plan-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }

/* The range track fills to the thumb. --fill is set by the pricing script;
   with no JS the control still works, it just shows an unfilled track. */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px; margin: .6rem 0 0;
  background: linear-gradient(90deg, var(--accent) 0 var(--fill, 0%), var(--line-strong) var(--fill, 0%) 100%);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
  box-shadow: 0 2px 6px rgba(9,20,40,.2);
  transition: transform .15s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
  box-shadow: 0 2px 6px rgba(9,20,40,.2);
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }

/* ─────────────────────────────────── Shared polish */
.str, .ind-card, .price-factor, .dep {
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.str:hover, .ind-card:hover, .price-factor:hover, .dep:hover { transform: translateY(-2px); }

/* One visible focus ring for keyboard users, on every interactive element. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-dark a:focus-visible, .on-dark button:focus-visible { outline-color: #fff; }

/* ─────────────────────────────────── Dark sections, one rule for all of them
   Body copy inside a dark band has to be re-coloured or it inherits the light
   theme's slate (--body, #3c4457) and lands on navy at about 1.9:1. This used
   to be done per-hero-variant, which meant every hero except the homepage's
   shipped unreadable. Keyed off .on-dark instead, so a new dark section only
   has to carry the class. */
.on-dark { color: rgba(255,255,255,.8); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark p, .on-dark li, .on-dark dd { color: rgba(255,255,255,.8); }
.on-dark .lead { color: rgba(255,255,255,.82); }
.on-dark .muted { color: rgba(255,255,255,.66); }
.on-dark .eyebrow { color: #7ec4f2; }
.on-dark a:not(.btn) { color: #9fd2f7; }
.on-dark a:not(.btn):hover { color: #fff; }

/* The product mockups are light cards that can sit inside a dark band. They
   carry their own palette, so the .on-dark rules above must stop at their
   edge — otherwise the mockup renders white text on a white card. */
.on-dark .surface, .on-dark .vis { color: var(--body); }
.on-dark .surface h1, .on-dark .surface h2, .on-dark .surface h3, .on-dark .surface h4,
.on-dark .vis h1, .on-dark .vis h2, .on-dark .vis h3, .on-dark .vis h4 { color: var(--ink); }
.on-dark .surface p, .on-dark .surface li, .on-dark .vis p, .on-dark .vis li { color: var(--body); }
.on-dark .surface .muted, .on-dark .vis .muted { color: var(--muted); }

::selection { background: rgba(28,143,224,.22); color: var(--ink); }

/* The two floating cards sit proud of the product surface by a negative
   inset, which only has room on a wide screen. Below 1040px they hang off
   the edge and get clipped — the original stylesheet intended to hide them
   here and never did. */
@media (max-width: 1040px) { .sf-float { display: none; } }

/* On a phone the estimator stacks, and the serif price then breaks mid-figure
   ("PKR 80,000" over two lines). Let the label take the wrapping instead. */
@media (max-width: 560px) {
  .calc-result-val { white-space: nowrap; }
}

/* ============================================================================
   PRICING COMPARISON + FAQ PAGE
   ----------------------------------------------------------------------------
   The pricing page used to be two narrow columns — offline tiers stacked down
   the left, cloud down the right — which made the one thing a buyer came to do
   (compare a tier against a tier) close to impossible. It is now four steps:
   pick a model, scan four plans on one row, check the detail in a table, then
   price it.
   ========================================================================== */

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

.sec-head-center { max-width: 720px; margin-inline: auto; text-align: center; }

/* ─────────────────────────────────── Step 1: the two models */
.model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.model-card {
  display: flex; flex-direction: column;
  padding: 2rem 2rem 1.6rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--sh-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.model-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--line-strong); }
.model-card-top { display: flex; align-items: flex-start; gap: 14px; }
.model-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 46px; height: 46px; border-radius: 13px; color: var(--accent);
  background: linear-gradient(160deg, rgba(28,143,224,.14), rgba(11,61,145,.07));
  border: 1px solid rgba(28,143,224,.2);
}
.model-card h3 { font-size: var(--f-lg); }
.model-pitch { font-size: var(--f-sm); margin-top: .2rem; }

.model-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem;
  margin: 1.5rem 0 .2rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.model-price-lead { font-size: var(--f-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.model-price-num { font-family: var(--f-serif); font-size: var(--f-xl); font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.model-price-unit { font-size: var(--f-xs); color: var(--muted); width: 100%; }

.model-card .plan-includes { margin-top: 1.3rem; }
.model-suits {
  margin-top: auto; padding-top: 1.4rem;
  font-size: var(--f-xs); color: var(--muted); font-style: italic;
}

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

/* ─────────────────────────────────── Step 2: four plans on one row
   Four columns down to 1080px, then two, then one. Cards stretch so the
   price line and the CTA sit at the same height across all four — the thing
   that makes a row of plans scannable rather than four separate boxes. */
.plan-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; gap: 22px;
  align-items: stretch;
}
.plan-row .plan-card {
  display: flex; flex-direction: column; position: relative;
  padding: 1.8rem 1.5rem 1.6rem;
}
.plan-row .plan-badge { align-self: flex-start; }
.plan-row h3 { font-size: var(--f-base); }
.plan-row .plan-model { min-height: 2.6em; margin-bottom: .9rem; }
.plan-row .plan-price { margin-top: auto; }
.plan-row .plan-price-num { font-size: var(--f-lg); }
.plan-row .plan-price-unit { display: block; font-size: var(--f-xs); color: var(--muted); }
.plan-row .plan-sub { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--line); }
.plan-row .plan-includes { margin-top: 1.1rem; flex: 1; }
.plan-cta { margin-top: 1.4rem; }

/* The "most chosen" tier is lifted rather than merely labelled. */
.plan-card-featured { border-color: rgba(28,143,224,.45); box-shadow: var(--sh-md); }
.plan-ribbon {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: .25rem .75rem; border-radius: 999px;
  font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  color: #fff; background: linear-gradient(100deg, var(--accent-2), var(--accent));
  box-shadow: 0 4px 12px rgba(28,143,224,.35);
}

@media (max-width: 1080px) { .plan-row { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 620px)  { .plan-row { grid-template-columns: 1fr; } .plan-row .plan-model { min-height: 0; } }

/* ─────────────────────────────────── Step 3: the comparison table
   The feature column is sticky, so on a phone you can scroll the plans
   sideways and still know which row you are reading. */
.compare-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: var(--sh-sm);
  max-width: 820px; margin-inline: auto;
}
.compare { width: 100%; min-width: 520px; border-collapse: collapse; }
.compare th, .compare td { padding: .45rem .75rem; line-height: 1.35; text-align: center; font-size: var(--f-sm); }
.compare thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--navy-900); color: #fff;
  font-size: var(--f-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  padding-block: .6rem;
}
.compare thead th.is-featured { background: var(--accent-2); }

.compare .compare-feature {
  position: sticky; left: 0; z-index: 2;
  text-align: left; font-weight: 500; color: var(--ink); background: var(--surface);
  min-width: 200px; width: 46%; border-right: 1px solid var(--line);
}
.compare thead .compare-feature { background: var(--navy-900); color: #fff; z-index: 4; border-right-color: rgba(255,255,255,.14); }
.compare-note { display: block; margin-top: .1rem; font-size: var(--f-xs); font-weight: 400; color: var(--muted); }

.compare tbody tr { border-top: 1px solid var(--line); }
.compare tbody tr:hover td, .compare tbody tr:hover .compare-feature { background: var(--surface-3); }

.compare-group th {
  text-align: left; background: var(--bg-alt); color: var(--muted);
  font-size: var(--f-xs); text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  padding-block: .4rem;
}
.compare-group + tr { border-top: 0; }

.compare-yes svg { color: var(--accent-ink); margin-inline: auto; stroke-width: 2.6; }
.compare-no .dash { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--line-strong); }
.compare-text { font-size: var(--f-xs); color: var(--body); }
.compare td.is-featured { background: rgba(28,143,224,.045); }
.compare tbody tr:hover td.is-featured { background: rgba(28,143,224,.08); }

.compare-hint { margin-top: .9rem; font-size: var(--f-xs); }
@media (min-width: 860px) { .compare-hint { display: none; } }

/* ─────────────────────────────────── Cloud rate steps
   A row of steps rather than a table: the point is the shape of the curve,
   not four numbers to read carefully. */
.rate-panel {
  display: grid; grid-template-columns: minmax(280px, 1fr) 1.4fr; gap: 2.4rem;
  align-items: center;
}
.rate-copy h2 { margin: .5rem 0 .7rem; }
.rate-copy p { font-size: var(--f-sm); }
.rate-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rate-step {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.1rem 1rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  border-top: 3px solid var(--accent);
}
.rate-step:nth-child(2) { border-top-color: rgba(28,143,224,.75); }
.rate-step:nth-child(3) { border-top-color: rgba(28,143,224,.55); }
.rate-step:nth-child(4) { border-top-color: rgba(28,143,224,.35); }
.rate-step-k { font-size: var(--f-xs); color: var(--muted); font-weight: 620; }
.rate-step-v { font-family: var(--f-serif); font-size: var(--f-md); font-weight: 600; color: var(--ink); }

@media (max-width: 900px) { .rate-panel { grid-template-columns: 1fr; gap: 1.6rem; } }
@media (max-width: 620px) { .rate-steps { grid-template-columns: repeat(2, 1fr); } }

/* ─────────────────────────────────── FAQ page */
.faq-page { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; }

.faq-jump { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; }
.faq-jump a {
  display: flex; align-items: center; gap: 10px;
  padding: .7rem .8rem; border-radius: 10px;
  font-size: var(--f-sm); font-weight: 600; color: var(--body);
  transition: background .2s, color .2s;
}
.faq-jump a:hover { background: var(--bg-alt); color: var(--accent); }
.faq-jump svg { color: var(--accent); flex: none; }

.faq-groups { display: grid; gap: 3rem; }
/* Anchor targets clear the sticky header instead of hiding under it. */
.faq-group { scroll-margin-top: 88px; }
.faq-group-head {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--f-lg); margin-bottom: 1rem;
}
.faq-group-ico {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 10px; color: var(--accent);
  background: linear-gradient(160deg, rgba(28,143,224,.13), rgba(11,61,145,.07));
  border: 1px solid rgba(28,143,224,.18);
}

@media (max-width: 900px) {
  .faq-page { grid-template-columns: 1fr; gap: 2.4rem; }
  .faq-jump { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .faq-jump a { border: 1px solid var(--line); background: var(--surface); }
}

/* ─────────────────────────────────── "Ask us" panel */
.ask-panel {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.4rem; align-items: center;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--sh-sm);
}
.ask-panel h2 { margin: .5rem 0 .7rem; }
.ask-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.ask-actions .btn { width: 100%; }
.ask-link { align-self: center; font-size: var(--f-sm); font-weight: 620; color: var(--accent); }
.ask-link:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 800px) { .ask-panel { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ─────────────────────────────────── Nav breakpoint
   The nav gained a sixth item (FAQ) alongside the demo button, which wraps to
   two lines somewhere under 960px. Collapse to the menu button earlier rather
   than let the header grow a second row. The original 860px rule still
   applies everything else; this only moves where it starts. */
@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 14px 24px 22px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-md);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .25s var(--ease), opacity .25s var(--ease);
  }
  .site-nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .site-nav a:not(.btn) { padding: 12px 4px; border-bottom: 1px solid var(--line); }
  .site-nav .btn { margin-top: 12px; }
}
@media (min-width: 981px) and (max-width: 1120px) {
  .site-nav { gap: 20px; }
}

/* Grid and flex children refuse to shrink below their min-content by default,
   which pushes a page wider than the viewport on very narrow screens. Nothing
   in these cards needs that floor. */
.model-card, .plan-row .plan-card, .mod-tile, .compare-scroll { min-width: 0; }
.plan-includes li span, .model-suits, .compare-feature { overflow-wrap: anywhere; }

/* The group heading spans every column, so its text scrolls out of view as
   soon as the table is swiped sideways. Pinning the label inside the cell
   keeps "How it runs" on screen while you read the Cloud column. */
.compare-group th > span { position: sticky; left: 1rem; display: inline-block; }

/* ─────────────────────────────────── Mini Master Dashboard
   A compressed impression of the owner's screen, not a reproduction of it:
   period, three headline figures, a strip of tiles, two target gauges. The
   real page has eight tiles and nine charts, and at this size all of that
   would be noise. */
.vis-master .vis-head { display: flex; align-items: center; gap: 8px; }
/* .vis itself carries no padding — every block inside supplies its own, the
   way .vis-head and .vis-foot do. Without this the figures and tiles sit
   flush against the card edge. */
.md-band, .md-tiles, .md-split { padding-inline: 16px; }
.md-period {
  margin-left: auto; padding: .18rem .55rem; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--accent-ink); background: rgba(28,143,224,.12);
}

.md-band {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: .9rem 0 1rem; border-bottom: 1px solid var(--line);
}
.md-fig { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.md-fig .k { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.md-fig .v { font-family: var(--f-serif); font-size: 15px; font-weight: 600; color: var(--ink); }

.md-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 1rem 0; }
.md-tile {
  display: flex; flex-direction: column; gap: .1rem; min-width: 0;
  padding: .55rem .5rem; border-radius: 9px;
  background: var(--bg-alt); border: 1px solid var(--line);
  animation: md-pop .5s var(--ease) both; animation-delay: var(--d, 0ms);
}
.md-tile .k { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.md-tile .v { font-size: 13px; font-weight: 700; color: var(--ink); }
@keyframes md-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* A week of sales next to one gauge. Both are markup and CSS — no canvas and
   no charting library, so they stay sharp at any size and cost nothing. */
.md-split {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end;
  padding-top: .9rem; border-top: 1px solid var(--line);
}
.md-chart { min-width: 0; }
.md-chart-k {
  display: block; margin-bottom: .5rem;
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 700;
}
.md-bars { display: flex; align-items: flex-end; gap: 5px; height: 52px; }
.md-bars i {
  flex: 1; min-width: 0; height: var(--h, 50%); border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--accent), rgba(28,143,224,.45));
  transform-origin: bottom;
  animation: md-grow .55s var(--ease) both; animation-delay: var(--d, 0ms);
}
/* Today reads darker than the six days behind it. */
.md-bars i:last-child { background: linear-gradient(180deg, var(--accent-2), var(--accent)); }
@keyframes md-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.md-days { display: flex; gap: 5px; margin-top: 5px; }
.md-days span { flex: 1; min-width: 0; text-align: center; font-size: 9px; color: var(--muted); font-weight: 620; }

.md-gauge-cell { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.md-gauge {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  background: conic-gradient(var(--accent) 0 var(--pct), var(--line) var(--pct) 100%);
  display: grid; place-items: center;
}
.md-gauge::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface);
}
.md-gauge-num { position: relative; font-size: 11px; font-weight: 750; color: var(--ink); }
.md-gauge-k { font-size: 10px; color: var(--muted); font-weight: 620; line-height: 1.25; }

@media (prefers-reduced-motion: reduce) { .md-tile, .md-bars i { animation: none; } }
/* The visual column is narrow on a phone, and three money figures will not sit
   side by side in it. Stack the band into label/value rows rather than let the
   figures collide. */
@media (max-width: 560px) {
  .md-band { grid-template-columns: 1fr; gap: 6px; }
  .md-fig { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
  .md-tiles { grid-template-columns: repeat(2, 1fr); }
  .md-split { grid-template-columns: 1fr auto; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAY-PLAN SWITCH

   Two radios plus sibling selectors — no JavaScript. Both sets of figures are
   in the markup and this stylesheet hides one, so the switch works with
   scripting off and there is no flash of the wrong price on load.

   The radios must precede everything that reacts to them inside .plan-picker,
   because `~` only looks forward.
   ═════════════════════════════════════════════════════════════════════════ */
.plan-picker { position: relative; }

.payplan-input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}

.payplan-switch {
  display: flex; justify-content: center; gap: 6px;
  background: var(--bg-alt); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 5px;
  width: max-content; max-width: 100%; margin: 0 auto 1.6rem;
}

.payplan-tab {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.5rem; border-radius: 999px; cursor: pointer;
  font-size: var(--f-sm); font-weight: 640; color: var(--muted);
  transition: background .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.payplan-tab:hover { color: var(--ink); }
.payplan-tab .icon { flex: none; }

/* Selected tab. The radios sit at page level, before every section, so the
   rules reach into later siblings' descendants with `~ *`. */
#pay-once:checked    ~ * .payplan-tab[for="pay-once"],
#pay-monthly:checked ~ * .payplan-tab[for="pay-monthly"],
#host-shop:checked   ~ * .payplan-tab[for="host-shop"],
#host-cloud:checked  ~ * .payplan-tab[for="host-cloud"] {
  background: var(--accent); color: #fff; box-shadow: var(--sh-sm);
}

/* Keyboard focus ring drawn on the label, since the radio is visually hidden. */
#pay-once:focus-visible    ~ * .payplan-tab[for="pay-once"],
#pay-monthly:focus-visible ~ * .payplan-tab[for="pay-monthly"],
#host-shop:focus-visible   ~ * .payplan-tab[for="host-shop"],
#host-cloud:focus-visible  ~ * .payplan-tab[for="host-cloud"] {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* Show one combination's figures, notes and table; hide the rest. */
#pay-once:checked    ~ * .payplan-monthly,
#pay-monthly:checked ~ * .payplan-once,
#host-shop:checked   ~ * .host-cloud,
#host-cloud:checked  ~ * .host-shop { display: none; }

/* ── The two switches, side by side ─────────────────────────────────────── */
.choice-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem;
  margin-bottom: 1.4rem;
}
.choice { text-align: center; }
.choice-k {
  font-size: var(--f-xs); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .55rem;
}
.choice .payplan-switch { margin-bottom: 0; }

.host-line {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  max-width: 760px; margin: 0 auto 1.6rem; text-align: center;
  font-size: var(--f-sm); color: var(--body);
}
.host-line .icon { color: var(--accent); flex: none; }
.host-line strong { color: var(--ink); }

/* Cloud has two packages: keep the cards card-sized and centred. */
.plan-row.plan-row-2 { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; }
@media (max-width: 620px) { .plan-row.plan-row-2 { grid-template-columns: 1fr; } }
.compare-scroll-2 { max-width: 640px; }

/* ── The explainer under the switch ─────────────────────────────────────── */
.payplan-notes { max-width: 760px; margin: 0 auto 2.4rem; text-align: center; }
.payplan-note-pitch {
  font-family: var(--f-serif); font-size: var(--f-lg);
  color: var(--ink); margin-bottom: 1.1rem;
}
.payplan-note-points {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem .9rem;
}
.payplan-note-points li {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 999px; padding: .45rem .9rem;
  font-size: var(--f-xs); color: var(--body); text-align: left;
}
.payplan-note-points .icon { color: var(--accent); flex: none; }

.step-two-head { margin-top: 3.2rem; }

/* ── The crossover line ─────────────────────────────────────────────────── */
.plan-crossover {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  max-width: 760px; margin: 2rem auto 0; padding: 1rem 1.3rem;
  background: rgba(28,143,224,.06); border: 1px solid rgba(28,143,224,.22);
  border-radius: var(--radius); text-align: left;
  font-size: var(--f-sm); color: var(--body);
}
.plan-crossover .icon { color: var(--accent); flex: none; }
.plan-crossover strong { color: var(--ink); }

/* ── In-shop add-on ─────────────────────────────────────────────────────────
   Sits under the in-shop prices as an offer, not as a fourth price card: it is
   bought ON TOP of Core or Pro, and giving it a card would put it back in the
   position Premium used to occupy — read as a tier to choose between. Dashed
   border says "extra", solid cards say "pick one". */
.plan-addon {
  max-width: 760px; margin: 1rem auto 0; padding: 1.1rem 1.3rem;
  border: 1px dashed rgba(28,143,224,.38); border-radius: var(--radius);
  background: rgba(28,143,224,.04);
}
.plan-addon-k {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 .4rem;
  font-weight: 700; color: var(--ink); font-size: var(--f-sm);
}
.plan-addon-k .icon { color: var(--accent); flex: none; }
.plan-addon-body { margin: 0; font-size: var(--f-sm); color: var(--body); }
.plan-addon-body strong { color: var(--ink); }

/* ── Volume strip ───────────────────────────────────────────────────────── */
.volume-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .6rem .7rem; margin-top: 1.4rem;
}
.volume-strip-k {
  font-size: var(--f-xs); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  width: 100%; text-align: center; margin-bottom: .2rem;
}
.volume-chip {
  font-size: var(--f-xs); color: var(--body);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: .4rem .85rem;
}
.volume-chip b { color: var(--ink); }
.volume-strip-foot { width: 100%; text-align: center; font-size: var(--f-xs); color: var(--muted); margin-top: .2rem; }

/* Deployment cards carry no price, so their footer says so rather than
   naming a buyer segment. */
.model-suits-free {
  color: var(--accent-ink); font-weight: 640;
}

/* ── Estimator: two plans side by side ──────────────────────────────────── */
.calc-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  padding: 0; overflow: hidden;
}
.calc-col { padding: 1.4rem 1.5rem; }
.calc-col + .calc-col { border-left: 1px solid var(--line); }
.calc-col h4 {
  font-family: var(--f-sans); font-size: var(--f-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  margin-bottom: .6rem;
}
.calc-col .calc-result-line:last-child { border-bottom: 0; }

/* Stacked, not side by side: at half the panel width a six-figure sum and its
   label cannot share a line without the number breaking mid-digits. */
.calc-col .calc-result-line {
  display: block; padding-block: .75rem;
}
.calc-col .calc-result-label { display: block; margin-bottom: .15rem; }
.calc-col .calc-result-val { display: block; text-align: left; white-space: nowrap; }
.calc-result-total { border-bottom: 0 !important; margin-top: .2rem; padding-top: .9rem; border-top: 2px solid var(--line-strong); }
.calc-result-total .calc-result-label { color: var(--ink); font-weight: 640; }

/* The plan switch above does not control the estimator — both columns always
   show — but it is a fair signal of which one the reader is weighing, so that
   column is lifted slightly. */
.calc-compare.prefers-once .calc-col:first-child,
.calc-compare.prefers-monthly .calc-col:last-child {
  background: rgba(28,143,224,.045);
}

.calc-vol { color: var(--accent-ink); font-weight: 640; }
.calc-note { font-size: var(--f-xs); margin-top: 1.1rem; }

.calc-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap; margin-top: 1.6rem;
  padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.calc-foot p { font-size: var(--f-sm); margin: 0; flex: 1 1 280px; }

@media (max-width: 720px) {
  .calc-compare { grid-template-columns: 1fr; }
  .calc-col + .calc-col { border-left: 0; border-top: 1px solid var(--line); }
  .calc-foot .btn { width: 100%; }
}
@media (max-width: 480px) {
  .payplan-switch { width: 100%; }
  .payplan-tab { flex: 1; justify-content: center; padding-inline: .6rem; }
}

/* ── Cloud per-branch price table ───────────────────────────────────────── */
.ladder-wrap { max-width: 760px; margin: 1.6rem auto 0; }
.ladder-k { font-size: var(--f-sm); font-weight: 700; color: var(--ink); margin-bottom: .6rem; }
.ladder-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ladder { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--f-sm); }
.ladder th, .ladder td { padding: .6rem .9rem; text-align: left; white-space: nowrap; }
.ladder thead th { background: var(--bg-alt); color: var(--muted); font-weight: 600; }
.ladder tbody tr { border-top: 1px solid var(--line); }
.ladder tbody th { font-weight: 600; color: var(--ink); }
.ladder td { color: var(--body); }
.ladder td strong { color: var(--ink); }
.ladder-foot { font-size: var(--f-xs); color: var(--muted); margin-top: .6rem; }
.ladder-foot strong { color: var(--ink); }
.ladder-link { color: var(--accent-ink); font-weight: 640; text-decoration: underline; cursor: pointer; }

/* In-shop card: license fee and annual fee as two labelled lines. */
.fee-lines { margin: auto 0 0; padding: .2rem 0 .1rem; }
.fee-line { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .35rem 0; }
.fee-line + .fee-line { border-top: 1px dashed var(--line); }
.fee-line dt { font-size: var(--f-xs); color: var(--body); }
.fee-line dt small { display: block; font-size: .72rem; color: var(--muted); }
.fee-line dd { margin: 0; font-size: var(--f-sm); color: var(--ink); font-weight: 600; white-space: nowrap; }
.fee-line-main dd { font-family: var(--f-serif); font-size: var(--f-lg); font-weight: 700; }
.fee-line-main { display: block; }
.fee-line-main dt small { display: inline; margin-left: .3rem; }
.fee-line-main dd { margin-top: .15rem; font-size: var(--f-lg); }
.ladder-examples { margin-top: .6rem; display: grid; gap: .25rem; }
.ladder-examples li { font-size: var(--f-xs); color: var(--muted); }
.ladder-examples strong { color: var(--ink); }

.ladder-examples { margin-top: .6rem; display: grid; gap: .3rem; }
.ladder-examples li { font-size: var(--f-xs); color: var(--muted); }
.ladder-examples strong { color: var(--ink); }


/* ============================================================ DARK THEME
   The default. Site.master stamps data-theme on <html> from the "theme"
   cookie (dark when absent), so the first paint is already right — no
   flash, and no inline script needed under the CSP. main.js flips it.
   Only tokens change here; the few rules below are things a token cannot
   express (logo swap, a hairline under the always-dark hero). */
:root { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --ink:    #eef3fb;
  --body:   #b9c3d5;
  --muted:  #8792a7;
  --line:        #1e2a3f;
  --line-strong: #2b3a54;
  --bg:      #0a1222;
  --bg-alt:  #0d1729;
  --surface:   #111c31;
  --surface-2: #0f192d;
  --surface-3: #1a2740;
  --header-bg: rgba(10,18,34,.88);
  --glass:     rgba(17,28,49,.96);
  --accent:     #3aa6f0;
  --accent-2:   #1a64c8;
  --accent-ink: #7cc3f6;
  --danger:     #ff9b8f;
  --tier-core:  #9aa8bd;
  --sh-sm: 0 1px 2px rgba(0,0,0,.35);
  --sh-md: 0 8px 24px rgba(0,0,0,.35);
  --sh-lg: 0 20px 48px rgba(0,0,0,.45);
  --sh-xl: 0 28px 64px rgba(0,0,0,.5);
}

/* Logo: the dark-text PNG on light, the white one on dark. */
.brand-logo-dark { display: none; }
html[data-theme="dark"] .brand-logo-light { display: none; }
html[data-theme="dark"] .brand-logo-dark { display: block; }

/* Always-dark bands sit on a near-black page in dark mode: a hairline keeps
   their edges from dissolving. */
html[data-theme="dark"] .hero-dark,
html[data-theme="dark"] .stats-band,
html[data-theme="dark"] .site-footer { border-bottom: 1px solid var(--line); }
html[data-theme="dark"] .site-footer { border-top: 1px solid var(--line); }

html[data-theme="dark"] .plan-tier-core-badge { background: rgba(154,168,189,.14); }
html[data-theme="dark"] .form-alert { background: rgba(255,120,100,.08); border-color: rgba(255,120,100,.3); }

/* ── Theme toggle in the header ── */
.theme-toggle {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color .2s, color .2s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.header-tools { display: flex; align-items: center; gap: 10px; }
/* Toggle sits after the nav on desktop; on mobile it stays beside the burger. */
.brand { order: 1; }
.site-nav { order: 2; margin-left: auto; }
.header-tools { order: 3; }
@media (max-width: 620px) { .host-line { align-items: flex-start; text-align: left; } .host-line .icon { margin-top: .25rem; } }

/* ============================================================ PHONES
   Checked at 375px. Price tables turn into one small card per package, so
   no column hides off-screen; the comparison table fits all its columns;
   and anything tappable is at least 40px tall. */
@media (max-width: 620px) {
  .ladder-scroll { overflow: visible; border: 0; background: none; }
  .ladder { min-width: 0; font-size: var(--f-sm); }
  .ladder thead { display: none; }
  .ladder, .ladder tbody, .ladder tr, .ladder th, .ladder td { display: block; width: 100%; }
  .ladder tbody tr {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); padding: .35rem .9rem; margin-bottom: .6rem;
  }
  .ladder tbody tr + tr { border-top: 1px solid var(--line); }
  .ladder tbody th { padding: .5rem 0 .35rem; font-size: var(--f-base); border-bottom: 1px solid var(--line); }
  .ladder td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .45rem 0; white-space: normal; text-align: right;
  }
  .ladder td + td { border-top: 1px dashed var(--line); }
  .ladder td::before { content: attr(data-label); color: var(--muted); font-size: var(--f-xs); text-align: left; flex: none; }
  /* The Yearly/Monthly spans inside a cell must not both push the label. */
  .ladder td > .payplan-once, .ladder td > .payplan-monthly { margin-left: auto; }

  .compare { min-width: 0; }
  .compare th, .compare td { padding: .45rem .35rem; font-size: var(--f-xs); }
  .compare .compare-feature { min-width: 0; width: 44%; padding-left: .7rem; }
  .compare thead th { font-size: .68rem; letter-spacing: .03em; }
  .compare-note { font-size: .7rem; }
  .compare-hint { display: none; }

  .nav-toggle { width: 42px; height: 42px; align-items: center; justify-content: center; }
  .theme-toggle { width: 42px; height: 42px; }
  .ladder-link, .ask-link, .maker-credit { display: inline-flex; align-items: center; min-height: 40px; }
  .payplan-tab { padding: .8rem 1.1rem; }
  .plan-ribbon { font-size: .7rem; }
  .plan-badge { font-size: .72rem; }
}
@media (max-width: 620px) {
  .header-inner { gap: 8px; }
  .header-tools { gap: 2px; }
  .brand-maker { white-space: nowrap; font-size: 10.5px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   PRICING — deployment comparison, package modes, add-ons, calculator
   ═════════════════════════════════════════════════════════════════════════ */

/* On-Premise or Cloud? — plain facts before any price. Ticks for the good
   points, a quiet dot for "things to know": they are facts, not drawbacks. */
.deploy-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2rem; }
.deploy-head .lead { margin-top: .5rem; }
.jump-link {
  display: inline-block; padding: .55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--accent-ink); font-weight: 650; font-size: var(--f-sm); text-decoration: none;
}
.jump-link:hover { border-color: var(--accent); }
.jump-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.deploy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.deploy-card {
  display: flex; flex-direction: column; gap: .7rem; padding: 1.8rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--sh-sm);
}
.deploy-card h3 { display: flex; align-items: center; gap: .6rem; font-size: var(--f-lg); }
.deploy-card h3 .icon { color: var(--accent); flex: none; }
.deploy-k { font-size: var(--f-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: .5rem; }
.deploy-k-good { color: #1a8a5a; }
.deploy-list { display: flex; flex-direction: column; gap: .45rem; }
.deploy-list li { position: relative; padding-left: 1.5rem; font-size: var(--f-sm); }
.deploy-pros li::before {
  content: ""; position: absolute; left: .2rem; top: .5em; width: 9px; height: 5px;
  border-left: 2px solid #1a8a5a; border-bottom: 2px solid #1a8a5a; transform: rotate(-45deg);
}
.deploy-cons li::before {
  content: ""; position: absolute; left: .3rem; top: .55em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--muted); opacity: .7;
}
.deploy-best { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line); font-size: var(--f-sm); color: var(--ink); }
html[data-theme="dark"] .deploy-k-good { color: #4cc38a; }
html[data-theme="dark"] .deploy-pros li::before { border-color: #4cc38a; }

/* Pro's "See what's included". */
.plan-details { margin-top: .35rem; }
.plan-details summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: var(--f-xs); font-weight: 650; color: var(--accent-ink);
}
.plan-details summary::-webkit-details-marker { display: none; }
.plan-details summary::before { content: "\FF0B  "; }
.plan-details[open] summary::before { content: "\FF0D  "; }
.plan-details .pd-open, .plan-details[open] .pd-closed { display: none; }
.plan-details[open] .pd-open { display: inline; }
.plan-details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.plan-details ul { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.plan-includes .plan-details li { display: block; position: relative; padding-left: .9rem; font-size: var(--f-xs); color: var(--body); }
.plan-details li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.plan-details li strong { color: var(--ink); }

.plan-saving { margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--radius); background: rgba(28,143,224,.07); font-size: var(--f-xs); color: var(--body); }
.plan-saving strong { color: var(--ink); font-size: var(--f-sm); }

/* Add-ons. */
.addon-proposed {
  display: inline-block; margin-top: 1rem; padding: .45rem .9rem; border-radius: 10px;
  background: rgba(224,167,46,.15); color: #8a5a00; font-weight: 650; font-size: var(--f-sm);
}
html[data-theme="dark"] .addon-proposed { color: #f0c46a; }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.addon-card {
  display: flex; flex-direction: column; gap: .6rem; padding: 1.5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--sh-sm);
}
.addon-card h3 { font-size: var(--f-md); }
.addon-card .muted { font-size: var(--f-sm); }
.addon-tag {
  align-self: flex-start; display: inline-block; padding: .15rem .6rem; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(28,143,224,.1); color: var(--accent-ink);
}
.addon-tag-soon { background: rgba(224,167,46,.15); color: #8a5a00; }
html[data-theme="dark"] .addon-tag-soon { color: #f0c46a; }
.addon-price { margin-top: auto; font-weight: 700; color: var(--ink); font-size: var(--f-md); }
.addon-price small { font-weight: 400; font-size: var(--f-xs); color: var(--muted); }
.addon-alacarte { margin-top: 1.6rem; padding: 1.1rem 1.3rem; border-radius: var(--radius); background: var(--bg-alt); border: 1px solid var(--line); }
.addon-alacarte h3 { font-size: var(--f-base); margin-bottom: .3rem; }
.addon-alacarte p { font-size: var(--f-sm); }
.addon-table { margin-top: 1.4rem; }
.addon-table > summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: .6rem 0; }
.addon-table > p { font-size: var(--f-sm); margin-bottom: .8rem; }
.addon-table .ladder td, .addon-table .ladder th { white-space: normal; }
.addon-rules { display: flex; flex-direction: column; gap: .4rem; margin-top: .9rem; font-size: var(--f-xs); color: var(--muted); }
.addon-rules strong { color: var(--ink); }

/* Price calculator. */
.calc-addons { border: 0; padding: 0; margin: 0 0 1.1rem; }
.calc-addons legend { font-size: var(--f-xs); font-weight: 650; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem; }
.calc-addons .calc-addon { display: flex; align-items: center; gap: .6rem; padding: .25rem 0; font-size: var(--f-sm); color: var(--ink); cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; }
.calc-addon input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; margin: 0; }
.calc-addon.is-included { cursor: default; }
.calc-addon.is-included input:disabled { opacity: 1; }
.calc-mode {
  display: inline-block; margin-bottom: .8rem; padding: .25rem .7rem; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(28,143,224,.1); color: var(--accent-ink);
}
.calc-estimate .calc-result-label small { display: block; font-size: 11px; color: var(--muted); }

/* Homepage hero: a long headline in the old display size wrapped to five
   lines and left the top of the band empty. Smaller type, tighter padding,
   and the eyebrow sits above the product screen instead of the headline. */
.h-hero .h-hero-inner { padding-block: clamp(2.4rem, 5vw, 4.5rem); }
.h-hero .h-hero-inner h1 { font-size: clamp(2.3rem, 1.5rem + 2.8vw, 4rem); line-height: 1.08; }
.surface-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

/* Before / with OptiLyn: a red cross and a green tick read faster than a
   strike-through, and the table is kept narrow enough to scan across. */
.replaces { max-width: 880px; margin-inline: auto; }
@media (min-width: 701px) { .replaces-row { grid-template-columns: minmax(0,1fr) 32px minmax(0,1.15fr); } }
.replaces-row .from { text-decoration: none; color: var(--muted); }
.replaces-row .from, .replaces-row .to { display: flex; align-items: flex-start; gap: .6rem; }
.replaces-row .rep-x { color: #d9455a; flex: none; margin-top: .2rem; }
.replaces-row .to .icon { color: #1a8a5a; flex: none; margin-top: .15rem; }
html[data-theme="dark"] .replaces-row .to .icon { color: #4cc38a; }
html[data-theme="dark"] .replaces-row .rep-x { color: #f07a8a; }


/* Pricing: the explainer under the switches is one quiet line, not a headline. */
#plans .payplan-notes { margin-bottom: 1.8rem; }
#plans .payplan-note-pitch { font-family: var(--f-sans); font-size: var(--f-sm); color: var(--muted); margin: 0; }

/* The hidden radios are pinned to the viewport, not the page: clicking a
   switch label focuses its radio, and a radio sitting at the top of the page
   would scroll the reader back up there. The switches appear more than once
   down the page (Packages, branch pricing), so this matters. */
.payplan-input { position: fixed; top: 0; left: 0; }

/* ── Large screens ───────────────────────────────────────────────────────
   Past ~1500px the page used to stop growing and leave empty margins. Zoom
   the whole page up in steps instead, so text, cards and pictures all grow
   together — the same as pressing Ctrl-plus in the browser. Media queries
   still see the real screen width, so phones and laptops are untouched. */
@media (min-width: 1500px) { html { zoom: 1.12; } }
@media (min-width: 1700px) { html { zoom: 1.25; } }
@media (min-width: 1900px) { html { zoom: 1.4; } }
@media (min-width: 2200px) { html { zoom: 1.75; } }
@media (min-width: 2500px) { html { zoom: 1.95; } }
@media (min-width: 2900px) { html { zoom: 2.3; } }
@media (min-width: 3400px) { html { zoom: 2.75; } }
@media (min-width: 3900px) { html { zoom: 3.1; } }