/* Owner-approved tile design, shared across all five landing locales. One white page with no colour bands: every section is a
   centred heading followed by rounded tiles, and sections are separated only by the same white
   space. A tile is either a photograph or a pale panel holding an actual app screen.
   The legacy filename and body class are retained to preserve the approved design. */
.english-preview { --tile: #f5f5f7; --r: 28px; --gap: 20px; --band: clamp(88px, 11vw, 152px); --shot: clamp(150px, 17vw, 216px); }
html[lang="en"] .english-preview main h1 { font-size: clamp(44px, 5.2vw, 76px); line-height: 0.98; }
html[lang="en"] .english-preview main h1 span { display: block; }
html[lang="en"] .english-preview main h2 { font-size: clamp(36px, 3.8vw, 56px); }
.english-preview main h3 { font-family: var(--font); font-size: 1.1875rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }

.ep-sec { padding-top: var(--band); scroll-margin-top: 68px; }
.ep-hero { padding-top: clamp(48px, 6vw, 88px); }
.ep-head { max-width: 50rem; margin: 0 auto clamp(36px, 4vw, 56px); text-align: center; }
.ep-head p { max-width: 40rem; margin: 20px auto 0; color: var(--ink-soft); }
.ep-head p + p { margin-top: 10px; }
.ep-head .hero__actions { justify-content: center; }
.ep-head .notes { margin-inline: auto; text-align: center; }
.ep-head .notes li { display: block; }
.ep-head .notes li > span:first-child { margin-right: 6px; }

/* Tiles */
.ep-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ep-span-4 { grid-column: span 4; }
.ep-span-5 { grid-column: span 5; }
.ep-span-6 { grid-column: span 6; }
.ep-span-7 { grid-column: span 7; }
.ep-span-8 { grid-column: span 8; }
.ep-tile { position: relative; min-width: 0; margin: 0; overflow: hidden; border-radius: var(--r); background: var(--tile); }
.ep-photo { min-height: 320px; }
.ep-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, center); }
.ep-photo--wide { aspect-ratio: 2 / 1; }
.ep-photo--seoul-commuter { --focus: 80% 32%; --ratio: 1 / 1; }
.ep-photo--morning-routine { --ratio: 4 / 5; }
.ep-photo--card-portfolio { --focus: 70% center; --ratio: 4 / 3; }
.ep-photo--evening-journey { --ratio: 3 / 2; }
.ep-photo--private-record { --ratio: 3 / 2; }

.ep-panel { padding: clamp(28px, 3.4vw, 48px); }
.ep-panel__text p { margin-top: 8px; color: var(--ink-soft); }
.ep-panel--side { display: grid; align-items: center; gap: clamp(20px, 3vw, 40px); grid-template-columns: minmax(0, 1fr) var(--shot); }
.ep-panel--side .route--vertical { margin-top: 0; }
.ep-panel--stack { display: grid; align-content: space-between; justify-items: center; gap: 32px; }
.ep-panel--stack .ep-panel__text { justify-self: start; }
.ep-panel--stack .screen { width: var(--shot); }
.ep-panel--copy { display: grid; align-content: center; }
.english-preview .screen__image { aspect-ratio: auto; border: 1px solid rgb(13 27 54 / 12%); border-radius: 22px; background: #ffffff; box-shadow: 0 18px 40px -18px rgb(13 27 54 / 30%); }
.english-preview .screen figcaption { margin-top: 12px; text-align: center; }
.english-preview .screen figcaption .screen__platform { color: var(--ink-soft); }
.ep-sample { margin-top: 20px; color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.55; text-align: center; }

/* Journeys */
.ep-features .features { margin: clamp(36px, 4vw, 56px) 0; gap: 28px var(--gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ep-qualifier { display: block; margin-top: 8px; font-size: var(--fs-small); line-height: 1.5; }

/* Maps: two panels sized so both wide screens share one height. */
.ep-maps { display: flex; align-items: stretch; gap: var(--gap); }
.ep-maps .ep-panel { padding: clamp(16px, 2vw, 28px); }
.ep-map--android-fold { flex: 1.0526 1 0; }
.ep-map--ios-duo { flex: 1.2848 1 0; }
.english-preview .ep-maps .screen__image { border-radius: 14px; }
.ep-notes { display: grid; gap: 28px var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(36px, 4vw, 56px); }
.ep-notes p { max-width: 34rem; margin-top: 8px; color: var(--ink-soft); }
.ep-notes + .ep-sample { margin-top: 40px; }
.ep-regions { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.ep-regions li { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-small); font-weight: 650; line-height: 1.4; }

/* Records, Premium, questions and the closing tile */
.ep-premium { margin-top: var(--gap); }
.ep-premium .premium-summary { display: grid; gap: 10px var(--gap); grid-template-columns: 1fr 2fr; margin: 0; padding: 0; border: 0; background: none; }
.ep-premium .premium-summary h3 { grid-row: span 2; }
.ep-premium .premium-summary p { margin: 0; }
.ep-premium .premium-summary p:last-child { font-size: var(--fs-small); }
.english-preview .questions-section { padding-block: var(--band); border: 0; background: none; }
.english-preview .cta { width: min(100% - 2 * var(--gutter), var(--wrap)); min-height: clamp(460px, 42vw, 560px); margin: 0 auto var(--band); border-radius: var(--r); }
.english-preview .cta .wrap { width: auto; margin: 0; padding-inline: clamp(24px, 4vw, 56px); }
.english-preview .site-footer { border-top: 1px solid var(--line); background: #ffffff; }

@media (max-width: 900px) {
  .english-preview { --r: 22px; --gap: 16px; }
  .ep-grid > * { grid-column: 1 / -1; }
  .ep-photo { min-height: 0; aspect-ratio: var(--ratio, 3 / 2); }
  .ep-photo--wide { aspect-ratio: var(--ratio, 3 / 2); }
  .ep-panel--side { grid-template-columns: minmax(0, 1fr) clamp(112px, 32vw, 200px); }
  .ep-panel--stack .screen { width: clamp(150px, 46vw, 220px); }
  .english-preview .screen__image { border-radius: 14px; }
  .ep-features .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ep-maps { display: grid; }
  .ep-notes, .ep-premium .premium-summary { grid-template-columns: minmax(0, 1fr); }
  .english-preview .cta { min-height: 700px; }
}
@media (max-width: 520px) {
  .ep-panel--side { justify-items: center; gap: 32px; grid-template-columns: minmax(0, 1fr); }
  .ep-panel--side > :first-child { justify-self: start; }
  .ep-panel--side .screen { width: clamp(150px, 46vw, 220px); }
  .ep-features .features { grid-template-columns: minmax(0, 1fr); }
}