/* ═══════════════════════════════════════════════════════════════════════
   ARROWSTERR WEBSITE · THE CALM LOOK
   Loaded after framed.css on every page but the demo, so it wins. Same
   layout and class names; only the look changes, to match the app (v12,
   src/app/calm-ui.css in the app repo), which follows Claritia's calm style
   (after zite.com): a light gray page, white cards on 12 to 16px corners and
   soft ring shadows instead of black frames, pill buttons with a dark gray
   main one, 6px tags, 8px inputs and Inter for every word. Signal Blue
   #0943B0 is the one signal: the logo, highlighted words, your own brand.
   framed.css still turns off the older shadows; this file puts ring shadows
   back part by part.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────── 1. Tokens ─────────────── */
:root {
  --brand: #333333; --brand-deep: #1F1F1F; --brand-pale: #F5F5F5; --brand-bg: #F5F5F5;
  --signal: #0943B0; --signal-ink: #0943B0; --signal-soft: #E8EEFA; --signal-rgb: 9 67 176;
  --ink: #0F0F0F; --ink-hover: #1F1F1F; --body: #333333; --muted: #737373; --faint: #A3A3A3;
  --rule: #EBEBEB; --rule-faint: #F0F0F0; --rule-strong: #D4D4D4; --frame: #EBEBEB;
  --paper: #FAFAFA; --surface: #FFFFFF; --surface-2: #F5F5F5; --surface-3: #EDEDED;
  --pos: #086444; --pos-bg: #E3F4EC; --neg: #B42318; --neg-bg: #FDECEA; --warn: #8A4B00; --warn-bg: #FDF0DC;
  --chip-bg: #EDEDED; --chip-ink: #333333;
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px;
  --shadow-rest: 0 4px 4px -12px rgb(0 0 0 / .02), 0 12px 12px -6px rgb(0 0 0 / .02), 0 6px 6px -3px rgb(0 0 0 / .02), 0 3px 3px -1.5px rgb(0 0 0 / .02), 0 1px 1px -.5px rgb(0 0 0 / .04), 0 0 0 1px rgb(0 0 0 / .06);
  --shadow-hover: 0 24px 24px -12px rgb(0 0 0 / .04), 0 12px 12px -6px rgb(0 0 0 / .02), 0 6px 6px -3px rgb(0 0 0 / .04), 0 3px 3px -1.5px rgb(0 0 0 / .08), 0 1px 1px -.5px rgb(0 0 0 / .08), 0 0 0 1px rgb(0 0 0 / .08);
  --shadow-chip: 0 1px 2px rgb(0 0 0 / .08), 0 0 0 1px rgb(0 0 0 / .06);
  --shadow-outline: 0 0 0 1px rgb(0 0 0 / .1), 0 1px 3px rgb(0 0 0 / .16);
  --shadow-primary: 0 0 0 1px rgb(0 0 0 / .8), 0 1px 3px rgb(0 0 0 / .4), 1px 4px 8px rgb(0 0 0 / .12);
  --shadow-input: 0 0 0 1px rgb(0 0 0 / .1), 0 1px 3px rgb(0 0 0 / .16);
  --shadow-focus: 0 0 0 1px #0943B0, 0 1px 3px rgb(0 0 0 / .16), 0 0 0 3px rgb(9 67 176 / .18);
  --shadow-menu: 0 12px 32px -6px rgb(0 0 0 / .12), 0 0 0 1px rgb(111 107 107 / .1), 0 1px 3px rgb(63 70 75 / .1);
  --ring: 0 0 0 1px rgb(0 0 0 / .06); --shadow-sm: var(--shadow-chip); --shadow-md: var(--shadow-menu); --shadow-lg: var(--shadow-menu);
  --focus: var(--shadow-focus);
  --ease: cubic-bezier(.4, 0, .2, 1);
}
html, body { background: var(--paper) !important; }
body { color: var(--body); letter-spacing: -0.006em; }
::selection, html body .post-main .prose ::selection, html body .prose::selection { background: var(--signal-soft); color: var(--ink); }
body :focus-visible { outline: 2px solid rgb(9 67 176 / .55) !important; outline-offset: 2px !important; }

/* ─────────────── 2. Type ─────────────── */
.h1, .h2, .h3 { color: var(--ink); }
.eyebrow { color: var(--muted) !important; }
.accent, .h-rot, .h-rot__w { color: var(--signal) !important; }

/* ─────────────── 3. Buttons: pills on ring shadows ─────────────── */
.btn { border-radius: 9999px !important; border-color: transparent !important; transition: transform 150ms var(--ease), background-color 150ms var(--ease), box-shadow 150ms var(--ease) !important; }
.btn:active { transform: translateY(1px); }
.btn--primary, .btn--dark { background: var(--brand) !important; color: #fff !important; box-shadow: var(--shadow-primary) !important; }
.btn--primary:hover, .btn--dark:hover { background: var(--brand-deep) !important; }
.btn--secondary { background: #fff !important; color: var(--body) !important; box-shadow: var(--shadow-outline) !important; }
.btn--secondary:hover { background: var(--paper) !important; }
.btn--white { background: #fff !important; color: var(--ink) !important; box-shadow: 0 1px 3px rgb(0 0 0 / .3) !important; }
.btn--white:hover { background: #F0F0F0 !important; }
.btn:focus-visible { outline: none !important; box-shadow: var(--shadow-focus) !important; }

/* ─────────────── 4. Header and menus ─────────────── */
.site-header { background: rgb(250 250 250 / .86) !important; backdrop-filter: saturate(1.4) blur(12px) !important; border-bottom: 1px solid transparent !important; }
.site-header.is-scrolled { border-bottom-color: var(--rule) !important; }
.aw-menu a { border-radius: 9999px !important; }
.aw-menu a:hover { background: rgb(0 0 0 / .04) !important; }
.nav__panel, .palette__box, .aw-select__list, .fx-pick__list { border: 0 !important; border-radius: 12px !important; background: #fff !important; box-shadow: var(--shadow-menu) !important; }
.kbar { border-radius: 9999px !important; box-shadow: var(--shadow-chip) !important; background: #fff; }

/* ─────────────── 5. Cards: white on 12 to 16px corners and a ring shadow ─────────────── */
.card, .tools, .ep-wrap, .mock-stats, .zchat__dock,
.author-box, .post-card, .post-feature, .side-toc, .prose .aw-scroll, .prose .aw-shot__frame, .prose .aw-bars,
.compare, .c-feat, .c-plan, .fx-form, .fx-art__table, .os-start__o, .plan, .h-price__plan, .s-card, .s-form, .s-wait__card,
.sol-plan__card, .ft-tile, .h-brand__stage, .story .sc {
  border: 0 !important; border-radius: 16px !important; background-color: #fff; box-shadow: var(--shadow-rest) !important;
}
.sky.h-brand__stage { border: 0 !important; }
.post-card:hover, .post-feature:hover, .ft-tile:hover { background: #fff; box-shadow: var(--shadow-hover) !important; }
/* Cards inside a card are quiet wells on a hairline ring. */
.ft-win, .ft-card, .ft-kpi, .bk-card, .bk-url__box, .ans, .ask, .doc, .share, .mini, .mock-card, .mock-modal, .zcard, .zhi__bubble,
.story .sp, .story .sx-report, .story .sx-gauge, .story .sx-kw__trend, .story .sx-pub, .story .sx-row, .story .sx-tiles > div {
  border: 0 !important; border-radius: 12px !important; background-color: #fff; box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgb(0 0 0 / .04) !important;
}
.frame { border-radius: 20px !important; }
.frame > .card { border-radius: 14px !important; }
.h-price__plan.is-hot { outline: 0; box-shadow: 0 0 0 1.5px var(--signal), var(--shadow-hover) !important; }
.ft-vis, .home .ft-vis, .h-brand__stage, .h-brand__stage.sky { background: var(--surface-2) !important; }
.ft-vis { border-bottom-color: var(--rule) !important; border-radius: 16px 16px 0 0; }
.ft-tile, .story .sc { overflow: hidden; }
.h-demo__card { border-radius: 20px !important; box-shadow: var(--shadow-hover) !important; }
.h-demo__win { border: 0 !important; border-radius: 12px !important; box-shadow: var(--shadow-menu) !important; }
.post-hero__img img { border: 0 !important; border-radius: 16px !important; box-shadow: var(--shadow-rest) !important; }
.logo-ai, .ai-row li { border-radius: 6px !important; }
.ai-row li { border-radius: 9999px !important; box-shadow: var(--shadow-chip) !important; }

/* ─────────────── 6. Tags and chips ─────────────── */
.tag, .chip, .badge, .pill, .crumbs__cat, .iso-tag, .sx-tag { border-radius: 6px !important; }
.crumbs__cat { background: var(--surface-3) !important; }

/* ─────────────── 7. Fields ─────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select {
  border-color: transparent !important; border-radius: 8px !important; box-shadow: var(--shadow-input) !important; background-color: #fff;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, textarea:focus, select:focus { outline: none !important; box-shadow: var(--shadow-focus) !important; }

/* ─────────────── 8. Switches: a gray pill track with a white thumb ─────────────── */
.cycle, .h-price__cycle, .pick, .fx-seg { background: var(--surface-3) !important; border: 0 !important; border-radius: 9999px !important; padding: 3px !important; gap: 2px !important; }
.cycle > button, .h-price__cycle > button, .pick > button, .fx-seg > :is(button, label) { border-radius: 9999px !important; border: 0 !important; color: var(--muted) !important; }
.cycle > button + button, .h-price__cycle > button + button, .pick > button + button, .fx-seg > :is(button, label) + :is(button, label) { border-left: 0 !important; }
.cycle > button[aria-selected="true"], .h-price__cycle > button[aria-selected="true"], .pick > button[aria-checked="true"],
.fx-seg > :is(button, label):is([aria-checked="true"], .is-on, :has(input:checked)) { background: #fff !important; color: var(--ink) !important; box-shadow: var(--shadow-chip) !important; }

/* ─────────────── 9. Dark closing sections: rounded bands ─────────────── */
.cta, .s-cta, .side-cta, .post-cta__in { background: #171717 !important; border-radius: 24px; }
.cta .btn--primary, .s-cta .btn--primary, .side-cta .btn--primary, .post-cta__in .btn--primary { background: #fff !important; color: var(--ink) !important; box-shadow: 0 1px 3px rgb(0 0 0 / .4) !important; }

/* ─────────────── 10. Blog ─────────────── */
.prose a { color: var(--signal) !important; text-decoration-color: rgb(9 67 176 / .3) !important; }
.prose a:hover { text-decoration-color: var(--signal) !important; }
.prose .aw-table tbody tr.is-us > *, .prose .aw-table tbody tr.is-us:hover > * { background: var(--signal-soft) !important; }

/* ─────────────── 11. Motion ─────────────── */
@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}