/* Shared styling for the policy pages. Same tokens and same Archivo as the
   landing page, so a visitor who clicks through to the fine print still feels
   like they are inside the same brand rather than on a generic legal page. */

@font-face{
  font-family:"Archivo Black";
  src:url("/assets/archivo-black-latin.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("/assets/archivo-500-latin.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

:root{
  --ink:#2E3033;
  --cream:#F1E6CF;
  --cream-dim:rgba(241,230,207,.62);
  --sans:"Archivo","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --display:"Archivo Black","Archivo","Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--cream-dim);
  font-family:var(--sans);font-weight:500;
  -webkit-font-smoothing:antialiased;
  padding:max(32px,env(safe-area-inset-top)) 24px max(48px,env(safe-area-inset-bottom));
}

/* same grain as the landing page — the fine print should not feel like a
   different website */
body::after{
  content:"";
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
  opacity:.055;
  mix-blend-mode:overlay;
}

.doc{max-width:620px;margin:0 auto;font-size:14px;line-height:1.75}

.back{
  display:inline-block;margin-bottom:38px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(241,230,207,.45);text-decoration:none;
}
.back:hover{color:var(--cream)}

h1{
  font-family:var(--display);font-weight:400;
  font-size:22px;letter-spacing:.1em;text-indent:.1em;text-transform:uppercase;
  color:var(--cream);
}
h2{
  font-family:var(--display);font-weight:400;
  font-size:12px;letter-spacing:.16em;text-indent:.16em;text-transform:uppercase;
  color:var(--cream);
  margin:34px 0 10px;
}
.updated{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(241,230,207,.35);
  margin-top:10px;margin-bottom:30px;
}
p{margin-bottom:14px}
ul{margin:0 0 14px 18px}
li{margin-bottom:8px}
strong{color:var(--cream);font-weight:500}
a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(241,230,207,.25)}
a:hover{border-bottom-color:var(--cream)}
a:focus-visible{outline:2px solid var(--cream);outline-offset:2px}

.note{
  margin-top:34px;padding-top:18px;
  border-top:1px solid rgba(241,230,207,.14);
  font-size:11px;color:rgba(241,230,207,.4);
}

/* ── About ────────────────────────────────────────────────────────────────
   Same shell as the policy pages, but this one has to carry the brand rather
   than just satisfy a carrier's review, so it gets the mark, a real opening
   line, and a way back to the signup. Type sizes match the landing page's
   scale — one system across the whole site. */

.about{max-width:560px}

.crest{
  display:flex;flex-direction:column;align-items:center;
  text-decoration:none;border:0;
  margin:0 auto 44px;
  --mark:96px;
}
.crest img{width:var(--mark);height:auto;display:block}
.crest-name,.crest-sub{
  font-family:var(--display);font-weight:400;
  color:var(--cream);
  text-transform:uppercase;line-height:1;white-space:nowrap;
}
.crest-name{
  font-size:calc(var(--mark) * .1158);
  letter-spacing:.276em;text-indent:.276em;
  margin-top:calc(var(--mark) * .128);
}
.crest-sub{
  font-size:calc(var(--mark) * .0642);
  letter-spacing:.347em;text-indent:.347em;
  margin-top:calc(var(--mark) * .032);
}
.crest-sub .reg{font-size:.78em}
.crest:hover img{opacity:.9}

/* the one line that has to land — sized to be read, not admired */
.lede{
  font-family:var(--display);font-weight:400;
  font-size:clamp(21px,5.2vw,28px);
  line-height:1.25;letter-spacing:.01em;
  text-transform:none;
  color:var(--cream);
  text-align:center;
  text-wrap:balance;
  margin-bottom:30px;
}

.about h2{margin:38px 0 14px}
.stand{font-size:15px;line-height:1.75;margin-bottom:16px}
.stand.quiet{color:rgba(241,230,207,.42);font-size:13px;margin-top:30px}

.steps{list-style:none;margin:0 0 18px;counter-reset:step}
.steps li{
  counter-increment:step;
  position:relative;
  padding-left:34px;
  margin-bottom:18px;
  font-size:15px;line-height:1.7;
}
.steps li::before{
  content:counter(step);
  position:absolute;left:0;top:1px;
  width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(241,230,207,.3);border-radius:50%;
  font-family:var(--display);font-size:10px;
  color:var(--cream);
}
.steps strong{display:block;margin-bottom:2px}

.inside{list-style:none;margin:0 0 18px}
.inside li{
  padding-left:20px;position:relative;
  font-size:15px;line-height:1.7;margin-bottom:10px;
}
.inside li::before{
  content:"";position:absolute;left:2px;top:11px;
  width:6px;height:1px;background:rgba(241,230,207,.45);
}

.cta{
  margin-top:46px;padding-top:30px;
  border-top:1px solid rgba(241,230,207,.14);
  text-align:center;
}
.cta-line{
  font-size:12px;letter-spacing:.16em;text-indent:.16em;
  text-transform:uppercase;
  color:rgba(241,230,207,.72);
  margin-bottom:18px;
}
.cta-btn{
  display:inline-block;
  background:var(--cream);color:var(--ink);
  border:0;border-radius:2px;
  font-family:var(--display);font-weight:400;
  font-size:12px;letter-spacing:.18em;text-indent:.18em;
  text-transform:uppercase;
  padding:16px 26px;line-height:1.2;
  text-decoration:none;
  transition:opacity .2s ease;
}
.cta-btn:hover{opacity:.86;border:0}
.cta-btn:focus-visible{outline:2px solid var(--cream);outline-offset:3px}

.docnav{
  margin-top:40px;text-align:center;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(241,230,207,.3);
}
.docnav a{color:rgba(241,230,207,.45);border:0}
.docnav a:hover{color:var(--cream)}