/* Arcanium public site.
   ----------------------------------------------------------------------
   © 2026 Quantum Ridge Systems, Inc.

   The design is the one commissioned for the marketing site: the deep-blue
   palette, the fixed black masthead carrying the vector lockup, the Earth
   crescent hero, bordered mid-blue buttons that invert on hover, and the
   centred footer. Kept deliberately close to that source so the public site
   and the product speak in one voice.

   Two departures, both deliberate:
     * the hamburger is drawn in CSS rather than pulled from the boxicons
       CDN — a marketing page that a payment processor will review should
       not depend on a third-party stylesheet loading;
     * legal pages get a light reading surface, because nobody should read
       a refund policy as white-on-black body text. */

/* Type system (settled Aug 2026): Questrial page-wide — a true web font
   whose geometry sits close to the wordmark's own lettering — with Julius
   Sans One reserved for the Index nameplate. Century Gothic and Calibri
   only ever rendered for visitors with Office installed; everyone else was
   silently seeing Trebuchet, so the site looked different per machine. */
/* Self-hosted type — the public pages load no third-party assets
   (a deliberate invariant: a page a payment processor reviews must not
   depend on someone else's CDN, and EU courts have found Google Fonts
   embedding itself a privacy violation). Latin subsets, 36 KB total. */
@font-face{font-family:"Questrial";font-style:normal;font-weight:400;
  font-display:swap;
  src:url("/static/site/fonts/questrial-latin.woff2") format("woff2")}
@font-face{font-family:"Julius Sans One";font-style:normal;font-weight:400;
  font-display:swap;
  src:url("/static/site/fonts/julius-sans-one-latin.woff2") format("woff2")}

*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;
  scroll-behavior:smooth;font-family:"Questrial",Calibri,"Trebuchet MS",sans-serif}

:root{
  --deep-blue:#0B1524;
  --blue:#10263F;
  --mid-blue:#2E7BC2;
  --highC-blue:#46B6FF;
  --light-blue:#89E3FF;
  /* Sampled from the sphere in the lockup — the grey-blue of its landmass. */
  --sphere:#8AA8C8;
  --ink:#0B1524;
  --ink2:#4A5561;
  --line:#D8DCE1;
  --paper:#FFFFFF;
}

html{overflow-x:hidden}
body{background-color:#fff;color:var(--ink)}
img{max-width:100%}

/* ---- masthead ---------------------------------------------------- */
.header{position:fixed;width:100%;top:0;left:0;padding:1.3rem 8%;
  background-color:#000;display:flex;justify-content:space-between;
  align-items:center;z-index:1000;gap:1rem}
.header a{color:#fff}
.logo{cursor:pointer;display:flex;align-items:center;flex:0 0 auto}
/* Sized by height, matching the 56px lockup every signed-in page's
   banner uses — the same mark must not be two sizes across one site.
   Width follows the image's own 5.26:1 ratio. */
.logo img{height:56px;width:auto;display:block}
.logo:hover{transform:scale(1.01)}
.navbar{display:flex;align-items:center;gap:.6rem}
/* Every masthead item is the same solid box as the call to action — same
   border weight, padding, letter-spacing, fill and hover. The masthead reads
   as one row of controls rather than a hierarchy. */
/* Nav items are words, not boxes: on hover the word brightens, gains a
   soft halo, and rises a hair — light arriving on it. The drawer (narrow
   screens) restores a solid box per item so touch targets stay generous. */
.navbar a{font-size:1.18rem;color:#D7E2ED;padding:.5rem .35rem;
  letter-spacing:.08em;background:none;border:0;white-space:nowrap;
  display:inline-block;
  transition:color .28s ease,text-shadow .28s ease,transform .28s ease}
.navbar a:hover,.navbar a:focus-visible{color:#fff;transform:translateY(-2px);
  text-shadow:0 0 16px rgba(120,205,255,.85),0 0 3px rgba(120,205,255,.6)}
.header-cta{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}

#menu-icon{display:none;width:2.2rem;height:1.7rem;position:relative;
  cursor:pointer;background:none;border:0;padding:0;flex:0 0 auto}
#menu-icon span{position:absolute;left:0;width:100%;height:3px;background:#fff;
  transition:.25s ease}
#menu-icon span:nth-child(1){top:0}
#menu-icon span:nth-child(2){top:50%;transform:translateY(-50%)}
#menu-icon span:nth-child(3){bottom:0}
#menu-icon.open span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg)}
#menu-icon.open span:nth-child(2){opacity:0}
#menu-icon.open span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg)}

/* Calls to action keep a thin outline so they read as controls; the fill
   arrives as a fade rather than sitting there as a slab. The primary is
   brighter, not heavier. */
.btn-basic{position:relative;z-index:0;overflow:hidden;font-size:1.1rem;
  color:#fff;padding:.62rem 1.5rem;letter-spacing:.09em;cursor:pointer;
  white-space:nowrap;display:inline-block;background:transparent;
  border:1px solid var(--mid-blue);
  transition:color .3s ease,border-color .3s ease,box-shadow .3s ease}
.btn-basic::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--highC-blue);opacity:0;transition:opacity .3s ease}
.btn-basic:hover,.btn-basic:focus-visible{color:var(--deep-blue);
  border-color:var(--highC-blue);box-shadow:0 0 22px -4px rgba(70,182,255,.55)}
.btn-basic:hover::before,.btn-basic:focus-visible::before{opacity:1}
.btn-solid{border-color:var(--highC-blue);color:var(--highC-blue)}

@media(max-width:1180px){
  #menu-icon{display:block}
  .navbar{position:absolute;top:100%;right:0;width:min(70%,22rem);
    padding:1rem 2rem;background:rgba(0,0,0,.92);backdrop-filter:blur(6px);
    display:none;flex-direction:column;align-items:flex-start}
  .navbar.active{display:flex}
  /* In the drawer the boxes stack full width, so they stay boxes rather
     than reverting to plain links at the size most people will see them. */
  .navbar a{display:block;width:100%;text-align:center;font-size:1.15rem;
    margin:.5rem 0;color:#fff;padding:.6rem 1rem;
    border:1px solid var(--mid-blue);background:rgba(46,123,194,.18);
    transform:none;text-shadow:none}
  .header{padding:1rem 6%}
  .logo img{height:40px;width:auto}
}
/* The masthead button is dropped on a narrow phone to keep the bar from
   wrapping — so the drawer carries the same call to action, or the primary
   conversion path disappears on mobile entirely.

   Selected as `.navbar a.nav-signup` rather than `.nav-signup`: the bare
   class is specificity (0,1,0) and `.navbar a` above is (0,1,1), so the
   plain-class rule lost and this link showed on desktop beside the button
   it is the twin of — "Create account" twice in one masthead. */
.navbar a.nav-signup{display:none}
/* Added by site.js for a signed-in visitor: quieter than the section links,
   and set apart from them so it reads as an account action. */
.navbar a.nav-signout{color:#8FA3B8;font-size:.98rem;margin-left:.2rem;
  padding-left:.7rem;border-left:1px solid #33383E}
.navbar a.nav-signout:hover,.navbar a.nav-signout:focus-visible{color:#fff}
/* The signed-in row carries one more link than the served page, and on a
   laptop-width window that pushed the header button off the right edge.
   The section links give up a little size so the row still fits above
   the point where the nav folds into the menu. */
@media(max-width:1480px){body.signed-in .navbar a{font-size:1.04rem;padding:.5rem .3rem}
  body.signed-in .navbar{gap:.4rem}}
@media(max-width:1300px){body.signed-in .navbar a{font-size:.95rem;padding:.5rem .22rem}
  body.signed-in .navbar{gap:.15rem}}
@media(max-width:1180px){.navbar a.nav-signout{border-left:0;margin-left:0;
  padding-left:.35rem}}
@media(max-width:620px){
  .header-cta .btn-basic{display:none}
  .navbar a.nav-signup{display:block;color:var(--highC-blue)}
}

/* ---- hero -------------------------------------------------------- */
/* 9rem of top padding clears the fixed masthead on the first screen; between
   two stacked dark sections the same figure top and bottom opened a dead
   band with nothing in it, so the seam is tightened. */
section{padding:9rem 8% 6rem}
.dark + .variables{padding-top:2rem}
.dark{padding-bottom:4rem}
/* The crescent is the reason this page works. The veil is lifted (.38/.58
   from .55/.75) — a text-shadow does the legibility work instead — and the
   hero carries the mark, one line, and the two actions. Nothing else. */
.home{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background-image:linear-gradient(rgba(4,10,18,.38),rgba(4,10,18,.58)),
    url("images/earth-crescent.jpg");
  background-repeat:no-repeat;background-attachment:fixed;
  background-size:cover;background-position:center}
.home-content{text-align:center;max-width:60rem}
.mainLogo{width:min(100%,48rem);margin:0 auto;display:block;
  filter:drop-shadow(0 4px 26px rgba(0,0,0,.55))}
.home-content hr{width:62%;height:.14rem;background-color:rgba(255,255,255,.85);
  border:0;margin:1.8rem auto 0}
.home p.tagline{color:#fff;font-size:clamp(1.3rem,2.8vw,2.1rem);
  padding:1.5rem 0 0;max-width:46rem;margin:0 auto;
  font-family:"Questrial","Century Gothic","Futura","Trebuchet MS",system-ui,sans-serif;
  letter-spacing:.04em;text-shadow:0 2px 18px rgba(0,0,0,.75)}
.home .cta-row{margin-top:2.4rem}
.home .cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
/* The lowest-commitment offer, one line under the buttons. */
.home .cta-sub{margin:1.1rem auto 0;color:#fff;font-size:.98rem;letter-spacing:.03em;
  text-shadow:0 2px 18px rgba(0,0,0,.75)}
.home .cta-sub a{color:#fff;text-decoration:underline;
  text-decoration-color:var(--highC-blue);text-underline-offset:.22em}
.home .cta-sub a:hover{color:var(--highC-blue)}

/* ---- dark content sections --------------------------------------- */
.dark{background-color:#000;color:#fff}
/* The display face is the one the GRAVE title uses on the hero, so the
   section that explains the product speaks in the same voice as the line
   that introduces it. Headings and the standfirst only — body copy stays in
   the reading face, which carries 1.2rem paragraphs far better. */
.dark h2{color:#fff;font-size:clamp(2rem,4vw,3rem);font-style:italic;
  font-family:"Questrial","Century Gothic","Futura","Trebuchet MS",system-ui,sans-serif;
  letter-spacing:.03em}
.section-head{text-align:center;margin-bottom:2.5rem}
.section-head span{font-size:1.2rem;color:var(--mid-blue);font-style:italic;
  font-family:"Questrial","Century Gothic","Futura","Trebuchet MS",system-ui,sans-serif}
/* Standfirsts are block statements: upright, semibold, readable blue —
   #2E7BC2 measured 4.0:1 on the dark ground, under the 4.5:1 floor. */
.section-head span.standfirst{font-size:clamp(1.35rem,2.2vw,1.65rem);
  color:#7FC9FF;font-style:normal;font-weight:600;letter-spacing:.03em;
  display:block;margin-top:.7rem}

/* "The ARCANIUM Index™" as one nameplate: the lettering (cropped to its
   ink) sits INLINE on the text baseline, so the browser aligns it exactly
   as it would a word; THE and INDEX are Julius Sans One — the closest
   sentence face to the wordmark's own letterforms — a step smaller so the
   mark leads. The ™ hangs off the shoulder of the X, positioned against
   the word rather than the mixed-height line. */
.indexmark{font-family:"Julius Sans One","Questrial",system-ui,sans-serif;
  font-size:clamp(2rem,4.6vw,3.4rem);font-weight:400;font-style:normal;
  line-height:1.15;color:#fff;white-space:nowrap}
.indexmark .tx{font-size:.8em;text-transform:uppercase;letter-spacing:.18em;
  font-style:normal;color:#fff;
  font-family:"Julius Sans One","Questrial",system-ui,sans-serif}
.indexmark .wordmark{height:.72em;width:auto;display:inline-block;
  vertical-align:baseline;margin:0 .34em}
.indexmark .tx sup{font-size:.55em;font-weight:400;letter-spacing:0;
  color:#fff;position:relative;top:-.7em;margin-left:.09em;
  vertical-align:baseline}
@media(max-width:640px){.indexmark{white-space:normal}}
.about-content{max-width:62rem;margin:0 auto}
/* Every accented title on the page — standfirsts, section headings, the stat
   figures, the variable names — takes the masthead's own blue, so the buttons
   at the top and the titles below them are visibly one system rather than
   three neighbouring tints of blue. */
.about-content h3{font-size:1.8rem;padding:1.6rem 0 .6rem;color:var(--mid-blue);
  font-family:"Questrial","Century Gothic","Futura","Trebuchet MS",system-ui,sans-serif;
  letter-spacing:.03em}
/* Consecutive paragraphs need air between them, or "How it works" reads as
   one unbroken wall of text. */
.about-content p{font-size:1.34rem;line-height:1.7;color:#DFE7EF;
  margin-bottom:1.2rem}
/* The definition the section opens with: display-sized, centred, ending on
   the product's name. */
.about-content p.lead{font-size:clamp(1.24rem,2vw,1.45rem);line-height:1.66;
  color:#fff;max-width:50rem;margin:0 auto 1.4rem;text-align:center}
.about-content p:last-child{margin-bottom:0}

.facts{display:grid;gap:1.2rem;grid-template-columns:1fr;margin:3rem auto 0;
  max-width:62rem}
@media(min-width:760px){.facts{grid-template-columns:repeat(3,1fr)}}
.fact{border:1px solid #22303F;padding:1.6rem;text-align:center;
  background:var(--deep-blue)}
.fact b{display:block;font-size:2.2rem;color:#7FC9FF}
.fact span{font-size:.95rem;color:#AFBBC7}

/* ---- the variables ----------------------------------------------- */
/* The pricing page's scheme, adopted after review: light grey ground,
   white cards with a soft shadow. The old near-black cards on pure black
   were the hardest thing on the page to read (4.1:1 titles on a surface
   barely distinct from the page). A light band also breaks up an
   otherwise all-dark scroll. */
.variables{background-color:#DDDFE2;color:#1A1D21}
.variables .section-head h2{color:#1A1D21}
.variables .section-head span.standfirst{color:#1D6FA8}
.variable-grid{display:grid;gap:1.2rem;grid-template-columns:1fr;
  max-width:62rem;margin:0 auto}
@media(min-width:720px){.variable-grid{grid-template-columns:1fr 1fr}}
.variable{border:1px solid #C7CACE;padding:1.35rem 1.5rem;background:#FFFFFF;
  border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.06);
  transition:border-color .28s ease,transform .28s ease,box-shadow .28s ease}
.variable h3{color:#1D4E7E;font-size:1.32rem;margin-bottom:.5rem;
  font-family:"Questrial","Century Gothic","Futura","Trebuchet MS",system-ui,sans-serif;
  letter-spacing:.04em;font-weight:600}
.variable a{color:inherit;text-decoration:none;display:block}
.variable:hover{border-color:var(--mid-blue);transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.12)}
.variable .more{display:inline-block;margin-top:.75rem;font-size:.98rem;
  color:var(--mid-blue);letter-spacing:.04em}
.variable p{color:#3A424C;font-size:1.16rem;line-height:1.68}
.variable.new{border-color:var(--mid-blue)}
.variable .newflag{float:right;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--mid-blue);
  padding:.16rem .55rem;margin-left:.5rem;border-radius:6px;
  font-family:"Questrial","Century Gothic","Futura","Trebuchet MS",system-ui,sans-serif}
/* The measured-not-scored card sits on its own below the nine, one column
   at every width — a second column would read as a tenth variable. */
.alongside{max-width:62rem;margin:2.6rem auto 1rem;text-align:center;
  color:#3A424C;font-size:1.1rem;letter-spacing:.02em}
.alongside b{color:#1D4E7E;font-weight:600}
.variable-grid.one{max-width:31rem}
@media(min-width:720px){.variable-grid.one{grid-template-columns:1fr}}

/* ---- light reading surface (legal pages) ------------------------- */
.paper{background:#fff;color:var(--ink);padding:9rem 8% 5rem}
.paper .doc{max-width:52rem;margin:0 auto}
.paper h1{font-size:clamp(1.8rem,3.5vw,2.6rem);font-style:italic;
  color:var(--deep-blue)}
.paper .updated{color:var(--ink2);font-size:.92rem;margin:.6rem 0 0}
.paper hr{border:0;height:2px;background:var(--mid-blue);margin:1.4rem 0 2rem}
.paper h2{font-size:1.15rem;color:var(--deep-blue);text-transform:uppercase;
  letter-spacing:.04em;margin:2rem 0 .6rem}
.paper p,.paper li{font-size:1.02rem;line-height:1.75;color:#243040;
  margin-bottom:.8rem}
.paper ul{padding-left:1.4rem}
.paper .entity{border:1px solid var(--line);padding:1.2rem 1.4rem;
  background:#F6F8FA;margin:1.6rem 0}
.paper .entity p{margin:0;font-size:.98rem}
.paper h1.varname{color:#25476B;font-style:normal;
  font-family:"Questrial","Century Gothic","Futura","Trebuchet MS",system-ui,sans-serif;
  letter-spacing:.04em}
.paper .lede{font-size:1.12rem;color:#1B2836;font-weight:600}
.paper .backlink{display:inline-block;margin-top:2.4rem;font-size:.9rem;
  color:var(--mid-blue)}

/* ---- contact form ------------------------------------------------- */
.cform label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink2);margin:0 0 1.1rem}
.cform label .opt{font-weight:400;text-transform:none;letter-spacing:0}
.cform input,.cform select,.cform textarea{display:block;width:100%;
  margin-top:.35rem;padding:.65rem .75rem;font-size:1rem;font-family:inherit;
  color:var(--ink);background:#F6F7F8;border:1px solid var(--line);
  border-radius:8px}
.cform textarea{resize:vertical}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:2px solid var(--mid-blue);outline-offset:1px;
  border-color:var(--mid-blue)}
.crow{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem}
@media (max-width:640px){.crow{grid-template-columns:1fr}}
/* The honeypot is removed from layout and assistive tech alike; only a
   form-filling bot ever writes into it. */
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;
  overflow:hidden}
.cactions{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.cactions button{border:0;cursor:pointer}
.cactions button:disabled{opacity:.6;cursor:default}
.cstatus{font-size:.92rem;color:var(--ink2)}
.cstatus.err{color:#B03A2E}

/* ---- long-form legal (QRS-CTR-001) ------------------------------- */
/* A contract is dense and read in sequence, not skimmed. Smaller type and a
   wider measure fit far more on screen without becoming cramped, and the
   page scrolls as one continuous document — no inner scroll box, which
   would hide how much is left and break browser find-in-page. */
.paper.legal .doc{max-width:56rem}
.paper.legal p,.paper.legal li{font-size:.88rem;line-height:1.65;
  margin-bottom:.62rem;color:#2A3644}
.paper.legal h2{font-size:.95rem;margin:1.9rem 0 .55rem;
  padding-top:.5rem;border-top:1px solid #E8ECF0;scroll-margin-top:6.5rem}
.paper.legal h1{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:.3rem}
.paper.legal .doctype{font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink2);margin-bottom:.5rem;
  font-family:"Questrial","Century Gothic","Futura","Trebuchet MS",system-ui,sans-serif}
.paper.legal .subtitle{font-size:1rem;color:var(--ink2);font-style:italic;
  margin:0 0 .5rem}
.paper.legal .updated{font-size:.8rem}

.paper.legal table.meta{border-collapse:collapse;width:100%;margin:0 0 1.8rem;
  border:1px solid var(--line);background:#F6F8FA}
.paper.legal table.meta th{text-align:left;vertical-align:top;
  padding:.5rem .8rem;width:9.5rem;font-size:.8rem;color:var(--deep-blue);
  text-transform:uppercase;letter-spacing:.04em;
  border-bottom:1px solid #E4E9EE}
.paper.legal table.meta td{padding:.5rem .8rem;font-size:.86rem;
  color:#2A3644;border-bottom:1px solid #E4E9EE}
.paper.legal table.meta tr:last-child th,
.paper.legal table.meta tr:last-child td{border-bottom:0}

.paper.legal .toc{border:1px solid var(--line);padding:1rem 1.2rem 1.1rem;
  margin:0 0 2.2rem;background:#FBFCFD}
.paper.legal .toc-h{font-size:.78rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--deep-blue);margin:0 0 .5rem;font-weight:700}
.paper.legal .toc ol{margin:0;padding-left:1.3rem;columns:2;column-gap:2rem}
@media(max-width:680px){.paper.legal .toc ol{columns:1}}
.paper.legal .toc li{font-size:.83rem;margin-bottom:.28rem;break-inside:avoid}
.paper.legal .toc a{color:var(--mid-blue)}
.paper.legal .endmark{text-align:center;color:var(--ink2);font-size:.82rem;
  margin-top:2rem}

/* ---- footer ------------------------------------------------------ */
.footer{background-color:#000;color:#fff;padding:3rem 8%;text-align:center}
.footer ul{list-style:none;font-size:1rem}
.footer ul li{display:inline-block;margin:0 .6rem}
.footer ul li a{color:#fff}
.footer ul li a:hover{color:var(--mid-blue)}
.footer .entity-line{margin-top:1.6rem;font-size:.85rem;color:#9AA6B2;
  line-height:1.7}
.footer .copyright{margin-top:.8rem;font-size:.78rem;color:#78838F}

/* --- See It Live: the featured showcase --------------------------------
   The proof section on the landing page. The still is a committed PNG drawn
   from the Dare payload (tools/build_home_still.py), portrait because the
   county is — it stands beside the copy like a plate in a book rather than
   being cropped into a banner that loses the shape of the coastline. The
   whole image is a link: the county itself is the button. */
.showcase-feature .showcase-wrap{display:flex;gap:3.2rem;align-items:center;
  justify-content:center;max-width:64rem;margin:0 auto;padding:0 1.5rem;
  flex-wrap:wrap}
.showcase-still{flex:0 0 auto;display:block}
.showcase-still img{height:520px;width:auto;display:block;border-radius:12px;
  border:1px solid #22344E;transition:transform .18s ease}
.showcase-still:hover img,.showcase-still:focus-visible img{
  transform:scale(1.02);border-color:var(--mid-blue)}
.showcase-copy{flex:1 1 24rem;max-width:34rem}
.showcase-copy h3{font-size:1.8rem;padding:0 0 .6rem;color:var(--mid-blue);
  font-family:"Questrial","Century Gothic","Futura","Trebuchet MS",system-ui,sans-serif}
.showcase-copy p{line-height:1.8;margin:0 0 1.1rem}
.showcase-copy .cta-row{display:flex;gap:1rem;flex-wrap:wrap;margin:1.6rem 0}
.showcase-more{font-size:.9rem;color:#9AA6B2}
.showcase-more a{color:var(--highC-blue);text-decoration:none}
.showcase-more a:hover{text-decoration:underline}
@media(max-width:640px){
  .showcase-still img{height:400px}
  .showcase-feature .showcase-wrap{gap:2rem}
}