/* Self-hosted fonts: Archivo variable (wght 100-900), Space Mono 400/700 — latin + latin-ext, as served by Google Fonts */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(/fonts/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/space-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/space-mono-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:100%;font-display:swap;src:url(/fonts/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/space-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/space-mono-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

*, ::before, ::after { box-sizing: border-box; }
/* PROTTOBau — design tokens + the complete animation set.
   Extracted VERBATIM from the approved design (Prottobau.dc.html).
   Use these values as-is. Do not retune colours, durations or easings. */


:root{
  --ink:#1f1f1f; --ink-deep:#161612; --ink-80:#3a3a3a; --ink-60:#5f5f5b;
  --ground:#ececeb; --surface:#f7f7f6; --surface-alt:#e4e4e2;
  --line:#d6d6d4; --line-dark:#3a3a30;
  --accent:#FEFF8E; --accent-pale:#FBFAE4; --accent-ink:#9a9a00;
  --role-pm:#FEFF8E; --role-sub:#5980A6; --role-arch:#D9734A;
  --on-dark:#ffffff; --on-dark-70:#c9c9c4; --on-dark-50:#a0a0a0;
  --font-display:'Archivo',system-ui,sans-serif;
  --font-mono:'Space Mono',monospace;
  --page-max:1400px; --page-pad:40px; --section-pad:120px; --header-h:72px;
  /* border-radius is 0 everywhere in this design. Do not introduce rounding. */
}

/* ---- below: the design's own stylesheet, unchanged ---- */
body{margin:0;background:#ececeb;color:#1f1f1f;font-family:'Archivo',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#1f1f1f;text-decoration:none}a:hover{color:#1f1f1f}
::selection{background:#FEFF8E;color:#1f1f1f}
button{font-family:inherit}
[data-reveal]{opacity:1;transform:none}
@supports (animation-timeline: view()) {
  @keyframes revealIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  [data-reveal]{animation:revealIn .01s linear both;animation-timeline:view();animation-range:entry 5% cover 22%}
}
@keyframes bar{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes walk{from{transform:translateX(0)}to{transform:translateX(14px)}}
@keyframes walkL{from{transform:translateX(0)}to{transform:translateX(-14px)}}
@keyframes bubble{0%,4%{opacity:0;transform:translateY(6px)}8%,30%{opacity:1;transform:translateY(0)}34%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes lineIn{0%,8%{opacity:.15}12%,100%{opacity:1}}
@keyframes flow{from{background-position:0 0}to{background-position:0 16px}}
@keyframes scan{from{top:-2px}to{top:100%}}
@keyframes ring{from{transform:scale(.7);opacity:.8}to{transform:scale(1.25);opacity:0}}
@keyframes tap{0%,100%{transform:translateX(-50%) scale(1);opacity:.9}50%{transform:translateX(-50%) scale(.72);opacity:.4}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes liftPhone{0%,30%{transform:translateY(24px) rotate(-10deg);opacity:0}44%,100%{transform:none;opacity:1}}
@keyframes gatherL{0%{transform:translateX(-46px);opacity:0}22%,100%{transform:none;opacity:1}}
@keyframes gatherR{0%{transform:translateX(46px);opacity:0}22%,100%{transform:none;opacity:1}}
@keyframes gatherUp{0%{transform:translateY(14px);opacity:0}18%,100%{transform:none;opacity:1}}
@keyframes iconCycle{0%,2%{opacity:.4;transform:none;stroke:currentColor}7%,14%{opacity:1;transform:translateY(-5px);stroke:#FEFF8E}20%,100%{opacity:.4;transform:none;stroke:currentColor}}
@keyframes travel{0%,6%{transform:translateX(-18px)}15%{transform:translateX(52px)}16%,100%{transform:translateX(-18px)}}
@keyframes slideRight{0%,8%{opacity:0;transform:translateX(-14px)}22%,72%{opacity:1;transform:none}86%,100%{opacity:0;transform:translateX(10px)}}
@keyframes dropIn{0%,18%{opacity:0;transform:translateY(-10px)}34%,100%{opacity:.18;transform:none}}
@keyframes signIn{0%,34%{transform:scaleX(0)}58%,100%{transform:scaleX(1)}}
@keyframes popIn{0%,26%{opacity:0;transform:translateY(6px) scale(.96)}40%,100%{opacity:1;transform:none}}
@keyframes wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}


/* build additions (no visual changes to the approved design) */
[hidden]{display:none !important}
/* verbatim from PrototypeAppLight.dc.html's helmet (the tutorial embed) */
@keyframes capIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Mobile header (client-approved fix, 2026-09-11): the prototype's header row
   has a fixed 72px height and no wrapping, which clipped the nav on phones.
   The handoff README's responsive spec says the header row wraps — this
   implements that for narrow screens only; desktop is untouched. */
@media (max-width: 900px){
  header > div{
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 72px;
    padding: 12px 16px !important;
    gap: 10px 14px !important;
  }
  header > div > div{ margin-left: auto; } /* language switch joins the CTA on the right */
  header nav{
    order: 10;
    flex: 1 1 100% !important;
    margin-left: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  header nav > a{ padding: 8px 12px 8px 0 !important; }
  /* the sticky how-it-works panel and hero track the real header height */
  [data-ref="stepsRef"] > div{ top: var(--pb-hdr, 72px) !important; height: calc(100vh - var(--pb-hdr, 72px)) !important; }
  /* sticky copy blocks are a two-column desktop effect; in the single-column
     mobile layout they slide over neighbouring text, so they stay in flow */
  .pb-sticky-copy{ position: static !important; }
  main > section:first-child:has(video){ min-height: calc(100vh - var(--pb-hdr, 72px)) !important; }
}

.hv0:hover{background:#FFFFFF !important}
.hv1:hover{border-color:#8F8700 !important}
.hv2:hover{color:#fff !important}
.hv3:hover{background:#FEFF8E !important;border-color:#FEFF8E !important;color:#1f1f1f !important}
.hv4:hover{background:#FEFF8E !important}
.hv5:hover{background:#fff !important;color:#1f1f1f !important}
.hv6:hover{opacity:.9 !important}
.hv7:hover{color:#FEFF8E !important}
.hv8:hover{opacity:1 !important}
.hv9:hover{opacity:.7 !important}
.hv10:hover{background:#3a3a3a !important}
.hv11:hover{color:#5f5f5b !important}
.hv12:hover{background:#1f1f1f !important;color:#fff !important}
.hv13:hover{opacity:.75 !important}
.hv14:hover{border-color:#fff !important}
.hv15:hover{background:#fff !important}
.hv16:hover{opacity:.8 !important}
.av0:active{opacity:.6 !important}