/* 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. */

*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;
  scroll-behavior:smooth;font-family: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. */
.navbar a{font-size:1rem;color:#fff;padding:.5rem 1rem;letter-spacing:1px;
  border:.2rem solid var(--mid-blue);background-color:var(--mid-blue);
  white-space:nowrap;transition:.3s ease-in-out}
.navbar a:hover{transform:scale(1.01);color:var(--deep-blue);
  background-color:var(--highC-blue);border-color:var(--highC-blue)}
.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)}

.btn-basic{font-size:1rem;color:#fff;padding:.5rem 1rem;letter-spacing:1px;
  cursor:pointer;transition:.3s ease-in-out;border:.2rem solid var(--mid-blue);
  white-space:nowrap;display:inline-block;background:transparent}
.btn-basic:hover{transform:scale(1.01);color:var(--deep-blue);
  background-color:var(--mid-blue)}
.btn-solid{background-color:var(--mid-blue);color:#fff}
.btn-solid:hover{background-color:var(--highC-blue);
  border-color:var(--highC-blue);color:var(--deep-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}
  .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. */
.nav-signup{display:none}
@media(max-width:620px){
  .header-cta .btn-basic{display:none}
  .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}
.home{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background-image:linear-gradient(rgba(4,10,18,.55),rgba(4,10,18,.75)),
    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%,46rem);margin:0 auto;display:block}
.home-content hr{width:75%;height:.2rem;background-color:#fff;border:0;margin:1.6rem auto}
.home p.tagline{color:#fff;font-size:clamp(1.3rem,2.8vw,2.1rem);
  padding:1.2rem 0 .6rem;
  font-family:"Century Gothic","Futura","Trebuchet MS",system-ui,sans-serif;
  letter-spacing:.03em}
.home p.subtagline{color:#C7D4E1;font-style:italic;
  font-size:clamp(.95rem,1.5vw,1.15rem);line-height:1.6;
  max-width:46rem;margin:0 auto;padding:0 0 2rem}
.home .cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ---- 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:"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(--light-blue);font-style:italic;
  font-family:"Century Gothic","Futura","Trebuchet MS",system-ui,sans-serif}
.about-content{max-width:62rem;margin:0 auto}
/* Section headings share the stat figures' blue, not the pale tint — one
   accent doing both jobs reads as one system. */
.about-content h3{font-size:1.8rem;padding:1.6rem 0 .6rem;color:var(--highC-blue);
  font-family:"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.2rem;line-height:1.75;color:#DDE3EA;
  margin-bottom:1.1rem}
.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:var(--highC-blue)}
.fact span{font-size:.95rem;color:#AFBBC7}

/* ---- the nine variables ------------------------------------------ */
.variables{background-color:#000;color:#fff}
.variable-grid{display:grid;gap:1rem;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 #22303F;padding:1.2rem 1.4rem;background:var(--deep-blue)}
/* Titles take the sphere's own grey-blue (sampled from the lockup) and the
   masthead's typeface, so the variable set reads as part of the brand rather
   than as generic body copy. 7.4:1 on the card — comfortably legible. */
.variable h3{color:var(--sphere);font-size:1.1rem;margin-bottom:.45rem;
  font-family:"Century Gothic","Futura","Trebuchet MS",system-ui,sans-serif;
  letter-spacing:.05em;font-weight:600}
.variable a{color:inherit;text-decoration:none;display:block}
.variable:hover{border-color:var(--mid-blue)}
.variable .more{display:inline-block;margin-top:.5rem;font-size:.82rem;
  color:var(--mid-blue);letter-spacing:.03em}
.variable p{color:#B9C4D0;font-size:.98rem;line-height:1.6}

/* ---- 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:"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)}

/* ---- 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:"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}