/* THE HOME HERO BUILT AROUND TRY SPELLY (owner, 29-09-26; the owner's Claude Design "Home Hero", design/try-spelly/final/).
   Loaded by public/landing-v2.html only and scoped to .hero-try: the 13 translated landings share landing-v2.css
   and keep their own hero. */

.hero-try { padding: 36px 0 72px; }
.hero-try .wrap {
  display: grid; gap: 18px 64px; align-items: start;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kicker" "h1" "box" "lede" "cta" "badges" "facts";
}
/* On a computer the copy is centred against the box (the design's align-items: center): two empty rows, one above
   and one below, share the box's extra height. On a phone the box sits between the headline and the lede. */
@media (min-width: 960px) {
  .hero-try .wrap {
    /* The box gives way on smaller computers (440 at 1000px wide, 520 from 1300px) so the copy is never a sliver. */
    grid-template-columns: minmax(0, 1fr) clamp(440px, 40vw, 520px); column-gap: clamp(36px, 4vw, 64px); align-items: start;
    grid-template-rows: 1fr auto auto auto auto auto auto 1fr;
    grid-template-areas: ". box" "kicker box" "h1 box" "lede box" "cta box" "badges box" "facts box" ". box";
    row-gap: 22px;
  }
  .hero-try .ht-box { margin-top: 150px; }
}
.hero-try .ht-kicker { grid-area: kicker; margin: 0; color: var(--ink); }
.hero-try .ht-h1 { grid-area: h1; margin: 0; color: var(--ink); font-size: clamp(40px, 4.4vw, 58px); line-height: 1.04; }
.hero-try .ht-lede { grid-area: lede; margin: 0; }
.hero-try .ht-cta { grid-area: cta; min-height: 66px; display: flex; align-items: center; }
.hero-try .ht-badges { grid-area: badges; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero-try .ht-facts { grid-area: facts; }
.hero-try .ht-box { grid-area: box; position: relative; min-width: 0; }

/* Start free: the second choice on this hero; the box's sample is the first. */
.ht-start { display: inline-flex; align-items: center; justify-content: center; min-height: 60px; box-sizing: border-box; padding: 0 34px;
  background: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink);
  font-family: var(--display); font-size: 21px; font-weight: 800; color: var(--ink); text-decoration: none; }
.ht-start:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.ht-start:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.ht-badges .store-badge img { display: block; height: 44px; width: auto; }
.ht-badges .store-badge.is-gp img { height: 65px; margin-inline: -9px; }
.ht-cert { display: inline-flex; align-items: center; gap: 8px; height: 44px; box-sizing: border-box; padding: 0 14px 0 8px;
  background: #fff; border: 2px solid var(--ink); border-radius: 10px; color: var(--ink); text-decoration: none; }
.ht-cert img { display: block; width: 38px; height: auto; }
.ht-cert > span { display: flex; flex-direction: column; line-height: 1.1; }
.ht-cert > span > span { font-size: 11px; color: var(--soft, #4A3A7A); }
.ht-cert b { font-size: 14px; font-weight: 700; }

/* The facts are links: a light tint, a "›" that slides in, a focus ring, a faint arrow on touch screens. */
.ht-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); max-width: 560px; overflow: hidden;
  background: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); }
.ht-facts a { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 30px 12px 16px;
  color: var(--ink); text-decoration: none; border-inline-start: 2px dashed rgba(122, 111, 168, .45); transition: background .15s; }
.ht-facts a:first-child { border-inline-start: 0; }
.ht-facts b { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.05; }
.ht-facts a > span { font-size: 15px; line-height: 1.25; color: var(--soft, #4A3A7A); }
.ht-facts a.is-devices > span { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.ht-facts a.is-devices svg { flex: none; }
/* The live countries cell (owner, 01-10-26; the number is written in by app/l/[lang]). */
.ht-facts a.is-reach > span { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.ht-facts a.is-reach b { font-size: 24px; }
.ht-facts i { position: absolute; inset-inline-end: 10px; top: 50%; margin-top: -12px; font-style: normal; font-size: 22px; line-height: 24px; font-weight: 700;
  color: var(--ink); opacity: 0; transform: translateX(-3px); transition: opacity .15s, transform .15s; }
.ht-facts a:hover, .ht-facts a:active { background: #FFF9E5; }
.ht-facts a:hover i, .ht-facts a:focus-visible i { opacity: 1; transform: translateX(0); }
.ht-facts a:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ink); }
@media (hover: none) { .ht-facts i { opacity: .45; transform: none; } }
[dir="rtl"] .ht-facts i { transform: translateX(3px) scaleX(-1); }
[dir="rtl"] .ht-facts a:hover i, [dir="rtl"] .ht-facts a:focus-visible i { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) { .ht-facts i, .ht-facts a { transition: none; } }

/* The box and Pip on its top edge. --try-h IS A FIRST GUESS: the box says how tall it is (try:size, read by
   try-hero.js), because its first screen takes the height its text needs at this width and in this language. The
   guesses below are what the common widths measured on 09-10-26, so the card rarely moves when the answer comes. */
.ht-box { --try-h: 612px; }
.ht-box iframe { position: relative; z-index: 1; display: block; width: 100%; height: var(--try-h); border: 0; background: transparent; overflow: hidden; }
/* THE CARD IS THERE BEFORE THE BOX IS (owner, 09-10-26: "the hero take 2 seconds to load"). The box is a page of its
   own in an iframe: it starts loading only once this page is being read, then needs its own styles and fonts, so
   the hero stood with a hole in it for a moment (a second or two on a slow line). This is the same card, empty,
   drawn by this page at once: same size, edge and shadow, with three soft bars where the content will be. The box
   paints over it. Nothing to read, so nothing to translate. */
.ht-box::before {
  content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: calc(var(--try-h) - 8px); box-sizing: border-box;
  background-color: #fff; border: 3px solid var(--ink); border-radius: 24px; box-shadow: 0 5px 0 var(--ink);
  background-image: linear-gradient(#EFEBFA, #EFEBFA), linear-gradient(#F4F1FB, #F4F1FB), linear-gradient(#F4F1FB, #F4F1FB), linear-gradient(#F4F1FB, #F4F1FB), linear-gradient(#F4F1FB, #F4F1FB);
  background-repeat: no-repeat;
  background-size: 52% 22px, calc(100% - 44px) 150px, calc(100% - 44px) 78px, calc(100% - 44px) 78px, calc(100% - 44px) 78px;
  background-position: 22px 30px, 22px 76px, 22px 262px, 22px 352px, 22px 442px;
}
.ht-pip { position: absolute; left: 0; bottom: 100%; width: 155px; height: 194px; margin-bottom: -6px; pointer-events: none; z-index: 3; }
.ht-pip-in { position: absolute; inset: 0; }
/* The still pose is framed tighter than the animation (his drawing fills 86% of it): 94% of the box width matches. */
.ht-pip img { position: absolute; left: 50%; bottom: 0; width: 94%; height: auto; transform: translateX(-50%); transition: opacity .2s; }
.ht-pip canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .2s; }
/* Tapping Pip (the design's pokePip): a round target over his body only, never the empty room above him. */
.ht-pip-poke { position: absolute; left: 50%; bottom: 0; width: 64%; height: 64%; transform: translateX(-50%); padding: 0; border: 0;
  border-radius: 45%; background: transparent; cursor: pointer; pointer-events: auto; }
.ht-pip-poke:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.ht-pip img.is-poked { animation: htPipHop .7s ease-out 1; }
@keyframes htPipHop { 0% { transform: translateX(-50%) translateY(0) } 30% { transform: translateX(-50%) translateY(-14px) rotate(-4deg) } 55% { transform: translateX(-50%) translateY(0) } 75% { transform: translateX(-50%) translateY(-5px) } 100% { transform: translateX(-50%) translateY(0) } }

.ht-box.is-loaded::before { display: none; }
/* A phone: the short headline, and the top of the card with Pip inside the first screen. */
@media (max-width: 599px) {
  .hero-try { padding: 16px 0 44px; }
  .hero-try .wrap { gap: 14px; }
  .hero-try .ht-kicker { font-size: 12px; }
  .hero-try .ht-h1 { font-size: 31px; line-height: 1.08; }
  .hero-try .ht-h1-tail { display: none; }
  .hero-try .ht-box { margin-top: 96px; }
  .hero-try .ht-lede { font-size: 17px; }
  .ht-box { --try-h: 658px; }
  .ht-start { flex: 1; min-height: 56px; font-size: 19px; border-radius: 16px; box-shadow: 0 5px 0 var(--ink); }
  .ht-badges .store-badge img { height: 44px; }
  .ht-badges .store-badge.is-gp img { height: 65px; margin-inline: -9px; }
  .ht-facts a { padding: 10px 22px 10px 12px; }
  .ht-facts b { font-size: 22px; }
  .ht-facts a > span { font-size: 13px; }
  .ht-facts a.is-devices > span { flex-direction: column; align-items: flex-start; gap: 3px; font-size: 13px; }
  .ht-facts a.is-reach > span { font-size: 13px; }
  .ht-facts a.is-reach b { font-size: 20px; }
}
@media (min-width: 600px) and (max-width: 959px) { .hero-try .ht-box { margin-top: 150px; max-width: 560px; } }

/* THE TRANSLATED LANDINGS (owner, 29-09-26; scripts/patch_landing_try_hero.py). Japanese and Korean break between
   words. Burmese and Thai sit tall on the line, so their headline is smaller with more line height, and the Burmese
   box is taller (components/try/try-box.tsx, HERO_H_TALL, plus the 8px the card's shadow takes). */
html[lang="ja"] .hero-try { word-break: auto-phrase; }
html[lang="ko"] .hero-try { word-break: keep-all; }
html[lang="my"] .hero-try .ht-h1, html[lang="th"] .hero-try .ht-h1 { font-size: clamp(30px, 3.1vw, 42px); line-height: 1.3; }
html[lang="fr"] .ht-box, html[lang="es"] .ht-box, html[lang="de"] .ht-box, html[lang="it"] .ht-box, html[lang="pt"] .ht-box { --try-h: 639px; }
html[lang="ru"] .ht-box { --try-h: 676px; }
html[lang="my"] .ht-box { --try-h: 690px; }
@media (max-width: 599px) {
  html[lang="my"] .hero-try .ht-h1, html[lang="th"] .hero-try .ht-h1 { font-size: 24px; line-height: 1.35; }
  html[lang="fr"] .ht-box, html[lang="de"] .ht-box { --try-h: 695px; }
  html[lang="es"] .ht-box { --try-h: 699px; }
  html[lang="it"] .ht-box { --try-h: 715px; }
  html[lang="pt"] .ht-box { --try-h: 740px; }
  html[lang="ru"] .ht-box { --try-h: 752px; }
  html[lang="ja"] .ht-box { --try-h: 670px; }
  html[lang="my"] .ht-box { --try-h: 738px; }
}