/* ==========================================================================
   Fabricata suite site. Everything specific to this site lives here; suite.css is never edited.
   Components are prefixed site-, and no fx- class is restyled.

   One rule does the work: surfaces stay neutral, and the suite's own accent is ink. The four
   product colours appear only on things that belong to a product: its mark, name, card bar,
   link and rail step. They are always read through --fx-cut/flow/track/inspect, which lift
   themselves in dark mode, never as hex.

   No inline styles anywhere (the CSP drops them). Every animation has a visible resting state
   for no-JavaScript, reduced-motion and print.
   ========================================================================== */

/* ---- 1. The suite's own accent: ink -------------------------------------------- */
[data-fx-product="suite"]{
  --fx-primary:#0F172A; --fx-primary-strong:#1E293B; --fx-primary-deep:#0B1220;
  --fx-primary-soft:#F1F5F9; --fx-primary-line:#CBD5E1; --fx-primary-text:#0F172A;
  --fx-on-primary:#FFFFFF; --fx-focus:#2563EB;
}
@media (prefers-color-scheme:dark){
  html[data-fx-scheme="auto"]:not([data-theme="light"])[data-fx-product="suite"]{
    --fx-primary:#E8EEF7; --fx-primary-strong:#FFFFFF; --fx-primary-deep:#17233F;
    --fx-primary-soft:#16213A; --fx-primary-line:#33465F; --fx-primary-text:#E8EEF7;
    --fx-on-primary:#0B1220; --fx-focus:#93B9F7;
  }
}
body{background:var(--site-bg)}
:root{--site-bg:#F4F7FB}
@media (prefers-color-scheme:dark){html[data-fx-scheme="auto"]:not([data-theme="light"]){--site-bg:#0B1220}}

/* ---- 2. Fonts: self-hosted, swapped in ------------------------------------------ */
@font-face{font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("/static/fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("/static/fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("/static/fonts/inter-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Inter"; font-style:normal; font-weight:800; font-display:swap; src:url("/static/fonts/inter-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat"; font-style:normal; font-weight:800; font-display:swap; src:url("/static/fonts/montserrat-latin-800-normal.woff2") format("woff2")}

/* ---- 3. Base --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--fx-header-h) + 12px)}
body{
  display:flex; flex-direction:column; min-height:100vh; margin:0;
  font-family:var(--fx-font-body); font-size:1rem; line-height:1.55; color:var(--fx-ink);
  -webkit-font-smoothing:antialiased;
}
main{flex:1 0 auto}
main:focus{outline:none}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0; list-style:none}
img,svg{max-width:100%}
a{color:var(--fx-primary-text); text-underline-offset:3px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--fx-focus); outline-offset:2px; border-radius:6px}

/* Product colours, one place. --product is what every site- component reads. */
[data-product="cut"]{--product:var(--fx-cut); --next:var(--fx-flow)}
[data-product="flow"]{--product:var(--fx-flow); --next:var(--fx-track)}
[data-product="track"]{--product:var(--fx-track); --next:var(--fx-inspect)}
[data-product="inspect"]{--product:var(--fx-inspect)}

.skip{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip:focus{
  position:fixed; top:0; left:0; width:auto; height:auto; overflow:visible; clip:auto; z-index:100;
  padding:10px 16px; border-radius:0 0 10px 0; background:var(--fx-ink); color:var(--fx-surface);
  font-weight:600; text-decoration:none;
}

.site-alt{background:var(--fx-surface); border-block:1px solid var(--fx-line)}

/* ---- 4. Hero ----------------------------------------------------------------------- */
.site-hero{padding-block:clamp(48px,6vw,88px) clamp(56px,7vw,96px)}
.site-hero__grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px; align-items:center}
.site-hero__title{margin-top:14px}
.site-verb{display:inline-block; white-space:nowrap}
.site-verb__word{color:var(--product)}
.site-hero__lede{margin-top:20px}
.site-hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.site-hero__facts{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); margin-top:36px}
.site-hero__facts li{display:grid; gap:2px; padding-left:12px; border-left:3px solid var(--fx-primary-line)}
.site-hero__facts strong{font-size:14px; font-weight:700}
.site-hero__facts span{font-size:13px; color:var(--fx-slate)}

/* The mark panel: the large suite mark over a faint grid, with a legend that links to each tool. */
.site-markpanel{
  position:relative; overflow:hidden; display:grid; gap:24px; justify-items:center;
  padding:clamp(20px,3vw,32px); background:var(--fx-surface); border:1px solid var(--fx-line);
  border-radius:var(--fx-radius-lg); box-shadow:var(--fx-shadow);
}
.site-markpanel::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(90deg,var(--fx-line) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(0deg,var(--fx-line) 0 1px,transparent 1px 32px);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%);
}
.site-markpanel > *{position:relative}
.site-mark{display:block; width:min(100%,340px); height:auto}
.site-part{color:var(--product); transform-origin:100px 100px}
.site-legend{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; width:100%; max-width:340px}
.site-chip{
  display:flex; align-items:center; gap:8px; min-height:44px; padding:0 14px;
  border:1px solid var(--fx-line); border-radius:999px; background:var(--fx-surface-2);
  font-size:.9375rem; font-weight:600; color:var(--fx-ink); text-decoration:none;
  transition:border-color .16s linear, background-color .16s linear;
}
.site-chip:hover{border-color:var(--product); background:var(--fx-surface)}

/* The mark assembles: four arcs turn in, then four squares scale in. backwards-only fill, so the
   resting state is the finished mark. Never animate the <circle> itself: it carries its own rotate(). */
@keyframes site-arc-in{from{opacity:0; transform:rotate(-20deg)}}
@keyframes site-square-in{from{opacity:0; transform:scale(.6)}}
.site-part--arc{animation:site-arc-in .7s cubic-bezier(.2,.7,.2,1) backwards}
.site-part--square{animation:site-square-in .4s cubic-bezier(.2,.7,.2,1) backwards}
.site-part--arc[data-i="1"]{animation-delay:.09s}
.site-part--arc[data-i="2"]{animation-delay:.18s}
.site-part--arc[data-i="3"]{animation-delay:.27s}
.site-part--square[data-i="0"]{animation-delay:.35s}
.site-part--square[data-i="1"]{animation-delay:.41s}
.site-part--square[data-i="2"]{animation-delay:.47s}
.site-part--square[data-i="3"]{animation-delay:.53s}

/* ---- 5. Product cards ------------------------------------------------------------------ */
.site-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.site-card{
  position:relative; display:flex; flex-direction:column; gap:12px; padding:28px;
  background:var(--fx-surface); border:1px solid var(--fx-line); border-radius:var(--fx-radius);
  box-shadow:var(--fx-shadow-sm); transition:border-color .16s linear, box-shadow .16s linear;
}
.site-card::before{
  content:""; position:absolute; left:28px; right:28px; top:-1px; height:3px; border-radius:0 0 3px 3px;
  background:var(--product); opacity:.9;
}
.site-card:hover,.site-card:focus-within{border-color:var(--product); box-shadow:var(--fx-shadow)}
.site-card__top{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px}
.site-card__top .fx-badge{margin-left:auto}
.site-card__name{
  font-family:var(--fx-font-display); font-size:1.5rem; font-weight:800; line-height:1.15;
  letter-spacing:-.01em; color:var(--fx-ink);
}
.site-card__name span{color:var(--product)}
.site-card__role{font-size:.9375rem; font-weight:700; line-height:1.35; color:var(--fx-ink)}
.site-card__summary{font-size:.9375rem; line-height:1.6; color:var(--fx-slate)}
.site-card__link{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:auto;
  font-size:.875rem; font-weight:700; color:var(--fx-ink); text-decoration:none;
}
.site-card__link::after{content:""; position:absolute; inset:0; border-radius:var(--fx-radius)}
/* Links to the product's own deeper pages. They sit above the card's stretched link (z-index), so each stays
   separately clickable; the "Visit" link below keeps the card-wide click target. */
.site-card__learn{display:flex; flex-wrap:wrap; gap:0 20px; margin-top:auto}
.site-card__learn + .site-card__link{margin-top:0}
.site-card__learn a{
  position:relative; z-index:1; display:inline-flex; align-items:center; min-height:44px;
  font-size:.875rem; font-weight:600; color:var(--fx-ink);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
.site-card__link svg{transition:transform .16s linear}
.site-card:hover .site-card__link svg{transform:translateX(3px)}

.site-ticks{display:grid; gap:8px; margin-top:4px}
.site-ticks li{display:flex; gap:10px; font-size:.9375rem; line-height:1.5; color:var(--fx-ink)}
.site-ticks li::before{
  content:""; flex:0 0 18px; height:18px; margin-top:2px; border-radius:50%;
  background:var(--fx-surface); border:5px solid var(--product, var(--fx-primary));
}

/* ---- 6. How they fit: the rail --------------------------------------------------------------- */
.site-rail{--rail-gap:28px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--rail-gap)}
.site-step{position:relative; display:flex; flex-direction:column; align-items:flex-start}
.site-step__node{
  position:relative; z-index:1; display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  background:var(--fx-surface); border:2px solid var(--product);
}
.site-step:not(:last-child)::after{
  content:""; position:absolute; top:25px; left:52px; height:2px;
  width:calc(100% + var(--rail-gap) - 52px);
  background:linear-gradient(90deg,var(--product),var(--next));
}
.site-step__number{
  margin-top:18px; font-family:var(--fx-font-display); font-size:.8125rem; font-weight:800;
  letter-spacing:.14em; color:var(--fx-slate);
}
.site-step__title{margin-top:4px; font-family:var(--fx-font-display); font-size:1.125rem; font-weight:800; letter-spacing:-.01em}
.site-step__text{margin-top:8px; font-size:.9375rem; line-height:1.6; color:var(--fx-slate)}
.site-step__link{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:auto; padding-top:6px;
  font-size:.875rem; font-weight:700; color:var(--product); text-decoration:none;
}
.site-step__link:hover{text-decoration:underline}
.site-note{margin-top:32px; font-size:.875rem; color:var(--fx-slate)}

/* ---- 7. One account (only when ACCOUNT_URL is set) -------------------------------------------- */
.site-account{
  padding:clamp(24px,4vw,48px); background:var(--fx-primary-soft); border:1px solid var(--fx-primary-line);
  border-radius:var(--fx-radius-lg);
}
.site-account__points{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.site-account__points p{margin-top:6px; font-size:.9375rem; line-height:1.6; color:var(--fx-slate)}
.site-account__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

/* ---- 8. Plans ------------------------------------------------------------------------------------ */
.site-plans{background:var(--fx-surface); border:1px solid var(--fx-line); border-radius:var(--fx-radius)}
.site-plan{display:grid; grid-template-columns:auto 1fr auto auto; gap:16px; align-items:center; padding:18px 22px}
.site-plan + .site-plan{border-top:1px solid var(--fx-line)}
.site-plan__who{display:grid; gap:2px; min-width:0}
.site-plan__who strong{font-weight:700; color:var(--fx-ink)}
.site-plan__who span{font-size:.875rem; color:var(--fx-slate)}
.site-plan__status{grid-column:3}
.site-plan__link{grid-column:4; min-width:152px; min-height:44px}

/* ---- 9. FAQ ------------------------------------------------------------------------------------------- */
.site-faq{display:grid; gap:10px; max-width:860px}
.site-faq details{background:var(--fx-surface); border:1px solid var(--fx-line); border-radius:var(--fx-radius-sm); padding:0 20px}
.site-faq summary{
  display:flex; justify-content:space-between; gap:16px; min-height:44px; padding:18px 0;
  font-size:1rem; font-weight:800; cursor:pointer; list-style:none;
}
.site-faq summary::-webkit-details-marker{display:none}
.site-faq summary::after{content:"+"; font-size:22px; line-height:1; color:var(--fx-primary-text)}
.site-faq details[open] summary::after{content:"–"}
.site-faq details > div{padding-bottom:18px; line-height:1.65; color:var(--fx-slate)}

/* ---- 10. Sign-in menu ---------------------------------------------------------------------------------- */
.site-signin{position:relative}
.site-signin > summary{list-style:none; cursor:pointer; gap:6px}
.site-signin > summary::-webkit-details-marker{display:none}
.site-signin__chevron{transition:transform .16s linear}
.site-signin[open] .site-signin__chevron{transform:rotate(180deg)}
.site-signin__panel{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60; width:320px; padding:8px;
  background:var(--fx-surface); border:1px solid var(--fx-line); border-radius:var(--fx-radius); box-shadow:var(--fx-shadow);
}
.site-signin__title{
  padding:8px 12px 6px; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fx-slate-2);
}
.site-signin__link{
  display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 12px;
  border-radius:var(--fx-radius-sm); color:var(--fx-ink); text-decoration:none;
}
.site-signin__link:hover{background:var(--fx-surface-2)}
.site-signin__link span{display:grid; line-height:1.25}
.site-signin__link strong{font-size:.9375rem; font-weight:700}
.site-signin__link small{font-size:.8125rem; color:var(--fx-slate)}
.site-signin__flat{display:none}

/* ---- 11. Closing panel and footer ------------------------------------------------------------------------ */
/* The suite page's own drawing for the CTA: four bars in the lifted product colours, on the deep ground. */
[data-fx-product="suite"] .fx-cta::after{
  right:28px; bottom:28px; width:240px; height:10px; border-radius:5px; opacity:.85;
  background:linear-gradient(90deg,#85B7EB 0 23%,transparent 23% 26%,#B9A3FB 26% 49%,transparent 49% 52%,#DDA3EC 52% 75%,transparent 75% 78%,#6FD3A2 78% 100%);
}
@media (prefers-color-scheme:dark){
  html[data-fx-scheme="auto"]:not([data-theme="light"]) .fx-cta{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
}
/* Stacked on small screens the drawing would sit on the buttons: leave it room beneath the content. */
@media (max-width:860px){
  [data-fx-product="suite"] .fx-cta{padding-bottom:clamp(64px,12vw,80px)}
  [data-fx-product="suite"] .fx-cta::after{bottom:28px}
}
@media (min-width:961px){
  .fx-footer__grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
}

/* ---- 12. Other pages ----------------------------------------------------------------------------------------- */
.site-pagehero{padding-block:clamp(40px,6vw,72px) clamp(16px,3vw,32px)}
.site-pagehero__title{margin-top:12px; font-size:clamp(2rem,1.4rem + 2.6vw,3rem)}
.site-pagehero .fx-lede{margin-top:16px}
.site-pagehero__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}

.site-contact{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; max-width:880px}
.site-contact__card{
  display:grid; align-content:start; gap:14px; padding:28px; background:var(--fx-surface);
  border:1px solid var(--fx-line); border-radius:var(--fx-radius); box-shadow:var(--fx-shadow-sm);
}
.site-contact__address{font-family:var(--fx-font-display); font-size:1.25rem; font-weight:800; overflow-wrap:anywhere}
.site-contact__existing{max-width:880px; margin-top:32px; padding-left:16px; border-left:3px solid var(--fx-primary-line)}
.site-contact__existing p{margin-top:6px; color:var(--fx-slate)}

.site-legal{display:grid; grid-template-columns:240px minmax(0,1fr); gap:40px; padding-block:48px 72px}
.site-legal__index{position:sticky; top:calc(var(--fx-header-h) + 16px); align-self:start; display:grid; gap:2px}
.site-legal__index a{
  display:flex; align-items:center; min-height:44px; padding:0 10px; border-radius:10px;
  font-size:.875rem; font-weight:600; color:var(--fx-slate); text-decoration:none;
}
.site-legal__index a:hover{color:var(--fx-ink)}
.site-legal__index a[aria-current="page"]{background:var(--fx-primary-soft); color:var(--fx-primary-text)}
.site-legal__page{max-width:760px}
.site-legal__title{margin:10px 0 14px; font-size:clamp(1.75rem,3.6vw,2.5rem)}
.site-legal__scope{margin-top:20px; padding-left:12px; border-left:3px solid var(--fx-primary-line)}
.site-legal__updated{margin-top:12px; font-size:.875rem; color:var(--fx-slate)}
.site-legal__page h2{margin:30px 0 8px; font-family:var(--fx-font-display); font-size:1.1875rem; font-weight:800; letter-spacing:-.01em}
.site-legal__page p,.site-legal__page li{line-height:1.7}
.site-legal__page ul{display:grid; gap:6px; margin-top:8px; padding-left:1.25rem; list-style:disc}
.site-legal__review{margin-top:36px; padding-top:16px; border-top:1px solid var(--fx-line); font-size:.8125rem; color:var(--fx-slate)}

/* ---- 13. Responsive ----------------------------------------------------------------------------------------------- */
@media (max-width:960px){
  /* Without JavaScript the shared menu stays laid out under the bar (suite.css), so the header is as tall
     as the whole menu. Sticky, it would cover the page; let it scroll away like any other block. */
  html:not(.fx-js) .fx-header{position:static}
  .site-hero__grid{grid-template-columns:1fr}
  .site-markpanel{width:100%; max-width:420px; margin-inline:auto}
  /* The menu has collapsed, where a popover is awkward: show the four sign-in links as a flat list. */
  .site-signin{display:none}
  .site-signin__flat{
    display:block; padding:4px; background:var(--fx-surface); border:1px solid var(--fx-line-strong);
    border-radius:var(--fx-radius-sm);
  }
}
@media (max-width:899px){
  .site-rail{grid-template-columns:1fr; gap:0}
  .site-step{padding:0 0 32px 76px; min-height:52px}
  .site-step:last-child{padding-bottom:0}
  .site-step__node{position:absolute; left:0; top:0}
  .site-step:not(:last-child)::after{
    top:52px; left:25px; width:2px; height:calc(100% - 52px);
    background:linear-gradient(180deg,var(--product),var(--next));
  }
  .site-step__number{margin-top:0}
}
@media (max-width:860px){
  .site-account__points{grid-template-columns:1fr}
  .site-legal{grid-template-columns:1fr; gap:24px}
  .site-legal__index{position:static; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media (max-width:759px){
  .site-cards,.site-contact{grid-template-columns:1fr}
}
@media (max-width:640px){
  .site-plan{grid-template-columns:auto 1fr; gap:12px 14px; padding:18px}
  .site-plan__status,.site-plan__link{grid-column:1 / -1; justify-self:start}
}
@media (max-width:480px){
  .site-card{padding:22px}
  .site-card::before{left:22px; right:22px}
  .site-card__name{font-size:1.375rem}
  .site-card__top .fx-badge{margin-left:0}
  .site-hero__actions .fx-btn{width:100%}
}

/* ---- 14. Motion and print ------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .site-part{animation:none}
  .site-chip,.site-card,.site-card__link svg,.site-signin__chevron{transition:none}
}
@media print{
  .site-part{animation:none}
}