/* Shared stylesheet for the static content pages.
   Same palette as the app so a visitor arriving from search and then tapping
   through to the tool doesn't feel handed off to a different product. The
   receipt motif is the one thing these pages do that the app doesn't: the brand
   is FPL Receipts, so the pages are laid out like a till roll — monospace
   numerics, dashed rules instead of solid borders, and a torn edge top and
   bottom of the main column. */
:root{
  --bg:#12131a; --surface:#1a1c26; --surface2:#222533; --border:#2e3242;
  --ink:#eef0f6; --ink2:#aab0c0; --ink3:#7a8095;
  --accent:#00e58f; --accent-ink:#062b1c; --purple:#7c5cff;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:0 16px 60px;}

.wrap{max-width:760px; margin:0 auto;}

/* Torn edge: a repeating conic gradient chews a zigzag out of the top and
   bottom of the sheet. Purely decorative, so it is aria-hidden in the markup. */
.tear{height:12px; background:
  conic-gradient(from 135deg at 50% 0, var(--surface) 25%, transparent 0) 0 0/16px 12px repeat-x;}
.tear.bottom{transform:rotate(180deg);}
.sheet{background:var(--surface); padding:26px 22px 30px;}
@media(min-width:640px){ .sheet{padding:34px 40px 40px;} }

header.top{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px;}
header.top a.brand{color:var(--ink); text-decoration:none; font-size:1.05rem; font-weight:800; letter-spacing:-.01em;}
header.top a.brand span{color:var(--accent);}
header.top .tag{font-size:.72rem; color:var(--ink3); border:1px solid var(--border); border-radius:99px; padding:2px 10px;}

h1{font-size:1.6rem; line-height:1.25; letter-spacing:-.02em; margin:18px 0 8px;}
@media(min-width:640px){ h1{font-size:2rem;} }
.standfirst{color:var(--ink2); font-size:1rem; margin-bottom:4px;}
.updated{font-family:var(--mono); font-size:.72rem; color:var(--ink3); letter-spacing:.02em;}

hr.dash{border:0; border-top:1px dashed var(--border); margin:22px 0;}

h2{font-size:1.14rem; line-height:1.35; margin:30px 0 10px; letter-spacing:-.01em;}
h3{font-size:1rem; margin:22px 0 6px; color:var(--ink);}
p{margin-bottom:12px; color:var(--ink2);}
p strong, li strong{color:var(--ink);}
/* The bolded opening sentence of each section — the direct answer a search
   engine (or a person skimming) should be able to lift on its own. */
p.answer{color:var(--ink); font-weight:700;}
ul,ol{margin:0 0 14px 20px; color:var(--ink2);}
li{margin-bottom:6px;}
a{color:var(--accent);}
a:hover{text-decoration:none;}

table{width:100%; border-collapse:collapse; margin:6px 0 18px; font-size:.9rem;}
caption{text-align:left; color:var(--ink3); font-size:.78rem; padding-bottom:7px;}
th,td{text-align:left; padding:8px 10px; border-bottom:1px dashed var(--border); vertical-align:top;}
thead th{color:var(--ink3); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700;}
td.num,th.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap;}
tbody tr:last-child td{border-bottom:0;}

.cta{display:block; background:var(--accent); color:var(--accent-ink); font-weight:800;
  text-align:center; text-decoration:none; border-radius:10px; padding:14px 18px; margin:22px 0 6px;
  box-shadow:0 4px 16px rgba(0,229,143,.28);}
.cta small{display:block; font-weight:600; opacity:.75; margin-top:2px;}

.callout{background:var(--surface2); border-left:3px solid var(--purple); border-radius:0 10px 10px 0;
  padding:12px 14px; margin:16px 0; font-size:.92rem; color:var(--ink2);}
.callout b{color:var(--ink);}

details.faq{border-top:1px dashed var(--border); padding:12px 0;}
details.faq summary{cursor:pointer; font-weight:700; color:var(--ink); list-style:none;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::before{content:"+ "; color:var(--accent); font-family:var(--mono);}
details.faq[open] summary::before{content:"− ";}
details.faq p{margin:9px 0 0;}

footer.foot{margin-top:26px; padding-top:18px; border-top:1px dashed var(--border);
  font-size:.82rem; color:var(--ink3);}
footer.foot nav{margin-bottom:10px; line-height:2;}
footer.foot nav a{margin-right:6px;}
footer.foot .small{font-size:.74rem; line-height:1.6;}