/* ============================================================
   FrexCore website — the layer over Bootstrap.

   Bootstrap supplies the grid, the spacing scale, the reset and the
   table and button mechanics. It does not supply the identity: left
   alone it produces a page that looks like every other Bootstrap page,
   which is the opposite of what this site is for. So every Bootstrap
   variable that affects how the page reads is redefined here from our
   own tokens, and the components the design actually turns on — the
   drawn plates, their title blocks, the module pillars — are ours.

   Layout: asymmetric columns around drawn plates, alternating paper and
   white bands, everything left aligned. Committed to one light "ink on
   paper" world, so there is no dark variant: the plates and the
   document idiom are the design.
   ============================================================ */

:root{
  color-scheme:light;

  /* --- our tokens ------------------------------------------- */
  --ink:#10233f;
  --navy:#1e3d6b;
  --navy-lift:#2b5490;
  --teal:#00a8a8;
  --teal-deep:#00707a;
  --paper:#f5f7f9;
  --white:#ffffff;
  --rule:#c6d1e0;
  --rule-soft:#e2e8f1;
  --muted:#5b6c82;
  --warn:#b06000;

  --measure:34rem;
  --display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --prose:"Source Serif 4",Georgia,"Times New Roman",serif;

  /* --- Bootstrap, driven from the tokens above --------------- */
  --bs-body-font-family:var(--prose);
  --bs-body-font-size:1.0625rem;
  --bs-body-line-height:1.62;
  --bs-body-color:var(--ink);
  --bs-body-color-rgb:16,35,63;
  --bs-body-bg:var(--paper);
  --bs-body-bg-rgb:245,247,249;
  --bs-emphasis-color:var(--ink);
  --bs-secondary-color:var(--muted);
  --bs-heading-color:var(--ink);

  --bs-primary:#1e3d6b;
  --bs-primary-rgb:30,61,107;
  --bs-link-color:var(--teal-deep);
  --bs-link-color-rgb:0,112,122;
  --bs-link-hover-color:var(--navy);
  --bs-link-decoration:underline;

  --bs-border-color:var(--rule);
  --bs-border-color-translucent:rgba(30,61,107,.14);
  --bs-border-radius:2px;
  --bs-border-radius-sm:2px;
  --bs-border-radius-lg:3px;
  --bs-border-radius-xl:3px;

  --bs-focus-ring-color:rgba(0,168,168,.35);
  --bs-focus-ring-width:2px;
}

body{-webkit-text-size-adjust:100%;font-optical-sizing:auto}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

h1,h2,h3,h4,.ui{font-family:var(--display);font-optical-sizing:auto;text-wrap:balance}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
img{max-width:100%;height:auto}

/* Bootstrap's container is the right mechanic; this is our measure. */
.container{max-width:76rem;padding-inline:clamp(1.25rem,5vw,4.5rem)}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn{
  font-family:var(--display);font-size:.875rem;font-weight:600;
  --bs-btn-padding-y:.55rem;--bs-btn-padding-x:1.05rem;
  --bs-btn-border-radius:2px;
}
.btn-primary{
  --bs-btn-bg:var(--navy);--bs-btn-border-color:var(--navy);--bs-btn-color:#fff;
  --bs-btn-hover-bg:var(--navy-lift);--bs-btn-hover-border-color:var(--navy-lift);--bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--navy-lift);--bs-btn-active-border-color:var(--navy-lift);
}
.btn-outline-secondary{
  --bs-btn-color:var(--navy);--bs-btn-border-color:var(--rule);--bs-btn-bg:transparent;
  --bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:var(--navy);--bs-btn-hover-color:var(--navy);
}
.btn-accent{
  --bs-btn-bg:var(--teal);--bs-btn-border-color:var(--teal);--bs-btn-color:#06262a;
  --bs-btn-hover-bg:#00bcbc;--bs-btn-hover-border-color:#00bcbc;--bs-btn-hover-color:#06262a;
}
.btn-on-dark{
  --bs-btn-color:#dbe4f1;--bs-btn-border-color:#466b9b;--bs-btn-bg:transparent;
  --bs-btn-hover-bg:#17324f;--bs-btn-hover-border-color:#7f9cc4;--bs-btn-hover-color:#fff;
}

/* ------------------------------------------------------------
   Masthead
   The mobile menu is a disclosure element rather than Bootstrap's
   collapse, so the site ships no JavaScript and the content security
   policy can keep refusing scripts outright.
   ------------------------------------------------------------ */
.masthead{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:rgba(245,247,249,.94);
  backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--rule-soft);
}
.masthead .container{display:flex;align-items:center;gap:1.25rem;min-height:4.5rem}
.brand{display:block;flex:0 0 auto}
.brand img{height:2.25rem;width:auto}
.nav-main{margin-left:auto;display:flex;gap:1.6rem;align-items:center}
.nav-main a{
  font-family:var(--display);font-size:.875rem;font-weight:500;
  color:var(--muted);text-decoration:none;
}
.nav-main a:hover{color:var(--ink)}
.nav-main a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--teal)}
.nav-main a.btn{color:#fff;box-shadow:none}

.menu{margin-left:auto;display:none}
.menu summary{
  list-style:none;cursor:pointer;font-family:var(--display);font-size:.875rem;
  font-weight:600;color:var(--navy);padding:.5rem .75rem;border:1px solid var(--rule);
}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:#fff}
.menu-panel{
  position:absolute;left:0;right:0;background:#fff;
  border-bottom:1px solid var(--rule);padding:.5rem 0 1rem;
}
.menu-panel a{
  display:block;padding:.65rem clamp(1.25rem,5vw,4.5rem);
  font-family:var(--display);font-size:.9375rem;color:var(--ink);text-decoration:none;
  border-top:1px solid var(--rule-soft);
}
@media (max-width:900px){
  .nav-main{display:none}
  .menu{display:block}
}

/* ------------------------------------------------------------
   Sections and type
   ------------------------------------------------------------ */
section{padding-block:clamp(3rem,7vw,5.5rem);scroll-margin-top:5rem}
.band{background:var(--white);border-block:1px solid var(--rule-soft)}
.band-navy{background:var(--navy);color:#dbe4f1}
.band-navy h2,.band-navy h3{color:#fff}
.band-navy .lede{color:#c3d1e5}

h1{
  margin:0 0 1.4rem;font-weight:600;
  font-variation-settings:"wdth" 104;
  font-size:clamp(2.3rem,5vw,3.9rem);
  line-height:1.04;letter-spacing:-.028em;max-width:15ch;
}
h2{
  margin:0 0 1rem;font-weight:600;
  font-variation-settings:"wdth" 102;
  font-size:clamp(1.75rem,3.2vw,2.5rem);
  line-height:1.12;letter-spacing:-.022em;max-width:22ch;
}
.subhead{
  margin:4rem 0 .75rem;font-weight:600;
  font-size:clamp(1.3rem,2.2vw,1.65rem);
  font-variation-settings:"wdth" 100;letter-spacing:-.016em;
}
.lede{max-width:var(--measure);font-size:1.0625rem;color:#2b3b52;margin:0 0 1.25rem}
.lede:last-child{margin-bottom:0}
.standfirst{margin:0 0 1.1rem;max-width:var(--measure);font-size:1.1875rem;line-height:1.56;color:#27374e}
.note{font-size:.9375rem;color:var(--muted);max-width:34rem}
.eyebrow{
  font-family:var(--display);font-size:.8125rem;font-weight:600;
  color:var(--teal-deep);margin:0 0 .75rem;
}
.footprint{
  margin:0 0 2rem;max-width:var(--measure);
  font-family:var(--display);font-size:.875rem;color:var(--muted);
  padding-top:1rem;border-top:1px solid var(--rule-soft);
}

/* A link that carries on to the page where the detail lives. */
.more{
  display:inline-block;margin-top:1.5rem;
  font-family:var(--display);font-size:.9375rem;font-weight:600;
  color:var(--teal-deep);text-decoration:none;
  border-bottom:2px solid var(--teal);padding-bottom:.1rem;
}
.more:hover{color:var(--navy);border-bottom-color:var(--navy)}

/* ------------------------------------------------------------
   Plates: the drawings and the screenshots, in the same frame
   ------------------------------------------------------------ */
.plate{background:var(--white);border:1px solid var(--rule)}
.plate svg{display:block;width:100%;height:auto}
.plate img{width:100%;display:block}
.titleblock{
  display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding:.6rem .85rem;
  font-family:var(--display);font-size:.78rem;color:var(--muted);
}
.titleblock b{
  color:var(--ink);font-weight:600;
  font-variation-settings:"wdth" 92;letter-spacing:.01em;
}
.titleblock .ref{margin-left:auto;font-variant-numeric:tabular-nums}
figure{margin:0;min-width:0}
figcaption.note{margin-top:.85rem}

/* A drawing with three columns of six rows cannot shrink to a phone and
   stay readable, so below its own width it scrolls inside the plate
   rather than becoming decorative. */
.plate-wide{overflow-x:auto}
.plate-wide svg{min-width:44rem}

/* one orchestrated moment, and only one: the spine draws down and the
   target bar fills to where the ticket actually landed */
.spine{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1s cubic-bezier(.3,.7,.2,1) forwards}
.sla-fill{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);animation:grow 1.1s .45s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes grow{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .spine{animation:none;stroke-dashoffset:0}
  .sla-fill{animation:none;transform:scaleX(1)}
}

/* ------------------------------------------------------------
   Tables
   ------------------------------------------------------------ */
.table-scroll{overflow-x:auto;min-width:0}
table{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:38rem}
caption{text-align:left;font-family:var(--display);font-size:.8125rem;color:var(--muted);padding-bottom:.75rem}
th,td{text-align:left;vertical-align:top;padding:.85rem 1.25rem .85rem 0;border-bottom:1px solid var(--rule-soft)}
thead th{
  font-family:var(--display);font-size:.8125rem;font-weight:600;
  color:var(--muted);border-bottom-color:var(--rule);padding-bottom:.6rem;
}
tbody th{
  font-family:var(--display);font-weight:600;font-size:.9375rem;
  color:var(--ink);white-space:nowrap;padding-right:2rem;
}
.region th{
  font-family:var(--display);font-size:.75rem;font-weight:600;
  color:var(--teal-deep);letter-spacing:.06em;text-transform:uppercase;
  padding-top:1.6rem;padding-bottom:.35rem;border-bottom:1px solid var(--rule);
}
.region:first-child th{padding-top:0}
td .inst{display:block;color:var(--ink)}

/* ------------------------------------------------------------
   Modules
   ------------------------------------------------------------ */
.pillar{min-width:0}
.pillar > svg{width:1.75rem;height:1.75rem;color:var(--navy);margin-bottom:.85rem}
.pillar h3{margin:0 0 .6rem;font-weight:600;font-size:1.2rem;font-variation-settings:"wdth" 100;letter-spacing:-.012em}
.pillar p{margin:0;color:#2b3b52;font-size:1rem;max-width:26rem}
.pillar ul{list-style:none;margin:1.1rem 0 0;padding:0}
.pillar li{padding:.55rem 0;border-top:1px solid var(--rule-soft);font-size:.9rem;color:var(--muted);max-width:26rem}

.caps > div{display:grid;grid-template-columns:1.75rem 1fr;gap:0 1rem;padding-block:1.3rem;border-top:1px solid var(--rule-soft)}
.caps svg{width:1.5rem;height:1.5rem;color:var(--navy);grid-row:span 2;margin-top:.15rem}
.caps dt{font-family:var(--display);font-weight:600;font-size:1rem;margin-bottom:.3rem}
.caps dd{margin:0;color:var(--muted);font-size:.9375rem;max-width:30rem}

.notecol > div{padding-top:1.1rem;border-top:1px solid var(--rule-soft)}
.notecol h3{margin:0 0 .5rem;font-size:1rem;font-weight:600;font-variation-settings:"wdth" 100}
.notecol p{margin:0;font-size:.9375rem;color:var(--muted);max-width:26rem}
.notecol.roles > div{border-top-color:var(--rule)}
.notecol.roles h3{font-size:1.0625rem}
.notecol.roles p{color:#2b3b52;max-width:28rem}

/* ------------------------------------------------------------
   Pricing
   ------------------------------------------------------------ */
.price-table th,.price-table td{padding-right:1.5rem}
.price-table thead th{vertical-align:bottom}
.tier-name{display:block;font-size:1.0625rem;color:var(--ink);font-variation-settings:"wdth" 100;margin-bottom:.35rem}
.tier-price{
  display:block;font-family:var(--display);font-weight:600;font-size:1.9rem;
  color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;
}
.tier-unit{display:block;font-size:.8125rem;color:var(--muted);font-weight:400}
.mark-yes{display:inline-block;width:.6rem;height:.6rem;background:var(--teal)}
.mark-no{display:inline-block;width:.6rem;height:1px;background:#b4bfcd;transform:translateY(-.25rem)}
/* Kept in flow deliberately. Positioned absolutely with no positioned
   ancestor, these escape the table's scroll container and drag the page
   sideways on a phone. */
.sr{display:inline-block;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);vertical-align:middle}

.tier-card{border:1px solid var(--rule);background:#fff;padding:1.5rem}
.tier-card.featured{border-color:var(--navy);border-top:3px solid var(--teal)}
.tier-card ul{list-style:none;margin:1.1rem 0 0;padding:0}
.tier-card li{padding:.5rem 0;border-top:1px solid var(--rule-soft);font-size:.9rem;color:var(--muted)}

/* ------------------------------------------------------------
   Contact and footer
   ------------------------------------------------------------ */
.creds{margin:1.5rem 0 0;padding:0;list-style:none}
.creds li{padding:.7rem 0;border-top:1px solid var(--rule-soft);font-size:.9375rem;color:#2b3b52}

.contact{margin:0;padding:1.5rem 0 0;border-top:1px solid #35557f}
.contact dt{font-family:var(--display);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:#8ea9cc;margin-bottom:.2rem}
.contact dd{margin:0 0 1.25rem;font-family:var(--display);font-size:1.0625rem;color:#fff;font-variant-numeric:tabular-nums}
.contact dd:last-child{margin-bottom:0}
.contact a{color:#fff;text-decoration:none;border-bottom:1px solid #4e74a4}
.contact a:hover{color:#fff;border-bottom-color:var(--teal)}

footer{background:#0c1b30;color:#8ea2bd;font-size:.875rem;padding-block:2.75rem}
footer img{height:2.25rem;width:auto;margin-bottom:.9rem}
footer a{color:#b9c9e0;text-decoration:none}
footer a:hover{color:#fff}
footer .foot-nav{list-style:none;margin:0;padding:0}
footer .foot-nav li{padding:.25rem 0}
footer .legal{color:#6f85a3;font-size:.8125rem}