/* Shared chrome for the standalone pages (pricing, disconnect, learn-more).
 *
 * index.html keeps its own inline styles deliberately — it is the one page
 * where a render-blocking stylesheet would cost something, and rewiring it is
 * risk against a live homepage for no gain. These three pages are small, so
 * they share a file instead of triplicating the chrome.
 *
 * Tokens are copied from index.html rather than imported, and must stay in
 * step with it. The dark rebase (2026-08-22, PR #21) is the current values.
 */
:root{
  --forest:#181716; --forest-deep:#1B2534; --cream:#F4F1EA; --offwhite:#FBF7EF;
  --bronze:#8B6120; --sage:#B5893F; --tan:#B58860; --walnut:#3A4657; --walnut-deep:#141C27;
  --bronze-lift:#A87A2E;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--forest); color:var(--cream);
  font-family:Georgia,'Times New Roman',serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
.sans{font-family:'Helvetica Neue',Arial,Helvetica,sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid var(--sage); outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

.skip{
  position:absolute; left:-9999px; top:0; background:var(--cream); color:var(--forest-deep);
  padding:.6rem 1rem; z-index:100;
}
.skip:focus{left:.5rem; top:.5rem}

header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 6vw;
  border-bottom:3px solid var(--bronze);
  background:linear-gradient(180deg, var(--forest-deep), var(--forest));
  position:sticky; top:0; z-index:50;
}
.brand{display:flex; align-items:center; gap:.75rem; text-decoration:none}
.brand img{width:44px;height:44px;border-radius:50%}
.brand span{font-family:'Helvetica Neue',Arial,sans-serif; font-weight:700; letter-spacing:.22em; font-size:1.05rem}
a.cta{
  font-family:'Helvetica Neue',Arial,sans-serif; font-size:.85rem; letter-spacing:.08em;
  color:var(--offwhite); background:var(--bronze); text-decoration:none;
  padding:.6rem 1.1rem; border-radius:3px; font-weight:700;
  border:1px solid rgba(242,237,223,.25); white-space:nowrap;
}
a.cta:hover{background:var(--walnut)}

/* page masthead — quieter than the homepage hero; these are utility pages */
.masthead{
  padding:4rem 6vw 2.6rem;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(139,97,32,.18), transparent 65%),
    var(--forest);
  border-bottom:1px solid rgba(181,136,96,.25);
}
.masthead-inner{max-width:52rem; margin:0 auto}
.eyebrow{
  font-family:'Helvetica Neue',Arial,sans-serif; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tan); font-weight:700;
}
.masthead h1{
  font-size:clamp(1.8rem,3.6vw,2.9rem); line-height:1.15; font-weight:400;
  margin-top:.9rem; text-wrap:balance;
}
.masthead .rule{width:72px; height:3px; background:var(--tan); margin:1.4rem 0 0; border-radius:2px}
.masthead p.lead{margin-top:1.3rem; max-width:40em; font-size:clamp(1rem,1.5vw,1.1rem); color:rgba(244,241,234,.88)}

main{padding:3.2rem 6vw 1rem}
.col{max-width:52rem; margin:0 auto; display:flex; flex-direction:column; gap:2.6rem}
.col.wide{max-width:66rem}

section h2{
  font-size:clamp(1.25rem,2.2vw,1.65rem); font-weight:400; line-height:1.25;
  padding-bottom:.6rem; border-bottom:1px solid rgba(181,136,96,.3);
}
section h3{font-size:1.05rem; font-weight:400; color:var(--tan); margin-top:1.4rem}
section p{margin-top:1rem; color:rgba(244,241,234,.88)}
section p:first-of-type{margin-top:1.1rem}
ul.plain{margin-top:1rem; padding-left:1.2rem; display:flex; flex-direction:column; gap:.5rem}
ul.plain li{color:rgba(244,241,234,.88)}
ol.steps{margin-top:1.1rem; padding-left:1.3rem; display:flex; flex-direction:column; gap:.75rem}
ol.steps li{color:rgba(244,241,234,.9)}
ol.steps b{color:var(--cream)}
.note{
  margin-top:1.4rem; padding:1rem 1.2rem; border-left:3px solid var(--bronze);
  background:rgba(58,70,87,.28); font-size:.95rem; color:rgba(244,241,234,.85);
}

footer{padding:3rem 6vw; text-align:center; border-top:1px solid rgba(181,136,96,.3); margin-top:3.4rem}
footer img{width:52px;height:52px;opacity:.9}
footer .tag{
  font-family:'Helvetica Neue',Arial,sans-serif; font-size:.72rem; letter-spacing:.2em;
  color:var(--tan); margin-top:1rem;
}
footer .flinks{
  font-family:'Helvetica Neue',Arial,sans-serif; font-size:.78rem; letter-spacing:.06em;
  margin-top:1rem; color:rgba(242,237,223,.65);
}
footer .flinks a{color:var(--tan); text-decoration:none}
footer .flinks a:hover{text-decoration:underline}
footer .legal{font-size:.8rem; color:rgba(242,237,223,.5); margin-top:1rem}

@media (max-width:760px){
  header{padding:1rem 5vw}
  .brand span{font-size:.9rem; letter-spacing:.16em}
  .brand img{width:36px;height:36px}
  .masthead{padding:2.8rem 5vw 2.2rem}
  main{padding:2.4rem 5vw 1rem}
}