/* ═══════════════════════════════════════════════════════════════════════
   ONEE · brand.css — one design system for every public page.

   Terms, Privacy, Refunds, Customer Service and About all load this file,
   so the identity is defined once. Before this, each page carried its own
   copy of the styles and they had already begun to drift — different body
   sizes, different hero gradients, a logo on one page and not the others.

   Drawn from the same tokens the app uses (--N-* night palette, indigo,
   celestial gold) so the web pages and the product read as one thing.
   Deliberately single-theme: legal pages commit to the parchment look and
   paint every colour explicitly, so they render identically anywhere.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --night:#1A2151; --night-deep:#0E1230; --night-lift:#2a3558;
  --indigo:#5A4FE0; --indigo-deep:#454E93; --midnight:#2F3D7A;
  --peri:#AEB3E3; --lavender:#F4F2FB; --ground:#FAF8FB; --surface:#FFFFFF;
  --gold:#A8821F; --gold-soft:#E8C96B; --sky:#B8C6FF;
  --ink:#2F3D7A; --ink-body:#3A4270; --ink2:#5C66A3;
  --rule:rgba(174,179,227,0.45);
  --sans:'Inter',-apple-system,'Segoe UI',sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --display:'Cormorant Garamond',Georgia,serif;
  --wordmark:'Cinzel',Georgia,serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--serif); line-height:1.75; font-size:16.5px;
}

/* ── Celestial hero ─────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden; text-align:center; color:#fff;
  background:radial-gradient(ellipse at 50% 128%, var(--night-lift) 0%, var(--night) 56%, var(--night-deep) 100%);
  padding:46px 22px 44px;
}
.hero .mark{
  width:58px; height:58px; display:block; margin:0 auto 10px;
  filter:drop-shadow(0 4px 16px rgba(120,110,240,0.55));
}
.hero .wm{
  font-family:var(--wordmark); font-weight:600;
  font-size:17px; letter-spacing:5px; color:#fff;
}
.hero .eyebrow{
  font-family:var(--sans); font-size:9.5px; letter-spacing:3.2px;
  text-transform:uppercase; color:var(--gold-soft); margin-top:5px; font-weight:500;
}
.hero h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(28px,5vw,40px); letter-spacing:0.4px; line-height:1.1;
  margin-top:20px; text-wrap:balance;
}
.hero .sub{
  margin-top:8px; font-style:italic; color:var(--sky);
  font-size:15px; text-shadow:0 1px 10px rgba(13,21,51,0.35);
}
/* Slow-twinkling stars. Decorative only — the hero reads the same without them. */
.hero .star{position:absolute;background:#fff;border-radius:50%;opacity:0.6;animation:oneeTwinkle 3.6s ease-in-out infinite;}
@keyframes oneeTwinkle{0%,100%{opacity:0.2;}50%{opacity:0.85;}}
@media (prefers-reduced-motion:reduce){.hero .star{animation:none;}}

/* The wave that cuts the hero into the page — the same silhouette the app
   uses under its screen headers, so the two feel cut from one cloth. */
.wave{display:block;width:100%;height:30px;margin-top:-1px;}

/* ── Body ───────────────────────────────────────────────────────────── */
main{max-width:720px;margin:0 auto;padding:40px 22px 76px;}
h2{
  font-family:var(--display); font-weight:600; font-size:23px;
  color:var(--midnight); margin:36px 0 10px; padding-bottom:8px;
  border-bottom:1px solid var(--rule); scroll-margin-top:18px; text-wrap:balance;
}
h3{font-family:var(--display);font-weight:600;font-size:19px;color:var(--indigo-deep);margin:22px 0 6px;}
p,li{color:var(--ink-body);margin-bottom:12px;}
ul{padding-left:22px;margin-bottom:12px;}
li{margin-bottom:6px;}
strong{color:var(--midnight);}
a{color:var(--indigo);}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px;border-radius:3px;}
.meta{font-family:var(--sans);font-size:13px;color:var(--ink2);margin-bottom:26px;}

/* ── Components ─────────────────────────────────────────────────────── */
.callout{
  background:var(--surface); border:1px solid var(--rule);
  border-left:3px solid var(--indigo); border-radius:10px;
  padding:16px 20px; margin:20px 0;
}
.callout p:last-child{margin-bottom:0;}

.card{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:20px 24px;margin:18px 0;}
.card .lb{font-family:var(--sans);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink2);margin-bottom:4px;}
.card .vl{font-size:18px;color:var(--midnight);}
.card .vl a{text-decoration:none;}
.card .note{font-family:var(--sans);font-size:13.5px;color:var(--ink2);margin-top:6px;}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:22px 0;}
.grid .card{margin:0;padding:18px;}
.grid .card h3{font-size:17px;margin:0 0 6px;}
.grid .card p{font-size:14.5px;margin:0;color:var(--ink2);}

dl{font-family:var(--sans);font-size:15px;margin:14px 0;}
dt{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink2);margin-top:14px;}
dd{color:var(--ink-body);margin-top:2px;line-height:1.7;}

table{width:100%;border-collapse:collapse;margin:16px 0;font-family:var(--sans);font-size:14.5px;}
th{text-align:left;color:var(--ink2);font-weight:600;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:8px 10px 8px 0;border-bottom:1px solid var(--rule);}
td{padding:10px 10px 10px 0;border-bottom:1px solid var(--rule);color:var(--ink-body);vertical-align:top;}
td:first-child{color:var(--midnight);width:38%;}
.tbl-wrap{overflow-x:auto;}

.legal{font-family:var(--sans);font-size:12.5px;color:var(--ink2);line-height:1.9;margin-top:8px;}
.cta{
  display:inline-block;margin-top:26px;background:#fff;color:var(--indigo);
  text-decoration:none;font-family:var(--sans);font-weight:600;font-size:14px;
  letter-spacing:1px;padding:13px 34px;border-radius:100px;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--rule); text-align:center;
  padding:26px 20px 44px; font-family:var(--sans);
  font-size:13px; color:var(--ink2);
}
footer .fmark{width:26px;height:26px;opacity:0.55;margin-bottom:8px;}
footer a{color:var(--indigo);text-decoration:none;margin:0 8px;}
footer .corp{margin-top:9px;font-size:12.5px;line-height:1.7;}

@media (max-width:520px){
  body{font-size:16px;}
  .hero{padding:38px 18px 36px;}
  .hero .mark{width:50px;height:50px;}
  td:first-child{width:44%;}
}

/* Legal pages get printed and filed. Drop the night hero's ink, keep the
   words and the company identity legible on paper. */
@media print{
  .hero{background:none;color:#000;padding:0 0 12px;}
  .hero .wm,.hero h1{color:#000;}
  .hero .eyebrow{color:#555;}
  .hero .sub{color:#333;}
  .hero .star,.wave{display:none;}
  body{font-size:11pt;background:#fff;}
  main{padding:12px 0;max-width:none;}
  a{color:#000;text-decoration:underline;}
  h2{break-after:avoid;}
  .card,.callout,tr{break-inside:avoid;}
}

/* ═══════════════════════════════════════════════════════════════════════
   Two-layer policy pages.

   Layer 1 is the calm page a person actually reads. Layer 2 is the complete
   legal text, which lives in the SAME document rather than being fetched —
   so it is crawlable, printable, linkable, and above all still readable if
   the script never runs. The script only *collapses* it into a dialog; it
   never supplies the content. That ordering is deliberate: a policy that
   disappears when JavaScript fails is not a published policy.
   ═══════════════════════════════════════════════════════════════════════ */

/* Only once the script has confirmed it can open the dialog does the inline
   copy get hidden. Without JS the class is never set and the full text simply
   continues down the page under its own heading. */
html.js-modal .legal-full{display:none;}

.legal-cta{display:block;width:100%;text-align:center;margin:34px 0 6px;padding:16px 22px;
  border-radius:14px;border:1.5px solid var(--indigo);background:var(--surface);
  color:var(--indigo);font-family:var(--sans);font-size:14px;font-weight:600;
  letter-spacing:0.3px;cursor:pointer;transition:background 0.18s,color 0.18s;}
.legal-cta:hover{background:var(--indigo);color:#fff;}
.legal-cta .sub{display:block;font-weight:400;font-size:11.5px;letter-spacing:0.2px;
  opacity:0.75;margin-top:3px;}

/* ── The dialog ── */
.lm-scrim{position:fixed;inset:0;z-index:200;background:rgba(14,18,48,0.62);
  display:flex;align-items:center;justify-content:center;padding:20px;}
.lm{background:var(--surface);border-radius:16px;width:100%;max-width:760px;
  max-height:88vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 70px rgba(14,18,48,0.4);}
.lm-head{padding:18px 24px 15px;border-bottom:1px solid var(--rule);flex-shrink:0;
  background:linear-gradient(180deg,var(--lavender),var(--surface));}
.lm-eyebrow{font-family:var(--sans);font-size:9.5px;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--gold);font-weight:500;}
.lm-title{font-family:var(--display);font-weight:600;font-size:23px;color:var(--midnight);
  margin-top:4px;line-height:1.15;text-wrap:balance;}
.lm-dates{font-family:var(--sans);font-size:11.5px;color:var(--ink2);margin-top:5px;}
.lm-body{overflow-y:auto;padding:6px 24px 22px;-webkit-overflow-scrolling:touch;}
.lm-body h2{font-size:19px;margin:26px 0 8px;}
.lm-body h3{font-size:16.5px;}
.lm-body h2:first-of-type{margin-top:16px;}
.lm-foot{flex-shrink:0;border-top:1px solid var(--rule);padding:12px 18px;
  display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end;background:var(--ground);}
.lm-btn{font-family:var(--sans);font-size:12.5px;font-weight:500;border-radius:100px;
  padding:10px 20px;cursor:pointer;border:1.5px solid var(--rule);
  background:var(--surface);color:var(--ink);text-decoration:none;display:inline-block;}
.lm-btn:hover{border-color:var(--indigo);color:var(--indigo);}
.lm-btn.pri{background:var(--indigo);border-color:var(--indigo);color:#fff;}
.lm-btn.pri:hover{background:var(--indigo-deep);border-color:var(--indigo-deep);color:#fff;}
.lm-btn:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px;}
.lm-x{margin-right:auto;border:none;background:none;font-size:20px;line-height:1;
  color:var(--ink2);cursor:pointer;padding:8px 10px;border-radius:8px;}
.lm-x:hover{color:var(--indigo);background:var(--lavender);}
body.lm-open{overflow:hidden;}

@media (max-width:560px){
  .lm-scrim{padding:0;align-items:flex-end;}
  .lm{max-width:none;max-height:94vh;border-radius:18px 18px 0 0;}
  .lm-foot{justify-content:stretch;}
  .lm-foot .lm-btn{flex:1;text-align:center;}
}

/* Printing a policy prints the policy, not the page furniture around it. */
@page{margin:16mm 15mm;}
@media print{
  .legal-cta,.lm-foot,.lm-x,.wave,.hero .star{display:none !important;}
  html.js-modal .legal-full{display:block !important;}
  .lm-scrim{position:static;background:none;padding:0;display:block;}
  .lm{max-width:none;max-height:none;box-shadow:none;border-radius:0;display:block;}
  .lm-head{background:none;border-bottom:1px solid #999;}

  /* Never let text sit on the sheet's own edge. Printers have an unprintable
     margin, and a line starting at x=0 loses its first character to it — which
     reads as a corrupted document, not a margin problem. @page above sets the
     sheet margin; this keeps padding inside the flow too, for print paths that
     ignore @page. */
  .lm-scrim,.lm,.lm-body,.legal-full{padding-left:2mm;padding-right:2mm;}
  .lm-body{overflow:visible;}

  /* Printing FROM the open dialog prints the policy alone. Without this the
     sheet carries the whole page — hero, footer and all — and then the policy
     a second time, because the no-JS copy is still in the document. */
  body.lm-open > *:not(.lm-scrim):not(footer){display:none !important;}
  body.lm-open .legal-full{display:none !important;}

  /* The footer survives that cut for one reason: it is the colophon. It names
     the legal entity, the SEC registration, the D-U-N-S and the registered
     address, and a printed policy that cannot say who issued it is not much
     of a document. Everything else in the footer goes. */
  body.lm-open footer{display:block !important;border-top:1px solid #999;
    margin-top:14px;padding-top:10px;}
  body.lm-open footer > *:not(.corp){display:none !important;}
  /* The footer's nav separators are bare text nodes between the anchors, so
     no element selector reaches them — they printed as a row of stray dots.
     Collapsing the footer's own type and restoring it on the colophon leaves
     nothing behind. */
  body.lm-open footer{font-size:0 !important;}
  body.lm-open footer .corp{display:block !important;font-size:9pt;line-height:1.5;}

  /* Keep clauses legible across a page break. */
  h1,h2,h3,.lm-title{break-after:avoid-page;}
  dl,li,.legal,dt,dd{break-inside:avoid-page;}
  a{word-break:break-word;}
}