/* Good Tyms: main site styles. Fonts live in fonts.css. */
  :root {
    color-scheme: light;
    --sky: #39bdfa;
    --sky-deep: #1a8fe0;
    --blue-ink: #0b5fc4;
    --sun: #fad639;
    --sun-deep: #f0a800;
    --pink: #f3a6c8;
    --cream: #fcf5e3;
    --cream-2: #f5ebcf;
    --ink: #0b1733;
    --ink-2: #16254d;
    --mist: #c6d3ee;
    --white: #ffffff;
    --round: "Fredoka", "SF Pro Rounded", "Nunito", system-ui, sans-serif;
    --body: "Nunito", "SF Pro Text", system-ui, sans-serif;
    --slab: "Dela Gothic One", "Arial Black", Impact, sans-serif;
    --hand: "Caveat", "Marker Felt", cursive;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  html, body { background: var(--ink); }
  body { font-family: var(--body); color: var(--white); overflow-x: hidden; }
  h1, h2, h3, p { margin: 0; }
  h1, h2, h3 { text-wrap: balance; }
  button { font: inherit; color: inherit; cursor: pointer; }
  img { display: block; max-width: 100%; }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

  section, header.site, footer { position: relative; overflow: hidden; isolation: isolate; }
  .rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
  .wrap { position: relative; z-index: 2; width: min(1240px, 100%); margin: 0 auto; padding-inline: max(16px, 3vw); }
  .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 900; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
  .eyebrow i { font-style: normal; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; font-size: .75rem; letter-spacing: 0; }

  /* shared card crop (card region of a 460×1000 capture) + flip */
  /* A card: every card image is cropped to exactly 1:2 by tools/l10n-assets.py. */
  .shot { position: relative; aspect-ratio: 1 / 2; overflow: hidden; border-radius: 9% / 4.5%; background: #cfe9f7; max-width: 100%; }
  .shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
  /* A device screen: full app captures (1320×2868) inside a dark bezel. */
  .screen, .phone, .d-phone, .editor-phone, .share-phones .p { background: #10131c; box-shadow: 0 24px 50px rgba(6,26,107,.3); }
  .screen img, .phone img, .d-phone img, .editor-phone img, .share-phones .p img { display: block; width: 100%; height: auto; aspect-ratio: 1320 / 2868; object-fit: cover; }
  h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
  .flip { perspective: 1600px; background: none; border: 0; padding: 0; display: block; width: 100%; }
  .flip-inner { position: relative; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.9,.2,1.15); }
  .flip.is-flipped .flip-inner { transform: rotateY(180deg); }
  .flip.spin-in .flip-inner { animation: spinIn 1.2s cubic-bezier(.2,.9,.2,1.1); }
  @keyframes spinIn { from { transform: rotateY(-180deg); } to { transform: rotateY(0); } }
  .face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .face.back { position: absolute; inset: 0; transform: rotateY(180deg); }

  .stores { display: flex; flex-wrap: wrap; gap: .7rem; }
  .store { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.15rem .7rem .95rem; border-radius: 16px; text-decoration: none; font-weight: 900; line-height: 1.05; font-size: 1.02rem; background: var(--ink); color: var(--white); transition: transform .2s; }
  .store:hover { transform: translateY(-3px) rotate(-1.5deg); }
  .store.alt { background: var(--white); color: var(--ink); }
  .store small { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
  .store svg { width: 24px; height: 24px; flex: none; }

  /* ---------- site nav ---------- */
  .nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; transition: background .3s, box-shadow .3s; }
  .nav.solid { background: rgba(11,23,51,.9); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255,255,255,.1); }
  .nav .wrap { display: flex; align-items: center; gap: 1.6rem; padding-block: .9rem; font-weight: 800; font-size: .92rem; }
  .wm-link { display: block; margin-right: auto; }
  .nav .wm { height: 28px; width: auto; }
  .nav .links { display: flex; gap: 1.3rem; }
  .nav .links a { text-decoration: none; }
  .nav .links a:hover { color: var(--sun); }
  .nav .pill { white-space: nowrap; background: var(--sun); color: var(--ink); padding: .55rem 1.05rem; border-radius: 999px; text-decoration: none; box-shadow: 0 5px 0 #c98f00; }
  .nav .links a { white-space: nowrap; }
  @media (max-width: 1080px) { .nav .links { display: none; } }
  .nav { margin-bottom: -64px; }

  /* ---------- 1 · HERO (Sunshine) ---------- */
  .hero { background: linear-gradient(180deg, #2fb0f5 0%, #6fd0f8 42%, #bfe7e9 66%, #f6dc6a 88%, var(--sun) 100%); padding-top: 64px; }
  .hero-copy { text-align: center; padding-block: 3rem 1rem; }
  .hero h1 { font-family: var(--round); font-weight: 700; font-size: clamp(3.2rem, 9.5vw, 8.6rem); line-height: .92; letter-spacing: -.02em; text-shadow: 0 .06em 0 var(--sky-deep), 0 .12em .3em rgba(6,26,107,.25); }
  .hero h1 .hl { color: var(--sun); text-shadow: 0 .06em 0 #c98f00, 0 .12em .3em rgba(6,26,107,.25); }
  .ticker { margin: 1.4rem auto 0; height: 2.4rem; overflow: hidden; font-family: var(--round); font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
  .ticker ul { list-style: none; margin: 0; padding: 0; animation: tick 10s cubic-bezier(.7,0,.3,1) infinite; }
  .ticker li { height: 2.4rem; line-height: 2.4rem; }
  @keyframes tick { 0%,16% { transform: translateY(0) } 20%,36% { transform: translateY(-2.4rem) } 40%,56% { transform: translateY(-4.8rem) } 60%,76% { transform: translateY(-7.2rem) } 80%,96% { transform: translateY(-9.6rem) } 100% { transform: translateY(-12rem) } }
  .hero .stores { justify-content: center; margin-top: 1.6rem; }
  .fan { position: relative; display: flex; justify-content: center; align-items: flex-end; padding-top: 3rem; margin-bottom: -110px; }
  .phone { width: clamp(180px, 25vw, 310px); padding: 9px; border-radius: 13% / 6%; flex: none; }
  .phone img { border-radius: 11% / 5.1%; }
  .phone.flip { background: #10131c; } /* .flip clears button backgrounds; the hero phone keeps its bezel */
  .fan .side { position: relative; z-index: 1; width: clamp(130px, 20vw, 250px); padding: 7px; margin-bottom: 50px; }
  .fan .side.l { transform: rotate(-9deg) translateX(18%); }
  .fan .side.r { transform: rotate(9deg) translateX(-18%); }
  .fan .mid { position: relative; z-index: 2; }
  .tap-hint { position: absolute; z-index: 3; left: calc(50% + clamp(170px,24vw,290px)/2 - 40px); top: 5rem; background: var(--sun); color: var(--ink); font-weight: 900; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; padding: .55rem .85rem; border-radius: 999px; transform: rotate(8deg); box-shadow: 4px 4px 0 var(--ink); animation: bob 2.4s ease-in-out infinite; white-space: nowrap; }
  @keyframes bob { 50% { transform: rotate(8deg) translateY(-6px); } }

  /* marquee band */
  /* Tilting 108vw by 2deg lifts one end and drops the other by ~1.9vw, so the band sits
     2vw higher and the next section tucks 4vw under it: no page background shows round it. */
  .band-clip { overflow: hidden; position: relative; z-index: 3; padding-block: 1.2rem 1.6rem; margin-block: calc(-1.2rem - 2vw) -1.6rem; }
  .band { position: relative; z-index: 3; background: var(--ink); color: var(--sun); transform: rotate(-2deg); margin-inline: -4vw; padding-block: 1rem; }
  .band-track { display: flex; width: max-content; animation: marquee 26s linear infinite; font-family: var(--round); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.6rem); white-space: nowrap; align-items: center; }
  .band-track span { padding-inline: 1.3rem; font-weight: 400; }
  .band-track span:nth-child(even) { color: var(--white); }
  .band-track i { font-style: normal; font-family: var(--round); font-size: .7em; margin-inline-end: .45em; opacity: .9; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* ---------- 2 · DOWN / UP ---------- */
  #count { margin-top: calc(-4vw - 4px); }
  .split { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 660px; }
  .half { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 5rem max(16px, 3vw) 2.4rem; }
  .half.down { background: linear-gradient(160deg, #3cc0fb, #0f6fd6); }
  .half.up { background: linear-gradient(200deg, #ffe46a, #f5b914); color: var(--ink); align-items: flex-end; text-align: end; }
  .half > * { position: relative; z-index: 2; }
  .half h2 { margin-top: auto; font-family: var(--round); font-weight: 700; font-size: clamp(3.2rem, 9.4vw, 9rem); line-height: .9; letter-spacing: -.02em; }
  .half .arrow { font-size: .5em; display: block; }
  .half p { max-width: 21rem; font-weight: 800; margin-top: 1rem; font-size: 1.05rem; line-height: 1.4; }
  .live { margin-top: 1rem; display: inline-flex; gap: .5rem; align-items: baseline; font-weight: 900; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; background: rgba(11,23,51,.85); color: var(--white); padding: .5rem .8rem; border-radius: 10px; font-variant-numeric: tabular-nums; }
  .live b { font-family: var(--slab); font-size: 1.3rem; color: var(--sun); letter-spacing: 0; }
  .split-center { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -46%); width: clamp(170px, 23vw, 300px); display: grid; justify-items: center; gap: 1rem; }
  .split-center .flip { filter: drop-shadow(0 30px 40px rgba(11,23,51,.45)); }
  .split-center .shot { border: 5px solid var(--white); }
  .mode-chip { background: var(--ink); color: var(--white); font-weight: 900; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; padding: .5rem .9rem; border-radius: 999px; white-space: nowrap; }

  /* three ways to count */
  .ways { background: var(--ink); padding-block: 5rem 3rem; }
  .sec-head { display: grid; gap: .9rem; max-width: 48rem; }
  .sec-head h2 { font-family: var(--slab); font-size: clamp(2.1rem, 5.4vw, 4rem); line-height: 1; }
  .sec-head h2 em { font-style: normal; color: var(--sun); }
  .sec-head p { color: var(--mist); font-size: 1.1rem; line-height: 1.55; font-weight: 700; max-width: 40rem; }
  .ways-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); margin-top: 3rem; }
  .way { display: grid; gap: 1.1rem; align-content: start; }
  .way .flip { width: min(100%, 300px); }
  .way .shot { border: 5px solid var(--white); }
  /* A countdown card with no back in the screenshots stays still. */
  .still { width: min(100%, 300px); }
  .card .still { width: 100%; }
  .way .tag { justify-self: start; font-weight: 900; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; padding: .45rem .8rem; border-radius: 8px; color: var(--ink); }
  .way h3 { font-family: var(--round); font-weight: 700; font-size: 2rem; line-height: 1; }
  .way p { color: var(--mist); font-weight: 700; line-height: 1.5; }
  .way .num { font-family: var(--slab); color: var(--white); }
  .flip-note { font-family: var(--hand); font-size: 1.5rem; color: var(--sun); transform: rotate(-3deg); }

  /* mosaic marquee */
  .mosaic-wrap { background: var(--ink); padding-block: .5rem 4rem; overflow: hidden; }
  .mosaic { display: flex; width: max-content; animation: marquee 150s linear infinite; direction: ltr; }
  .mosaic:hover { animation-play-state: paused; }
  /* Rounded triangles: an SVG mask with a thick round-joined stroke softens the corners. */
  .tri-tile { --tw: clamp(92px, 9.5vw, 136px); flex: none; width: var(--tw); aspect-ratio: 1 / .88; margin-right: calc(var(--tw) * -.47); position: relative;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
  .tri-tile.upt { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 88'%3E%3Cpath d='M50 12 88 78H12Z' fill='%23000' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 88'%3E%3Cpath d='M50 12 88 78H12Z' fill='%23000' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .tri-tile.dn { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 88'%3E%3Cpath d='M12 10H88L50 76Z' fill='%23000' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 88'%3E%3Cpath d='M12 10H88L50 76Z' fill='%23000' stroke='%23000' stroke-width='18' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .tri-tile:hover { transform: translateY(-8px) scale(1.06); z-index: 3; }
  .tri-tile img { width: 100%; height: 100%; object-fit: cover; }
  .tri-tile.solid.dn { background: var(--sky); }
  .tri-tile.solid.upt { background: var(--sun); }
  .tri-tile.solid.pk { background: var(--pink); }

  /* ---------- 3 · FLIP THE CARD ---------- */
  .flipsec { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); padding-block: 5rem; }
  .flip-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
  @media (min-width: 900px) { .flip-grid { grid-template-columns: 1fr 1fr; } }
  .flip-stage { position: relative; display: grid; place-items: center; min-height: 560px; }
  .flip-stage .flip { width: clamp(220px, 26vw, 320px); filter: drop-shadow(0 40px 50px rgba(0,0,0,.45)); }
  .flip-stage .shot { border: 6px solid var(--white); }
  .chip-float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .45rem; background: var(--white); color: var(--ink); font-weight: 900; font-size: .9rem; padding: .55rem .85rem; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.3); animation: floaty 5s ease-in-out infinite; animation-delay: calc(var(--d) * -1s); }
  .chip-float span { font-size: 1.05rem; }
  @keyframes floaty { 50% { transform: translateY(-10px) rotate(var(--rt, 0deg)); } }
  .flipsec .sec-head h2 { font-size: clamp(2rem, 3.9vw, 3.4rem); }
  .back-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1.8rem; }
  .back-list div { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: .8rem .9rem; }
  .back-list b { display: block; font-family: var(--round); font-size: 1.1rem; }
  .back-list small { color: var(--mist); font-weight: 700; font-size: .85rem; }

  /* ---------- 4 · EVERYWHERE (bento) ---------- */
  .every { background: linear-gradient(170deg, #1a8fe0, #0b5fc4 60%, #0a3f9e); padding-block: 5rem; }
  .every .sec-head p { color: #dbeaff; }
  .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; margin-top: 2.6rem; }
  .bx { position: relative; overflow: hidden; border-radius: 28px; padding: 1.4rem; display: flex; flex-direction: column; gap: .6rem; min-height: 280px; }
  .bx h3 { font-family: var(--round); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.02; }
  .bx p { font-weight: 700; line-height: 1.45; font-size: .98rem; max-width: 30rem; }
  .bx .eyebrow { font-size: .7rem; }
  .bx.w4 { grid-column: span 4; } .bx.w3 { grid-column: span 3; } .bx.w2 { grid-column: span 2; }
  .bx.white { background: var(--white); color: var(--ink); }
  .bx.white p { color: #45506b; }
  .bx.yellow { background: var(--sun); color: var(--ink); }
  .bx.ink { background: var(--ink); color: var(--white); }
  .bx.ink p { color: var(--mist); }
  .bx.cream { background: var(--cream); color: var(--ink); }
  .bx.cream p { color: #45506b; }
  @media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bx.w4, .bx.w3, .bx.w2 { grid-column: span 2; } }

  .sync-devices { display: flex; align-items: flex-end; justify-content: space-around; gap: clamp(1rem, 3vw, 2.4rem); margin-top: auto; padding-top: 1.4rem; }
  .sync-devices .d-phone { width: 27%; max-width: 140px; padding: 4px; border-radius: 20px; }
  .sync-devices .d-phone img { border-radius: 16px; }
  .sync-devices .d-tab { width: 45%; max-width: 230px; padding: 7px; border-radius: 18px; background: #10131c; box-shadow: 0 16px 30px rgba(11,23,51,.25); }
  .sync-devices .d-tab img { display: block; width: 100%; aspect-ratio: 2064 / 2752; border-radius: 11px; }
  .sync-line { display: flex; align-items: center; gap: .5rem; font-weight: 900; font-size: .8rem; color: var(--blue-ink); }
  .sync-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulse 1.8s infinite; }
  @keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

  /* Apple Watch drawn in CSS around the real watch screen (422×514). */
  .watch { position: relative; width: min(100%, 190px); margin: auto auto 0; padding-block: 42px; }
  .watch::before, .watch::after { content: ""; position: absolute; left: 17%; right: 17%; height: 24%; background: linear-gradient(90deg, #1a1d25, #2b303b 50%, #1a1d25); }
  .watch::before { top: 0; border-radius: 22% 22% 8% 8% / 40% 40% 10% 10%; }
  .watch::after { bottom: 0; border-radius: 8% 8% 22% 22% / 10% 10% 40% 40%; }
  .watch-case { position: relative; z-index: 1; padding: 7%; border-radius: 30% / 25%; background: linear-gradient(145deg, #3a404d, #0d0f14 60%); box-shadow: 0 22px 40px rgba(0,0,0,.4), inset 0 0 0 2px #4a5160; }
  .watch-case::after { content: ""; position: absolute; right: -4.5%; top: 26%; width: 5%; height: 17%; border-radius: 0 6px 6px 0; background: linear-gradient(90deg, #4a5160, #2b303b); }
  .watch-case img { display: block; width: 100%; aspect-ratio: 422 / 514; border-radius: 23% / 19%; }
  /* The small watch in the iCloud box has no bands. */
  .watch.sm { width: 24%; max-width: 116px; margin: 0; padding-block: 0; align-self: center; }
  .watch.sm::before, .watch.sm::after { display: none; }
  .watch-box .watch { animation: floaty 5s ease-in-out infinite; }
  .screen-peek { margin-top: auto; border-radius: 22px; overflow: hidden; height: 250px; background: #10131c; }
  .screen-peek img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }


  .chat { display: grid; gap: .55rem; margin-top: auto; font-size: .9rem; font-weight: 700; }
  .bub { max-width: 85%; padding: .6rem .85rem; border-radius: 16px; line-height: 1.35; animation: pop .4s cubic-bezier(.3,1.6,.5,1) both; }
  .bub.me { justify-self: end; background: var(--sky); color: var(--ink); border-bottom-right-radius: 4px; }
  .bub.ai { justify-self: start; background: rgba(255,255,255,.12); border-bottom-left-radius: 4px; }
  .bub.typing { letter-spacing: .2em; }
  @keyframes pop { from { transform: scale(.6); opacity: .2; } }

  .android-row { display: flex; gap: 1rem; align-items: flex-end; margin-top: auto; }
  .android-phone { width: 42%; max-width: 150px; flex: none; padding: 5px; border-radius: 26px; background: #10131c; box-shadow: 0 16px 30px rgba(11,23,51,.22); }
  .android-phone img { display: block; width: 100%; aspect-ratio: 881 / 1959; object-fit: cover; border-radius: 21px; }
  .android-row .stores { flex-direction: column; }
  .langs { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; }
  .langs a { background: rgba(11,23,51,.08); border-radius: 999px; padding: .4rem .75rem; font-weight: 800; font-size: .88rem; text-decoration: none; transition: background .2s, transform .2s; }
  .langs a:hover { background: var(--sun); transform: translateY(-2px); }
  .langs a.on { background: var(--ink); color: var(--sun); }

  /* ---------- 5 · MAKE IT YOURS (Deck) ---------- */
  .yours { background: linear-gradient(180deg, var(--cream), var(--cream-2)); color: var(--ink); padding-top: 5rem; }
  .yours-head { text-align: center; display: grid; gap: 1rem; justify-items: center; }
  .yours-head h2 { font-family: var(--slab); font-size: clamp(2.6rem, 7.4vw, 6.4rem); line-height: .95; letter-spacing: -.02em; }
  .mk { position: relative; white-space: nowrap; }
  .mk::before { content: ""; position: absolute; inset: 12% -3% 6%; z-index: -1; border-radius: 10px; transform: rotate(-2deg); }
  .mk.s::before { background: var(--sky); }
  .mk.y::before { background: var(--sun); transform: rotate(1.5deg); }
  .yours-head p { max-width: 36rem; font-size: 1.12rem; line-height: 1.5; font-weight: 700; color: #3a4460; }
  .deck { position: relative; height: clamp(360px, 44vw, 560px); margin-top: 1rem; }
  .card { position: absolute; left: 50%; bottom: -8%; width: clamp(120px, 17vw, 220px); margin-left: calc(clamp(120px, 17vw, 220px) / -2); transform-origin: 50% 120%; transform: rotate(calc(var(--r) * .12)) translateY(20px); transition: transform .9s cubic-bezier(.2,1.2,.3,1) calc(var(--i) * 90ms); }
  .deck.dealt .card { transform: rotate(var(--r)) translateY(0); }
  .deck.dealt .card:hover { transform: rotate(var(--r)) translateY(-34px); transition-delay: 0s; transition-duration: .35s; z-index: 10; }
  .card .shot { border: 6px solid var(--white); box-shadow: 0 18px 40px rgba(11,23,51,.25); }
  .card-back { position: absolute; inset: 0; border-radius: 9% / 4.5%; border: 6px solid var(--white); overflow: hidden; display: grid; place-items: center; box-shadow: 0 18px 40px rgba(11,23,51,.25); background-color: var(--sky);
    background-image: linear-gradient(60deg, rgba(255,255,255,.16) 25%, transparent 25.5%, transparent 74.5%, rgba(255,255,255,.16) 75%), linear-gradient(-60deg, rgba(255,255,255,.16) 25%, transparent 25.5%, transparent 74.5%, rgba(255,255,255,.16) 75%); background-size: 28px 48px; }
  .card-back img { width: 46%; border-radius: 18px; }
  .deck-note { font-family: var(--hand); font-size: 1.7rem; color: #d2463b; transform: rotate(-4deg); position: absolute; right: 6%; top: 6%; z-index: 12; }

  .custom { position: relative; z-index: 3; background: var(--white); color: var(--ink); padding-block: 5rem; }
  .custom-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
  @media (min-width: 900px) { .custom-grid { grid-template-columns: 1.1fr .9fr; } }
  .custom .sec-head p { color: #45506b; }
  .editor-phone { width: min(100%, 300px); margin-inline: auto; padding: 10px; border-radius: 46px; }
  .editor-phone img { border-radius: 37px; }
  .font-show { margin-top: 1.8rem; background: var(--ink); border-radius: 24px; padding: 1.4rem; display: grid; gap: 1rem; }
  .font-word { height: 5.2rem; display: grid; place-items: center; font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--sun); overflow: hidden; }
  .font-word span { white-space: nowrap; display: inline-block; animation: fontIn .5s cubic-bezier(.2,1.4,.4,1); }
  @keyframes fontIn { from { transform: rotateX(90deg) translateY(20px); opacity: 0; } }
  .font-meta { display: flex; justify-content: space-between; color: var(--mist); font-weight: 800; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
  .swatches { display: flex; gap: .5rem; }
  .swatches i { width: 34px; height: 34px; border-radius: 10px; }

  .views { background: var(--cream); color: var(--ink); padding-block: 5rem; }
  .views .sec-head p { color: #45506b; }
  .views-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; margin-top: 2.4rem; align-items: start; }
  .view-card { display: grid; gap: .8rem; }
  .view-card .screen { width: min(100%, 260px); padding: 7px; border-radius: 38px; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
  .view-card .screen img { border-radius: 31px; }
  .view-card:nth-child(1) .screen { transform: rotate(-2deg); }
  .view-card:nth-child(3) .screen { transform: rotate(2deg); }
  .view-card:hover .screen { transform: rotate(0) translateY(-8px); }
  .view-card h3 { font-family: var(--slab); font-size: 1.5rem; }
  .view-card p { color: #45506b; font-weight: 700; line-height: 1.45; }

  /* ---------- 6 · SHARE ---------- */
  .share { background: var(--ink); padding-block: 5rem; }
  .share-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
  @media (min-width: 900px) { .share-grid { grid-template-columns: .9fr 1.1fr; } }
  .share-phones { position: relative; display: flex; justify-content: center; gap: 1rem; }
  .share-phones .p { width: 46%; max-width: 240px; padding: 6px; border-radius: 34px; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
  .share-phones .p img { border-radius: 28px; }
  .share-phones .p:first-child { transform: rotate(-5deg) translateY(20px); }
  .share-phones .p:last-child { transform: rotate(4deg); }
  .share-arrow { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 3; width: 64px; height: 64px; border-radius: 50%; background: var(--sun); color: var(--ink); display: grid; place-items: center; font-size: 1.6rem; font-weight: 900; box-shadow: 0 0 0 8px var(--ink); animation: nudge 1.6s ease-in-out infinite; }
  @keyframes nudge { 50% { transform: translate(-40%, -50%); } }
  .share-opts { display: grid; gap: .8rem; margin-top: 2rem; }
  .opt { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; align-items: center; padding: 1rem 1.1rem; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
  .opt i { grid-row: span 2; font-style: normal; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; }
  .opt b { font-family: var(--round); font-size: 1.2rem; }
  .opt small { color: var(--mist); font-weight: 700; font-size: .9rem; line-height: 1.4; }

  /* ---------- 7 · CTA ---------- */
  .cta { background: linear-gradient(180deg, var(--sun) 0%, #f6dc6a 20%, #9fdcf2 70%, #2fb0f5 100%); padding-block: 6rem 4rem; text-align: center; color: var(--ink); }
  .cta h2 { font-family: var(--round); font-weight: 700; font-size: clamp(3rem, 8.6vw, 7.6rem); line-height: .92; letter-spacing: -.02em; }
  .cta h2 span { color: var(--white); text-shadow: 0 .06em 0 var(--sky-deep); }
  .cta p { font-weight: 800; font-size: 1.15rem; margin-top: 1rem; }
  .cta .stores { justify-content: center; margin-top: 2rem; }
  .cta .mark { width: 96px; height: 96px; border-radius: 26px; margin: 0 auto 1.6rem; box-shadow: 0 16px 30px rgba(11,23,51,.2); animation: spin3d 6s ease-in-out infinite; }
  @keyframes spin3d { 0%, 70% { transform: rotateY(0); } 85%, 100% { transform: rotateY(360deg); } }
  .devices-line { margin-top: 1.4rem; font-weight: 900; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
  footer { background: var(--ink); padding-block: 2rem; }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; font-weight: 700; font-size: .88rem; color: var(--mist); }
  footer nav { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
  footer nav a { text-decoration: none; }
  footer nav a:hover { color: var(--sun); }
  footer .wm-link { margin-right: 0; }
  footer img { height: 24px; width: auto; }

  /* ---------- language pill ---------- */
  .lang { position: relative; }
  .lang-pill { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.5); color: var(--white); border-radius: 999px; padding: .42rem .75rem; font-weight: 800; font-size: .85rem; backdrop-filter: blur(8px); white-space: nowrap; }
  .lang-pill:hover, .lang.open .lang-pill { border-color: var(--sun); }
  .lang-globe { width: 16px; height: 16px; flex: none; }
  .lang-caret { width: 10px; height: 6px; flex: none; transition: transform .2s; }
  .lang.open .lang-caret { transform: rotate(180deg); }
  .lang-word { display: inline-block; min-width: 4.6em; height: 1.25em; line-height: 1.25em; overflow: hidden; text-align: start; }
  .lang-word > span { display: inline-block; }
  .lang-word .entering { animation: langIn .45s cubic-bezier(.2,1.4,.4,1); }
  @keyframes langIn { from { transform: translateY(100%); opacity: 0; } }
  .lang-menu { position: absolute; top: calc(100% + .5rem); inset-inline-end: 0; z-index: 80; min-width: 220px; max-height: 70vh; overflow: auto; display: grid; padding: .5rem; border-radius: 18px; background: var(--white); color: var(--ink); box-shadow: 0 20px 50px rgba(11,23,51,.35); }
  .lang-menu[hidden] { display: none; }
  .lang-menu p { margin: 0; padding: .45rem .7rem .3rem; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #6a7390; }
  .lang-menu a { padding: .55rem .7rem; border-radius: 10px; text-decoration: none; font-weight: 800; }
  .lang-menu a:hover, .lang-menu a:focus-visible { background: #eaf6fd; outline: none; }
  .lang-menu a[aria-current] { background: var(--sun); }
  @media (max-width: 560px) {
    .lang-word { display: none; } .lang-pill { padding: .5rem .6rem; }
    .lang-menu { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 4.2rem); left: 16px; right: 16px; min-width: 0; grid-template-columns: 1fr 1fr; }
    .lang-menu p { grid-column: 1 / -1; }
  }

  /* ---------- per-language type ---------- */
  html[data-lang="hi"] { --round: "Baloo 2", "Fredoka", sans-serif; --body: "Baloo 2", "Nunito", sans-serif; --slab: "Baloo 2", sans-serif; }
  html[data-lang="ar"] { --round: "Baloo Bhaijaan 2", "Fredoka", sans-serif; --body: "Baloo Bhaijaan 2", "Nunito", sans-serif; --slab: "Baloo Bhaijaan 2", sans-serif; }
  html[data-lang="ja"] { --round: "Fredoka", "Dela Gothic One", "Hiragino Sans", sans-serif; --slab: "Dela Gothic One", "Hiragino Sans", sans-serif; --body: "Nunito", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif; }
  html[data-lang="ko"] { --round: "Fredoka", "Jua", "Apple SD Gothic Neo", sans-serif; --slab: "Dela Gothic One", "Jua", sans-serif; --body: "Nunito", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }
  html[data-lang="zh"] { --round: "Fredoka", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; --slab: "Dela Gothic One", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; --body: "Nunito", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
  html:is([data-lang="hi"], [data-lang="ar"]) :is(h1, h2, h3, .band-track, .live b, .tri-tile.word, .way h3, .bx h3, .view-card h3) { font-weight: 800; }
  html[data-lang="zh"] :is(h1, h2, h3, .band-track, .tri-tile.word) { font-weight: 900; }
  /* Scripts that join or have no case: no negative tracking, no forced capitals. */
  html:is([data-lang="hi"], [data-lang="ar"], [data-lang="ja"], [data-lang="ko"], [data-lang="zh"]) :is(h1, h2, h3, .band-track, .tri-tile.word, .eyebrow) { letter-spacing: 0; }
  html[data-lang="ko"] :is(h1, h2, h3, p) { word-break: keep-all; }
  html:is([data-lang="hi"], [data-lang="ar"]) :is(.hero h1, .cta h2) { line-height: 1.15; }
  /* CJK characters are as wide as capitals, so the display sizes step down a notch. */
  html:is([data-lang="ja"], [data-lang="ko"], [data-lang="zh"]) :is(.hero h1, .cta h2) { font-size: clamp(2.3rem, 6.6vw, 6.2rem); line-height: 1.12; }
  html:is([data-lang="ja"], [data-lang="ko"], [data-lang="zh"]) .yours-head h2 { font-size: clamp(2.1rem, 5.6vw, 5rem); line-height: 1.15; }
  html:is([data-lang="ja"], [data-lang="ko"], [data-lang="zh"]) .half h2 { font-size: clamp(2.4rem, 6.4vw, 6.4rem); line-height: 1.02; }
  html:is([data-lang="ja"], [data-lang="ko"], [data-lang="zh"]) .sec-head h2 { font-size: clamp(1.8rem, 4.4vw, 3.4rem); line-height: 1.2; }
  html[data-lang="ja"] :is(h1, h2) { line-break: strict; }
  html:is([data-lang="hi"], [data-lang="ar"]) .half h2 { line-height: 1.05; }

  /* ---------- right-to-left ---------- */
  [dir="rtl"] .band-track { direction: ltr; }
  [dir="rtl"] .band-track span, [dir="rtl"] .tri-tile.word span { direction: rtl; unicode-bidi: isolate; }
  [dir="rtl"] .share-arrow { rotate: 180deg; }
  /* Keep the Latin brand words (and their full stop) together inside Arabic text. */
  [dir="rtl"] :is(.hl, .mk) { unicode-bidi: isolate; }
  [dir="rtl"] .tap-hint { left: auto; right: calc(50% + clamp(170px,24vw,290px)/2 - 40px); }

  /* production extras */
  .skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--sun); color: var(--ink); font-weight: 900; padding: .7rem 1rem; border-radius: 10px; text-decoration: none; }
  .skip:focus { top: 1rem; }
  .store.soon { cursor: default; opacity: .9; }
  .store.soon:hover { transform: none; }
  .signup { margin: 2.6rem auto 0; max-width: min(34rem, 100%); display: grid; gap: .7rem; text-align: left; }
  .signup label { font-weight: 800; font-size: 1rem; text-align: center; }
  .signup-row { display: flex; flex-wrap: wrap; gap: .5rem; background: var(--white); padding: .4rem; border-radius: 18px; box-shadow: 0 10px 30px rgba(11,23,51,.18); }
  .signup input { flex: 1 1 11rem; min-width: 0; border: 0; background: transparent; font: 700 1rem var(--body); color: var(--ink); padding: .6rem .8rem; }
  .signup input:focus { outline: none; }
  .signup-row:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
  .signup button { flex: 1 0 auto; border: 0; border-radius: 14px; background: var(--ink); color: var(--white); font-weight: 900; padding: .7rem 1.1rem; white-space: nowrap; }
  .signup button:disabled { opacity: .7; cursor: default; }
  .signup-note { font-size: .85rem; font-weight: 700; text-align: center; color: var(--ink); }
  .signup-note.good { color: #0f7a3a; }
  .signup-note.bad { color: #b42318; }

  @media (max-width: 700px) {
    .split { grid-template-columns: 1fr; min-height: 0; background: linear-gradient(180deg, #0f6fd6 50%, #f5b914 50%); }
    .half { min-height: 0; padding-block: 3.2rem 5.5rem; }
    .half.up { order: 3; padding-block: 5.5rem 3rem; }
    .split-center { order: 2; position: relative; left: auto; top: auto; transform: none; justify-self: center; width: 190px; margin-block: -4rem; }
    .fan .side { display: none; }
    .tap-hint { left: auto; right: 4%; }
    .flip-stage { min-height: 460px; }
    .chip-float { font-size: .78rem; }
    .nav .wm { height: 22px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
    .watch-stage img.on { opacity: 1; }
  }