/* The chrome the three /solutions pages wear, linked from each page's <page-head>
   the way the documentation pages link docs.css. Three copies of these rules is
   what docs.css already exists to prevent, and these pages are the same shape as
   each other by design: the same seven blocks in the same order. */

/* The hero. Not the drifting purple cloud every AI landing page now opens with:
   each page gets a flat pattern that means something on that page, a ledger rule,
   a wiring grid, a scanner, drawn from two gradients and moved by background
   position. The one soft light is the page's own cap artwork out of focus, which
   is where its colour comes from everywhere else. */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 84px 0 10px; }
.hero .wrap { position: relative; z-index: 2; }
.hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Held in the top half: below it the light washed the panel that carries the one
   paragraph every reader has to get through. It breathes on a slow cycle, far too
   slowly to watch on purpose and just enough that the page is not a photograph. */
.hero::before {
  background: var(--cf-cap, url(/img/cap-govern.webp)) 82% -80%/130% auto no-repeat;
  filter: blur(80px) saturate(1.15) hue-rotate(var(--cap-rot, 0deg)); opacity: .42;
  -webkit-mask-image: linear-gradient(180deg, #000 38%, transparent 80%);
  mask-image: linear-gradient(180deg, #000 38%, transparent 80%);
  animation: breathe 34s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .34; transform: scale(1); }
  50% { opacity: .5; transform: scale(1.06); }
}
/* The pattern, faded out before it reaches the copy below. */
.hero::after {
  -webkit-mask-image: radial-gradient(130% 76% at 50% 0%, #000 34%, transparent 82%);
  mask-image: radial-gradient(130% 76% at 50% 0%, #000 34%, transparent 82%);
}

/* Money is kept in ruled books, so this one is ruled. */
.sol-spend .hero::after {
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 36px);
  animation: ledger 30s linear infinite;
}
@keyframes ledger { to { background-position: 0 -36px; } }

/* Accounts wired into one place, with one segment of light travelling a wire the
   way a request travels one. It crosses about every nine seconds, which is often
   enough to catch out of the corner of an eye and rare enough not to nag. */
.sol-models .hero::after {
  background:
    linear-gradient(90deg, transparent, rgba(140, 214, 190, .5), transparent) -30% 232px/22% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 58px);
  /* One animation, not two: a second one on the same property would simply win,
     and the grid holding still is what makes the moving segment read as moving. */
  animation: wire 9s linear infinite;
}
@keyframes wire {
  0% { background-position: -30% 232px, 0 0, 0 0; }
  55%, 100% { background-position: 130% 232px, 0 0, 0 0; }
}

/* A band that sweeps down the page, which is the whole feature in one gesture. */
.sol-secrets .hero::after {
  background:
    linear-gradient(180deg, transparent, rgba(139, 122, 255, .16), transparent) 0 -20%/100% 190px no-repeat,
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 7px);
  animation: scan 9s ease-in-out infinite;
}
@keyframes scan {
  0% { background-position: 0 -20%, 0 0; }
  100% { background-position: 0 120%, 0 0; }
}

/* The hero arrives in the order it is read, one short step apart. Not applied under
   reduced motion, so nothing here can leave a headline at zero opacity: the rule
   that hides it is the same rule that moves it. */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow, .hero h1, .hero .lede, .hero .btn-primary, .hero .plain {
    animation: lift .62s cubic-bezier(.2, .7, .3, 1) both;
  }
  .hero h1 { animation-delay: .06s; }
  .hero .lede { animation-delay: .12s; }
  .hero .btn-primary { animation-delay: .18s; }
  .hero .plain { animation-delay: .26s; }
}
@keyframes lift { from { opacity: 0; transform: translateY(12px); } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--g-mono);
  font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--g-action-text); margin: 0 0 18px;
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--g-action); box-shadow: 0 0 0 0 var(--g-action);
  animation: live 3.6s ease-out infinite;
}
@keyframes live {
  0% { box-shadow: 0 0 0 0 rgba(123, 97, 255, .5); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(123, 97, 255, 0); }
}
h1 {
  margin: 0 0 18px; max-width: 17ch;
  font-size: clamp(34px, 5.8vw, 56px); line-height: 1.06;
  font-weight: 650; letter-spacing: -0.03em; text-wrap: balance;
}
/* The half of the sentence the page is actually about, underscored once by the
   page's own cap colour after the headline has landed. Drawn under the last line
   only, and left there: a line that keeps redrawing is a line you stop reading. */
/* Painted as the span's own background rather than an absolutely positioned bar:
   the headline wraps, and at 320px this phrase is three line boxes. A bar can only
   ever be under the first of them; a background with box-decoration-break follows
   all three. background-size is animatable, so it still draws itself. */
h1 .k {
  color: var(--g-action-text);
  padding-bottom: .04em;
  background: var(--cf-cap, url(/img/cap-govern.webp)) 0 100%/100% 3px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
  h1 .k { animation: underline .7s cubic-bezier(.2, .7, .3, 1) .45s both; }
}
@keyframes underline { from { background-size: 0 3px; } }
/* The one place --cap-rot cannot be used: a filter here would turn the letters as
   well as the line under them. Insights borrows the unify artwork instead, which
   sits in the same blue-green as its rotated glow. */
.sol-insights h1 .k { background-image: url(/img/cap-unify.webp); }
.lede { margin: 0; max-width: 54ch; font-size: 17.5px; color: var(--text-secondary); text-wrap: pretty; }
.hero .btn-primary { margin-top: 28px; font: 650 15px/1 var(--g-sans); padding: 13px 22px; border-radius: 10px; }

/* One page opens centred, the other two do not. Three pages built to the same
   plan should still be told apart from across the room. */
.hero.middle { text-align: center; padding-bottom: 6px; }
.hero.middle h1, .hero.middle .lede { margin-inline: auto; }
.hero.middle .lede { max-width: 58ch; }
.hero.middle .plain { text-align: left; }

/* The same two sentences on all three pages. A reader who lands here from a
   search has never seen the home page, so each page says what Selan is before it
   says which part of it this page is about. */
.plain {
  margin: 34px auto 0; padding: 22px 24px;
  border: 1px solid var(--g-line); border-radius: var(--g-radius-card); background: var(--g-panel);
}
.plain p { margin: 0; font-size: 16px; line-height: 1.66; color: #c6cad3; max-width: 68ch; text-wrap: pretty; }
.plain .plain-this { margin-top: 12px; font-size: 14.5px; color: var(--g-muted); }
.plain b { font-weight: 600; color: var(--g-text); }

.sections { padding: 12px 0 20px; }

.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.feat + .feat { margin-top: 112px; }
.feat h2 {
  margin: 0;
  font-size: 34px; line-height: 1.16; font-weight: 600; letter-spacing: -.025em;
  color: var(--g-text); text-wrap: balance; max-width: 476px;
}
.feat p { margin: 16px 0 0; font-size: 15.5px; line-height: 1.66; color: #b9bdc7; max-width: 52ch; text-wrap: pretty; }
.feat.flip .feat-copy { order: 2; }

/* The count, and a rule that draws itself as the row arrives. Three rows of the
   same weight read as a list; a number and a line give them a beat. */
.ix {
  display: flex; align-items: center; gap: 14px; margin: 0 0 16px;
  font: 400 11px var(--g-mono); letter-spacing: .18em; color: var(--g-dim);
}
.ix::after { content: ""; height: 1px; flex: 1; transform-origin: left; background: linear-gradient(90deg, var(--g-line-2), transparent); }

/* One row per page runs full width instead of beside its picture: the wide
   tables are unreadable at half a column, and the change of rhythm is the point. */
.feat.wide { grid-template-columns: minmax(0, 1fr); gap: 34px; }
.feat.wide .feat-copy { max-width: 720px; }
.feat.wide h2 { max-width: none; font-size: 38px; }
.feat.wide .sec-list { columns: 2; column-gap: 44px; }
.feat.wide .sec-list li { break-inside: avoid; }

.sec-list { list-style: none; margin: 24px 0 0; padding: 0; }
.sec-list li {
  border-top: 1px solid var(--g-line-soft);
  padding: 15px 0;
  font-size: 14.5px; line-height: 1.62; color: #b9bdc7; letter-spacing: -.004em;
  text-wrap: pretty;
}
.sec-list li:last-child { border-bottom: 1px solid var(--g-line-soft); }
.sec-list code, .knowbox code, .feat p code {
  font-family: var(--g-mono); font-size: .92em; color: var(--g-text);
  background: var(--g-sunken); border: 1px solid var(--g-line-soft); border-radius: 3px;
  padding: 1px 5px; white-space: nowrap;
}

/* The screenshot frames, carried over from /how-it-works: the same product, shot
   the same way, so it should be framed the same way. */
.frag {
  background: var(--g-panel); border: 1px solid var(--g-line); border-radius: var(--g-radius-card);
  padding: 24px 26px 12px; margin: 0;
  font-family: var(--g-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .26);
}
.frag.capped::before {
  content: ""; display: block; height: 20px;
  margin: -24px -26px 22px;
  border-radius: var(--g-radius-card) var(--g-radius-card) 0 0;
  border-bottom: 1px solid var(--g-line);
  background: var(--cf-cap, url(/img/cap-govern.webp)) var(--cf-cap-pos, 50% 50%)/230% auto no-repeat;
}
.frag-head {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--g-dim);
  padding-bottom: 13px; border-bottom: 1px solid var(--g-line);
}
.frag-head + .frag-head, .fcut + .frag-head { border-top: 1px solid var(--g-line); padding-top: 15px; border-bottom: none; margin-top: 20px; }
.fcut { display: block; width: 100%; max-width: 100%; height: auto; margin: 16px 0 14px; }
.fcut.tight { margin-top: 8px; }
.fcut.fade-b {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent 100%);
}

/* One page, one cap colour: the pages are told apart at a glance, without a second
   palette. Set on <main>, read by every .frag on the page. There are three cap
   images and four pages, so the fourth is the first one turned rather than a new
   asset: --cap-rot is the hue, applied wherever the artwork is drawn. The idiom is
   already in index.css and how-it-works.css. */
.sol-spend { --cf-cap: url(/img/cap-govern.webp); }
.sol-models { --cf-cap: url(/img/cap-unify.webp); }
.sol-secrets { --cf-cap: url(/img/cap-protect.webp); --cf-cap-pos: 0% 100%; }
.sol-insights { --cf-cap: url(/img/cap-govern.webp); --cap-rot: 205deg; }
.frag.capped::before, .knowbox::before { filter: hue-rotate(var(--cap-rot, 0deg)); }

/* The redaction shown as itself rather than as a screenshot: it is two lines of
   text, and a PNG of two lines of text cannot be read by a screen reader. */
.swap {
  margin: 18px 0 14px; display: grid; gap: 10px;
  font-family: var(--g-mono); font-size: 12.5px; letter-spacing: -.01em;
}
.swap div {
  border: 1px solid var(--g-line); border-radius: var(--g-radius-control); background: var(--g-sunken);
  padding: 13px 14px; overflow-wrap: anywhere;
}
.swap .swap-tag { display: block; margin-bottom: 7px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--g-dim); }
.swap .was { color: var(--g-text); }
.swap .now { color: var(--g-action-text); }

.howto { margin: 120px 0 0; }
.howto h2 { margin: 0 0 4px; font-size: clamp(23px, 4vw, 30px); font-weight: 675; letter-spacing: -.02em; }
.howto ol { counter-reset: s; list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.howto li {
  counter-increment: s; position: relative; overflow: hidden;
  background: var(--g-panel); border: 1px solid var(--g-line); border-radius: var(--g-radius-card);
  padding: 22px 24px 24px;
  font-size: 14.5px; line-height: 1.62; color: #b9bdc7; text-wrap: pretty;
}
/* The step number as a watermark instead of a caption: the same information,
   without a second line of small grey type above every card. */
.howto li::before {
  content: "0" counter(s); position: absolute; right: 12px; bottom: -22px; z-index: 0;
  font: 700 76px/1 var(--g-mono); letter-spacing: -.05em; color: var(--g-text); opacity: .05;
}
.howto li b, .howto li { position: relative; }
.howto li b { display: block; margin-bottom: 6px; font-weight: 600; color: var(--g-text); }

/* The limits of the thing, on the page rather than in an FAQ nobody opens. */
.knowbox { position: relative; margin: 96px 0 0; border: 1px solid var(--g-line); border-radius: var(--g-radius-card); background: var(--g-panel); padding: 26px 28px 28px; overflow: hidden; }
/* The page's own colour, on the edge of the one block that admits what the
   product cannot do. */
.knowbox::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cf-cap, url(/img/cap-govern.webp)) 50% 50%/auto 340% no-repeat;
}
.knowbox h2 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.015em; }
.knowbox ul { list-style: none; margin: 18px 0 0; padding: 0; }
.knowbox li {
  border-top: 1px solid var(--g-line-soft); padding: 14px 0;
  font-size: 14.5px; line-height: 1.62; color: #b9bdc7; text-wrap: pretty;
}
.knowbox li:last-child { padding-bottom: 0; }
.knowbox a { color: var(--g-action-text); }

.siblings { margin: 96px 0 0; }
.siblings h2 { margin: 0 0 20px; font-size: 21px; font-weight: 600; letter-spacing: -.015em; }
/* Three cards now, not two, and auto-fit rather than a fixed count so adding a
   fifth page is not also a CSS change. */
.siblings .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }
.siblings a {
  position: relative; display: block; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--g-panel); border: 1px solid var(--g-line); border-radius: var(--g-radius-card);
  padding: 22px 24px 24px;
  transition: border-color .18s ease, transform .18s ease;
}
/* The cap strip of the page this card leads to, drawn on when the pointer is on
   it. The colour is the promise that the next page is a different one. */
.siblings a::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.siblings a[href$="spend"]::before { background: url(/img/cap-govern.webp) 50% 50%/230% auto no-repeat; }
.siblings a[href$="models"]::before { background: url(/img/cap-unify.webp) 50% 50%/230% auto no-repeat; }
.siblings a[href$="secrets"]::before { background: url(/img/cap-protect.webp) 0 100%/230% auto no-repeat; }
.siblings a[href$="insights"]::before { background: url(/img/cap-govern.webp) 50% 50%/230% auto no-repeat; filter: hue-rotate(205deg); }
.siblings a:hover { border-color: #31353f; transform: translateY(-2px); }
.siblings a:hover::before, .siblings a:focus-visible::before { transform: scaleX(1); }
.siblings .k { font: 500 10px var(--g-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--g-muted); }
.siblings h3 { margin: 12px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--g-text); }
.siblings p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.62; color: var(--g-muted); text-wrap: pretty; }

.close { padding: 96px 0 78px; text-align: center; }
.close h2 { margin: 0 0 12px; font-size: clamp(23px, 4vw, 30px); font-weight: 675; letter-spacing: -0.02em; }
.close p { margin: 0 auto 24px; max-width: 46ch; color: var(--text-secondary); font-size: 16px; }
.close .btn-primary { font: 650 15px/1 var(--g-sans); padding: 13px 22px; border-radius: 10px; }

/* Scroll-driven, so nothing is hidden by a script that might not run and nothing
   animates while it is off screen. Same guard /how-it-works uses. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Only the rows. Fading in every card, box and link as well left most of the
       page sitting at zero opacity until it was scrolled to, which is a page that
       looks empty, not a page that feels alive. */
    .feat {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 4% cover 24%;
    }
    .ix::after {
      animation: draw linear both; animation-timeline: view(); animation-range: entry 8% cover 26%;
    }
  }
}
@keyframes draw { from { transform: scaleX(0); } }

@media (max-width: 1080px) {
  .feat { gap: 44px; }
  .feat h2 { font-size: 30px; }
  .feat.wide h2 { font-size: 33px; }
}
@media (max-width: 900px) {
  .feat, .feat.wide { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .feat.wide .sec-list { columns: 1; }
  .feat h2 { font-size: 27px; }
  .feat + .feat { margin-top: 84px; }
  /* Copy before the picture on a phone, whichever side it sits on above. */
  .feat .feat-copy { order: 1; }
  .feat .feat-vis { order: 2; }
  .howto { margin-top: 84px; }
  .howto ol { grid-template-columns: minmax(0, 1fr); }
  .knowbox, .siblings { margin-top: 72px; }
  .siblings .cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .hero { padding: 52px 0 4px; }
  .lede { font-size: 16.5px; }
  .plain { padding: 20px 20px; }
  .frag { padding: 20px 18px 10px; }
  .frag.capped::before { margin: -20px -18px 20px; }
  .close { padding: 64px 0 58px; }
}
/* Somebody who asked the browser to stop things moving gets a still page: the
   patterns stay, the drift, the pulse and the sweep do not. */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .eyebrow::before { animation: none !important; }
  .siblings a, .siblings a::before { transition: none !important; }
  .siblings a::before { transform: scaleX(1); }
}