/* ORIÉZID — World Access · page styles
   Extracted from the Claude Design v4 prototype's inline <style>.
   Design tokens live in assets/css/tokens/*.css (linked before this file). */

    /* NB: do NOT put background-attachment:fixed here — a viewport-pinned bg forces iOS to re-composite the
       whole page every scroll frame off the threaded-scroll path → checkerboarding on fast flicks. Plain solid. */
    html { scroll-behavior: smooth; background: #FFFFFF; }
    body.orz-cursor-on, body.orz-cursor-on a, body.orz-cursor-on button, body.orz-cursor-on .orz-tile { cursor: none; }
    body { margin: 0; background: #FFFFFF; color: #404040; font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    ::selection { background: rgba(30, 58, 255, 0.12); }
    /* Pre-composited grain (white pixels, alpha = the old grain's luminance): screen-blending grey grain at
       opacity a is mathematically identical to normal-compositing white@alpha=lum at a (both = b + a·g·(1−b)),
       so this is pixel-identical to the old mix-blend-mode:screen but WITHOUT the per-tile backdrop-readback
       blend that stalled iOS scroll. Applies to every .orz-grain-s instance. */
    .orz-grain-s { position: absolute; inset: 0; pointer-events: none; background-image: url("../img/grain-precomp.png"); background-size: 300px 300px; opacity: 0.08; }
    .orz-dither { position: absolute; inset: 0; pointer-events: none; background-image: url("../img/grain-film.png"); background-size: 220px 220px; mix-blend-mode: soft-light; }
    .orz-ltr { display: inline-block; opacity: 0; animation: orzLetterIn .95s cubic-bezier(.16,1,.3,1) forwards; }
    @keyframes orzLetterIn { from { opacity: 0; transform: translateY(30px) scale(.985); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
    @keyframes orzAuraBreathe { from { transform: scale(1); } to { transform: scale(1.045); } }
    @keyframes orzSlowZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
    .orz-mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
    .orz-mq-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: orzMarquee 64s linear infinite; }
    .orz-mq:hover .orz-mq-track { animation-play-state: paused; }
    .orz-mq-grp { display: flex; align-items: center; gap: 56px; }
    @keyframes orzMarquee { to { transform: translateX(calc(-50% - 28px)); } }
    /* The whole folder scales as ONE unit via container-query units (cqw = 1% of the tile width, ref 420px),
       so the design/proportions are identical at any size — body, media, text, icon and the push-out all
       scale together. Fixes: a fixed-px body used to eat the small mobile card, collapsing the image area. */
    /* border-radius here MUST be % not cqw: an element that establishes container-type can't use cqw
       for its OWN properties (circular reference — the container's size isn't resolved yet), so cqw here
       silently computed to 0 (a fully square tile) since the day this rule started using cqw. % is
       relative to the tile's own border-box (aspect-ratio:1/1, so W%=H% here) and isn't a query unit,
       so it isn't affected by that self-reference restriction. This was the real cause of every "the
       image pokes past the corner" report — there was no folder-shaped clip at all, just a square box
       behind the (correctly) rounded media/body, so their curves showed against its sharp corner. */
    .orz-tile{ position:relative; display:flex; flex-direction:column; aspect-ratio:1/1; background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,247,252,.92)); border-radius:6.67%; box-shadow:0 20px 48px -22px rgba(10,10,10,.24), inset 0 0 0 1px rgba(255,255,255,.92); cursor:pointer; container-type:inline-size; transition:box-shadow .5s cubic-bezier(.16,1,.3,1); }
    /* Margin (top/left/right) widened to a clearly visible frame — the old 1.67cqw inset was so thin it
       read as flush/poking-out even though it was technically clipped. border-radius = tile radius
       (6.67cqw) minus the new margin (4cqw) = 2.67cqw exactly, so the media's corner is concentric with
       the tile's and can never protrude past it, at any margin size. transition intentionally omits
       box-shadow: animating box-shadow forces a main-thread repaint every frame (no GPU compositing),
       which can stall/skip on iOS Safari when several sibling cards are also changing filter/opacity/
       transform in the same tick — transform-only keeps the slide GPU-cheap and reliably smooth. */
    /* will-change:transform pre-promotes every card's media to its own compositing layer. Without it,
       iOS Safari sometimes fails to animate the FIRST transform transition an element ever runs and
       snaps straight to the end state — and since is-out moves to a DIFFERENT (until-now-untouched)
       card on every switch, that cold-start snap would happen again each time, every card's "first". */
    .orz-f-media{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; margin:4cqw 4cqw -43cqw; border-radius:2.67cqw; z-index:1; will-change:transform; transition:transform .55s cubic-bezier(.16,1,.3,1); }
    .orz-f-zoom{ position:absolute; inset:0; transition:transform .7s cubic-bezier(.16,1,.3,1); }
    /* No CSS :hover (a phone tap must never trigger the drive-out). Desktop: JS toggles .is-hover on
       mouseenter/leave — the image lifts out of the folder while hovering, settles back on leave. Phone
       has no hover, so the CENTERED card's rest state IS the popped-out state (.is-out, persistent);
       positionCar moves .is-out from the old centre to the new one on every switch, and the existing
       CSS transition on .orz-f-media animates that move — slides out, then stays out until the next
       switch. Every other (non-centred) card always stays fully tucked. */
    .orz-tile.is-hover, .orz-tile.is-out{ box-shadow:0 30px 60px -22px rgba(10,10,10,.34); }
    .orz-tile.is-hover .orz-f-media, .orz-tile.is-out .orz-f-media{ transform:translateY(-8cqw); box-shadow:0 22px 40px -16px rgba(10,10,10,.45); }
    .orz-tile.is-hover .orz-f-zoom, .orz-tile.is-out .orz-f-zoom{ transform:scale(1.06); }
    .orz-tile.is-hover .orz-f-body{ transform:perspective(1000px) rotateX(-11deg); }
    /* The shaped pocket itself owns the backdrop filter so it can sample the sibling media beneath it.
       The inner layer only supplies the translucent white material and its soft perimeter fade.
       The wave shape comes from the shared inline <clipPath id="orz-pocket-clip"> defined in
       index.html — it MUST be a same-document fragment reference: Safari silently ignores
       data:-URI/external clip-path references (pocket renders as an unclipped rectangle). */
    .orz-f-body{ position:relative; z-index:2; flex:none; height:48.1cqw; margin-top:-12.38cqw; padding:12.38cqw 5.71cqw 5.24cqw; display:flex; flex-direction:column; overflow:hidden; background:rgba(255,255,255,.04); -webkit-backdrop-filter:blur(6px) saturate(.68) brightness(1.1); backdrop-filter:blur(6px) saturate(.68) brightness(1.1); border-radius:0 0 6.67cqw 6.67cqw; -webkit-clip-path:url(#orz-pocket-clip); clip-path:url(#orz-pocket-clip); transform-origin:50% 100%; backface-visibility:hidden; will-change:transform; transition:transform .55s cubic-bezier(.16,1,.3,1); }
    .orz-f-body-glass{ position:absolute; inset:0; z-index:0; overflow:hidden; background:radial-gradient(92% 84% at 50% 40%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.25) 46%, rgba(255,255,255,.58) 76%, rgba(255,255,255,.92) 100%), linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.52) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.92), inset 18px 0 28px -24px rgba(10,16,60,.24), inset -18px 0 28px -24px rgba(10,16,60,.24), inset 0 -28px 34px -26px rgba(10,16,60,.18); pointer-events:none; }
    .orz-f-icon{ position:relative; z-index:1; margin-top:-8.57cqw; width:6.5cqw; height:6.5cqw; color:#0A0A0A; }
    .orz-f-head{ position:relative; z-index:1; margin-top:auto; display:flex; flex-direction:column; gap:1.7cqw; min-width:0; }
    .orz-f-name{ margin:0; font-family:var(--font-serif); font-weight:500; font-size:6.2cqw; line-height:7.2cqw; letter-spacing:-.01em; color:var(--ink); }
    .orz-f-line{ margin:0; font-size:3.7cqw; line-height:5cqw; color:var(--grey-muted); }
    .orz-cta{ transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), background-color .2s ease; }
    .orz-cta:hover{ transform: translateY(-1px); box-shadow: 0 12px 32px -12px rgba(30,58,255,.5); }
    .orz-cta .orz-cta-arrow{ transition: transform .3s cubic-bezier(.16,1,.3,1); }
    .orz-cta:hover .orz-cta-arrow{ transform: translateX(3px); }
    .orz-cta--onblue:hover{ box-shadow: 0 12px 32px -12px rgba(10,10,10,.4); }
    .orz-quiet .orz-quiet-arr{ transition: transform .3s cubic-bezier(.16,1,.3,1); }
    .orz-quiet:hover .orz-quiet-arr{ transform: translateX(4px); }
    .orz-arr{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; border:1px solid rgba(10,10,10,0.18); background:transparent; color:var(--ink); padding:0; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .3s cubic-bezier(.16,1,.3,1); }
    .orz-arr:hover{ background:var(--ink); color:#FFFFFF; border-color:var(--ink); }
    .orz-arr:active{ transform: scale(0.94); }
    .orz-soc{ transition: color .16s ease, transform .3s cubic-bezier(.16,1,.3,1); }
    .orz-soc:hover{ transform: translateY(-2px); }
    /* Mobile carousel controls — hidden by default, shown on phones (≤640) */
    .orz-car-navm{ display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(10,16,60,0.12); background: rgba(255,255,255,0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ink); padding: 0; box-shadow: 0 8px 22px -10px rgba(10,16,60,0.4); -webkit-tap-highlight-color: transparent; }
    .orz-car-navm:active{ transform: translateY(-50%) scale(0.92); }
    .orz-car-navm--l{ left: 12px; }
    .orz-car-navm--r{ right: 12px; }
    .orz-car-dots{ display: none; justify-content: center; align-items: center; gap: 9px; margin-top: 26px; }
    .orz-car-dot{ width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: rgba(10,16,60,0.18); cursor: pointer; transition: background .3s ease, transform .3s ease; -webkit-tap-highlight-color: transparent; }
    .orz-car-dot.on{ background: var(--accent); transform: scale(1.28); }
    .orz-mtilt { transition: transform .7s cubic-bezier(.2, .9, .3, 1), box-shadow .5s ease; will-change: transform; }
    /* Rounded corners survive the flip via clip-path on the STATIC wrap (never rotates). clip-path is a
       mask operation, NOT the border-radius+overflow codepath WebKit drops mid-3D-transform (bug 98538),
       and unlike isolation it establishes NO stacking context. Shadow lives on the perspective host below
       (clip-path would cut a shadow placed on this element). */
    .orz-mc{ transition: transform .9s cubic-bezier(.16,1,.3,1); border-radius: var(--radius-xl); clip-path: inset(0 round var(--radius-xl)); }
    .orz-mc:not(.orz-mc-open){ cursor: pointer; }
    /* Drop-shadow on the unclipped perspective host (ancestor of .orz-mc) so it never rotates and is never
       clipped by the wrap's clip-path. :has(> .orz-mc) targets ONLY the card's host (data-reveal is not unique). */
    [data-reveal]:has(> .orz-mc){ border-radius: var(--radius-xl); box-shadow: 0 60px 130px -40px rgba(1, 2, 8, 0.9); transition: box-shadow .9s cubic-bezier(.16,1,.3,1); }
    /* Hover lift goes on the HOST (which carries the shadow), NOT the wrap — so the card and its shadow rise
       together. Lifting only the clipped wrap left the shadow behind = a rim under the card on hover.
       !important beats the inline transform:none the reveal observer writes onto the host after it enters. */
    [data-reveal]:has(> .orz-mc:not(.orz-mc-open):hover){ transform: translateY(-7px) !important; box-shadow: 0 80px 170px -44px rgba(1, 2, 8, 0.95); }
    .orz-mc .orz-mc-zoom{ transition: transform 2.8s cubic-bezier(.16,1,.3,1); }
    /* will-change only where the hover zoom can actually fire — not a resident layer on touch devices */
    @media (hover: hover) and (pointer: fine) { .orz-mc .orz-mc-zoom{ will-change: transform; } }
    .orz-mc:not(.orz-mc-open):hover .orz-mc-zoom{ transform: scale(1.07); }
    [data-mc-backin]{ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    /* Membership-card stepped form: desktop shows the whole form (steps are display:contents so the grid flows
       unchanged); phones paginate one step at a time inside a fixed-size card (set in JS). */
    .orz-mc-step { display: contents; }
    .orz-mc-prog { display: none; }
    .orz-mc-prev, .orz-mc-next { display: none; }
    .orz-mc-pdot { width: 6px; height: 6px; border-radius: 50%; background: rgba(246,244,239,0.22); transition: background .3s ease, transform .3s ease; }
    .orz-mc-pdot.on { background: var(--accent); transform: scale(1.32); }
    .orz-mc-plbl { font-size: var(--text-2xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--grey-muted); margin-left: 8px; }
    .orz-mc-next:active { transform: scale(0.97); }
    @media (max-width: 640px) {
      /* Card keeps its closed landscape ratio (short). Header stripped; ALL nav — Back · dots · Next/Send —
         sits on ONE bottom row so the fields get the height. */
      [data-mc-backin] { padding: 15px clamp(20px, 5.5vw, 64px) 11px !important; }
      .orz-mc-topback { display: none !important; }            /* top Back → moved into the bottom nav row */
      .orz-mc-navback { display: inline-flex !important; }
      [data-mc-fields] > span, [data-mc-fields] > h3, .orz-mc-intro, .orz-mc-plbl { display: none !important; }
      .orz-mc-grid { display: block !important; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
      .orz-mc-step { display: none; }
      .orz-mc-step.is-active { display: flex; flex-direction: column; gap: 9px; }
      .orz-mc-step label[style*="column"] { gap: 6px !important; }
      .orz-mc-step label[style*="column"] > span:first-child { letter-spacing: 0.02em !important; }  /* keep the long note label on one line */
      .orz-mc-step label[style*="flex-start"] span { line-height: 1.45 !important; }
      .orz-mc-step .orz-in { padding-top: 4px !important; padding-bottom: 7px !important; }
      .orz-mc-step textarea.orz-in { min-height: 58px !important; height: 58px !important; }
      [data-mc-backin] > [data-mc-fields] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
      [data-mc-fields] > [data-mc-form] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: 0 !important; }
      /* bottom nav row: Back (left) · dots (centre) · Next/Send (right) */
      .orz-mc-actions { margin-top: auto; padding-top: 8px; flex: none; flex-wrap: nowrap !important; justify-content: space-between; gap: 8px; }
      .orz-mc-prog { display: flex; align-items: center; gap: 6px; margin: 0; }
      .orz-mc-next { padding: 6px 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; gap: 6px !important; }
      .orz-mc-next > span:first-child { font-size: var(--text-xs) !important; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent) !important; }
      .orz-mc-next > span:last-child { width: 18px !important; height: 18px !important; background: transparent !important; }
      .orz-mc-next svg { stroke: var(--accent) !important; width: 15px !important; height: 15px !important; }
      .orz-mc-actions-send > span { display: none; }
      .orz-mc-actions-send .orz-lava { padding: 6px 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; gap: 6px !important; }
      .orz-mc-actions-send .orz-lava-ring, .orz-mc-actions-send [data-mc-send-gloss] { display: none !important; }
      .orz-mc-actions-send [data-mc-send-label] { font-size: var(--text-xs) !important; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent) !important; }
      .orz-mc-actions-send .orz-lava-arrow { width: 18px !important; height: 18px !important; background: transparent !important; }
      .orz-mc-actions-send .orz-lava-arrow svg { stroke: var(--accent) !important; width: 15px !important; height: 15px !important; }
    }
    /* Keyboard-only focus ring (never shows on mouse click/hover) */
    a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
    main:focus{ outline: none; }
    [data-mc-front]:focus-visible{ outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: 5px; }
    @keyframes orzMcSpin { to { transform: rotate(360deg); } }
    .orz-sheet .orz-stag { opacity: 0; transform: translateY(18px); transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .65s cubic-bezier(.16, 1, .3, 1); }
    .orz-sheet.orz-on .orz-stag { opacity: 1; transform: none; }
    .orz-in::placeholder { color: rgba(246, 244, 239, 0.5); }
    input.orz-in, textarea.orz-in { outline: none; caret-color: #7FA6FF; width: 100%; min-width: 0; box-sizing: border-box; }
    @property --orzA { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
    @keyframes orzRingSpin { to { --orzA: 360deg; } }
    @keyframes orzMarkIn { from { opacity: 0; transform: scale(0.82); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
    .orz-lava{ transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, filter .3s ease; }
    .orz-lava:hover{ transform: translateY(-1px); box-shadow: 0 18px 44px -16px rgba(30, 58, 255, 0.5); }
    .orz-lava:active{ transform: translateY(0) scale(0.965); filter: brightness(0.94); }
    .orz-lava .orz-lava-ring{ opacity: 0; transition: opacity .35s ease; animation: orzRingSpin 1.6s linear infinite paused; filter: blur(0.6px); }
    .orz-lava:hover .orz-lava-ring{ opacity: 1; animation-play-state: running; }
    .orz-lava .orz-lava-arrow{ transition: transform .3s cubic-bezier(.16,1,.3,1); }
    .orz-lava:hover .orz-lava-arrow{ transform: translateX(3px); }
    .orz-quiet{ color: rgba(236, 231, 221, 0.68); transition: color .2s ease, transform .3s cubic-bezier(.16,1,.3,1); }
    .orz-quiet:hover{ color: #FFFFFF; transform: scale(1.04); }
    .orz-quiet:active{ transform: scale(0.94); }
    .orz-legal-bd{ position: fixed; inset: 0; z-index: 9500; background: rgba(4,6,15,.58); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }
    .orz-legal-bd.on{ opacity: 1; visibility: visible; }
    .orz-legal{ position: fixed; top: 0; right: 0; height: 100%; width: min(772px, 100vw); z-index: 9600; background: #F5F3EE; color: #0A0A0A; transform: translateX(103%); visibility: hidden; transition: transform .62s cubic-bezier(.16,1,.3,1), visibility .62s; box-shadow: -44px 0 130px -30px rgba(2,6,30,.55); display: flex; flex-direction: column; font-family: var(--font-sans); }
    .orz-legal.on{ transform: none; visibility: visible; }
    .orz-legal-head{ position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(18px + env(safe-area-inset-top)) clamp(24px,5vw,64px) 18px; background: rgba(245,243,238,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(10,10,10,.08); }
    .orz-legal-body{ overflow-y: auto; -webkit-overflow-scrolling: touch; padding: clamp(30px,5vw,54px) clamp(24px,5vw,64px) 88px; }
    .orz-lg-tab{ font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; color: rgba(10,10,10,.38); background: none; border: none; cursor: pointer; padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
    .orz-lg-tab:hover{ color: rgba(10,10,10,.7); }
    .orz-lg-tab.on{ color: #0A0A0A; border-bottom-color: #1E3AFF; }
    .orz-lg-close{ display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid rgba(10,10,10,.16); background: none; color: #0A0A0A; cursor: pointer; transition: background .2s, color .2s; }
    .orz-lg-close:hover{ background: #0A0A0A; color: #FFFFFF; }
    .orz-lg-h1{ font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px,4vw,44px); letter-spacing: var(--tracking-tight); line-height: 1.08; margin: 0 0 12px; color: #0A0A0A; }
    .orz-lg-meta{ font-size: var(--text-sm); line-height: 1.65; color: #6B6B62; margin: 0 0 30px; max-width: 60ch; }
    .orz-lg-h2{ font-family: var(--font-sans); font-weight: 600; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; margin: 36px 0 12px; color: #0A0A0A; display: flex; align-items: baseline; }
    .orz-lg-num{ color: #1E3AFF; font-variant-numeric: tabular-nums; margin-right: .7em; font-weight: 600; }
    .orz-legal p{ font-size: 15px; line-height: 1.72; color: #35342E; margin: 0 0 12px; max-width: 66ch; }
    .orz-legal ul{ margin: 0 0 14px; padding-left: 1.1em; list-style: none; }
    .orz-legal li{ position: relative; font-size: 15px; line-height: 1.7; color: #35342E; margin: 0 0 7px; max-width: 64ch; padding-left: 1em; }
    .orz-legal li::before{ content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 1px; background: #1E3AFF; }
    .orz-legal a{ color: #1E3AFF; text-decoration: none; border-bottom: 1px solid rgba(30,58,255,.35); }
    .orz-lg-ph{ font-style: normal; background: rgba(30,58,255,.09); color: #1E3AFF; padding: 0 .35em; border-radius: 3px; white-space: nowrap; }
    .orz-cookie{ opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), visibility .6s; }
    .orz-cookie.on{ opacity: 1; transform: none; visibility: visible; }
    .orz-topbar{ position: fixed; top: 0; left: 0; right: 0; z-index: 8900; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(13px + env(safe-area-inset-top)) calc(clamp(20px,5vw,40px) + env(safe-area-inset-right)) 13px calc(clamp(20px,5vw,40px) + env(safe-area-inset-left)); background: transparent; -webkit-backdrop-filter: blur(9px) saturate(1.05); backdrop-filter: blur(9px) saturate(1.05); border-bottom: 1px solid rgba(30,58,255,0.12); transform: translateY(-101%); opacity: 0; visibility: hidden; transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .4s ease, visibility .55s; }
    .orz-topbar.on{ transform: none; opacity: 1; visibility: visible; }
    .orz-topbar-cta{ display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent; cursor: pointer; color: #1E3AFF; font-family: var(--font-sans); font-size: 14px; font-weight: var(--weight-medium); padding: 6px 2px; transition: color .2s ease; }
    .orz-topbar-cta:hover{ color: #1730E0; }
    .orz-topbar-arr{ transition: transform .3s cubic-bezier(.16,1,.3,1); }
    .orz-topbar-cta:hover .orz-topbar-arr{ transform: translateX(3px); }
    /* Narrow: the how-it-works trail turns VERTICAL (geometry rebuilt in initPath); open a left gutter for the rail + node dots. Do NOT hide it. */
    @media (max-width: 900px) {
      [data-step] { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; padding-left: 40px; }
    }
    /* Phones */
    @media (max-width: 640px) {
      /* Manifesto: stack the label UNDER the statement for every row. Otherwise the long statements wrap
         their label below (flex-wrap) while the short last row ("Awake…", "24 / 7") keeps it on the side —
         inconsistent. Column layout makes all four uniform. */
      [data-mani] { flex-direction: column !important; align-items: flex-start !important; }
      /* Carousel: swap desktop arrows + counter for side tap-arrows and dot indicators */
      .orz-car-ctrls { display: none !important; }
      .orz-car-navm { display: inline-flex; }
      .orz-car-dots { display: flex; }
      /* The centered tile receives .is-out on every switch. Open its pocket in sync with the
         existing media push-out; the previous tile closes as the class moves away. */
      .orz-tile.is-out .orz-f-body { transform: perspective(1000px) rotateX(-11deg); }
      /* "Your request" sheet: pair the genuinely-short fields two-up; keep Email + Phone full-width (they clip at half width) */
      .orz-sheet-form { margin-top: 28px !important; }
      .orz-sheet-col { gap: 20px !important; }
      .orz-sheet-grid { grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; }
      .orz-sheet-grid > label, .orz-sheet-grid > [data-tel-field] { min-width: 0; } /* let cells shrink below input min-content — kills the sideways drag */
      .orz-sheet-grid > label:nth-child(5),                           /* Email */
      .orz-sheet-grid > [data-tel-field] { grid-column: 1 / -1; }     /* Phone (jetzt ein div, kein label — Attribut statt nth-child) */
    }
    @media (prefers-reduced-motion: reduce){ .orz-legal, .orz-cookie, .orz-topbar{ transition: none; } .orz-ltr{ animation: none; opacity: 1; } .orz-mq-track{ animation: none; } .orz-aura-b{ animation: none; } .orz-lava-ring{ animation: none !important; } .orz-mc-zoom{ transition: none !important; } .orz-mc{ transition: none !important; } [data-reveal]:has(> .orz-mc){ transition: none !important; } }