/* ClanBite public pages (home, guides, privacy, terms). One rule for colour, used everywhere:
   dark text on light grounds, white text ONLY on solid dark green. No grey or pale text. */
:root{
  --bg:#f7faf7; --card:#ffffff; --fg:#0f1d14; --muted:#2c3f33; --line:#b9cabd;
  --green:#1a6240; --green-deep:#12462e; --green-soft:#dff0e6; --gold:#a86b00; --gold-soft:#fdeec3;
  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif; --body:'Source Sans 3','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--fg);font:18px/1.6 var(--body);padding-inline:16px;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--display);line-height:1.12;margin:0;text-wrap:balance;color:var(--fg)}
p{margin:0;text-wrap:pretty}
a{color:var(--green-deep)}
img{max-width:100%}
.page{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:64px;padding-block:20px 56px}
.narrow main{max-width:760px}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:44px;height:44px;display:block}
.word{font:800 26px var(--display);letter-spacing:-.01em;color:var(--green)}
.word i{font-style:normal;color:var(--gold)}
.links{display:flex;gap:20px;font-weight:600;font-size:16px;flex-wrap:wrap;align-items:center;margin-left:auto}
.links a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.top-in{color:#fff}
@media (max-width:600px){.top{display:grid;grid-template-columns:1fr auto;row-gap:12px}.top>.top-in{grid-column:2;grid-row:1}.links{grid-column:1/-1;margin-left:0;justify-content:space-between;gap:12px}.long{display:none}}
.links a{text-decoration:none;color:var(--fg)}
.links a:hover{text-decoration:underline}
.links a.btn{color:#fff;text-decoration:none}.links a.btn.ghost{color:var(--green-deep)}

/* buttons: green with white text, or outlined with dark green text */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#fff;font:600 17px var(--body);padding:12px 22px;border-radius:10px;text-decoration:none;border:0;cursor:pointer;min-height:48px}
.btn:hover{background:var(--green-deep)}
.btn.ghost{background:#fff;color:var(--green-deep);box-shadow:inset 0 0 0 2px var(--green)}
.btn.ghost:hover{background:var(--green-soft)}
.btn.sm{padding:8px 16px;font-size:15px;min-height:40px}
.gmark{width:24px;height:24px;border-radius:50%;background:#fff;display:inline-grid;place-items:center;flex:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;align-items:center}
.hero h1{font-size:clamp(34px,5.4vw,58px);font-weight:800;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--green)}
.hero .lead{font-size:21px;color:var(--fg);margin-top:16px;max-width:46ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.fine{font-size:16px;color:var(--muted);margin-top:12px}
.phones{position:relative;height:520px;min-width:0}
/* One picture instead of the home page's two: it needs no tilted frame, so it must not rely on that fixed height. */
.phones.one{height:auto;display:flex;justify-content:center;align-items:flex-start}
.phones.one .phone{position:relative;left:auto;right:auto;top:auto;width:min(280px,78%);transform:none;border-radius:24px}
.phone{position:absolute;width:236px;border-radius:30px;border:7px solid #0f1d14;background:#fff;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.22)}
.phone img{display:block;width:100%;height:auto}
.phone.a{left:2%;top:30px;transform:rotate(-4deg)}
.phone.b{right:2%;top:0;transform:rotate(3deg)}
.phone .cap{position:absolute;left:0;right:0;bottom:0;background:var(--green-deep);color:#fff;font:600 14px var(--body);padding:10px 12px}
.phone .cap::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:28px;background:linear-gradient(transparent,var(--green-deep))}
@media (min-width:821px) and (max-width:1100px){.phone{width:208px}}
@media (max-width:820px){.hero{grid-template-columns:1fr}.phones{height:480px;max-width:500px;width:100%;margin-inline:auto}.phone.a{left:0}.phone.b{right:0}}
@media (max-width:480px){.phones{height:auto;display:flex;gap:12px;justify-content:center;align-items:flex-start}.phone{position:relative;left:auto!important;right:auto!important;top:auto;width:calc(50% - 6px);border-width:5px;border-radius:22px}.phone.a{transform:rotate(-2deg)}.phone.b{transform:rotate(2deg);margin-top:28px}.phone .cap{padding:8px}}

/* sections */
.sec-h{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.eyebrow{font:600 14px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--green-deep)}
.sec-h h2,.h2{font-size:clamp(26px,3.6vw,38px);font-weight:800}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.world{border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:14px;min-width:0;color:var(--fg)}
.world.fam{background:var(--green-soft);box-shadow:inset 0 0 0 1px #9fc2ad}
.world.biz{background:var(--gold-soft);box-shadow:inset 0 0 0 1px #e1c36a}
.world h3{font-size:24px}
.world ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.world li{padding-left:26px;position:relative}
.world li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;background:var(--green)}
.world.biz li::before{background:var(--gold)}
.world .for{font-size:17px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}
/* A single picture must not sit inside the two-phone frame's rules, on any screen size. */
.phones.one .phone{width:min(280px,78%);border-radius:24px;transform:none}
.phones.one .phone.a{transform:none}
.phones.one .phone .cap{padding:10px 12px}
.phones.one .phone .cap::before{height:22px}
.step{display:flex;flex-direction:column;gap:6px;border-top:3px solid var(--green);padding-top:14px}
.step h3{font-size:21px}
.step p{color:var(--muted)}
.show{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px}
.show img{width:100%;max-width:440px;height:auto;justify-self:center;border-radius:10px;border:1px solid var(--line);display:block}
.show ul{margin:14px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
@media (max-width:760px){.show{grid-template-columns:1fr}}
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.guide{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.guide .pg{font:600 14px var(--body);color:var(--green-deep);letter-spacing:.06em;text-transform:uppercase}
.guide h3{font-size:21px}
.guide p{color:var(--muted);flex:1}
.guide .row{display:flex;gap:8px;flex-wrap:wrap}

/* privacy band: solid dark green, white text only */
.priv{background:var(--green-deep);color:#fff;border-radius:18px;padding:30px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:center}
.priv h2{font-size:clamp(24px,3.2vw,34px);color:#fff}
.priv p,.priv li,.priv a{color:#fff}
.priv ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.priv li::before{content:"\2713  ";font-weight:800}
@media (max-width:760px){.priv{grid-template-columns:1fr}}

footer{border-top:2px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:16px;color:var(--fg)}
footer .flinks{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--green-deep);font-weight:600}

/* text pages (privacy, terms, guides) */
.doc h1{font-size:clamp(32px,4.6vw,46px);font-weight:800;margin-top:8px}
.doc h2{font-size:24px;margin:34px 0 8px}
.doc p,.doc li{max-width:68ch}
.doc ul{padding-left:22px;display:flex;flex-direction:column;gap:6px;margin:8px 0}
.doc .stamp{color:var(--muted);margin-top:8px}
.doc .callout{background:var(--green-soft);border-radius:12px;padding:16px 18px;margin-top:16px;color:var(--fg)}
.doc table{border-collapse:collapse;width:100%;font-size:17px;margin-top:10px}
.doc th,.doc td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{background:var(--green-deep);color:#fff}
.tablewrap{overflow-x:auto}

/* features page: one section for the family (green), one for the business (gold); text beside a real phone screen */
.btn.wht{background:#fff;color:var(--green-deep)}
.btn.wht:hover{background:var(--green-soft)}
.btn.wht .gmark{box-shadow:0 0 0 1px var(--line)}
.fhero{display:flex;flex-direction:column;gap:14px;padding-block:10px 8px}
.fhero h1{font-size:clamp(34px,5.4vw,56px);font-weight:800;letter-spacing:-.02em;max-width:18ch}
.fhero .lead{font-size:21px;max-width:58ch}
.fjump{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:10px}
.fj{display:flex;flex-direction:column;gap:2px;padding:18px 20px;border-radius:14px;text-decoration:none;color:var(--fg)}
.fj.fam{background:var(--green-soft);box-shadow:inset 0 0 0 1px #9fc2ad}
.fj.biz{background:var(--gold-soft);box-shadow:inset 0 0 0 1px #e1c36a}
.fj:hover{box-shadow:inset 0 0 0 2px var(--green)}
.fj-k{font:600 14px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep)}
.fj.biz .fj-k{color:#6b4500}
.fj-t{font:800 24px var(--display)}
.fsec{margin-top:72px;display:flex;flex-direction:column;gap:56px;scroll-margin-top:20px}
.fsec-h{display:flex;flex-direction:column;gap:10px;max-width:62ch}
.fsec-h h2{font-size:clamp(28px,4vw,42px);font-weight:800}
.fsec-h p{font-size:19px}
.tagpill{font:600 14px var(--body);padding:5px 12px;border-radius:99px;width:max-content;color:#fff}
.tagpill.fam{background:var(--green-deep)}
.tagpill.biz{background:#6b4500}
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:48px;align-items:center;max-width:960px;width:100%}
.frow.flip{margin-left:auto}
.frow.flip{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
.frow.flip .fshot{order:-1}
.ftext{display:flex;flex-direction:column;gap:12px;min-width:0}
.ftext h3{font-size:clamp(24px,3vw,30px);font-weight:800}
.ftext p{font-size:19px;max-width:58ch}
.ftext ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ftext li{padding-left:28px;position:relative}
.ftext li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;border-radius:50%;background:var(--green)}
.fsec.biz .ftext li::before{background:var(--gold)}
.fshot{margin:0;justify-self:center;width:100%;max-width:300px;border-radius:30px;border:8px solid #0f1d14;overflow:hidden;background:#fff;box-shadow:0 18px 40px rgba(15,29,20,.22)}
.fshot img{display:block;width:100%;height:auto}
.fsec.fam .fshot{box-shadow:0 18px 40px rgba(15,29,20,.22),0 0 0 10px var(--green-soft)}
.fsec.biz .fshot{box-shadow:0 18px 40px rgba(15,29,20,.22),0 0 0 10px var(--gold-soft)}
@media (max-width:760px){.frow,.frow.flip{grid-template-columns:1fr;gap:22px}.frow.flip .fshot{order:0}.fshot{max-width:280px}}
footer .copy{font-size:14px;color:var(--muted)}