/* SonicLingo home page: "real life, with subtitles", in the app's Glacier colors.
   Dark bands are film frames in the app's ink blue with its two glows as out-of-focus lights;
   light bands use the app's ice-blue canvas. Subtitles are set in a pale teal from the app's glow. */
:root {
  --ink: #05263A;          /* app ink: dark bands */
  --ink-deep: #031724;     /* letterbox bars, darkest film tone */
  --canvas: #E7F1F8;       /* app canvas: light bands */
  --canvas-2: #DCEBF5;     /* alternate light band */
  --glow-1: #A9D8F2;       /* app glow 1 */
  --glow-2: #B6EBE6;       /* app glow 2 */
  --accent: #1A7FC8;       /* app accent */
  --teal: #19B5C9;         /* app highlight */
  --cap: #A6EEF2;          /* subtitle color, from glow 2 toward teal */
  --on-dark: #EAF4FA;
  --on-dark-2: rgba(234, 244, 250, 0.72);
  --on-dark-3: rgba(234, 244, 250, 0.5);
  --text: #0B2A3E;
  --text-2: rgba(5, 38, 58, 0.74);
  --text-3: rgba(5, 38, 58, 0.55);
  --line-light: rgba(5, 38, 58, 0.12);
  --line-dark: rgba(234, 244, 250, 0.14);
  --warn: #E07B1F;
  --display: "Inter Tight", ui-rounded, -apple-system, "Segoe UI", sans-serif;
  --scripts: "Inter Tight", "Noto Sans Arabic", "Noto Sans Devanagari", -apple-system, sans-serif;
  --max: 1120px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 17px/1.6 var(--display); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 820px; }
h1, h2, h3 { text-wrap: balance; }
em { font-style: normal; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Opening frame */
.frame {
  position: relative; min-height: 92vh; display: flex; flex-direction: column; color: var(--on-dark); overflow: hidden;
  background:
    radial-gradient(16rem 16rem at 14% 34%, rgba(169, 216, 242, 0.30), transparent 70%),
    radial-gradient(11rem 11rem at 72% 20%, rgba(182, 235, 230, 0.26), transparent 70%),
    radial-gradient(20rem 13rem at 88% 72%, rgba(26, 127, 200, 0.34), transparent 70%),
    radial-gradient(9rem 9rem at 38% 78%, rgba(25, 181, 201, 0.22), transparent 70%),
    linear-gradient(180deg, #0A3350, var(--ink) 45%, var(--ink-deep));
  border-top: 5vh solid var(--ink-deep); border-bottom: 5vh solid var(--ink-deep);
}
.frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 2px, transparent 2px 4px); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; width: 100%; position: relative; z-index: 1; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--on-dark); text-decoration: none; font-weight: 800; font-size: 21px; letter-spacing: -.3px; }
.logo img { width: 34px; height: 26px; }
.logo .lingo { color: var(--cap); }
.top nav { display: flex; align-items: center; gap: 22px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; }
.top nav a { color: var(--on-dark-2); text-decoration: none; font-weight: 600; }
.top nav a:hover { color: var(--cap); }
.live { display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark-3); white-space: nowrap; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }

.hero { position: relative; z-index: 1; width: 100%; padding-block: 6vh 0; }
h1 { margin: 0; max-width: 11ch; font-size: clamp(50px, 9vw, 124px); line-height: .92; font-weight: 800; letter-spacing: -.035em; }
h1 em { color: var(--cap); }
.lead { max-width: 36ch; margin: 20px 0 0; font-size: clamp(18px, 2vw, 21px); color: var(--on-dark-2); }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-weight: 600; font-size: 16px; text-decoration: none; }
.btn svg { width: 19px; height: 19px; }
.btn.main { background: var(--cap); color: var(--ink); cursor: default; }
.btn.ghost { color: var(--on-dark); border: 1px solid var(--on-dark-3); }
.btn.ghost:hover { border-color: var(--cap); color: var(--cap); }

.captions { position: relative; z-index: 1; margin-top: auto; padding: 48px 16px 34px; text-align: center; min-height: 190px; }
.captions .orig, .closing .orig { display: inline-block; padding: 4px 12px; background: rgba(3, 23, 36, 0.6); color: var(--on-dark-2); font: 600 18px/1.4 var(--scripts); }
.captions .cap { display: block; margin-top: 10px; font-size: clamp(26px, 4.2vw, 46px); line-height: 1.15; font-weight: 600; color: var(--cap); text-shadow: 0 2px 0 var(--ink-deep), 0 0 22px rgba(3, 23, 36, .9); }
.captions .where { display: block; margin-top: 12px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--on-dark-3); }
.in { animation: rise .5s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* Shared band styles */
main > section { padding-block: 96px; }
.dark { background: var(--ink); color: var(--on-dark); }
.light { background: var(--canvas); }
.light.alt { background: var(--canvas-2); }
h2 { margin: 0 0 14px; font-size: clamp(34px, 5.4vw, 64px); line-height: .98; font-weight: 800; letter-spacing: -.03em; }
.dark h2 em { color: var(--cap); }
.light h2 em { color: var(--accent); }
.eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--teal); }
.intro { max-width: 60ch; margin: 0 0 36px; font-size: 18px; color: var(--text-2); }
.dark .intro, .dark p { color: var(--on-dark-2); }
.fine { font-size: 14px; color: var(--text-3); }
.dark .fine { color: var(--on-dark-3); }

/* Credits */
.split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.split > div { min-width: 0; }
.split p { max-width: 44ch; }
.all { margin-top: 22px; }
.all summary { cursor: pointer; color: var(--cap); font-weight: 600; }
.all p { font-size: 15px; max-width: none; }
.roll { height: 440px; overflow: hidden; text-align: center; -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
.roll ul { list-style: none; margin: 0; padding: 0; animation: roll 34s linear infinite; }
.roll li { padding: 7px 0; font: 600 24px/1.3 var(--scripts); color: var(--on-dark); }
.roll li span { display: block; font: 600 11px var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--on-dark-3); }
@keyframes roll { to { transform: translateY(-50%); } }

/* Film stills: situation and check your words */
.stills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stills.two { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
.still { margin: 0; padding: 26px 24px 24px; border-radius: 6px; background: linear-gradient(160deg, #0A3350, var(--ink)); color: var(--on-dark); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.still figcaption { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
.still .orig { align-self: flex-start; padding: 3px 10px; background: rgba(3, 23, 36, .6); color: var(--on-dark-2); font: 600 16px var(--scripts); }
.still s { color: var(--on-dark-3); font-size: 16px; }
.still .cap { font-size: 22px; line-height: 1.25; font-weight: 600; color: var(--cap); }
.still .cap b { color: #fff; }
.still .said { font-size: 20px; font-weight: 600; color: var(--on-dark); }
.still .back { color: var(--cap); font-size: 17px; }
.still .back b { color: var(--warn); }
.still.warn { box-shadow: inset 0 0 0 2px var(--warn); }
.still .flag { margin-top: 6px; padding: 8px 12px; border-radius: 6px; background: rgba(224, 123, 31, .16); color: #FFC690; font-size: 14px; font-weight: 600; }
.replies { margin-top: 30px; }
.replies p { margin: 0 0 12px; color: var(--text-2); }
.replies ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.replies li { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line-light); font-weight: 600; color: var(--ink); }

/* Comparison table */
.table-scroll { overflow-x: auto; border-top: 1px solid var(--line-dark); }
table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 16px; }
th, td { padding: 16px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-dark); }
thead th { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-3); font-weight: 600; }
tbody th { width: 30%; font-weight: 600; color: var(--on-dark); }
td { color: var(--on-dark-2); }
.us { color: var(--cap); font-weight: 600; background: rgba(166, 238, 242, .06); }
thead .us { color: var(--cap); }
#compare .fine { margin: 22px 0 0; max-width: 70ch; }

/* Scenes */
.scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 22px; margin-top: 36px; }
.scene { min-width: 0; }
.scene .tag { margin: 0 0 10px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--teal); font-weight: 600; }
.shot { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 6px; padding: 14px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; text-align: center;
  background:
    radial-gradient(7rem 6rem at 25% 30%, rgba(169, 216, 242, .35), transparent 70%),
    radial-gradient(8rem 6rem at 80% 40%, rgba(25, 181, 201, .28), transparent 70%),
    linear-gradient(170deg, #0A3350, var(--ink-deep)); }
.shot .orig { padding: 2px 8px; background: rgba(3, 23, 36, .6); color: var(--on-dark-2); font: 600 14px var(--scripts); }
.shot .cap { color: var(--cap); font-weight: 600; font-size: 18px; text-shadow: 0 1px 0 var(--ink-deep); }
.scene h3 { margin: 16px 0 6px; font-size: 20px; line-height: 1.25; color: var(--ink); }
.scene p:last-child { margin: 0; color: var(--text-2); font-size: 16px; }

/* Features as a plain definition list */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; margin: 30px 0 0; }
.features div { padding-block: 20px; border-top: 1px solid var(--line-light); }
.features dt { font-weight: 800; font-size: 19px; color: var(--ink); margin-bottom: 4px; }
.features dd { margin: 0; color: var(--text-2); font-size: 16px; }

/* FAQ */
.faq details { border-top: 1px solid var(--line-light); padding-block: 18px; }
.faq details:last-child { border-bottom: 1px solid var(--line-light); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; color: var(--ink); }
.faq p { margin: 10px 0 0; color: var(--text-2); max-width: 64ch; }

/* Closing: one last subtitle */
.closing { text-align: center; }
.closing .wrap { display: flex; flex-direction: column; align-items: center; }
.closing h2.cap-line { margin-top: 14px; color: var(--cap); font-weight: 600; letter-spacing: -.02em; }
.closing .intro { margin: 0 auto; }
.closing .cta { justify-content: center; }
.closing .fine { margin: 16px 0 0; }

/* Footer */
.foot { background: var(--ink-deep); color: var(--on-dark-3); font-size: 14px; padding-block: 28px 40px; }
.foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 18px; }
.foot a { color: var(--on-dark-2); text-decoration: none; }
.foot a:hover { color: var(--cap); }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 24px; }
  .roll { height: 280px; }
  .stills, .scenes, .features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .top nav .hide-small, .live { display: none; }
  .frame { min-height: 0; border-top-width: 24px; border-bottom-width: 24px; }
  .stills, .stills.two, .scenes, .features { grid-template-columns: 1fr; }
  main > section { padding-block: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .roll ul, .live::before, .in { animation: none; }
}

/* Hero kicker and the smart-models pipeline */
.kicker { margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--teal); }
.pipeline { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: step; }
.pipeline li { position: relative; min-width: 0; padding: 26px 28px 4px 0; border-top: 2px solid var(--line-light); counter-increment: step; }
.pipeline li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--canvas), 0 0 14px var(--teal); }
.pipeline li:not(:last-child)::after { content: "→"; position: absolute; top: -17px; right: 22px; color: var(--teal); font-size: 20px; }
.pipeline .step { font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); }
.pipeline .step::before { content: counter(step) " · "; color: var(--text-3); }
.pipeline h3 { margin: 8px 0 6px; font-size: 21px; line-height: 1.25; color: var(--ink); }
.pipeline p { margin: 0; color: var(--text-2); font-size: 16px; max-width: 34ch; }
#ai .fine { margin: 0; }
@media (max-width: 900px) {
  .pipeline { grid-template-columns: 1fr; }
  .pipeline li { padding: 22px 0 18px 26px; border-top: 0; border-left: 2px solid var(--line-light); }
  .pipeline li::before { top: 26px; left: -7px; }
  .pipeline li:not(:last-child)::after { display: none; }
}

/* Privacy and other text pages: a short film frame, then the text on the light canvas */
.frame.short { min-height: 0; padding-bottom: 56px; }
.frame.short h1 { max-width: none; font-size: clamp(44px, 7vw, 88px); }
.legal { padding-block: 56px 96px; }
.legal .wrap { max-width: 780px; }
.legal .summary { padding: 22px 24px; border-radius: 6px; background: linear-gradient(160deg, #0A3350, var(--ink)); color: var(--on-dark); font-size: 18px; }
.legal .summary p { margin: 0; color: var(--on-dark-2); }
.legal .summary strong { color: var(--cap); }
.legal h2 { margin: 44px 0 10px; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.legal p, .legal li { color: var(--text-2); }
.legal ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.legal strong { color: var(--text); }