/* Buddy Bond logo concepts: shared styles for the hub and every concept page.
   Colour themes (.t-cream / .t-terra / .t-brown) set CSS variables that the logo SVG classes use. */
:root{--terra:#C96F4A;--cream:#F6EEDF;--brown:#4A2E22;--sage:#8FA37F;--sand:#EADBC2}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--brown);font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;line-height:1.45}
a{color:var(--terra)}
.wrap{max-width:1080px;margin:0 auto;padding:22px 16px 48px}
.wrap.narrow{max-width:860px}
h1{font-family:"Baloo 2","Nunito",sans-serif;font-weight:600;font-size:clamp(28px,6vw,42px);margin:6px 0 6px;letter-spacing:.2px;line-height:1.15}
.lede{margin:0 0 16px;font-size:16px;max-width:640px}
.sw{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.sw span{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;background:#fff8ec;border:1px solid var(--sand);padding:5px 12px 5px 6px;border-radius:99px}
.sw i{width:22px;height:22px;border-radius:50%;display:block;border:1px solid rgba(74,46,34,.2)}
.grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:900px){.grid{grid-template-columns:1fr 1fr;gap:24px}}
.card{background:#FFF9EF;border:1.5px solid var(--sand);border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 2px 0 rgba(74,46,34,.05)}
.card header,.chead{display:flex;gap:12px;align-items:flex-start}
.num{flex:none;font-family:"Baloo 2",sans-serif;font-weight:600;font-size:20px;background:var(--terra);color:var(--cream);width:44px;height:44px;border-radius:14px;display:grid;place-items:center}
.dir{margin:0;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--terra)}
h2{margin:0;font-family:"Baloo 2",sans-serif;font-weight:600;font-size:21px}
h2 a{color:inherit;text-decoration:none}
h2 a:hover{text-decoration:underline}
.why{margin:2px 0 0;font-size:14.5px}
.hero{border-radius:18px;padding:14px 10px;border:1px solid var(--sand);display:block}
.hero svg{display:block;width:100%;max-width:520px;margin:0 auto;height:auto}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.pair{grid-template-columns:1fr}}
.tile{border-radius:16px;padding:12px 8px}
.tile svg{display:block;width:100%;height:auto;max-width:360px;margin:0 auto}
.icons{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:4px 2px}
.cap{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#8a6a58;line-height:1.2;align-self:center}
.app{display:inline-grid;place-items:center;overflow:hidden;flex:none}
.app svg{width:100%;height:100%;display:block}
.app.edge{box-shadow:inset 0 0 0 1.5px #d9c6a6}
.tg{margin:0;font-size:13.5px;color:#7a5a48}
.foot{margin-top:26px;font-size:13.5px;color:#7a5a48;max-width:680px}
.btn{display:inline-flex;align-items:center;gap:6px;font:800 14px/1 "Nunito",sans-serif;text-decoration:none;color:var(--brown);background:#FFF9EF;border:1.5px solid var(--sand);border-radius:99px;padding:10px 16px;cursor:pointer}
.btn:hover{border-color:var(--terra)}
.btn.primary{background:var(--terra);border-color:var(--terra);color:var(--cream)}
.card .btn{align-self:flex-start}
/* concept page */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.topbar .grp{display:flex;gap:8px;flex-wrap:wrap}
.cpage .chead{margin:6px 0 14px}
.cpage .chead h1{margin:0;font-size:clamp(26px,6vw,38px)}
.cpage .chead .why{font-size:16.5px;max-width:620px;margin-top:4px}
.cpage .num{width:52px;height:52px;font-size:23px;border-radius:16px}
.cpage .hero{padding:26px 14px}
.cpage .hero svg{max-width:760px}
.cpage .tile{padding:20px 12px}
.cpage .tile svg{max-width:420px}
.cpage .sec{margin:18px 0 0}
.cpage .sec h3{margin:0 0 8px;font:800 12px/1 "Nunito",sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#8a6a58}
.cpage .icons{background:#FFF9EF;border:1.5px solid var(--sand);border-radius:18px;padding:16px;gap:18px}
.tagbig{font-family:"Baloo 2",sans-serif;font-weight:600;font-size:clamp(20px,4.5vw,28px);margin:0}
.share{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:#FFF9EF;border:1.5px solid var(--sand);border-radius:18px;padding:12px}
.share input{flex:1 1 220px;min-width:0;font:700 14px "Nunito",sans-serif;color:var(--brown);background:#fff;border:1.5px solid var(--sand);border-radius:12px;padding:10px 12px}
.dl{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.pn a{display:block;text-decoration:none;color:var(--brown);background:#FFF9EF;border:1.5px solid var(--sand);border-radius:18px;padding:12px 14px}
.pn a:hover{border-color:var(--terra)}
.pn small{display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--terra)}
.pn b{font-family:"Baloo 2",sans-serif;font-weight:600;font-size:18px}
.pn .next{text-align:right}
/* themes */
.t-cream{--ink:#4A2E22;--acc:#C96F4A;--soft:#F6EEDF;--dark:#4A2E22;--sage:#8FA37F;--bg:#F6EEDF;background:var(--bg)}
.t-terra{--ink:#F6EEDF;--acc:#4A2E22;--soft:#F6EEDF;--dark:#4A2E22;--sage:#F6EEDF;--bg:#C96F4A;background:var(--bg)}
.t-brown{--ink:#F6EEDF;--acc:#E08B63;--soft:#F6EEDF;--dark:#4A2E22;--sage:#A9BC96;--bg:#4A2E22;background:var(--bg)}
.ink{fill:var(--ink)}.acc{fill:var(--acc)}.soft{fill:var(--soft)}.dark{fill:var(--dark)}.sage{fill:var(--sage)}
.strk-ink{stroke:var(--ink)}.strk-acc{stroke:var(--acc)}
/* site bar + account widget (all pages) */
.sitebar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:-6px 0 14px;min-height:38px}
.sitebar .brand{font-family:"Baloo 2",sans-serif;font-weight:700;font-size:18px;color:var(--brown);text-decoration:none;letter-spacing:.2px}
.acct{display:flex;align-items:center;gap:8px;min-width:0}
.acct-email{font-size:13px;font-weight:700;color:var(--brown);text-decoration:none;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-email:hover{text-decoration:underline}
@media(max-width:420px){.acct-email{max-width:120px}}
.btn.sm{padding:8px 13px;font-size:13px}
.btn[disabled],.lnk[disabled]{opacity:.55;cursor:default}
/* login page */
.lpage .wrap{padding-top:18px}
.login{max-width:440px;margin:14px auto 0;background:#FFF9EF;border:1.5px solid var(--sand);border-radius:24px;padding:22px 20px;box-shadow:0 2px 0 rgba(74,46,34,.05)}
.login h1{font-size:clamp(24px,6vw,30px);margin:0 0 4px}
.login .sub{margin:0 0 12px;font-size:15px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--sand);border-radius:99px;padding:4px;margin:10px 0 14px}
.tabs button{font:800 14px/1 "Nunito",sans-serif;color:var(--brown);background:transparent;border:0;border-radius:99px;padding:10px 8px;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--terra);color:var(--cream)}
.fld{margin:0 0 12px}
.fld label{display:block;font:800 13px/1.2 "Nunito",sans-serif;margin:0 0 5px}
.fld label small{font-weight:600;color:#8a6a58}
.fld input,.row input{width:100%;font:700 16px "Nunito",sans-serif;color:var(--brown);background:#fff;border:1.5px solid var(--sand);border-radius:12px;padding:11px 12px}
.fld input:focus,.row input:focus{outline:2px solid var(--terra);outline-offset:1px;border-color:var(--terra)}
.btn.wide{width:100%;justify-content:center;padding:13px 16px;font-size:15px}
.links{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:14px 0 0}
.lnk{font:700 14px "Nunito",sans-serif;color:var(--terra);background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline;text-align:left}
.msg{margin:0 0 12px;padding:10px 12px;border-radius:12px;font-size:14.5px;font-weight:700;background:var(--sand)}
.msg.ok{background:#e4ecd9;color:#2f4a22}
.msg.err{background:#f8dcd1;color:#7a2b12}
.who{margin:0 0 14px;word-break:break-all}
.row{display:flex;gap:8px}
.row .btn{flex:none}
.row2{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
[hidden]{display:none!important}