@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/baloo-2-800.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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-600.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/inter-700.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-800.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;
}
:root {
  --primary: #f97316;
  --primary-2: #f97316;
  --primary-rgb: 249, 115, 22;
  --grad: linear-gradient(180deg, #ffaf2d 0%, #f97316 100%);
  --on-primary: #111418;
  --primary-text-bg: #f97316;
  --bg: #0f1421;
  --surface: #12192a;
  --surface-2: #19253f;
  --text: #ffffff;
  --heading: #ffffff;
  --muted: #9ca3af;
  --border: rgba(249, 115, 22, .32);
  --border-strong: #f97316;
  --tint: #30211f;
  --tint-text: #ffffff;
  --link: #f97316;
  --header-bg: #0c101b;
  --header-text: #feeee3;
  --footer-bg: #0b0e18;
  --footer-text: #e2e3e4;
  --footer-link: #f97316;
  --hero-overlay: linear-gradient(209deg, #893f0c 0%, #2d1504 70%);
  --good: #22c55e;
  --bad: #f87171;
  --shadow: 0 10px 24px -12px rgba(0, 0, 0, .45);
  --r: 24px; --r-sm: calc(24px * .6); --wrap: 1240px; --text-w: 920px;
  --f-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --f-head: 'Plus Jakarta Sans', system-ui, sans-serif; --w-head: 800;
  --f-disp: 'Baloo 2', system-ui, sans-serif; --w-disp: 800;
  --case: none; --track: 0;
  --card: transparent;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.75 var(--f-body); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: var(--w-head); color: var(--heading); line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: clamp(30px, 4.4vw, 46px); }
h2 { font-size: clamp(24px, 3vw, 32px); margin-top: 1.9em; }
h3 { font-size: clamp(19px, 2.2vw, 22px); margin-top: 1.5em; }
p { margin: 0 0 1.05em; }
strong { color: var(--heading); }
.cr-wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.cr-skip { position: absolute; left: -9999px; } .cr-skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--surface); padding: 8px 12px; }
.cr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px;
  border-radius: var(--r-sm); font: 700 16px/1 var(--f-head); text-decoration: none; letter-spacing: .02em; border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease; cursor: pointer; white-space: nowrap; }
.cr-btn:hover { transform: translateY(-2px); }
.cr-btn-main { background: var(--grad); color: var(--on-primary); box-shadow: 0 10px 24px -12px rgba(var(--primary-rgb), .8); }
.cr-btn-alt { background: transparent; color: var(--heading); border-color: var(--border-strong); }
.cr-btn-alt:hover { background: var(--tint); color: var(--tint-text); }
.cr-btns { display: flex; flex-wrap: wrap; gap: 12px; }
/* header */
.cr-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); color: var(--header-text); border-bottom: 1px solid var(--border); }
.cr-header-in { display: flex; align-items: center; gap: 20px; min-height: 70px; }
.cr-logo img { height: 56px; width: auto; }
.cr-nav { margin-left: auto; }
.cr-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.cr-nav a { display: block; padding: 8px 12px; border-radius: var(--r-sm); color: var(--header-text); text-decoration: none; font: 600 15px/1.2 var(--f-head); }
.cr-nav a:hover, .cr-nav a[aria-current] { background: var(--tint); color: var(--tint-text); }
.cr-head-btns { display: flex; gap: 8px; }
.cr-head-btns .cr-btn { min-height: 42px; padding: 10px 18px; font-size: 14px; }
.cr-burger { display: none; margin-left: auto; background: none; border: 1px solid var(--border); border-radius: var(--r-sm); width: 46px; height: 42px;
  color: var(--header-text); cursor: pointer; }
.cr-burger span, .cr-burger span::before, .cr-burger span::after { display: block; width: 20px; height: 2px; background: currentColor; margin: auto; position: relative; content: ""; }
.cr-burger span::before { position: absolute; top: -6px; } .cr-burger span::after { position: absolute; top: 6px; }
@media (max-width: 1080px) {
  .cr-burger { display: block; }
  .cr-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--header-bg); border-bottom: 1px solid var(--border); padding: 10px 16px 18px; margin: 0; }
  .cr-nav.cr-open { display: block; }
  .cr-nav ul { flex-direction: column; }
  .cr-nav a { padding: 12px 10px; font-size: 16px; }
  .cr-head-btns { display: none; }
  .cr-logo img { height: 44px; }
}
/* phone tab bar */
.cr-tabbar { display: none; }
@media (max-width: 760px) {
  .cr-tabbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--header-bg); border-top: 1px solid var(--border); }
  .cr-tabbar .cr-btn { min-height: 46px; padding: 10px; }
  body { padding-bottom: 76px; }
}
/* breadcrumb + page head */
.cr-crumbs { font-size: 14px; color: var(--muted); margin: 26px 0 10px; }
.cr-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.cr-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.cr-crumbs a { color: var(--muted); }
.cr-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--muted); margin: -4px 0 22px; }
.cr-cover { margin: 0 auto 26px; max-width: 720px; }
.cr-cover img { width: 100%; border-radius: var(--r); box-shadow: var(--shadow); }
/* layout */
.cr-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: 60px; }
@media (min-width: 1100px) { .cr-layout.cr-has-side { grid-template-columns: minmax(0, 1fr) 300px; } }
.cr-main { min-width: 0; }
.cr-main > * { max-width: var(--text-w); margin-left: auto; margin-right: auto; }
.cr-main > .cr-wide { max-width: 100%; }
.cr-layout.cr-has-side .cr-main > * { max-width: none; }          /* next to the sidebar: the whole column */
.cr-wrap.cr-home-w { width: min(100% - 32px, 1100px); }          /* homepage: hero and every block in ONE centred */
.cr-home .cr-main > * { max-width: 100%; }                         /* container of the same width (owner 2026-11-14) */
.cr-main .cr-banner { max-width: 760px; margin: 4px auto 26px; }   /* never a whole laptop screen (owner rule) */
.cr-banner img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); box-shadow: var(--shadow); }
.cr-steps-shots .cr-stepshot { margin: 16px auto 6px; }
.cr-steps-shots .cr-stepshot img { width: 240px; }
.cr-side { display: none; }
@media (min-width: 1100px) { .cr-side { display: block; } .cr-side-in { position: sticky; top: 96px; display: grid; gap: 20px; } }
.cr-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; }
.cr-side-brand { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.cr-side-brand img { width: 64px; height: 64px; border-radius: 14px; object-fit: contain; background: var(--bg); }
.cr-side-brand b { font: var(--w-head) 20px/1.2 var(--f-head); color: var(--heading); display: block; }
.cr-side-brand span { font-size: 14px; color: var(--muted); }
.cr-side dl { margin: 0 0 14px; } .cr-side dl div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.cr-side dt { color: var(--muted); white-space: nowrap; } .cr-side dd { margin: 0; font-weight: 700; color: var(--heading); text-align: right; min-width: 0; }
.cr-side .cr-btns .cr-btn { flex: 1; min-height: 44px; padding: 10px; font-size: 14px; }
.cr-side h3 { margin: 0 0 10px; font-size: 18px; }
.cr-side ul { list-style: none; margin: 0; padding: 0; } .cr-side li a { display: block; padding: 9px 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: 15px; }
.cr-side li a:hover { color: var(--link); }
.cr-code { display: grid; gap: 6px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
  padding: 8px 8px 8px 14px; margin-bottom: 14px; background: var(--tint); color: var(--tint-text); font-size: 15px; }
.cr-code-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.cr-code b { letter-spacing: .04em; color: var(--tint-text); font-size: 21px; white-space: nowrap; }
.cr-code button { background: var(--grad); color: var(--on-primary); border: 0; border-radius: var(--r-sm); padding: 7px 12px; font: 700 13px/1 var(--f-head); cursor: pointer; }
/* toc */
.cr-toc { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); margin: 6px auto 30px; }
.cr-toc summary { cursor: pointer; padding: 14px 20px; font: var(--w-head) 17px/1.3 var(--f-head); color: var(--heading); list-style: none; display: flex; justify-content: space-between; }
.cr-toc summary::-webkit-details-marker { display: none; }
.cr-toc summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--link); }
.cr-toc[open] summary::after { content: "–"; }
.cr-toc ol { margin: 0; padding: 0 22px 16px 40px; font-size: 15.5px; } .cr-toc ol ol { padding: 4px 0 4px 22px; }
.cr-toc li { margin: 4px 0; } .cr-toc a { color: var(--text); text-decoration: none; } .cr-toc a:hover { color: var(--link); text-decoration: underline; }
/* content parts */
.cr-lead { font-size: 18.5px; }
.cr-hl { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 12px; margin: 10px auto 28px; }
.cr-hl div { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px; }
.cr-hl dt { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cr-hl dd { margin: 4px 0 0; font: var(--w-head) 17px/1.35 var(--f-head); color: var(--heading); }
@media (max-width: 760px) { .cr-hl { grid-template-columns: minmax(0, 1fr); } }
.cr-sec-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 30px; align-items: start; }
@media (max-width: 900px) { .cr-sec-grid { grid-template-columns: minmax(0, 1fr); } }
.cr-shot { margin: 8px auto 26px; text-align: center; }
.cr-shot img { margin: 0 auto; width: 280px; max-width: 78vw; }
ul.cr-list, ol.cr-list { padding-left: 1.3em; margin: 0 0 1.2em; } .cr-list li { margin: 6px 0; }
ul.cr-checks { list-style: none; padding: 0; } .cr-checks li { position: relative; padding-left: 32px; margin: 10px 0; }
.cr-checks li::before { content: ""; position: absolute; left: 0; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--grad);
  -webkit-mask: radial-gradient(circle, #000 60%, transparent 61%); }
.cr-checks li::after { content: ""; position: absolute; left: 6px; top: 10px; width: 8px; height: 5px; border: solid var(--on-primary); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
ol.cr-steps { list-style: none; padding: 0; counter-reset: s; margin: 0 0 1.3em; }
.cr-steps li { counter-increment: s; position: relative; padding: 14px 16px 14px 64px; margin: 10px 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); }
.cr-steps li::before { content: counter(s); position: absolute; left: 14px; top: 12px; width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--grad); color: var(--on-primary); font: 700 16px/1 var(--f-head); }
.cr-tip { border-left: 4px solid var(--primary); background: var(--tint); color: var(--tint-text); padding: 14px 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 0 0 1.3em; }
.cr-tip strong { color: var(--tint-text); }
.cr-table { overflow-x: auto; margin-block: 6px 1.4em; border: 1px solid var(--border); border-radius: var(--r-sm); }
.cr-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.cr-table th { background: var(--grad); color: var(--on-primary); text-align: left; font: 700 15px/1.3 var(--f-head); }
.cr-table th, .cr-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; word-break: normal; overflow-wrap: normal; }
.cr-table tr:nth-child(even) td { background: var(--surface); }
.cr-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-block: 10px 1.4em; }
@media (max-width: 700px) { .cr-pc { grid-template-columns: 1fr; } }
.cr-pc > div { border-radius: var(--r); padding: 18px 20px; background: var(--surface); }
.cr-pros { border-top: 4px solid var(--good); } .cr-cons { border-top: 4px solid var(--bad); }
.cr-pc h3 { margin: 0 0 10px; font-size: 19px; } .cr-pros h3 { color: var(--good); } .cr-cons h3 { color: var(--bad); }
.cr-pc ul { margin: 0; padding-left: 1.2em; } .cr-pc li { margin: 6px 0; }
.cr-faq details { border: 1px solid var(--border); border-radius: var(--r-sm); margin: 10px 0; background: var(--surface); }
.cr-faq summary { cursor: pointer; padding: 15px 48px 15px 18px; font: var(--w-head) 17px/1.4 var(--f-head); color: var(--heading); position: relative; list-style: none; }
.cr-faq summary::-webkit-details-marker { display: none; }
.cr-faq summary::after { content: "+"; position: absolute; right: 18px; top: 12px; font-size: 22px; color: var(--link); }
.cr-faq details[open] summary::after { content: "–"; }
.cr-faq details > div { padding: 0 18px 14px; }
/* cards (games, bonuses, related pages) */
.cr-grid { display: grid; gap: 16px; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); margin-block: 14px 1.6em; }
@media (max-width: 900px) { .cr-grid { grid-template-columns: repeat(var(--cols-t, 2), minmax(0, 1fr)); } }
/* phones (owner's rule): ONE card per row everywhere — icon/category cards become a full-width row (picture left) */
@media (max-width: 640px) {
  .cr-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px; }
  .cr-card:not(:has(.cr-wide-pic)):not(.cr-tcard) { flex-direction: row; align-items: center; text-align: left; }
  .cr-card:not(:has(.cr-wide-pic)):not(.cr-tcard) .cr-pic { flex: 0 0 92px; width: 92px; aspect-ratio: 1 / 1; }
  .cr-card:not(:has(.cr-wide-pic)):not(.cr-tcard) .cr-pic img { width: 80%; height: 80%; }
  .cr-card:not(:has(.cr-wide-pic)):not(.cr-tcard) .cr-ct { padding: 12px 16px; }
  .cr-cats .cr-card { text-align: left; }
}
.cr-more { font-size: 15px; color: var(--muted); margin-top: -6px; }
/* text cards: picture + name + short description in ONE card, centred (categories, popular games) */
.cr-tcard { text-align: center; padding: 26px 18px 22px; align-items: center; border: 1px solid var(--border); }
.cr-tcard .cr-pic { background: none !important; aspect-ratio: auto; width: 100%; height: 112px; }
.cr-tcard .cr-pic img { width: auto !important; height: 112px !important; max-width: 82%; object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.cr-tcard .cr-ct { padding: 14px 4px 0; display: flex; flex-direction: column; align-items: center; flex: 1; }
.cr-tcard h3 { margin: 0 0 8px; font-size: 20px; }
.cr-tcard p { font-size: 15.5px; color: var(--muted); margin: 0 0 8px; line-height: 1.6; }
.cr-tcard:hover { border-color: var(--border-strong); }
.cr-cardlink { margin-top: auto; padding-top: 4px; font-weight: 700; font-size: 15px; text-decoration: none; }
.cr-cats .cr-card { text-align: center; }
.cr-cats .cr-card .cr-pic { aspect-ratio: 10 / 9; background: radial-gradient(circle at 50% 40%, rgba(var(--primary-rgb), .45), transparent 70%), var(--surface-2); }
.cr-cats .cr-card .cr-pic img { width: 82%; height: 82%; }
.cr-cats .cr-card b { font-size: 17px; }
.cr-card { display: flex; flex-direction: column; text-decoration: none; color: var(--text); border-radius: var(--r); overflow: hidden; height: 100%; }
.cr-card .cr-pic { aspect-ratio: 1 / 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, rgba(var(--primary-rgb), .35), transparent 70%), var(--surface-2); }
.cr-card .cr-pic img { width: 74%; height: 74%; object-fit: contain; }
.cr-card .cr-pic.cr-wide-pic { aspect-ratio: 3 / 2; } .cr-card .cr-pic.cr-wide-pic img { width: 100%; height: 100%; object-fit: cover; }
.cr-card .cr-ct { padding: 12px 14px 14px; } .cr-card b { display: block; font: var(--w-head) 16px/1.3 var(--f-head); color: var(--heading); }
.cr-card small { color: var(--muted); font-size: 13px; }
.cr-card p { font-size: 14.5px; margin: 6px 0 0; color: var(--muted); }
.cr-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-block: 10px 1.4em; }
.cr-pay div { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; }
.cr-pay img { width: 54px; height: 54px; object-fit: contain; } .cr-pay b { display: block; font: var(--w-head) 18px/1.2 var(--f-head); color: var(--heading); }
.cr-pay span { font-size: 14px; color: var(--muted); }
@media (max-width: 640px) { .cr-pay { grid-template-columns: minmax(0, 1fr); } }
.cr-screens { display: flex; gap: 18px; overflow-x: auto; padding: 6px 2px 16px; scroll-snap-type: x mandatory; margin-block: 10px 1.4em; }
.cr-screens figure { margin: 0; flex: 0 0 200px; scroll-snap-align: start; text-align: center; }
.cr-appbox { display: flex; gap: 20px; align-items: center; padding: 22px; border-radius: var(--r); background: var(--grad); color: var(--on-primary); margin-block: 10px 1.6em; }
.cr-appbox img { width: 84px; height: 84px; border-radius: 20px; background: var(--bg); object-fit: contain; flex: none; }
.cr-appbox b { font: var(--w-head) 21px/1.25 var(--f-head); display: block; color: var(--on-primary); }
.cr-appbox p { margin: 4px 0 12px; color: var(--on-primary); opacity: .92; }
.cr-appbox .cr-btn { background: var(--bg); color: var(--heading); }
@media (max-width: 560px) { .cr-appbox { flex-direction: column; text-align: center; } }
.cr-cta { margin: 40px auto 10px; padding: 34px 26px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); text-align: center; }
.cr-cta h2 { margin-top: 0; } .cr-cta .cr-btns { justify-content: center; }
.cr-byline { display: flex; gap: 16px; align-items: center; margin: 34px auto 0; padding: 18px 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); font-size: 15px; }
.cr-byline p { margin: 0; }
.cr-by-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.cr-by-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--primary); }
.cr-by-name { color: var(--muted); } .cr-by-name b { color: var(--heading); }
.cr-by-date { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.cr-by-date svg { width: 15px; height: 15px; flex: none; color: var(--primary); }
.cr-seal { position: relative; flex: none; width: 58px; height: 58px; border-radius: 18px; padding: 3px; background: var(--grad); box-shadow: 0 8px 22px -10px rgba(var(--primary-rgb), .8); }
.cr-seal img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 15px; background: var(--surface-2); }
.cr-seal-tick { position: absolute; right: -6px; bottom: -6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--good); color: #fff; border: 3px solid var(--surface); }
.cr-seal-tick svg { width: 13px; height: 13px; }
.cr-seal-plain { display: grid; place-items: center; color: var(--on-primary); } .cr-seal-plain svg { width: 34px; height: 34px; }
.cr-by-link { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--heading); font-weight: 700; font-size: 14px; text-decoration: none; }
.cr-by-link:hover { border-color: var(--primary); color: var(--primary); }
.cr-by-line { background: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 22px 0 0; }
.cr-by-split { border-left: 4px solid var(--primary); }
@media (max-width: 640px) { .cr-byline { flex-wrap: wrap; } .cr-by-text { flex-basis: calc(100% - 80px); } .cr-by-link { margin-left: 74px; } }
/* contact form */
.cr-form { display: grid; gap: 14px; margin-block: 16px 26px; }
.cr-form label { display: grid; gap: 6px; font-weight: 600; color: var(--heading); font-size: 15px; }
.cr-form input, .cr-form textarea { width: 100%; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 16px/1.5 var(--f-body); }
.cr-form textarea { min-height: 150px; }
.cr-hp { position: absolute !important; left: -9999px !important; }
/* footer */
.cr-footer { background: var(--footer-bg); color: var(--footer-text); padding: 50px 0 26px; margin-top: 30px; font-size: 15px; }
.cr-footer a { color: var(--footer-link); text-decoration: none; } .cr-footer a:hover { text-decoration: underline; }
.cr-footer h2 { font-size: 17px; margin: 0 0 12px; color: var(--footer-text); letter-spacing: .02em; }
.cr-footer ul { list-style: none; margin: 0; padding: 0; } .cr-footer li { margin: 7px 0; }
.cr-fgrid { display: grid; gap: 30px; grid-template-columns: 1.4fr repeat(3, 1fr); }
@media (max-width: 1000px) { .cr-fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .cr-fgrid { grid-template-columns: 1fr !important; gap: 26px; } }
.cr-fbrand img { height: 50px; width: auto; margin-bottom: 12px; }
.cr-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 34px 0 14px; padding-top: 22px; border-top: 1px solid var(--border); }
.cr-copy { text-align: center; font-size: 14px; opacity: .9; } .cr-copy p { margin: 4px 0; }
.cr-age { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--footer-text); font: 700 12px/1 var(--f-head); margin-right: 8px; vertical-align: middle; }


.cr-hero { position: relative; padding: 54px 0 46px; overflow: hidden; }
.cr-hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.cr-hero-visual { justify-self: center; } .cr-hero-visual img { width: 300px; max-width: 70vw; }
@media (max-width: 860px) { .cr-hero-in { grid-template-columns: 1fr; text-align: center; } .cr-hero .cr-btns { justify-content: center; } .cr-hero-logo { margin-inline: auto; } .cr-hero-visual { display: none; } }
.cr-hero { position: relative; overflow: hidden; }
.cr-hero-bg { position: absolute; inset: 0; z-index: 0; } .cr-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .18; filter: blur(14px) saturate(1.2); transform: scale(1.1); }
.cr-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--bg)); }
.cr-hero-in { position: relative; z-index: 1; }
.cr-hero-logo { width: 190px; height: auto; aspect-ratio: 1 / 1; border-radius: 28px; object-fit: cover; margin-bottom: 20px; box-shadow: var(--shadow); }
@media (max-width: 760px) { .cr-hero-logo { width: 150px; } }
.cr-hero h1 { font-family: var(--f-disp); font-weight: var(--w-disp); text-transform: uppercase; letter-spacing: var(--track);
  font-size: clamp(38px, 6vw, 64px); line-height: 1.05; margin: 0 0 16px; color: var(--heading); text-shadow: 0 3px 0 rgba(var(--primary-rgb), .55), 0 12px 30px rgba(0,0,0,.35); }
.cr-hero p { font-size: 18.5px; max-width: 640px; margin: 0 0 24px; }
.cr-hero .cr-btns .cr-btn { min-width: 180px; }

.cr-hero-facts { margin: 22px 0 0; max-width: 560px; } .cr-hero-code { margin: 14px 0 0; }
@media (max-width: 860px) { .cr-hero-facts { margin-inline: auto; } }
@media (min-width: 1100px) { .cr-home.cr-sk-toc-side { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
  .cr-toc-rail { position: sticky; top: 96px; } .cr-toc-rail nav { max-height: calc(100vh - 150px); overflow: auto; }
  .cr-toc-phone { display: none; } }
@media (max-width: 1099px) { .cr-toc-rail { display: none; } }
.cr-story { display: grid; gap: 26px; align-items: start; margin-bottom: 10px; width: 100%; }
@media (min-width: 900px) { .cr-story { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.cr-toc-chips summary { list-style: none; } .cr-toc-chips nav ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 10px 0 0; }
.cr-toc-chips nav ol ol { display: none; } .cr-toc-chips nav li a { display: inline-block; padding: 7px 14px; border: 1px solid var(--border);
  border-radius: 999px; text-decoration: none; font-size: 14px; }
@media (min-width: 900px) { .cr-faq-2col { columns: 2; column-gap: 28px; } .cr-faq-2col > h2 { column-span: all; }
  .cr-faq-2col details { break-inside: avoid; } }
.cr-head-split { display: grid; gap: 26px; align-items: center; margin-bottom: 18px; }
@media (min-width: 900px) { .cr-head-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .cr-head-split .cr-cover { margin: 0; } }
.cr-inshort { border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--r); padding: 18px 20px;
  background: var(--surface); margin-bottom: 26px; } .cr-inshort > :last-child { margin-bottom: 0; }
.cr-inshort-k { font: 700 12px/1.2 var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); margin: 0 0 8px; }

.cr-card { border: 1.5px solid var(--border); } .cr-card:hover { border-color: var(--border-strong); }
.cr-main h2 { padding-bottom: 12px; border-bottom: 2px solid var(--border); } .cr-main h2::after { content: ''; display: block; width: 70px; height: 3px; background: var(--grad); margin-top: 10px; margin-bottom: -14px; }
.cr-steps li { background: none; border: 0; border-left: 2px solid var(--border); border-radius: 0; margin-left: 17px; padding-left: 40px; } .cr-steps li::before { left: -18px; border-radius: 50%; }

/* ---- this site's own design ---- */
/* Maan Win premium app-lobby theme: crisp navy panels, orange action glow */
html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

.cr-skip {
  position: absolute;
  left: 16px;
  top: 10px;
  z-index: 30;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--grad);
  color: var(--on-primary);
  font-family: var(--f-head);
  font-weight: 900;
  text-decoration: none;
  transform: translateY(-140%);
  box-shadow: 0 14px 24px -16px rgba(0,0,0,.8);
}

.cr-skip:focus {
  transform: translateY(0);
}

/* Header */
.cr-header {
  background: color-mix(in srgb, var(--header-bg) 96%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  box-shadow: 0 18px 34px -28px rgba(0,0,0,.9);
  backdrop-filter: blur(14px);
}

.cr-header-in {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 30px);
  min-width: 0;
}

.cr-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
  text-decoration: none;
}

.cr-logo img {
  display: block;
  width: auto;
  height: clamp(46px, 4vw, 58px);
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.55));
}

.cr-burger {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2) 88%, var(--primary) 12%);
  color: var(--header-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.cr-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--header-text);
  font-family: var(--f-head);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.cr-nav a::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 8px;
  height: 3px;
  border-radius: 999px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

.cr-nav a:hover,
.cr-nav a:focus-visible {
  background: rgba(var(--primary-rgb), .12);
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
  color: var(--text);
  transform: translateY(-1px);
}

.cr-nav a:hover::before,
.cr-nav a:focus-visible::before {
  transform: scaleX(1);
}

.cr-head-btns {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

@media (min-width: 1081px) {
  .cr-header-in {
    flex-wrap: nowrap;
  }

  .cr-nav {
    margin-left: auto;
    min-width: 0;
  }

  .cr-nav ul {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

/* Buttons */
.cr-btn,
.cr-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 13px 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 88%, var(--primary) 12%);
  color: var(--text);
  font-family: var(--f-head);
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 26px -20px rgba(0,0,0,.85);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.cr-btn:hover,
.cr-btn:focus-visible {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 22px 34px -22px rgba(0,0,0,.9), 0 0 0 4px rgba(var(--primary-rgb), .10);
}

.cr-btn-main,
.cr-btn-main:visited {
  border-color: color-mix(in srgb, var(--primary) 82%, var(--on-primary) 18%);
  background: var(--grad);
  color: var(--on-primary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 18px 36px -18px rgba(var(--primary-rgb), .95), 0 0 0 1px rgba(var(--primary-rgb), .24);
}

.cr-btn-main:hover,
.cr-btn-main:focus-visible {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 68%, #fff 32%), var(--primary));
  color: var(--on-primary);
}

.cr-btn-alt,
.cr-btn-alt:visited {
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  color: var(--text);
  border-color: color-mix(in srgb, var(--border) 72%, var(--text) 28%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 20px -18px rgba(0,0,0,.8);
}

.cr-btn-alt:hover,
.cr-btn-alt:focus-visible {
  background: color-mix(in srgb, var(--surface-2) 82%, var(--primary) 18%);
  color: var(--text);
}

.cr-head-btns .cr-btn {
  min-height: 44px;
  padding: 11px 18px;
}

.cr-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* Hero */
.cr-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(500px, 54vw, 660px);
  background:
    radial-gradient(circle at 16% 18%, rgba(var(--primary-rgb), .26), transparent 31%),
    radial-gradient(circle at 86% 28%, color-mix(in srgb, var(--surface-2) 70%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--primary) 8%), var(--bg));
  border-bottom: 1px solid var(--border);
}

.cr-hero::before {
  content: "";
  position: absolute;
  inset: 20px clamp(14px, 3vw, 44px);
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(var(--primary-rgb), .14), transparent 36%),
    color-mix(in srgb, var(--surface) 58%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 30px 70px -52px rgba(0,0,0,.95);
}

.cr-hero::after {
  content: "";
  position: absolute;
  right: clamp(-120px, -8vw, -60px);
  top: 72px;
  z-index: -1;
  width: min(420px, 64vw);
  height: min(420px, 64vw);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--primary-rgb), .30), transparent 66%);
  filter: blur(3px);
}

.cr-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.cr-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .075;
  filter: saturate(1.18) contrast(1.12);
}

.cr-hero-in {
  min-height: clamp(470px, 50vw, 620px);
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(260px, .78fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  padding: clamp(38px, 5vw, 60px) 0;
}

.cr-hero-logo {
  display: block;
  width: min(154px, 38vw);
  max-width: 190px;
  border: 1px solid color-mix(in srgb, var(--border) 74%, var(--text) 26%);
  border-radius: 32px;
  background: var(--surface-2);
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.95), 0 0 0 7px rgba(var(--primary-rgb), .10);
}

.cr-hero h1 {
  max-width: 780px;
  margin: 18px 0 14px;
  color: var(--heading);
  font-family: var(--f-disp);
  font-size: clamp(36px, 6vw, 72px);
  line-height: .94;
  letter-spacing: .005em;
  text-shadow: 0 12px 26px rgba(0,0,0,.55);
}

.cr-hero p {
  max-width: 620px;
  margin: 0 0 26px;
  padding-left: 18px;
  border-left: 4px solid var(--primary);
  color: var(--text);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.56;
}

.cr-hero .cr-btn {
  min-width: min(216px, 100%);
}

.cr-hero .cr-btn-alt {
  min-width: min(184px, 100%);
}

.cr-hero-visual {
  position: relative;
  justify-self: center;
  max-width: min(390px, 100%);
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--text) 18%);
  border-radius: 34px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, var(--primary) 8%), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 56px -32px rgba(0,0,0,.95), 0 0 0 7px rgba(var(--primary-rgb), .07);
}

.cr-hero-visual::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 44px;
  background:
    radial-gradient(circle at 50% 8%, rgba(var(--primary-rgb), .34), transparent 55%),
    radial-gradient(circle at 18% 92%, color-mix(in srgb, var(--surface-2) 78%, transparent), transparent 45%);
}

.cr-hero-visual img {
  display: block;
  width: auto;
  max-height: 520px;
  margin-inline: auto;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 24px;
  box-shadow: 0 18px 32px -22px rgba(0,0,0,.95);
}

/* Main text and article structure */
.cr-layout,
.cr-main,
.cr-side,
.cr-box {
  min-width: 0;
}

.cr-main {
  color: var(--text);
}

.cr-main a {
  color: var(--link);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.cr-main a:hover,
.cr-main a:focus-visible {
  color: var(--text);
}

.cr-main p,
.cr-main li,
.cr-main td,
.cr-main dd {
  color: var(--text);
  line-height: 1.76;
}

.cr-main h1,
.cr-main h2,
.cr-main h3 {
  color: var(--heading);
  font-family: var(--f-head);
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.cr-main h1 {
  margin: 20px 0 12px;
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 1.03;
}

.cr-main h2 {
  position: relative;
  margin: clamp(42px, 6vw, 70px) 0 18px;
  padding: 0 0 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  font-size: clamp(27px, 3.4vw, 42px);
  line-height: 1.1;
}

.cr-main h2::before {
  content: "";
  display: block;
  width: 54px;
  height: 8px;
  margin: 0 0 12px;
  border-radius: 999px;
  background: var(--grad);
  box-shadow: 0 0 22px rgba(var(--primary-rgb), .34);
}

.cr-main h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: min(220px, 45%);
  height: 1px;
  background: var(--primary);
}

.cr-main h3 {
  margin: 30px 0 10px;
  font-size: clamp(21px, 2.3vw, 29px);
  line-height: 1.17;
}

.cr-lead {
  margin-top: 18px;
  padding: 20px 22px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--text) 18%);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface-2) 72%, var(--surface) 28%);
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.72;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.cr-sec {
  margin: clamp(30px, 5vw, 56px) 0;
}

.cr-sec-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: clamp(20px, 4vw, 34px);
  align-items: start;
  min-width: 0;
}

/* Quick facts */
.cr-hl {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 28px;
  padding: 0;
}

.cr-hl div {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 108px;
  padding: 17px 18px 16px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--text) 14%);
  border-radius: 22px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 90%, var(--primary) 10%), color-mix(in srgb, var(--surface) 92%, var(--primary) 8%));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 16px 30px -26px rgba(0,0,0,.9);
}

.cr-hl div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--grad);
}

.cr-hl div::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -50px;
  width: 116px;
  height: 116px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--primary-rgb), .18), transparent 68%);
}

.cr-hl dt {
  margin: 0 0 9px;
  color: var(--muted);
  font-family: var(--f-head);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.cr-hl dd {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--heading);
  font-family: var(--f-head);
  font-size: clamp(22px, 2.7vw, 32px);
  font-weight: 950;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

/* TOC */
.cr-toc {
  position: relative;
  overflow: hidden;
  margin: 28px 0;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--text) 12%);
  border-radius: 24px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--surface-2) 88%, var(--primary) 12%), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 34px -30px rgba(0,0,0,.9);
}

.cr-toc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--grad);
}

.cr-toc summary {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px 18px 24px;
  color: var(--heading);
  font-family: var(--f-head);
  font-weight: 950;
  list-style: none;
}

.cr-toc summary::-webkit-details-marker {
  display: none;
}

.cr-toc summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(var(--primary-rgb), .14);
  color: var(--primary);
  font-size: 22px;
  line-height: 1;
}

.cr-toc[open] summary::after {
  content: "−";
}

.cr-toc nav {
  padding: 0 24px 22px;
}

.cr-toc ol {
  margin: 0;
  padding-left: 22px;
}

.cr-toc li {
  margin: 8px 0;
  color: var(--muted);
}

.cr-toc a {
  color: var(--text);
  text-decoration: none;
}

.cr-toc a:hover,
.cr-toc a:focus-visible {
  color: var(--link);
}

/* Cards and category blocks */
.cr-card,
.cr-tcard {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 84%, var(--text) 16%);
  border-radius: 24px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 86%, var(--primary) 14%), var(--surface));
  color: var(--text);
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 32px -28px rgba(0,0,0,.95);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cr-card::before,
.cr-tcard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0, rgba(var(--primary-rgb), .16), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 28%);
}

.cr-card:hover,
.cr-card:focus-within,
.cr-tcard:hover,
.cr-tcard:focus-within {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 24px 40px -29px rgba(0,0,0,.98), 0 0 0 4px rgba(var(--primary-rgb), .08);
}

.cr-pic {
  position: relative;
  width: 100%;
  padding: 12px 12px 0;
}

.cr-pic img {
  display: block;
  margin: 0 auto;
  border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
  border-radius: 18px;
  box-shadow: 0 18px 30px -24px rgba(0,0,0,.9);
}

.cr-wide-pic img {
  width: 100%;
}

.cr-ct {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 18px 20px;
}

.cr-ct h3,
.cr-ct b {
  margin: 0;
  color: var(--heading);
  font-family: var(--f-head);
  font-size: clamp(20px, 2.1vw, 25px);
  font-weight: 950;
  line-height: 1.13;
}

.cr-ct p {
  margin: 10px 0 0;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.65;
}

.cr-cardlink {
  margin-top: auto;
  padding-top: 14px;
  color: var(--link);
  font-family: var(--f-head);
  font-weight: 950;
  text-decoration: none;
}

.cr-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 26px;
}

.cr-cats a,
.cr-cats span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 84%, var(--primary) 16%);
  color: var(--text);
  font-family: var(--f-head);
  font-weight: 850;
  text-decoration: none;
}

/* Steps and checks */
ol.cr-steps {
  counter-reset: step;
  display: grid;
  gap: 12px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

ol.cr-steps li {
  counter-increment: step;
  position: relative;
  min-height: 64px;
  padding: 16px 18px 16px 70px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 86%, var(--primary) 14%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

ol.cr-steps li::before {
  content: counter(step);
  position: absolute;
  left: 16px;
  top: 50%;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--grad);
  color: var(--on-primary);
  font-family: var(--f-head);
  font-weight: 950;
  transform: translateY(-50%);
  box-shadow: 0 12px 20px -14px rgba(var(--primary-rgb), .9);
}

ul.cr-checks {
  display: grid;
  gap: 12px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}

ul.cr-checks li {
  position: relative;
  padding: 14px 16px 14px 50px;
  border: 1px solid color-mix(in srgb, var(--border) 74%, var(--good) 26%);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 88%, var(--good) 12%);
}

ul.cr-checks li::before {
  content: "✓";
  position: absolute;
  left: 16px;
  top: 14px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--good);
  color: #000;
  font-family: var(--f-head);
  font-weight: 950;
  line-height: 1;
}

/* Tip boxes */
.cr-tip {
  position: relative;
  margin: 26px 0;
  padding: 18px 20px 18px 58px;
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: linear-gradient(90deg, rgba(var(--primary-rgb), .22), var(--tint));
  color: var(--tint-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 32px -28px rgba(0,0,0,.95);
}

.cr-tip::before {
  content: "!";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--grad);
  color: var(--on-primary);
  font-family: var(--f-head);
  font-weight: 950;
}

.cr-tip strong {
  color: var(--heading);
  font-family: var(--f-head);
}

/* Tables */
.cr-table {
  overflow: auto;
  max-width: 100%;
  min-width: 0;
  margin: 24px 0;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 18px 32px -28px rgba(0,0,0,.95);
}

.cr-table table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
}

.cr-table th,
.cr-table td {
  padding: 16px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  text-align: left;
  vertical-align: top;
}

.cr-table th {
  background: color-mix(in srgb, var(--surface-2) 82%, var(--primary) 18%);
  color: var(--heading);
  font-family: var(--f-head);
  font-weight: 950;
}

.cr-table tr:last-child td {
  border-bottom: 0;
}

.cr-table td:first-child {
  color: var(--heading);
  font-weight: 850;
}

/* Pros / cons */
.cr-pc {
  gap: 16px;
}

.cr-pros,
.cr-cons {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.cr-pros {
  border-color: color-mix(in srgb, var(--border) 68%, var(--good) 32%);
  background: color-mix(in srgb, var(--surface) 88%, var(--good) 12%);
}

.cr-cons {
  border-color: color-mix(in srgb, var(--border) 68%, var(--bad) 32%);
  background: color-mix(in srgb, var(--surface) 88%, var(--bad) 12%);
}

.cr-pros h3,
.cr-cons h3 {
  margin-top: 0;
}

/* FAQ */
.cr-faq details {
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 88%, var(--primary) 12%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.cr-faq summary {
  cursor: pointer;
  padding: 18px 20px;
  color: var(--heading);
  font-family: var(--f-head);
  font-weight: 950;
}

.cr-faq details[open] {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .08);
}

.cr-faq details > *:not(summary) {
  padding-left: 20px;
  padding-right: 20px;
}

.cr-faq details > :last-child {
  padding-bottom: 20px;
}

/* Images, app boxes, payments */
.cr-shot {
  margin: 24px 0;
}

.cr-shot img,
.cr-cover img {
  display: block;
  margin-inline: auto;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--text) 22%);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 26px 52px -34px rgba(0,0,0,.95), 0 0 0 8px rgba(var(--primary-rgb), .06);
}

.cr-cover {
  margin: 22px 0 26px;
}

.cr-cover img {
  width: 100%;
}

.cr-appbox {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 28px 0;
  padding: 18px;
  border: 1px solid var(--border-strong);
  border-radius: 28px;
  background:
    radial-gradient(circle at 9% 18%, rgba(var(--primary-rgb), .24), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 78%, var(--primary) 22%), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 44px -32px rgba(0,0,0,.95);
}

.cr-appbox img {
  flex: 0 0 auto;
  width: 86px;
  height: 86px;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 14px 24px -18px rgba(0,0,0,.9);
}

.cr-appbox b {
  display: block;
  color: var(--heading);
  font-family: var(--f-head);
  font-size: 24px;
  font-weight: 950;
}

.cr-appbox p {
  margin: 6px 0 14px;
}

.cr-pay {
  gap: 16px;
}

.cr-pay > * {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 84%, var(--primary) 16%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  overflow-wrap: anywhere;
}

/* CTA */
.cr-cta {
  position: relative;
  overflow: hidden;
  margin: clamp(34px, 6vw, 70px) 0;
  padding: clamp(24px, 5vw, 44px);
  border: 1px solid var(--border-strong);
  border-radius: 32px;
  background:
    radial-gradient(circle at 15% 12%, rgba(var(--primary-rgb), .30), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 78%, var(--primary) 22%), var(--surface));
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 28px 54px -36px rgba(0,0,0,.95);
}

.cr-cta::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -90px;
  width: 250px;
  height: 250px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(var(--primary-rgb), .28), transparent 68%);
}

.cr-cta h2,
.cr-cta h3 {
  margin-top: 0;
}

.cr-cta .cr-btns {
  justify-content: center;
}

/* Crumbs, byline, meta */
.cr-crumbs {
  margin: 18px 0 4px;
  color: var(--muted);
  font-family: var(--f-head);
  font-weight: 850;
}

.cr-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr-crumbs li:not(:last-child)::after {
  content: "›";
  margin-left: 8px;
  color: var(--primary);
}

.cr-crumbs a {
  color: var(--link);
  text-decoration: none;
}

.cr-meta,
.cr-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 22px;
  color: var(--muted);
  font-family: var(--f-head);
  font-size: 14px;
  font-weight: 850;
}

.cr-meta span,
.cr-byline span,
.cr-byline a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  max-width: 100%;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Sidebar and boxed panels */
.cr-box,
.cr-side {
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--text) 18%);
  border-radius: 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 88%, var(--primary) 12%), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 36px -30px rgba(0,0,0,.95);
  overflow-wrap: anywhere;
}

.cr-box {
  padding: 20px;
  margin: 22px 0;
}

.cr-side {
  position: sticky;
  top: 96px;
  padding: 18px;
}

.cr-side::before,
.cr-box::before {
  content: "";
  display: block;
  width: 46px;
  height: 6px;
  margin: 0 0 14px;
  border-radius: 999px;
  background: var(--grad);
}

.cr-side h2,
.cr-side h3,
.cr-box h2,
.cr-box h3 {
  margin-top: 0;
}

/* Invite code and forms */
.cr-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 100%;
  margin: 24px 0;
  padding: 16px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: linear-gradient(90deg, rgba(var(--primary-rgb), .22), var(--surface));
  color: var(--heading);
  font-family: var(--f-head);
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 950;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
  box-shadow: 0 0 0 5px rgba(var(--primary-rgb), .08);
}

.cr-form {
  display: grid;
  gap: 14px;
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--surface);
}

.cr-form label {
  color: var(--heading);
  font-family: var(--f-head);
  font-weight: 950;
}

.cr-form input,
.cr-form select,
.cr-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}

.cr-form input:focus,
.cr-form select:focus,
.cr-form textarea:focus {
  outline: 0;
  border-color: var(--border-strong);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .12);
}

/* Footer */
.cr-footer {
  margin-top: clamp(44px, 7vw, 80px);
  padding: clamp(34px, 6vw, 64px) 0 28px;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(circle at 15% 0, rgba(var(--primary-rgb), .18), transparent 34%),
    var(--footer-bg);
  color: var(--footer-text);
}

.cr-fgrid {
  gap: 24px;
}

.cr-fbrand {
  color: var(--footer-text);
}

.cr-fbrand img {
  width: auto;
  height: 54px;
  margin-bottom: 14px;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.45));
}

.cr-footer h2,
.cr-footer h3,
.cr-footer b {
  color: var(--heading);
  font-family: var(--f-head);
}

.cr-footer a {
  color: var(--footer-link);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.cr-legal,
.cr-copy,
.cr-age {
  margin-top: 20px;
  color: var(--footer-text);
  font-size: 14px;
  line-height: 1.7;
}

.cr-age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 52px;
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(var(--primary-rgb), .16);
  color: var(--heading);
  font-family: var(--f-head);
  font-weight: 950;
}

/* Phone tab bar */
.cr-tabbar {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--header-bg) 94%, transparent);
  box-shadow: 0 -18px 34px -28px rgba(0,0,0,.95);
  backdrop-filter: blur(14px);
}

.cr-tabbar a {
  color: var(--muted);
  font-family: var(--f-head);
  font-weight: 950;
  text-decoration: none;
}

.cr-tabbar a:hover,
.cr-tabbar a:focus-visible,
.cr-tabbar .cr-btn-main,
.cr-tabbar a[aria-current="page"] {
  color: var(--primary);
}

@media (max-width: 1080px) {
  .cr-header-in {
    min-height: 70px;
  }

  .cr-head-btns {
    display: none;
  }

  .cr-logo img {
    height: 48px;
  }
}

@media (max-width: 760px) {
  .cr-hero {
    min-height: auto;
  }

  .cr-hero::before {
    inset: 12px;
    border-radius: 26px;
  }

  .cr-hero-in {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 42px 0 48px;
    text-align: center;
  }

  .cr-hero-logo {
    margin-inline: auto;
  }

  .cr-hero p {
    margin-inline: auto;
    padding-left: 0;
    border-left: 0;
  }

  .cr-hero .cr-btns {
    justify-content: center;
    gap: 12px;
  }

  .cr-hero .cr-btn {
    flex: 1 1 180px;
    max-width: 260px;
  }

  .cr-hero-visual {
    max-width: 360px;
  }

  .cr-sec-grid {
    grid-template-columns: 1fr;
  }

  .cr-appbox {
    flex-direction: column;
    align-items: flex-start;
  }

  .cr-side {
    position: static;
  }
}

@media (max-width: 640px) {
  .cr-main h1 {
    font-size: clamp(32px, 10vw, 44px);
  }

  .cr-main h2 {
    font-size: clamp(26px, 8vw, 36px);
  }

  .cr-btns {
    width: 100%;
    justify-content: center;
  }

  .cr-btn {
    width: 100%;
  }

  .cr-head-btns {
    display: none;
  }

  .cr-hl {
    grid-template-columns: 1fr;
  }

  .cr-hl div {
    min-height: 104px;
  }

  ol.cr-steps li {
    padding-left: 62px;
  }

  .cr-tip {
    padding-left: 52px;
  }

  .cr-meta,
  .cr-byline {
    gap: 8px;
  }

  .cr-code {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 1080px) { .cr-head-btns { display: none !important; } .cr-burger { display: block !important; } }
@media (min-width: 1081px) { .cr-burger { display: none !important; } }
@media (max-width: 760px) { .cr-tabbar { display: grid !important; } }
@media (min-width: 761px) { .cr-tabbar { display: none !important; } }
.cr-btn-main, .cr-btn-main:hover { color: var(--on-primary) !important; -webkit-text-fill-color: var(--on-primary) !important; opacity: 1 !important; }
.cr-btn { opacity: 1 !important; }
html, body { background: var(--bg) !important; }       /* a page-wide glow on a long page turns muddy (brown) */
.cr-shot img { width: 280px !important; max-width: 78vw !important; height: auto !important; object-fit: contain !important; }
.cr-shot { background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
.cr-cover img { height: auto !important; object-fit: contain !important; }
.cr-hero-logo { height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; }   /* ALWAYS square */
.cr-hero-in { min-height: 0 !important; padding-top: clamp(28px, 4vw, 52px) !important; padding-bottom: clamp(28px, 4vw, 52px) !important; }
.cr-hero-visual img { max-height: 460px !important; width: auto !important; }      /* the hero fits a laptop screen */
.cr-main > * { margin-left: auto !important; margin-right: auto !important; }   /* every block centred in its column */
.cr-wrap.cr-home-w { width: min(100% - 32px, 1100px) !important; }
.cr-home .cr-main > * { max-width: 100% !important; }
.cr-main .cr-banner { max-width: 760px !important; margin: 4px auto 26px !important; }
.cr-banner img { width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; object-fit: cover !important; }
.cr-stepshot img { width: 240px !important; }
.cr-byline span:not(.cr-seal):not(.cr-seal-tick), .cr-byline p { min-height: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.cr-seal { width: 58px !important; height: 58px !important; flex: none !important; padding: 3px !important; }
.cr-seal img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.cr-code { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; justify-items: stretch !important;
  gap: 6px !important; flex-direction: column !important; }      /* the sidebar is ~220-300px wide: one item per row */
.cr-code-label { font-size: 12px !important; line-height: 1.3 !important; white-space: nowrap !important; }
.cr-code b { font-size: clamp(19px, 1.7vw, 23px) !important; line-height: 1.2 !important; white-space: nowrap !important;
  overflow-wrap: normal !important; word-break: keep-all !important; letter-spacing: .03em !important; }
.cr-code button { white-space: nowrap !important; writing-mode: horizontal-tb !important; width: 100% !important;
  padding: 10px 14px !important; font-size: 14px !important; line-height: 1 !important; margin-top: 4px !important; }
.cr-steps-shots li::before { top: 14px !important; bottom: auto !important; transform: none !important; }
.cr-tcard .cr-pic img { width: auto !important; height: 112px !important; max-width: 82% !important; object-fit: contain !important; }
.cr-card .cr-pic img { object-fit: contain !important; }
.cr-card .cr-pic.cr-wide-pic img { object-fit: cover !important; }
@media (max-width: 860px) { .cr-hero-in { text-align: center !important; } .cr-hero .cr-btns { justify-content: center !important; }
  .cr-hero-logo { margin-inline: auto !important; } }

/* ---- locked structure ---- */

.cr-hl:not(.cr-hero-facts) { width: 100% !important; max-width: 100% !important; justify-self: stretch !important;
  box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; }
.cr-hl > div { min-width: 0 !important; }
@media (max-width: 760px) { .cr-hl { grid-template-columns: minmax(0, 1fr) !important; } }