/* Konto home page. Design source: the approved About Konto story mockup. */
@font-face { font-family: "Lama Sans"; font-weight: 500; font-display: swap; src: url("/fonts/LamaSans-Medium.ttf") format("truetype"); }
@font-face { font-family: "Lama Sans"; font-weight: 700; font-display: swap; src: url("/fonts/LamaSans-Bold.ttf") format("truetype"); }
@font-face { font-family: "Lama Sans"; font-weight: 800; font-display: swap; src: url("/fonts/LamaSans-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Lama Sans"; font-weight: 900; font-display: swap; src: url("/fonts/LamaSans-Black.ttf") format("truetype"); }
@font-face { font-family: "Rabar"; font-weight: 100 900; font-display: swap; src: url("/fonts/Rabar.ttf") format("truetype"); }
@font-face { font-family: "Konto Icons"; font-display: block; src: url("/fonts/konto-icons.woff") format("woff"); }
/* Layout: one full-bleed band per story scene; copy and artwork stack on phones and sit side by side on computers. */
:root {
  color-scheme: dark;
  --canvas: #06141C; --ink: #0F1D22; --white: #FFFFFF; --gold: #C9A24A; --gold-deep: #8F6A1F;
  --gold-shadow: #50370A; --indigo: #4F5FC7; --indigo-light: #6371D6; --indigo-shadow: #141950;
  --abyss: #0E3442; --deep-sea: #0D2E3B; --teal-mid: #0A8A9C; --laser: #2EE6FF; --sky: #B3E8F1;
  --p500: #0BBAD8; --p600: #099AB3; --p700: #06707F; --hero-end: #1A3A5C;
  --green: #2ECC71; --green-deep: #1E8F4E; --green-wash: #E7F8EE; --coral: #FF6B6B; --red: #D64545;
  --blush: #FDECEC; --ice: #E6F8FB; --honey: #FDF3E1; --amber: #B7770D; --lavender: #EEF1FF;
  --sand: #F7F0E1; --paper: #F4FAFB; --slate: #4A6275; --mist: #9AA9AE; --line: #E4ECF1; --warn-soft: #FAD7A0; --warn: #F39C12;
  --font-display: 'Lama Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Lama Sans', 'Segoe UI', system-ui, sans-serif;
  --dir: 1;
}
:root[dir="rtl"] { --dir: -1; }
:root:lang(ckb) { --font-display: 'Rabar', 'Lama Sans', system-ui, sans-serif; --font-body: 'Rabar', 'Lama Sans', system-ui, sans-serif; }
* { box-sizing: border-box; }
/* Each story fills the screen and scrolling snaps from one to the next. */
html.home { scroll-behavior: smooth; scroll-snap-type: y mandatory; }
body { background: var(--canvas); color: var(--white); font-family: var(--font-body); font-size: 16px; margin: 0; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--canvas); }
.ms { font-family: 'Konto Icons'; font-weight: 400; font-style: normal; line-height: 1; letter-spacing: normal; white-space: nowrap; direction: ltr; display: inline-block; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--laser); outline-offset: 3px; border-radius: 8px; }

/* Header */
.top { position: fixed; inset-inline: 0; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(6, 20, 28, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.08); }
.top .bar { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -.5px; margin-inline-end: auto; }
.brand .dot { color: var(--p500); }
.brand svg { width: 22px; height: 24px; }
.langs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.08); }
.langs button { font: 700 12px var(--font-body); color: rgba(255,255,255,.75); background: none; border: 0; border-radius: 999px; padding: 7px 9px; cursor: pointer; min-height: 36px; }
.langs button[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.get-btn { font: 800 14px var(--font-body); text-decoration: none; background: var(--p500); color: var(--white); border-radius: 999px; padding: 10px 16px; white-space: nowrap; }
.lang-menu { position: relative; }
.langs.inline { display: flex; }
.lang-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--white); font: 700 13px var(--font-body); cursor: pointer; }
.lang-toggle .ms { font-size: 18px; }
.lang-toggle .chev { transition: transform .2s; }
/* On phones the switcher folds into one button that opens the three languages. */
@media (max-width: 640px) {
  details.lang-menu .langs { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; flex-direction: column; gap: 2px; padding: 6px; border-radius: 16px; background: var(--ink); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 40px rgba(0,0,0,.45); min-width: 150px; }
  .langs button { border-radius: 12px; min-height: 44px; text-align: start; padding: 0 14px; font-size: 15px; }
  .get-btn { padding: 9px 13px; font-size: 13px; }
}
@media (max-width: 370px) { .brand .word { display: none; } }

/* Scenes */
.scene { position: relative; overflow: hidden; isolation: isolate; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; scroll-snap-align: start; scroll-snap-stop: always; }
.get > .scene { min-height: 100vh; min-height: 100svh; }
.scene .wrap { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 28px; padding-block: calc(76px + env(safe-area-inset-top, 0px)) 40px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.copy { min-width: 0; display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.art { position: relative; justify-self: stretch; min-width: 0; display: flex; justify-content: center; }
.art .box { position: relative; width: 390px; flex: none; }
.flow { min-width: 0; display: flex; flex-direction: column; gap: 14px; max-width: 520px; width: 100%; justify-self: center; }
@media (min-width: 960px) {
  .scene .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; padding-block: 96px 56px; }
  .scene.center .wrap { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .scene.center .copy { align-items: center; }
}
.a { position: absolute; inset-inline-start: var(--x, 0); top: var(--y, 0); }
.a.end { inset-inline-start: auto; inset-inline-end: var(--x, 0); }

/* Type */
.kick { font: 800 14px/1.2 var(--font-display); letter-spacing: .2px; margin: 0; }
.hl { font: 900 clamp(30px, 3.4vw, 44px)/1.1 var(--font-display); letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.hero { font: 900 clamp(44px, 5.6vw, 72px)/1.04 var(--font-display); letter-spacing: -.03em; margin: 0; text-wrap: balance; }
:root[dir="rtl"] .hl, :root[dir="rtl"] .hero, :root[dir="rtl"] .big { letter-spacing: 0; }
.say { font: 700 clamp(19px, 1.7vw, 22px)/1.35 var(--font-body); margin: 0; color: rgba(255,255,255,.86); }
.cap { font: 800 clamp(20px, 1.9vw, 24px)/1.3 var(--font-body); margin: 0; }
.w { display: inline-block; }
.mark-acc { color: var(--acc); }

/* Motion: every scene waits, paused, until it scrolls into view. */
.rise { animation: rise .7s cubic-bezier(.16,.84,.3,1) both; animation-delay: var(--d, 0s); }
.fade { animation: fade .8s ease both; animation-delay: var(--d, 0s); }
.pop { animation: pop .7s cubic-bezier(.3,1.5,.5,1) both; animation-delay: var(--d, 0s); }
.slideS { animation: slideS .7s cubic-bezier(.16,.84,.3,1) both; animation-delay: var(--d, 0s); }
.slideE { animation: slideE .7s cubic-bezier(.16,.84,.3,1) both; animation-delay: var(--d, 0s); }
.grow { animation: grow 1.2s cubic-bezier(.16,.84,.3,1) both; animation-delay: var(--d, 0s); }
.drop { animation: drop .8s cubic-bezier(.3,1.3,.5,1) both; animation-delay: var(--d, 0s); }
.js .scene:not(.play) *, .js .scene:not(.play) { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes slideS { from { opacity: 0; transform: translateX(calc(-48px * var(--dir))); } to { opacity: 1; transform: none; } }
@keyframes slideE { from { opacity: 0; transform: translateX(calc(48px * var(--dir))); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes tw { 0%,100% { opacity: .12; transform: scale(.6); } 50% { opacity: .95; transform: scale(1.2); } }
@keyframes breathe { from { transform: scale(.92); } to { transform: scale(1.12); } }
@keyframes ripple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.1); } }
@keyframes drop { 0% { opacity: 0; transform: translateY(-70px) rotate(calc(var(--r) * 4)); } 70% { opacity: 1; transform: translateY(6px) rotate(var(--r)); } 100% { opacity: 1; transform: rotate(var(--r)); } }
@keyframes stroke { to { stroke-dashoffset: 0; } }
@keyframes beat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.2); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
@keyframes lightOn { to { background: var(--warn-soft); box-shadow: 0 0 22px 6px rgba(243,156,18,.55); } }
@keyframes floatUp { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; } 100% { opacity: 1; transform: translateY(-24px); } }
@keyframes peg { 0% { opacity: 0; transform: scale(1.8) rotate(-10deg); } 30% { opacity: 1; } 55% { transform: scale(1) rotate(0); } 62% { transform: scale(1.06) translateX(-9px); } 70% { transform: scale(1.06) translateX(8px); } 78% { transform: scale(1.05) translateX(-5px); } 86% { transform: scale(1.05) translateX(3px); } 100% { opacity: 1; transform: scale(1.05); } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes locked { to { filter: grayscale(1) brightness(.62); } }
@keyframes lockDrop { 0% { opacity: 0; transform: translateY(-160px) scale(.8); } 55% { opacity: 1; transform: none; } 65% { transform: rotate(-10deg); } 75% { transform: rotate(8deg); } 85% { transform: rotate(-4deg); } 100% { opacity: 1; transform: none; } }
@keyframes dim { to { opacity: .32; transform: scale(.94); } }
@keyframes swapA { 0% { transform: none; } 50% { transform: translate(calc(110px * var(--dir)), -54px) rotate(calc(-6deg * var(--dir))); } 100% { transform: translateX(calc(220px * var(--dir))); } }
@keyframes swapB { 0% { transform: none; } 50% { transform: translate(calc(-110px * var(--dir)), 54px) rotate(calc(6deg * var(--dir))); } 100% { transform: translateX(calc(-220px * var(--dir))); } }
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(201,162,74,.75); } 100% { box-shadow: 0 0 0 22px rgba(201,162,74,0); } }
@keyframes reveal { from { clip-path: circle(0% at 50% 40%); } to { clip-path: circle(150% at 50% 40%); } }
@keyframes conf { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); } 10% { opacity: 1; } 55% { transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) rotate(var(--r)) scale(1); } 100% { opacity: 1; transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy) + 80px)) rotate(calc(var(--r) * 2)) scale(1); } }
@keyframes hop { 0%,100% { transform: none; } 25% { transform: translateY(-24px) scale(1.04); } 50% { transform: scale(1.07, .93); } 72% { transform: translateY(-10px); } }
@keyframes flip { to { transform: rotateY(180deg); } }
@keyframes sinkOut { to { opacity: 0; transform: translateY(34px); } }
@keyframes fly { from { opacity: 0; transform: translate(calc(var(--fx) * var(--dir)), var(--fy)) rotate(var(--fr)) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes room { from { transform: translate(calc(var(--fx) * var(--dir)), var(--fy)); } to { transform: none; } }
@keyframes swapIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes chipOn { to { background: var(--gold); color: var(--ink); } }
@keyframes chipOff { from { background: var(--gold); color: var(--ink); } to { background: rgba(255,255,255,.16); color: var(--white); } }
@keyframes odo { to { transform: translateY(-216px); } }
@keyframes flyIn { from { opacity: 0; transform: translate(calc(var(--fx) * var(--dir)), var(--fy)) scale(1.4); } to { opacity: 1; transform: none; } }
@keyframes fadeOut { to { opacity: 0; transform: scale(.6) rotate(-20deg); } }
@keyframes wiggle { 0% { opacity: 0; transform: scale(.6) rotate(20deg); } 50% { opacity: 1; transform: scale(1.15) rotate(-8deg); } 75% { transform: rotate(5deg); } 100% { opacity: 1; transform: none; } }
@keyframes level { 0% { transform: scaleY(0); } 35% { transform: scaleY(var(--s)); } 62% { transform: scaleY(var(--s)); } 100% { transform: scaleY(1); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.9) rotate(-12deg); } 60% { opacity: 1; transform: scale(.94) rotate(-12deg); } 100% { opacity: 1; transform: rotate(-12deg); } }
@keyframes unfurl { from { transform: scale(0); } to { transform: scale(1); } }

/* Pieces */
.tw { position: absolute; width: 4px; height: 4px; border-radius: 2px; background: var(--white); animation: tw 2.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
.disc { border-radius: 50%; }
.badge { border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.badge svg { width: 46%; height: auto; }
.icon-disc { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.card { background: var(--white); color: var(--ink); border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 14px 34px rgba(10,25,41,.28); font: 800 16px/1.25 var(--font-body); }
.card .icon-disc { width: 44px; height: 44px; }
.card .icon-disc .ms { font-size: 24px; }
.tok { width: 48px; height: 48px; background: var(--white); box-shadow: 0 8px 18px rgba(80,55,10,.25); vertical-align: middle; margin-inline-start: 10px; position: relative; top: -4px; }
.tok .ms { font-size: 27px; }
.ln { display: block; }
.prow { border-radius: 18px; padding: 14px 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; gap: 12px; }
.prow .big { font: 900 24px/1.2 var(--font-display); letter-spacing: -.5px; }
.prow .sm { font: 600 14px/1.3 var(--font-body); color: rgba(255,255,255,.66); }
.prow .ok { margin-inline-start: auto; width: 30px; height: 30px; background: var(--gold); color: var(--ink); }
.fc { perspective: 900px; }
.fc .in { position: relative; display: grid; transform-style: preserve-3d; animation: flip .9s cubic-bezier(.5,0,.2,1) both; animation-delay: var(--f, 0s); }
.face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 112px; }
.front { background: var(--abyss); border: 1px solid rgba(46,230,255,.2); }
.front .lb { font: 700 13px var(--font-body); color: var(--sky); }
.front .v { font: 900 30px var(--font-display); letter-spacing: -.8px; direction: ltr; text-align: start; unicode-bidi: isolate; }
.back { background: var(--gold); color: var(--ink); transform: rotateY(180deg); }
.back .lb { font: 800 13px var(--font-body); color: var(--gold-shadow); }
.back .v { font: 900 21px/1.15 var(--font-display); }
.num { position: absolute; top: 24px; inset-inline-end: -6px; font: 900 230px/1 var(--font-display); color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.16); z-index: -1; }
.phone { border: 3px solid rgba(255,255,255,.92); border-radius: 36px; padding: 4px; box-shadow: 0 24px 50px rgba(6,20,28,.35); }
.scr { border-radius: 28px; background: var(--paper); color: var(--ink); padding: 18px 14px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; height: 100%; }
.scr .row { display: flex; align-items: center; gap: 8px; background: var(--white); border-radius: 12px; padding: 9px 10px; font: 700 12px var(--font-body); }
.scr .row .icon-disc { width: 24px; height: 24px; }
.scr .row .icon-disc .ms { font-size: 16px; }
.scr .row b { margin-inline-start: auto; font-weight: 900; direction: ltr; unicode-bidi: isolate; }
.chip { padding: 7px 14px; border-radius: 12px; font: 800 14px var(--font-body); background: rgba(255,255,255,.16); color: var(--white); }
.fchip { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 14px; background: var(--white); color: var(--ink); font: 800 14px var(--font-body); box-shadow: 0 12px 26px rgba(20,25,80,.35); animation: flyIn .9s cubic-bezier(.16,.84,.3,1.2) both; animation-delay: var(--d, 0s); }
.tag { padding: 5px 10px; border-radius: 10px; background: var(--white); color: var(--ink); font: 800 13px var(--font-body); animation: flyIn .8s cubic-bezier(.16,.84,.3,1) both; animation-delay: var(--d, 0s); }
.bub { padding: 8px 15px; border-radius: 16px; font: 800 17px var(--font-body); box-shadow: 0 10px 24px rgba(6,20,28,.3); }
.lang-ar { font-family: 'Lama Sans', var(--font-body); }
.lang-ckb { font-family: 'Rabar', var(--font-body); }

/* Get Konto */
.get { background: linear-gradient(160deg, var(--p500) 0, var(--p600) 40%, var(--hero-end) 100%); }
.get .wrap { justify-items: center; text-align: center; }
.get .copy { align-items: center; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.store { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px; border-radius: 16px; text-decoration: none; font: 800 16px var(--font-body); background: var(--canvas); color: var(--white); box-shadow: 0 14px 30px rgba(6,20,28,.35); }
.store.main { background: var(--white); color: var(--ink); min-height: 60px; font-size: 18px; }
.store svg { width: 22px; height: 22px; flex: none; }
.store .ms { font-size: 24px; }
.qr { display: grid; justify-items: center; gap: 10px; }
.qr .code { background: var(--white); padding: 12px; border-radius: 18px; width: 172px; height: 172px; }
.qr .code img, .qr .code canvas { width: 148px !important; height: 148px !important; display: block; }
.qr p { margin: 0; font: 700 15px var(--font-body); color: rgba(255,255,255,.88); }
.note { max-width: 460px; margin: 0; padding: 14px 18px; border-radius: 16px; background: rgba(6,20,28,.3); font: 600 15px/1.5 var(--font-body); }
.other { font: 700 14px var(--font-body); color: rgba(255,255,255,.85); }

/* Footer */
footer { background: var(--canvas); border-top: 1px solid rgba(255,255,255,.08); scroll-snap-align: end; }
footer .wrap { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; padding-block: 28px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); font: 600 14px var(--font-body); color: rgba(255,255,255,.7); }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-inline-end: auto; }
footer a { text-decoration: none; }
footer a:hover { color: var(--white); text-decoration: underline; }


.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: var(--white); color: var(--ink); padding: 10px 14px; border-radius: 12px; font: 800 14px var(--font-body); }
.skip:focus { top: calc(10px + env(safe-area-inset-top, 0px)); }
.unpublished { position: fixed; z-index: 45; inset-inline: 0; bottom: 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--warn); color: var(--ink); text-align: center; font: 800 13px var(--font-body); }
.langs a { font: 700 12px var(--font-body); color: rgba(255,255,255,.75); text-decoration: none; border-radius: 999px; padding: 0 10px; min-height: 36px; display: inline-flex; align-items: center; }
.langs a[aria-current="true"] { background: var(--white); color: var(--ink); }
.langs a[lang="ckb"], .lang-toggle [lang="ckb"] { font-family: 'Rabar', var(--font-body); }
.langs a[lang="ar"], .lang-toggle [lang="ar"], .langs a[lang="en"], .lang-toggle [lang="en"] { font-family: 'Lama Sans', var(--font-body); }
details.lang-menu > summary { list-style: none; }
details.lang-menu > summary::-webkit-details-marker { display: none; }
@media (min-width: 641px) { details.lang-menu { display: none; } }
@media (max-width: 640px) {
  .langs.inline { display: none; }
  details.lang-menu .langs { display: flex; }
  details.lang-menu[open] .chev { transform: rotate(180deg); }
  .langs a { border-radius: 12px; min-height: 44px; padding: 0 14px; font-size: 15px; }
}
.get-actions { display: grid; gap: 18px; justify-items: center; }
.get-actions .qr { display: grid; }
.platform-android .get-actions .qr, .platform-ios .get-actions .qr { display: none; }
.platform-ios .store[data-store="apple"], .platform-android .store[data-store="play"] { background: var(--white); color: var(--ink); min-height: 60px; font-size: 18px; order: -1; flex-basis: 100%; justify-content: center; max-width: 360px; }
.store { flex: 0 1 auto; }
.ours:lang(en) { font-style: italic; }

/* Terms, Privacy, Support and Delete Account share the header and footer. */
html.doc-page body { background: radial-gradient(120% 420px at 50% 0, rgba(11,186,216,.2) 0, rgba(11,186,216,0) 100%), var(--canvas); }
.doc { max-width: 820px; margin: 0 auto; padding-block: calc(100px + env(safe-area-inset-top, 0px)) 72px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.doc:focus { outline: none; }
.doc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.doc-tabs a { padding: 9px 15px; border-radius: 999px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.82); text-decoration: none; font: 700 14px var(--font-body); }
.doc-tabs a:hover { background: rgba(255,255,255,.14); }
.doc-tabs a[aria-current="page"] { background: var(--p500); color: var(--white); }
.doc-body { font: 500 17px/1.75 var(--font-body); color: rgba(255,255,255,.86); }
.doc-body > * { max-width: 68ch; }
.doc-body h1 { font: 900 clamp(34px, 5vw, 52px)/1.08 var(--font-display); color: var(--white); margin: 0 0 20px; letter-spacing: -.02em; text-wrap: balance; max-width: none; }
:root[dir="rtl"] .doc-body h1 { letter-spacing: 0; }
.doc-body h2 { font: 800 clamp(20px, 2.2vw, 24px)/1.3 var(--font-display); color: var(--white); margin: 40px 0 12px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); text-wrap: balance; }
.doc-body p { margin: 0 0 16px; }
.doc-body strong { color: var(--white); font-weight: 800; }
.doc-body ul { margin: 0 0 16px; padding-inline-start: 22px; }
.doc-body li { margin-bottom: 8px; }
.doc-body li::marker { color: var(--p500); }
.doc-body a { color: var(--laser); text-underline-offset: 3px; }
.doc-body p.intro { font-size: 20px; color: rgba(255,255,255,.9); }
.doc-body a.contact-action { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--p500); color: var(--white); text-decoration: none; font: 800 15px var(--font-body); }
.contact { color: rgba(255,255,255,.7); }