/* Tharu — deep teal identity, deliberately not Pooja's palette (brand decision, 23 Sep). */
:root{
  --ink:#0d1b1e; --ink-2:#3d5054; --line:#dfe6e5; --bg:#fbfaf7; --panel:#fff;
  --teal:#0f4c4a; --teal-2:#146b66; --sand:#f0ebe1; --amber:#8a5a00; --ok:#1f6d4a;
  --radius:14px; --maxw:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Anchor targets clear the sticky header, which is taller once the nav wraps (GPT F8). */
section[id]{scroll-margin-top:180px}
@media(min-width:760px){section[id]{scroll-margin-top:90px}}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
a{color:var(--teal-2)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--teal-2);outline-offset:2px;border-radius:6px}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:680}
h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:650;margin-top:0}
h3{font-size:1.05rem;font-weight:640}
p{margin:0 0 1em}
.lede{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--ink-2);max-width:60ch}
.muted{color:var(--ink-2)}
.small{font-size:.875rem}
header.site{border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;gap:16px;min-height:66px;flex-wrap:wrap}
.brand{font-weight:700;font-size:1.22rem;color:var(--teal);text-decoration:none;letter-spacing:-.02em}
.brand span{color:var(--ink-2);font-weight:500;font-size:.78rem;display:block;letter-spacing:.02em}
nav.site{margin-left:auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
nav.site a:not(.btn){color:var(--ink-2);text-decoration:none;font-size:.94rem}
nav.site a:not(.btn):hover{color:var(--teal-2);text-decoration:underline}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 20px;border-radius:999px;border:1px solid var(--teal);
  background:var(--teal);color:#fff;text-decoration:none;font-weight:600;font-size:.97rem;cursor:pointer}
.btn:hover{background:var(--teal-2);border-color:var(--teal-2)}
.btn.ghost{background:transparent;color:var(--teal);}
.btn.ghost:hover{background:rgba(15,76,74,.07)}
section{padding:64px 0;border-bottom:1px solid var(--line)}
section.hero{padding:84px 0 72px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--sand) 0%,var(--bg) 100%)}
.grid{display:grid;gap:22px}
@media(min-width:760px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.eyebrow{text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;font-weight:700;color:var(--teal-2);margin-bottom:10px}
.price{font-size:2.1rem;font-weight:700;color:var(--teal);letter-spacing:-.02em}
ul.clean{list-style:none;padding:0;margin:0}
ul.clean li{padding:9px 0 9px 26px;position:relative;border-bottom:1px solid var(--line)}
ul.clean li:last-child{border-bottom:0}
ul.clean li::before{content:"";position:absolute;left:4px;top:17px;width:7px;height:7px;
  border-radius:50%;background:var(--teal-2)}
ul.clean.no li::before{background:none;border:1.5px solid #b9c4c3;top:16px;width:8px;height:8px}
.note{background:var(--sand);border-left:3px solid var(--teal);padding:14px 16px;border-radius:0 10px 10px 0}
.shot{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.shot .bar{background:#f4f2ec;border-bottom:1px solid var(--line);padding:7px 12px;font-size:.74rem;color:var(--ink-2)}
.shot .body{padding:16px}
.row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.row:last-child{border-bottom:0}
.tag{display:inline-block;font-size:.73rem;padding:2px 9px;border-radius:999px;background:var(--sand);color:var(--ink-2);border:1px solid var(--line)}
.tag.rev{background:#fdf4e3;color:var(--amber);border-color:#f0dfbb}
form.enq{display:grid;gap:14px;max-width:560px}
label{font-weight:600;font-size:.9rem;display:block;margin-bottom:5px}
input,textarea,select{width:100%;padding:11px 13px;border:1px solid #cdd6d5;border-radius:10px;
  font:inherit;background:var(--panel);min-height:46px}
textarea{min-height:120px;resize:vertical}
.err{color:#9a2222;font-size:.85rem;margin-top:5px;display:none}
.field.bad input,.field.bad textarea{border-color:#9a2222}
.field.bad .err{display:block}
.ok{display:none;background:#eef6f1;border:1px solid #cfe5d8;border-radius:12px;padding:18px}
footer.site{padding:40px 0;background:var(--panel)}
footer.site .wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
footer.site a:not(.brand){color:var(--ink-2);font-size:.9rem}
.form-error{background:#fbeeee;border:1px solid #e7c4c4;border-radius:10px;padding:12px 14px;font-size:.9rem;color:#7a1f1f;margin:0}
.form-error[hidden]{display:none}
form[hidden]{display:none}
.todo{background:#fdf4e3;border:1px dashed #d9b670;border-radius:10px;padding:12px 14px;font-size:.86rem;color:var(--amber)}
@media(prefers-reduced-motion:no-preference){.btn{transition:background .15s ease}}

/* --- utilities, moved out of inline styles so the page can carry a strict CSP ------------- */
.skip{position:absolute;left:-9999px;display:inline-flex;align-items:center;min-height:46px;
  padding:0 20px;border-radius:999px;background:var(--teal);color:#fff;text-decoration:none;font-weight:600}
.skip:focus{left:12px;top:10px;z-index:50}
.offscreen{position:absolute;left:-9999px}
.cta-row{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.hero-foot{margin-top:18px}
.pad-top{margin-top:30px}
.mt-sm{margin:12px 0 0}
.mb-sm{margin:0 0 10px}
.mb-xs{margin:0 0 6px}
.m-0{margin:0}
.mt-md{margin:14px 0 0}
.mt-lg{margin-top:26px}
.tight{margin-top:-4px}
.align-start{align-items:start}
.panel-bg{background:var(--panel)}
.sand-bg{background:var(--sand)}
.label-on,.label-off{font-size:.875rem;text-transform:uppercase;letter-spacing:.07em}
.label-on{color:var(--teal-2)}
.label-off{color:var(--ink-2)}
.sub{margin-top:44px}
.footer-nav{margin-left:auto}
.footer-legal{width:100%;margin:10px 0 0}

/* Nine sections read as a list, not nine columns: two up on a phone, three on a wide screen. */
.chapters{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:520px){.chapters{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.chapters{grid-template-columns:repeat(3,1fr)}}
.chapter{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.chapter h3{margin:0 0 4px;color:var(--teal);font-size:1rem}
.chapter p{margin:0}

.story{background:var(--sand);border-radius:var(--radius);padding:22px 24px;max-width:70ch}
.story h3{margin-bottom:10px}
.story p:last-child{margin-bottom:0}
.wrap.narrow{max-width:720px}
.todo-inline{background:#fdf4e3;border-bottom:1px dashed #d9b670;color:var(--amber);padding:0 3px}
hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.ok.show{display:block}

/* Retention schedule on the privacy page. Stacks on a phone so nothing is cut off. */
table.retention{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem}
table.retention th,table.retention td{text-align:left;vertical-align:top;padding:.6rem .75rem .6rem 0;border-bottom:1px solid var(--rule,#dad2ca)}
table.retention th{font-weight:600}
table.retention td:first-child{padding-right:1.25rem}
@media (max-width:560px){
  table.retention,table.retention tbody,table.retention tr,table.retention td{display:block;width:100%}
  table.retention thead{position:absolute;left:-9999px}
  table.retention tr{padding:.5rem 0;border-bottom:1px solid var(--rule,#dad2ca)}
  table.retention td{border:0;padding:.15rem 0}
  table.retention td:first-child{font-weight:600}
}

/* --- back to top ---
   The homepage is long enough that reaching the footer leaves no way back
   except scrolling all the way up, and the header is not sticky. This appears
   once the reader is well past the first screen and gets out of the way again
   near the top. It sits clear of the footer text and is a real button, so it
   is reachable by keyboard and announced properly. */
.totop{position:fixed;right:18px;bottom:18px;z-index:40;display:inline-flex;
  align-items:center;gap:7px;min-height:44px;padding:0 14px;
  font:600 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.02em;
  color:#0f1b1c;background:var(--teal);border:1px solid var(--teal);border-radius:999px;
  cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.38);
  opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease}
.totop.show{opacity:1;transform:none}
.totop:hover{filter:brightness(1.07)}
.totop:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:560px){.totop{right:12px;bottom:12px;padding:0 12px}
  .totop span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media(prefers-reduced-motion:reduce){.totop{transition:none}}