/* wristpull.de — "Calm" design system.
   Off-white, soft cards, Source Sans 3. Red = pulse & primary action.
   Green = local & safe. Nothing else shouts.
   Fonts are self-hosted (fonts/, from @fontsource/source-sans-3) —
   this site makes zero external requests. */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/source-sans-3-latin-400-normal.woff2) format("woff2");
  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:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/source-sans-3-latin-600-normal.woff2) format("woff2");
  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:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/source-sans-3-latin-700-normal.woff2) format("woff2");
  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:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/source-sans-3-latin-400-italic.woff2) format("woff2");
  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:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/source-sans-3-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/source-sans-3-latin-ext-600-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/source-sans-3-latin-ext-700-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/source-sans-3-latin-ext-400-italic.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bg:#fafaf8; --panel:#ffffff; --tint:#f1f3ef; --line:#e6e5e0;
  --ink:#242b33; --ink-2:#5c6670; --red:#ce3a32; --red-soft:#fbeeed;
  --green:#27745a; --green-soft:#e9f2ee;
  --r:14px; color-scheme: light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#15181c; --panel:#1c2026; --tint:#20252b; --line:#2e343b;
  --ink:#e8eaec; --ink-2:#9aa3ac; --red:#e05a52; --red-soft:#3a2523;
  --green:#5aa98b; --green-soft:#1f3029; color-scheme: dark; }}
:root[data-theme="dark"]{
  --bg:#15181c; --panel:#1c2026; --tint:#20252b; --line:#2e343b;
  --ink:#e8eaec; --ink-2:#9aa3ac; --red:#e05a52; --red-soft:#3a2523;
  --green:#5aa98b; --green-soft:#1f3029; color-scheme: dark; }
*{box-sizing:border-box} html,body{margin:0}
body{background:var(--bg);color:var(--ink);
  font:400 17px/1.65 "Source Sans 3","Segoe UI",system-ui,sans-serif;
  padding-inline:max(18px,env(safe-area-inset-left));}
a{color:var(--green);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto}
h1,h2,h3{line-height:1.15;margin:0;font-weight:700;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.8vw,3.3rem)} h2{font-size:clamp(1.5rem,2.8vw,2.1rem)} h3{font-size:1.1rem}
p{margin:0}.dim{color:var(--ink-2)}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;background:var(--tint);padding:.1em .4em;border-radius:5px}
pre{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;
  overflow-x:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86rem;line-height:1.55}
pre code{background:none;padding:0}
pre .c{color:var(--ink-2)} pre .p{color:var(--red)}
section{padding-block:clamp(2.8rem,6vw,5rem)}
.kicker{color:var(--red);font-weight:700;font-size:.95rem;letter-spacing:.01em}
.sec-head{display:grid;gap:.7rem;margin-bottom:2rem;max-width:780px}
.sec-head .dim b{color:var(--ink)}

/* top bar */
.topbar{display:flex;align-items:center;gap:1rem;padding-block:1rem;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.2rem;color:var(--ink);text-decoration:none}
.brand svg{width:1.5em;height:1.5em}
.topbar nav{margin-left:auto;display:flex;gap:1.15rem;flex-wrap:wrap;align-items:center;
  overflow-x:auto;scrollbar-width:none}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{color:var(--ink-2);text-decoration:none;font-size:.95rem;white-space:nowrap;padding-block:.3rem}
.topbar nav a:hover{color:var(--ink)}
.topbar nav a[aria-current]{color:var(--ink);font-weight:600;border-bottom:2px solid var(--red)}
@media(max-width:760px){.topbar{flex-wrap:nowrap}.topbar nav{flex-wrap:nowrap;justify-content:flex-start}}

/* buttons & badges */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.3rem;border-radius:999px;
  text-decoration:none;font-weight:600;font-size:.98rem;min-height:44px}
.btn.primary{background:var(--red);color:#fff}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{border:1.5px solid var(--line);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink-2)}
.ctas{display:flex;gap:.8rem;flex-wrap:wrap}
.badge{display:inline-flex;gap:.45rem;align-items:center;background:var(--green-soft);color:var(--green);
  border-radius:999px;padding:.3rem .9rem;font-size:.86rem;font-weight:600}
.status{display:inline-flex;gap:.45rem;align-items:center;background:var(--panel);border-radius:999px;
  padding:.3rem .9rem;font-size:.85rem;font-weight:600;color:var(--green)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}
@media (prefers-reduced-motion: reduce){.status i{animation:none}}

/* page hero (subpages) */
.phero{display:grid;gap:1rem;padding-block:clamp(2.2rem,5vw,3.6rem) 0;max-width:820px}
.phero .lede{font-size:1.15rem;color:var(--ink-2)}
.phero .lede b{color:var(--ink)}

/* cards & grids */
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.3rem;
  display:grid;gap:.45rem;align-content:start;min-width:0}
.card p{font-size:.93rem;color:var(--ink-2)}
.card .claim{color:var(--ink);font-weight:600}
.ic{width:38px;height:38px;border-radius:10px;background:var(--red-soft);color:var(--red);display:grid;place-items:center}
.ic.g{background:var(--green-soft);color:var(--green)}

/* soft panel */
.soft{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:clamp(1.4rem,3.5vw,2.4rem)}
.softer{background:var(--green-soft);border-radius:calc(var(--r) + 6px);padding:clamp(1.8rem,4.5vw,3rem)}
.note{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:10px;
  padding:1rem 1.2rem}
.note.g{border-left-color:var(--green)}

/* tables */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.tablewrap table{border-collapse:collapse;width:100%;font-size:.94rem;min-width:560px}
.tablewrap th,.tablewrap td{text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.tablewrap thead th{font-size:.8rem;color:var(--ink-2);background:var(--tint);font-weight:600}
.tablewrap tr:last-child td{border-bottom:0}
.yes{color:var(--green);font-weight:600}.no{color:var(--ink-2)}

/* dashboard mock */
.dash{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 18px 40px -28px rgba(36,43,51,.35);overflow:hidden}
.dash .dbar{display:flex;gap:1rem;align-items:center;padding:.8rem 1.1rem;border-bottom:1px solid var(--line);font-size:.86rem}
.dash .dbar b{font-weight:600}
.dash .dbar .tab{color:var(--ink-2)} .dash .dbar .tab.on{color:var(--green);font-weight:600}
.dash .dbar .lock{margin-left:auto;color:var(--green);display:inline-flex;gap:.35rem;align-items:center;font-weight:600;white-space:nowrap}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.tile{background:var(--panel);padding:.85rem 1rem}
.tile small{display:block;color:var(--ink-2);font-size:.76rem}
.tile b{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}
.tile .delta{font-size:.78rem;color:var(--green);font-weight:600}
.chart{padding:1rem 1.1rem 1.2rem}
.chart h4{margin:0 0 .5rem;font-size:.84rem;font-weight:600;color:var(--ink-2)}
.chart svg{width:100%;height:auto;display:block}
@media(max-width:520px){.tiles{grid-template-columns:repeat(2,1fr)}}

/* data split (what leaves) */
.pillar2{display:grid;gap:1rem}
@media(min-width:860px){.pillar2{grid-template-columns:1fr auto 1fr;align-items:stretch}}
.datacard{border-radius:var(--r);padding:1.4rem 1.5rem;display:grid;gap:.6rem;align-content:start}
.datacard.raw{background:var(--tint);border:1px solid var(--line)}
.datacard.extract{background:var(--green-soft);border:1px solid color-mix(in srgb,var(--green) 25%,transparent)}
.datacard ul{margin:0;padding-left:1.1rem;color:var(--ink-2)}
.datacard li{margin:.2rem 0}
.datacard .sum{font-size:.9rem;color:var(--ink-2)}
.gate{display:grid;place-items:center;gap:.4rem;padding:.6rem;color:var(--ink-2);font-size:.85rem;text-align:center}
.gate .sw{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.45rem .9rem;display:flex;gap:.6rem;font-size:.84rem}
.gate .sw b{color:var(--green)} .gate .sw span{color:var(--ink-2)}

/* screenshots */
.shot{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#101418}
.shot img{display:block;width:100%}
figure{margin:0;display:grid;gap:.5rem}
figcaption{font-size:.9rem;color:var(--ink-2)}

/* timeline */
.timeline{display:grid;border-left:2px solid var(--line);max-width:860px}
.milestone{padding:1.1rem 0 1.1rem 1.5rem;position:relative;display:grid;gap:.35rem}
.milestone::before{content:"";position:absolute;left:-6px;top:1.55rem;width:10px;height:10px;border-radius:50%;
  background:var(--line);border:2px solid var(--bg)}
.milestone.live::before{background:var(--green)}
.milestone.active::before{background:var(--red)}
.milestone .tstat{font-size:.8rem;font-weight:700;color:var(--ink-2)}
.milestone.live .tstat{color:var(--green)}
.milestone.active .tstat{color:var(--red)}
.milestone p{font-size:.94rem;color:var(--ink-2);max-width:66ch}

/* steps */
.steps{display:grid;gap:1.2rem;counter-reset:step;max-width:780px}
.step{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.9rem;counter-increment:step}
.step::before{content:counter(step);color:var(--red);font-weight:700;border:1.5px solid var(--line);
  border-radius:999px;width:2rem;height:2rem;display:grid;place-items:center;margin-top:.1rem;background:var(--panel)}
.step h3{margin-bottom:.3rem}
.step p{font-size:.94rem;color:var(--ink-2);margin-bottom:.55rem}

/* story */
.story{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.6rem,4vw,2.8rem);display:grid;gap:1rem;max-width:860px}
.story p{max-width:68ch}
.sig{display:flex;gap:.9rem;align-items:center;margin-top:.4rem}
.sig .avatar{width:46px;height:46px;border-radius:50%;background:var(--green-soft);color:var(--green);
  display:grid;place-items:center;font-weight:700;flex:none}
.sig small{color:var(--ink-2)}

/* footer */
footer{border-top:1px solid var(--line);padding-block:2.4rem calc(2.4rem + env(safe-area-inset-bottom));
  color:var(--ink-2);font-size:.92rem;display:grid;gap:.5rem}
footer .row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer b{color:var(--ink)}