/* ═══════════════════════════════════════════════════════════════════════
   ARROWSTERR WEBSITE · THE FRAMED LOOK
   Loaded after every other stylesheet, so it wins. Same layout and class
   names; only the look changes, to match the app (v11, src/app/omni-ui.css
   in the app repo): black and white, square and framed. Inter on white with
   plain greys, a 1px black frame on cards, panels, menus and buttons, grey
   hairlines inside, no shadows, no gradients, no round corners, no Notch.
   Black is the action colour. Signal Blue stays for the logo and marks
   your own brand. Big headings take two tones: black, then grey.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────── 1. Tokens ─────────────── */
:root {
  --brand: #0A0A0A; --brand-deep: #262626; --brand-pale: #F5F5F5; --brand-bg: #F5F5F5;
  --signal: #2760CF; --signal-ink: #0943B0; --signal-soft: #EDF2FC;
  --sky: #A3A3A3; --night: #0A0A0A; --spark: #2760CF; --spark-text: #0943B0; --spark-tint: #EDF2FC;
  --ink: #0A0A0A; --ink-hover: #262626; --body: #404040; --muted: #737373; --faint: #A3A3A3;
  --rule: #E5E5E5; --rule-faint: #F0F0F0; --rule-strong: #D4D4D4; --frame: #0A0A0A;
  --paper: #FFFFFF; --surface: #FFFFFF; --surface-2: #F5F5F5; --surface-3: #EBEBEB;
  --pos: #0A7A52; --pos-bg: #E8F5EF; --neg: #C2412D; --neg-bg: #FBEDEA; --warn: #B7791F; --warn-bg: #FBF3E6;
  --chip-bg: #F5F5F5; --chip-ink: #737373;
  --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0;
  --ring: 0 0 0 1px var(--rule); --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --btn-shadow: none;
  --focus: 0 0 0 1px var(--frame); --notch: 0px;
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.3, 1.5, .6, 1);
}
html, body { background: #FFFFFF; }
body { color: var(--body); }
::selection, html body .post-main .prose ::selection, html body .prose::selection { background: #0943B0; color: #fff; }

/* ─────────────── 2. Shape: flat ───────────────
   Corners follow the radius tokens, which calm.css sets. Nothing casts a shadow here; calm.css puts ring shadows
   back part by part. */
body *:not(input):not(textarea):not(select) { box-shadow: none !important; }
body :focus-visible { outline: 1px solid var(--frame) !important; outline-offset: 2px !important; }
/* The Notch is gone: buttons and frames are plain squares. */
.btn--primary, .btn--white, .shine, .sol-plan__card, .home .ft-tile--wide { clip-path: none !important; }

/* ─────────────── 3. Type ─────────────── */
.h1, .h2, .h3 { font-weight: 500 !important; letter-spacing: -0.035em; font-feature-settings: "ss07" 1, "ss08" 1, "liga" 0; }
.h4 { font-weight: 600; }
.lede { color: #262626; }
.accent { color: #0943B0 !important; }
/* Highlighted words, the rotating one in the hero too, are Arrowsterr Blue. */
.h-rot, .h-rot__w { color: #0943B0 !important; }
.eyebrow { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--muted) !important; letter-spacing: 0; text-transform: none; }
.eyebrow::before { background: var(--muted) !important; }
.live-dot, .live-dot::before { background: var(--pos) !important; }
.cta .eyebrow, .s-cta .eyebrow { color: #A3A3A3 !important; }
.cta .accent, .s-cta .accent, .side-cta .accent { color: #8FB0FF !important; }

/* ─────────────── 4. Buttons: square, a black frame, the main one solid black ─────────────── */
.btn { border: 1px solid transparent; font-weight: 500; transition: transform 200ms var(--ease-spring), background 120ms var(--ease), opacity 120ms var(--ease); }
.btn:active { transform: scale(.96); }
.btn--primary, .btn--dark { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.btn--primary:hover, .btn--dark:hover { background: var(--ink-hover) !important; }
.btn--secondary { background: #fff !important; border-color: var(--frame) !important; color: var(--ink) !important; }
.btn--secondary:hover { background: var(--surface-2) !important; }
.btn--white { background: #fff !important; border-color: #fff !important; color: var(--ink) !important; }
.btn--white:hover { background: #E5E5E5 !important; }
.btn--primary:focus-visible, .btn--white:focus-visible { outline: 1px solid var(--frame) !important; outline-offset: 2px !important; }
/* The shine ring around the main hero button. */
.shine { background: none !important; padding: 0 !important; animation: none !important; }
.shine::before, .shine::after { display: none !important; }

/* ─────────────── 5. Header and menus ─────────────── */
.site-header { background: #fff !important; border-bottom: 1px solid var(--rule) !important; backdrop-filter: none !important; }
.site-header.is-scrolled { border-bottom-color: var(--frame) !important; }
.nav__panel, .palette__box, .aw-select__list, .fx-pick__list { border: 1px solid var(--frame) !important; background: #fff !important; }

/* ─────────────── 6. Cards and frames ───────────────
   One black frame per box: the outer panel gets it, the cards inside get grey hairlines. */
.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: 1px solid var(--frame) !important; background-color: #fff;
}
.sky.h-brand__stage { border: 1px solid var(--frame) !important; }
.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: 1px solid var(--rule) !important; background-color: #fff;
}
.prose table, .prose .aw-table tbody tr, .fx-art__table tr { border-color: var(--rule) !important; }
.post-card:hover, .post-feature:hover { background: var(--surface-2); }
.h-price__plan.is-hot { outline: 1px solid var(--frame); outline-offset: -2px; }

/* Product pictures: a flat grey stage, white cards, and Arrowsterr Blue for the sample data inside. */
.ft-vis, .home .ft-vis, .h-brand__stage, .h-brand__stage.sky { background: var(--surface-2) !important; background-image: none !important; }
.ft-tile--wide .ft-vis { border-right-color: var(--rule) !important; }
.ft-vis { border-bottom-color: var(--rule) !important; }
.sky__grain, .h-mcp__grain { display: none !important; }
.ft-tile, .h-brand__stage, .story, .demo, .how, .h-mcp, .h-demo__card, .vis, .tools, .mock-stats, .ep-wrap, .s-card, .zchat__dock, .tpage {
  --brand: #0943B0; --brand-deep: #07368E; --brand-pale: #EEF3FF; --brand-bg: #EEF3FF; --sky: #4F7FE0;
}
/* The brand cards line up: each column ends at the same line. */
.bk-grid { align-items: stretch !important; }
.bk-col { height: 100%; }
.bk-col > :last-child, .bk-grid > .bk-card { flex: 1 1 auto; }

/* ─────────────── 7. No gradients: flat fills ─────────────── */
.h-hero, .h-hero::before, .h-hero::after, .ft-vis, .home .ft-vis, .h-mcp__stage, .marquee, .vis__chart,
.home .ft-tile--wide .ft-kpi:first-child, .home .ft-tile--wide::after, .story .sc, .story .sp__body,
.sol-plan__card::after, .zscore, .fx-meter::before { background-image: none !important; }
.h-hero::before, .h-hero::after, .home .ft-tile--wide::after, .sol-plan__card::after { display: none !important; }
/* The product film stands on its own: no stage, no frame around it. */
.sky { background: none !important; border: 0 !important; }
.sky::before, .sky::after, .sky__ring { display: none !important; }
.h-sky, .h-hero__grid .h-sky { padding: 0 !important; }
.h-film, .h-film.frame { padding: 0 !important; border: 0 !important; background: none !important; }
.h-film__video, .h-film__video.card { border: 0 !important; border-radius: 0 !important; }
.marquee { -webkit-mask-image: none; mask-image: none; }

/* The demo card: solid Arrowsterr Blue with white text, the app peeking out on the right. */
.h-demo__card { background: #0943B0 !important; color: #fff; border: 0 !important; }
.h-demo__card .h2, .h-demo__card .h2 * { color: #fff !important; background: none !important; }
.h-demo__card .lede { color: rgba(255, 255, 255, .8) !important; }
.h-demo__card .btn--white { border-color: #fff !important; }
.h-demo__win { border: 1px solid var(--frame); }

/* ─────────────── 8. Dark closing sections: black ─────────────── */
.cta, .s-cta, .side-cta, .post-cta__in { background: var(--night) !important; background-image: none !important; }

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

/* ─────────────── 10. Switches: a black-framed row of square cells, the current one solid black ─────────────── */
.cycle, .h-price__cycle, .pick, .fx-seg { background: #fff !important; border: 1px solid var(--frame) !important; padding: 0 !important; gap: 0 !important; }
.cycle > button, .h-price__cycle > button, .pick > button, .fx-seg > :is(button, label) { background: transparent !important; color: var(--muted) !important; font-weight: 500 !important; }
.cycle > button + button, .h-price__cycle > button + button, .pick > button + button, .fx-seg > :is(button, label) + :is(button, label) { border-left: 1px solid var(--rule) !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: var(--ink) !important; color: #fff !important; }
.cycle > button[aria-selected="true"] *, .h-price__cycle > button[aria-selected="true"] * { color: inherit; }

/* ─────────────── 11. Blog: same type as the rest ─────────────── */
.post-hero .post__title, .post__title { font-weight: 500 !important; letter-spacing: -0.035em; }
.prose { color: var(--body) !important; }
.prose a { color: var(--ink) !important; text-decoration-color: var(--faint) !important; }
.prose a:hover { text-decoration-color: var(--ink) !important; }
.prose li::marker, .post-main .prose li::marker { color: var(--faint) !important; }
.prose .aw-try::before { color: var(--ink) !important; }
.crumbs__cat { background: var(--surface-2) !important; }

/* ─────────────── 12. One font ───────────────
   Inter everywhere, with even-width digits where numbers line up. Only real code keeps a plain monospace. */
html:root, html:root body { --mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.mono, .aw-table__num, .aw-table__price, .prose .aw-bar > b, .aw-calc__price, .aw-calc__n, .side-toc__left, .palette__bar, .palette__item em, .palette__foot { font-variant-numeric: tabular-nums; letter-spacing: 0 !important; }
code, pre, kbd, samp { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }

/* ─────────────── 13. Blog post header: editorial, left-aligned, the cover full width under it ─────────────── */
.post-hero__in, .post-hero__in.is-plain { grid-template-columns: minmax(0, 1fr) !important; justify-items: start; gap: 40px; max-width: calc(1040px + var(--gutter) * 2); }
.post-hero__text { align-items: flex-start; text-align: left; max-width: 900px; }
.post-hero .crumbs, .post-hero .byline { justify-content: flex-start; }
.post-hero .post__title { font-size: clamp(36px, 4.4vw, 56px) !important; text-align: left; }
.post-hero__lede { text-align: left; font-size: 19px !important; }
@media (max-width: 640px) { .post-hero__lede { font-size: 17px !important; } }
.post-hero .byline { width: auto; min-width: 0; border: 0 !important; padding: 0 !important; margin-top: 20px !important; }
.post-hero .byline__text { text-align: left; }
.post-hero .post-actions { display: none !important; }
.post-hero__img { width: 100%; max-width: none; }
.post-hero__img img { border: 1px solid var(--frame) !important; }

/* ─────────────── 14. Contrast ─────────────── */
.side-toc__head b { font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; }
.side-toc__left { color: var(--muted) !important; }
.side-cta__k { color: #A3A3A3 !important; letter-spacing: 0 !important; text-transform: none !important; }
.side-cta__d { color: #E5E5E5 !important; }
.prose .aw-table tbody tr.is-us > *, .prose .aw-table tbody tr.is-us:hover > * { background: #EDF2FC !important; color: var(--ink) !important; }
.prose .aw-table tbody tr.is-us .aw-table__value, .prose .aw-table tbody tr.is-us strong { color: var(--ink) !important; }
.prose .aw-table .aw-free { color: #0A7A52 !important; }

/* ─────────────── 15. Blog tables: plain text states, logo and name on one line ─────────────── */
.prose .aw-table .yes, .prose .aw-table .no, .prose .aw-table .part, .prose .aw-table .na { display: inline; width: auto; height: auto; background: none !important; vertical-align: baseline; }
.prose .aw-table th.aw-table__label { white-space: nowrap; }
.prose .aw-table th.aw-table__label .aw-logo { display: inline-block; vertical-align: -3px; margin: 0 8px 0 0; }
.prose .aw-table td, .prose .aw-table__num { white-space: normal; font-size: 14px; }
.prose .aw-table td { min-width: 0; }
.prose .aw-table .aw-table__fit, .prose .aw-table td[data-label="Best for"] { min-width: 168px; }
.prose .aw-table th.aw-table__label { white-space: normal; min-width: 128px; }
.prose .aw-table th.aw-table__label strong { white-space: normal; }
@media (max-width: 760px) { .prose .aw-table td, .prose .aw-table th.aw-table__label, .prose .aw-table .aw-table__fit, .prose .aw-table td[data-label="Best for"] { min-width: 0; } }
.prose .aw-table__src .yes, .prose .aw-table__src .part, .prose .aw-table__src .no, .prose .aw-table__src .na { white-space: normal; }
.prose .aw-table thead th, .prose .aw-table tbody th, .prose .aw-table tbody td { padding-left: 12px; padding-right: 12px; }
.prose .aw-table th.aw-table__label { position: relative; }
.prose .aw-table th.aw-table__label:has(> .aw-logo) { padding-left: 42px; }
.prose .aw-table th.aw-table__label > .aw-logo { position: absolute; left: 14px; top: 15px; margin: 0; }
.prose .aw-table__src .na, .prose .aw-table__src .no { white-space: nowrap; }
.prose .aw-table:has(thead th:nth-child(7)) td, .prose .aw-table:has(thead th:nth-child(7)) th { font-size: 13px; padding-left: 10px; padding-right: 10px; }
.prose .aw-table:has(thead th:nth-child(7)) th.aw-table__label:has(> .aw-logo) { padding-left: 38px; }
.prose .aw-table:has(thead th:nth-child(7)) th.aw-table__label > .aw-logo { left: 12px; }
@media (max-width: 760px) {
  .prose .aw-table th.aw-table__label:has(> .aw-logo) { padding-left: 12px; }
  .prose .aw-table th.aw-table__label > .aw-logo { position: static; display: inline-block; vertical-align: -3px; margin: 0 8px 0 0; }
}