/* ---------------------------------------------------------------------------
   paybiil — shared site shell (Soul Knot identity)

   Every public marketing page links this file. It carries the brand tokens,
   the self-hosted typeface, the header and footer, buttons, and the prose
   styles the legal pages use. Page-specific sections stay inline in each page.

   The mark is the on-dark variant from the brand pack: a cream ring, an amber
   ring, and the plum ground showing through where they cross. Coral and amber
   side by side read as another company's logo, so the sender's ring is cream
   and always sits on its plum badge.
   --------------------------------------------------------------------------- */

/* Bricolage Grotesque, SIL OFL 1.1 — self-hosted so no page depends on a
   third-party host and the login page's font-src 'self' policy is satisfied. */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal; font-weight:200 800; font-display:swap;
  src:url(/brand/fonts/bricolage-grotesque-latin.woff2) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal; font-weight:200 800; font-display:swap;
  src:url(/brand/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --plum:#3A1F38; --coral:#E2573B; --amber:#F0A43A; --cream:#FBF5EC;
  --muted:#7A5F6F;
  --ground:var(--cream); --ink:var(--plum); --ink-soft:var(--muted);
  --badge:var(--plum);
  --card:#FFFFFF; --line:rgba(58,31,56,.13); --line-soft:rgba(58,31,56,.07);
  --shadow:0 1px 2px rgba(58,31,56,.05), 0 14px 34px -14px rgba(58,31,56,.18);
  --font:'Bricolage Grotesque','Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#241422; --ink:var(--cream); --ink-soft:#C9A7B8;
    --badge:#3A1F38;
    --card:#311B2F; --line:rgba(251,245,236,.15); --line-soft:rgba(251,245,236,.08);
    --shadow:0 1px 2px rgba(0,0,0,.32), 0 18px 44px -18px rgba(0,0,0,.6);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font); font-weight:500; font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{font-weight:800; letter-spacing:-.045em; line-height:1.02; text-transform:lowercase; margin:0}
h1{font-size:clamp(3rem,8.5vw,6.25rem)}
h2{font-size:clamp(2.1rem,5vw,3.6rem)}
h3{font-size:1.2rem; letter-spacing:-.03em; line-height:1.25}
p{margin:0}
.wrap{width:min(1180px,100% - 2.5rem); margin-inline:auto}
@media (max-width:640px){ .wrap{width:min(1180px,100% - 1.75rem)} }

.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.kicker::before{content:""; width:1.5rem; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--plum),var(--amber))}
@media (prefers-color-scheme:dark){ .kicker::before{background:linear-gradient(90deg,var(--cream),var(--amber))} }
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--card);padding:.75rem 1rem;border-radius:.6rem}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:.35rem}

/* the mark, always on its plum badge */
.badge{background:var(--badge); border-radius:.62rem; padding:.42rem .38rem; display:grid; place-items:center; flex:none}
.badge svg{display:block; width:30px; height:21px}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav{display:flex; align-items:center; gap:1.25rem; height:76px}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; font-weight:800; letter-spacing:-.045em; font-size:1.5rem}
.nav nav{display:flex; gap:1.75rem; margin-left:auto; font-size:.95rem}
.nav nav a{text-decoration:none; color:var(--ink-soft); transition:color .15s}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:var(--ink)}
.auth{display:flex; align-items:center; gap:.6rem; margin-left:1.5rem}
@media (max-width:980px){ .nav nav{display:none} .auth{margin-left:auto} }
@media (max-width:420px){ .auth .login{display:none} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; white-space:nowrap;
  font-weight:600; font-size:.95rem; letter-spacing:-.01em; font-family:inherit; cursor:pointer;
  padding:.68rem 1.2rem; border-radius:999px; border:1px solid transparent;
  transition:transform .15s cubic-bezier(.2,.8,.3,1), box-shadow .15s, background .15s, border-color .15s;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--coral); color:#fff; box-shadow:0 6px 18px -6px rgba(226,87,59,.55)}
.btn.primary:hover{box-shadow:0 11px 26px -8px rgba(226,87,59,.68)}
.btn.ghost{border-color:var(--line); color:var(--ink); background:transparent}
.btn.ghost:hover{border-color:var(--ink)}
.btn.plain{color:var(--ink); padding-inline:.5rem; background:transparent}
.btn.plain:hover{color:var(--coral)}
.btn.lg{padding:.95rem 1.7rem; font-size:1.02rem}

/* ---------- inner-page hero ---------- */
.page-hero{padding:clamp(3.25rem,8vw,6rem) 0 clamp(2rem,5vw,3rem)}
.page-hero h1{margin-top:1.4rem; font-size:clamp(2.6rem,6.5vw,4.6rem); max-width:16ch}
.page-hero h1 em{font-style:normal; color:var(--coral)}
.page-hero p{margin-top:1.4rem; font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--ink-soft); max-width:52ch}
.page-hero .btn{margin-top:2rem}

/* ---------- two-column page layouts (contact, legal) ---------- */
.two-col{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr); gap:clamp(2rem,5vw,4.5rem); padding-bottom:clamp(3rem,7vw,5rem); align-items:start}
@media (max-width:860px){ .two-col{grid-template-columns:1fr; gap:2rem} }
.side{position:sticky; top:96px}
@media (max-width:860px){ .side{position:static} }
.side h2{font-size:1.6rem}
.side > p{margin-top:.9rem; color:var(--ink-soft)}
.note{margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--line-soft)}
.note strong{display:block; font-weight:600; letter-spacing:-.02em; margin-bottom:.15rem}
.note a{color:var(--coral); text-decoration:none; font-weight:600}
.note a:hover{text-decoration:underline}
.side-nav strong{display:block; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.8rem}
.side-nav a{display:block; text-decoration:none; color:var(--ink-soft); padding:.34rem 0; font-weight:500; transition:color .15s}
.side-nav a:hover{color:var(--ink)}
.side-nav a[aria-current="page"]{color:var(--ink); font-weight:600}

/* ---------- prose (legal pages) ---------- */
.prose{max-width:70ch; font-size:1.02rem}
.prose .updated{font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:1.5rem}
.prose .callout{
  background:var(--card); border:1px solid var(--line-soft); border-left:3px solid var(--amber);
  border-radius:.9rem; padding:1.1rem 1.25rem; margin:0 0 2rem; box-shadow:var(--shadow);
  font-weight:500;
}
.prose h2{font-size:1.45rem; text-transform:none; letter-spacing:-.03em; margin:2.4rem 0 .75rem}
.prose h2:first-of-type{margin-top:0}
.prose p{margin:0 0 1rem; color:var(--ink)}
.prose p+p{margin-top:-.15rem}
.prose ul{margin:0 0 1.1rem; padding-left:1.25rem}
.prose li{margin:.35rem 0}
.prose li::marker{color:var(--amber)}
.prose a{color:var(--coral); text-decoration:none; font-weight:600}
.prose a:hover{text-decoration:underline}
.prose strong{font-weight:600}

/* ---------- forms (contact) ---------- */
.form-card{background:var(--card); border:1px solid var(--line-soft); border-radius:1.25rem; padding:clamp(1.4rem,3vw,2rem); box-shadow:var(--shadow)}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:.4rem}
.field.full{grid-column:1/-1}
.field label{font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.field input,.field select,.field textarea{
  font:inherit; font-size:1rem; color:var(--ink); background:var(--ground);
  border:1px solid var(--line); border-radius:.75rem; padding:.8rem .95rem; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
.field textarea{min-height:9rem; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(240,164,58,.25)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-soft); opacity:.75}
.form-footer{display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:center; justify-content:space-between; margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line-soft)}
.form-footer p{font-size:.85rem; color:var(--ink-soft); max-width:46ch}
.form-footer p a{color:var(--coral); text-decoration:none; font-weight:600}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line-soft); padding:3.5rem 0 2.5rem; margin-top:clamp(4rem,8vw,6rem)}
.foot{display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem}
@media (max-width:720px){ .foot{grid-template-columns:1fr 1fr; gap:2rem} .foot .about{grid-column:1/-1} }
.foot h4{margin:0 0 .9rem; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.foot a{display:block; text-decoration:none; color:var(--ink-soft); font-size:.94rem; padding:.24rem 0; transition:color .15s}
.foot a.brand{display:flex; color:var(--ink); font-size:1.3rem; padding:0}
.foot a:hover{color:var(--ink)}
.foot .about p{color:var(--ink-soft); font-size:.94rem; margin-top:.95rem; max-width:36ch}
.legal{margin-top:3rem; padding-top:1.75rem; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between; font-size:.83rem; color:var(--ink-soft)}
.legal p{max-width:62ch}