/* self-hosted webfonts — no request leaves this site for them */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-condensed-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:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-condensed-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+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}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/barlow-condensed-latin-800-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:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/barlow-condensed-latin-ext-800-normal.woff2) format('woff2');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}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/outfit-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:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/outfit-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+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}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/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:400;font-display:swap;src:url(/assets/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+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}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/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:600;font-display:swap;src:url(/assets/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+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}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/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:italic;font-weight:400;font-display:swap;src:url(/assets/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+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}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-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+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}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');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{
  --ground:#F5F4EF; --paper:#FFFFFF; --ink:#1F2B25; --text:#2F3833; --muted:#6B7169;
  --line:#D8D9CF; --accent:#E4601F; --accent-ink:#FFFFFF; --stamp:#B3261E; --tint:#EDEFE6; --good:#5F7048; --olive:#7A8A5C; --olive-ink:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#161B18; --paper:#1F2521; --ink:#EDF0E8; --text:#D5DAD0; --muted:#9AA294;
    --line:#333B35; --accent:#F07A3A; --accent-ink:#161B18; --stamp:#E0655C; --tint:#262D28; --good:#9DB37E; --olive:#8E9E6E; --olive-ink:#161B18;
  }
}
:root[data-theme="dark"]{
  --ground:#161B18; --paper:#1F2521; --ink:#EDF0E8; --text:#D5DAD0; --muted:#9AA294;
  --line:#333B35; --accent:#F07A3A; --accent-ink:#161B18; --stamp:#E0655C; --tint:#262D28; --good:#9DB37E; --olive:#8E9E6E; --olive-ink:#161B18;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--text);font-family:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;font-size:18px;line-height:1.55}
h1,h2,h3{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;color:var(--ink);text-transform:uppercase;letter-spacing:.01em;line-height:.95;margin:0;text-wrap:balance}
h1{font-size:clamp(52px,8vw,104px);font-weight:800}
h2{font-size:clamp(36px,4.5vw,56px);font-weight:800}
h3{font-size:26px;font-weight:600;text-transform:none;letter-spacing:0}
p{margin:0}
a{color:var(--ink)}
.mono{font-family:"IBM Plex Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500}
.lede{font-size:21px;max-width:60ch;color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--accent-ink);font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:20px;letter-spacing:.04em;padding:14px 22px;text-decoration:none;border:2px solid var(--accent)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* perforated section rules – the tear-off edge of a work-order pad */
.perf{border:0;height:0;border-top:2px dashed var(--olive);opacity:.6;margin:0}
section{padding:72px 0}

/* nav */
nav{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:2px solid var(--ink)}
.brand{font-family:"Outfit","Poppins",Arial,sans-serif;font-weight:700;font-size:34px;letter-spacing:-.03em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:baseline;line-height:1}
.brand i{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--olive);margin-left:.07em;transform:translateY(-.01em)}
.brand.big{font-size:clamp(72px,11vw,140px)}
.brand.big i{margin-left:.05em}
nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;font-weight:600}
nav a{text-decoration:none}
@media(max-width:720px){nav ul{display:none}}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:64px 0 72px}
@media(max-width:860px){.hero{grid-template-columns:1fr}}
.hero .lede{margin:24px 0 32px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero .sub{margin-top:18px;font-size:15px;color:var(--muted)}
.claim{font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:22px;color:var(--olive);margin-top:12px}
.sticker{position:absolute;right:-26px;top:-70px;width:150px;height:150px;z-index:2;border-radius:50%;background:var(--olive);color:var(--olive-ink);display:flex;align-items:center;justify-content:center;text-align:center;font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:19px;line-height:1.1;padding:18px;transform:rotate(6deg);box-shadow:0 0 0 4px var(--ground)}
.sticker u{text-decoration:none;border-bottom:2px solid var(--olive-ink);padding-bottom:2px;display:inline-block;margin-top:6px}
.logwrap{position:relative;margin-top:56px}

/* office log panel */
.log{background:var(--paper);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.log header{display:flex;justify-content:space-between;align-items:baseline;padding:14px 18px;border-bottom:2px solid var(--ink);font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-weight:800;font-size:20px;color:var(--ink)}
.log header span{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:400;text-transform:none;color:var(--muted)}
.log ol{list-style:none;margin:0;padding:0}
.log li{display:grid;grid-template-columns:58px 1fr auto;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line);align-items:start;font-size:16px}
.log li:last-child{border-bottom:0}
.log time{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--muted);padding-top:2px}
.log b{color:var(--ink);font-weight:600}
.log small{display:block;color:var(--muted);font-size:14px}
.tag{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag.done{border-color:var(--good);color:var(--good)}
.tag.paid{border-color:var(--stamp);color:var(--stamp);font-weight:500;transform:rotate(-6deg)}
.log footer{padding:12px 18px;background:var(--tint);font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.log footer strong{color:var(--ink);font-weight:500}

/* pain */
.pain{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:860px){.pain{grid-template-columns:1fr}}
.pain h2{margin-bottom:20px}
.figures{display:grid;gap:0;border-top:2px solid var(--ink)}
.figures div{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.figures .n{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:56px;color:var(--ink);line-height:1;min-width:150px}
.figures .n em{font-style:normal;color:var(--accent)}
.figures p{font-size:16px;color:var(--text)}
.figures small{color:var(--muted);font-size:13px}

/* tasks */
.tasks{display:grid;grid-template-columns:repeat(2,1fr);gap:0 48px;margin-top:36px;border-top:2px solid var(--ink)}
@media(max-width:720px){.tasks{grid-template-columns:1fr}}
.tasks div{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:16.5px}
.tasks b{color:var(--ink);font-weight:600}
.tasks span{color:var(--muted)}

/* steps – a real sequence, so numbers carry meaning */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{background:var(--paper);border:2px solid var(--ink);padding:24px}
.step .k{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:44px;color:var(--olive);line-height:1}
.step h3{margin:10px 0 8px}
.step p{font-size:16.5px}

/* pricing set like an invoice */
.plans{margin-top:36px;background:var(--paper);border:2px solid var(--ink);overflow-x:auto}
.plans table{width:100%;border-collapse:collapse;min-width:720px}
.plans th{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--muted);text-align:left;padding:14px 18px;border-bottom:2px solid var(--ink)}
.plans td{padding:20px 18px;border-bottom:1px solid var(--line);vertical-align:top;font-size:16.5px}
.plans tr:last-child td{border-bottom:0}
.plans .name{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:28px;color:var(--ink);line-height:1}
.plans .name small{display:block;font-family:"Source Sans 3",sans-serif;text-transform:none;font-weight:400;font-size:15px;color:var(--muted);margin-top:6px;letter-spacing:0}
.plans .price{font-family:"IBM Plex Mono",monospace;font-size:24px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.plans .price small{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
.plans .rec td{background:var(--tint)}
.plans .rec .name::after{content:"most chosen";font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-left:10px;vertical-align:middle}
.plans ul{margin:0;padding-left:18px}
.plans li{margin:2px 0}
.fine{margin-top:16px;font-size:14.5px;color:var(--muted);max-width:75ch}

/* languages */
.lang{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:860px){.lang{grid-template-columns:1fr}}
.stampcard{background:var(--paper);border:2px solid var(--ink);padding:28px;position:relative}
.stampcard .row{display:grid;grid-template-columns:70px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.stampcard .row:last-of-type{border-bottom:0}
.stampcard .code{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:32px;color:var(--olive);line-height:1}
.stampcard .row p{font-size:16px}
.stamp{position:absolute;right:22px;top:-16px;transform:rotate(7deg);font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive-ink);border:2px solid var(--olive);padding:6px 10px;background:var(--olive)}

/* faq */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:24px 48px;margin-top:36px}
@media(max-width:860px){.faq{grid-template-columns:1fr}}
.faq h3{font-size:20px;margin-bottom:6px}
.faq p{font-size:16.5px}

/* cta */
.pilot{background:var(--ink);color:var(--ground);padding:72px 0}
.pilot h2,.pilot h3{color:var(--ground)}
.pilot .grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:860px){.pilot .grid{grid-template-columns:1fr}}
.pilot p{color:var(--ground);opacity:.85}
.pilot form{display:grid;gap:12px;background:var(--paper);padding:24px;border:2px solid var(--ground)}
.pilot label{display:grid;gap:6px;font-size:14px;color:var(--muted);font-family:"IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase}
.pilot input,.pilot select{font:inherit;font-family:"Source Sans 3",sans-serif;font-size:17px;padding:10px 12px;border:1.5px solid var(--line);background:var(--ground);color:var(--text)}
.pilot .btn{justify-content:center;margin-top:6px;border-color:var(--accent)}
.pilot .note{font-size:13.5px;color:var(--muted);opacity:1}
.pilot .eyebrow{color:var(--olive)}
.plans .rec .name::after{color:var(--olive)}
footer.site{padding:28px 0;font-size:14px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
@media (prefers-reduced-motion:no-preference){
  .log li{animation:rise .5s ease both}
  .log li:nth-child(2){animation-delay:.08s}.log li:nth-child(3){animation-delay:.16s}.log li:nth-child(4){animation-delay:.24s}.log li:nth-child(5){animation-delay:.32s}
  @keyframes rise{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
}

.langs{display:flex;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.08em}.langs button,.langs a{font:inherit;cursor:pointer;background:transparent;padding:6px 9px;border:1.5px solid transparent;color:var(--muted)}.langs button,.langs a.on{border-color:var(--olive);color:var(--ink);background:var(--tint)}nav .right{display:flex;align-items:center;gap:18px}nav ul{gap:18px;font-size:16px}.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}@media(max-width:860px){.trust{grid-template-columns:1fr}}.trust div{background:var(--paper);border:2px solid var(--ink);padding:24px;border-top:6px solid var(--olive)}.trust h3{margin:0 0 8px;font-size:22px}.trust p{font-size:16.5px}.more{margin-top:18px;font-size:15px;color:var(--muted)}.plans .hrs{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:22px;color:var(--ink);display:block;margin-bottom:4px}.plans td ul{margin-top:6px}.msg{display:none;padding:12px 14px;border:2px solid var(--olive);font-size:15.5px;color:var(--ink);background:var(--tint)}.msg.err{border-color:var(--stamp)}.msg.show{display:block}.hp{position:absolute;left:-9999px}.plans .rec .name::after{content:attr(data-rec);display:block;margin:8px 0 0;white-space:nowrap}.plans .price .setup{display:block;font-size:12.5px;color:var(--muted);margin-top:6px;white-space:normal}.keep{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}@media(max-width:860px){.keep{grid-template-columns:1fr}}.keep div{background:var(--paper);border:2px solid var(--ink);padding:22px 24px;border-left:8px solid var(--accent)}.keep div.g{border-left-color:var(--olive)}.keep h3{font-size:24px;margin:0 0 8px}.keep p{font-size:16.5px}.keep ul{margin:10px 0 0;padding-left:18px;font-size:16px}.keep li{margin:3px 0}.missions{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;margin-top:36px;border-top:2px solid var(--ink)}@media(max-width:860px){.missions{grid-template-columns:1fr}}.missions div{padding:18px 0;border-bottom:1px solid var(--line)}.missions b{display:block;color:var(--ink);font-weight:600;font-size:17px}.missions span{color:var(--muted);font-size:15.5px}.log header{flex-wrap:wrap;gap:4px 12px;padding-right:110px}.log header span{white-space:nowrap}@media(max-width:720px){nav ul{display:none}}

.h1sub{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:clamp(24px,3vw,34px);color:var(--ink);text-transform:uppercase;letter-spacing:.02em;line-height:1.05;margin-top:10px}
.cancel{display:inline-flex;align-items:center;gap:8px;font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);padding:14px 4px}
.cancel::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--olive)}
.promises{display:grid;grid-template-columns:1.05fr repeat(3,1fr);gap:0;border:2px solid var(--ink);background:var(--paper);margin-top:8px;align-items:stretch}
@media(max-width:1080px){.promises{grid-template-columns:1fr 1fr}}@media(max-width:640px){.promises{grid-template-columns:1fr}}
.promises .claimcell{background:var(--ink);display:flex;align-items:center;padding:24px 26px}.promises .claimcell .claim{margin:0;color:var(--ground);font-size:clamp(21px,1.7vw,26px);line-height:1.08;letter-spacing:.02em;text-wrap:balance;hyphens:none}
.promises div{padding:20px 22px;border-right:2px solid var(--ink)}.promises div:last-child{border-right:0}
@media(max-width:1080px){.promises div{border-bottom:2px solid var(--ink)}.promises div:nth-child(2n){border-right:0}.promises div:nth-last-child(-n+2){border-bottom:0}}@media(max-width:640px){.promises div{border-right:0;border-bottom:2px solid var(--ink)}.promises div:last-child{border-bottom:0}}
.promises b{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:18px;line-height:1.16;color:var(--ink);letter-spacing:.015em;margin-bottom:6px;text-wrap:balance}
.promises span{display:block;font-size:15.5px;line-height:1.45;color:var(--muted)}
h2.big{font-size:clamp(44px,6vw,80px)}
.flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 30px;margin-top:40px;border-top:2px solid var(--ink)}
@media(max-width:1000px){.flow{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.flow{grid-template-columns:1fr}}
.flow div{padding:20px 0 22px 0;border-bottom:1px solid var(--line);position:relative}
.flow div{border-top:4px solid var(--olive);margin-top:-2px}
.flow .n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--ground);font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:16px;flex:none}
.flow b{display:flex;align-items:center;gap:8px;font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(15px,1.5vw,20px);color:var(--ink);margin:0 0 10px;line-height:1;min-width:0;padding-right:16px;align-items:flex-start;line-height:1.05}
.flow div::after{content:"";position:absolute;right:-20px;top:28px;width:10px;height:10px;border-top:3px solid var(--accent);border-right:3px solid var(--accent);transform:rotate(45deg)}
.flow div:last-child::after{right:2px;top:24px;width:7px;height:14px;border-top:0;border-right:3px solid var(--olive);border-bottom:3px solid var(--olive);transform:rotate(45deg)}
@media(max-width:1000px){.flow div::after{display:none}}
.flow ul{margin:0;padding-left:16px;font-size:15px;color:var(--text)}.flow li{margin:3px 0}
.report{margin-top:36px;background:var(--paper);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.report header{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;padding:14px 20px;border-bottom:2px solid var(--ink);font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-weight:800;font-size:20px;color:var(--ink)}
.report header span{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:400;text-transform:none;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:2px solid var(--ink)}
@media(max-width:860px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpis>div{padding:18px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.kpis>div:nth-child(4n){border-right:0}
.kpis .v{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:36px;white-space:nowrap;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.kpis .v small{font-size:18px;color:var(--muted);font-weight:600;margin-left:4px}
.kpis .l{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.kpis .hi .v{color:var(--accent)}
.rlist{padding:6px 20px 14px;font-size:15.5px}
.rlist div{display:grid;grid-template-columns:170px 1fr auto;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);align-items:baseline}
.rlist div:last-child{border-bottom:0}
.rlist .d{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--muted)}
.rlist .a{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--ink);white-space:nowrap}
.rlist b{color:var(--ink);font-weight:600}
.bar{height:8px;background:var(--tint);margin:12px 20px 18px;position:relative}.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--olive);width:88%}
.bar span{position:absolute;right:0;top:12px;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}
.hours{margin-top:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:2px solid var(--ink);background:var(--paper)}
@media(max-width:860px){.hours{grid-template-columns:1fr 1fr}}@media(max-width:560px){.hours{grid-template-columns:1fr}}
.hours div{padding:18px 20px;border-right:1px solid var(--line)}.hours div:last-child{border-right:0}
.hours b{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:20px;color:var(--ink);margin-bottom:6px}
.hours p{font-size:15.5px}
.cmp{margin-top:36px;background:var(--paper);border:2px solid var(--ink);overflow-x:auto}
.cmp table{width:100%;border-collapse:collapse;min-width:720px;table-layout:fixed}.cmp col.c0{width:25%}.cmp col.c1{width:25%}.cmp col.c2{width:25%}.cmp col.c3{width:25%}
.cmp th{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:20px;color:var(--ink);text-align:left;padding:14px 16px;border-bottom:2px solid var(--ink)}
.cmp th:first-child{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;font-weight:500;color:var(--muted);text-transform:uppercase;vertical-align:bottom}
.cmp th.m{background:var(--tint);border-top:6px solid var(--olive);text-transform:none;font-family:"Outfit","Poppins",Arial,sans-serif;font-size:24px;letter-spacing:-.03em}
.cmp td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:15px;vertical-align:top;line-height:1.4}
.cmp td:first-child{color:var(--ink);font-weight:600;font-size:14.5px}
.cmp td.m{background:var(--tint);color:var(--ink);font-weight:600}
.cmp tr:last-child td{border-bottom:0}
.fine{font-size:13.5px}
.plans .price .setup{font-size:13px;color:var(--ink)}
.voice{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;margin-top:40px}
@media(max-width:860px){.voice{grid-template-columns:1fr}.voice .arrow{transform:rotate(90deg);justify-self:center}}
.phone{background:var(--paper);border:2px solid var(--ink);padding:18px 18px 20px;box-shadow:8px 8px 0 var(--ink)}
.phone .from{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.bubble{background:var(--tint);border-radius:18px 18px 18px 4px;padding:12px 14px;display:flex;align-items:center;gap:10px}
.bubble .play{width:34px;height:34px;border-radius:50%;background:var(--olive);flex:none;position:relative}
.bubble .play::after{content:"";position:absolute;left:13px;top:10px;border-left:12px solid var(--olive-ink);border-top:7px solid transparent;border-bottom:7px solid transparent}
.wave{display:flex;align-items:center;gap:3px;height:28px;flex:1}
.wave i{width:3px;background:var(--ink);border-radius:2px;opacity:.75}
.bubble .t{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}
.transcript{margin-top:12px;font-size:15px;color:var(--text);font-style:italic;line-height:1.45}
.transcript::before{content:"“"}.transcript::after{content:"”"}
.voice .arrow{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:40px;color:var(--accent);text-align:center;line-height:1}
.voice .arrow small{display:block;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.offer{background:var(--paper);border:2px solid var(--ink);padding:20px 22px;box-shadow:8px 8px 0 var(--olive);font-size:14.5px}
.offer .head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:10px}
.offer .head b{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:22px;color:var(--ink)}
.offer .head span{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--muted)}
.offer table{width:100%;border-collapse:collapse}
.offer td{padding:5px 0;border-bottom:1px solid var(--line)}
.offer td:last-child{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.offer tr.sum td{border-bottom:0;font-weight:600;color:var(--ink);padding-top:10px}
.offer .stampd{display:inline-block;margin-top:12px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--olive);border:1.5px solid var(--olive);padding:4px 8px;transform:rotate(-3deg)}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;margin-top:36px}
@media(max-width:860px){.rules{grid-template-columns:1fr}}
.rules .ex{display:grid;gap:0;border-top:2px solid var(--ink)}
.rules .ex>div{padding:16px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.rules .ex b{display:block;color:var(--ink);font-weight:600;font-size:17px}
.rules .ex span{color:var(--muted);font-size:15.5px}
.rules .ex .ok{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:15px;color:var(--olive);padding-top:3px;white-space:nowrap}
.pb{background:var(--paper);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.pb header{padding:14px 18px;border-bottom:2px solid var(--ink);font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;font-weight:800;font-size:20px;color:var(--ink);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pb header span{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:400;text-transform:none;color:var(--muted)}
.pb .row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line);font-size:15.5px}
.pb .row:last-child{border-bottom:0}
.pb .row b{display:block;color:var(--ink);font-weight:600}
.pb .row small{display:block;color:var(--muted);font-size:13.5px}
.sw{width:44px;height:24px;border-radius:12px;background:var(--line);position:relative;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--paper)}
.sw.on{background:var(--olive)}.sw.on::after{left:23px}
.pb .val{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink);background:var(--tint);padding:4px 8px;white-space:nowrap}
.pb footer{padding:12px 18px;background:var(--tint);font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted)}


/* ---- v2 layout */
.page{display:none}.page.on{display:block}
nav{position:sticky;top:0;background:var(--ground);z-index:20}
nav .cta-nav{font-size:16px;padding:10px 16px}
@media(max-width:860px){nav .cta-nav{display:none}}
.hero2{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:72px 0 56px}
@media(max-width:900px){.hero2{grid-template-columns:1fr;padding-top:48px}}
.hero2 h1{font-size:clamp(46px,6.2vw,82px);line-height:.92}
.hero2 .h1sub{margin-top:14px}
.hero2 .lede{font-size:20px;margin:22px 0 28px;max-width:52ch}
.proof{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:14.5px;color:var(--muted)}
.proof span::before{content:"✓";color:var(--olive);font-weight:700;margin-right:6px}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
@media(max-width:900px){.benefits{grid-template-columns:repeat(2,1fr)}}@media(max-width:540px){.benefits{grid-template-columns:1fr}}
.benefit{background:var(--paper);border:2px solid var(--ink);padding:22px 20px 20px;position:relative}
.benefit .ic{width:40px;height:40px;border-radius:50%;background:var(--olive);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.benefit .ic svg{width:20px;height:20px;stroke:var(--olive-ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.benefit b{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:24px;color:var(--ink);line-height:1;margin-bottom:8px}
.benefit p{font-size:15.5px}
.sec{padding:64px 0}
.sec h2{font-size:clamp(34px,4.2vw,52px)}
.sec .lede{margin-top:14px;font-size:19px}
/* accordion */
.acc{margin-top:28px;border-top:2px solid var(--ink)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;padding:16px 0;font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:26px;color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary .k{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--ground);font-size:16px;display:flex;align-items:center;justify-content:center;font-family:"IBM Plex Mono",monospace;font-weight:500}
.acc summary .pl{width:28px;height:28px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;transition:transform .2s}
.acc details[open] summary .pl{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.acc .body{padding:0 0 18px 60px;font-size:16.5px;color:var(--text);max-width:70ch}
.acc .body ul{margin:0;padding-left:18px}.acc .body li{margin:4px 0}
.acc.faq summary{font-family:"Source Sans 3",sans-serif;text-transform:none;font-weight:600;font-size:19px;grid-template-columns:1fr auto;letter-spacing:0}
.acc.faq .body{padding-left:0}
@media(prefers-reduced-motion:no-preference){.acc .body{animation:fade .25s ease}}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* calculator */
.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;margin-top:28px;background:var(--paper);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
@media(max-width:860px){.calc{grid-template-columns:1fr}}
.calc .in{padding:28px}.calc .out{padding:28px;background:var(--ink);color:var(--ground)}
.calc label{display:block;font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.calc label:first-child{margin-top:0}
.calc .val{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:34px;color:var(--ink);line-height:1;margin-bottom:6px}
.calc input[type=range]{width:100%;accent-color:var(--accent)}
.calc .out .l{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--olive);margin-top:18px}
.calc .out .l:first-child{margin-top:0}
.calc .out .v{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:44px;line-height:1;color:var(--ground);font-variant-numeric:tabular-nums}
.calc .out .v.hi{color:var(--accent)}
.calc .out p{font-size:14px;opacity:.8;margin-top:16px}
.calc .out .btn{margin-top:18px}
/* price teaser */
.teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
@media(max-width:860px){.teaser{grid-template-columns:1fr}}
.tcard{background:var(--paper);border:2px solid var(--ink);padding:24px}
.tcard.rec{border-color:var(--accent);box-shadow:6px 6px 0 var(--accent)}
.tcard .nm{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:26px;color:var(--ink);line-height:1}
.tcard .pr{font-family:"IBM Plex Mono",monospace;font-size:26px;color:var(--ink);margin:10px 0 2px}
.tcard .pr small{font-size:13px;color:var(--muted)}
.tcard .hr{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:20px;color:var(--olive)}
.tcard p{font-size:15px;margin-top:8px}
.tcard .tag{margin-top:10px;display:inline-block}
.band{background:var(--ink);color:var(--ground);padding:64px 0}
.band h2{color:var(--ground);font-size:clamp(36px,5vw,64px)}
.band p{color:var(--ground);opacity:.85;font-size:19px;margin-top:14px;max-width:60ch}
.band .cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:26px}
.band .cancel{color:var(--ground)}
/* subpage header */
.ph{padding-top:56px;padding-bottom:12px}
.ph h1{font-size:clamp(40px,5.5vw,72px)}
.ph .lede{margin-top:14px}
.crumb{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.compact .flow{margin-top:28px}
.compact section{padding:48px 0}
.hero2 .voice{grid-template-columns:1fr;gap:10px;margin-top:0}.hero2 .voice .arrow{transform:rotate(90deg);font-size:30px;justify-self:center;margin:2px 0}.hero2 .voice .arrow small{transform:rotate(-90deg);display:none}.hero2 .transcript{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mobile-menu{display:none}
@media(max-width:720px){nav ul{display:flex;flex-wrap:wrap;gap:10px 14px;font-size:14px}nav{flex-wrap:wrap;gap:10px}}


/* ============ mano. v3 — refresh layer ============
   Same palette, same type. Softer surfaces, more air, more motion. */

:root{
  --r:16px; --r-sm:12px; --r-lg:24px;
  --shadow-1:0 1px 2px rgba(31,43,37,.05), 0 6px 18px rgba(31,43,37,.07);
  --shadow-2:0 2px 4px rgba(31,43,37,.06), 0 14px 38px rgba(31,43,37,.12);
  --wash:#EFF1E7; --wash-2:#E7EBDD;
  --olive-soft:rgba(122,138,92,.14);
  --accent-soft:rgba(228,96,31,.12);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --wash:#1C221E; --wash-2:#212925;
  --shadow-1:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.35);
  --shadow-2:0 2px 4px rgba(0,0,0,.35), 0 14px 38px rgba(0,0,0,.45);
  --olive-soft:rgba(142,158,110,.18); --accent-soft:rgba(240,122,58,.16);
}}
:root[data-theme="dark"]{
  --wash:#1C221E; --wash-2:#212925;
  --shadow-1:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.35);
  --shadow-2:0 2px 4px rgba(0,0,0,.35), 0 14px 38px rgba(0,0,0,.45);
  --olive-soft:rgba(142,158,110,.18); --accent-soft:rgba(240,122,58,.16);
}

/* ---- nav ---- */
nav{border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--ground) 86%, transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
nav ul a{position:relative;padding:4px 0;transition:color .18s}
nav ul a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--accent);border-radius:2px;transition:right .22s ease}
nav ul a:hover::after{right:0}
.langs button,.langs a{border-radius:999px;transition:background .18s,border-color .18s,color .18s}
.langs button,.langs a.on{border-color:transparent;background:var(--olive);color:var(--olive-ink)}

/* ---- buttons ---- */
.btn{border-radius:999px;padding:14px 26px;box-shadow:var(--shadow-1);transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(0)}
.btn.ghost{box-shadow:none;border-width:2px}
.btn.ghost:hover{background:var(--olive-soft);box-shadow:none}

/* ---- section rhythm: colour blocks instead of dashed rules ---- */
.perf{display:none}
.sec, section{position:relative}
.page > section:nth-of-type(even), .page > .sec:nth-of-type(even){background:var(--wash)}
.band{border-radius:0}

/* ---- surfaces: round + soften every card ---- */
.benefit,.step,.tcard,.plans,.calc,.log,.phone,.offer,.report,.trust > div,.keep > div,.promises,.wcard{
  border-radius:var(--r);
}
.benefit,.step,.tcard,.trust > div,.keep > div{
  border:1px solid var(--line);box-shadow:var(--shadow-1);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
}
.benefit:hover,.step:hover,.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--olive)}
.plans,.calc,.log,.phone,.offer,.report{border:1px solid var(--line);box-shadow:var(--shadow-2)}
.plans{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}  /* NOT overflow:hidden — that clips both axes and traps the table */
.promises{border:0;box-shadow:var(--shadow-2);overflow:hidden}
.promises div{border-right:1px solid var(--line)}
.tcard.rec{border:2px solid var(--accent);box-shadow:0 0 0 6px var(--accent-soft), var(--shadow-2)}
.trust > div{border-top:1px solid var(--line);position:relative;overflow:hidden;padding-top:30px}
.trust > div::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--olive)}
.keep div{border-left:0;position:relative;overflow:hidden;padding-left:26px}
.keep div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent)}
.keep div.g::before{background:var(--olive)}

/* icon chips get a soft tinted square, not a flat circle */
.benefit .ic{width:46px;height:46px;border-radius:14px;background:var(--olive-soft)}
.benefit .ic svg{width:22px;height:22px;stroke:var(--olive)}
.benefit:hover .ic{background:var(--olive)}
.benefit:hover .ic svg{stroke:var(--olive-ink)}

/* ---- hero ---- */
.hero2{position:relative;padding-top:56px}
.hero2::before{
  content:"";position:absolute;z-index:-1;inset:-40px -20vw 20% -20vw;
  background:
    radial-gradient(52% 62% at 22% 30%, var(--olive-soft), transparent 70%),
    radial-gradient(40% 55% at 82% 18%, var(--accent-soft), transparent 68%);
  pointer-events:none;
}
.hero2 .h1sub{color:var(--olive);font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:26px;text-transform:uppercase;letter-spacing:.02em}
.eyebrow{display:inline-block;background:var(--accent-soft);color:var(--accent);padding:6px 12px;border-radius:999px}
.crumb{display:inline-block;background:var(--accent-soft);padding:6px 12px;border-radius:999px}
.proof span{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 14px;box-shadow:var(--shadow-1)}

/* ---- accordions ---- */
.acc{border-top:0;border-radius:var(--r);overflow:hidden;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.acc details{border-bottom:1px solid var(--line);padding:0 22px;transition:background .2s}
.acc details:last-child{border-bottom:0}
.acc details[open]{background:var(--tint)}
.acc summary .pl{border-radius:10px;border-width:1.5px}
.acc .body{padding-bottom:20px}
.acc.faq .body{padding-left:0}

/* ---- steps get a soft numeral ---- */
.step .k{width:52px;height:52px;border-radius:16px;background:var(--olive-soft);color:var(--olive);display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:6px}

/* ---- tables ---- */
.plans th{background:var(--tint);border-bottom:1px solid var(--line)}
.plans .rec td{background:var(--accent-soft)}

/* ---- calculator ---- */
.calc{overflow:hidden}
.calc .out{background:linear-gradient(155deg, var(--ink), color-mix(in srgb, var(--ink) 78%, var(--olive)))}

/* ---- forms ---- */
input,select,textarea{border-radius:var(--r-sm)!important}
.msg{border-radius:var(--r-sm)}

/* ---- scroll reveal (only armed once JS says so, so no-JS still shows everything) ---- */
.rv-on .rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1)}
.rv-on .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .rv-on .rv{opacity:1;transform:none;transition:none} .btn:hover,.benefit:hover,.step:hover,.tcard:hover{transform:none} }

/* =================== THE WIZARD =================== */
.wizsec{padding-top:8px}
.wiz{
  margin-top:26px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-2);overflow:hidden;
}
.wiz-head{padding:20px 26px 0;border-bottom:1px solid var(--line);background:var(--tint)}
.wsteps{display:flex;gap:6px;flex-wrap:wrap}
.wstep{
  font:inherit;cursor:pointer;background:transparent;border:0;padding:8px 14px 14px;
  display:flex;align-items:center;gap:9px;color:var(--muted);border-radius:12px 12px 0 0;
}
.wstep i{
  font-style:normal;width:26px;height:26px;border-radius:50%;flex:none;
  background:var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:13px;transition:background .2s,color .2s;
}
.wstep span{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:19px;letter-spacing:.02em}
.wstep.on{color:var(--ink)}
.wstep.on i{background:var(--accent);color:var(--accent-ink)}
.wstep.done i{background:var(--olive);color:var(--olive-ink)}
.wstep[disabled]{cursor:default;opacity:.55}
.wbar{height:4px;background:var(--line);border-radius:4px;overflow:hidden;margin:0 0 -1px}
.wbar i{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .35s cubic-bezier(.2,.7,.3,1)}

.wbody{display:grid;grid-template-columns:1.55fr .95fr;align-items:stretch}
@media(max-width:900px){.wbody{grid-template-columns:1fr}}
.wmain{padding:26px}
.wpanel{display:none;animation:wfade .32s cubic-bezier(.2,.7,.3,1) both}
.wpanel.on{display:block}
@keyframes wfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wq{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:27px;color:var(--ink);line-height:1.05;margin:0 0 4px}
.wq + .whint{color:var(--muted);font-size:15.5px;margin:0 0 18px}
.wq.mt{margin-top:30px}

.wtiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:560px){.wtiles{grid-template-columns:1fr}}
.wtile{
  font:inherit;text-align:left;cursor:pointer;position:relative;
  background:var(--ground);border:1.5px solid var(--line);border-radius:var(--r);
  padding:15px 44px 15px 15px;display:flex;gap:13px;align-items:flex-start;
  transition:border-color .18s, background .18s, transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.wtile:hover{border-color:var(--olive);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.wtile .wic{width:38px;height:38px;flex:none;border-radius:12px;background:var(--olive-soft);display:flex;align-items:center;justify-content:center}
.wtile .wic svg{width:19px;height:19px;stroke:var(--olive);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.wtile b{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:19px;color:var(--ink);line-height:1.1;letter-spacing:.015em}
.wtile span.wd{display:block;font-size:14.5px;color:var(--muted);line-height:1.35;margin-top:3px}
.wtile .wck{
  position:absolute;right:13px;top:15px;width:22px;height:22px;border-radius:7px;
  border:1.5px solid var(--line);background:var(--paper);transition:all .18s;
}
.wtile .wck::after{
  content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;
  border:solid var(--accent-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.4);
}
.wtile.on{border-color:var(--accent);background:var(--accent-soft)}
.wtile.on .wic{background:var(--accent);}
.wtile.on .wic svg{stroke:var(--accent-ink)}
.wtile.on .wck{background:var(--accent);border-color:var(--accent)}
.wtile.on .wck::after{transform:rotate(45deg) scale(1)}

.wchips{display:flex;flex-wrap:wrap;gap:10px}
.wchip{
  font:inherit;cursor:pointer;background:var(--ground);border:1.5px solid var(--line);
  border-radius:999px;padding:11px 20px;color:var(--text);
  font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:.02em;
  transition:all .18s cubic-bezier(.2,.7,.3,1);
}
.wchip:hover{border-color:var(--olive);transform:translateY(-2px)}
.wchip.on{background:var(--ink);border-color:var(--ink);color:var(--ground)}

/* side teaching panel */
.wside{background:linear-gradient(160deg, var(--ink), color-mix(in srgb, var(--ink) 76%, var(--olive)));color:var(--ground);padding:26px;display:flex;flex-direction:column}
.wside .wse{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);margin-bottom:12px}
.wside .wst{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:28px;line-height:1.02;color:var(--ground)}
.wside .wsx{font-size:15.5px;line-height:1.5;opacity:.88;margin:12px 0 0}
.wside ul{list-style:none;margin:16px 0 0;padding:0}
.wside li{position:relative;padding-left:24px;font-size:15px;margin:9px 0;opacity:.92}
.wside li::before{content:"";position:absolute;left:2px;top:7px;width:10px;height:6px;border:solid var(--olive);border-width:0 0 2.2px 2.2px;transform:rotate(-45deg)}
.wside .wsm{margin-top:auto;padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.wsrow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;font-size:14px;opacity:.8}
.wsrow b{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:24px;opacity:1;color:var(--ground);letter-spacing:.01em}
.wsrow b.hi{color:var(--accent)}
.wfade{animation:wfade .3s cubic-bezier(.2,.7,.3,1) both}

.wfoot{display:flex;align-items:center;gap:14px;padding:18px 26px;border-top:1px solid var(--line);background:var(--tint);flex-wrap:wrap}
.wfoot .sp{flex:1}
.wfoot .wnote{font-size:14px;color:var(--muted)}
.wfoot .btn{font-size:18px;padding:11px 24px}
.wfoot .btn[hidden]{display:none}

/* result */
.wres{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:700px){.wres{grid-template-columns:1fr}}
.wrescard{background:var(--ground);border:1.5px solid var(--line);border-radius:var(--r);padding:22px}
.wrescard.pick{border:2px solid var(--accent);background:var(--accent-soft)}
.wrescard .wrl{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.wrescard .wrv{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:40px;line-height:1;color:var(--ink);margin-top:8px}
.wrescard .wrp{font-family:"IBM Plex Mono",monospace;font-size:22px;color:var(--ink);margin-top:10px}
.wrescard .wrp small{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
.wrescard p{font-size:15px;margin-top:10px}
.wrlist{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 22px}
@media(max-width:700px){.wrlist{grid-template-columns:1fr}}
.wrlist li{position:relative;padding-left:22px;font-size:15.5px;margin:7px 0;break-inside:avoid}
.wrlist li::before{content:"";position:absolute;left:1px;top:7px;width:10px;height:6px;border:solid var(--olive);border-width:0 0 2.2px 2.2px;transform:rotate(-45deg)}
.wrfine{font-size:14px;color:var(--muted);margin-top:18px}
.wrcta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:20px}

/* ---- nav fits six items + languages + CTA ---- */
nav ul{gap:15px;font-size:15px}
nav ul a{white-space:nowrap}
nav .right{gap:14px}
nav .cta-nav{font-size:14.5px;padding:9px 15px;white-space:nowrap}
@media(max-width:1180px){ nav ul{gap:13px;font-size:14px} nav .cta-nav{font-size:13.5px;padding:8px 12px} }
@media(max-width:980px){
  nav{flex-wrap:wrap;row-gap:10px}
  nav ul{display:flex!important;order:3;width:100%;flex-wrap:wrap;gap:8px 16px;font-size:14.5px;
         padding-top:10px;border-top:1px solid var(--line)}
}

/* ---- wizard step tabs on small screens ---- */
@media(max-width:640px){
  .wiz-head{padding:14px 16px 0}
  .wsteps{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .wsteps::-webkit-scrollbar{display:none}
  .wstep{padding:6px 10px 12px;flex:none}
  .wstep span{font-size:16px}
  .wstep i{width:22px;height:22px;font-size:12px}
  .wmain{padding:18px 16px}
  .wside{padding:20px 16px}
  .wfoot{padding:14px 16px}
  .wsrow b{font-size:20px}
}

/* the hero glow bleeds past the viewport by design — clip it without
   creating a scroll container (so the sticky nav keeps working) */
html,body{overflow-x:clip}

/* ---- the nav actually sticks now ---- */
.navbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.navbar nav{position:static;border-bottom:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}

/* nav spacing + tidy wrap */
nav{gap:30px}
/* wrap, always: a longer translation must push the CTA to a second row
   rather than run over the wordmark (French did exactly that) */
nav .right{flex:1 1 auto;min-width:0;justify-content:flex-end;flex-wrap:wrap;row-gap:8px}
@media(max-width:980px){
  nav{gap:14px}
  nav .right{flex-wrap:wrap}
  nav ul{order:3;width:100%;justify-content:flex-start;margin-top:2px}
}

/* ---- hero illustration ---- */
.heroart{width:100%;height:auto;display:block;max-width:660px;margin:0 auto;overflow:visible}
.hero2 .artcap{text-align:center;font-size:16px;color:var(--muted);margin-top:6px}
@media(max-width:900px){ .heroart{max-width:520px} }

/* ---- onward links on the lean landing page ---- */
.morelinks{display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center;justify-content:center;
           margin:0 0 8px;padding:26px 0 0;border-top:1px solid var(--line);font-size:16px}
.morelinks a{color:var(--ink);font-weight:600}

/* ---- hero balance: give the illustration a real half, and stop the
   umlauts clipping on the tight condensed line-height ---- */
.hero2{grid-template-columns:1fr 1fr;gap:48px}
.hero2 h1{font-size:clamp(40px,5.2vw,68px);line-height:.98}
.hero2 .h1sub{font-size:23px}
.heroart{max-width:100%}
@media(max-width:900px){ .hero2{grid-template-columns:1fr;gap:28px} }
.hero2 h1{font-size:clamp(38px,4.8vw,62px)}
.hero2 .cta .btn{font-size:18px;padding:12px 22px}
.benefit b{text-wrap:balance}

/* the two-row mobile nav is sticky — keep it shallow */
@media(max-width:640px){
  nav{padding:12px 0;gap:8px}
  nav ul{gap:6px 13px;font-size:13.5px;margin-top:0;padding-top:8px}
  .brand.big,.brand{font-size:inherit}
}
/* ...and don't pin it on phones — 156px of sticky chrome is a third of the fold */
@media(max-width:640px){ .navbar{position:static} }

/* ==================== CINEMATIC HERO ====================
   Dark type band, then the photograph full-bleed underneath it. The photo
   carries its own drama; the type never sits on top of it and never covers
   either figure, so the left-to-right story in the frame stays readable. */

/* the hero band is pinned to the brand green in BOTH themes — in dark mode
   var(--ink) flips to near-white, which would strand the photograph under a
   white slab. The photo is dark, so its frame stays dark. */
:root{ --olive-lt:#AFC08C; --hero-ink:#1B2420; }

/* the nav goes dark on the landing page so it reads as one block with the hero */
body:has(.page[data-page="home"].on) .navbar{
  background:var(--hero-ink);border-bottom-color:rgba(255,255,255,.10);
}
body:has(.page[data-page="home"].on) .navbar .brand{color:#F5F4EF}
body:has(.page[data-page="home"].on) .navbar nav ul a{color:rgba(255,255,255,.82)}
body:has(.page[data-page="home"].on) .navbar nav ul a:hover{color:#fff}
body:has(.page[data-page="home"].on) .navbar .langs button,.langs a{color:rgba(255,255,255,.55)}
body:has(.page[data-page="home"].on) .navbar .langs button,.langs a.on{color:var(--olive-ink)}

.herodark{
  background:var(--hero-ink);color:#F5F4EF;
  padding:70px 0 62px;position:relative;overflow:hidden;
}
.herodark::before{
  content:"";position:absolute;inset:auto -10% -60% 30%;height:120%;
  background:radial-gradient(50% 50% at 60% 50%, rgba(228,96,31,.22), transparent 70%);
  pointer-events:none;
}
.herodark .wrap{position:relative}
.herodark .herotxt{max-width:none}
.herodark h1{color:#F5F4EF;font-size:clamp(40px,5.3vw,78px);line-height:.94;letter-spacing:-.005em;max-width:19ch}
.herodark .h1sub{color:var(--olive-lt);font-size:clamp(20px,2.2vw,28px);margin-top:16px}
.herodark .lede{color:#F5F4EF;opacity:.84;font-size:20px;max-width:56ch;margin:20px 0 30px}
.herodark .eyebrow{background:transparent;border:1px solid rgba(247,160,106,.38);color:#F7A06A}
.herodark .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.herodark .cta .btn{font-size:19px;padding:14px 28px}
.herodark .btn.ghost{color:#F5F4EF;border-color:rgba(255,255,255,.42);background:transparent}
.herodark .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.7)}
.herodark .cancel{color:rgba(255,255,255,.62)}
.herodark .proof{margin-top:26px}
.herodark .proof span{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.78);box-shadow:none;
}
.herodark .proof span::before{color:var(--olive-lt)}

/* the photograph, edge to edge */
.herophoto{margin:0;position:relative;background:var(--hero-ink)}
.herophoto .shot{
  height:clamp(320px,45vw,660px);
  background-size:cover;background-position:50% 56%;background-repeat:no-repeat;
}
/* No dark fade over the top of the photograph: this frame opens on pale dusk
   sky, and a gradient there reads as a grubby vignette rather than a blend.
   A clean cut between the green band and the image is stronger. */
.herophoto figcaption{
  background:var(--hero-ink);color:rgba(255,255,255,.62);
  font-size:15px;padding:16px 0 20px;
}
.herophoto figcaption .wrap{display:block}

@media(max-width:900px){
  .herodark{padding:44px 0 46px}
  .herodark .herotxt{max-width:none}
  .herodark .lede{font-size:18px;margin:16px 0 24px}
  .herophoto .shot{height:clamp(250px,58vw,380px);background-position:50% 50%}
}
@media(max-width:640px){
  .herodark .eyebrow{border:0;padding:0;font-size:11px;letter-spacing:.11em;line-height:1.5}
  .herodark h1{margin-top:10px}
  .herodark .cta .btn{width:100%;justify-content:center}
}
.langs{gap:3px}
.langs button,.langs a{padding:5px 8px}

/* ==== BUG: the playbook card had no CSS at all ====
   The markup shipped in v1 and v2 but its styles never did, so it rendered as
   a run-on text blob with the toggle knobs floating over the words. The switch
   was a <span> with width/height and no display, which is why it collapsed. */
.pbook{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-2);overflow:hidden;align-self:start;
}
.pbook header{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px 16px;flex-wrap:wrap;
  padding:16px 20px;border-bottom:1px solid var(--line);background:var(--tint);
  font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:20px;color:var(--ink);letter-spacing:.02em;
}
.pbook header span{
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:400;
  text-transform:none;letter-spacing:.04em;color:var(--muted);
}
.pbook .row{
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  padding:14px 20px;border-bottom:1px solid var(--line);
}
.pbook .row b{display:block;color:var(--ink);font-weight:600;font-size:16px;line-height:1.25}
.pbook .row small{display:block;color:var(--muted);font-size:14px;margin-top:3px;line-height:1.35}
.pbook .chip{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink);
  background:var(--tint);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;white-space:nowrap;
}
.pbook footer{
  padding:14px 20px;background:var(--tint);border-top:1px solid var(--line);
  font-size:14.5px;color:var(--muted);
}
.sw{display:inline-block}
.pbook .sw{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.pbook .sw::after{box-shadow:0 1px 3px rgba(0,0,0,.25)}
@media(max-width:520px){ .pbook .row{grid-template-columns:1fr;gap:8px} }

/* ==== BUG: pilot page proof pills were white text on white pills ====
   The v3 pill treatment assumed a light ground; the pilot band is ink. */
.pilot .proof span{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.82);box-shadow:none;
}
.pilot .proof span::before{color:var(--olive-lt)}
.pilot form{border:0;border-radius:var(--r-lg);box-shadow:var(--shadow-2)}

/* ==================== HERO: two columns ====================
   The headline used to sit alone on the left with dead space beside it. The
   proof points now hold the right-hand side. */
.herogrid{display:grid;grid-template-columns:1.22fr .78fr;gap:56px;align-items:center}
.herodark .herotxt{max-width:none}
.herodark h1{max-width:none;font-size:clamp(38px,4.4vw,62px)}
.herodark .eyebrow{border-radius:10px;padding:7px 12px;line-height:1.45}
.herodark .h1sub{font-size:clamp(19px,1.8vw,24px)}
.herodark .lede{font-size:19px;margin:18px 0 26px}
.heroside .proof{display:block;margin:0}
.heroside .proof span{
  display:block;background:transparent;border:0;border-top:1px solid rgba(255,255,255,.14);
  border-radius:0;padding:16px 0;font-size:17px;color:rgba(255,255,255,.88);box-shadow:none;
}
.heroside .proof span:first-child{border-top:0;padding-top:0}
.heroside .proof span::before{
  content:"";display:inline-block;width:11px;height:7px;margin-right:12px;vertical-align:2px;
  border:solid var(--olive-lt);border-width:0 0 2.4px 2.4px;transform:rotate(-45deg);
}
@media(max-width:980px){
  .herogrid{grid-template-columns:1fr;gap:28px}
  .herodark .herotxt{max-width:none}
  .heroside .proof span{font-size:16px;padding:12px 0}
}

/* ==================== LIGHTER: air, rhythm, layers ====================
   Every word stays; it just stops arriving all at once. */

/* more room between ideas */
section, .sec{padding:88px 0}
.compact section{padding:64px 0}
@media(max-width:860px){ section,.sec{padding:56px 0} .compact section{padding:44px 0} }

/* a heading is an event: olive rule, eyebrow, headline, then a short lede */
.sec > .wrap > .eyebrow, section > .wrap > .eyebrow{position:relative}
h2 + .lede, h1 + .lede, .ph .lede{max-width:56ch}
.lede{max-width:58ch}
section p:not(.lede):not(.more):not(.wq):not(.whint):not(.wrfine){max-width:64ch}

/* page headers breathe */
.ph{padding-top:72px;padding-bottom:20px}
.ph h1{max-width:20ch}

/* cards get room to be cards */
.benefit{padding:28px 24px 26px}
.step{padding:30px 26px}
.trust > div{padding:32px 28px 30px}
.keep div{padding:28px 30px}
.tcard{padding:28px}

/* the rules list on Services reads as cards, two up, instead of a long ledger */
.rules{gap:48px}
.rules .ex{border-top:0;grid-template-columns:1fr;gap:14px}
.rules .ex > div{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-1);padding:18px 20px;border-bottom:1px solid var(--line);
  grid-template-columns:1fr;gap:8px;transition:border-color .2s, box-shadow .2s;
}
.rules .ex > div:hover{border-color:var(--olive);box-shadow:var(--shadow-2)}
.rules .ex .ok{
  padding:4px 10px;border-radius:999px;background:var(--olive-soft);
  color:var(--olive);font-size:13px;justify-self:start;
}
.rules .ex b{font-size:17.5px;line-height:1.3}
.rules .ex span{line-height:1.45}

/* missions grid: space, not a ledger */
.missions{gap:0 48px;border-top:0}
.missions div{padding:22px 0;border-bottom:1px solid var(--line)}
.missions b{font-size:18px;margin-bottom:4px}

/* FAQ answers stop running the full width */
.acc .body{max-width:68ch}

/* tables: room to read */
.plans td{padding:26px 22px}
.plans th{padding:16px 22px}

/* an image band — drop a photograph in and it goes full-bleed with a caption */
.imgband{margin:0;position:relative;background:var(--hero-ink)}
.imgband .shot{
  height:clamp(260px,34vw,460px);
  background-size:cover;background-position:50% 50%;background-repeat:no-repeat;
}
.imgband figcaption{
  background:var(--hero-ink);color:rgba(255,255,255,.62);font-size:15px;padding:16px 0 20px;
}
.imgband figcaption .wrap{display:block}

/* eyebrow pills on any dark band read as outlines, not mud */
.pilot .eyebrow,.band .eyebrow{
  background:transparent;border:1px solid rgba(247,160,106,.38);color:#F7A06A;
}

/* ==================== LIGHT ONLY ====================
   The site inherited a dark palette that switched on automatically with the
   OS setting, which is why it looked dark in Liza's browser. mano. is a light
   brand; the only dark surfaces are the deliberate ones (hero band, pilot,
   photo captions), and those are pinned to --hero-ink. So: re-assert the light
   tokens inside the dark media query, and tell the browser this page is light
   so form controls and scrollbars follow. */
:root{ color-scheme:light; }
@media (prefers-color-scheme: dark){
  :root, :root:not([data-theme="light"]){
    --ground:#F5F4EF; --paper:#FFFFFF; --ink:#1F2B25; --text:#2F3833; --muted:#6B7169;
    --line:#D8D9CF; --accent:#E4601F; --accent-ink:#FFFFFF; --stamp:#B3261E;
    --tint:#EDEFE6; --good:#5F7048; --olive:#7A8A5C; --olive-ink:#FFFFFF;
    --wash:#EFF1E7; --wash-2:#E7EBDD;
    --olive-soft:rgba(122,138,92,.14); --accent-soft:rgba(228,96,31,.12);
    --shadow-1:0 1px 2px rgba(31,43,37,.05), 0 6px 18px rgba(31,43,37,.07);
    --shadow-2:0 2px 4px rgba(31,43,37,.06), 0 14px 38px rgba(31,43,37,.12);
    color-scheme:light;
  }
}

/* ==================== HERO SIDE: THE PHONE ====================
   Replaces the three ticked lines. A call arriving in the customer's own
   company name, with emblems for the work that follows from it. */
.pa{position:relative;display:flex;justify-content:center;align-items:center;
    min-height:430px;padding:14px 0}
.pa::before{
  content:"";position:absolute;width:330px;height:330px;border-radius:50%;
  background:radial-gradient(circle, rgba(228,96,31,.22), transparent 66%);
  filter:blur(4px);pointer-events:none;
}
.pa-phone{
  position:relative;width:232px;border-radius:30px;padding:9px;
  background:linear-gradient(170deg,#39443D,#222B26);
  box-shadow:0 26px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.10);
}
.pa-phone::before{
  content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);
  width:58px;height:5px;border-radius:3px;background:rgba(255,255,255,.22);
}
.pa-screen{background:var(--paper);border-radius:23px;padding:28px 14px 14px;overflow:hidden}

.pa-call{display:flex;gap:11px;align-items:center;padding:4px 4px 12px}
.pa-av{
  position:relative;width:42px;height:42px;flex:none;border-radius:50%;
  background:var(--accent);display:flex;align-items:center;justify-content:center;
}
.pa-av svg{width:20px;height:20px;stroke:#fff}
.pa-ring{
  position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--accent);
  opacity:.55;animation:pa-pulse 2.4s cubic-bezier(.3,.7,.4,1) infinite;
}
@keyframes pa-pulse{0%{transform:scale(.86);opacity:.6}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .pa-ring{animation:none} }
.pa-ct{min-width:0}
.pa-lab{display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;
        letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.pa-ct b{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:800;
         text-transform:uppercase;font-size:21px;color:var(--ink);line-height:1.05;margin-top:2px}
.pa-for{display:block;font-size:12px;color:var(--muted);margin-top:2px;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-note{
  margin:0 0 12px;padding:9px 11px;border-radius:11px;background:var(--olive-soft);
  color:var(--olive);font-size:12.5px;line-height:1.35;
}
.pa-feed{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pa-feed li{display:grid;grid-template-columns:24px 1fr auto;gap:9px;align-items:center;
            padding:10px 2px;border-bottom:1px solid var(--line)}
.pa-feed li:last-child{border-bottom:0}
.pa-feed i{display:flex;align-items:center;justify-content:center;width:24px;height:24px;
           border-radius:8px;background:var(--tint)}
.pa-feed i svg{width:13px;height:13px;stroke:var(--olive)}
.pa-feed span{font-size:12.5px;color:var(--ink);font-weight:600;line-height:1.2}
.pa-feed em{font-family:"IBM Plex Mono",monospace;font-style:normal;font-size:10.5px;color:var(--muted)}

/* the emblems */
.pa-em{
  position:absolute;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:999px;padding:8px 14px 8px 8px;white-space:nowrap;
  box-shadow:0 10px 26px rgba(0,0,0,.30);
  animation:pa-float 7s ease-in-out infinite;
}
.pa-em i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
         border-radius:50%;background:var(--olive);flex:none}
.pa-em i svg{width:14px;height:14px;stroke:#fff}
.pa-em b{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;
         font-size:15px;letter-spacing:.03em;color:#F5F4EF}
.pa-e1{top:24px;left:-6px;animation-delay:0s}
.pa-e2{top:132px;right:-14px;animation-delay:1.3s}
.pa-e3{bottom:112px;left:-18px;animation-delay:2.6s}
.pa-e4{bottom:22px;right:-4px;animation-delay:3.9s}
@keyframes pa-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){ .pa-em{animation:none} }

@media(max-width:1180px){
  .pa-em b{font-size:14px}
  .pa-e1{left:-14px} .pa-e3{left:-22px}
}
@media(max-width:980px){
  .pa{min-height:0;margin-top:6px}
  .pa-phone{width:212px}
}
@media(max-width:420px){
  .pa-em{padding:6px 11px 6px 6px}
  .pa-em b{font-size:13px}
  .pa-e1{left:-4px;top:10px} .pa-e2{right:-6px} .pa-e3{left:-8px} .pa-e4{right:-2px}
}

/* emblems must sit beside the phone, never on top of its text */
.herogrid{grid-template-columns:1.05fr .95fr}
.pa-phone{width:212px}
.pa-av{width:38px;height:38px}
.pa-av svg{width:18px;height:18px}
.pa-ct b{font-size:18px}
.pa-em{padding:7px 12px 7px 7px;gap:7px}
.pa-em i{width:24px;height:24px}
.pa-em i svg{width:13px;height:13px}
.pa-em b{font-size:14px}
.pa-e1{top:18px;left:0}
.pa-e2{top:40%;right:0}
.pa-e3{bottom:24%;left:0}
.pa-e4{bottom:14px;right:0}
@media(max-width:1180px){ .pa-em b{font-size:13px} .pa-e1,.pa-e3{left:0} .pa-e2,.pa-e4{right:0} }
@media(max-width:980px){
  .pa{max-width:460px;margin:8px auto 0}
}

/* final sizing: the phone gives up 22px so the emblems clear it on both sides */
.pa-phone{width:190px}
.pa-screen{padding:26px 12px 12px}
.pa-av{width:34px;height:34px}
.pa-ct b{font-size:17px;white-space:nowrap}
.pa-lab{font-size:9.5px;letter-spacing:.14em}
.pa-for{font-size:11.5px}
.pa-note{font-size:12px;padding:8px 10px}
.pa-feed li{grid-template-columns:22px 1fr auto;gap:8px;padding:9px 1px}
.pa-feed i{width:22px;height:22px;border-radius:7px}
.pa-feed span{font-size:12px}
.pa-feed em{font-size:10px;white-space:nowrap}
.pa-em{padding:6px 11px 6px 6px;gap:7px}
.pa-em i{width:22px;height:22px}
.pa-em i svg{width:12px;height:12px}
.pa-em b{font-size:13px;letter-spacing:.04em}
@media(max-width:1180px){ .pa-em b{font-size:12.5px} }

/* the caller name may wrap; nothing escapes the screen */
.pa-ct{overflow:hidden}
.pa-ct b{font-size:16px;white-space:normal;line-height:1.02}
/* feed: meta sits under its label instead of fighting it for width */
.pa-feed li{grid-template-columns:22px 1fr;gap:8px;align-items:start}
.pa-feed em{display:block;margin-top:2px}
.pa-feed span{line-height:1.25}
.pa-feed em{grid-column:2}
.herodark .cta .btn{font-size:18px;padding:13px 24px}

/* ...and the other dark hook. The OS media query was only half of it: the page
   also carries a :root[data-theme="dark"] palette, which hosts (the artifact
   viewer among them) stamp on the root element when the viewer picks dark.
   Close that too — mano. is light everywhere. */
:root[data-theme="dark"]{
  --ground:#F5F4EF; --paper:#FFFFFF; --ink:#1F2B25; --text:#2F3833; --muted:#6B7169;
  --line:#D8D9CF; --accent:#E4601F; --accent-ink:#FFFFFF; --stamp:#B3261E;
  --tint:#EDEFE6; --good:#5F7048; --olive:#7A8A5C; --olive-ink:#FFFFFF;
  --wash:#EFF1E7; --wash-2:#E7EBDD;
  --olive-soft:rgba(122,138,92,.14); --accent-soft:rgba(228,96,31,.12);
  --shadow-1:0 1px 2px rgba(31,43,37,.05), 0 6px 18px rgba(31,43,37,.07);
  --shadow-2:0 2px 4px rgba(31,43,37,.06), 0 14px 38px rgba(31,43,37,.12);
  color-scheme:light;
}

/* ==================== HERO BAND GOES LIGHT ====================
   The dark green slab was doing too much. Same layout, same phone, but on a
   soft light ground: warm off-white with a faint olive and orange wash, so it
   reads as part of the page rather than a lid on top of it. The photograph
   below still supplies the contrast. */
.herodark{
  background:
    radial-gradient(58% 68% at 80% 26%, rgba(228,96,31,.11), transparent 70%),
    radial-gradient(52% 62% at 12% 18%, rgba(122,138,92,.16), transparent 72%),
    linear-gradient(180deg, #FAF9F6 0%, var(--wash) 100%);
  color:var(--text);
}
.herodark::before{display:none}
.herodark h1{color:var(--ink)}
.herodark .h1sub{color:var(--olive)}
.herodark .lede{color:var(--text);opacity:1}
.herodark .eyebrow{background:var(--accent-soft);border:0;color:var(--accent);border-radius:999px}
.herodark .btn.ghost{color:var(--ink);border-color:var(--ink);background:transparent}
.herodark .btn.ghost:hover{background:var(--olive-soft);border-color:var(--olive)}
.herodark .cancel{color:var(--muted)}
.herodark .proof span{
  background:var(--paper);border:1px solid var(--line);color:var(--text);
  box-shadow:var(--shadow-1);
}
.herodark .proof span::before{color:var(--olive)}

/* the nav is light again on the landing page, like every other page */
body:has(.page[data-page="home"].on) .navbar{
  background:color-mix(in srgb, var(--ground) 86%, transparent);
  border-bottom-color:var(--line);
}
body:has(.page[data-page="home"].on) .navbar .brand{color:var(--ink)}
body:has(.page[data-page="home"].on) .navbar nav ul a{color:var(--ink)}
body:has(.page[data-page="home"].on) .navbar nav ul a:hover{color:var(--accent)}
body:has(.page[data-page="home"].on) .navbar .langs button,.langs a{color:var(--muted)}
body:has(.page[data-page="home"].on) .navbar .langs button,.langs a.on{color:var(--olive-ink)}

/* the phone keeps its dark body — it is the focal point now — but the emblems
   become paper chips so they read on a light ground */
.pa::before{background:radial-gradient(circle, rgba(228,96,31,.13), transparent 66%)}
.pa-em{
  background:var(--paper);border:1px solid var(--line);
  box-shadow:var(--shadow-2);backdrop-filter:none;-webkit-backdrop-filter:none;
}
.pa-em b{color:var(--ink)}
.pa-phone{box-shadow:0 22px 50px rgba(31,43,37,.22), inset 0 0 0 1px rgba(255,255,255,.08)}

/* ==================== EIGHT SERVICES AROUND THE PHONE ====================
   Two stacked columns instead of hand-placed coordinates: stays put in four
   languages and at every width. */
.pa{min-height:480px}
.pa-side{
  position:absolute;top:0;bottom:0;display:flex;flex-direction:column;
  justify-content:space-between;padding:6px 0;pointer-events:none;
}
.pa-l{left:0;align-items:flex-start}
.pa-r{right:0;align-items:flex-end}
.pa-side .pa-em{position:static;animation:pa-float 7.5s ease-in-out infinite}
.pa-l .pa-em:nth-child(2){margin-left:15px;animation-delay:.9s}
.pa-l .pa-em:nth-child(3){margin-left:15px;animation-delay:1.8s}
.pa-l .pa-em:nth-child(4){margin-left:0;animation-delay:2.7s}
.pa-r .pa-em:nth-child(2){margin-right:15px;animation-delay:1.3s}
.pa-r .pa-em:nth-child(3){margin-right:15px;animation-delay:2.2s}
.pa-r .pa-em:nth-child(4){margin-right:0;animation-delay:3.1s}
.pa-em b{font-size:12.5px}
.pa-em{padding:6px 10px 6px 6px}

@media(max-width:1180px){ .pa-em b{font-size:12px} .pa-side .pa-em{margin:0!important} }
@media(max-width:980px){
  .pa{min-height:0;max-width:520px;margin:10px auto 0}
  .pa-side{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;padding:0}
  .pa{flex-wrap:wrap;gap:12px}
  .pa-l{order:-1;width:100%}
  .pa-r{order:1;width:100%}
  .pa::before{display:none}
}
/* flush columns: the indent staggered "Rechnungen" into the phone */
.pa-side .pa-em{margin:0!important}
/* the later two-column rule was overriding the stacking rule on phones */
@media(max-width:980px){ .herogrid{grid-template-columns:1fr;gap:26px} }

/* ==================== EMBLEMS: FIT THE TEXT, FLOAT PROPERLY ====================
   The pill was capped at 50% of its column and the label ran out the side. It
   sizes to its content now. The phone gives up a few more pixels so each chip
   can be nudged and tilted without ever reaching it — the arrangement reads as
   scattered rather than as two lists. */
.pa-em{width:auto;max-width:none;flex:0 0 auto;white-space:nowrap}
.pa-phone{width:178px}
.pa{min-height:500px}
.pa-side{justify-content:space-between;padding:0}

.pa-side .pa-em{
  margin:0!important;
  animation-name:pa-drift;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}
/* each one sits at its own distance and angle, and drifts at its own pace */
.pa-l .pa-em:nth-child(1){transform:translateX(4px)  rotate(-1.5deg); animation-duration:7.5s; animation-delay:0s}
.pa-l .pa-em:nth-child(2){transform:translateX(20px) rotate(1deg);    animation-duration:9s;   animation-delay:1.1s}
.pa-l .pa-em:nth-child(3){transform:translateX(0)    rotate(-1deg);   animation-duration:8.2s; animation-delay:2.3s}
.pa-l .pa-em:nth-child(4){transform:translateX(15px) rotate(1.5deg);  animation-duration:10s;  animation-delay:.6s}
.pa-r .pa-em:nth-child(1){transform:translateX(-15px) rotate(1.5deg); animation-duration:9.4s; animation-delay:.4s}
.pa-r .pa-em:nth-child(2){transform:translateX(0)     rotate(-1deg);  animation-duration:7.8s; animation-delay:1.7s}
.pa-r .pa-em:nth-child(3){transform:translateX(-19px) rotate(1deg);   animation-duration:8.8s; animation-delay:2.9s}
.pa-r .pa-em:nth-child(4){transform:translateX(-5px)  rotate(-1.5deg);animation-duration:10.4s;animation-delay:1.2s}

@keyframes pa-drift{
  0%,100%{translate:0 0}
  50%    {translate:0 -9px}
}
@media (prefers-reduced-motion:reduce){ .pa-side .pa-em{animation:none} }

@media(max-width:1180px){
  .pa-side .pa-em{transform:none!important}
}
@media(max-width:980px){
  .pa-side .pa-em{transform:none!important;animation:none}
  .pa{min-height:0}
}
/* the narrower phone truncated the company line — let it wrap instead */
.pa-for{font-size:10.5px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;margin-top:3px}

/* ==========================================================================
   Legal pages — privacy policy and cookie/storage notice.
   Long-form prose, so: a narrow measure, generous leading, and a table that
   survives a phone screen. Deliberately plain; nothing here should compete
   with the marketing pages for attention.
   ========================================================================== */
.legal section .wrap{max-width:760px}
.legal .wrap.ph{max-width:760px}
.legal section{padding:26px 0 0}
.legal section:last-of-type{padding-bottom:16px}
.legal h2{
  font-size:19px;line-height:1.3;margin:0 0 10px;
  letter-spacing:-.01em;color:var(--ink)
}
.legal p{
  margin:0 0 12px;font-size:15px;line-height:1.7;
  color:var(--ink-2,var(--ink));max-width:68ch
}
.legal p:last-child{margin-bottom:0}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal .lede{font-size:17px;line-height:1.6}

/* the placeholders Liza still has to fill in: loud on purpose, so no one
   ships the page with ‹FILL› still in it */
.legal .fill{
  background:#fde68a;color:#78350f;font-weight:700;
  padding:1px 7px;border-radius:5px;white-space:nowrap;
  font-size:.92em;letter-spacing:.01em
}

/* cookie table */
.ctable{
  margin:4px 0 8px;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:var(--paper)
}
.ctable table{width:100%;border-collapse:collapse;font-size:14px}
.ctable th,.ctable td{
  text-align:left;padding:11px 14px;vertical-align:top;
  border-bottom:1px solid var(--line);line-height:1.55
}
.ctable thead th{
  background:var(--wash,rgba(0,0,0,.03));font-size:12px;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700
}
.ctable tbody tr:last-child td{border-bottom:0}
.ctable td:first-child{font-weight:650;color:var(--ink);white-space:nowrap}

@media(max-width:700px){
  .ctable table,.ctable thead,.ctable tbody,.ctable tr,.ctable th,.ctable td{display:block}
  .ctable thead{display:none}
  .ctable tr{border-bottom:1px solid var(--line);padding:6px 0}
  .ctable tr:last-child{border-bottom:0}
  .ctable td{border:0;padding:5px 14px}
  .ctable td:first-child{white-space:normal;padding-top:11px}
  .ctable td::before{
    content:attr(data-l);display:block;font-size:11px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:2px
  }
  .ctable td:first-child::before{content:none}
}
/* "DATENSCHUTZERKLÄRUNG" is one 21-letter word: at the marketing h1 size it
   runs off the measure. Legal headings get their own, calmer scale. */
.legal .wrap.ph h1{
  font-size:clamp(28px,3.4vw,42px);line-height:1.08;
  overflow-wrap:break-word;hyphens:auto;max-width:15ch
}
.legal .wrap.ph{padding-bottom:6px}
.legal .wrap.ph .lede{margin-top:14px}

/* ==========================================================================
   Plans table on a phone.
   The table needs ~720px of width to stay readable, so on a phone it scrolls
   sideways. Two things follow from that: it has to be reachable at all (the
   overflow fix above), and a visitor has to be able to TELL it scrolls —
   a silently clipped table reads as a broken one.
   ========================================================================== */

/* Shadows that appear only on the side where content is still hidden, and
   fade out as you reach each end. Pure CSS: the two solid panels scroll with
   the content (background-attachment:local) and cover the shadows when there
   is nothing more to see that way. */
.plans{
  background-image:
    linear-gradient(to right,  var(--paper), rgba(255,255,255,0)),
    linear-gradient(to left,   var(--paper), rgba(255,255,255,0)),
    linear-gradient(to right,  rgba(31,43,37,.16), rgba(31,43,37,0)),
    linear-gradient(to left,   rgba(31,43,37,.16), rgba(31,43,37,0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 30px 100%, 30px 100%, 18px 100%, 18px 100%;
  background-attachment: local, local, scroll, scroll;
  scrollbar-width: thin;
}
.plans::-webkit-scrollbar{height:8px}
.plans::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.plans::-webkit-scrollbar-track{background:transparent}

/* Tablet range: the table still fits its 720px if you nudge the padding in. */
@media(max-width:980px) and (min-width:761px){
  .plans td{padding:18px 15px;font-size:16px}
  .plans th{padding:13px 15px}
}

/* Phone: stop being a table at all.
   Four columns on a 340px screen means two are off-screen — and one of those
   is the price, which is the whole point of the page. Each plan becomes a
   card, every value labelled by its own column heading, nothing to discover
   and nothing to scroll sideways for. */
@media(max-width:760px){
  .plans{
    overflow:visible;border:0;box-shadow:none;background:none;
    background-image:none;margin-top:0
  }
  .plans table,.plans tbody,.plans tr,.plans td{display:block;width:auto}
  .plans table{min-width:0}
  .plans thead{display:none}

  .plans tr{
    background:var(--paper);border:1px solid var(--line);
    border-radius:var(--r);box-shadow:var(--shadow-2);
    padding:20px 18px 6px;margin-bottom:16px
  }
  .plans .rec td{background:none}
  .plans tr.rec{border-color:var(--olive);box-shadow:0 0 0 1px var(--olive),var(--shadow-2)}

  .plans td{border:0;padding:0 0 16px}
  .plans tr:last-child td{border-bottom:0}

  /* the column heading, printed above its value */
  .plans td::before{
    content:attr(data-l);display:block;
    font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:6px
  }
  /* the plan name says what it is; a "PAKET" label above it is noise */
  .plans td:first-child::before{display:none}

  /* price moves up under the name, where it is read */
  .plans tr{display:flex;flex-direction:column}
  .plans td:first-child{order:1}
  .plans td:last-child{order:2;padding-bottom:18px;
    border-bottom:1px solid var(--line);margin-bottom:16px}
  .plans td:nth-child(2){order:3}
  .plans td:nth-child(3){order:4;padding-bottom:4px}

  .plans .name{font-size:27px}
  .plans .name small{font-size:14.5px}
  .plans .price{font-size:27px;white-space:normal}
  .plans .price .setup{font-size:13px;margin-top:6px}
  .plans .hrs{font-size:19px}
  .plans ul{padding-left:17px}
  .plans li{font-size:15.5px}
}

/* ==========================================================================
   Pilot offer line, next to the buttons that ask for the decision.
   It appears on light sections AND on the dark .band, so the colours are set
   per context — a single light-on-light rule is exactly how the pilot proof
   pills went invisible earlier.
   ========================================================================== */
.perk{
  display:block;width:fit-content;max-width:62ch;margin-top:12px;
  padding:9px 15px;
  font-family:"IBM Plex Mono",monospace;
  font-size:12.5px;line-height:1.5;letter-spacing:.01em;
  color:var(--ink);
  background:var(--accent-soft);
  border:1px dashed rgba(228,96,31,.5);
  border-radius:12px;
}
/* inside the CTA row it takes its own line BELOW every button — order:99
   keeps it last, otherwise it splits a button pair in half */
.cta .perk{flex-basis:100%;order:99;margin-top:2px}

/* dark band: light text, and a border that reads against ink rather than paper */
.band .perk,.pilot .perk{
  color:var(--ground);
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.32);
}

@media(max-width:600px){
  .perk{font-size:12px;padding:8px 12px;max-width:none;width:auto}
}

/* ==========================================================================
   Pilot offer card.
   Bottom-right on desktop, a bar across the bottom on a phone. It never
   covers the page content and never blocks reading — the close button is the
   first thing in the card so keyboard users reach it immediately.
   ========================================================================== */
.promo{
  position:fixed;right:22px;bottom:22px;z-index:60;
  width:min(370px,calc(100vw - 32px));
  background:var(--paper);color:var(--text);
  border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--r);
  box-shadow:0 18px 44px rgba(31,43,37,.20),0 3px 10px rgba(31,43,37,.10);
  padding:20px 22px 22px;
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .38s ease,transform .38s cubic-bezier(.2,.7,.3,1);
}
.promo.in{opacity:1;transform:none}
.promo[hidden]{display:none}

.promo-x{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:50%;
  color:var(--muted);cursor:pointer;transition:background .15s,color .15s;
}
.promo-x svg{width:17px;height:17px}
.promo-x:hover{background:var(--tint);color:var(--ink)}
.promo-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.promo-eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);margin:0 34px 8px 0;font-weight:500
}
.promo-title{
  font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;
  font-size:30px;line-height:1;color:var(--ink);margin:0 0 9px;letter-spacing:.01em
}
.promo-text{font-size:14.5px;line-height:1.55;color:var(--text);margin:0 0 16px}
.promo .btn{font-size:14px;padding:11px 18px}

@media(max-width:620px){
  .promo{
    right:10px;left:10px;bottom:10px;width:auto;
    padding:17px 18px 19px;border-left-width:3px
  }
  .promo-title{font-size:25px}
  .promo-text{font-size:14px;margin-bottom:14px}
  .promo .btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .promo{transition:none;transform:none}
}

/* ==========================================================================
   Offer card — the discount, made impossible to miss.
   Price anchoring: the old number is struck through right next to the new one,
   the percentage sits beside it, and the total saving is the loudest thing on
   the card. All three figures are real.
   ========================================================================== */
.promo-list{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid var(--line)}
.promo-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line)
}
.promo-what{font-size:13.5px;color:var(--muted);line-height:1.3;flex:1 1 auto}
.promo-nums{
  display:inline-flex;align-items:baseline;gap:8px;flex:0 0 auto;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap
}
.promo-nums s{color:var(--muted);font-size:13px;text-decoration-thickness:1.5px;opacity:.85}
.promo-nums b{color:var(--ink);font-size:17px;font-weight:700}
.promo-off{
  font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;
  background:var(--accent);color:var(--accent-ink);
  padding:3px 7px;border-radius:6px
}

/* the headline saving */
.promo-save{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 15px;padding:11px 14px;
  background:var(--accent);color:var(--accent-ink);border-radius:11px
}
.promo-save span{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;opacity:.95
}
.promo-save strong{
  font-family:"Barlow Condensed",sans-serif;font-weight:800;
  font-size:30px;line-height:1;letter-spacing:.01em;font-variant-numeric:tabular-nums
}
.promo-note{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:11px 0 0
}
.promo .btn{width:100%;justify-content:center}

@media(max-width:620px){
  .promo-save strong{font-size:27px}
  .promo-what{font-size:13px}
  .promo-nums b{font-size:16px}
}

/* The active language pill is white on --olive, which measures 3.74:1 —
   under the 4.5 minimum for text this size. 11% darker clears it at 4.56:1
   and is indistinguishable from the original at a glance. Scoped to this pill
   so the olive stays exactly as it is everywhere else. */
.langs button,.langs a.on,.langs a.on{background:#6D7B52}

/* ==========================================================================
   Two fixes that only appeared once the site became real pages.
   ========================================================================== */

/* The pilot page's heading was an <h2> inside the dark band, coloured light by
   `.pilot h2`. Promoting it to <h1> for SEO dropped it out of that rule, so it
   rendered near-black on near-black — the headline was simply gone. A promoted
   h1 must look exactly like the h2 it replaced. */
.pilot h1,.band h1{color:var(--ground)}
.pilot h1{font-size:clamp(34px,4.6vw,56px);line-height:.98;margin:0 0 6px}
.band h1{font-size:clamp(36px,5vw,64px);line-height:.98}

/* The nav underline only ever animated on hover. In the one-page site the
   current section was marked by colour alone; now that each page is a real URL
   the active link should hold the underline open. */
nav ul a[aria-current="page"]::after{right:0}
nav ul a[aria-current="page"]{color:var(--accent);font-weight:600}

.herophoto .shot{background-image:url(/img/hero.webp)}
.imgband .shot-services{background-image:url(/img/services.webp)}
.imgband .shot-how{background-image:url(/img/how.webp)}
.imgband .shot-trust{background-image:url(/img/trust.webp)}