/* Ace website. Colours, spacing and radii come from tokens.css (design/tokens.json).
   Web-only additions are the fluid type sizes and the section rhythm below. */

:root {
  color-scheme: dark;
  --gutter: clamp(var(--space-5), 4vw, 56px);
  --max: 1240px;
  --section: clamp(72px, 10vw, 144px);
  --glass-fill: rgba(255, 255, 255, 0.08);
  --glass-rim: rgba(255, 255, 255, 0.14);
  --body-on-colour: rgba(255, 255, 255, 0.82); /* Brand book: body text on a coloured gradient */
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hero headline typeface: Sentient Light (Indian Type Foundry, via Fontshare; free for commercial use, credit ITF).
   Only the hero headline uses it; every other heading stays SF Pro. */
@font-face {
  font-family: "Sentient";
  src: local("Sentient Light"), local("Sentient-Light"), url("fonts/Sentient-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
:root { --font-heading: "Sentient", var(--font-display); }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg-canvas); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font: 400 17px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--border-selected); outline-offset: 3px; }

.skip {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--action-primary); color: var(--on-action-primary);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); text-decoration: none; font-weight: 500;
}
.skip:focus { top: var(--space-4); }

.wrap { width: min(100%, calc(var(--max) + var(--gutter) * 2)); margin-inline: auto; padding-inline: var(--gutter); }

/* Type */
.title {
  font: 700 clamp(34px, 4.4vw, 56px)/1.08 var(--font-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.lede { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.45; }
.muted { color: var(--text-secondary); }
.label { font-weight: 500; font-size: 16px; line-height: 22px; }

/* Glass */
.glass {
  background: var(--glass-fill);
  box-shadow: inset 0 0 0 1px var(--glass-rim);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}

/* Navigation: a floating glass capsule, like the app's tab bar */
.nav {
  position: fixed; z-index: 50; top: var(--space-4); left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: var(--space-1);
  width: min(calc(100% - var(--space-8)), 560px); min-height: 60px;
  /* Corners run parallel to the app icon's: icon radius + the icon's inset from the edge */
  --icon: 40px; --icon-radius: 10px; --inset: calc((60px - var(--icon)) / 2);
  padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--inset) - var(--space-1));
  border-radius: calc(var(--icon-radius) + var(--inset));
  /* Light frosted glass with dark words, readable over light and dark sections */
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(18, 18, 20, 0.08);
  color: var(--gray-950);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--size-touch);
  padding-inline: var(--space-1) var(--space-3);
  font-weight: 700; font-size: 20px; letter-spacing: -0.01em; text-decoration: none;
}
.brand img { width: var(--icon, 40px); height: var(--icon, 40px); border-radius: var(--icon-radius, 10px); }
.nav > nav { margin-left: auto; }
.nav ul { display: flex; }
.nav li a {
  display: inline-flex; align-items: center; min-height: var(--size-touch); padding-inline: var(--space-3);
  border-radius: var(--radius-full); color: var(--gray-950); font-size: 15px; font-weight: 500; text-decoration: none;
  transition: background-color .2s;
}
.nav li a:hover, .nav li a[aria-current] { background: rgba(18, 18, 20, 0.07); }

/* Hero: light, headline, subtext and launch label, then two framed phones side by side */
.hero {
  --hero-ink: var(--gray-950);
  --hero-ink-2: var(--gray-450);
  position: relative; isolation: isolate; overflow: clip;
  background: var(--gray-0); color: var(--hero-ink);
  padding-top: clamp(112px, 14vh, 150px); padding-bottom: clamp(56px, 8vw, 112px);
  text-align: center;
}
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-title {
  max-width: 13em;
  font: 300 clamp(50px, calc(10vw - 8px), 152px)/.98 var(--font-heading);
  letter-spacing: -0.03em;
  color: var(--gray-950);
  text-transform: capitalize;
  text-wrap: balance;
}
.hero-lede { max-width: 30em; margin-top: var(--space-6); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; color: var(--hero-ink-2); }
/* Launch label in the dark capsule the CTA will use; not a button until there's a store link */
.hero-cta {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-8); min-height: 60px; padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, #24232c, var(--gray-950));
  color: var(--gray-50); font-size: clamp(17px, 1.5vw, 20px); font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.hero-cta::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--positive); box-shadow: 0 0 0 4px color-mix(in srgb, var(--positive) 26%, transparent);
}
.hero-phones {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 8px; margin-top: clamp(48px, 7vw, 88px);
}
.device-slot { margin: 0; width: clamp(150px, 24vw, 330px); }
.device-slot figcaption {
  margin-bottom: var(--space-4); font-size: clamp(15px, 1.4vw, 19px); font-weight: 600; letter-spacing: -0.01em;
  color: var(--hero-ink);
}
/* Real iPhone 17 Pro frame (Apple bezel); the screen sits behind its transparent glass */
.device { position: relative; aspect-ratio: 720 / 1472; }
.device-screen {
  /* Matches the frame's 1206 x 2622 opening, tucked 1px under the bezel */
  position: absolute; left: 5.26%; top: 2.46%; width: 89.48%; height: 95.08%;
  object-fit: cover; object-position: top; border-radius: 11% / 5.1%; background: #000;
}
.device-frame { position: relative; width: 100%; height: 100%; pointer-events: none; }

/* Cursor trail in the hero: 3D assets pop in along the pointer and fade within 1 s (site.js) */
.trail { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.trail img { position: absolute; left: 0; top: 0; width: 80px; height: 80px; margin: -40px 0 0 -40px; will-change: transform, opacity; }

/* Statement: words light up as they scroll by */
.statement { padding-block: var(--section); background: var(--gray-0); color: var(--gray-950); text-align: center; }
.statement p {
  max-width: 21em; margin-inline: auto;
  font: 300 clamp(32px, 5vw, 64px)/1.16 var(--font-display);
  letter-spacing: -0.015em;
}
.js .statement .word { opacity: .22; transition: opacity .35s linear; }
.js .statement .word.on { opacity: 1; }

/* Games: light band with very light grey cards; a straight phone breaks out of each card */
.games-band {
  --ink: var(--gray-950); --ink-2: var(--gray-450);
  background: var(--gray-0); color: var(--ink);
  padding-block: calc(clamp(96px, 11vw, 168px) - 60px) clamp(96px, 11vw, 168px);
}
/* Overlap by 1px so no hairline of the dark page shows at fractional section heights */
.hero + .statement, .statement + .games-band { margin-top: -1px; }
.features { display: grid; gap: clamp(112px, 12vw, 176px); }
.panel {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center;
  border-radius: var(--radius-2xl); background: var(--gray-100);
  min-height: clamp(460px, 42vw, 580px);
}
.panel-copy {
  display: flex; flex-direction: column; gap: var(--space-5);
  padding: clamp(var(--space-8), 6vw, 96px);
}
.panel-copy .eyebrow { font-weight: 600; font-size: 17px; color: var(--ink-2); }
.panel-copy .title { font-weight: 600; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.03em; }
.panel-copy .lede { color: var(--ink-2); max-width: 28em; }

/* The stage has no height of its own: the phone overhangs the card top and bottom */
.panel-stage { position: relative; align-self: stretch; }
.stage-phone { position: absolute; left: 50%; top: 50%; width: clamp(250px, 24vw, 330px); translate: -50% -50%; }

/* Solitaire modes: the screen cycles Classic, Daily Deal, Vegas and FreeCell every 4 s (site.js).
   The mode buttons pick one at will, which stops the cycle, like the app's onboarding dots. */
.cycle { overflow: hidden; }
.cycle img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
  opacity: 0; transition: opacity .5s ease;
}
.cycle img.on { opacity: 1; }
.modes button {
  padding: 6px 14px; border: 0; border-radius: var(--radius-full); font: inherit; font-size: 14px; line-height: 20px; cursor: pointer;
  background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(18, 18, 20, .08); color: var(--gray-950);
  transition: background-color .3s ease, color .3s ease;
}
.modes button:hover { background: var(--gray-0); }
.modes button[aria-pressed="true"] { background: var(--gray-950); color: var(--gray-0); box-shadow: none; }
.device.has-island .island {
  /* iPhone 17 Pro Dynamic Island: 125 x 37 pt, 11 pt from the top of a 402 x 874 pt screen */
  position: absolute; left: 50%; top: 3.66%; width: 27.8%; height: 4.03%; translate: -50% 0;
  border-radius: 999px; background: #000;
}

.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }

/* Coming soon: a deck deals three cards, the last turns over to a "?", then the hand is gathered (7 s loop).
   Card backs use the free Stripes pattern, drawn in code like the app's. */
/* Card width follows the stage width (container query units), capped at the app's large card size,
   so the hand plus chips never spill into the copy or off the card at tablet widths */
.p-soon .panel-stage { container-type: inline-size; }
.deal {
  --cw: min(var(--size-card-lg), 19cqi); --ch: calc(var(--cw) * 1.4);
  position: absolute; left: 50%; top: 50%; width: calc(var(--cw) * 4.4); height: calc(var(--ch) * 1.9);
  translate: -50% -50%;
}
.deal-card {
  position: absolute; left: 0; top: calc(var(--ch) * .78); width: var(--cw); height: var(--ch);
  perspective: 800px;
}
.deal-card .face, .deal-card .flip { position: absolute; inset: 0; border-radius: calc(var(--cw) * .12); }
.deal-card .face { backface-visibility: hidden; box-shadow: inset 0 0 0 1px var(--card-edge); }
.face.back {
  background:
    repeating-linear-gradient(135deg, var(--card-ink) 0 2px, transparent 2px 6px) content-box,
    var(--card-face);
  padding: calc(var(--cw) * .07);
}
.face.front {
  display: flex; flex-direction: column; justify-content: space-between; padding: 8px 10px;
  background: var(--card-face); color: var(--card-red); font-weight: 600; transform: rotateY(180deg);
}
.face.front i { font-style: normal; font-size: calc(var(--cw) * .2); line-height: 1; }
.face.front i:last-child { align-self: flex-end; rotate: 180deg; }
.face.front b { align-self: center; font: 800 calc(var(--cw) * .6)/1 var(--font-display); color: var(--card-ink); }
.flip { transform-style: preserve-3d; }
.deck.d2 { translate: -3px 3px; }
.deck.d3 { translate: -6px 6px; }
.deal-chips { position: absolute; left: calc(var(--cw) * -.55); top: calc(var(--ch) * 1.25); width: calc(var(--cw) * .99); z-index: 2; }

.deal .c1, .deal .c2, .deal .c3, .deal .flip { animation: 7s cubic-bezier(.22, 1, .36, 1) infinite; }
.deal .c1 { animation-name: deal-1; }
.deal .c2 { animation-name: deal-2; }
.deal .c3 { animation-name: deal-3; }
.deal .flip { animation-name: deal-flip; }
@keyframes deal-1 {
  0%, 6% { transform: none; }
  16%, 84% { transform: translate(calc(var(--cw) * 1.15), calc(var(--ch) * -.42)) rotate(-9deg); }
  96%, 100% { transform: none; }
}
@keyframes deal-2 {
  0%, 16% { transform: none; }
  26%, 86% { transform: translate(calc(var(--cw) * 2.25), calc(var(--ch) * -.55)) rotate(0deg); }
  98%, 100% { transform: none; }
}
@keyframes deal-3 {
  0%, 26% { transform: none; }
  36%, 88% { transform: translate(calc(var(--cw) * 3.35), calc(var(--ch) * -.42)) rotate(9deg); }
  100% { transform: none; }
}
@keyframes deal-flip {
  0%, 44% { transform: none; }
  54%, 76% { transform: rotateY(180deg); }
  84%, 100% { transform: none; }
}

/* Facts inside a panel */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4) var(--space-6); margin-top: var(--space-2); }
.facts dt { font-size: 14px; color: var(--ink-2); }
.facts dd { font-size: 20px; line-height: 26px; font-weight: 600; }

/* Footer */
footer { border-top: 1px solid var(--border-subtle); padding-block: var(--space-10); font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4) var(--space-10); }
.foot nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); }
.foot nav a { display: inline-flex; align-items: center; min-height: var(--size-touch); color: var(--text-primary); text-decoration: none; font-size: 15px; }
.foot nav a:hover { text-decoration: underline; }
.foot .brand { color: var(--text-primary); padding-left: 0; }
.disclaimer { max-width: 42em; margin-top: var(--space-4); }

/* Long-read pages */
.doc { padding-top: 132px; padding-bottom: var(--section); background: linear-gradient(var(--home-indigo-top), var(--home-indigo-mid) 260px, var(--bg-canvas) 560px); }
.doc-body { max-width: 720px; margin-inline: auto; }
.doc-body .updated { margin-top: var(--space-3); }
.doc-body > .lede { margin-top: var(--space-5); color: var(--body-on-colour); }
.doc-body h2 { font: 700 24px/30px var(--font-display); margin-top: var(--space-10); }
.doc-body h3 { font: 500 17px/24px var(--font-sans); margin-top: var(--space-6); }
.doc-body p, .doc-body ul { margin-top: var(--space-3); }
.doc-body ul { list-style: disc; padding-left: var(--space-5); }
.doc-body li { margin-top: var(--space-2); }
.doc-body a { text-underline-offset: 3px; }
.todo { background: var(--premium-from); color: var(--on-premium); padding: 0 6px; border-radius: var(--radius-xs); font-weight: 500; }
.contact { margin-top: var(--space-8); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--bg-surface); }
.contact h2 { margin-top: 0; }
.faq { margin-top: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-surface); }
.faq details + details { border-top: 1px solid var(--border-subtle); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--size-button); padding: var(--space-3) var(--space-5); cursor: pointer; font-weight: 500; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); rotate: 45deg; translate: 0 -2px; transition: rotate .25s var(--spring); }
.faq details[open] summary::after { rotate: 225deg; translate: 0 2px; }
.faq details > p, .faq details > ul { margin: 0; padding: 0 var(--space-5) var(--space-5); color: var(--text-secondary); }
.faq details > ul { padding-left: var(--space-10); }

/* Reveal on scroll */
.js .reveal { opacity: 0; translate: 0 28px; transition: opacity .7s var(--spring), translate .9s var(--spring); }
.js .reveal.in { opacity: 1; translate: 0 0; }

@media (max-width: 900px) {
  .features { gap: var(--space-10); }
  .panel { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: var(--radius-xl); }
  .panel-copy { padding: var(--space-8) var(--space-6) var(--space-4); }
  /* Phone sits in the card and overhangs its bottom edge */
  .panel-stage { height: 380px; }
  .stage-phone { top: 0; width: 220px; translate: -50% 0; }
  .p-soon .panel-stage { height: 280px; }
  .deal { top: 46%; translate: -44% -50%; }
  .panel + .panel { margin-top: 56px; }
}


@media (max-width: 480px) {
  .nav li a { padding-inline: var(--space-2); font-size: 14px; }
  .brand { font-size: 18px; padding-right: var(--space-1); }
  .nav { --icon: 36px; }
  .footer .brand img, footer .brand img { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .deal .c1, .deal .c2, .deal .c3, .deal .flip { animation-duration: 7s; animation-play-state: paused; animation-delay: -4.4s; }
  .cycle img, .modes button { transition: none; }
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; translate: 0 0; transition: none; }
  .js .statement .word { opacity: 1; transition: none; }
  .faq summary::after { transition: none; }
}