/* BP Pulse Log: production site CSS
   Ported from the approved mockup (docs/bppulselog-site-mockup.html).
   Tokens kept identical. RTL handled with CSS logical properties so a
   single ruleset works for both ltr and rtl documents; the phone
   recreation is intentionally pinned to ltr internally (see .phone). */

:root{
  --ground:#C9CEEA;
  --screen:#CDD2EE;
  --card:#FFFFFF;
  --ink:#1B1C2E;
  --slate:#4E5178;
  --page-muted:#5B5E7E;
  --muted:#8B8FA8;
  --accent:#F03B47;
  --accent-light:#FF8A90;
  --green:#34B36B;
  --amber:#F5A623;
  --red-cat:#E5484D;
  --chip-border:#E2E4F2;
  --chip-selected-bg:#FDE8EA;
  --inset:#F4F5FB;
  --inset-alt:#F1F2F9;
  --divider:#F0F1F8;
  --chevron:#C7CAE2;
  --shadow-soft:0 8px 24px rgba(60,64,120,0.10);
  --shadow-lift:0 18px 44px rgba(45,48,95,0.16);
  --radius-card:26px;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, "Hiragino Sans", "Yu Gothic", Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* clip (not hidden) so html/body still contain horizontal overflow without
   registering as a scroll container; hidden is programmatically scrollable
   and was hijacking .site-header's position:sticky, since the sticky
   offset was computed against this non-moving box instead of the real
   viewport. clip has no scroll mechanism, so it stays out of the way. */
html, body{
  margin:0;
  padding:0;
  max-width:100%;
  overflow-x:clip;
  background:#FFFFFF;
}
.site{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img, svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; }

.wrap{
  width:100%;
  max-width:1080px;
  margin:0 auto;
  padding-inline:20px;
}
@media (min-width:760px){ .wrap{ padding-inline:32px; } }

/* ---------- header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,0.9);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid #ECEDF6;
}
.header-inner{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding-top:11px;
  padding-bottom:11px;
}
.header-inner > *{ min-width:0; }
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-inline-end:auto;
}
.brand-name{
  font-size:16.5px;
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--ink);
  white-space:nowrap;
}
.brand-mark{ display:block; flex-shrink:0; border-radius:22%; }
.nav{
  order:3;
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 18px;
  padding-top:9px;
  margin-top:2px;
  border-top:1px solid #ECEDF6;
}
.nav a{
  font-size:13.5px;
  font-weight:600;
  color:var(--page-muted);
  padding:2px 0;
}
.nav a:hover{ color:var(--ink); }
.nav a.active{ color:var(--ink); }
.nav a.active::after{
  content:"";
  display:block;
  height:2px;
  margin-top:3px;
  background:var(--accent);
  border-radius:2px;
}
@media (min-width:780px){
  .nav{ order:0; width:auto; border-top:none; padding-top:0; margin-top:0; margin-inline-start:auto; gap:26px; }
  .nav a{ font-size:14px; }
}

/* ---------- hero ---------- */
.hero{ padding:44px 0 8px; }
@media (min-width:900px){ .hero{ padding:72px 0 24px; } }
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:44px;
  align-items:center;
}
/* grid items default to a content-based automatic minimum width, which
   can force the track (and everything inside .wrap) wider than the
   viewport on narrow phones. min-width:0 lets them shrink and wrap. */
.hero-grid > *{ min-width:0; }
@media (min-width:900px){
  .hero-grid{ grid-template-columns:1.04fr 1fr; gap:56px; }
}
.eyebrow{
  font-size:13px;
  font-weight:700;
  letter-spacing:0.01em;
  color:var(--accent);
  margin:0 0 14px;
}
.hero h1{
  font-size:37px;
  line-height:1.09;
  letter-spacing:-0.02em;
  font-weight:800;
  margin:0 0 18px;
  color:var(--ink);
  max-width:15ch;
}
@media (min-width:600px){ .hero h1{ font-size:46px; } }
@media (min-width:900px){ .hero h1{ font-size:52px; } }
.hero-sub{
  font-size:17px;
  line-height:27px;
  color:var(--page-muted);
  margin:0 0 28px;
  max-width:44ch;
}
.hero-cta{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.hero-cta > *{ min-width:0; }
.badge{ display:inline-block; line-height:0; direction:ltr; }
.badge svg{ display:block; filter:drop-shadow(0 10px 22px rgba(20,21,40,0.22)); }
.hero-note{
  font-size:13px;
  line-height:19px;
  font-weight:600;
  color:var(--page-muted);
  margin:16px 0 0;
}
.hero-pills{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:26px;
}
.hero-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding-block:8px;
  padding-inline:11px 15px;
  border-radius:999px;
  background:#fff;
  box-shadow:var(--shadow-soft);
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
}
.hero-pill svg{ width:13px; height:13px; fill:none; stroke:var(--accent); stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* phone (kept ltr internally in every locale, incl. rtl pages) */
.phone-stage{
  position:relative;
  display:flex;
  justify-content:center;
  padding:8px 0 4px;
}
.phone-stage::before{
  content:"";
  position:absolute;
  left:50%;
  top:6%;
  width:min(520px, 118%);
  height:78%;
  transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(255,255,255,0.72), rgba(255,255,255,0));
  pointer-events:none;
}
.phone{
  position:relative;
  width:min(326px, 88vw, 100%);
  border:10px solid #14151F;
  border-radius:48px;
  background:var(--screen);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 30px 60px rgba(20,21,31,0.35), 0 2px 10px rgba(20,21,31,0.25);
  font-family:var(--font);
  color:var(--ink);
  direction:ltr;
  text-align:left;
}
@media (min-width:900px){
  .phone{ width:340px; transform:scale(0.9); transform-origin:top center; margin-bottom:-82px; }
}

.status-bar{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 24px 4px;
  color:var(--ink);
}
.status-time{ font-size:14px; font-weight:700; letter-spacing:0.02em; font-variant-numeric:tabular-nums; }
.status-icons{ display:flex; align-items:center; gap:6px; }
.icon-battery{
  width:24px; height:12px;
  border:1.4px solid currentColor;
  border-radius:3.5px;
  padding:1.5px;
  position:relative;
}
.icon-battery::after{
  content:"";
  position:absolute;
  right:-3px; top:3px;
  width:2px; height:6px;
  background:currentColor;
  border-radius:0 2px 2px 0;
}
.battery-fill{ width:82%; height:100%; background:currentColor; border-radius:1.5px; }

.screen{
  flex:1;
  padding:6px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding-top:6px; gap:10px; }
.nav-title{ font-size:26px; font-weight:700; letter-spacing:-0.01em; }
.icon-btn{
  width:36px; height:36px;
  border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  box-shadow:var(--shadow-soft);
  flex-shrink:0;
}
.p-card{
  background:var(--card);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  padding:18px 20px;
}
.card-row-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.card-title-sm{ font-size:14px; font-weight:700; color:var(--ink); }
.card-sub-sm{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; text-align:right; }
.section-label{ font-size:13px; font-weight:700; color:var(--ink); margin:2px 2px 0; }

.reading-hero{ display:flex; align-items:flex-start; justify-content:center; gap:10px; padding-top:4px; }
.reading-col{ display:flex; flex-direction:column; align-items:center; }
.reading-num{ font-size:44px; font-weight:700; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.reading-tag{ font-size:11px; font-weight:700; letter-spacing:0.08em; color:var(--muted); margin-top:6px; }
.reading-slash{ font-size:34px; font-weight:300; color:var(--muted); align-self:center; margin-top:-4px; }
.hero-meta-row{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; gap:8px; }
.pulse-chip{ display:flex; align-items:center; font-size:15px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.pulse-chip .unit{ font-size:11px; font-weight:700; color:var(--muted); margin-left:4px; letter-spacing:0.04em; }
.icon-heart{ width:14px; height:14px; fill:var(--accent); margin-right:5px; }
.icon-heart-outline{ width:13px; height:13px; fill:none; stroke:var(--muted); stroke-width:1.8; margin-right:3px; vertical-align:-2px; }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dot-green{ background:var(--green); }
.dot-amber{ background:var(--amber); }
.cat-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; }
.cat-normal{ background:rgba(52,179,107,0.14); color:#1F8A52; }
.hero-time{ font-size:12px; color:var(--muted); margin-top:12px; text-align:center; }

.mini-bars{ display:flex; align-items:flex-end; justify-content:space-between; height:88px; gap:8px; margin-top:14px; }
.mini-bar{ flex:1; border-radius:999px; background:linear-gradient(180deg, var(--accent-light), var(--accent)); }
.mini-bar.emphasized{ box-shadow:0 0 0 6px rgba(240,59,71,0.18); }
.mini-days{ display:flex; justify-content:space-between; margin-top:8px; }
.mini-days span{ flex:1; text-align:center; font-size:10px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }

.btn-primary-phone{
  display:block; width:100%;
  background:var(--accent); color:#fff;
  font-size:16px; font-weight:700; text-align:center;
  padding:16px; border-radius:999px;
  box-shadow:0 10px 20px rgba(240,59,71,0.28);
}
.list-card{ padding:4px 18px; }
.list-row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--divider); gap:10px; }
.list-row:last-child{ border-bottom:none; }
.list-row-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.list-row-num{ font-size:18px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.list-row-pulse{ font-size:13px; color:var(--muted); display:inline-flex; align-items:center; margin-left:8px; font-variant-numeric:tabular-nums; }
.list-row-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.chevron{ width:9px; height:9px; flex-shrink:0; fill:none; stroke:var(--chevron); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

.tab-bar{
  flex-shrink:0;
  height:76px;
  background:#fff;
  border-top:1px solid #ECEDF6;
  display:flex; align-items:center; justify-content:space-around;
  padding-bottom:12px;
}
.tab-item{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--muted); min-width:0; padding:0 2px; }
.tab-item.active{ color:var(--accent); }
.tab-label{ font-size:10px; font-weight:700; white-space:nowrap; }
.tab-icon{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- section shell ---------- */
section{ scroll-margin-top:112px; }
.band{ padding:64px 0; }
@media (min-width:900px){ .band{ padding:92px 0; } }
.kicker{
  font-size:12px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--accent); margin:0 0 12px;
}
.band h2{
  font-size:29px;
  line-height:1.16;
  letter-spacing:-0.015em;
  font-weight:800;
  margin:0 0 12px;
  color:var(--ink);
  max-width:20ch;
}
@media (min-width:600px){ .band h2{ font-size:34px; } }
.band-sub{
  font-size:16px; line-height:25px; color:var(--page-muted);
  margin:0; max-width:52ch;
}
.hero-sub, .band-sub, .feature p, .privacy-card .lede, .pr-item p, .faq-a p, .cta p, .footer-legal{ text-wrap:pretty; }
.hero h1, .band h2, .privacy-card h2, .cta h2, .faq summary{ text-wrap:balance; }
.band-head{ margin-bottom:34px; }

/* ---------- feature cards ---------- */
.features{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.features > *{ min-width:0; }
@media (min-width:640px){ .features{ grid-template-columns:1fr 1fr; gap:18px; } }
@media (min-width:1000px){ .features{ grid-template-columns:repeat(3, 1fr); gap:20px; } }
.feature{
  background:var(--card);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  padding:24px 24px 26px;
}
.icon-well{
  width:44px; height:44px;
  border-radius:14px;
  background:var(--inset-alt);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink);
  margin-bottom:16px;
}
.icon-well svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.feature h3{ font-size:16.5px; font-weight:700; letter-spacing:-0.01em; margin:0 0 8px; color:var(--ink); }
.feature p{ font-size:14px; line-height:22px; color:var(--slate); margin:0; }

/* ---------- privacy ---------- */
.privacy-card{
  background:var(--card);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  padding:34px 24px 30px;
}
@media (min-width:760px){ .privacy-card{ padding:46px 48px 42px; } }
.privacy-top{ max-width:52ch; }
.privacy-well{
  width:46px; height:46px; border-radius:50%;
  background:var(--chip-selected-bg);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent);
  margin-bottom:20px;
}
.privacy-well svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.privacy-card h2{
  font-size:27px; line-height:1.18; letter-spacing:-0.015em; font-weight:800;
  margin:0 0 14px; color:var(--ink); max-width:18ch;
}
@media (min-width:600px){ .privacy-card h2{ font-size:32px; } }
.privacy-card .lede{ font-size:16px; line-height:26px; color:var(--slate); margin:0; }
.privacy-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:32px;
}
.privacy-grid > *{ min-width:0; }
@media (min-width:560px){ .privacy-grid{ grid-template-columns:1fr 1fr; gap:16px; } }
@media (min-width:940px){ .privacy-grid{ grid-template-columns:repeat(4, 1fr); } }
.pr-item{
  background:var(--inset);
  border-radius:20px;
  padding:18px 18px 20px;
}
.pr-check{
  width:22px; height:22px; border-radius:50%;
  background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.pr-check svg{ width:12px; height:12px; fill:none; stroke:#fff; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.pr-item h4{ font-size:14px; font-weight:700; margin:0 0 5px; color:var(--ink); }
.pr-item p{ font-size:13px; line-height:20px; color:var(--slate); margin:0; }

/* ---------- faq ---------- */
.faq-card{
  background:var(--card);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  padding:6px 22px;
}
@media (min-width:760px){ .faq-card{ padding:8px 34px; } }
.faq{ border-bottom:1px solid var(--divider); }
.faq:last-of-type{ border-bottom:none; }
.faq summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:19px 0;
  font-size:15.5px;
  line-height:23px;
  font-weight:700;
  color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::marker{ content:""; }
.faq-chev{
  width:13px; height:13px; flex-shrink:0; margin-top:5px;
  fill:none; stroke:var(--chevron); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .18s ease;
}
.faq[open] .faq-chev{ transform:rotate(180deg); stroke:var(--accent); }
.faq-a{ padding-block:0 22px; padding-inline:0 34px; margin-top:-4px; }
.faq-a p{ font-size:14.5px; line-height:24px; color:var(--slate); margin:0; max-width:74ch; }
.faq summary > span:first-child{ max-width:64ch; }
.support-line{
  margin-top:26px;
  background:var(--card);
  border-radius:22px;
  box-shadow:var(--shadow-soft);
  padding:20px 24px 22px;
  font-size:14.5px;
  line-height:25px;
  color:var(--slate);
}
.support-line a{ color:var(--accent); font-weight:700; overflow-wrap:break-word; }
.support-note{ display:block; font-size:12.5px; line-height:18px; color:var(--muted); margin-top:8px; }
.obf-email{ cursor:pointer; overflow-wrap:break-word; }
.faq-a a{ color:var(--accent); font-weight:700; }

/* email reveal pill: sits inline in running text without disturbing
   line-height, matches the site's small floating pills (hero-pill). */
.obf-email-btn{
  display:inline-block;
  vertical-align:baseline;
  font-family:var(--font);
  font-size:0.95em;
  font-weight:700;
  line-height:1.4;
  padding:2px 10px;
  border:none;
  border-radius:999px;
  background:#fff;
  box-shadow:var(--shadow-soft);
  color:var(--ink);
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}
.obf-email-btn:hover{ color:var(--accent); }
.obf-email-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- closing cta ---------- */
.cta{ text-align:center; padding:62px 0 66px; }
.cta h2{
  font-size:29px; line-height:1.15; letter-spacing:-0.015em; font-weight:800;
  margin:0 auto 12px; color:var(--ink); max-width:16ch;
}
@media (min-width:600px){ .cta h2{ font-size:36px; } }
.cta p{ font-size:15.5px; line-height:24px; color:var(--page-muted); margin:0 auto 26px; max-width:40ch; }
.cta .badge{ margin:0 auto; }

/* ---------- footer ---------- */
.site-footer{
  background:#FFFFFF;
  border-top:1px solid #ECEDF6;
  padding:36px 0 44px;
}
.footer-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 28px;
  margin-bottom:26px;
}
.footer-top > *{ min-width:0; }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-inline-end:auto; }
.footer-tag{ font-size:12.5px; line-height:18px; color:var(--page-muted); }
.footer-links{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.footer-links a{ font-size:13.5px; font-weight:600; color:var(--slate); }
.footer-links a:hover{ color:var(--ink); }
.footer-legal{ font-size:12px; line-height:19px; color:var(--page-muted); max-width:62ch; }
.footer-legal .copy{ display:block; margin-top:10px; font-weight:600; }

/* ---------- legal article shell (privacy / terms / impressum) ---------- */
.legal-shell{ padding:48px 0 76px; }
@media (min-width:900px){ .legal-shell{ padding:64px 0 92px; } }
.legal-card{
  background:var(--card);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  padding:36px 24px 40px;
  max-width:72ch;
  margin:0 auto;
}
.legal-card article{ overflow-wrap:anywhere; }
@media (min-width:760px){ .legal-card{ padding:52px 56px 56px; } }
.legal-card h1{
  font-size:29px;
  line-height:1.16;
  letter-spacing:-0.015em;
  font-weight:800;
  margin:0 0 8px;
  color:var(--ink);
}
@media (min-width:600px){ .legal-card h1{ font-size:34px; } }
.legal-updated{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  margin:0 0 30px;
}
.legal-card article h2{
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.01em;
  margin:30px 0 10px;
  color:var(--ink);
}
.legal-card article h2:first-child{ margin-top:0; }
.legal-card article p{
  font-size:15px;
  line-height:25px;
  color:var(--slate);
  margin:0 0 16px;
}
.legal-card article ul,
.legal-card article ol{
  margin:0 0 16px;
  padding-inline-start:22px;
  color:var(--slate);
  font-size:15px;
  line-height:25px;
}
.legal-card article li{ margin-bottom:6px; }
.legal-card article a{ color:var(--accent); font-weight:700; overflow-wrap:break-word; }
.legal-card article em{ color:var(--muted); font-style:italic; }

/* ---------- 404 ---------- */
.notfound-shell{ padding:80px 0 96px; text-align:center; }
@media (min-width:900px){ .notfound-shell{ padding:120px 0 140px; } }
.notfound-card{
  max-width:52ch;
  margin:0 auto;
}
.notfound-mark{ margin:0 auto 22px; display:block; width:56px; height:56px; }
.notfound-shell h1{
  font-size:30px; line-height:1.18; letter-spacing:-0.015em; font-weight:800;
  margin:0 0 12px; color:var(--ink);
}
@media (min-width:600px){ .notfound-shell h1{ font-size:36px; } }
.notfound-shell p{ font-size:16px; line-height:25px; color:var(--page-muted); margin:0 0 28px; }
.notfound-home{
  display:inline-flex;
  align-items:center;
  height:48px;
  padding:0 24px;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-size:15px;
  font-weight:700;
  box-shadow:0 10px 20px rgba(240,59,71,0.28);
}

/* ---------- contact form ---------- */
.contact-card{
  background:var(--card);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-soft);
  padding:34px 24px 30px;
  margin-bottom:34px;
}
@media (min-width:760px){ .contact-card{ padding:46px 48px 42px; } }
.contact-card h2{
  font-size:23px;
  line-height:1.2;
  letter-spacing:-0.015em;
  font-weight:800;
  margin:0 0 20px;
  color:var(--ink);
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:52ch;
}
.form-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.form-label{ font-size:13.5px; font-weight:700; color:var(--ink); }
.form-input{
  width:100%;
  font-family:var(--font);
  font-size:15px;
  color:var(--ink);
  background:var(--inset);
  border:1px solid var(--chip-border);
  border-radius:14px;
  padding-block:12px;
  padding-inline:14px;
}
.form-input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.form-textarea{ min-height:120px; line-height:22px; resize:vertical; }
.form-hp{
  position:absolute;
  inset-inline-start:0;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
.form-submit{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  height:48px;
  padding-inline:26px;
  border:none;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  font-family:var(--font);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(240,59,71,0.28);
}
.form-submit:disabled{ opacity:0.6; cursor:default; }
.form-status{ font-size:13.5px; line-height:20px; margin:10px 0 0; color:var(--red-cat); font-weight:600; }
.contact-success{ font-size:15.5px; line-height:25px; color:var(--slate); margin:0; }

/* ---------- support page intro ---------- */
.support-hero{ padding:44px 0 8px; }
@media (min-width:900px){ .support-hero{ padding:64px 0 12px; } }
.support-hero .kicker{ margin-bottom:12px; }
.support-hero h1{
  font-size:32px; line-height:1.14; letter-spacing:-0.015em; font-weight:800;
  margin:0 0 14px; color:var(--ink); max-width:18ch;
}
@media (min-width:600px){ .support-hero h1{ font-size:40px; } }
.support-hero p{ font-size:16px; line-height:25px; color:var(--page-muted); margin:0; max-width:52ch; }