/* site.css  Harmelo public site, launch design (LS-02, Oct 2026). Loaded after marketing.css on every public marketing page.
 * Architectural, operational, credible: deep teal institutional bands, a light tonal ground, layered product imagery from
 * the accepted asset pack (assets/product), and an orange accent taken from the logo. Palette and contrast in
 * notes/MARKETING_PALETTE.md. Presentation only; no form control, name or behaviour is changed here. */
:root{
  --navy:#0E3B43; --navy-2:#0B3038; --navy-line:#24525A;
  --paper:#EEF4F3; --tint:#EEF4F3; --tint-2:#E2ECEA;
  --text:#1B2A2F; --muted:#4A5A60; --faint:#56666C; --line:#D3DFDD; --line-soft:#E3ECEA;
  --teal:#9FE3D4; --teal-ink:#0F6E75; --teal-ink-hover:#0B585E; --teal-wash:#E1F0EE; --brand:#1F8F96;
  --orange:#F28C2B; --orange-ink:#B85A0D;
  --deep:#0E3B43; --deep-2:#0A2A30;
  --serif:"Source Serif 4","Source Serif Pro",Georgia,serif;
  --wrap:1200px;
  --shadow-lg:0 30px 70px -28px rgba(9,40,46,.45),0 12px 28px -18px rgba(9,40,46,.35);
  --shadow:0 18px 40px -24px rgba(9,40,46,.38);
}
body{background:#fff;color:var(--text)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink)}
.kicker::before{content:"";width:22px;height:2px;background:var(--orange);border-radius:2px}
.on-dark .kicker,.sec-deep .kicker{color:var(--teal)}
.h1{font-size:clamp(38px,5vw,64px);line-height:1.04;letter-spacing:-.022em}
.h2{font-size:clamp(30px,3.4vw,44px)}
.sub{color:var(--muted)}

/* Bands: light, tint and deep, alternating on purpose. */
.sec-tint{background:var(--tint)}
.sec-deep{background:radial-gradient(1200px 520px at 85% -10%,rgba(31,143,150,.32),transparent 60%),linear-gradient(180deg,var(--deep),var(--deep-2));color:#E4EFEE}
.sec-deep .h2,.sec-deep .h3,.sec-deep h3{color:#fff}
.sec-deep .sub,.sec-deep p{color:#BFD3D1}
.sec-deep a{color:var(--teal)}
.sec-paper{background:var(--tint)}
.sec-navy{background:linear-gradient(180deg,var(--deep),var(--deep-2))}

/* Hero with the product in it. */
.hx{position:relative;overflow:hidden;padding:72px 0 0;background:linear-gradient(180deg,#F5F9F8 0%,#E7F0EE 100%)}
.hx::after{content:"";position:absolute;inset:auto 0 0 0;height:180px;background:linear-gradient(180deg,rgba(14,59,67,0),rgba(14,59,67,.06))}
.hx-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.hx .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:650;color:var(--teal-ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 8px;margin:0 0 22px}
.hx .eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--orange);display:inline-block}
.hx .lede{color:#33464C;margin:22px 0 0}
.hx-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:32px}
.hx-proof{position:relative;margin:0 -200px 0 -30px}
.hx-proof img{width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow-lg)}
.hx-phone{position:absolute;right:120px;bottom:-12px;width:24%;border-radius:22px;box-shadow:var(--shadow-lg)}
.hx-strip{position:relative;z-index:1;margin-top:64px;border-top:1px solid var(--line);background:rgba(255,255,255,.7);backdrop-filter:saturate(1.2)}
.hx-strip ul{list-style:none;margin:0 auto;padding:18px 32px;max-width:var(--wrap);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.hx-strip li{font-size:14.5px;color:var(--muted);line-height:1.45}
.hx-strip b{display:block;color:var(--text);font-size:15px}
.btn-ghost{background:transparent;color:var(--teal-ink);border:1px solid var(--teal-ink)}
.btn-ghost:hover{background:var(--teal-wash);color:var(--teal-ink-hover)}
.on-dark .btn-ghost,.sec-deep .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}

/* Product imagery. */
.shot{margin:0;position:relative}
.shot img{width:100%;height:auto}
.shot.flat img{border-radius:14px;box-shadow:var(--shadow)}
.shot img{margin:-3.5% 0}
.shot figcaption,.loop figcaption{margin-top:12px;font-size:14px;color:var(--faint)}
.sec-deep .shot figcaption,.sec-deep .loop figcaption{color:#9FB8B5}
.demo-flag{display:inline-block;font-size:12px;font-weight:650;letter-spacing:.04em;color:#8F4508;background:#FDF0E2;border-radius:4px;padding:2px 7px;margin-right:8px}
.sec-deep .demo-flag{color:#3A1E04;background:#F7B877}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.rev>:first-child{order:2}

/* Motion: real UI loops. Poster first; marketing.js plays only when motion is welcome. */
.loop{margin:0;position:relative}
.loop video,.loop img.poster{display:block;width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow-lg);background:#fff}
.loop-ctl{position:absolute;right:12px;top:12px;min-height:44px;min-width:44px;border-radius:999px;border:1px solid rgba(255,255,255,.7);background:rgba(14,59,67,.78);color:#fff;font:600 13px var(--sans);padding:0 14px;cursor:pointer}
.loop-ctl:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* The operating model: problem, record, intelligence. */
.model{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px;counter-reset:m}
.model-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 24px 24px}
.model-step::before{counter-increment:m;content:"0" counter(m);font:600 13px var(--mono);color:var(--orange-ink);display:block;margin-bottom:10px}
.model-step h3{font:650 20px/1.3 var(--sans);margin:0 0 8px;color:var(--text)}
.model-step p{margin:0;color:var(--muted);font-size:15.5px}
.model-step ul{margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:15px}

/* Feature grids and lists. */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.fgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.fcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.sec-tint .fcard{background:#fff}
.sec-deep .fcard{background:rgba(255,255,255,.04);border-color:rgba(159,227,212,.18)}
.fcard h3{font:650 18px/1.3 var(--sans);margin:0 0 8px}
.fcard p{margin:0;color:var(--muted);font-size:15.5px}
.sec-deep .fcard p{color:#BFD3D1}
.fcard .tag{display:inline-block;font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:10px}
.sec-deep .fcard .tag{color:var(--teal)}
.qlist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.qlist li{position:relative;padding-left:30px;color:var(--muted)}
.qlist li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;background:var(--teal-wash);box-shadow:inset 0 0 0 5px var(--teal-ink)}
.sec-deep .qlist li{color:#C9DBD9}
.sec-deep .qlist li::before{background:rgba(159,227,212,.15);box-shadow:inset 0 0 0 5px var(--teal)}
.qlist b{color:var(--text)}
.sec-deep .qlist b{color:#fff}
.honest{margin-top:28px;padding:16px 18px;border-left:3px solid var(--orange);background:#FFF8F0;border-radius:0 10px 10px 0;font-size:15px;color:#4A3A2A;max-width:72ch}
.sec-deep .honest{background:rgba(242,140,43,.08);color:#F2DCC4}

/* Audience rail. */
.aud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:36px}
.aud a{display:block;text-decoration:none;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 18px 16px;transition:border-color .15s,transform .15s}
.aud a:hover{border-color:var(--teal-ink);transform:translateY(-2px)}
.aud b{display:block;font-size:16px}
.aud span{display:block;margin-top:4px;font-size:14px;color:var(--muted)}

/* Closing call to action. */
.cta-band{padding:88px 0;background:radial-gradient(900px 400px at 15% 0%,rgba(242,140,43,.18),transparent 60%),linear-gradient(180deg,var(--deep),var(--deep-2));color:#E4EFEE}
.cta-band .h2{color:#fff;max-width:20ch}
.cta-band p{color:#BFD3D1;max-width:60ch}
.cta-band .row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.cta-band .btn-primary{background:var(--orange);color:#2A1503}
.cta-band .btn-primary:hover{background:#F6A251;color:#2A1503}

/* Existing components, brought into the same system. */
.mk-hero{background:linear-gradient(180deg,#F5F9F8 0%,#E7F0EE 100%)}
.mk-hero .eyebrow{background:#fff;border:1px solid var(--line)}
.proof-frame{border-radius:14px;overflow:hidden;box-shadow:var(--shadow);border:0}
.form-card{border-radius:16px;box-shadow:var(--shadow)}
.mk-foot{background:linear-gradient(180deg,#0B3038,#08232A);color:#A9C0BE}
.mk-foot a{color:#E4EFEE}
.foot-related,.foot-legal{border-color:#1E4A51}
.press-card{border-radius:12px}

@media (max-width:1100px){.hx-proof{margin-right:-60px}.hx-phone{right:40px}}
@media (max-width:980px){
  .hx-grid,.split,.split.rev{grid-template-columns:1fr;gap:36px}
  .split.rev>:first-child{order:0}
  .hx-proof{margin:0}
  .hx-phone{right:-6px;width:30%}
  .model,.fgrid,.fgrid.two{grid-template-columns:1fr}
  .aud{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-strip ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .hx{padding-top:40px}
  .hx-phone{display:none}
  .aud{grid-template-columns:1fr}
  .hx-strip ul{grid-template-columns:1fr;padding:16px 22px}
  .cta-band{padding:64px 0}
  .loop-ctl{top:8px;right:8px}
}
@media (prefers-reduced-motion:reduce){.aud a{transition:none}.aud a:hover{transform:none}}
.mk-hero .kicker{color:var(--teal-ink)}

/* LS-02: the launch captures carry their own frame, so the older navy box around hero shots is dropped; caption ink and the
   amber label meet WCAG AA (axe, tools/site/public-a11y.js). */
.hero-shot .shot{background:none;padding:0;box-shadow:none;border-radius:0}
.hero-shot .shot figcaption{color:#4F5D63}
.why-now b{color:#8F4508}

/* LS-04: standalone text links are thumb-sized on a phone (scripts/verify_mobile.py, 32 px floor). */
.text-link,.card p>a:only-child{display:inline-block;padding:7px 0}
/* Solutions: what each role gets, and the note under the role cards. */
.gets-h{margin:22px 0 0;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}
.qlist.gets{margin-top:12px;gap:10px}
.qlist.gets li{color:var(--text);font-size:16px}
.aud-note{margin:18px 0 0;font-size:15px;color:var(--muted)}
.aud-note a{display:inline-block;padding:7px 0}
.aud a b span{display:inline;margin-left:4px;color:var(--teal-ink)}

/* Conversion pass (12 Oct 2026): problem / Harmelo / outcome beside every product view, the record chain, the seven
   questions, the intelligence pillars, the stakeholder discovery cards and photography. */
.pho{margin:22px 0 0;display:grid;gap:10px;border-left:3px solid var(--teal-ink);padding:4px 0 4px 18px}
.pho div{display:grid;grid-template-columns:150px 1fr;gap:12px}
.pho dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink);padding-top:3px}
.pho dd{margin:0;color:var(--text);font-size:15.5px;line-height:1.5}
.sec-deep .pho{border-left-color:#7FD1C8}.sec-deep .pho dt{color:#9EDDD5}.sec-deep .pho dd{color:#E3EEEC}
.proof-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:36px;align-items:center}
.proof-row .pho{margin-top:0}
.chain{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:c}
.chain li{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 16px}
.chain li::after{content:"\2192";position:absolute;right:-12px;top:50%;transform:translateY(-50%);color:var(--teal-ink);font-weight:700;z-index:1}
.chain li:last-child::after{content:none}
.chain b{display:block;font-size:17px;color:var(--teal-ink)}
.chain span{display:block;margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.45}
.know{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:36px}
.know div{border-top:3px solid var(--teal-ink);background:#fff;border-radius:0 0 12px 12px;padding:18px 16px;box-shadow:0 1px 0 var(--line)}
.know b{display:block;font-size:17px;color:var(--text)}
.know span{display:block;margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.5}
.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:48px}
.pillars a{display:block;text-decoration:none;border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:20px 18px;background:rgba(255,255,255,.04)}
.pillars a:hover{border-color:#7FD1C8}
.pillars b{display:block;color:#fff;font-size:17px}
.pillars span{display:block;margin-top:8px;color:#C9DBD9;font-size:14.5px;line-height:1.5}
.fits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:36px}
.fits a{display:block;text-decoration:none;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 20px 18px;transition:border-color .15s,transform .15s}
.fits a:hover{border-color:var(--teal-ink);transform:translateY(-2px)}
.fits b{display:block;font-size:17px}
.fits b span{color:var(--teal-ink);margin-left:4px}
.fits dl{margin:12px 0 0}
.fits dt{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink);margin-top:10px}
.fits dt{font-size:12px}
.fits dd{margin:3px 0 0;font-size:14.5px;color:var(--muted);line-height:1.45}
.photo{margin:0}
.photo img{width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.jump a{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--text);text-decoration:none;font-size:14.5px;min-height:36px}
.lifecycle{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.lifecycle li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 16px;border-top:3px solid var(--teal-ink)}
.lifecycle b{display:block;font-size:17px}
.lifecycle span{display:block;margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.45}
.owns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:36px}
.owns div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 16px}
.owns b{display:block;font-size:16.5px}
.owns span{display:block;margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.45}
@media (max-width:1100px){.chain,.lifecycle{grid-template-columns:repeat(3,minmax(0,1fr))}.chain li::after{content:none}.know,.pillars,.owns{grid-template-columns:repeat(2,minmax(0,1fr))}.fits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.proof-row{grid-template-columns:1fr;gap:20px}.pho div{grid-template-columns:1fr;gap:2px}.chain,.lifecycle,.know,.pillars,.fits,.owns{grid-template-columns:1fr}}
.know .know-cta{display:block;text-decoration:none;background:var(--teal-ink);border-radius:12px;padding:18px 16px;color:#fff}
.know .know-cta b{color:#fff}.know .know-cta span{color:#D7ECE9}
.diff{margin:28px 0 0;max-width:880px;padding:18px 22px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:0 12px 12px 0;color:var(--muted);font-size:16px;line-height:1.6}
.diff b{color:var(--text)}
/* HERO-02 (12 Oct 2026, founder review of the live homepage): the hero was too long. The headline ran to four lines at
   laptop widths, the lede ran wide and the product view bled past the page edge. Now: a tighter headline and lede, an
   evenly split grid, the product view kept inside the page (a small bleed only on wide screens), and less padding. */
.hx{padding:48px 0 0}
.hx .hx-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px}
.hx .h1{font-size:clamp(36px,3.8vw,56px);line-height:1.06;max-width:12.5em}
.hx .eyebrow{margin-bottom:16px}
.hx .lede{font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.55;max-width:34em;margin-top:18px}
.hx-actions{margin-top:26px}
.hx-proof{margin:0 -72px 0 0}
.hx-strip{margin-top:48px}
@media (max-width:1240px){.hx-proof{margin:0}}
@media (max-width:980px){.hx{padding-top:32px}.hx .hx-grid{grid-template-columns:1fr;gap:28px}}
/* CONT-01 (13 Oct 2026, founder direction): continuity, transfer and read-only access as a primary pillar. A lifecycle
   track with one continuing record line under it, four "otherwise lost" cards, the transfer manifest beside the handover
   view, and the read-only account panel. Deep band, so it reads as one of the main reasons to buy. */
.hx-strip li a{color:inherit;text-decoration:underline;text-decoration-color:rgba(15,110,117,.35);text-underline-offset:3px}
.cont .sec-head{max-width:820px}
.lc{margin:40px 0 0;padding:0}
.lc-track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;position:relative}
.lc-track li{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(159,227,212,.22);border-radius:12px;padding:14px 14px 16px}
.lc-track li::after{content:"";position:absolute;left:50%;bottom:-23px;width:2px;height:22px;background:rgba(159,227,212,.5)}
.lc-who{display:block;font-weight:700;color:#fff;font-size:15.5px}
.lc-what{display:block;margin-top:4px;font-size:13.5px;line-height:1.4;color:#BFD3D1}
.lc-line{margin-top:22px;height:40px;border-radius:999px;background:linear-gradient(90deg,var(--brand),#2FB3A8 55%,var(--orange));display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px -14px rgba(242,140,43,.6)}
.lc-line span{font-size:14px;font-weight:650;color:#04211D;letter-spacing:.01em;padding:0 16px;text-align:center}
.lc-cap{margin-top:14px;font-size:14.5px;color:#9FB8B5;max-width:760px}
.lc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:40px}
.lc-card{background:rgba(255,255,255,.04);border:1px solid rgba(159,227,212,.18);border-radius:14px;padding:18px 18px 16px}
.lc-card h3{font-size:17px;margin:0 0 8px;color:#fff}
.lc-card p{font-size:14.5px;line-height:1.5;margin:0}
.lc-card .lc-lost{margin-top:12px;padding-top:10px;border-top:1px solid rgba(159,227,212,.18);font-size:13.5px;color:#F7C38E}
.lc-card .lc-lost b{color:#F7B877}
.lc-split{margin-top:56px;align-items:center}
.cont .qlist li{color:#C9DBD9}.cont .qlist b{color:#fff}
.ro{margin-top:56px;background:#F6FAF9;color:var(--text);border-radius:18px;padding:26px 28px;box-shadow:var(--shadow-lg)}
.ro .h3,.ro h3{color:var(--text)}
.ro-head p{color:var(--muted);margin:8px 0 0;max-width:760px}
.ro-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.ro-col{border-radius:12px;padding:16px 18px;background:#fff;border:1px solid var(--line)}
.ro-col h4{margin:0 0 8px;font-size:15px;color:var(--text)}
.ro-col ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.ro-col li{position:relative;padding-left:24px;font-size:15px;color:var(--muted)}
.ro-keep li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:2.5px solid var(--teal-ink);border-bottom:2.5px solid var(--teal-ink);transform:rotate(-45deg)}
.ro-stop li::before{content:"";position:absolute;left:3px;top:.62em;width:11px;height:2.5px;background:#8A9AA0;border-radius:2px}
.ro-keep{border-left:4px solid var(--teal-ink)}.ro-stop{border-left:4px solid #B9C6C9}
.ro .ro-fine{margin:16px 0 0;font-size:13.5px;color:var(--faint)}
.lc-trust{margin:36px 0 0;max-width:880px;font-size:16px;color:#C9DBD9}.lc-trust b{color:#fff}
@media (max-width:1100px){.lc-track{grid-template-columns:repeat(3,minmax(0,1fr))}.lc-track li::after{display:none}.lc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .lc-track{grid-template-columns:1fr;padding-left:18px;border-left:3px solid #2FB3A8;gap:8px}
  .lc-track li{border-radius:10px}
  .lc-line{display:none}
  .lc-grid,.ro-cols{grid-template-columns:1fr}
  .ro{padding:20px 18px}
}

/* ---------- WEB-01 (13 Oct 2026). Pricing estimator (pricing.html). Brand tokens only; one filled primary per panel. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pz-hero{padding:64px 0 28px;background:linear-gradient(180deg,#F5F9F8 0%,#EAF2F0 100%);border-bottom:1px solid var(--line)}
.pz-hero .h1{font-size:clamp(34px,4.2vw,54px);max-width:20ch;margin:14px 0 0}
.pz-lede{color:#33464C;margin:18px 0 0}
.pz-sec{padding:40px 0 80px;background:linear-gradient(180deg,#EAF2F0 0,#fff 260px)}
.pz-who{border:0;margin:0 0 28px;padding:0}
.pz-who legend{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;padding:0}
.pz-who-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pz-opt{position:relative;display:block;cursor:pointer}
.pz-opt input{position:absolute;opacity:0;width:1px;height:1px}
.pz-opt span{display:block;height:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px 13px;transition:border-color .12s,box-shadow .12s}
.pz-opt b{display:block;color:var(--navy);font-size:16px;font-weight:650;line-height:1.3}
.pz-opt em{display:block;font-style:normal;color:var(--muted);font-size:13.5px;margin-top:3px}
.pz-opt:hover span{border-color:#9DB7B3}
.pz-opt input:checked + span{border-color:var(--teal-ink);box-shadow:inset 0 0 0 1px var(--teal-ink),0 8px 22px -16px rgba(9,40,46,.5);background:#F4FAF9}
.pz-opt input:checked + span b::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-left:8px;vertical-align:middle}
.pz-opt input:focus-visible + span{outline:3px solid var(--teal-ink);outline-offset:2px}
.pz-noscript,.pz-unavail{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:10px;padding:18px 20px;margin:0 0 24px}
.pz-unavail h2{font-size:19px;margin:0 0 6px;color:var(--navy)}
.pz-unavail p{margin:0;color:var(--muted)}
.pz-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.pz-calc[hidden],.pz-scoped[hidden],.pz-sel[hidden],.pz-unavail[hidden]{display:none}
.pz-input{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 26px 22px}
.pz-input .h3{margin:0 0 6px;color:var(--navy)}
.pz-base{margin:0 0 20px;color:var(--muted);font-size:15.5px}
.pz-base-n{color:var(--navy);font-weight:700;font-size:17px}
.pz-qty label{display:block;font-weight:650;font-size:15px;margin:0 0 8px;color:var(--text)}
.pz-qty-row{display:flex;align-items:center;gap:10px}
.pz-qty-row input{width:170px;font:inherit;font-size:24px;font-weight:650;color:var(--navy);padding:10px 14px;border:1px solid #A9BCB9;border-radius:8px;background:#fff;font-variant-numeric:tabular-nums}
.pz-qty-row input:focus{outline:none;border-color:var(--teal-ink);box-shadow:0 0 0 3px rgba(15,110,117,.22)}
.pz-qty-row input[aria-invalid="true"]{border-color:#A61B1B;box-shadow:0 0 0 3px rgba(166,27,27,.14)}
.pz-unit{color:var(--muted);font-size:15px}
.pz-range{width:100%;margin:18px 0 4px;accent-color:var(--teal-ink);height:28px;cursor:pointer}
.pz-range:focus-visible{outline:3px solid var(--teal-ink);outline-offset:4px}
.pz-range-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.pz-help{font-size:13.5px;color:var(--muted);margin:10px 0 0}
.pz-err{font-size:14px;color:#A61B1B;font-weight:600;margin:6px 0 0;min-height:1em}
.pz-err:empty{display:none}
.pz-incl.pz-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 26px;grid-column:1;grid-row:2}
.pz-calc > .pz-input{grid-column:1;grid-row:1}
.pz-calc > .pz-result{grid-column:2;grid-row:1 / span 2}
.pz-incl h3{font-size:15px;font-weight:700;margin:0 0 10px;color:var(--navy)}
.pz-incl ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.pz-incl li{position:relative;padding-left:22px;font-size:15px;color:#33464C;line-height:1.45}
.pz-incl li::before{content:"";position:absolute;left:2px;top:7px;width:10px;height:6px;border-left:2px solid var(--teal-ink);border-bottom:2px solid var(--teal-ink);transform:rotate(-45deg)}
.pz-fine{font-size:13.5px;color:var(--muted);margin:12px 0 0}
.pz-bands{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.pz-bands th{text-align:left;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:0 0 6px}
.pz-bands th:last-child,.pz-bands td:last-child{text-align:right}
.pz-bands td{padding:7px 0;border-top:1px solid var(--line-soft);color:#33464C}
.pz-bands tr.on td{color:var(--navy);font-weight:650}
.pz-result{position:sticky;top:92px;background:linear-gradient(180deg,var(--deep),var(--deep-2));color:#E4EFEE;border-radius:14px;padding:26px 26px 22px;box-shadow:var(--shadow)}
.pz-res-h{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9FE3D4;margin:0}
.pz-big{font-family:var(--serif);font-size:clamp(40px,4.6vw,56px);line-height:1.05;color:#fff;margin:10px 0 4px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pz-cur{font-family:var(--sans);font-size:15px;font-weight:600;color:#BFD3D1;letter-spacing:0}
.pz-month{margin:0 0 18px;color:#D5E5E3;font-size:15.5px}
.pz-muted{color:#A9C2BF}
.pz-math,.pz-once{border-top:1px solid rgba(255,255,255,.16);padding:12px 0 4px}
.pz-row{display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-size:14.5px;color:#C9DBD9;font-variant-numeric:tabular-nums}
.pz-row b{color:#fff;font-weight:650;white-space:nowrap}
.pz-row-total{border-top:1px dashed rgba(255,255,255,.22);margin-top:4px;padding-top:9px;color:#fff}
.pz-minnote{margin:6px 0 4px;font-size:13.5px;color:#9FE3D4}
.pz-minnote:empty{display:none}
.pz-go{width:100%;margin-top:16px}
.pz-result .btn-primary{background:var(--teal);color:var(--navy)}
.pz-result .btn-primary:hover{background:#C2F0E5;color:var(--navy)}
.pz-result :focus-visible{outline-color:#9FE3D4}
.pz-disc{font-size:12.5px;color:#A9C2BF;margin:12px 0 0;line-height:1.5}
.pz-flash{animation:pzFlash .45s ease-out}
@keyframes pzFlash{from{opacity:.45}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.pz-flash{animation:none}.pz-opt span{transition:none}}
.pz-scoped{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal-ink);border-radius:12px;padding:22px 24px;max-width:820px}
.pz-scoped .h3{margin:0 0 8px;color:var(--navy)}
.pz-scoped p{margin:0;color:#33464C}
.pz-scoped [data-scoped][hidden]{display:none}
.pz-sel{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.pz-sel-h{margin:0 0 8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pz-sel dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 16px;font-size:15px}
.pz-sel dt{color:var(--muted)}
.pz-sel dd{margin:0;color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums}
.pz-sel-note{margin:10px 0 0;font-size:13px;color:var(--muted)}
.pz-req form[hidden]{display:none}
@media (max-width:980px){.pz-calc{grid-template-columns:1fr;gap:18px}.pz-calc > .pz-input,.pz-calc > .pz-result,.pz-incl.pz-card{grid-column:1;grid-row:auto}.pz-result{position:static}.pz-who-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pz-who-grid{grid-template-columns:1fr 1fr;gap:8px}.pz-opt span{padding:11px 12px}.pz-opt b{font-size:14.5px}.pz-opt em{font-size:12.5px}.pz-incl.pz-card{padding:18px}.pz-input,.pz-result{padding:20px 18px}.pz-qty-row input{width:140px;font-size:22px}.pz-hero{padding:44px 0 22px}}

/* ---------- WEB-01 (13 Oct 2026). Homepage: what Harmelo helps you do, who it serves, how it works. */
.acc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:8px}
.acc-card{position:relative;display:block;background:#fff;border:1px solid var(--line);border-top:3px solid var(--teal-ink);border-radius:12px;padding:22px 22px 20px;text-decoration:none;color:var(--text);transition:border-color .15s,box-shadow .15s,transform .15s}
.acc-card:hover{border-color:#9DB7B3;border-top-color:var(--orange);box-shadow:var(--shadow);color:var(--text)}
.acc-n{display:block;font-family:var(--mono);font-size:12.5px;color:var(--teal-ink);margin-bottom:10px;letter-spacing:.06em}
.acc-card b{display:block;font-size:19px;line-height:1.3;color:var(--navy);margin-bottom:8px}
.acc-card span:last-child{display:block;font-size:15.5px;color:var(--muted);line-height:1.55}
.acc .diff{margin-top:28px}
.serve-org{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.serve-card{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--deep),var(--deep-2));color:#E4EFEE;border-radius:14px;padding:24px 22px 20px;text-decoration:none;min-height:230px;box-shadow:var(--shadow)}
.serve-card b{font-family:var(--serif);font-size:23px;line-height:1.2;font-weight:600;color:#fff;margin-bottom:10px}
.serve-card span{font-size:15px;color:#BFD3D1;line-height:1.55;flex:1}
.serve-card em{font-style:normal;font-weight:650;font-size:14.5px;color:var(--teal);margin-top:16px}
.serve-card em::after{content:" \2192"}
.serve-card:hover{background:linear-gradient(180deg,#124650,var(--deep-2));color:#fff}
.serve-card:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.serve-pro{margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.serve-pro-h{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.serve-pro ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px}
.serve-pro a{display:inline-block;text-decoration:none;color:var(--navy);font-weight:600;font-size:15px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:#F7FAF9}
.serve-pro a:hover{border-color:var(--teal-ink);color:var(--teal-ink)}
.serve-foot{margin:22px 0 0;font-size:15.5px}
.how-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:none;position:relative}
.how-steps li{position:relative;background:#fff;border:1px solid var(--line);padding:22px 22px 20px;margin-right:-1px}
.how-steps li:first-child{border-radius:12px 0 0 12px}
.how-steps li:last-child{border-radius:0 12px 12px 0;margin-right:0}
.how-steps li:not(:last-child)::after{content:"";position:absolute;right:-9px;top:30px;width:16px;height:16px;background:#fff;border-top:1px solid var(--line);border-right:1px solid var(--line);transform:rotate(45deg);z-index:1}
.how-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--deep);color:#fff;font-weight:700;font-size:14px;margin-bottom:12px}
.how-steps b{display:block;font-size:19px;color:var(--navy);margin-bottom:6px}
.how-steps li > span:last-child{display:block;font-size:15px;color:var(--muted);line-height:1.55}
.how-fine{margin-top:18px;max-width:80ch}
@media (max-width:1060px){.serve-org{grid-template-columns:repeat(2,minmax(0,1fr))}.serve-card{min-height:0}}
@media (max-width:980px){.acc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.how-steps{grid-template-columns:1fr 1fr;gap:12px}.how-steps li{border-radius:12px!important;margin:0}.how-steps li::after{display:none}}
@media (max-width:620px){.acc-grid,.serve-org,.how-steps{grid-template-columns:1fr}.serve-pro{padding:14px}}
@media (prefers-reduced-motion:reduce){.acc-card{transition:none}}

/* ---------- WEB-01. Solutions directory: grouped audience cards, no repeated landing pages. */
.sol-hero{padding-bottom:48px}
.sol-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.sol-jump a{text-decoration:none;font-weight:650;font-size:15px;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px}
.sol-jump a:hover{border-color:var(--teal-ink);color:var(--teal-ink)}
.sol-sec{padding:72px 0}
.sol-sub{margin:6px 0 26px}
.sol-grid{display:grid;gap:16px}
.sol-org{grid-template-columns:repeat(2,minmax(0,1fr))}
.sol-pro{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){.sol-pro{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sol-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 22px 18px;scroll-margin-top:96px}
.sol-card h3{margin:0 0 8px;font-size:19px;color:var(--navy)}
.sol-p{margin:0 0 12px;color:var(--muted);font-size:15.5px}
.sol-card ul{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:6px;flex:1;align-content:start}
.sol-card li{position:relative;padding-left:20px;font-size:15px;color:#33464C;line-height:1.45}
.sol-card li::before{content:"";position:absolute;left:2px;top:7px;width:9px;height:5px;border-left:2px solid var(--teal-ink);border-bottom:2px solid var(--teal-ink);transform:rotate(-45deg)}
.sol-go{margin:0}
.sol-go a{font-weight:650;color:var(--teal-ink);text-decoration:none}
.sol-go a::after{content:" \2192"}
.sol-go a:hover{text-decoration:underline}
.sol-major{background:linear-gradient(180deg,var(--deep),var(--deep-2));border-color:transparent;color:#E4EFEE;box-shadow:var(--shadow)}
.sol-major h3{font-family:var(--serif);font-size:25px;font-weight:600;color:#fff}
.sol-major .sol-p{color:#BFD3D1}
.sol-major li{color:#E4EFEE}
.sol-major li::before{border-color:var(--teal)}
.sol-major .sol-go a{color:var(--teal)}
.sol-card:target{outline:3px solid var(--orange);outline-offset:3px}
@media (max-width:980px){.sol-pro{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sol-org,.sol-pro{grid-template-columns:1fr}.sol-sec{padding:56px 0}}

/* ---------- WEB-01. Category navigation (Intelligence) and the four-part feature explanation. */
.cat-nav{position:sticky;top:72px;z-index:40;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
.cat-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.cat-nav ul::-webkit-scrollbar{display:none}
.cat-nav a{display:block;white-space:nowrap;text-decoration:none;color:#33464C;font-weight:600;font-size:15px;padding:14px 14px 12px;border-bottom:3px solid transparent}
.cat-nav a:hover{color:var(--navy)}
.cat-nav a[aria-current="true"]{color:var(--navy);border-bottom-color:var(--orange)}
.cat-nav + .sec,.cat-nav ~ .sec{scroll-margin-top:130px}
@media (max-width:620px){.cat-nav a{padding:12px 10px 10px;font-size:14.5px}}
.in-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.in-card{background:#fff;border:1px solid var(--line);border-left:3px solid var(--teal-ink);border-radius:10px;padding:18px 18px 16px}
.in-card b{display:block;color:var(--navy);font-size:16.5px;margin-bottom:6px}
.in-card span{display:block;color:var(--muted);font-size:15px;line-height:1.5}
@media (max-width:980px){.in-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.in-grid{grid-template-columns:1fr}}
.acc-fine{margin:18px 0 0;max-width:90ch}
.pz-calc[data-state="invalid"] .pz-big,.pz-calc[data-state="invalid"] .pz-month,.pz-calc[data-state="invalid"] .pz-math,.pz-calc[data-state="invalid"] .pz-once{opacity:.35}
/* POSITIONING (14 Oct 2026): the infrastructure foundation, the CMMS band and the custody steps (index, platform). */
.fnd-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.fnd-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:fnd}
.fnd-list li{position:relative;background:#fff;border:1px solid var(--line);border-left:3px solid var(--teal-ink);border-radius:10px;padding:16px 18px 15px 58px;counter-increment:fnd}
.fnd-list li::before{content:counter(fnd,decimal-leading-zero);position:absolute;left:18px;top:17px;font:600 13px/1 "DM Mono",ui-monospace,monospace;color:var(--teal-ink)}
.fnd-list b{display:block;color:var(--navy);font-size:17px;margin-bottom:4px}
.fnd-list span{display:block;color:var(--muted);font-size:15.5px;line-height:1.55}
.fnd-clip{position:relative;max-height:820px;overflow:hidden}
.fnd-clip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(rgba(255,255,255,0),var(--bg,#fff));pointer-events:none}
.fnd-story img{margin:0}
.fnd-story figcaption{margin-top:10px}
.alg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.alg-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 20px 18px}
.alg-card b{display:block;color:var(--navy);font-size:17px;margin-bottom:6px}
.alg-card span{display:block;color:var(--muted);font-size:15.5px;line-height:1.55}
.alg-card.alg-us{border-color:var(--teal-ink);border-top:3px solid var(--orange);box-shadow:var(--shadow)}
.alg-fine{margin:18px 0 0;max-width:90ch}
.lc-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.lc-steps li{color:#C9DBD9;line-height:1.55;padding-left:14px;border-left:2px solid var(--teal)}
.lc-steps b{color:#fff}
.sec:not(.sec-deep) .lc-steps li{color:var(--muted);border-left-color:var(--teal-ink)}
.sec:not(.sec-deep) .lc-steps b{color:var(--text)}
.lc-custody{margin-top:48px}
.fnd-clip.pl-clip{max-height:none}.fnd-clip.pl-clip::after{display:none}
@media (max-width:980px){.fnd-split{grid-template-columns:1fr;gap:32px}.alg-grid{grid-template-columns:1fr}.fnd-clip{max-height:640px}}
@media (max-width:420px){.fnd-list li{padding:14px 14px 13px 48px}.fnd-list li::before{left:14px;top:15px}.fnd-clip{max-height:520px}}