/* ============================================================
   LODGEIO SUBPAGE STYLES (pricing, security, contact, privacy,
   terms) · v2 2026-08-12. Same design language as the homepage
   (which keeps its own inline styles): gradient forest canvas,
   Source Sans 3 light display type, mint accent, white document
   cards. Loaded with a relative href ("css/site.css") so pages
   work both on lodgeio.com.au/* (middleware rewrite) and when
   opened directly as /website/*.html on any deployment.
   v2: canvas lightened (dark end was near-black on phones) and
   the gradient moved to a fixed body::before — mobile browsers
   ignore background-attachment:fixed, which stretched the
   gradient over the whole page and showed only the darkest stop.
   ============================================================ */
:root{
  --bg:#123122; --mint:#6fe3ae; --mint-soft:rgba(110,227,174,.16);
  --white:#fff; --tx:rgba(255,255,255,.8); --tx-strong:rgba(255,255,255,.9);
  --tx-dim:rgba(255,255,255,.8); --line:rgba(255,255,255,.12);
  --card-ink:#0b1a14; --card-mut:#5c7268; --card-faint:#9aada5;
  --card-line:#e4ebe7; --green:#12864f;
  --grad:linear-gradient(90deg,#6fe3ae,#3fbfa8,#35a1b8);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Source Sans 3',sans-serif;font-weight:300;font-size:17px;line-height:1.75;
  color:var(--tx);background:var(--bg);min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(35deg,#102a1e 0%,#143827 38%,#175138 72%,#1a6b4a 100%)}
a{color:var(--mint);text-decoration:none}
a:hover{color:#a8f0cf}
button,input{font-family:'Source Sans 3',sans-serif}

.shell{position:relative;z-index:1;max-width:1180px;margin:0 auto}
.pad{padding-left:56px;padding-right:56px}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding-top:26px;gap:16px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:11px;min-height:44px;color:#fff;font-weight:400;
  font-size:17px;letter-spacing:.2em;text-transform:uppercase}
.brand:hover{color:#fff}
.brand svg{flex:none}
.top-actions{display:flex;align-items:center;gap:12px}
.btn-ghost{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:8px;
  color:rgba(255,255,255,.72);font-size:14.5px;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s,color .2s}
.btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.btn-cta{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:8px;
  background:var(--mint);color:#08150f;font-weight:600;font-size:14.5px;letter-spacing:.1em;
  text-transform:uppercase;transition:filter .2s}
.btn-cta:hover{filter:brightness(1.12);color:#08150f}

/* ---------- page head ---------- */
.page-head{padding-top:72px;padding-bottom:44px;max-width:820px}
.page-head .kicker{display:inline-flex;align-items:center;gap:9px;min-height:34px;padding:6px 15px;
  border-radius:17px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:26px}
.page-head .kicker i{width:7px;height:7px;border-radius:50%;background:var(--mint)}
.page-head h1{color:#fff;font-weight:200;font-size:clamp(40px,5vw,64px);line-height:1.06;
  letter-spacing:-.035em;margin:0 0 20px}
.page-head .lede{font-size:18.5px;line-height:1.75;margin:0;max-width:56ch}
.page-head .updated{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-top:22px}

/* ---------- white document card (legal prose) ---------- */
.doc{background:#fff;color:#40534b;border-radius:14px;box-shadow:0 26px 64px rgba(0,0,0,.3);
  padding:clamp(30px,4vw,56px) clamp(22px,4vw,56px);max-width:860px;margin:0 0 92px;
  font-size:16px;line-height:1.8}
.doc h2{color:var(--card-ink);font-weight:600;font-size:21px;letter-spacing:-.01em;margin:40px 0 14px}
.doc h2:first-child{margin-top:0}
.doc h3{color:var(--card-ink);font-weight:600;font-size:17px;margin:26px 0 10px}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 16px;padding-left:24px}
.doc li{margin-bottom:8px}
.doc li::marker{color:var(--green)}
.doc a{color:var(--green);border-bottom:1px solid rgba(18,134,79,.3)}
.doc a:hover{color:#0a5c48}
.doc strong{color:var(--card-ink);font-weight:600}
.doc .toc{background:#f7faf8;border-radius:11px;padding:20px 24px;margin:0 0 34px;font-size:15px}
.doc .toc ol{margin:0;padding-left:20px;columns:2;column-gap:36px}
.doc .toc li{margin-bottom:5px;break-inside:avoid}
.doc table{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:14.5px;line-height:1.6}
.doc th{text-align:left;font-weight:600;color:var(--card-ink);font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:10px 12px;border-bottom:2px solid var(--card-line)}
.doc td{padding:11px 12px;border-bottom:1px solid #eef2f0;vertical-align:top}
.doc .note{background:#f7faf8;border-left:3px solid var(--green);border-radius:0 9px 9px 0;
  padding:14px 18px;margin:0 0 16px;font-size:15px}
.table-wrap{overflow-x:auto}

/* ---------- dark content panels (pricing, security) ---------- */
.band{padding-top:0;padding-bottom:92px}
.h2{color:#fff;font-weight:200;font-size:clamp(28px,3.2vw,38px);letter-spacing:-.03em;margin:0;display:inline-block}
.h2::after{content:'';display:block;height:2px;margin-top:14px;background:var(--grad)}
.sec-sub{font-size:17.5px;margin:20px 0 0;max-width:60ch}
.panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px;margin-top:44px}
.panel{padding:28px 30px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.panel h3{color:#fff;font-weight:400;font-size:20px;margin:0 0 10px;display:flex;align-items:center;gap:11px}
.panel h3 i{flex:none;width:34px;height:34px;border-radius:50%;background:var(--mint-soft);
  display:flex;align-items:center;justify-content:center;color:var(--mint);font-size:15px;font-style:normal}
.panel p{font-size:15.5px;line-height:1.75;margin:0}
.panel p+p{margin-top:10px}
.ticks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px 28px;
  margin-top:34px;font-size:16px;color:rgba(255,255,255,.82)}
.ticks span{display:flex;gap:10px;align-items:flex-start}
.ticks i{color:var(--mint);font-style:normal;flex:none}

/* ---------- pricing hero card ---------- */
.price-card{background:#fff;color:#40534b;border-radius:14px;box-shadow:0 26px 64px rgba(0,0,0,.3);
  max-width:860px;padding:clamp(30px,4vw,52px);display:grid;gap:8px}
.price-card .plan{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);font-weight:600}
.price-card .big{color:var(--card-ink);font-weight:200;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.03em;line-height:1.15}
.price-card .big b{font-weight:600}
.price-card .sub{font-size:16px;color:var(--card-mut);max-width:60ch}
.price-card hr{border:0;border-top:1px solid var(--card-line);margin:18px 0}
.price-card .inc{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:12px 26px;font-size:15px;color:var(--card-ink)}
.price-card .inc span{display:flex;gap:9px;align-items:flex-start}
.price-card .inc i{color:var(--green);font-style:normal;flex:none}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin-top:44px;display:grid;gap:12px}
.faq details{border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.05)}
.faq details[open]{background:rgba(255,255,255,.08)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;
  align-items:center;padding:18px 22px;color:#fff;font-weight:400;font-size:17px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--mint);font-size:22px;font-weight:200;flex:none}
.faq details[open] summary::after{content:'\2212'}
.faq .a{padding:0 22px 20px;font-size:16px;line-height:1.75;max-width:70ch}

/* ---------- CTA band ---------- */
.cta-band{text-align:center;padding-bottom:92px}
.cta-band h2{color:#fff;font-weight:200;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.03em;margin:0 0 14px}
.cta-band p{margin:0 auto 28px;max-width:52ch}

/* ---------- footer ---------- */
.foot{background:rgba(0,0,0,.42);padding-top:44px;padding-bottom:44px;display:flex;
  justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;font-size:14.5px}
.foot .dom{display:flex;align-items:center;gap:11px;color:rgba(255,255,255,.78)}
.foot .line{color:rgba(255,255,255,.72);max-width:46ch}
.foot nav{display:flex;gap:4px;flex-wrap:wrap}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;transition:background .2s}
.foot nav a:hover{background:rgba(255,255,255,.08)}
.footer-wrap{max-width:1180px;margin:0 auto}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .pad{padding-left:22px;padding-right:22px}
  .page-head{padding-top:44px;padding-bottom:34px}
  .band,.doc{margin-bottom:0}
  .doc{margin-bottom:64px}
  .band{padding-bottom:64px}
  .doc .toc ol{columns:1}
}
@media (max-width:560px){
  .pad{padding-left:16px;padding-right:16px}
  .top-actions .btn-ghost{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}