/* The public site's pages (written by scripts/site-build.js from site/). Builds on home.css: the same h- tokens, buttons,
   hero and ledger. Every grid of cards is even: the same width and the same height in a row, the words centred. */

.site .h-ic{width:24px; height:24px; flex:none;}

/* ------------------------------------------------------------------ the top bar */
.site .h-top{position:sticky; top:0; z-index:20;}
.site .h-top-row{gap:18px; min-height:70px; align-items:stretch;}
.site .h-brand{align-self:center; font-size:23px; white-space:nowrap;}
.site .h-top-row > .h-btn,.site .h-top-row > .h-lang{align-self:center; white-space:nowrap; flex-shrink:0;}
.site .h-brand{flex-shrink:0;}
.site .h-nav{display:flex; align-items:stretch; gap:4px; margin-inline-start:auto; margin-inline-end:0; font-size:14.5px;}
.site .h-nav > a,.site .h-dd > a{display:flex; align-items:center; gap:6px; padding:0 12px; border-bottom:0; color:var(--on-night-soft); text-decoration:none; position:relative; white-space:nowrap;}
.site .h-nav > a::after,.site .h-dd > a::after{content:''; position:absolute; inset-inline:12px; bottom:14px; height:2px; background:var(--gold); transform:scaleX(0); transition:transform .2s;}
.site .h-nav > a:hover,.site .h-dd > a:hover,.site .h-dd:focus-within > a{color:var(--gold);}
.site .h-nav > a[aria-current="page"],.site .h-dd > a[aria-current="page"]{color:var(--gold);}
.site .h-nav > a[aria-current="page"]::after,.site .h-dd > a[aria-current="page"]::after,.site .h-nav > a:hover::after{transform:scaleX(1);}
.h-caret{font-size:11px; opacity:.7;}
.h-dd{display:flex;}
/* the mega menus: the whole width under the bar, a tidy grid of even tiles */
.h-mega{display:none; position:absolute; top:100%; inset-inline:0; margin-inline:auto; width:min(1080px, calc(100vw - 32px)); background:#fff; color:var(--ink); border-radius:0 0 18px 18px; box-shadow:0 30px 60px -20px rgba(20,32,26,.45), 0 0 0 1px var(--line); padding:18px; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:8px;}
.h-mega-roles{grid-template-columns:repeat(3,1fr); width:min(900px, calc(100vw - 32px));}
.h-dd:hover .h-mega,.h-dd:focus-within .h-mega{display:grid; animation:megaIn .18s ease;}
@keyframes megaIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
.h-mega a{display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:12px; text-decoration:none; color:var(--ink); transition:background .15s;}
.h-mega a:hover,.h-mega a:focus-visible{background:var(--tint);}
.h-mega-ic{flex:none; width:40px; height:40px; border-radius:11px; background:var(--gold-soft); color:var(--gold-deep); display:flex; align-items:center; justify-content:center;}
.h-mega b{display:block; font-size:15px; line-height:1.35;}
.h-mega small{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px; line-height:1.5; color:var(--ink-soft); margin-top:2px;}
.h-mega .h-mega-all{grid-column:1 / -1; justify-content:center; align-items:center; background:var(--night); color:var(--gold); font-weight:600; font-size:14.5px; margin-top:4px; padding:12px;}
.h-mega .h-mega-all:hover{background:var(--night-2);}

/* the phone's menu (a details box: no script needed) */
.h-burger{display:none; align-self:center;}
.h-burger > summary{list-style:none; display:flex; align-items:center; gap:8px; min-height:42px; padding:0 14px; border:1.5px solid #4a5d51; border-radius:10px; color:var(--on-night); cursor:pointer; font-size:14px; font-weight:600;}
.h-burger > summary::-webkit-details-marker{display:none;}
.h-burger-ic{display:grid; gap:4px; width:18px;}
.h-burger-ic i{display:block; height:2px; background:currentColor; border-radius:2px; transition:transform .2s, opacity .2s;}
.h-burger[open] .h-burger-ic i:nth-child(1){transform:translateY(6px) rotate(45deg);}
.h-burger[open] .h-burger-ic i:nth-child(2){opacity:0;}
.h-burger[open] .h-burger-ic i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.h-burger-nav{position:absolute; top:100%; inset-inline:0; background:var(--night); border-top:1px solid var(--night-line); box-shadow:0 30px 40px -20px rgba(0,0,0,.5); max-height:calc(100vh - 70px); overflow-y:auto; padding:10px var(--gutter) 22px; display:grid; gap:2px;}
.h-burger-nav a,.h-burger-nav summary{display:flex; align-items:center; gap:12px; min-height:50px; padding:0 12px; border-radius:10px; color:var(--on-night); text-decoration:none; font-size:16px; font-weight:500; cursor:pointer;}
.h-burger-nav a:hover,.h-burger-nav summary:hover{background:var(--night-2); color:var(--gold);}
.h-burger-nav details > summary{list-style:none; justify-content:space-between;}
.h-burger-nav details > summary::-webkit-details-marker{display:none;}
.h-burger-nav details > summary::after{content:'+'; font-size:22px; color:var(--gold);}
.h-burger-nav details[open] > summary::after{content:'−';}
.h-burger-nav details[open]{background:var(--night-2); border-radius:12px; padding-bottom:6px;}
.h-burger-nav details a{font-size:15px; min-height:46px; color:var(--on-night-soft);}
.h-burger-nav details a .h-ic{color:var(--gold); width:20px; height:20px;}
.h-burger-nav .h-burger-login{margin-top:8px; justify-content:center; border:1.5px solid var(--gold); color:var(--gold); font-weight:600;}

/* ------------------------------------------------------------------ the top of a page */
.site .h-hero{padding:64px 0 72px;}
.site .h-hero h1{font-size:clamp(38px,5.4vw,62px); line-height:1.12;}
html[dir="ltr"] .site .h-hero h1{font-size:clamp(34px,4.8vw,54px); line-height:1.08;}
.h-hero-plain .h-hero-grid{grid-template-columns:1fr; text-align:center; justify-items:center;}
.h-hero-plain .h-lead{margin-inline:auto;}
.h-hero-plain .h-actions{justify-content:center;}
.h-crumb{display:flex; gap:8px; align-items:center; font-size:13.5px; color:var(--ink-soft); margin-bottom:18px;}
.h-crumb a{color:var(--ink-soft); text-decoration:none;} .h-crumb a:hover{color:var(--gold-deep); text-decoration:underline;}
.h-hero-ic{display:inline-flex; width:58px; height:58px; border-radius:16px; background:var(--night); color:var(--gold); align-items:center; justify-content:center; margin-bottom:18px; box-shadow:0 12px 24px -12px rgba(20,32,26,.6);}
.h-hero-ic .h-ic{width:30px; height:30px;}
.h-hero-pic{min-width:0;}
.h-lead b,.h-split-text b,.h-big b,.h-sec-lead b{color:var(--ink); font-weight:700;}

/* ------------------------------------------------------------------ sections */
.h-sec-head{text-align:center; max-width:760px; margin:0 auto 40px;}
.h-sec-head h2{margin-bottom:0;}
.h-sec-lead{color:var(--ink-soft); font-size:17.5px; margin-top:14px;}
.h-dark .h-sec-lead{color:var(--on-night-soft);}
.h-dark .h-eyebrow{color:var(--gold);}
.h-big p + p{margin-top:18px;}

/* even cards */
.h-cards{display:grid; gap:18px; grid-auto-rows:1fr;}
.h-cols-2{grid-template-columns:repeat(2,1fr);}
.h-cols-3{grid-template-columns:repeat(3,1fr);}
.h-cols-4{grid-template-columns:repeat(4,1fr);}
.h-card{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:28px 22px 24px; color:var(--ink); text-decoration:none; min-width:0; position:relative; transition:transform .2s, box-shadow .2s, border-color .2s;}
.h-card h3{font-size:24px; line-height:1.25;}
.h-card p{font-size:15px; color:var(--ink-soft); line-height:1.7;}
.h-card-ic{width:56px; height:56px; border-radius:16px; background:var(--gold-soft); color:var(--gold-deep); display:flex; align-items:center; justify-content:center; margin-bottom:4px;}
.h-card-ic .h-ic{width:28px; height:28px;}
.h-card-link:hover,.h-card-link:focus-visible{transform:translateY(-4px); border-color:var(--gold); box-shadow:0 22px 40px -24px rgba(20,32,26,.45);}
.h-card-link:hover .h-card-ic{background:var(--night); color:var(--gold);}
.h-more{margin-top:auto; padding-top:6px; font-size:14px; font-weight:600; color:var(--gold-deep);}
.h-more::after{content:' ←';}
html[dir="ltr"] .h-more::after{content:' →';}
.h-card-small{padding:22px 18px 20px;}
.h-card-small h3{font-size:21px;}
.h-card-small p{font-size:14px;}
.h-dark .h-card{background:var(--night-2); border-color:var(--night-line); color:var(--on-night);}
.h-dark .h-card h3{color:#fff;}
.h-dark .h-card p{color:var(--on-night-soft);}
.h-dark .h-card-ic{background:rgba(217,168,95,.14); color:var(--gold);}

/* words beside a picture */
.h-split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
.h-split-rev .h-split-text{order:2;}
.h-split-text h2{margin-bottom:18px;}
.h-split-text > p{font-size:17px; color:var(--ink-soft); line-height:1.85;}
.h-split-text > p + p{margin-top:12px;}
.h-split-pic{min-width:0;}
.h-ticks{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px;}
.h-ticks li{display:flex; gap:12px; align-items:flex-start; font-size:16px; line-height:1.7;}
.h-ticks li .h-ic{flex:none; width:24px; height:24px; padding:4px; border-radius:50%; background:var(--ok-soft); color:var(--ok); stroke-width:3; margin-top:2px;}
.h-ticks-cols{grid-template-columns:repeat(2,1fr); gap:14px 32px; margin-top:0;}
.h-ticks-cols li{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; align-items:center;}
.h-sec-tint .h-ticks-cols li{background:#fff;}

/* frames for the screens */
.h-window-fig,.h-art,.h-phone,.h-pair{margin:0;}
.h-window{background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 34px 60px -30px rgba(20,32,26,.5), 0 0 0 1px var(--line);}
.h-window-bar{display:flex; align-items:center; gap:7px; height:34px; padding:0 14px; background:#eef2ec; border-bottom:1px solid var(--line); direction:ltr;}
.h-window-bar i{width:11px; height:11px; border-radius:50%; background:#d6ddd3;}
.h-window-bar i:first-child{background:#e3a294;} .h-window-bar i:nth-child(2){background:#e8cc8d;} .h-window-bar i:nth-child(3){background:#a9cdb4;}
.h-window-bar span{margin-inline:auto; font-size:12px; color:var(--ink-soft); background:#fff; border-radius:999px; padding:1px 18px; border:1px solid var(--line);}
.h-window img{display:block; width:100%; height:auto; aspect-ratio:1280/800; object-fit:cover; object-position:top;}
.h-phone{width:min(290px,78%); margin-inline:auto;}
.h-phone-body{background:var(--night); padding:10px; border-radius:40px; box-shadow:0 34px 60px -26px rgba(20,32,26,.6), inset 0 0 0 2px #2c3d33; position:relative;}
.h-phone-body::before{content:''; position:absolute; top:18px; left:50%; width:70px; height:18px; margin-left:-35px; border-radius:12px; background:var(--night); z-index:1;}
.h-phone-body img{display:block; width:100%; height:auto; aspect-ratio:390/780; object-fit:cover; object-position:top; border-radius:31px; background:#fff;}
.h-pair{position:relative; padding-bottom:48px; padding-inline-end:12%;}
.h-phone-over{position:absolute; inset-inline-end:0; bottom:0; width:30%; margin:0;}
.h-phone-over .h-phone-body{border-radius:26px; padding:6px;}
.h-phone-over .h-phone-body::before{top:12px; width:44px; height:11px; margin-left:-22px;}
.h-phone-over .h-phone-body img{border-radius:21px;}
/* two phones: the second a little lower, both the same size */
.h-phones{margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:520px; margin-inline:auto; align-items:start;}
.h-phones .h-phone{width:100%;}
.h-phones .h-phone:nth-child(2){margin-top:56px;}
.h-phones figcaption{grid-column:1 / -1;}
.h-window-fig figcaption,.h-phone figcaption,.h-pair figcaption,.h-art figcaption{text-align:center; font-size:14px; color:var(--ink-soft); margin-top:14px; font-weight:500;}
.h-draw{display:block; width:100%; height:auto; max-width:540px; margin-inline:auto; overflow:visible;}
.h-float{animation:hFloat 6s ease-in-out var(--d,0s) infinite;}
@keyframes hFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);}}
.h-pop{transform-box:fill-box; transform-origin:center; opacity:0; animation:hPop .55s cubic-bezier(.2,.9,.3,1.3) calc(var(--d,0s) + .2s) forwards;}
@keyframes hPop{from{opacity:0; transform:scale(.4);} to{opacity:1; transform:none;}}

/* numbered steps */
.h-steps2{list-style:none; margin:0 auto; padding:0; counter-reset:s; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:18px;}
.h-steps2 li{counter-increment:s; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px 22px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;}
.h-steps2 li::before{content:counter(s); width:50px; height:50px; border-radius:50%; background:var(--night); color:var(--gold); font-family:var(--display); font-size:28px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:6px;}
.h-steps2 b{font-family:var(--display); font-size:23px; line-height:1.25;}
.h-steps2 p{font-size:15px; color:var(--ink-soft);}

/* facts in big numbers */
.h-stats-sec{padding:70px 0;}
.h-stats{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:18px;}
.h-stats li{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; padding:26px 18px; border-radius:18px; background:var(--night-2); border:1px solid var(--night-line);}
.h-stats b{font-family:var(--display); font-size:64px; line-height:1; color:var(--gold);}
.h-stats span{font-size:15px; color:var(--on-night-soft); line-height:1.6;}

/* questions */
.h-faq{display:grid; gap:12px;}
.h-faq details{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.h-sec-tint .h-faq details{background:#fff;}
.h-faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; font-weight:600; font-size:17px;}
.h-faq summary::-webkit-details-marker{display:none;}
.h-faq summary::after{content:'+'; flex:none; width:32px; height:32px; border-radius:50%; background:var(--gold-soft); color:var(--gold-deep); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:500; transition:transform .2s;}
.h-faq details[open] summary::after{content:'−'; background:var(--night); color:var(--gold);}
.h-faq details > div{padding:0 22px 20px; color:var(--ink-soft); font-size:16px; line-height:1.85;}

/* the way something travels */
/* one row on a wide screen (every step the same width), one column below it - never a ragged second row */
.h-flow{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); grid-auto-rows:1fr; gap:34px;}
.h-flow li{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 14px 18px;}
.h-sec-tint .h-flow li{background:#fff;}
.h-flow li:not(:last-child)::after{content:'←'; position:absolute; inset-inline-end:-27px; top:50%; transform:translateY(-50%); color:var(--gold-deep); font-size:20px; font-weight:700;}
html[dir="ltr"] .h-flow li:not(:last-child)::after{content:'→';}
.h-flow-ic{width:52px; height:52px; border-radius:50%; background:var(--night); color:var(--gold); display:flex; align-items:center; justify-content:center; margin-bottom:4px;}
.h-flow b{font-family:var(--display); font-size:21px; line-height:1.25;}
.h-flow small{font-size:14px; color:var(--ink-soft); line-height:1.6;}

/* screens side by side */
.h-gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:40px 32px;}

/* the band that asks to begin */
.h-cta{background:radial-gradient(700px 300px at 10% 0%, rgba(217,168,95,.25), transparent 70%), var(--night); color:var(--on-night); padding:64px 0;}
.h-cta-row{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.h-cta h2{color:#fff; font-size:clamp(32px,4vw,44px); margin-bottom:10px;}
.h-cta p{color:var(--on-night-soft); font-size:17px; max-width:36em;}
.h-cta .h-actions{margin-top:0;}

/* the footer */
.h-foot2{background:var(--night); color:var(--on-night-soft); border-top:1px solid var(--night-line); padding:56px 0 0; font-size:14.5px;}
.h-foot-grid{display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:32px;}
.h-foot-brand p{margin-top:14px; max-width:22em; line-height:1.8;}
.h-foot-brand .h-actions{margin-top:20px;}
.h-foot-brand .h-btn{min-height:42px; padding:0 18px; font-size:14px;}
.h-foot2 h3{font-family:var(--body); font-size:15px; font-weight:700; color:#fff; margin-bottom:14px;}
.h-foot2 ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.h-foot2 ul a{color:var(--on-night-soft); text-decoration:none;}
.h-foot2 ul a:hover{color:var(--gold);}
.h-foot-line{margin-top:44px; padding:16px 0; border-top:1px solid var(--night-line); text-align:center; font-size:13px;}
.h-foot-line a{color:var(--gold); text-decoration:none;}

/* ------------------------------------------------------------------ narrower screens */
@media (max-width:1180px){
  .site .h-top-cta{display:none;}
  .h-cols-4{grid-template-columns:repeat(3,1fr);}
  .h-foot-grid{grid-template-columns:repeat(3,1fr);}
  .h-foot-brand{grid-column:1 / -1;}
}
@media (max-width:980px){
  .site .h-nav,.site .h-top-row > .h-btn-line:not(.h-lang){display:none;}
  .h-burger{display:block;}
  .site .h-brand{margin-inline-end:auto;}
  .site .h-top-row{align-items:center;}
  .h-cols-3,.h-cols-4{grid-template-columns:repeat(2,1fr);}
  .h-split{grid-template-columns:1fr; gap:40px;}
  .h-split-rev .h-split-text{order:0;}
  .h-steps2{grid-template-columns:repeat(2,1fr);}
  .h-stats{grid-template-columns:repeat(2,1fr);}
  .h-flow{grid-template-columns:1fr; gap:30px; max-width:380px; margin-inline:auto; grid-auto-rows:auto;}
  .h-flow li:not(:last-child)::after{content:'↓'; inset-inline-end:auto; left:50%; top:auto; bottom:-27px; transform:translateX(-50%);}
  html[dir="ltr"] .h-flow li:not(:last-child)::after{content:'↓';}
  .site .h-hero-pic{max-width:620px; margin-inline:auto; width:100%;}
}
@media (max-width:640px){
  .site .h-top-row{flex-wrap:nowrap; min-height:62px; padding-block:0; gap:10px;}
  .site .h-brand{font-size:19px; gap:8px;}
  .site .h-brand img{width:34px; height:auto;}
  .h-burger > summary{padding:0 11px;}
  .h-burger > summary > span:not(.h-burger-ic){display:none;}
  .site .h-lang{padding:0 12px;}
  .site .h-hero{padding:40px 0 52px;}
  .site .h-hero h1{font-size:clamp(34px,10vw,44px);}
  .h-sec-head{margin-bottom:28px;}
  .h-cols-2,.h-cols-3,.h-cols-4,.h-steps2,.h-gallery,.h-ticks-cols{grid-template-columns:1fr;}
  .h-cards,.h-steps2{grid-auto-rows:auto;}
  /* the long lists of links (the sections, the roles, related pages): two even tiles a row, the name only */
  .h-cards.h-cards-compact{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:12px;}
  .h-cards-compact .h-card{padding:18px 10px 16px; gap:8px; justify-content:center;}
  .h-cards-compact .h-card h3{font-size:19px;}
  .h-cards-compact .h-card p,.h-cards-compact .h-more{display:none;}
  .h-cards-compact .h-card-ic{width:48px; height:48px; margin-bottom:0;}
  .h-stats{gap:12px;}
  .h-stats b{font-size:48px;}
  .h-stats li{padding:20px 12px;}
  .h-pair{padding-inline-end:0; padding-bottom:36px;}
  .h-phone-over{width:34%;}
  .h-cta{padding:52px 0;}
  .h-cta .h-actions{width:100%;}
  .h-foot-grid{grid-template-columns:repeat(2,1fr); gap:28px 20px;}
  .h-faq summary{padding:16px 18px; font-size:16px;}
}
@media (max-width:380px){
  .site .h-brand small{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .h-float,.h-pop,.h-dd:hover .h-mega,.h-dd:focus-within .h-mega{animation:none; opacity:1;}
  .h-card-link:hover{transform:none;}
}

/* eighteen sections in the menu: three a row */
.h-mega.h-mega-modules{grid-template-columns:repeat(3,1fr);}