/* discover.cas360.app only. The shared system is in base.css (same file as comptech.com.np). */

/* CAS360's own colours, from its logo (2026-10-19; the user: "styling and color profile feels too typical claude styling. I need
   something unique but similar to apple/microsoft's style"): the logo's azure (#1e88d2, a shade deeper for text and buttons so it
   reads at 5.2:1 on white) and its navy (#083d5b), on cool greys. No indigo, no violet-to-pink gradients. */
:root {
  --azure: #1e88d2;
  --navy: #083d5b;
  --accent: #1570b5;
  --accent-hover: #0e5f99;
  --accent-soft: #e8f1f9;
  --on-accent: #ffffff;
  --cas: var(--accent);
  --cas-hover: var(--accent-hover);
  --cas-soft: var(--accent-soft);
  --cas-grad: linear-gradient(135deg, var(--azure), var(--accent));
  --bg-tint: #eef4f9;
  --brand: var(--navy);
  --ok: #1a7f37;
  --ok-soft: #e7f5ec;
}
:root[data-theme="dark"] {
  --azure: #4aa8ec;
  --navy: #8cc4e6;
  --accent: #4aa8ec;
  --accent-hover: #78bff2;
  --accent-soft: #11283b;
  --on-accent: #04121e;
  --bg-tint: #0f1a24;
  --ok: #6fdc9b;
  --ok-soft: #0f2a1b;
}
.brand img.brand-logo { height: 1.875rem; width: auto; }

/* ---------- Hero ---------- */
.hero { padding: 4.5rem 0 4rem; background: linear-gradient(180deg, var(--bg-tint) 0%, var(--bg) 100%); border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3.5rem; align-items: center; }
.hero h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.15rem); }
.hero .lead { margin-top: 1.25rem; max-width: 35rem; }
.hero .btn-row { margin-top: 2rem; }
.hero-proof { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.75rem; padding: 0; list-style: none; font-size: .9rem; color: var(--text-2); }
.hero-proof li { display: inline-flex; align-items: center; gap: .4375rem; }
.hero-proof svg { width: 1.125rem; height: 1.125rem; color: var(--ok); }
.hero-shot img { aspect-ratio: 3 / 2; object-fit: cover; object-position: left top; }
@media (max-width: 1000px) { .hero { padding: 3rem 0; } .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } }

/* ---------- Highlights strip ---------- */
.highlights { border-bottom: 1px solid var(--line); background: var(--bg); }
.highlights ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.highlights li + li { border-left: 1px solid var(--line); }
.highlights a { display: flex; align-items: flex-start; gap: .75rem; height: 100%; padding: 1.375rem 1.125rem; color: var(--text); }
.highlights a:hover { background: var(--bg-soft); text-decoration: none; }
.highlights .icon { margin: 0; flex: none; width: 2.25rem; height: 2.25rem; }
.highlights .icon svg { width: 1.25rem; height: 1.25rem; }
.highlights strong { display: block; font-size: .95rem; font-weight: 600; }
.highlights strong + span { display: block; margin-top: 2px; font-size: .85rem; color: var(--text-3); line-height: 1.4; }
@media (max-width: 1100px) {
  .highlights ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .highlights li:nth-child(4) { border-left: 0; }
  .highlights li:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .highlights ul { grid-template-columns: minmax(0, 1fr); }
  .highlights li + li { border-left: 0; border-top: 1px solid var(--line); }
  .highlights a { padding: 1rem 0; }
}

/* ---------- Live demo ---------- */
.demo-tabs { margin-bottom: 0; border-bottom: 0; }
.demo-hint { font-size: .925rem; color: var(--text-3); margin: .625rem 0 .875rem; min-height: 1.5em; }

.demo { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-3); }
.demo .window-bar { justify-content: space-between; }
.demo .window-url { flex: 0 1 22.5rem; margin: 0; }
.demo-bar-actions { display: flex; align-items: center; gap: 1rem; font-size: .825rem; }
.demo-bar-actions a { display: inline-flex; align-items: center; gap: .3125rem; color: var(--text-2); font-weight: 600; }
.demo-bar-actions a:hover { color: var(--accent); }
.demo-bar-actions svg { width: .875rem; height: .875rem; }

/* The stage keeps the app's own 1280 x 800 layout and scales it to fit (js/demo.js). */
.demo-stage { position: relative; aspect-ratio: 1280 / 800; background: #10172a; overflow: hidden; }
.demo-stage iframe { position: absolute; left: 0; top: 0; width: 1280px; max-width: none; height: 800px; border: 0; transform-origin: 0 0; background: #fff; }
.demo-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; filter: saturate(.9); }
.demo-cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: linear-gradient(180deg, rgba(16, 23, 42, .25), rgba(16, 23, 42, .55)); }
.demo-card { max-width: 26.25rem; text-align: center; padding: 1.75rem 1.75rem 1.5rem; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-3); }
.demo-card h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.demo-card p { font-size: .925rem; }
.demo-card .btn { margin-top: 1.125rem; }
.demo-card .small { margin-top: .75rem; color: var(--text-3); }
.demo-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .625rem; color: #fff; font-size: .95rem; background: rgba(16, 23, 42, .75); }
.demo-loading::before { content: ""; width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.demo-stage.is-live .demo-poster, .demo-stage.is-live .demo-cover { display: none; }
@media (max-width: 760px) {
  .demo-stage { aspect-ratio: 4 / 5; }
  .demo-card { padding: 1.375rem 1.125rem 1.125rem; }
}
@media (max-width: 640px) { .demo .window-url { display: none; } }
.demo-after { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.demo-after p { max-width: 40rem; }
.demo-after strong { color: var(--text); }

/* ---------- Problem / answer ---------- */
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.qa > div { padding: 1.75rem; border-top: 1px solid var(--line); }
.qa > div:nth-child(-n+2) { border-top: 0; }
.qa > div:nth-child(even) { border-left: 1px solid var(--line); }
.qa .num { font-family: var(--font-display); font-size: .9rem; font-weight: 700; color: var(--cas); }
.qa h3 { font-size: 1.1rem; margin: .375rem 0 .5rem; }
@media (max-width: 760px) {
  .qa { grid-template-columns: minmax(0, 1fr); }
  .qa > div:nth-child(2) { border-top: 1px solid var(--line); }
  .qa > div:nth-child(even) { border-left: 0; }
}

/* ---------- Compliance ---------- */
.pillars { display: grid; gap: 1rem; }
.pillar { display: grid; grid-template-columns: auto 1fr; gap: .375rem 1rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pillar .num { grid-row: span 2; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--cas); line-height: 1.1; }
.pillar h3 { font-size: 1.05rem; }
.pillar p { font-size: .95rem; }

.platforms { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: .5rem; padding: 0; list-style: none; }
.platforms li { display: inline-flex; align-items: center; gap: .5rem; padding: .3125rem .75rem; border-radius: .375rem; border: 1px solid var(--line); background: var(--surface); font-size: .875rem; font-weight: 600; color: var(--text); }
.platforms svg { width: 1.125rem; height: 1.125rem; color: var(--cas); }
.cta-band .cta-phones { margin-top: .875rem; font-size: .95rem; }
.cta-band .cta-phones a { color: #fff; font-weight: 600; white-space: nowrap; }

/* The live demo under the clip: its heading on one side, the guided tour on the other. */
.demo-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2.5rem; flex-wrap: wrap; margin: 4.5rem 0 1.25rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.demo-head h3 { font-size: 1.375rem; }
.demo-head p { margin-top: .375rem; max-width: 40rem; }
.demo-tour { display: flex; align-items: center; gap: .875rem; margin: 0 !important; font-size: .875rem; color: var(--text-3); }
.demo-tour span { max-width: 16.25rem; }
.demo-tour svg { width: .9375rem; height: .9375rem; }
@media (max-width: 640px) { .demo-head { margin-top: 3rem; padding-top: 1.75rem; } .demo-tour { flex-wrap: wrap; } }

/* CBMS clips under the IRD section */
.ird-cbms { margin-top: 4.5rem; }
.ird-cbms-title { font-size: 1.375rem; line-height: 1.3; margin-top: .375rem; }
.ird-cbms-note { margin-top: 1rem; }

/* ---------- Flex sections (the clips, figures, documents and stills) ---------- */
#flex, #ask-ai, #documents, #screens, #tech, .hero-clip-shot { --accent: var(--cas); --accent-soft: var(--cas-soft); }
.hero-clip-shot video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; background: var(--bg-soft); }
.hero-clip-label { display: flex; align-items: center; gap: .5rem; padding: .625rem .875rem; border-top: 1px solid var(--line); background: var(--surface); font-size: .85rem; font-weight: 600; color: var(--text-2); }
.hero-clip-label::before { content: ""; flex: none; width: .6875rem; height: .6875rem; color: var(--cas); background: currentColor; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: fx-spark 2.6s ease-in-out infinite; }
.spot-media video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; background: var(--bg-soft); }
#flex .stats { margin-bottom: 5.5rem; }
#tech .section-head { margin-bottom: 1.5rem; }
@media (max-width: 1000px) { #flex .stats { margin-bottom: 4rem; } }
@media (prefers-reduced-motion: reduce) { .hero-clip-label::before { animation: none; } }
@media (max-width: 1000px) { .hero-grid > .hero-clip-shot { order: -1; } }

/* ---------- Accountant and owner, side by side (top of #flex) ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.duo-card { position: relative; padding: 2rem 2rem 1.875rem; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; }
.duo-card::before { content: ""; position: absolute; inset: 0 0 auto; height: .25rem; background: var(--cas-grad); }
.duo-owner::before { background: var(--navy); }
.duo-top { display: flex; align-items: center; gap: .75rem; }
.duo-icon { display: inline-flex; width: 2.75rem; height: 2.75rem; border-radius: .75rem; align-items: center; justify-content: center; color: var(--cas); background: var(--cas-soft); }
.duo-owner .duo-icon { color: var(--navy); background: color-mix(in srgb, var(--navy) 10%, var(--surface)); }
.duo-icon svg { width: 1.5rem; height: 1.5rem; }
.duo-label { font-size: .875rem; font-weight: 600; letter-spacing: 0; color: var(--navy); }
.duo-card h3 { margin-top: 1rem; font-size: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); line-height: 1.25; letter-spacing: -.01em; }
.duo-card .checks { margin-top: 1.125rem; gap: .875rem; }
.duo-foot { margin: 1.5rem 0 4.5rem; text-align: center; }
.duo-foot span { display: inline-block; padding: .5rem 1.125rem; border-radius: var(--radius-sm); background: var(--cas-soft); color: var(--cas); font-weight: 600; font-size: .9375rem; }

@media (max-width: 1000px) { .duo { grid-template-columns: minmax(0, 1fr); } .duo-foot { margin-bottom: 4rem; } }
@media (max-width: 640px) { .duo-card { padding: 1.625rem 1.25rem 1.5rem; } }

/* Ten questions to ask your accountant (2026-10-22): the app's Ask AI Suggestions list, one card under the two duo cards.
   Numbers run down the left column, then the right; one column on a phone. Devanagari numbers on the Nepali page. */
.ask-ten { margin-top: 1.5rem; }
.ask-ten h3 { margin-top: 0; }
.ask-ten > p { margin-top: .5rem; color: var(--text-2); }
.ask-ten-list { list-style: none; margin: 1.375rem 0 0; padding: 0; counter-reset: q; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: .875rem 2.5rem; }
.ask-ten-list li { position: relative; padding: .1875rem 0 0 2.625rem; min-height: 1.75rem; color: var(--text); line-height: 1.45; }
.ask-ten-list li::before { counter-increment: q; content: counter(q); position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.75rem; border-radius: .375rem; display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 600; color: var(--navy); background: color-mix(in srgb, var(--navy) 10%, var(--surface)); }
:lang(ne) .ask-ten-list li::before { content: counter(q, devanagari); }
@media (max-width: 760px) { .ask-ten-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; } }

/* The header on a laptop (2026-10-05): "by CompTech International" beside the logo is shown only where the menu has the
   room, and between the phone menu and a wide screen the links keep to one line (they wrapped from 980 to 1140px). */
/* 2026-10-19: API and Support joined the menu, so the line beside the logo now waits for 1440px, every link keeps to one line, and
   between 961 and 1180px the header's Full demo button steps aside (it stays in the hero, the footer and the phone menu). */
@media (max-width: 1439px) { .site-header .brand small { display: none; } }
.site-header .nav a, .site-header .header-actions a { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1439px) { .site-header .nav li a { padding: .375rem .5625rem; } }
@media (min-width: 961px) and (max-width: 1180px) { .site-header .header-actions [data-full-demo] { display: none; } }
@media (min-width: 961px) { .site-header .brand { flex: none; } }
@media (min-width: 961px) and (max-width: 1100px) { .site-header .nav li a { padding: .375rem .375rem; font-size: .8125rem; } }

/* =====================================================================================================
   The CAS360 look (2026-10-19, replacing the 2026-10-18 Apple layer; the user: "styling and color profile feels
   too typical claude styling. I need something unique but similar to apple/microsoft's style. also, the text sizes
   are HUGE. It should be a bit smaller"). Discover only: base.css stays the same file as comptech's.
   - Each device's own typeface: SF on Apple, Segoe UI on Windows, Roboto on Android. No web font.
   - The logo's azure and navy on cool greys; one solid accent, no gradient text, no glows, no sparkles.
   - Semibold headlines at a calm size; 16px body text. The page no longer grows much past 1440px (base.css let it
     reach 117% at 1920px, which is what made the type look huge).
   - Fluent-like shapes: 8px buttons and controls, 12-18px cards, hairline borders, low cool shadows.
   ===================================================================================================== */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Noto Sans", system-ui, "Helvetica Neue", Arial, sans-serif;
  --text: #16191d;
  --text-2: #3d444d;
  --text-3: #5c6570;
  --bg-soft: #f4f6f8;
  --surface-2: #fafbfc;
  --line: #dde2e7;
  --line-strong: #c3cad2;
  --radius: .75rem;
  --radius-sm: .5rem;
  --radius-lg: 1.125rem;
  --shadow-1: 0 1px 2px rgba(16, 32, 48, .06), 0 1px 3px rgba(16, 32, 48, .05);
  --shadow-2: 0 2px 6px rgba(16, 32, 48, .06), 0 8px 24px rgba(16, 32, 48, .08);
  --shadow-3: 0 8px 24px rgba(16, 32, 48, .1), 0 24px 64px rgba(16, 32, 48, .14);
  --header-h: 3.5rem;
  --ease: cubic-bezier(.33, 0, .1, 1);
  --seg-track: #e8ecf0;
  --grad-cas: linear-gradient(90deg, var(--accent), var(--accent));
}
:root[data-theme="dark"] {
  --bg: #0b1218;
  --bg-soft: #111a22;
  --surface: #16202a;
  --surface-2: #1a2531;
  --line: #263240;
  --line-strong: #34424f;
  --text: #eef2f6;
  --text-2: #c3cbd4;
  --text-3: #94a0ad;
  --seg-track: #1d2833;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .4);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, .45), 0 24px 64px rgba(0, 0, 0, .5);
}
@media (min-width: 1441px) { html { font-size: min(calc(100% + (100vw - 1440px) / 480), 110%); } }
body { font-size: 1rem; line-height: 1.6; letter-spacing: 0; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.012em; }
h1 { font-size: clamp(2.125rem, 1.55rem + 1.7vw, 3rem); line-height: 1.12; letter-spacing: -.022em; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.05vw, 2.375rem); line-height: 1.16; letter-spacing: -.018em; }
h3 { letter-spacing: -.01em; }
.lead { font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.55; color: var(--text-3); font-weight: 400; }
.eyebrow { font-size: .875rem; font-weight: 600; letter-spacing: 0; color: var(--navy); }
.section { padding: 5rem 0; }
.section-head { margin-bottom: 2.75rem; }
.section-head p:not(.eyebrow) { font-size: 1.0625rem; color: var(--text-3); }
.section-head.center { max-width: 46rem; }
.grad-text { color: var(--accent); }
@media (max-width: 640px) { .section { padding: 3.5rem 0; } }

/* The frosted top bar, small centred links (Apple's global nav) */
.site-header { background: rgba(255, 255, 255, .72); border-bottom: 1px solid rgba(0, 0, 0, .08); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
:root[data-theme="dark"] .site-header { background: rgba(22, 22, 23, .72); border-bottom-color: rgba(255, 255, 255, .08); }
.site-header > .container { gap: 1rem; }
.site-header .nav { margin: 0 auto; gap: 0; }
.site-header .nav a { padding: .375rem .75rem; font-size: .875rem; font-weight: 400; color: var(--text); opacity: .82; border-radius: .375rem; transition: opacity .2s var(--ease); }
.site-header .nav a:hover { opacity: 1; background: transparent; }
.site-header .header-actions { margin-left: 0; gap: .875rem; }
.site-header .header-actions .link-more { font-size: .875rem; font-weight: 400 !important; color: var(--text); opacity: .82; }
.site-header .header-actions .link-more::after { display: none; }
.lang-btn, .theme-btn { height: 2rem; border-color: transparent; background: var(--bg-soft); font-size: .8125rem; font-weight: 500; border-radius: var(--radius-sm); }
.theme-btn { width: 2rem; }
.lang-btn + .theme-btn { margin-left: -.5rem; }
.mobile-nav { background: color-mix(in srgb, var(--bg) 96%, transparent); }
.mobile-nav li a { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; padding: .875rem 0; border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent); }

/* Pill buttons */
.btn { border-radius: var(--radius-sm); font-weight: 600; letter-spacing: 0; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-lg { min-height: 2.75rem; padding: .625rem 1.375rem; font-size: .9375rem; }
.btn-sm { min-height: 2rem; padding: .25rem .875rem; font-size: .8125rem; }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--bg-soft); color: var(--text); border-color: var(--text-3); }
.link-more { font-weight: 500; }
.link-more::after { width: .375rem; height: .375rem; border-width: 1.5px; }

/* macOS window lights on every screen frame */
.window { border-radius: .75rem; border: 1px solid rgba(16, 32, 48, .12); }
:root[data-theme="dark"] .window { border-color: rgba(255, 255, 255, .12); }
.window-bar { height: 2rem; background: var(--surface-2); border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
.window-dots i { width: .6875rem; height: .6875rem; }
.window-dots i { background: #cfd5dc; }
:root[data-theme="dark"] .window-dots i { background: #3a4652; }
.window-url { background: var(--bg-soft); border: 0; }

/* Tiles and cards: large, rounded, no border, grey on white and white on grey */
.tile, .card, .qa, .pillar, .road, .demo-after, .duo-card { border: 0; border-radius: var(--radius-lg); }
.tile { background: var(--bg-soft); padding: 1.75rem; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.section-soft .tile, .section-soft .pillar, .section-soft .qa, .section-soft .demo-after { background: var(--surface); }
.tile:hover { box-shadow: var(--shadow-2); }
.tile h3 { font-size: 1.0625rem; }
.icon, .icon.cas { border-radius: .625rem; }
.duo-card { background: var(--bg-soft); box-shadow: none; }
.duo-card::before { height: 0; }
.qa { box-shadow: none; }
.qa > div { border-color: color-mix(in srgb, var(--line) 60%, transparent) !important; }
.proof span { border: 0; background: var(--bg-soft); border-radius: .375rem; padding: .3125rem .625rem; }
.section-soft .proof span { background: var(--surface); }
.spot-media::before { opacity: .45; }
.spot h3 { font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); line-height: 1.18; letter-spacing: -.015em; }
.cta-band { border-radius: var(--radius-lg); background: #1d1d1f; }
:root[data-theme="dark"] .cta-band { background: #1d1d1f; }
.cta-band .btn-primary { color: #06263a; }
.site-footer { font-size: .8125rem; background: var(--bg-soft); border-top: 0; }
.site-footer p, .footer-col a { color: var(--text-3); }
.footer-col h3 { font-size: .8125rem; }
.footer-bottom { border-top-color: var(--line); font-size: .75rem; }
.js [data-reveal] { transform: translateY(1.5rem); transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* ---------- Hero, centred ---------- */
.hero.hero-apple { padding: 4.5rem 0 0; background: var(--bg); border-bottom: 0; text-align: center; }
.hero-apple .hero-kicker { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .875rem; font-size: 1.0625rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.hero-apple .hero-kicker img { height: 1.5rem; width: auto; }
.hero-apple h1 { max-width: 15ch; margin: 0 auto; }
.hero-apple .lead { max-width: 40rem; margin: 1.25rem auto 0; }
.hero-apple .btn-row { justify-content: center; margin-top: 2rem; gap: .75rem 1.25rem; }
.hero-apple .hero-proof { justify-content: center; margin-top: 1.5rem; font-size: .875rem; color: var(--text-3); }
.hero-apple .hero-stage { position: relative; max-width: 68rem; margin: 3.5rem auto 0; }
.hero-apple .hero-stage::before { content: none; }
.hero-apple .hero-clip-shot { text-align: left; box-shadow: 0 30px 80px -32px rgba(8, 61, 91, .38), var(--shadow-2); }
@media (max-width: 640px) { .hero.hero-apple { padding-top: 3.25rem; } .hero-apple .hero-stage { margin-top: 2.5rem; } }

/* ---------- Chapter nav under the hero (Apple's product strip) ---------- */
.chapters { padding: 3.5rem 0 1rem; }
.chapters ul { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 2.75rem; }
.chapters a { display: flex; flex-direction: column; align-items: center; gap: .625rem; min-width: 5.5rem; color: var(--text); font-size: .8125rem; font-weight: 500; text-align: center; }
.chapters a:hover { text-decoration: none; color: var(--accent); }
.chapters svg { width: 2rem; height: 2rem; color: var(--text-2); transition: color .2s var(--ease), transform .3s var(--ease); }
.chapters a:hover svg { color: var(--accent); transform: translateY(-2px); }
.chapters small { display: block; margin-top: -.375rem; font-size: .75rem; font-weight: 400; color: var(--text-3); max-width: 9rem; }
@media (max-width: 640px) { .chapters ul { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; gap: 1.5rem; padding: 0 var(--gutter) .5rem; margin: 0 calc(var(--gutter) * -1); } .chapters ul::-webkit-scrollbar { display: none; } .chapters small { display: none; } }

/* ---------- Segmented control (trade tabs, plan cycle) ---------- */
.seg-wrap { display: flex; justify-content: center; margin: 0 0 2.5rem; }
.seg { position: relative; display: inline-flex; gap: 0; padding: .25rem; margin: 0; border: 0; border-radius: .625rem; background: var(--seg-track); isolation: isolate; max-width: 100%; }
.seg .tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.25rem; border-radius: .5rem; font-size: .9375rem; font-weight: 500; letter-spacing: -.01em; color: var(--text-2); white-space: nowrap; transition: color .25s var(--ease); }
.seg .tab:hover { background: transparent; color: var(--text); }
.seg .tab::after { content: none !important; }
.seg .tab svg { width: 1.125rem; height: 1.125rem; flex: none; }
.seg .tab[aria-selected="true"] { color: var(--text); background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 3px 10px rgba(0, 0, 0, .08); }
/* With site.js, a thumb slides under the chosen tab instead */
.seg.has-thumb .tab[aria-selected="true"] { background: transparent; box-shadow: none; }
.seg-thumb { position: absolute; z-index: 0; top: .25rem; bottom: .25rem; left: 0; width: 0; border-radius: .5rem; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 3px 10px rgba(0, 0, 0, .08); transition: transform .45s cubic-bezier(.3, .7, .2, 1), width .45s cubic-bezier(.3, .7, .2, 1); }
:root[data-theme="dark"] .seg .tab[aria-selected="true"], :root[data-theme="dark"] .seg-thumb { background: #2c3a48; }
.seg-sm .tab { padding: .375rem 1rem; font-size: .875rem; }
@media (max-width: 640px) {
  .seg { width: 100%; }
  .seg .tab { flex: 1; justify-content: center; padding: .625rem .5rem; font-size: .9375rem; }
  .seg .tab svg { display: none; }
}

/* ---------- Trades: Ticketing, Tourism, Shipments ---------- */
.trades .section-head { margin-bottom: 2.5rem; }
.trade-head { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; }
.trade-head h3 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); line-height: 1.16; letter-spacing: -.018em; }
.trade-head .lead { margin-top: 1.125rem; }
.trade-figures { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 3rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.trade-figures b { display: block; font-family: var(--font-display); font-size: clamp(1.875rem, 1.5rem + 1.1vw, 2.5rem); font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.trade-figures b.grad-text { display: inline-block; }
.trade-figures span { display: block; margin-top: .5rem; font-size: .875rem; color: var(--text-3); }
.trade-stage { position: relative; max-width: 68rem; margin: 0 auto; }
.trade-stage::before { content: none; }
.trade-stage .window { box-shadow: 0 30px 80px -34px rgba(8, 61, 91, .38), var(--shadow-2); }
.trade-stage video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; background: var(--bg-soft); }
.trade-cap { max-width: 50rem; margin: 1.25rem auto 0; text-align: center; font-size: .875rem; color: var(--text-3); }
.trade-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2.5rem; max-width: 68rem; margin: 3rem auto 0; padding: 0; list-style: none; }
.trade-checks li { padding-top: 1.125rem; border-top: 1px solid var(--line); }
.trade-checks b { display: block; font-size: 1rem; color: var(--text); letter-spacing: -.012em; }
.trade-checks span { display: block; margin-top: .375rem; font-size: .875rem; color: var(--text-3); line-height: 1.45; }
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 80rem; margin: 4rem auto 0; }
.bento-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-soft); }
.section-soft .bento-card { background: var(--surface); }
.bento-card .bento-text { padding: 2rem 2rem 1.5rem; }
.bento-card .bento-text .eyebrow { margin-bottom: .5rem; font-size: .8125rem; }
.bento-card h4 { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); line-height: 1.2; letter-spacing: -.012em; }
.bento-card p { margin-top: .625rem; font-size: .9375rem; color: var(--text-3); line-height: 1.5; }
.bento-card .bento-media { margin-top: auto; padding: 0 2.25rem; }
.bento-card .bento-media .window { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; box-shadow: 0 -10px 40px -18px rgba(0, 0, 0, .25); transition: transform .5s var(--ease); }
.bento-card:hover .bento-media .window { transform: translateY(-.5rem); }
.bento-card video, .bento-card .bento-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: left top; background: var(--bg-soft); }
.bento-card.wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.bento-card.wide .bento-media { padding: 2.25rem 0 2.25rem 0; margin: 0; }
.bento-card.wide .bento-media .window { border-radius: 1rem 0 0 1rem; border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.bento-card .bento-tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: 1rem; }
.bento-card .bento-tags span { padding: .1875rem .5rem; border-radius: .375rem; background: var(--surface); font-size: .78rem; font-weight: 600; color: var(--text-2); }
.section-soft .bento-card .bento-tags span { background: var(--bg-soft); }
@media (max-width: 1000px) {
  .trade-checks { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .bento { grid-template-columns: minmax(0, 1fr); margin-top: 3.5rem; }
  .bento-card.wide { grid-template-columns: minmax(0, 1fr); }
  .bento-card.wide .bento-media { padding: 0 2.25rem; }
  .bento-card.wide .bento-media .window { border-radius: 1rem 1rem 0 0; border-right: 1px solid rgba(0, 0, 0, .1); border-bottom: 0; }
}
@media (max-width: 640px) { .bento-card .bento-text { padding: 1.75rem 1.5rem 1.25rem; } .bento-card .bento-media, .bento-card.wide .bento-media { padding: 0 1.25rem; } .trade-figures { gap: 1rem 2rem; } }

/* ---------- Plans ---------- */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.5rem 1.5rem; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.plan.featured { box-shadow: 0 0 0 2px var(--accent), var(--shadow-2); }
.plan-flag { position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%); padding: .1875rem .625rem; border-radius: .375rem; background: var(--accent); color: var(--on-accent); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.plan h3 { font-size: 1.25rem; letter-spacing: -.01em; }
.plan-for { margin-top: .375rem; font-size: .875rem; color: var(--text-3); min-height: 2.9em; }
.plan-price { margin-top: 1.5rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .375rem; }
.plan-price .cur { font-size: .9375rem; font-weight: 600; color: var(--text-2); }
.plan-price b { font-family: var(--font-display); font-size: clamp(2rem, 1.7rem + .8vw, 2.5rem); font-weight: 600; letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text); }
.plan-price .per { font-size: .9375rem; color: var(--text-3); }
.plan-price.talk b { font-size: clamp(1.5rem, 1.3rem + .6vw, 1.875rem); letter-spacing: -.02em; }
.plan-note { margin-top: .5rem; min-height: 2.9em; font-size: .875rem; color: var(--text-3); line-height: 1.45; }
.plan .btn { margin-top: 1.5rem; width: 100%; }
.plan ul { list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .625rem; font-size: .875rem; }
.plan li { position: relative; padding-left: 1.625rem; color: var(--text-2); line-height: 1.45; }
.plan li::before { content: ""; position: absolute; left: .125rem; top: .3em; width: .4375rem; height: .8125rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); }
.plan li.no { color: var(--text-3); }
.plan li.no::before { top: .7em; width: .75rem; height: 0; border-right: 0; border-bottom: 1.5px solid var(--text-3); transform: none; }
.plan li strong { color: var(--text); font-weight: 600; }
.plan-head-li { padding-left: 0 !important; font-weight: 600; color: var(--text) !important; }
.plan-head-li::before { content: none !important; }
/* Limits (2026-10-19; the user: "these bunches in all, they're limitations. mark them as such."): a box of their own
   at the foot of each card, an open marker instead of the check, so a limit never reads as a feature. */
.plan > ul { margin-bottom: 1.25rem; }
.plan-limits { margin-top: auto; padding: .875rem 1rem 1rem; border-radius: var(--radius-sm); background: var(--bg-soft); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.plan-limits-head { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.plan .plan-limits ul { margin: .5rem 0 0; padding: 0; border-top: 0; gap: .4375rem; font-size: .8125rem; }
.plan .plan-limits li { padding-left: 1.25rem; }
/* Enterprise (the user: "enterprise has no limitations. add a green flag No limitations"). */
.plan-nolimits { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.plan-nolimits-flag { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: 999px; background: var(--ok); color: #fff; font-size: .8125rem; font-weight: 600; }
:root[data-theme="dark"] .plan-nolimits-flag { color: #062012; }
.plan-nolimits-flag::before { content: ""; width: .3125rem; height: .625rem; margin: -.125rem .125rem 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.plan-nolimits-note { margin-top: .5rem; font-size: .8125rem; color: var(--text-2); line-height: 1.45; }
.plan .plan-limits li::before { top: .42em; left: .125rem; width: .4375rem; height: .4375rem; border: 1.5px solid var(--text-3); border-radius: 50%; transform: none; }
.plans-foot { margin-top: 1.75rem; text-align: center; font-size: .875rem; color: var(--text-3); }
.plans-foot a { white-space: nowrap; }
.compare { margin-top: 3.5rem; }
.compare summary { display: flex; justify-content: center; list-style: none; cursor: pointer; }
.compare summary::-webkit-details-marker { display: none; }
.compare summary span { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--accent); font-size: .9375rem; }
.compare summary span::after { content: ""; width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.15rem) rotate(45deg); transition: transform .25s var(--ease); }
.compare[open] summary span::after { transform: translateY(.1rem) rotate(-135deg); }
.compare-scroll { margin-top: 2rem; overflow-x: auto; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.compare table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: .875rem; }
.compare th, .compare td { padding: .75rem 1rem; text-align: center; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.compare th:first-child, .compare td:first-child { text-align: left; color: var(--text); width: 34%; }
.compare thead th { position: sticky; top: 0; background: var(--surface); font-size: .9375rem; font-weight: 700; color: var(--text); }
.compare tbody th { font-weight: 400; }
.compare td { color: var(--text-2); font-variant-numeric: tabular-nums; }
.compare tr.group th { padding-top: 1.75rem; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.compare .y, .compare .n { display: inline-block; width: 1.25rem; height: 1.25rem; vertical-align: middle; }
.compare .y { background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231570b5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.compare .n { background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .compare .y { filter: brightness(1.9) saturate(.8); }
@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; } }
@media (max-width: 640px) { .plans { grid-template-columns: minmax(0, 1fr); } .plan-for, .plan-note { min-height: 0; } }
.trade-note { max-width: 52rem; margin: 2.5rem auto 0; text-align: center; font-size: .875rem; color: var(--text-3); }
.trades .tab-panel { padding-top: .5rem; }
.hero.hero-apple { padding-bottom: 3.5rem; }
.hero-apple h1 { max-width: 30ch; font-size: clamp(2.25rem, 1.6rem + 1.8vw, 3.25rem); }
#live-demo .demo-head { margin-top: 0; padding-top: 0; border-top: 0; align-items: center; }
#live-demo .demo-head h2 { margin-top: .25rem; }
#live-demo .demo-head p:not(.eyebrow) { margin-top: .75rem; }
.seg-wrap.demo-seg { justify-content: flex-start; margin: 2rem 0 0; }
#features .section-head, #documents .section-head, #screens .section-head { margin-left: auto; margin-right: auto; text-align: center; max-width: 52rem; }
#features .platforms { justify-content: center; }
@media (max-width: 640px) {
  .trade-figures { flex-wrap: nowrap; gap: .75rem; }
  .trade-figures li { flex: 1; min-width: 0; }
  .trade-figures b { font-size: 1.9rem; }
  .trade-figures span { font-size: .78rem; }
}

/* Selecting text (2026-10-18, user: "highlight is bugged out. looks more like a text hider"). Gradient words are drawn with a
   transparent fill, so a selection over them showed only the tint: give selected gradient text a solid fill, and make the tint
   see-through so a selected line no longer covers the descenders of the line above (headings run at line-height ~1.05). */
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; }
.grad-text::selection, .grad-text *::selection { -webkit-text-fill-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
/* Even line lengths, so a headline does not end on one word. */
h1, h2, .trade-head h3, .spot h3, .bento-card h4 { text-wrap: balance; }
/* The hero's gradient line is its own block, so it balances on its own instead of leaving one word on the last line. */
.hero-apple h1 .grad-text { display: block; }
/* "The web-based successor to TravelMan" (user, 2026-10-18: "highlight or bold or do whatever is appropriate"): the feature chip,
   larger and in sentence case, above the hero headline. */
.hero-badge { margin: 0 0 1.25rem; }
.buzz.buzz-lg { font-size: .875rem; font-weight: 600; letter-spacing: 0; padding: .375rem .75rem; gap: .5rem; }
.buzz.buzz-lg::before { width: .4375rem; height: .4375rem; }
:lang(ne) .buzz.buzz-lg { letter-spacing: 0; }

/* Sign in, easy to find (user, 2026-10-18: "make the sign in / login more apparent. ill be switching discover into the domain
   cas360.app"): a bar above the top bar, the filled button in the top bar, a button that stays on phones, first in the phone menu. */
.signin-bar { background: color-mix(in srgb, var(--accent) 9%, var(--bg)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); font-size: .875rem; }
.signin-bar .container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem 1rem; min-height: 2.75rem; padding-top: .375rem; padding-bottom: .375rem; text-align: center; }
.signin-bar p { color: var(--text-2); }
.signin-bar strong { color: var(--text); font-weight: 600; }
.signin-bar .btn { min-height: 1.875rem; padding: .25rem .875rem; }
.btn svg { width: 1rem; height: 1rem; }
.site-header .header-actions .signin-btn { padding-left: .75rem; }
.signin-mobile { display: none; }
.mobile-nav .btn + .btn { margin-top: .625rem; }
@media (max-width: 960px) {
  .signin-mobile { display: inline-flex; margin-left: auto; padding: .25rem .75rem; gap: .375rem; }
  .signin-mobile + .lang-btn { margin-left: 0; }
}


/* The mountain backdrop (the Annapurna range over Pokhara, the provider's photograph, as on the app's sign-in screen; user,
   2026-10-18: "introduce our mountain backdrop into the landing page too, appropriately"). Two places only: washed behind the
   top of the hero, fading into the page, and under the closing call-to-action band, behind a dark scrim. */
.hero.hero-apple { position: relative; isolation: isolate; }
.hero-backdrop { position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: min(52rem, 100vh); overflow: hidden; pointer-events: none; }
.hero-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 58% 18%; opacity: .34;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .75) 40%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .75) 40%, transparent 100%); }
/* A calm pool behind the headline and buttons, so the words never sit on a busy ridge. */
.hero-backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 42%, color-mix(in srgb, var(--bg) 82%, transparent) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 60%, transparent 100%); }
:root[data-theme="dark"] .hero-backdrop img { opacity: .62; }
:root[data-theme="dark"] .hero-backdrop::after { background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .4) 60%, transparent 100%); }

.cta-band { position: relative; overflow: hidden; isolation: isolate; background: #06263a; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("../img/brand/cas360-backdrop.webp?v=20261018") 62% 30% / cover no-repeat; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 38, 58, .95) 0%, rgba(6, 38, 58, .8) 48%, rgba(6, 38, 58, .3) 100%); }
:root[data-theme="dark"] .cta-band { background: #06263a; }
@media (max-width: 800px) { .cta-band::after { background: linear-gradient(0deg, rgba(6, 38, 58, .96) 0%, rgba(6, 38, 58, .84) 55%, rgba(6, 38, 58, .45) 100%); } }

/* The yearly discount (user, 2026-10-18: "also show the discount for the yearly plan"): paying yearly is two months free on
   Personal (12,000 → 10,000) and on Business (first year 28,000 → 25,000, then 18,000 → 15,000). A tag on the Yearly switch,
   and a line under each price that shows only while Yearly is chosen (site.js empties it for Monthly). */
.seg-save { display: inline-block; margin-left: .45rem; padding: .05rem .4375rem; border-radius: .3125rem; font-size: .72rem; font-weight: 600; line-height: 1.5; color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); white-space: nowrap; }
.plan-save { display: inline-flex; align-self: flex-start; margin-top: .625rem; padding: .1875rem .5rem; border-radius: .375rem; font-size: .8125rem; font-weight: 600; color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.plan-save:empty { display: none; }
@media (max-width: 640px) { .seg-save { margin-left: .3rem; padding: .05rem .35rem; } }

/* Quiet effects (2026-10-19, with the CAS360 look above). base.css keeps these for comptech's site; here they are off:
   no turning sparkle or edge light on the feature chips, no coloured glow behind the screens, no violet gradients in the
   Ask sample. A chip is a small tinted label with a dot. */
.buzz { gap: .4375rem; padding: .25rem .625rem; border-radius: .375rem; font-size: .75rem; font-weight: 600; letter-spacing: .01em; text-transform: none;
  color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.buzz::before { width: .375rem; height: .375rem; border-radius: 50%; clip-path: none; animation: none; }
.buzz::after, .fx-ring { display: none; }
.hero-clip-label::before { width: .4375rem; height: .4375rem; border-radius: 50%; clip-path: none; animation: none; }
.spot-media::before { content: none; }
.spot-media .window { box-shadow: 0 30px 70px -30px rgba(8, 61, 91, .32), var(--shadow-2); }
.spot-media:hover .window { transform: translateY(-4px); box-shadow: 0 36px 80px -30px rgba(8, 61, 91, .4), var(--shadow-3); }
.stat { background: var(--surface); }
.stat b { font-weight: 600; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.375rem); }
.ask-spark, .ask-q { background: var(--accent); }
.ask-beta { background: var(--accent-soft); color: var(--accent); }

/* ---------- From TravelMan (2026-10-19; the user: "continuation of oldest accounting system in nepal that argues backing by
   legacy ... do this very appropriately"). Facts CompTech can show, in a row, then what carries over and what is new. ---------- */
.legacy-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.legacy-facts li { padding: 1.375rem 1.25rem; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.legacy-facts b { display: block; font-family: var(--font-display); font-size: clamp(1.625rem, 1.35rem + .8vw, 2.125rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--navy); }
.legacy-facts span { display: block; margin-top: .5rem; font-size: .9375rem; color: var(--text-2); line-height: 1.45; }
.legacy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.legacy-card { padding: 1.75rem; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.legacy-card h3 { font-size: 1.125rem; }
.legacy-note { max-width: 46rem; margin: 1.75rem auto 0; text-align: center; color: var(--text-2); }
.legacy-today { max-width: 48rem; margin: 0 auto 1.75rem; text-align: center; }
.legacy-today h3 { font-size: 1.125rem; margin: 0 0 .375rem; }
.legacy-today p { margin: 0; color: var(--text-2); }
@media (max-width: 1000px) { .legacy-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .legacy-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- API and connections (2026-10-19; the user: "api integration with everything, along with a small showcase of how it
   can be done"). The showcase is one worked example of Data Imports: what an outside API answers, which value goes in which
   box, and the draft invoice CAS360 makes from it. Made-up data. ---------- */
.api-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; counter-reset: step; }
.api-steps li { position: relative; padding: 1.25rem 1.25rem 1.25rem 3.5rem; border-radius: var(--radius-lg); background: var(--bg-soft); }
.api-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 1.25rem; top: 1.25rem; width: 1.625rem; height: 1.625rem; border-radius: .375rem; display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 600; color: var(--on-accent); background: var(--accent); }
.api-steps b { display: block; font-size: 1rem; color: var(--text); }
.api-steps span { display: block; margin-top: .25rem; font-size: .875rem; color: var(--text-3); line-height: 1.5; }
.api-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.05fr) auto minmax(0, 1fr); gap: .75rem; align-items: stretch; }
.api-panel { display: flex; flex-direction: column; min-width: 0; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.api-panel > header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .625rem .875rem; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: .8125rem; font-weight: 600; color: var(--text); }
.api-panel > header small { font-weight: 400; color: var(--text-3); font-size: .75rem; }
.api-panel pre { margin: 0; padding: .875rem 1rem; overflow-x: auto; font-family: var(--font-mono); font-size: .78rem; line-height: 1.6; color: var(--text-2); background: transparent; }
.api-panel pre .k { color: var(--navy); }
.api-panel pre .s { color: #0f7b3f; }
.api-panel pre .n { color: #9a4d00; }
:root[data-theme="dark"] .api-panel pre .s { color: #7fd49a; }
:root[data-theme="dark"] .api-panel pre .n { color: #f2b45a; }
.api-arrow { display: flex; align-items: center; color: var(--text-3); }
.api-arrow svg { width: 1.5rem; height: 1.5rem; }
.api-map { margin: 0; padding: .375rem 0; list-style: none; font-size: .8125rem; }
.api-map li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .5rem; padding: .4375rem .875rem; }
.api-map li + li { border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.api-map code { font-family: var(--font-mono); font-size: .75rem; color: var(--navy); overflow-wrap: anywhere; }
.api-map i { font-style: normal; color: var(--text-3); }
.api-map span { color: var(--text); font-weight: 500; }
.api-map small { display: block; color: var(--text-3); font-size: .72rem; font-weight: 400; }
.api-doc { padding: .875rem 1rem; font-size: .8125rem; color: var(--text-2); }
.api-doc dl { display: grid; grid-template-columns: auto 1fr; gap: .3125rem .875rem; margin: 0; }
.api-doc dt { color: var(--text-3); }
.api-doc dd { margin: 0; color: var(--text); font-weight: 500; }
.api-doc table { width: 100%; margin-top: .75rem; border-collapse: collapse; font-size: .78rem; font-variant-numeric: tabular-nums; }
.api-doc th, .api-doc td { padding: .375rem 0; text-align: left; border-top: 1px solid var(--line); }
.api-doc th { color: var(--text-3); font-weight: 500; }
.api-doc td:last-child, .api-doc th:last-child { text-align: right; }
.api-state { display: inline-flex; align-items: center; gap: .375rem; margin-top: .75rem; padding: .1875rem .5rem; border-radius: .375rem; font-size: .75rem; font-weight: 600; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.api-cap { margin-top: 1rem; text-align: center; font-size: .875rem; color: var(--text-3); }
.api-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 3rem; }
.api-more.one { grid-template-columns: minmax(0, 1fr); }
.api-more .tile h3 { margin-bottom: .5rem; }
.api-chips { display: flex; flex-wrap: wrap; gap: .375rem; margin: .875rem 0 0; padding: 0; list-style: none; }
.api-chips li { padding: .1875rem .5rem; border-radius: .375rem; background: var(--surface); border: 1px solid var(--line); font-size: .78rem; font-weight: 600; color: var(--text-2); }
.section-soft .api-chips li, .tile .api-chips li { background: var(--surface); }
@media (max-width: 1100px) {
  .api-flow { grid-template-columns: minmax(0, 1fr); }
  .api-arrow { justify-content: center; transform: rotate(90deg); }
  .api-steps { grid-template-columns: minmax(0, 1fr); }
  .api-more { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Support, 24 hours a day (2026-10-19; the user: "24/7 support") and the questions people ask ---------- */
.support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.support-grid .tile p a { color: var(--text); font-weight: 600; white-space: nowrap; }
.support-badge { display: inline-flex; align-items: baseline; gap: .375rem; margin-bottom: .75rem; font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; color: var(--navy); }
.support-badge small { font-size: .875rem; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
@media (max-width: 1000px) { .support-grid { grid-template-columns: minmax(0, 1fr); } }
.faq { max-width: 52rem; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.125rem 0; list-style: none; cursor: pointer; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: .5rem; height: .5rem; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: translateY(-.15rem) rotate(45deg); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: translateY(.1rem) rotate(-135deg); }
.faq details p { padding: 0 2rem 1.25rem 0; color: var(--text-2); }

/* ---------- Why CAS360, straight under the hero (2026-10-19; the user: "have you prioritized arguments that highlight our
   cheapness AND decades of legacy? ... software must not be expensive or low quality?"): price, legacy, quality. ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.value-card { display: flex; flex-direction: column; padding: 1.75rem; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.value-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .5rem; margin: 0 0 1rem; font-family: var(--font-display); font-size: clamp(2rem, 1.6rem + 1vw, 2.625rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--navy); }
.value-fig small { font-family: var(--font); font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.value-card h3 { font-size: 1.125rem; }
.value-card p:not(.value-fig) { margin-top: .5rem; color: var(--text-2); }
.value-card .link-more { margin-top: auto; padding-top: 1rem; align-self: flex-start; }
@media (max-width: 1000px) { .value-grid { grid-template-columns: minmax(0, 1fr); } }

/* The wake-up call (2026-10-19; the user: "some sort of a wakeup call slogan"): what staying on paper costs, above the answer. */
.wake-title { margin: 0 0 1rem; text-align: center; font-size: 1.125rem; }
.wake-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 3.5rem; }
.wake-card { padding: 1.375rem 1.25rem; border-radius: var(--radius-lg); border-top: 3px solid var(--brand-red); background: var(--surface); box-shadow: var(--shadow-1); }
.wake-card b { display: block; font-size: 1rem; color: var(--text); }
.wake-card p { margin-top: .375rem; font-size: .9375rem; color: var(--text-2); line-height: 1.5; }
.value-head { max-width: 46rem; margin: 0 auto 1.75rem; text-align: center; }
.value-head h3 { font-size: clamp(1.375rem, 1.15rem + .6vw, 1.75rem); line-height: 1.25; }
.value-head p { margin-top: .625rem; color: var(--text-3); }
@media (max-width: 1100px) { .wake-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wake-grid { grid-template-columns: minmax(0, 1fr); margin-bottom: 2.5rem; } }

/* Landing pages (SEO spec, 2026-10-20): /free-accounting-software-nepal/, /travel-agency-accounting-software-nepal/,
   /pricing/ and /404.html, built by deploy/pages/build.py with the homepage's header and footer. */
.page-main .crumbs { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1.25rem; font-size: .8125rem; color: var(--text-3); }
.page-main .crumbs a { color: var(--text-3); }
.page-hero { padding: 2.25rem 0 2rem; }
.page-hero h1 { max-width: 22ch; font-size: clamp(2rem, 1.4rem + 1.9vw, 2.875rem); line-height: 1.12; letter-spacing: -.02em; }
.page-hero .lead { max-width: 44rem; margin-top: 1rem; }
.page-hero .btn-row { margin-top: 1.75rem; gap: .75rem 1.25rem; flex-wrap: wrap; align-items: center; }
.page-hero .small { margin-top: 1rem; }
.narrow { max-width: 46rem; }
.h3 { font-size: 1.375rem; }
.h4 { font-size: 1.0625rem; margin-bottom: .25rem; }
.answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; margin: 1.25rem 0 0; }
.answers > div { padding: 1.125rem 1.25rem; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.answers dt { font-weight: 600; color: var(--text); }
.answers dd { margin: .375rem 0 0; color: var(--text-2); font-size: .9375rem; line-height: 1.5; }
.split-media { gap: 3rem; }
.checks.crosses li::before { background: var(--bg-soft); }
.checks.crosses li::after { left: .3125rem; top: calc(.35em + .5rem); width: .5rem; height: 0; border-right: 0; border-bottom: 1.5px solid var(--text-3); transform: none; }
.steps-list { margin: 0 0 1.75rem; padding-left: 1.25rem; display: grid; gap: .875rem; color: var(--text-2); }
.steps-list strong { color: var(--text); }
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.related a { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.125rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text-2); text-decoration: none; }
.related a:hover { border-color: var(--accent); }
.related strong { color: var(--accent); }
.related span { font-size: .875rem; }
.compare.compare-static { margin-top: 0; }
/* A two-column table (a worked example) fits a phone: no minimum width; its caption sits on top, left. */
.compare.compare-narrow table { min-width: 0; }
.compare.compare-narrow th:first-child, .compare.compare-narrow td:first-child { width: 50%; }
.compare caption { caption-side: top; padding: .875rem 1rem 0; text-align: left; }
.page-main figure.window img, .page-main figure.window video { display: block; width: 100%; height: auto; }
.page-main figure.window figcaption { padding: .625rem .875rem; }
@media (max-width: 860px) { .split-media { grid-template-columns: 1fr; gap: 1.5rem; } }
.split.split-top { align-items: start; }
@media (min-width: 801px) { .footer-grid:has(> :nth-child(5)) { grid-template-columns: 2fr repeat(4, 1fr); } }
/* Guides (2026-10-20): /guides/ and /guides/<slug>/. */
.guide-meta { margin-top: 1rem; font-size: .875rem; color: var(--text-3); }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2.5rem; font-size: 1.5rem; letter-spacing: -.01em; }
.prose h3 { margin-top: 1.75rem; font-size: 1.1875rem; }
.prose p, .prose li { color: var(--text-2); line-height: 1.65; }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: .375rem; }
.prose .compare { margin-top: 1.25rem; }
.prose figure.window { margin-top: 1.5rem !important; }
.prose .btn-row { margin-top: 2rem; gap: .75rem; flex-wrap: wrap; }
.guide-list { grid-template-columns: 1fr; }
.guide-list a span { line-height: 1.5; }
.page-main .split > div > * + *, .page-main .narrow > * + * { margin-top: .875rem; }
.page-main .split > div > .eyebrow + h2, .page-main .narrow > .eyebrow + h2 { margin-top: .375rem; }
/* Guide tables fit the text column; only a phone scrolls them sideways. */
.prose .compare-scroll { margin-top: 1rem; }
.prose .compare table { min-width: 0; }
.prose .compare th, .prose .compare td { padding: .5rem .75rem; text-align: left; }
.prose .compare th:first-child, .prose .compare td:first-child { width: auto; }
@media (max-width: 640px) { .prose .compare table { min-width: 34rem; } }
/* Home page as the way in (2026-10-20): who it is for, a button per trade, the plans and guides links. */
.paths { padding: 1.25rem 0 0; }
.paths ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.paths a { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: 1.125rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text-2); text-decoration: none; transition: border-color .2s var(--ease); }
.paths a:hover { border-color: var(--accent); }
.paths svg { width: 1.5rem; height: 1.5rem; color: var(--accent); margin-bottom: .375rem; }
.paths strong { color: var(--text); font-size: 1.0625rem; }
.paths span { font-size: .875rem; line-height: 1.45; }
@media (max-width: 1100px) { .paths ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } .paths li { grid-column: span 2; } .paths li:nth-child(n+4) { grid-column: span 3; } }
@media (max-width: 760px) { .paths ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .paths li, .paths li:nth-child(n+4) { grid-column: auto; } .paths li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 520px) { .paths ul { grid-template-columns: 1fr; } }
.trade-more, .plans-more { margin-top: 1.75rem; text-align: center; }
.support-cta { justify-content: center; margin-top: 2rem; gap: .75rem; flex-wrap: wrap; }

/* Accessibility (2026-10-21, Lighthouse "link-in-text-block" and "color-contrast"): a link inside a sentence is
   underlined, so it does not rely on colour alone; buttons, cards and "more" links keep their own look. The
   "2 months free" label's green is darker on light grounds: 5.2:1 on its tint (was 4.2:1). */
main p a:not(.btn):not(.link-more), main .steps-list a, main .prose li a, main .checks li a, main .faq a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .1875rem; }
html:not([data-theme="dark"]) .seg-save { color: #176f30; }