/* ==========================================================================
   bitkoin.finance - static rebuild
   Design tokens, typography scale and section geometry are taken verbatim
   from the original site (computed styles measured at 1920px / 320px).
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'proxima-n-w01-reg';
  src: url('../fonts/proxima-n-w01-reg.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+D, U+20-7E, U+A0-FF, U+110, U+131, U+152-153, U+160-161, U+178,
    U+17D-17E, U+192, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E,
    U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+F656-F659;
}
@font-face {
  font-family: 'proxima-n-w01-reg';
  src: url('../fonts/proxima-n-w05-reg.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0, U+100-10F, U+111-130, U+132-151, U+154-15F, U+162-177, U+179-17C,
    U+17F, U+18F, U+19D, U+1A0-1A1, U+1AF-1B0, U+1E6-1E7, U+1EA-1EB, U+1FA-1FF, U+218-21B,
    U+232-233, U+237, U+259, U+272, U+2B0, U+2BB-2BC, U+2C9, U+2CB, U+2D8-2D9, U+2DB, U+2DD,
    U+374-375, U+37E, U+384-38A, U+38C, U+38E-3A1, U+3A3-3CE, U+3D7, U+400-45F, U+472-475,
    U+48A-4FF, U+510-513, U+51C-51D, U+524-527, U+52E-52F, U+1E02-1E03, U+1E0A-1E0B,
    U+1E1E-1E1F, U+1E22-1E23, U+1E56-1E57, U+1E60-1E61, U+1E6A-1E6B, U+1E80-1E85, U+1E9E,
    U+1EA0-1EF9, U+2000-200A, U+2015, U+201B, U+2032-2033, U+203D-203E, U+2070, U+2074-2079,
    U+207D-2089, U+208D-208E, U+20A1, U+20A3-20A4, U+20A6-20AB, U+20B4, U+20B8-20BA,
    U+20BC-20BD, U+2113, U+2116-2117, U+2120, U+2126, U+212E, U+2153-2154, U+215B-215E,
    U+2190-2193, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B,
    U+2248, U+2260, U+2264-2265, U+22B2-22B3, U+22C5, U+2318, U+25A0, U+25B2, U+25BC, U+25CA,
    U+25CF, U+2605, U+2610-2611, U+2666, U+2713, U+2E18, U+FB00-FB04;
}
@font-face {
  font-family: 'space grotesk';
  src: url('../fonts/spacegrotesk-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'space grotesk';
  src: url('../fonts/spacegrotesk-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+100-24F, U+259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'space grotesk';
  src: url('../fonts/spacegrotesk-vietnamese.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0,
    U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'madefor-display-extrabold';
  src: url('../fonts/madefor-display-extrabold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'avenir-lt-w01_35-light';
  src: url('../fonts/avenir-lt-w01_35-light.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0, U+D, U+20-7E, U+A0-FF, U+131, U+152-153, U+160-161, U+178, U+17D-17E,
    U+192, U+237, U+2C6-2C7, U+2DA, U+2DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122;
}
@font-face {
  font-family: 'avenir-lt-w01_35-light';
  src: url('../fonts/avenir-lt-w05_35-light.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+100-12B, U+12E-130, U+132-137, U+139-149, U+14C-151, U+154-15F, U+162-177,
    U+179-17C, U+218-21B, U+2C9, U+2D8-2D9, U+2DB, U+2DD, U+394, U+3A9, U+3BC, U+3C0, U+1E9E,
    U+20B9-20BA, U+20BC-20BD, U+2113, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212,
    U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02;
}

/* ---------- design tokens (from the original site theme) ---------- */
:root {
  --orange: #f6911d;          /* rgb(246,145,29)  brand */
  --black: #000;              /* color_15 / color_45 */
  --white: #fff;              /* color_1 */
  --grey-40: #404040;         /* color_40 */
  --body-font: 'proxima-n-w01-reg', sans-serif;
  --head-font: 'space grotesk', sans-serif;
  --hero-font: 'madefor-display-extrabold', 'helveticaneuew01-75bold', sans-serif;
  --ui-font: 'avenir-lt-w01_35-light', sans-serif;

  /* container algebra, measured across viewports:
     header  = clamp(980px, 100vw - 200px, 1720px)
     content = max(980px, 100vw - 380px)                                       */
  --hdr-w: clamp(980px, calc(100vw - 200px), 1720px);
  --cnt-w: max(980px, calc(100vw - 380px));
}

/* ---------- typography scale (--font_0 .. --font_10) ---------- */
.font_0 { font: normal normal normal 50px/1.1em var(--head-font); color: var(--black); letter-spacing: 0; }
.font_1 { font: normal normal normal 16px/1.4em var(--body-font); color: var(--grey-40); letter-spacing: 0; }
.font_2 { font: normal normal normal 38px/1.3em var(--head-font); color: var(--black); letter-spacing: 0; }
.font_3 { font: normal normal normal 28px/1.4em var(--head-font); color: var(--black); letter-spacing: 0; }
.font_4 { font: normal normal normal 26px/1.4em var(--head-font); color: var(--black); letter-spacing: 0; }
.font_5 { font: normal normal bold 22px/1.4em var(--head-font); color: var(--black); letter-spacing: 0; }
.font_6 { font: normal normal bold 16px/1.4em var(--head-font); color: var(--black); letter-spacing: 0; }
.font_7 { font: normal normal bold 20px/1.4em var(--body-font); color: var(--black); letter-spacing: 0; }
.font_8 { font: normal normal normal 16px/1.6em var(--body-font); color: var(--black); letter-spacing: 0; }
.font_9 { font: normal normal normal 14px/1.2em var(--body-font); color: var(--black); letter-spacing: 0; }
.font_10 { font: normal normal normal 12px/1.4em var(--body-font); color: var(--grey-40); letter-spacing: 0; }

/* palette class used by the disclaimer text (color_36 = #fff) */
.color_36 { color: var(--white); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--body-font);
  overflow-x: hidden;
}
img { max-width: 100%; border: 0; }
a { color: inherit; }
.rt p, .rt h1, .rt h2, .rt h3, .rt h4, .rt h5, .rt h6, .rt ul, .rt ol {
  margin: 0; padding: 0;
}
/* headings with no font_N class must not pick up the UA bold default */
.rt h1:not([class*="font_"]), .rt h2:not([class*="font_"]), .rt h3:not([class*="font_"]),
.rt h4:not([class*="font_"]), .rt h5:not([class*="font_"]), .rt h6:not([class*="font_"]) {
  font-weight: 400;
}
.rt a { color: inherit; text-decoration: none; }
.rt a:hover { text-decoration: underline; }
.rt span[style*="underline"] > a,
.rt a[style*="underline"] { text-decoration: underline; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--white); color: #116dff; padding: 8px 14px; font-size: 14px;
  font-family: Helvetica, Arial, sans-serif;
}
.skip-link:focus { left: 0; }

.sec { position: relative; width: 100%; }
.cnt { width: var(--cnt-w); margin: 0 auto; position: relative; }

/* ==========================================================================
   HEADER  (0 - 94px)
   ========================================================================== */
.hdr { position: relative; z-index: 60; background: var(--white); height: 94px; }
.hdr-in { width: var(--hdr-w); margin: 0 auto; position: relative; height: 94px; }

.hdr-logo { position: absolute; left: 62px; top: 30px; width: 190px; height: 40px; display: block; }
.hdr-logo img { width: 190px; height: 40px; display: block; }
.hdr-tag {
  position: absolute; left: 104px; top: 76px;
  font: normal normal normal 14px/16.8px var(--body-font); color: var(--black);
  white-space: nowrap;
}

/* language selector */
.lang { position: absolute; left: 294px; top: 40px; }
.lang-btn {
  width: 168px; height: 45px; background: var(--white); border: 1px solid var(--orange);
  display: flex; align-items: center; gap: 8px; padding: 0 14px 0 15px;
  font: normal normal normal 16px/22.4px var(--ui-font); color: var(--black);
  cursor: pointer; text-align: left;
}
.lang-btn img { width: 35px; height: 22px; object-fit: cover; flex: 0 0 35px; }
.lang-btn .lang-name {
  flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lang-btn .chev { flex: 0 0 12px; width: 12px; height: 6px; transition: transform .15s; }
.lang.open .lang-btn .chev { transform: rotate(180deg); }
.lang-list {
  position: absolute; left: 0; top: 45px; width: 168px; margin: 0; padding: 4px 0;
  list-style: none; background: var(--white); border: 1px solid var(--orange);
  box-shadow: 0 2px 8px rgba(0,0,0,.14); display: none; z-index: 70;
}
.lang.open .lang-list { display: block; }
.lang-list a {
  display: flex; align-items: center; gap: 8px; padding: 7px 15px;
  font: normal normal normal 16px/22.4px var(--ui-font); color: var(--black);
  text-decoration: none;
}
.lang-list a:hover { background: #f2f2f2; }
.lang-list img { width: 35px; height: 22px; object-fit: cover; }

/* nav */
.nav {
  position: absolute; right: 181px; top: 44px; display: flex; height: 50px;
  margin: 0; padding: 0; list-style: none;
}
.nav-item { position: relative; }
.nav-item > a, .nav-more-btn {
  display: block; height: 50px; padding: 0 15px;
  font: normal normal normal 16px/50px var(--body-font); color: var(--black);
  text-decoration: none; white-space: nowrap; background: none; border: 0; cursor: pointer;
}
.nav-item > a:hover, .nav-more-btn:hover { text-decoration: underline; }
.nav-more-list {
  position: absolute; right: 0; top: 50px; min-width: 163px; margin: 0; padding: 0;
  list-style: none; background: var(--white); box-shadow: 0 2px 8px rgba(0,0,0,.14);
  display: none; z-index: 70;
}
.nav-item.open .nav-more-list { display: block; }
.nav-more-list a {
  display: block; padding: 0 12px;
  font: normal normal normal 16px/31px var(--body-font); color: var(--black);
  text-decoration: none; white-space: nowrap;
}
.nav-more-list a:hover { text-decoration: underline; }

/* ---------- buttons (measured: 1px solid #000, square corners) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--black); border-radius: 5px; text-decoration: none;
  font-family: var(--head-font); font-weight: 700; text-align: center;
  transition: opacity .12s;
}
.btn:hover { opacity: .85; text-decoration: none; }
.btn-orange { background: var(--orange); color: var(--black); }
.btn-black  { background: var(--black);  color: var(--white); }
.btn-white  { background: var(--white);  color: var(--orange); }

.hdr-cta {
  /* The original hangs this button 39px outside the header box, which makes the
     page scroll horizontally below ~1180px. The offset is kept identical wherever
     the original does not overflow, and only clamped inside the viewport below
     that, so no width scrolls sideways. */
  position: absolute; top: 49px;
  right: max(-39px, calc(var(--hdr-w) / 2 - 50vw + 10px));
  width: 190px; height: 40px; font-size: 20px; line-height: 28px;
}

/* ==========================================================================
   HERO  (section height 941px)
   Geometry measured on the original at 1920px; the block below the intro
   list reflows exactly as the original does (list grows -> buttons, icons).
   ========================================================================== */
.hero { height: 941px; overflow: hidden; }
.hero .cnt { height: 941px; }
.hero-curve {
  position: absolute; left: 0; top: 0; width: 100%; height: 941px;
  object-fit: cover; object-position: center top; pointer-events: none;
}
.hero-h1 { position: absolute; left: 0; top: 119px; width: 526px; margin: 0; }
.hero-h1 .font_0, .hero-h1 h1 {
  font: normal normal normal 74px/1.1em var(--hero-font);
  color: var(--black); letter-spacing: 0;
}
.hero-flow { position: absolute; left: 73px; top: 394px; width: 365px; }
.hero-list { width: 365px; }
.hero-list p { margin: 0; }
.hero-buy      { margin: 26px 0 0 2px; width: 298px; height: 43px; font-size: 22px; }
.hero-contract { margin: 21px 0 0 2px; width: 298px; height: 43px; font-size: 22px; }

.hero-links { position: relative; margin-top: 28px; height: 50px; width: 500px; }
.hero-link { position: absolute; top: 0; display: block; }
.hero-link .ic { position: absolute; left: 0; top: 4px; display: block; width: 32px; height: 32px; }
.hero-link .ic svg { width: 100%; height: 100%; fill: #000; display: block; }
.hero-link .lb { position: absolute; top: 0; display: block; }
.hero-link .lb p {
  font: normal normal normal 14px/1.2em var(--body-font); color: var(--black); margin: 0;
}
.hero-link .lb a { color: var(--black); text-decoration: underline; }
.hero-link:nth-child(1) { left: 0; }
.hero-link:nth-child(1) .ic { top: 4px; height: 21px; }
.hero-link:nth-child(1) .lb { left: 46px; width: 124px; }
.hero-link:nth-child(2) { left: 180px; }
.hero-link:nth-child(2) .ic { top: 0; }
.hero-link:nth-child(2) .lb { left: 44px; width: 81px; }
.hero-link:nth-child(3) { left: 312px; }
.hero-link:nth-child(3) .ic { top: 0; }
.hero-link:nth-child(3) .lb { left: 43px; width: 104px; }

/* The logo is pinned to the container's right edge, but the container is
   fluid (max(980px, 100vw - 380px)) while the headline is a fixed 526px box
   on the left. As the viewport narrows - which is what browser zoom does -
   the logo slides left into the headline and the two collide (worst case the
   Italian hero, which overlapped by 68px at the 980px container floor).
   Clamping `right` stops the logo at a fixed 506px from the container's left
   once things get tight, holding a 26px gap to the longest headline in any
   language. The logo box then overhangs the container by 15px at the floor,
   but the artwork carries 18px of transparent padding at this size, so the
   orange mark itself never reaches the edge and is never clipped.
   Wide viewports (>= 1436px) are unaffected and keep the original 61px. */
.hero-logo {
  position: absolute; top: 36px; width: 489px; height: 582px;
  right: min(61px, calc(var(--cnt-w) - 995px));
}
.hero-logo img { width: 489px; height: 582px; display: block; }

/* ==========================================================================
   ROADMAP  (white + 11% tiled bitcoin pattern)
   ========================================================================== */
.pattern::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url('../images/pattern-tile.png') repeat 50% 0;
  opacity: .11;
}
.roadmap { background: var(--white); }
.roadmap .cnt { padding: 202px 0 5px; }
.rm-icon { position: absolute; left: 63px; top: 128px; width: 50px; height: 50px; }
.rm-title { position: absolute; left: 120px; top: 129px; width: 568px; }
.rm-body { margin-left: 64px; width: 916px; }
.rm-body p { margin: 0; }

/* four equal columns, each item 230px wide - matches the original's 25% grid.
   The stage container is a fixed-height strip (924px); translations with
   longer stage copy take up the slack rather than growing the section. */
.stages {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 32px; padding-top: 13px; height: 924px;
}
.stage { width: 230px; }
.stage-img {
  width: 230px; height: 304px; margin-left: 7px;
  background: var(--black); border: 2px solid var(--black);
  border-radius: 8px; overflow: hidden;
}
.stage { align-self: start; }
.stage-img img { width: 226px; height: 300px; display: block; object-fit: cover; }
.stage-head { position: relative; margin: 41px 0 0 10px; width: 230px; min-height: 31px; }
.stage-head .st h3 { font-weight: 700; }
/* the status icon sits at a fixed offset in the original, not flush right */
.stage-head .ic { position: absolute; left: 176px; top: 0; width: 36px; height: 31px; }
.stage-head .ic svg { width: 100%; height: 100%; display: block; }
.stage-body { margin: 13px 0 0 10px; width: 230px; }
.stage-body p { margin: 0; }

/* ==========================================================================
   TOKEN FUNCTIONS + PRESS
   ========================================================================== */
.tokenfn { background: var(--white); }
.tokenfn .cnt { padding: 115px 0 0; }
.tf-title { position: absolute; left: 0; top: 40px; width: 551px; }
.tf-logo { position: absolute; left: calc(75% - 178px); top: 89px; width: 356px; height: 472px; }
.tf-logo img { width: 356px; height: 472px; display: block; }
/* strip minimum height: shorter translations still push the press strip
   no higher than the designed position. */
.tf-body { width: 490px; min-height: 2361px; }
.tf-body p { margin: 0; }

/* clip only: the strip keeps its exact position at every width, but its
   overhang can no longer scroll the document sideways below ~1100px */
.press { margin-top: 40px; padding-bottom: 66px; overflow-x: clip; }
/* The heading sits a fixed 40px below the token-functions block, but that
   block carries min-height: 2361px. The English and Italian copy stops ~88px
   short of that floor, so those two already read with ~128px of clear space
   above the heading. The Spanish, French and Portuguese copy runs past the
   floor and ends flush with the box, leaving only ~45px and a visibly
   cramped heading. These offsets give those three the same ~128px; English
   and Italian already have it and are deliberately left alone.
   Desktop only - on mobile .tf-body drops to min-height: 0, so every
   language flows the same and the shared 62px there is already correct. */
@media (min-width: 980px) {
  :lang(es) .press, :lang(fr) .press { margin-top: 123px; }
  :lang(pt) .press { margin-top: 117px; }
}
.press-title { width: 817px; margin-left: calc(50% - 552px); text-align: center; }
.press-strip { position: relative; width: 1088px; margin: 40px 0 0 calc(50% - 552px); }
.press-track {
  display: flex; gap: 30px; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; padding-left: 35px;
}
.press-track::-webkit-scrollbar { display: none; }
.press-item { flex: 0 0 108px; width: 108px; height: 108px; display: block; }
.press-item img {
  width: 108px; height: 108px; border-radius: 50%; display: block; object-fit: cover;
  background: var(--white);
}
.press-arrow {
  position: absolute; top: 21px; width: 45px; height: 65px; border: 0; cursor: pointer;
  background: url('../icons/carousel-arrows.png') no-repeat; background-size: 100px 70px;
  padding: 0; overflow: hidden;
}
.press-prev { left: -5px; background-position: -3px -3px; }
.press-next { right: -5px; background-position: -53px -3px; }

/* ==========================================================================
   REFUND  (white + 11% pattern)
   ========================================================================== */
.refund { background: var(--white); }
.refund .cnt { padding: 52px 0 48px; }
.rf-inner { width: 934px; margin: 0 auto; }
.rf-title { width: 925px; }
.rf-body { margin-top: 29px; width: 866px; }
.rf-body p { margin: 0; }
.rf-btns { display: flex; gap: 64px; margin: 62px 0 0 137px; }
.rf-btns .btn { width: 298px; height: 43px; font-size: 22px; flex: 0 0 298px; }
.rf-note { margin-top: 52px; width: 866px; }
.rf-note p { margin: 0; }

/* ==========================================================================
   FOOTER (orange) + BOTTOM BAR (black)
   ========================================================================== */
.footer { background: var(--orange); }
.footer .fcnt { width: var(--hdr-w); margin: 0 auto; position: relative; padding: 161px 0 44px; }
.ft-logo { position: absolute; left: 16px; top: 50px; width: 44px; height: 44px; }
.ft-brand { position: absolute; left: 66px; top: 54px; text-decoration: none; }
.ft-brand h2, .ft-brand p, .ft-brand span { font-weight: 700; }
.ft-tag { position: absolute; left: 66px; top: 84px; }
.ft-tag span { font: normal normal normal 14px/1.2em var(--body-font); color: var(--black); }
/* col-a is the taller column, so it drives the strip height and stays in flow */
.ft-col-a { margin-left: calc(25% - 231px); width: 339px; }
.ft-col-b { position: absolute; left: calc(50% + 116px); top: 161px; width: 300px; }
.ft-h { margin-bottom: 35px; }
.ft-col-a p, .ft-col-b p { margin: 0; }
.ft-col-b .ft-link { margin-bottom: 14.4px; }
.botbar { background: var(--black); }
.botbar .bcnt { width: 980px; margin: 0 auto; padding: 15px 0 7px; text-align: center; }
.botbar p { margin: 0; }
.botbar, .botbar a { color: var(--white); }

/* ==========================================================================
   INNER PAGES (privacy / terms)
   ========================================================================== */
/* The original positions this content at a fixed 252px from the viewport
   left at every width (it does not follow the centred content container).
   The export also carried a fixed min-height of 4560px, which left a large
   blank strip above the footer on pages shorter than that (the privacy
   policy in every language). The section now sizes to its content; the
   breathing room before the footer comes from .page-body's padding-bottom. */
.page-head { min-height: 0; }
.page-head .cnt { width: 100%; margin: 0; }
.page-title { position: absolute; width: 600px; }
.page-body { width: 728px; padding-bottom: 45px; }
.page-body p { margin: 0; }
.page-privacy .page-title { left: 252px; top: 69px; }
.page-privacy .cnt { padding-top: 187px; }
.page-privacy .page-body { margin-left: 252px; }
.page-terms .page-title { left: 251px; top: 72px; }
.page-terms .cnt { padding-top: 176px; }
.page-terms .page-body { margin-left: 251px; }

/* ==========================================================================
   COOKIE BANNER  (reproduces the original consent bar, vanilla JS)
   ========================================================================== */
.cookiebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: var(--black); color: var(--white); min-height: 64px;
  font: normal normal normal 14px/18.2px HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: flex; align-items: center; padding: 12px 20px;
}
.cookiebar[hidden] { display: none; }
.cookiebar .cb-text { flex: 1 1 auto; max-width: 805px; }
.cookiebar .cb-text a { color: var(--white); text-decoration: underline; }
.cookiebar .cb-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.cookiebar .cb-settings {
  background: none; border: 0; color: var(--white); text-decoration: underline;
  font: inherit; line-height: 30px; cursor: pointer; padding: 0;
}
.cookiebar .cb-btn {
  font: inherit; height: 32px; padding: 0 16px; cursor: pointer; border-radius: 0;
}
.cookiebar .cb-decline { background: var(--black); color: var(--white); border: 1px solid var(--white); }
.cookiebar .cb-accept  { background: var(--white); color: var(--black); border: 1px solid var(--white); }
.cookiebar .cb-close {
  background: none; border: 0; cursor: pointer; width: 24px; height: 24px; padding: 0;
  margin-left: 12px; color: var(--white);
}
.cookiebar .cb-close svg { width: 24px; height: 24px; display: block; }

/* ==========================================================================
   COOKIE SETTINGS MODAL
   Reproduces the original consent-manager panel. Measured on the original:
   600px wide, square corners, shadow rgba(0,0,0,.1) -8px -7px 20px,
   HelveticaNeue 24/16/12px, 48x24 toggles, sections padded 24px 90px 24px 24px.
   ========================================================================== */
.cs-overlay {
  position: fixed; inset: 0; z-index: 950;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .35);
  font: normal normal normal 14px/1.4 HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.cs-overlay[hidden] { display: none; }
.cs-modal {
  /* measured: fixed 571px panel, capped at 80% of the viewport height */
  position: relative; width: 600px; max-width: 100%;
  height: 571px; max-height: 80vh;
  background: var(--white); color: var(--black); border-radius: 0;
  box-shadow: rgba(0, 0, 0, .1) -8px -7px 20px 0;
  display: flex; flex-direction: column;
}
.cs-title {
  flex: 0 0 auto; margin: 0; padding: 24px 60px 0 24px;
  font: normal normal normal 24px/1.33 HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--black);
}
.cs-close {
  position: absolute; right: 20px; top: 12px; width: 24px; height: 27px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--black);
}
.cs-close svg { width: 24px; height: 24px; display: block; }

.cs-body { flex: 1 1 auto; margin-top: 5px; overflow-y: auto; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.cs-section {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 24px 24px 24px 24px; border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.cs-section:last-child { border-bottom: 0; }
.cs-copy { flex: 1 1 auto; min-width: 0; }
.cs-copy h3 {
  margin: 0;
  font: normal normal normal 16px/24px HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--black);
}
.cs-copy p {
  margin: 12px 0 0;
  font: normal normal normal 12px/1.33 HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--black);
}

/* toggle: 48x24 pill, knob 20px. off = #a4a4a4, on = #000, locked = #e7eaeb */
.cs-toggle { flex: 0 0 48px; position: relative; width: 48px; height: 24px; }
.cs-toggle input {
  position: absolute; opacity: 0; width: 48px; height: 24px; margin: 0; cursor: pointer; z-index: 2;
}
.cs-toggle input:disabled { cursor: default; }
.cs-toggle label {
  display: block; width: 48px; height: 24px; border-radius: 12px;
  background: #a4a4a4; transition: background .15s; pointer-events: none;
}
.cs-knob {
  position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .15s;
  display: flex; align-items: center; justify-content: center;
}
/* dash when off, tick when on - drawn with the knob's own box */
.cs-knob::before {
  content: ""; width: 8px; height: 2px; background: #a4a4a4; border-radius: 1px;
}
.cs-toggle input:checked + label { background: var(--black); }
.cs-toggle input:checked + label .cs-knob { transform: translateX(24px); }
.cs-toggle input:checked + label .cs-knob::before {
  width: 10px; height: 6px; background: none; border-radius: 0;
  border-left: 2px solid var(--black); border-bottom: 2px solid var(--black);
  transform: rotate(-45deg) translate(1px, -1px);
}
.cs-toggle input:disabled + label { background: #e7eaeb; }
.cs-toggle input:disabled + label .cs-knob::before { border-color: #c9cfd1; }
.cs-toggle input:focus-visible + label { outline: 2px solid #116dff; outline-offset: 2px; }

.cs-footer { flex: 0 0 auto; padding: 24px; display: flex; justify-content: flex-end; }
.cs-save {
  min-width: 172px; height: 32px; margin: 6px; padding: 0 16px; cursor: pointer;
  background: var(--black); color: var(--white); border: 1px solid var(--black); border-radius: 0;
  font: normal normal normal 14px/1 HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.cs-save:hover { opacity: .85; }

/* burger and the mobile-only menu entries are desktop-hidden */
.burger { display: none; }
.nav-mobile-only { display: none; }

/* ==========================================================================
   MOBILE  (< 980px)
   The original ships a separate 320px-wide mobile design and serves it with
   <meta name="viewport" content="width=320">, letting the browser scale that
   canvas up to the device width. The same 320px canvas and the same viewport
   declaration are used here (the meta is switched in the page <head>), so a
   phone renders this identically to the original at 320, 375, 390 and up.

   For a desktop window narrowed below 980px the meta is ignored by the
   browser, so main.js sets a numeric `body` zoom to fill the width instead.
   (`zoom` cannot take a calc() value - no browser accepts it - which is why
   this is done in script rather than CSS.)

   All values below are measured from the original mobile layout.
   ========================================================================== */
@media (max-width: 979.98px) {
  :root { --hdr-w: 320px; --cnt-w: 320px; }

  body { overflow-x: hidden; }

  .cnt, .hdr-in, .footer .fcnt, .botbar .bcnt { width: 320px; }
  .press-title, .press-strip { margin-left: 0; }

  /* ---- mobile type scale (measured) ---- */
  .rt .font_0, .rt .font_0 span { font-size: 40px !important; line-height: 1.1em !important; }
  .rt .font_2, .rt .font_2 span { font-size: 24px !important; line-height: 1.3em !important; }
  .rt .font_3, .rt .font_3 span { font-size: 26px !important; line-height: 1.4em !important; }
  .rt .font_5, .rt .font_5 span { font-size: 24px !important; line-height: 1.4em !important; }
  .rt .font_7, .rt .font_7 span { font-size: 18px !important; line-height: 1.6em !important; }
  .rt .font_9, .rt .font_9 span { font-size: 13px !important; line-height: 1.2em !important; }
  /* the three hero icon captions keep 16px on mobile in the original */
  .hero-link .lb .font_9, .hero-link .lb .font_9 span { font-size: 16px !important; line-height: 1.2em !important; }
  /* the footer tagline is 16px on mobile; the one in the header stays 13px */
  .ft-tag .font_9, .ft-tag .font_9 span, .ft-tag span { font-size: 16px !important; line-height: 1.2em !important; }
  /* headings that carry their own 18px keep it - the font_3 mobile scale
     (26px) applies only where no explicit size was set (fr / it token text) */
  .rt .font_3[style*="font-size:18px"],
  .rt .font_3[style*="font-size:18px"] span {
    font-size: 18px !important; line-height: 1.4em !important;
  }
  /* the bottom-bar disclaimer is 13px on mobile in every language; pt marks it
     up as font_8 with an inline 14px, so the size has to be forced here while
     each block keeps its own line-height */
  .botbar .bcnt [style*="font-size:14px"] { font-size: 13px !important; }

  /* the press and refund headings are 23px on mobile, not 24px like the others */
  .press-title .font_2, .press-title .font_2 span,
  .rf-title .font_2, .rf-title .font_2 span { font-size: 23px !important; line-height: 1.3em !important; }
  /* the two footer headings are sized individually in the original */
  .ft-col-a .ft-h .font_7, .ft-col-a .ft-h .font_7 span { font-size: 19px !important; line-height: 1.4em !important; }
  .ft-col-b .ft-h .font_7, .ft-col-b .ft-h .font_7 span { font-size: 18px !important; line-height: 1.4em !important; }
  /* one roadmap sub-heading carries an inline 28px that the original scales to 26px */
  .rm-body [style*="font-size:28px"] { font-size: 26px !important; }

  /* ---- header (0 - 195) ---- */
  .hdr, .hdr-in { height: 195px; }
  .hdr-logo { left: 20px; top: 29px; width: 180px; height: 38px; }
  .hdr-logo img { width: 180px; height: 38px; }
  .hdr-tag { left: 63px; top: 69px; }
  .hdr-tag span { font-size: 13px; line-height: 15.6px; }
  /* burger sits at [250,34] in the 320 canvas and is 50x50, as on the original;
     it turns into the close X while the menu is open */
  .burger {
    display: block; position: absolute; right: 20px; top: 34px;
    width: 50px; height: 50px; background: none; border: 0; padding: 0; cursor: pointer;
    z-index: 100000;
  }
  /* measured on the original: three 22x2 bars, 2px radius, 9px apart */
  .burger span {
    display: block; position: absolute; left: 14px; width: 22px; height: 2px;
    background: var(--black); border-radius: 2px;
    transition: transform .2s ease, opacity .15s ease, top .2s ease;
  }
  .burger span:nth-child(1) { top: 15px; }
  .burger span:nth-child(2) { top: 24px; }
  .burger span:nth-child(3) { top: 33px; }
  .burger.is-open span:nth-child(1) { top: 24px; transform: rotate(45deg); }
  .burger.is-open span:nth-child(2) { opacity: 0; }
  .burger.is-open span:nth-child(3) { top: 24px; transform: rotate(-45deg); }
  .hdr-cta {
    left: 31px; right: auto; top: 100px; width: 257px; height: 30px;
    font-size: 20px; line-height: 1.4em;
  }
  .lang { left: 31px; top: 137px; }
  .lang-btn { width: 257px; height: 45px; }
  .lang-list { width: 257px; top: 45px; }

  /* Full-screen menu panel, as on the original: white, fixed, first item at
     y=112, rows 278x56 inset 20px with a 1px orange rule under each. The
     "+ Menu" grouping does not exist on mobile - all six entries are listed
     flat, which `display: contents` achieves without duplicating any markup. */
  .nav {
    position: fixed; inset: 0; left: 0; top: 0; width: 100%; height: 100%;
    flex-direction: column; align-items: flex-start;
    background: var(--white); display: none; z-index: 99999;
    margin: 0; padding: 112px 0 40px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: none;
  }
  .nav.open { display: flex; }

  .nav-item.has-more { display: contents; }
  .nav-more-btn { display: none; }
  .nav-more-list { display: contents; position: static; box-shadow: none; min-width: 0; }

  .nav-mobile-only { display: block; }
  .nav-item, .nav-more-list li {
    width: 278px; margin-left: 20px; flex: 0 0 auto;
    border-bottom: 1px solid var(--orange);
  }
  .nav-item > a, .nav-more-list a {
    display: block; width: 100%; height: 56px; padding: 0 0 0 10px;
    font: normal normal 700 22px/56px var(--head-font);
    color: var(--black); text-decoration: none; text-align: left; white-space: normal;
  }
  .nav-item > a:hover, .nav-more-list a:hover { text-decoration: none; }

  /* ---- hero (logo first, then heading) ---- */
  .hero { height: auto; }
  /* z-index:0 makes this a stacking context so the curve can sit behind the
     content with z-index:-1 without vanishing behind the page itself. */
  .hero .cnt { height: auto; display: flex; flex-direction: column; position: relative; z-index: 0; }
  /* The curve runs from y=492 to the bottom of the hero, so it grows with the
     content instead of stopping short in the longer translations, and stays
     behind the buttons and captions. */
  .hero-curve {
    top: 492px; left: 0; width: 320px; height: calc(100% - 492px); z-index: -1;
  }
  .hero-logo { position: static; order: 1; margin: 0 0 0 19px; width: 280px; height: 334px; }
  .hero-logo img { width: 280px; height: 334px; }
  .hero-h1 { position: static; order: 2; margin: 20px 0 0 19px; width: 280px; }
  .hero-flow { position: static; order: 3; margin: 37px 0 0 20px; width: 280px; }
  .hero-list { width: 280px; }
  /* Italian and Portuguese mark this list up as font_8 with an inline 20px
     rather than font_7; the original renders every language at 18px here. */
  .hero-list p, .hero-list p span, .hero-list p a {
    font-size: 18px !important; line-height: 1.6em !important;
  }
  /* the second label is shrunk to fit the button in the original (measured 20.53px) */
  .hero-buy      { margin: 20px 0 0 -3px; width: 285px; height: 42px; font-size: 22px; line-height: 1.4em; }
  .hero-contract { margin: 19px 0 0 -2px; width: 285px; height: 42px; font-size: 20.53px; line-height: 1.4em; }

  .hero-links { position: static; margin: 30px 0 0; width: 280px; height: auto; padding-bottom: 65px; }
  .hero-link { position: static; display: block; left: auto !important; padding-left: 78px; }
  .hero-link .ic { position: absolute; left: 21px; top: 4px; width: 30px !important; height: 30px !important; }
  .hero-link .lb { position: static; width: 181px !important; left: auto !important; }
  .hero-link:nth-child(1) { position: relative; }
  .hero-link:nth-child(2) { position: relative; margin-top: 24px; }
  .hero-link:nth-child(3) { position: relative; margin-top: 47px; }
  .hero-link:nth-child(1) .ic { top: 4px; height: 30px !important; }

  /* ---- roadmap (1305 - 5878) ---- */
  .roadmap .cnt { padding: 23px 0 48px; }
  .rm-icon { position: static; display: block; margin: 0 auto; width: 57px; height: 57px; }
  .rm-title { position: static; margin: 0 0 0 20px; width: 280px; }
  .rm-body { margin: 23px 0 0 20px; width: 280px; }

  .stages { display: block; margin: 0; padding: 0; height: auto; }
  .stage { width: 280px; margin: 50px 0 0 20px; }
  .stage:first-child { margin-top: 46px; }
  .stage-img { width: 133px; height: 174px; margin: 0; }
  .stage-img img { width: 129px; height: 170px; }
  .stage-img img { width: 129px; height: 170px; }
  .stage-head { margin: 20px 0 0; width: 280px; }   /* 22px from the image, less the 2px frame */
  .stage-head .ic { left: 212px; width: 40px; height: 34px; }
  .stage-body { margin: 54px 0 0; width: 280px; }

  /* ---- token functions + press (5877 - 10023) ---- */
  .tokenfn .cnt { padding: 51px 0 0; }
  .tf-logo { position: static; margin: 0 0 0 35px; width: 250px; height: 331px; }
  .tf-logo img { width: 250px; height: 331px; }
  .tf-title { position: static; margin: 31px 0 0 20px; width: 280px; }
  .tf-body { width: 280px; margin: 14px 0 0 20px; min-height: 0; }

  .press { margin-top: 62px; padding-bottom: 61px; }
  .press-title { width: 280px; margin: 0 0 0 20px; text-align: left; }
  .press-strip { width: 280px; margin: 20px 0 0 20px; }
  .press-track { padding-left: 0; }
  /* the arrows stay visible on mobile, flush with the strip edges */
  .press-arrow { display: block; top: 22px; }
  .press-prev { left: 0; }
  .press-next { right: 0; }

  /* ---- refund (10023 - 10949) ---- */
  .refund .cnt { padding: 33px 0 32px; }
  .rf-inner { width: 280px; margin: 0 0 0 20px; }
  .rf-title { width: 280px; }
  .rf-body { margin-top: 18px; width: 280px; }
  .rf-btns { display: block; margin: 26px 0 0; }
  .rf-btns .btn { display: flex; width: 280px; height: 42px; font-size: 20.53px; line-height: 1.4em; margin-bottom: 25px; }
  .rf-btns .btn:last-child { margin-bottom: 0; }
  .rf-note { margin-top: 21px; width: 280px; }

  /* ---- footer ---- */
  /* measured: orange band 797px tall, logo inset 32px from its top */
  .footer .fcnt { height: auto; padding: 32px 0 31px; }
  .ft-logo { position: static; display: block; margin: 0 auto; width: 56px; height: 56px; }
  .ft-brand { position: static; display: block; margin: 6px 0 0 20px; }
  .ft-tag { position: static; display: block; margin: 2px 0 0 20px; }
  .ft-col-a { margin: 40px 0 0 20px; width: 231px; }
  .ft-col-b { position: static; margin: 30px 0 0 20px; width: 231px; }
  .ft-brand { width: 231px; }
  .ft-h { width: 225px; margin-bottom: 6px; }
  .ft-col-b .ft-link { margin-bottom: 9.75px; }

  .botbar .bcnt { width: 277px; margin: 0 auto; padding: 22px 0 41px; }

  /* ---- inner pages ---- */
  .page-head { min-height: 0; }
  .page-head .cnt { width: 320px; }
  .page-title { position: static !important; width: 280px; margin: 0 0 0 20px !important; left: auto !important; top: auto !important; }
  .page-privacy .cnt, .page-terms .cnt { padding-top: 40px; }
  .page-body { width: 280px; margin: 24px 0 0 20px !important; padding-bottom: 60px; }

  /* ---- cookie settings modal ---- */
  .cs-overlay { padding: 12px; }
  .cs-modal { width: 100%; height: auto; max-height: 86vh; }
  .cs-title { font-size: 20px; padding: 20px 52px 0 20px; }
  .cs-section { padding: 18px 20px; gap: 12px; }
  .cs-footer { padding: 18px 20px; }
  .cs-save { min-width: 0; width: 100%; margin: 0; }

  /* ---- cookie bar ---- */
  .cookiebar { display: block; padding: 20px; position: fixed; }
  .cookiebar .cb-text { max-width: none; display: block; }
  .cookiebar .cb-actions { display: block; margin: 16px 0 0; }
  .cookiebar .cb-btn { display: block; width: 100%; margin: 0 0 10px; height: 36px; }
  .cookiebar .cb-settings { display: block; width: 100%; text-align: center; }
  .cookiebar .cb-close { position: absolute; right: 12px; top: 10px; margin: 0; }
}