/* dpp.gs — new site draft. Shared styles for all pages. Production palette. */
:root{
  --bg:#F5F3EC;--bg2:#FFFFFF;--ink:#14201C;--ink2:#5C6660;--ink3:#9AA09B;
  --blue:#0E6E5C;--blue-dark:#0A5446;--blue-light:#E3F0EC;
  --accent:#C9A227;--accent-dark:#A8851E;--accent-light:#FBF4DD;
  --border:#E4E0D6;--radius:10px;--r-lg:16px;
  --shadow-sm:0 1px 2px rgba(20,32,28,.04),0 2px 8px rgba(20,32,28,.05);
  --shadow-md:0 4px 12px rgba(20,32,28,.06),0 12px 32px rgba(20,32,28,.07);
  --font-head:'Plus Jakarta Sans',sans-serif;--font-body:'Manrope',sans-serif;
  --lane-eu:#1E3A8A;--lane-self:#0E6E5C;--lane-agent:#6D28D9;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
/* page background — identical treatment to the production site */
body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-repeat:no-repeat;background-position:center;background-size:cover;
  background-image:linear-gradient(rgba(245,243,236,.91),rgba(245,243,236,.953)), url("/dpp-bg-v4.webp")}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.15;letter-spacing:-.02em}
a{color:var(--blue);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(245,243,236,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.hdr{display:flex;align-items:flex-end;gap:16px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.logo{font-family:var(--font-head);font-weight:800;font-size:1.22rem;color:var(--ink);letter-spacing:-.03em;line-height:1.05;display:block;padding:0}
.logo span{color:var(--blue)}
.logo small{display:block;font-family:var(--font-body);font-size:.63rem;font-weight:600;color:var(--ink3);letter-spacing:.03em;line-height:1.1;margin-top:2px}
.nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:10px;align-items:flex-start}
.navlink{position:relative;display:block;font-family:var(--font-head);font-size:.9rem;font-weight:600;line-height:1.25;
  padding:6px 12.4px;border:0;background:transparent;color:var(--ink);border-radius:8px;transition:.15s;white-space:nowrap}
.navlink small{display:block;font-weight:500;font-size:.72rem;color:var(--ink3);margin-top:1px}
.navlink.active small{color:var(--blue)}
.navlink:hover{color:var(--blue);background:var(--blue-light)}
.navlink.active{color:var(--blue-dark);background:var(--blue-light)}
.navlink.active::after{content:"";position:absolute;left:9px;right:9px;bottom:0;height:2px;background:var(--blue);border-radius:1px}
.hdr-sp{flex:1}
/* co-brand on a partner landing page: their logo beside the line that names
   them, in the hero rather than the header — the header has no room for a
   second logo once the labels are translated */
.cobrand-line{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  font-family:var(--font-body);font-size:.95rem;font-weight:600;color:var(--ink2);margin-bottom:14px}
.cobrand-logo{height:34px;width:auto;max-width:190px;object-fit:contain;display:block}
.nav{flex:0 1 auto;min-width:0}
.logo,.hdr .btn,.hdr .langsw,.hdr .lang{flex:0 0 auto}
.hdr{row-gap:6px;gap:12px}
.navlink{padding:6px 9px}
/* a configuration instruction: one translatable sentence, the literals inside it */
.setting{font-style:italic}
.hdr .btn,.hdr .lang,.hdr .langsw,.hdr-sp,.logo{align-self:center}
/* EN, Login and Sign Up share one box height */
.hdr .btn,.hdr .lang{padding:8px 14px;font-size:.82rem;line-height:1.25;border-width:1px;border-style:solid}
.btn{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:.82rem;padding:9px 16px;border-radius:9px;border:1px solid transparent;transition:.15s;white-space:nowrap;cursor:pointer}
.btn-ghost{border-color:var(--border);background:var(--bg2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-solid{background:var(--blue);color:#fff}
.btn-solid:hover{background:var(--blue-dark)}
.btn-quiet{border-color:transparent;background:transparent;color:var(--ink2)}
.btn-quiet:hover{color:var(--blue);background:var(--blue-light)}
.lang{font-size:.76rem;font-weight:600;color:var(--ink2);padding:8px 10px;border:1px solid var(--border);background:var(--bg2);border-radius:9px}

/* hero */
.hero{padding:17px 0 13px}
.hero h1{font-size:clamp(1.85rem,4vw,2.85rem);font-weight:800;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--blue);border-bottom:3px solid var(--accent);padding-bottom:2px}
.hero .tagline{margin-top:12px;font-family:var(--font-head);font-weight:700;color:var(--blue);font-size:clamp(1.05rem,2vw,1.45rem);letter-spacing:-.01em}
.hero .lead{margin-top:18px;font-size:1.02rem;color:var(--ink2)}
.hero .lead + .lead{margin-top:12px}
.hero-cta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.trust{display:flex;gap:26px;margin-top:28px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--border)}
.trust div{font-size:.8rem;color:var(--ink2)}
.trust strong{display:block;font-family:var(--font-head);font-size:1.15rem;color:var(--ink);font-weight:800}

/* page intro (sub-pages) */
.pagehead{padding-top:26px;padding-bottom:10px}
.pagehead h1{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:800;margin:0 0 26px}
.pagehead .intro{margin-top:22px;font-size:.98rem;color:var(--ink2);background:var(--bg2);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow-sm)}

/* deadline */
.deadline{display:flex;align-items:flex-start;gap:14px;background:var(--accent-light);border:1px solid #EBD9A0;
  border-left:4px solid var(--accent);border-radius:var(--radius);padding:14px 18px;margin-top:20px}
.deadline b{font-family:var(--font-head);white-space:nowrap}
.deadline span{font-size:.88rem;color:#6B5310}

section{padding:40px 0}
section.tight{padding-top:20px;padding-bottom:14px}
section.tight-top{padding-top:13px}
section.tight-cta{padding-top:20px}
section.cta-before{padding-bottom:20px}
section.tight-bottom{padding-bottom:14px}
section.half-pad{padding-top:20px;padding-bottom:20px}
.sec-h{font-size:1.45rem;font-weight:800;margin-bottom:6px}
.sec-sub{color:var(--ink2);font-size:.94rem;margin-bottom:24px}

/* two processes; the second one branches */
/* lanes (kept for the partners page) */
.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.lanes.one{grid-template-columns:minmax(0,520px);justify-content:start}
.lane{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.lane-h{padding:12px 16px;color:#fff;font-family:var(--font-head);font-weight:700;font-size:.85rem}
.lane-h small{display:block;font-weight:500;opacity:.85;font-size:.72rem}
.lane[data-lane="eu"] .lane-h{background:var(--lane-eu)}
.lane[data-lane="self"] .lane-h{background:var(--lane-self)}
.lane[data-lane="agent"] .lane-h{background:var(--lane-agent)}
.lane-body{padding:16px}
.step{position:relative;border:1px solid var(--border);border-radius:var(--radius);padding:11px 13px;background:var(--bg2)}
.step + .step{margin-top:26px}
.step + .step::before{content:"";position:absolute;left:50%;top:-22px;width:1px;height:14px;background:var(--border)}
.step + .step::after{content:"";position:absolute;left:50%;top:-9px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid var(--border);transform:translateX(-4px)}
.step .ref{display:inline-block;font-family:var(--font-head);font-size:.66rem;font-weight:800;letter-spacing:.04em;color:var(--ink3);background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:1px 5px;margin-bottom:5px}
.step b{display:block;font-family:var(--font-head);font-size:.82rem;font-weight:700;margin-bottom:3px}
.step p{font-size:.78rem;color:var(--ink2);line-height:1.45}
a.note:hover{background:#F5EAC4;border-color:var(--accent)}
.step .note{display:inline-block;margin-top:7px;font-size:.7rem;font-weight:600;color:var(--accent-dark);background:var(--accent-light);border:1px solid #EBD9A0;border-radius:6px;padding:2px 7px}
.step.done{border-color:var(--blue);background:var(--blue-light)}
.step.join{border-style:dashed}
.lane-foot{margin-top:auto;padding:12px 16px;border-top:1px dashed var(--border);font-size:.75rem;color:var(--ink3)}

/* timeline */
.tl{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 24px;box-shadow:var(--shadow-sm)}
.tl-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;position:relative;margin-top:22px}
.tl-track::before{content:"";position:absolute;top:6px;left:6%;right:6%;height:2px;background:var(--border)}
.tl-i{position:relative;padding-top:24px;text-align:center;padding-inline:5px;min-width:0;
  display:block;color:inherit;border-radius:8px;transition:.15s}
a.tl-i:hover{background:var(--bg2);box-shadow:var(--shadow-sm)}
a.tl-i:hover b{color:var(--blue)}
.tl-i::before{content:"";position:absolute;top:0;left:50%;width:13px;height:13px;border-radius:50%;background:var(--bg2);border:3px solid var(--ink3);transform:translateX(-50%)}
.tl-i.hot::before{border-color:var(--accent);background:var(--accent)}
.tl-i.now::before{border-color:var(--blue);background:var(--blue)}
.tl-i b{display:block;font-family:var(--font-head);font-size:.8rem;font-weight:800;overflow-wrap:break-word;hyphens:auto}
.tl-i.hot b{color:var(--accent-dark)}
.tl-i.now b{color:var(--blue)}
.tl-i span{font-size:.74rem;color:var(--ink2);line-height:1.35;display:block;margin-top:2px}
.tl-i em{display:block;font-style:normal;font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);margin-top:5px}
.tl-i.hot em,.tl-i.now em{color:var(--blue)}

/* passports */
.pass-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px}
.pass{display:block;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;transition:.15s;color:var(--ink)}
.pass:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.pass .sect{font-size:.64rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue)}
.pass b{display:block;font-family:var(--font-head);font-size:.85rem;margin:5px 0 2px;line-height:1.25}
.pass span{font-size:.73rem;color:var(--ink3)}
.badge{display:inline-block;margin-top:8px;font-size:.58rem;font-weight:700;letter-spacing:.06em;color:#92400e;background:#fef3c7;border:1px solid #fde68a;padding:1px 6px;border-radius:8px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm)}
.card h4{font-size:.98rem;margin-bottom:7px}
.card p{font-size:.86rem;color:var(--ink2)}

/* cta strip */
.cta{background:var(--blue);color:#fff;border-radius:var(--r-lg);padding:28px 30px;display:flex;
  flex-direction:row;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta h3{font-size:1.25rem;color:#fff}
.cta p{font-size:.9rem;opacity:.9;margin-top:4px}
.cta > div{flex:1 1 auto;min-width:0}
.cta .btn{flex:0 0 auto}
.cta .btn-ghost{background:#fff;border-color:#fff;color:var(--blue-dark)}

footer{border-top:1px solid var(--border);padding:26px 0;margin-top:20px}
.foot{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;font-size:.82rem}
.foot a{color:var(--ink2)}
.foot a:hover{color:var(--blue)}
.copy{text-align:center;font-size:.74rem;color:var(--ink3);margin-top:12px}
.copy a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:#CFCBC2}
.copy a:hover{color:var(--blue)}

@media(max-width:1080px){.tl-track{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);gap:18px}
  .tl-track::before{display:none}}
@media(max-width:900px){
  .lanes{grid-template-columns:1fr}
  .lanes.one{grid-template-columns:1fr}
  .tl-track{grid-template-columns:repeat(2,1fr);gap:18px}
  .tl-track::before{display:none}
  .hdr-sp{display:none}
}

/* live passport cards — same treatment as production homepage */
.demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
.demo{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:.8rem .6rem;color:var(--ink);transition:border-color .15s,transform .15s,box-shadow .15s;min-width:0}
.demo:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.demo-imgs{display:flex;align-items:center;gap:8px}
.demo-thumb{width:56px;height:56px;object-fit:contain;border-radius:5px;background:#fff}
.demo-qr{width:56px;height:56px;border:1px solid var(--border);border-radius:5px;padding:2px;background:#fff;display:block}
.demo-body{text-align:center;line-height:1.3;width:100%;flex:1;display:flex;flex-direction:column;align-items:center}
.demo-body .demo-only{margin-top:auto;padding-top:1px;margin-bottom:0}
.demo-body strong{display:block;font-family:var(--font-head);font-size:.72rem;font-weight:700;color:var(--blue);
  text-transform:capitalize;letter-spacing:.02em}
.demo-body .nm{font-size:.8rem;font-weight:600;color:var(--ink);margin-top:2px;line-height:1.2}
.demo-body .br{font-size:.66rem;color:var(--ink3);margin-top:1px;line-height:1.25}
.demo-only{display:inline-block;font-size:.55rem;font-weight:700;letter-spacing:.06em;color:#92400e;background:#fef3c7;
  border:1px solid #fde68a;padding:1px 6px;border-radius:8px;opacity:.8;margin-top:5px;line-height:1.4}
.demo-more{display:inline-block;margin-top:16px;font-family:var(--font-head);font-size:.82rem;font-weight:700;
  color:var(--blue);border:1px solid var(--blue);border-radius:9px;padding:9px 18px;transition:.15s}
.demo-more:hover{background:var(--blue-light)}

/* sixth tile — opens the full passport list */
.demo.all-tile{justify-content:center;border-style:dashed;border-color:var(--blue);background:var(--blue-light);text-align:center}
.demo.all-tile:hover{background:#D7E9E3;border-style:solid}
.demo.all-tile .big{font-family:var(--font-head);font-size:1.7rem;font-weight:800;color:var(--blue);line-height:1}
.demo.all-tile .lbl{font-family:var(--font-head);font-size:.8rem;font-weight:700;color:var(--blue-dark);margin-top:6px;line-height:1.25}
.demo.all-tile .sub{font-size:.68rem;color:var(--ink2);margin-top:3px}

/* figures — screenshots of the Commission's own Registry, with a source line */
.fig{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px;box-shadow:var(--shadow-sm);margin:0}
.fig img{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:8px}
.fig figcaption{margin-top:10px;font-size:.78rem;color:var(--ink2);line-height:1.45}
.fig figcaption b{font-family:var(--font-head);color:var(--ink)}
.fig .src{display:block;margin-top:4px;font-size:.68rem;color:var(--ink3)}
.fig-side{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
@media(max-width:900px){.fig-side{grid-template-columns:1fr}}

/* two things side by side — theirs vs yours */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.duo{grid-template-columns:1fr}}
.duo .card .tag{display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  border-radius:8px;padding:2px 7px;margin-bottom:8px}
.duo .card.theirs .tag{color:#1E3A8A;background:#E7ECF7;border:1px solid #CBD8EF}
.duo .card.yours .tag{color:var(--blue-dark);background:var(--blue-light);border:1px solid #BFDDD4}
.duo dl{margin-top:10px;font-size:.82rem}
.duo dt{font-family:var(--font-head);font-weight:700;color:var(--ink);margin-top:9px}
.duo dd{color:var(--ink2);margin-top:1px}

/* the things that get applications rejected */
.gotchas{display:grid;gap:12px}
.gotcha{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:14px 16px}
.gotcha b{display:block;font-family:var(--font-head);font-size:.9rem;margin-bottom:4px}
.gotcha p{font-size:.85rem;color:var(--ink2)}
.gotcha code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82em;
  background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 4px}

/* certificate attribute mapping */
.kv{width:100%;border-collapse:collapse;margin-top:12px;font-size:.82rem}
.kv th,.kv td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--border)}
.kv th{font-family:var(--font-head);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.kv td code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;color:var(--blue-dark)}
.kv tr:last-child td{border-bottom:0}

/* honest status list */
.status{display:grid;gap:10px}
.status div{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--ink2)}
.status .mk{flex:0 0 auto;width:15px;height:15px;margin-top:3px}
.status b{font-family:var(--font-head);color:var(--ink);font-weight:700}

/* ═══ two paths to get started ════════════════════════════════════════════ */
.paths-wrap{position:relative}

/* handwritten margin notes */
.scribble{position:absolute;font-family:'Caveat',cursive;font-size:1.12rem;line-height:1.15;
  color:var(--ink3);pointer-events:none;display:flex;align-items:flex-end;gap:4px;z-index:2}
.scribble svg{flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}
.scribble.s-scale{top:56px;right:20px;color:var(--lane-self)}
.scribble.s-end{bottom:-34px;right:8px;color:var(--lane-self)}
@media(max-width:1100px){.scribble{display:none}}

/* the two panels */
.paths{display:grid;grid-template-columns:1fr 1.62fr;gap:20px;align-items:stretch}
@media(max-width:980px){.paths{grid-template-columns:1fr}}
.ppanel{position:relative;border-radius:22px;padding:20px 18px 18px;display:flex;flex-direction:column;overflow:hidden}
.ppanel[data-path="registry"]{background:#F3F7FD;border:1px solid #E1E9F7}
.ppanel[data-path="onboarding"]{background:#F1F9F5;border:1px solid #DAEDE4}

/* panel header — round brand mark, title, subtitle, blurb */
.phead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:0 4px}
.pmark{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ppanel[data-path="registry"] .pmark{background:var(--lane-eu)}
.ppanel[data-path="onboarding"] .pmark{background:var(--blue)}
.phead h3{font-family:var(--font-head);font-size:1.5rem;font-weight:800;letter-spacing:-.025em;line-height:1.1}
.phead .sub{display:block;font-family:var(--font-body);font-size:.88rem;font-weight:500;color:var(--ink2);margin-top:3px;line-height:1.25;min-height:2.5em}
.phead .exp{grid-column:1/-1;margin-top:14px;font-size:.87rem;color:var(--ink2);line-height:1.5;min-height:3em}
.ppanel.full{grid-column:1/-1}
.pillus{grid-column:3;justify-self:end;width:150px;height:auto;opacity:.95;pointer-events:none}
.ppanel[data-path="registry"] .pillus{width:104px}
@media(max-width:1240px){.ppanel[data-path="registry"] .pillus{display:none}}
@media(max-width:1100px){.pillus{display:none}}

/* branches inside a panel */
.pbranches{display:grid;gap:14px;margin-top:18px;flex:1}
.pbranches.two{grid-template-columns:1fr 1fr}
@media(max-width:820px){.pbranches.two{grid-template-columns:1fr}}
.pbranch{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:0 0 14px;display:flex;flex-direction:column}
.pbranch-h{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:16px 16px 0 0;
  font-family:var(--font-head);font-weight:700;font-size:1rem;line-height:1.2}
.pbranch[data-branch="diy"] .pbranch-h{background:#E6F3EC;color:var(--blue-dark)}
.pbranch[data-branch="outsource"] .pbranch-h{background:#F1EBFC;color:var(--lane-agent)}
.ppanel[data-path="registry"] .pbranch-h{background:#E7EEFA;color:var(--lane-eu)}
.pbranch-h .let{width:32px;height:32px;border-radius:50%;flex:0 0 auto;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:800}
.pbranch[data-branch="diy"] .let{background:var(--blue)}
.pbranch[data-branch="outsource"] .let{background:var(--lane-agent)}
.pbranch-h .t{display:block;line-height:1.2;min-height:2.4em}
.pbranch-h small{display:block;font-weight:500;font-size:.76rem;opacity:.8;margin-top:2px;line-height:1.25;min-height:2.5em}

/* the numbered rail */
.psteps{list-style:none;margin:0;padding:14px 15px 0;display:flex;flex-direction:column;gap:9px;position:relative}
.pstep{position:relative;display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.pstep::before{content:"";position:absolute;left:13px;top:30px;bottom:-15px;width:2px;background:var(--border)}
.pstep:last-child::before{display:none}
.pnum{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-size:.8rem;font-weight:800;color:#fff;position:relative;z-index:1}
.ppanel[data-path="registry"] .pnum{background:var(--lane-eu)}
.pbranch[data-branch="diy"] .pnum{background:var(--blue)}
.pbranch[data-branch="outsource"] .pnum{background:var(--lane-agent)}
.pcard{position:relative;background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;
  padding:4px 0 10px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.pbranch .pstep:last-child .pcard{border-bottom:0}
.pico{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.ppanel[data-path="registry"] .pico{background:#E7EEFA;color:var(--lane-eu)}
.pbranch[data-branch="diy"] .pico{background:#E6F3EC;color:var(--blue)}
.pbranch[data-branch="outsource"] .pico{background:#F1EBFC;color:var(--lane-agent)}
.pico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pcard b{display:block;font-family:var(--font-head);font-size:.9rem;font-weight:700;line-height:1.25;transition:.15s}
.pcard p{font-size:.82rem;color:var(--ink2);line-height:1.45;margin-top:3px}
.pcard .txt{min-width:0}

/* the pill link that sits with a step */
.ppill{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-family:var(--font-head);
  font-size:.76rem;font-weight:700;padding:5px 11px;border-radius:8px;transition:.15s;white-space:nowrap}
.ppanel[data-path="registry"] .ppill{background:#E7EEFA;color:var(--lane-eu)}
.ppanel[data-path="registry"] .ppill:hover{background:#D6E2F6}
.pbranch[data-branch="diy"] .ppill{background:var(--blue);color:#fff}
.pbranch[data-branch="diy"] .ppill:hover{background:var(--blue-dark)}
.pbranch[data-branch="outsource"] .ppill{background:#F1EBFC;color:var(--lane-agent)}
.pbranch[data-branch="outsource"] .ppill:hover{background:#E6DBFA}
.ppills{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.ppills .ppill{margin-top:0}
.ppanel[data-path="registry"] .ppill.own{background:var(--blue);color:#fff}
.ppanel[data-path="registry"] .ppill.own:hover{background:var(--blue-dark)}
.pcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pcard-top .ppill{margin-top:0}

/* closing bar of a panel or branch */
.pdone{display:flex;align-items:center;gap:11px;margin:14px 15px 0;padding:11px 14px;border-radius:12px;
  font-family:var(--font-head);font-weight:700;font-size:.9rem;min-height:64px}
.pdone .tick{width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff}
.pdone .tick svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pdone small{display:block;font-family:var(--font-body);font-size:.78rem;font-weight:500;opacity:.85;margin-top:1px}
.pdone.ok{background:#E6F3EC;color:var(--blue-dark)}
.pdone.ok .tick{background:var(--blue)}
.pdone.violet{background:#F1EBFC;color:var(--lane-agent)}
.pdone.violet .tick{background:var(--lane-agent)}
.pdone .aside{margin-left:auto;font-family:var(--font-body);font-size:.74rem;font-weight:500;color:var(--ink3);text-align:right}
@media(max-width:600px){.pdone .aside{display:none}}
.ppanel > .pdone{margin-top:auto;margin-bottom:14px}
.pbranch > .pdone{margin-top:auto}

/* a whole step card links to its explanation; pills stay clickable above it */
.pgo{position:absolute;inset:0;border-radius:inherit;z-index:1}
.pcard .ppill,.pcard .txt a,.pcard .ppills{position:relative;z-index:2}
.pcard:has(.pgo){cursor:pointer}
.pcard:has(.pgo):hover b{color:var(--lane-eu)}
.pcard:has(.pgo):hover .pico{background:#D8E4F7}
.psteps .pstep[id]{scroll-margin-top:86px}

/* the branch headers are one height whatever they carry */
.pbranch-h{min-height:78px;align-items:center}
.ppanel[data-path="registry"] .pbranch-h .let{background:var(--lane-eu);color:#fff}

/* both panel headers drop their blurb on the same line */
.phead{grid-template-rows:minmax(76px,auto) auto}
.pillus{height:62px;width:auto}
.ppanel[data-path="registry"] .pillus{height:62px;width:auto}
@media(max-width:980px){.phead{grid-template-rows:auto auto}}

/* ═══ contact ═════════════════════════════════════════════════════════════ */
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.cform{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--shadow-sm)}
.cform .sec-h{font-size:1.15rem;margin-bottom:18px}
.crow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){.crow{grid-template-columns:1fr}}
.cform label{display:block;font-family:var(--font-head);font-size:.82rem;font-weight:700;
  color:var(--ink);margin-bottom:14px}
.cform .req{color:#B91C1C;font-weight:800}
.cform .opt{font-weight:500;color:var(--ink3);font-size:.75rem}
.cform input,.cform textarea{display:block;width:100%;margin-top:6px;font-family:var(--font-body);
  font-size:.9rem;font-weight:400;color:var(--ink);background:var(--bg2);border:1px solid var(--border);
  border-radius:9px;padding:10px 12px;transition:.15s}
.cform textarea{resize:vertical;min-height:120px;line-height:1.5}
.cform input::placeholder,.cform textarea::placeholder{color:#B6B2A9}
.cform input:focus,.cform textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light)}
.cfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.cfoot .btn{cursor:pointer}
.cfoot .btn:disabled{opacity:.6;cursor:default}
.cnote{font-size:.76rem;color:var(--ink3)}
.cmsg{margin-top:16px;padding:12px 14px;border-radius:10px;font-size:.87rem;line-height:1.5}
.cmsg.good{background:var(--blue-light);color:var(--blue-dark);border:1px solid #BFDDD4}
.cmsg.bad{background:#FDECEC;color:#8A1C1C;border:1px solid #F3C9C9}
.cside{display:grid;gap:14px}
.cside .card p{font-size:.86rem}

/* ═══ about — stat tiles and the certification strip ══════════════════════ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.stat{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm)}
.stat b{display:block;font-family:var(--font-head);font-size:1.9rem;font-weight:800;color:var(--blue);
  letter-spacing:-.03em;line-height:1}
.stat .lbl{display:block;font-family:var(--font-head);font-size:.88rem;font-weight:700;color:var(--ink);margin-top:8px;line-height:1.3}
.stat .sub{display:block;font-size:.78rem;color:var(--ink2);margin-top:4px;line-height:1.4}
.certs{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px}
.cert{display:flex;align-items:flex-start;gap:11px;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px}
.cert .mk{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--blue-light);color:var(--blue);
  display:flex;align-items:center;justify-content:center}
.cert .mk svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cert b{display:block;font-family:var(--font-head);font-size:.88rem;font-weight:700;line-height:1.25}
.cert span{display:block;font-size:.76rem;color:var(--ink2);margin-top:3px;line-height:1.4}
.placelist{font-size:.88rem;color:var(--ink2);line-height:1.9}
.placelist b{font-family:var(--font-head);color:var(--ink);font-weight:700}
.caveat{margin-top:16px;padding:13px 15px;border-radius:var(--radius);background:var(--accent-light);
  border:1px solid #EBD9A0;font-size:.83rem;color:#6B5310;line-height:1.5}

/* ═══ sector pages ════════════════════════════════════════════════════════ */
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
.feat .card h4{display:flex;align-items:center;gap:9px;font-size:.95rem}
.feat .card h4 .fi{flex:0 0 auto;width:28px;height:28px;border-radius:8px;background:var(--blue-light);
  color:var(--blue);display:flex;align-items:center;justify-content:center}
.feat .card h4 .fi svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.feat .card p{margin-top:8px}
.livecard{background:var(--blue-light);border:1px solid #BFDDD4}
.livecard h4{color:var(--blue-dark)}
.faq{display:grid;gap:10px}
.faq details{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;transition:.15s}
.faq details[open]{border-color:var(--blue)}
.faq summary{font-family:var(--font-head);font-weight:700;font-size:.92rem;cursor:pointer;
  list-style:none;display:flex;align-items:flex-start;gap:10px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";flex:0 0 auto;font-weight:800;color:var(--blue);line-height:1.2}
.faq details[open] summary::before{content:"–"}
.faq p{margin-top:9px;padding-left:20px;font-size:.87rem;color:var(--ink2);line-height:1.55}
.related{margin-top:22px;font-size:.84rem;color:var(--ink2)}
.related b{font-family:var(--font-head);color:var(--ink)}

/* ═══ glossary ════════════════════════════════════════════════════════════ */
.azbar{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 26px;position:sticky;top:64px;z-index:20;
  background:rgba(245,243,236,.94);backdrop-filter:blur(8px);padding:10px 0}
.azbar a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;
  padding:0 8px;border:1px solid var(--border);background:var(--bg2);border-radius:8px;
  font-family:var(--font-head);font-size:.82rem;font-weight:700;color:var(--ink2);transition:.15s}
.azbar a:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}
.azh{font-family:var(--font-head);font-size:1.5rem;font-weight:800;color:var(--blue);
  margin:26px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--blue-light);scroll-margin-top:110px}
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}
.term{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;
  scroll-margin-top:120px}
.term h3{font-family:var(--font-head);font-size:.98rem;font-weight:700;line-height:1.25}
.term p{margin-top:7px;font-size:.85rem;color:var(--ink2);line-height:1.55}
.term code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
  background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:1px 4px}
.term .also{margin-top:10px;padding-top:9px;border-top:1px dashed var(--border);
  font-size:.76rem;color:var(--ink3);line-height:1.6}

/* ═══ language switcher ═══════════════════════════════════════════════════ */
.langsw{position:relative}
.langsw summary{list-style:none;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--ink2);
  padding:8px 14px;border:1px solid var(--border);background:var(--bg2);border-radius:9px;line-height:1.25}
.langsw summary::-webkit-details-marker{display:none}
.langsw summary::after{content:"▾";margin-left:5px;opacity:.6}
.langsw summary:hover{border-color:var(--blue);color:var(--blue)}
.langsw-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:172px;
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-md);
  padding:6px;display:grid;gap:1px;max-height:60vh;overflow:auto}
.langsw-menu a{display:block;padding:7px 10px;border-radius:7px;font-size:.82rem;color:var(--ink2)}
.langsw-menu a:hover{background:var(--blue-light);color:var(--blue-dark)}
.langsw-menu a.on{background:var(--blue);color:#fff;font-weight:700}

/* On a narrow screen the switcher sits at the left gutter, and a menu anchored
   right:0 to that little button grows LEFTWARDS off the screen — 88px of a 172px
   panel was outside the viewport, so you could not see which language you were
   about to tap (reported from a phone, 2026-09-25).
   A breakpoint alone does not settle it: at 768px English and Slovak have the
   switcher on the right while German, whose header wraps earlier, still has it on
   the left. So below 820px the menu stops hanging off the button at all —
   .langsw stops being the containing block, the sticky <header> becomes it, and
   the panel spans the header with a 16px gutter on both sides. Pinned on both
   edges it cannot leave the viewport whatever the language does to the header. */
@media(max-width:820px){
  .langsw{position:static}
  .langsw-menu{left:16px;right:16px;min-width:0}
}

/* ═══ "no obligation yet — but start now" panel ═══════════════════════════ */
.startnow{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  background:var(--blue-light);border:1px solid #BFDDD4;border-left:4px solid var(--blue);
  border-radius:var(--r-lg);padding:20px 22px;margin-top:20px}
.startnow .mk{width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
.startnow .mk svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.startnow h3{font-family:var(--font-head);font-size:1.05rem;font-weight:800;color:var(--blue-dark);line-height:1.25}
.startnow p{margin-top:8px;font-size:.9rem;color:var(--ink2);line-height:1.6}
.startnow p + p{margin-top:8px}
.startnow strong{color:var(--blue-dark)}
@media(max-width:600px){.startnow{grid-template-columns:1fr}.startnow .mk{display:none}}

/* ═══ pricing ═════════════════════════════════════════════════════════════ */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;align-items:stretch}
.plan{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 18px;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);position:relative}
.plan.hot{border-color:var(--blue);box-shadow:var(--shadow-md)}
.plan .tag{position:absolute;top:-10px;left:18px;background:var(--blue);color:#fff;font-family:var(--font-head);
  font-size:.6rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:7px}
.plan h3{font-family:var(--font-head);font-size:1.05rem;font-weight:800}
.plan .amt{font-family:var(--font-head);font-size:2rem;font-weight:800;color:var(--ink);letter-spacing:-.03em;
  line-height:1;margin-top:10px}
.plan .amt small{font-family:var(--font-body);font-size:.78rem;font-weight:500;color:var(--ink3);letter-spacing:0}
.plan .yr{font-size:.76rem;color:var(--ink3);margin-top:5px}
.plan .cap{font-family:var(--font-head);font-size:.86rem;font-weight:700;color:var(--blue-dark);
  background:var(--blue-light);border-radius:8px;padding:6px 10px;margin-top:12px;text-align:center}
.plan ul{list-style:none;margin:14px 0 18px;display:grid;gap:7px}
.plan li{font-size:.82rem;color:var(--ink2);line-height:1.45;padding-left:18px;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:5px;border-left:2px solid var(--blue);
  border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.plan .btn{margin-top:auto;text-align:center}
.svc{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;margin-top:16px;
  box-shadow:var(--shadow-sm)}
.svc-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;justify-content:space-between}
.svc-h h3{font-family:var(--font-head);font-size:1.2rem;font-weight:800}
.svc-price{font-family:var(--font-head);font-size:1.35rem;font-weight:800;color:var(--blue);white-space:nowrap}
.svc-price small{font-family:var(--font-body);font-size:.75rem;font-weight:500;color:var(--ink3)}
.svc > p{margin-top:10px;font-size:.9rem;color:var(--ink2);line-height:1.6}
.svc .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px}
@media(max-width:760px){.svc .cols{grid-template-columns:1fr}}
.svc h4{font-family:var(--font-head);font-size:.86rem;font-weight:700;margin-bottom:7px}
.svc ul{list-style:none;display:grid;gap:6px}
.svc li{font-size:.83rem;color:var(--ink2);line-height:1.5;padding-left:16px;position:relative}
.svc li::before{content:"·";position:absolute;left:4px;color:var(--blue);font-weight:800}
.svc .no li::before{content:"×";font-size:.8em;color:var(--ink3)}
.ptable{width:100%;border-collapse:collapse;margin-top:10px;font-size:.84rem}
.ptable th,.ptable td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--border)}
.ptable th{font-family:var(--font-head);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3)}
.ptable td:last-child{text-align:right;font-family:var(--font-head);font-weight:700;color:var(--ink);white-space:nowrap}
.ptable tr:last-child td{border-bottom:0}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}
.cta .btn-solid.alt{background:#fff;color:var(--blue-dark);border-color:#fff}
.cta .btn-solid.alt:hover{background:var(--blue-light)}
.cta .btn-ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.cta .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}