/* Southern AI Systems — "Dock" direction, sitewide layer.
   Loads right after sais-ds.css on every page (after hero-story.css and
   home-motion.css on the two homepages) and restyles Graphite in place.

   Reference: Refero Styles "Dock" (dock.us)
   https://styles.refero.design/style/d7fb1721-1878-4cbb-a24b-051800557c75

   Reference lock
   - Keep from Dock: cream #faf9f7 canvas (never pure white), one blue as the
     only filled action color, 48px pill buttons, 16px cards and image frames,
     #efefef hairlines never heavier than 1px, feather-light layered shadows,
     big tight display type (line-height 1.06), product screens as the heroes,
     a blue gradient corner on the final call to action only.
   - Keep from Graphite (SAS rules): the logo blue #1463c9 instead of Dock's
     #0068f9, JetBrains Mono for kicker labels only, the two dark ink bands,
     status colors for status only.
   - Leave out: Dock's violet and green accents, serif display type, square
     0-4px corners, heavy blue glows.
   - Type: Dock sets everything in Roobert (paid). Satoshi from Fontshare
     (free for commercial use) stands in, 700 for headlines, 400/500 for text. */

:root {
  --paper-0: #faf9f7;
  --paper-1: #ffffff;
  --paper-2: #f4f2ee;
  --paper-3: #ebe8e2;

  --rule: #efefef;
  --rule-faint: #f4f4f3;
  --rule-strong: #e2e1de;

  --accent: #1463c9;
  --accent-hover: #0f4fa6;
  --accent-wash: rgba(20, 99, 201, 0.07);
  --accent-edge: rgba(20, 99, 201, 0.26);
  --focus-ring: rgba(20, 99, 201, 0.5);

  --font-display: "Satoshi", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Satoshi", "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-quote: var(--font-body);

  --leading-display: 1.06;
  --leading-heading: 1.08;
  --track-display: -0.032em;
  --track-heading: -0.022em;
  --track-body: 0;

  /* Satoshi's zero is about 20% wider than Inter Tight's, so the ch-based
     measures shrink to keep the same line lengths in pixels. */
  --measure-display: 14ch;
  --measure-lead: 51ch;
  --measure-prose: 59ch;

  /* Dock elevation: two soft layers, never one hard drop. */
  --shadow-feather: 0 1px 2px rgba(18, 23, 34, 0.04), 0 10px 28px -16px rgba(18, 23, 34, 0.14);
  --shadow-feather-lift: 0 1px 2px rgba(18, 23, 34, 0.05), 0 18px 40px -20px rgba(18, 23, 34, 0.22);
  --radius-dock-card: 16px;
  --radius-dock-pill: 48px;

  /* Graphite's corner scale, rounded up so every panel on the inner pages
     (steps, terms, live demos, blog cards, maps) lands on Dock's 16px. */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
}

/* Nav: pill links, the current page sits on a white pill. */
.sais-nav { background: rgba(250, 249, 247, 0.86); border-bottom-color: var(--rule) }
.sais-nav__link { border-radius: var(--radius-dock-pill); padding: .5rem .85rem }
.sais-nav__link[aria-current=page] { background: var(--paper-1); box-shadow: 0 0 0 1px var(--rule), var(--shadow-feather) }
.sais-nav__link[aria-current=page]::after { display: none }

/* Buttons: pills. Blue fill is the one filled action; the partner is white. */
.sais-btn { border-radius: var(--radius-dock-pill); font-weight: var(--weight-medium); letter-spacing: 0 }
.sais-btn--lg { min-height: 50px; padding: 0 1.6rem }
.sais-btn--md { min-height: 42px; padding: 0 1.25rem }
.sais-btn--secondary { background: var(--paper-1); border-color: var(--rule-strong); box-shadow: var(--shadow-feather) }
.sais-btn--secondary:hover { background: var(--paper-1); border-color: #d4d3cf; box-shadow: var(--shadow-feather-lift) }

/* Headings: one family, heavy and tight. */
.sais-sechead__h { font-weight: var(--weight-bold); line-height: var(--leading-display) }
.sais-card__title { font-weight: var(--weight-bold) }

/* Cards: 16px corners, hairline, feather shadow. Icons sit in round washes. */
.sais-card { border-radius: var(--radius-dock-card); border-color: var(--rule); box-shadow: var(--shadow-feather); padding: 1.75rem }
.sais-card--sunken { box-shadow: none }
.sais-card--on-ink { border-radius: var(--radius-dock-card); box-shadow: none }
.sais-card__icon { width: 40px; height: 40px; border: 0; border-radius: var(--radius-pill); background: var(--accent-wash) }

/* Callouts: a full 16px card; the blue accent moves to a left stripe so it
   follows the rounded corner instead of capping a square top edge. */
.sais-callout { border-radius: var(--radius-dock-card); border-top: 1px solid var(--rule); box-shadow: inset 3px 0 0 var(--accent), var(--shadow-feather) }

.sais-acc { border-radius: var(--radius-dock-card); border-color: var(--rule); box-shadow: var(--shadow-feather) }
.sais-stats { border-radius: var(--radius-dock-card) }

/* Form fields: softer 12px corners so they sit with the pill buttons. */
.sais-field__control, .sais-select__control { border-radius: 12px }
.logowall__tile { border-radius: var(--radius-dock-card) }

/* Proof of work: the screenshots are the heroes, framed at 16px. */
.proofpanel { border-radius: var(--radius-dock-card) }

/* Final call to action: the one place the blue gradient corner appears. */
.ctapanel {
  border-radius: 24px;
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(20, 99, 201, 0.5) 0%, rgba(20, 99, 201, 0) 58%),
    var(--ink-1);
}

/* Hero: flat cream stage, sans display in place of the serif, softer screen. */
.story__bg { background: radial-gradient(90% 70% at 50% -5%, #ffffff 0%, rgba(255, 255, 255, 0) 62%), var(--paper-0) }
.story__title { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: 1.06; letter-spacing: -0.035em }
.story__lead { text-wrap: balance }
/* Satoshi's tall ascenders peeked through the word masks at 118%, leaving a
   blue sliver of the next line under the current one. Park hidden words further out. */
.story__w > span { transform: translateY(140%) }
.story__line[data-pos="above"] .story__w > span { transform: translateY(-140%) }
.story__line[data-pos="on"] .story__w > span { transform: none }
.story__screen { border-color: var(--rule-strong); box-shadow: 0 2px 4px rgba(18, 23, 34, 0.04), 0 3cqw 6cqw -3.4cqw rgba(18, 23, 34, 0.28) }