/* Line Party marketing site — standalone static CSS, no libraries or hosted fonts */
:root {
  --navy: #061e2e;
  --navy-2: #09283a;
  --navy-3: #103549;
  --surface: #123347;
  --white: #f7fbfc;
  --muted: #b3c4cd;
  --mint: #01dca7;
  --mint-deep: #09a781;
  --cyan: #49e8da;
  --coral: #ff6a54;
  --yellow: #ffdb49;
  --line: rgba(220, 246, 253, .16);
  --radius: 24px;
  --shadow: 0 24px 66px rgba(0, 8, 17, .34);
}
*, *::before, *::after {box-sizing: border-box}
html {scroll-behavior: smooth;scroll-padding-top: 90px}
body {margin:0;color:var(--white);background:var(--navy);font-family:ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,a {font:inherit}
a {color:inherit;text-decoration:none}
button {cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible {outline:3px solid var(--yellow);outline-offset:4px}
img {display:block;max-width:100%;height:auto}
h1,h2,h3,p {margin-top:0}
h1,h2,h3 {line-height:1.1;letter-spacing:-.04em}
p {color:var(--muted)}
.container {width:min(1180px,calc(100% - 64px));margin-inline:auto}
.section-pad {padding:110px 0}
.skip-link {position:fixed;top:-100px;left:16px;background:var(--mint);color:var(--navy);padding:12px 18px;z-index:9999;border-radius:12px}
.skip-link:focus {top:12px}
.eyebrow {font-size:12px;font-weight:900;letter-spacing:.14em;color:var(--yellow);margin:0 0 19px}
.eyebrow-mint {color:var(--mint)}
.text-mint {color:var(--mint)}

/* Navigation */
.site-header {position:sticky;top:0;z-index:40;background:rgba(6,30,46,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}
.nav-wrap {display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px}
.brand {display:inline-flex;align-items:center;gap:12px;color:var(--white);white-space:nowrap;font-size:22px;font-weight:850;letter-spacing:-.06em}
.brand strong {color:var(--mint);font-weight:900}
.brand-icon {border-radius:12px}
.nav-links {display:flex;align-items:center;gap:34px}
.nav-links a {font-size:14px;font-weight:700;color:#ced9e1;transition:color .2s}
.nav-links a:hover,.footer-links a:hover {color:var(--mint)}
.nav-cta {display:inline-flex;align-items:center;gap:10px;padding:11px 17px;border:1px solid rgba(0,224,166,.32);border-radius:50px;font-weight:800;color:var(--mint);font-size:13px;background:rgba(0,225,167,.07)}
.nav-cta:hover {background:rgba(0,225,167,.16)}
.availability-dot {width:8px;height:8px;background:var(--mint);border-radius:50%;box-shadow:0 0 0 5px rgba(0,218,168,.13);display:inline-block;flex-shrink:0}

/* Hero */
.hero {position:relative;isolation:isolate;min-height:690px;background:radial-gradient(ellipse 65% 50% at 80% 35%,rgba(6,119,116,.23),transparent 80%),linear-gradient(135deg,#061e2e 25%,#082b3e 75%,#042b36);overflow:hidden}
.hero::before {content:"";position:absolute;z-index:-1;width:610px;height:610px;right:-310px;top:-360px;border:95px solid rgba(0,216,190,.055);border-radius:50%}
.hero::after {content:"";position:absolute;z-index:-1;width:330px;height:330px;left:-240px;bottom:-200px;border:70px solid rgba(255,110,85,.08);border-radius:50%}
.hero-orb {position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.orb-one {width:16px;height:16px;background:var(--yellow);top:130px;left:55%}
.orb-two {width:11px;height:11px;background:var(--coral);bottom:110px;right:8%}
.hero-layout {display:grid;grid-template-columns:1.03fr .97fr;gap:35px;align-items:center;min-height:690px;padding-top:62px;padding-bottom:72px}
.hero-copy {position:relative;z-index:2;padding-bottom:10px}
.launch-eyebrow {display:flex;align-items:center;gap:11px;color:#d1e6e7;letter-spacing:.13em;font-size:11px;margin-bottom:28px;flex-wrap:wrap}
.eyebrow-star {color:var(--yellow);font-size:23px;line-height:0}
.eyebrow-divider {width:6px;height:6px;border-radius:50%;background:#577181}
.hero h1 {font-size:clamp(60px,6.2vw,91px);font-weight:950;line-height:1.02;letter-spacing:-.075em;margin:0 0 27px}
.gradient-word {background:linear-gradient(110deg,#58f3d2 2%,#00e5a9 60%,#03bcae);background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-lede {font-size:19px;line-height:1.7;max-width:520px;margin-bottom:29px;color:#c4d2da}
.hero-actions {display:flex;gap:12px;flex-wrap:wrap}
.btn {display:inline-flex;align-items:center;justify-content:center;gap:14px;font-weight:850;border-radius:16px;padding:15px 22px;white-space:nowrap;transition:transform .2s,box-shadow .2s,background .2s;border:1px solid transparent;font-size:15px}
.btn:hover {transform:translateY(-3px)}
.btn-primary {background:#11ad80;color:#fff;box-shadow:0 10px 24px rgba(0,167,125,.19)}
.btn-primary:hover {background:#05c492;box-shadow:0 14px 28px rgba(0,167,125,.32)}
.btn-outline {border-color:#355266;background:rgba(255,255,255,.04);color:var(--white)}
.btn-outline:hover {border-color:var(--mint);background:rgba(1,220,167,.1)}
.hero-minis {display:flex;gap:16px 18px;flex-wrap:wrap;margin-top:31px;font-size:12px;color:#b0c6cf;font-weight:750}
.hero-minis span {display:inline-flex;gap:6px;align-items:center}
.hero-visual {position:relative;min-height:570px;display:flex;align-items:center;justify-content:center;padding:16px 0}
.hero-glow {position:absolute;width:465px;height:465px;max-width:100%;background:radial-gradient(circle,rgba(0,217,188,.28),rgba(0,139,164,.13) 46%,transparent 71%);left:50%;top:49%;transform:translate(-50%,-50%);pointer-events:none}
.phone-frame {background:#01080e;border:8px solid #0a1822;border-radius:48px;box-shadow:var(--shadow),inset 0 0 0 2px #344b58;overflow:hidden}
.hero-phone {position:relative;z-index:2;width:min(335px,69%);transform:rotate(7deg) translate(28px,9px);outline:1px solid rgba(255,255,255,.17);outline-offset:-2px}
.hero-phone img,.screenshot-device img {width:100%;height:auto}
.hero-mascot {position:absolute;z-index:4;left:0%;top:14%;width:197px;aspect-ratio:1;border-radius:30px;box-shadow:0 22px 35px rgba(0,10,19,.35);transform:rotate(-12deg);border:4px solid rgba(255,255,255,.15)}
.float-sparkle {position:absolute;z-index:3;font-size:55px;text-shadow:0 0 12px rgba(255,255,255,.11)}
.sparkle-a {left:12%;bottom:18%;color:var(--mint)}
.sparkle-b {right:4%;top:8%;color:var(--yellow);font-size:67px}
.sparkle-c {right:0;bottom:27%;font-size:34px;color:var(--coral)}
.hero-sticker {position:absolute;z-index:5;display:inline-flex;align-items:center;gap:9px;box-shadow:0 14px 35px rgba(0,0,0,.35);font-weight:900;white-space:nowrap}
.sticker-top {top:18%;right:-4%;background:#fff;color:#102838;padding:12px 18px;border-radius:14px;transform:rotate(8deg);font-size:14px}
.sticker-top span {font-size:20px}
.sticker-bottom {bottom:11%;left:-2%;background:#fff;color:#0e2d40;padding:12px 16px;border-radius:16px;transform:rotate(-7deg)}
.sticker-bottom strong,.sticker-bottom small {display:block}
.sticker-bottom small {font-size:11px;color:#687f87;font-weight:700}
.sticker-icon {display:grid;place-items:center;background:#ffdc49;width:39px;height:39px;border-radius:13px}
.hero-bottom-wave {position:absolute;bottom:-1px;width:100%;height:35px;background:linear-gradient(176deg,transparent 47%,#092b39 48%)}

/* Occasions */
.occasion-strip {background:#092b39;border-bottom:1px solid rgba(215,249,255,.08);padding:20px 0 25px}
.occasion-row {display:flex;align-items:center;justify-content:space-between;gap:20px}
.strip-label {color:#69aaa9;font-weight:900;font-size:10px;letter-spacing:.2em;white-space:nowrap}
.occasion-list {display:flex;align-items:center;justify-content:space-between;gap:18px 28px;flex:1;max-width:825px;flex-wrap:wrap}
.occasion-list span {color:#d1e2e8;font-size:14px;font-weight:750;white-space:nowrap}

/* Titles and game cards */
.heading-wrap {margin-bottom:42px}
.heading-centered {text-align:center;max-width:760px;margin-inline:auto}
.heading-wrap h2,.screenshot-intro h2,.faq-heading h2 {font-size:clamp(37px,4.35vw,59px);font-weight:920;margin-bottom:15px}
.heading-wrap p:not(.eyebrow) {max-width:620px;margin-inline:auto;font-size:17px;line-height:1.7}
.emphasis-swoosh {position:relative;color:var(--mint);white-space:nowrap}
.emphasis-swoosh::after {content:"";position:absolute;left:0;right:0;bottom:-6px;border-bottom:4px solid var(--mint);border-radius:50%;transform:rotate(-2deg)}
.games {background:radial-gradient(circle at 50% 0%,rgba(0,145,139,.09),transparent 32%),#061e2e}
.game-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.game-card {display:flex;flex-direction:column;min-height:280px;padding:24px;border:1px solid #24485a;background:linear-gradient(146deg,#103144,#0a283a);border-radius:23px;position:relative;transition:transform .22s,border-color .22s,background .22s;overflow:hidden}
.game-card:hover {transform:translateY(-5px);border-color:#3e7682;background:linear-gradient(146deg,#133c4f,#0c2f42)}
.game-card-featured {background:linear-gradient(150deg,#084e4c,#0d333f);border-color:rgba(1,220,167,.38)}
.game-card-featured:hover {background:linear-gradient(150deg,#07645c,#0d333f)}
.game-card-trivia {background:linear-gradient(145deg,#123d49,#0b2b3c);border-color:#328f82}
.game-top {display:flex;align-items:flex-start;justify-content:space-between;gap:5px;margin-bottom:23px}
.game-emoji {display:grid;place-items:center;width:60px;height:60px;border-radius:18px;font-size:30px;flex-shrink:0;box-shadow:inset 0 1px 1px rgba(255,255,255,.16)}
.game-emoji.teal {background:#078e8c}.game-emoji.coral {background:#ff664e}.game-emoji.green {background:#0da376}.game-emoji.orange {background:#ea7437}.game-emoji.red {background:#e74739}
.game-number {color:#80b9b9;font-size:9px;letter-spacing:.09em;font-weight:900;text-align:right;margin-top:5px}
.game-card h3 {font-size:21px;font-weight:900;margin-bottom:10px;letter-spacing:-.04em}
.game-card p {font-size:13.5px;line-height:1.7;margin-bottom:20px;color:#b8ccd5}
.game-card-bottom {display:flex;justify-content:space-between;align-items:center;margin-top:auto;border-top:1px solid rgba(220,255,255,.12);padding-top:15px;color:#6dedce;text-transform:uppercase;font-size:10px;letter-spacing:.12em;font-weight:900}
.game-card-bottom > span:last-child {font-size:18px;line-height:1}
.game-card-bottom a {color:#79f5d6;font-weight:900;letter-spacing:.05em;text-transform:none}
.game-card-bottom a:hover {text-decoration:underline}

/* Study feature */
.study {position:relative;background:#eafaf5;color:#082b35;overflow:hidden}
.study::before {content:"";position:absolute;width:520px;height:520px;border:85px solid rgba(0,160,137,.07);border-radius:50%;left:-260px;bottom:-340px}
.study-layout {display:grid;grid-template-columns:1.01fr .99fr;gap:86px;align-items:center;position:relative}
.study-badge {display:inline-block;background:#d2f5e8;color:#077b66;padding:9px 13px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.13em;margin-bottom:22px}
.study-copy h2 {font-size:clamp(42px,5vw,67px);font-weight:950;margin-bottom:19px}
.study-highlight {color:#009d7f;position:relative;white-space:nowrap}
.study-highlight::after {content:"";position:absolute;left:0;bottom:-7px;width:100%;border-bottom:5px solid #19c89b;transform:rotate(-2deg);border-radius:50%}
.study-lede {color:#42636a;font-size:17px;line-height:1.8;margin-bottom:27px}
.study-steps {display:grid;gap:23px;margin:30px 0 23px}
.study-step {display:flex;align-items:flex-start;gap:17px}
.step-count {background:#05a882;color:#fff;font-weight:950;font-size:16px;border-radius:14px;min-width:41px;height:41px;display:grid;place-items:center;box-shadow:0 7px 15px rgba(0,139,105,.13)}
.study-step h3 {font-size:18px;letter-spacing:-.025em;margin-bottom:4px}
.study-step p {font-size:14px;color:#58757b;line-height:1.65;margin:0}
.study-footnote {font-size:12px;color:#4d7777;font-weight:700;margin-top:25px}
.quiz-side {position:relative}
.quiz-card {border-radius:26px;background:#fff;box-shadow:0 30px 90px rgba(6,56,58,.16);border:1px solid #d3eeea;overflow:hidden;transform:rotate(2deg);transition:transform .25s}
.quiz-card:hover {transform:rotate(0deg)}
.quiz-card-header {display:flex;justify-content:space-between;align-items:center;gap:12px;background:#082e3c;color:#fff;padding:19px 25px;font-size:12px;font-weight:900;letter-spacing:.09em}
.quiz-card-label {font-size:9px;color:#7fe6d3}
.quiz-progress {background:#d2e4e2;height:6px}
.quiz-progress-bar {display:block;width:33.333%;background:#13b58c;height:100%;transition:width .3s}
.quiz-card-body {padding:34px 33px 24px;min-height:422px}
.quiz-category {font-size:10px;font-weight:950;letter-spacing:.13em;color:#008e79;margin-bottom:11px}
.quiz-card h3 {font-size:clamp(24px,2.8vw,34px);line-height:1.23;margin-bottom:24px;letter-spacing:-.045em;color:#0a2839}
.quiz-answers {display:grid;gap:9px}
.quiz-choice {border:2px solid #e3ebed;border-radius:14px;background:#f7fafb;color:#113141;text-align:left;padding:13px 16px;font-size:15px;font-weight:800;min-height:53px;transition:background .15s,border-color .15s}
.quiz-choice:hover:not(:disabled) {background:#eafaf5;border-color:#39c8a3}
.quiz-choice:disabled {cursor:default}
.quiz-choice.is-correct {background:#d6f8e9;border-color:#0dac83;color:#075e49}
.quiz-choice.is-wrong {background:#fff0eb;border-color:#ff745c;color:#9b3b2f}
.quiz-feedback {min-height:35px;font-size:13px;font-weight:750;color:#7b9297;margin:19px 0 0}
.quiz-feedback.feedback-correct {color:#007d5f}.quiz-feedback.feedback-wrong {color:#b35b44}
.quiz-card-footer {background:#ecf7f4;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 25px;color:#49766e;font-size:11px;font-weight:750}
.quiz-next {border:0;background:#0daa80;color:#fff;white-space:nowrap;border-radius:11px;padding:10px 13px;font-weight:900;font-size:12px}
.quiz-next:hover {background:#078d6e}
.quiz-note {position:absolute;bottom:-40px;right:-10px;padding:13px 17px;max-width:325px;font-size:12px;font-weight:900;line-height:1.4;background:var(--yellow);color:#15303c;border-radius:14px;transform:rotate(-4deg);box-shadow:0 10px 24px rgba(7,46,43,.16)}
.quiz-note-star {font-size:20px;margin-right:4px}

/* Steps */
.how {background:#082334}
.how-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:57px}
.how-step {text-align:center;padding:0 18px}
.how-icon {position:relative;margin:0 auto 26px;display:grid;place-items:center;width:102px;height:102px;border-radius:30px;font-size:45px;transform:rotate(-6deg)}
.how-icon span {transform:rotate(6deg)}
.how-icon b {position:absolute;right:-12px;top:-12px;display:grid;place-items:center;width:35px;height:35px;border-radius:50%;font-size:12px;background:#fff;color:#0c3340;border:3px solid #082334;transform:rotate(6deg)}
.how-icon.pink {background:#ff735f}.how-icon.yellow {background:#fcd348}.how-icon.blue {background:#0ba98e}
.how-step h3 {font-size:24px;margin-bottom:12px}
.how-step p {font-size:15px;line-height:1.75;max-width:300px;margin-inline:auto}
.banner-section {background:#082334;padding:0 0 70px}
.banner-container {border-radius:24px;overflow:hidden;border:1px solid #285362;box-shadow:0 32px 70px rgba(0,7,15,.24)}
.banner-container img {width:100%;height:auto}

/* Screenshots */
.screenshots {background:linear-gradient(145deg,#061e2e,#0c2d3d)}
.screenshot-layout {display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.screenshot-intro h2 {font-size:clamp(40px,5vw,66px);max-width:550px}
.screenshot-intro>p:not(.eyebrow):not(.screenshot-caption):not(.screenshot-tip) {font-size:17px;line-height:1.8;max-width:480px}
.preview-switcher {display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:29px;max-width:520px}
.preview-tab {text-align:left;display:flex;align-items:center;gap:11px;border:1px solid #305568;border-radius:14px;color:#d6e5e9;background:#183a4d;padding:12px 14px;font-size:13px;font-weight:800;transition:border-color .2s,background .2s}
.preview-tab span {font-size:19px}
.preview-tab:hover {border-color:#77cabb}
.preview-tab.is-active {background:#0b806b;border-color:#06cb9b;color:#fff;box-shadow:0 0 0 1px rgba(0,237,172,.2)}
.screenshot-caption {font-weight:900;color:#7ff0d2;font-size:16px;margin:27px 0 5px}
.screenshot-tip {font-size:12px;color:#7999a6;margin-bottom:0}
.screenshot-display {position:relative;min-height:610px;display:flex;align-items:center;justify-content:center}
.screenshot-backdrop {position:absolute;width:440px;height:440px;max-width:100%;border-radius:50%;background:radial-gradient(circle,#08645e 0%,rgba(0,130,115,.26) 50%,transparent 73%)}
.screenshot-device {position:relative;z-index:2;width:min(315px,70%);box-shadow:0 28px 65px rgba(0,0,0,.38);transform:rotate(-3deg);transition:transform .25s}
.screenshot-device:hover {transform:rotate(0deg)}
.screenshot-bubble {position:absolute;bottom:20%;right:0;z-index:3;color:#133344;background:#f5fafb;border-radius:13px;padding:12px 15px;box-shadow:0 12px 24px rgba(0,0,0,.23);font-size:12px;font-weight:900;transform:rotate(7deg)}
.screenshot-bubble span {color:#f7b500}

/* Premium bar */
.premium-strip {background:linear-gradient(95deg,#007f71,#06a47c);padding:43px 0}
.premium-layout {display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:26px}
.premium-icon {width:77px;height:77px;background:rgba(255,255,255,.15);display:grid;place-items:center;border-radius:20px;font-size:50px;line-height:1;color:#fff}
.premium-layout .eyebrow {font-size:10px;color:#d9fff0;margin-bottom:8px}
.premium-layout h2 {font-size:27px;line-height:1.2;letter-spacing:-.045em;margin-bottom:8px}
.premium-layout h2 em {color:var(--yellow);font-style:normal}
.premium-layout p:not(.eyebrow) {color:#ddfff3;font-size:13.5px;margin:0}
.btn-outline-light {border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.11);color:#fff}
.btn-outline-light:hover {background:rgba(255,255,255,.23)}

/* FAQ */
.faq {background:#071f2e}
.faq-layout {display:grid;grid-template-columns:.8fr 1.2fr;gap:75px;align-items:start}
.faq-heading h2 {font-size:clamp(39px,4vw,54px);margin-bottom:16px}
.faq-heading p:not(.eyebrow) {font-size:16px;line-height:1.7}
.faq-items {border-top:1px solid #2b4d5c}
.faq-items details {border-bottom:1px solid #2b4d5c;padding:0 4px}
.faq-items summary {display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 0;list-style:none;font-size:16px;font-weight:850;cursor:pointer;line-height:1.4}
.faq-items summary::-webkit-details-marker {display:none}
.faq-items summary span {color:var(--mint);font-size:28px;font-weight:300;line-height:1;transition:transform .2s}
.faq-items details[open] summary span {transform:rotate(45deg)}
.faq-items details p {font-size:14px;line-height:1.8;margin:-7px 36px 23px 0;color:#b9ced5}

/* Launch */
.launch-section {background:#071f2e;padding:0 0 110px}
.launch-card {position:relative;isolation:isolate;overflow:hidden;border-radius:32px;background:radial-gradient(ellipse 65% 85% at 50% 120%,rgba(1,199,170,.23),transparent 78%),linear-gradient(125deg,#104357,#0a303d 60%,#0c4750);border:1px solid #276371;text-align:center;padding:55px 35px 49px}
.launch-card::before {content:"";position:absolute;inset:0;z-index:-1;background:repeating-radial-gradient(circle at 100% 10%,transparent 0 100px,rgba(0,255,209,.045) 101px 155px,transparent 156px 225px);opacity:.95}
.launch-card>img {margin:0 auto 18px;border-radius:22px;box-shadow:0 16px 30px rgba(0,15,17,.24);width:100px}
.launch-status {display:flex;align-items:center;justify-content:center;gap:12px;color:#c8efdf;margin-bottom:14px}
.launch-card h2 {font-size:clamp(37px,4.5vw,62px);font-weight:950;margin-bottom:17px}
.launch-card h2 span {color:var(--mint)}
.launch-card>p:not(.eyebrow) {font-size:17px;line-height:1.7;max-width:540px;margin:0 auto 28px}
.launch-card>p strong {color:#fff}
.store-actions {display:flex;justify-content:center;align-items:stretch;gap:15px;flex-wrap:wrap;margin-top:29px}
.store-button {display:flex;align-items:center;gap:13px;min-width:250px;min-height:75px;border:1px solid #4c7480;background:#081f2c;border-radius:17px;padding:11px 14px;text-align:left;transition:transform .2s,background .2s,border-color .2s}
.store-button:hover {transform:translateY(-3px);background:#112f3b;border-color:var(--mint)}
.store-symbol {width:36px;text-align:center;font-size:33px;color:#fff;line-height:1;flex-shrink:0}
.apple-symbol {font-size:30px;line-height:1}
.play-symbol {background:linear-gradient(145deg,#15e9ae,#62b2f7 48%,#ffcd45 73%,#ff6547);color:transparent;background-clip:text;-webkit-background-clip:text}
.store-button small,.store-button strong {display:block}
.store-button small {font-size:9px;font-weight:800;letter-spacing:.09em;color:#abc6ce}
.store-button strong {font-size:21px;line-height:1.3;letter-spacing:-.045em}
.store-soon {margin-left:auto;align-self:flex-start;background:rgba(244,188,63,.11);color:#f7ce70;border:1px solid rgba(255,209,93,.24);border-radius:6px;padding:4px 6px;font-weight:900;font-size:8px;letter-spacing:.02em;white-space:nowrap}
.launch-card .launch-disclaimer {color:#9fbec4;font-size:12px!important;margin:24px auto 0!important}
.launch-confetti {position:absolute;color:var(--yellow);font-size:55px;opacity:.9}
.c-one {left:12%;top:20%;transform:rotate(18deg)}.c-two {right:11%;top:22%;color:var(--coral);font-size:38px}.c-three {right:18%;bottom:13%;color:var(--mint);font-size:27px}

/* Footer and dialog */
.site-footer {background:#031825;border-top:1px solid #1c3b48}
.footer-main {padding:56px 0 49px;display:grid;grid-template-columns:2.1fr 1fr 1fr;gap:55px}
.footer-brand p {max-width:270px;font-size:13px;line-height:1.8;margin:20px 0 0}
.footer-links {display:flex;flex-direction:column;gap:10px;align-items:flex-start;font-size:13px}
.footer-links>span {font-size:10px;font-weight:900;color:#719eab;letter-spacing:.17em;margin-bottom:7px}
.footer-links a {color:#d2e0e6;font-weight:750;transition:color .2s}
.footer-links p {font-size:12px;margin:0;line-height:1.6}
.footer-bottom {border-top:1px solid #173643;padding:22px 0 29px;display:flex;justify-content:space-between;gap:20px;align-items:center;color:#8fa9b2;font-size:12px}
.footer-bottom a {color:#b6d5d9}
.footer-bottom a:hover {color:var(--mint)}
.release-dialog {max-width:min(430px,calc(100vw - 32px));border:1px solid #448576;border-radius:25px;background:#0d2d3d;color:#fff;padding:0;box-shadow:0 30px 120px rgba(0,0,0,.65)}
.release-dialog::backdrop {background:rgba(1,15,25,.82);backdrop-filter:blur(5px)}
.dialog-content {position:relative;text-align:center;padding:36px 32px}
.dialog-content img {margin:0 auto 19px;border-radius:18px}
.dialog-content .eyebrow {display:block;font-size:10px}
.dialog-content h2 {font-size:35px;margin:9px 0 11px}
.dialog-content p {font-size:15px;line-height:1.8;margin:0 0 26px}
.dialog-close {border:0;background:#1f4d5b;color:#fff;position:absolute;right:14px;top:13px;width:34px;height:34px;border-radius:50%;font-size:25px;line-height:1}

/* Responsive */
@media (max-width:1100px) {
  .hero h1 {font-size:clamp(53px,6.5vw,79px)}
  .hero-sticker.sticker-top {right:-1%}
  .hero-mascot {left:-3%;top:16%;width:163px}
  .study-layout {gap:49px}
  .game-card {padding:21px;min-height:296px}
  .game-card h3 {font-size:19px}
  .game-card p {font-size:13px}
  .store-soon {font-size:7px}
}
@media (max-width:870px) {
  .container {width:min(100% - 42px,720px)}
  .nav-links {gap:17px}
  .nav-links a {font-size:12px}
  .brand {font-size:19px}
  .hero-layout {grid-template-columns:1fr;gap:0;padding-top:72px;padding-bottom:50px}
  .hero {min-height:auto}
  .hero-copy {text-align:center}
  .hero-copy .launch-eyebrow,.hero-actions,.hero-minis {justify-content:center}
  .hero h1 {font-size:clamp(60px,9vw,86px)}
  .hero-lede {margin-inline:auto}
  .hero-visual {min-height:520px;width:min(520px,100%);margin:10px auto 0}
  .hero-phone {width:310px}
  .hero-mascot {left:6%;width:168px}
  .sticker-top {right:0!important}
  .sticker-bottom {left:5%}
  .occasion-row {display:block;text-align:center}
  .occasion-list {justify-content:center;margin-top:14px}
  .game-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .game-card {min-height:265px}
  .study-layout,.screenshot-layout,.faq-layout {grid-template-columns:1fr;gap:50px}
  .study-copy h2,.screenshot-intro h2 {max-width:670px}
  .quiz-side {max-width:560px;width:100%;margin-inline:auto}
  .screenshot-display {min-height:550px}
  .screenshot-intro {text-align:center}
  .screenshot-intro h2,.screenshot-intro>p:not(.eyebrow):not(.screenshot-caption):not(.screenshot-tip) {margin-left:auto;margin-right:auto}
  .preview-switcher {margin-left:auto;margin-right:auto}
  .premium-layout {grid-template-columns:65px 1fr;gap:20px}
  .premium-layout .btn {grid-column:2;justify-self:start}
  .footer-main {grid-template-columns:1.5fr 1fr 1fr;gap:25px}
}
@media (max-width:590px) {
  html {scroll-padding-top:73px}
  .container {width:calc(100% - 34px)}
  .section-pad {padding:74px 0}
  .nav-wrap {min-height:70px;gap:10px}
  .nav-links {display:none}
  .nav-cta {padding:9px 11px;font-size:11px;gap:7px}
  .nav-cta span:last-child {display:none}
  .brand-icon {width:38px;height:38px}
  .brand {font-size:19px;gap:9px}
  .hero-layout {padding-top:58px;padding-bottom:31px}
  .launch-eyebrow {font-size:9px;gap:7px;margin-bottom:24px}
  .hero h1 {font-size:clamp(53px,12.3vw,69px);margin-bottom:22px}
  .hero-lede {font-size:16px;line-height:1.7}
  .hero-actions {gap:9px}
  .hero-actions .btn {padding:12px 15px;font-size:12px;border-radius:12px;gap:7px}
  .hero-minis {font-size:11px;gap:12px;margin-top:23px}
  .hero-visual {min-height:450px;margin-top:18px}
  .hero-phone {width:240px;transform:rotate(7deg) translate(17px,5px);border-width:6px;border-radius:37px}
  .hero-mascot {left:0%;top:20%;width:132px;border-width:3px;border-radius:21px}
  .sticker-top {right:0!important;top:15%;font-size:11px;padding:9px 11px}
  .sticker-top span {font-size:15px}
  .sticker-bottom {bottom:8%;left:0;padding:9px 10px;font-size:10px;gap:6px}
  .sticker-bottom small {font-size:9px}.sticker-icon {width:29px;height:29px}
  .float-sparkle.sparkle-a {font-size:34px;bottom:10%}.float-sparkle.sparkle-b {font-size:44px}
  .occasion-row {text-align:center}
  .occasion-list {gap:12px 18px;margin-top:14px}
  .occasion-list span {font-size:12px}
  .heading-wrap {margin-bottom:33px}
  .heading-wrap h2,.screenshot-intro h2,.faq-heading h2 {font-size:clamp(34px,9vw,45px)}
  .heading-wrap p:not(.eyebrow),.screenshot-intro>p:not(.eyebrow):not(.screenshot-caption):not(.screenshot-tip) {font-size:15px}
  .game-grid {gap:10px}
  .game-card {min-height:266px;padding:15px;border-radius:18px}
  .game-top {margin-bottom:15px}
  .game-emoji {width:47px;height:47px;border-radius:13px;font-size:25px}
  .game-number {font-size:8px}
  .game-card h3 {font-size:18px;line-height:1.2}
  .game-card p {font-size:12px;line-height:1.58}
  .game-card-bottom {font-size:9px;padding-top:12px;letter-spacing:.05em}
  .study-copy h2 {font-size:clamp(38px,10vw,52px)}
  .study-highlight {white-space:normal}
  .study-lede {font-size:16px}
  .study-step {gap:13px}
  .study-step h3 {font-size:16px}
  .study-step p {font-size:13px}
  .quiz-card {transform:none}
  .quiz-card:hover {transform:none}
  .quiz-card-header {padding:17px 18px;font-size:11px}
  .quiz-card-label {font-size:8px}
  .quiz-card-body {padding:27px 20px 13px;min-height:410px}
  .quiz-card h3 {font-size:26px}
  .quiz-choice {font-size:14px;min-height:49px}
  .quiz-card-footer {padding:15px 18px;font-size:10px}
  .quiz-note {right:-4px;bottom:-43px;font-size:10px;max-width:275px}
  .how-grid {grid-template-columns:1fr;gap:42px;margin-top:42px}
  .how-icon {width:90px;height:90px;margin-bottom:21px}
  .how-step h3 {font-size:22px}
  .how-step p {font-size:14px}
  .banner-section {padding-bottom:40px}
  .banner-container {border-radius:14px}
  .screenshot-layout {gap:12px}
  .preview-switcher {gap:9px}
  .preview-tab {font-size:11px;padding:11px 10px;gap:7px}
  .preview-tab span {font-size:16px}
  .screenshot-display {min-height:480px}
  .screenshot-device {width:240px;border-radius:37px;border-width:6px}
  .screenshot-bubble {right:0;bottom:13%;font-size:10px}
  .premium-layout {grid-template-columns:1fr;text-align:center;gap:16px}
  .premium-icon {margin-inline:auto}
  .premium-layout h2 {font-size:25px}
  .premium-layout .btn {grid-column:auto;justify-self:center}
  .faq-layout {gap:30px}
  .faq-items summary {font-size:15px;padding:20px 0}
  .launch-section {padding-bottom:70px}
  .launch-card {padding:40px 18px;border-radius:22px}
  .launch-card>img {width:83px}
  .launch-card h2 {font-size:clamp(30px,8vw,42px)}
  .launch-card>p:not(.eyebrow) {font-size:15px}
  .store-actions {gap:10px}
  .store-button {width:min(100%,330px);min-width:0;min-height:69px}
  .store-soon {font-size:8px}
  .c-one {left:4%;top:15%;font-size:35px}.c-two {right:4%;top:18%;font-size:29px}
  .footer-main {grid-template-columns:1fr 1fr;row-gap:29px;column-gap:16px;padding:42px 0}
  .footer-brand {grid-column:1 / -1}
  .footer-bottom {align-items:flex-start;flex-direction:column;gap:7px}
}
@media (max-width:360px) {
  .game-grid {grid-template-columns:1fr}
  .game-card {min-height:210px}
  .hero-actions .btn {width:100%}
  .hero-visual {min-height:400px}
  .hero-phone {width:207px}
  .hero-mascot {width:112px}
  .sticker-bottom {bottom:4%}
  .store-symbol {width:28px}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}