/* Keykick landing page.
   The page is set on the iOS keyboard's own grey, with white keycaps as the one structural device.
   The demo phone in the hero is the loud element; everything else stays quiet. */

:root {
  --grey: #E2E3E7;      /* keyboard background */
  --grey-deep: #CDD0D6; /* special keys, rules */
  --cap: #FFFFFF;       /* keycaps */
  --ink: #23252F;
  --muted: #62666F;
  --start: #FF6A3D;     /* brand gradient, same as the arrow in the app */
  --end: #FF2D7A;
  --bubble: #0A84FF;
  --shadow: 0 1px 0 rgba(35, 37, 47, 0.28);
  /* Rubik: soft and round, and it covers Latin, Hebrew and Cyrillic in one family. */
  --display: "Rubik", system-ui, sans-serif;
  --text: "Rubik", system-ui, sans-serif;
  /* Inside the phone everything uses Apple's own system font, as on a real iPhone. */
  --ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --ar: "Noto Sans Arabic", var(--text);
  --measure: 34rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grey);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
}

[lang="ar"] { font-family: var(--ar); }

h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 4.8vw, 3.75rem); line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.125rem); line-height: 1.15; }
h3 { font-size: 1.0625rem; line-height: 1.3; font-weight: 500; }
p { margin: 0; }

:focus-visible { outline: 3px solid var(--bubble); outline-offset: 3px; border-radius: 6px; }

main > section { padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 5vw, 4rem); max-width: 72rem; margin: 0 auto; }

/* Header */
.top, .foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 72rem; margin: 0 auto; padding: 1.25rem clamp(1.25rem, 5vw, 4rem);
}
.logo { display: inline-flex; align-items: center; gap: .6rem; font: 600 1.125rem var(--display); color: var(--ink); text-decoration: none; }
.logo-key {
  display: inline-grid; place-items: center; width: 2.5rem; height: 1.6rem; border-radius: 1rem;
  background: linear-gradient(135deg, var(--start), var(--end));
}
.logo-key svg, .arrow svg { width: 1rem; height: 1rem; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.logo.small { font-size: 1rem; }
.tagline { font: 400 1rem var(--text); color: var(--muted); margin-inline-start: .35rem; }
@media (max-width: 520px) { .tagline { display: none; } }
.soon { font-size: .9375rem; color: var(--muted); }
.top-end { display: flex; align-items: center; gap: 1.25rem; }

/* Language switcher */
.lang { position: relative; }
.lang summary {
  list-style: none; display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  font-size: .9375rem; padding: .45rem .8rem; border-radius: .5rem; background: var(--cap); box-shadow: var(--shadow);
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.lang ul {
  position: absolute; inset-inline-end: 0; top: calc(100% + .4rem); z-index: 10; list-style: none; margin: 0; padding: .35rem;
  min-width: 9rem; background: var(--cap); border-radius: .75rem; box-shadow: 0 12px 32px rgba(35, 37, 47, .18);
}
.lang a { display: block; padding: .5rem .75rem; border-radius: .45rem; color: var(--ink); text-decoration: none; }
.lang a:hover { background: var(--grey); }
.lang a[aria-current="page"] { color: var(--end); font-weight: 500; }

/* Hero */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 6vw, 5rem); align-items: center;
  padding-top: clamp(1.5rem, 4vw, 3rem) !important;
}
.hero-copy { max-width: var(--measure); }

/* Above the headline: the same message cycling through the six languages, as a sent chat bubble. */
.hello { margin: 0 0 1.75rem; height: 3.1rem; display: flex; align-items: center; }
.hello-bubble {
  display: inline-block; padding: .6rem 1.1rem; border-radius: 1.4rem; border-end-end-radius: .4rem;
  background: var(--bubble); color: #fff; font-size: 1.25rem; font-weight: 500; white-space: nowrap;
  transition: opacity .28s ease, transform .28s ease;
}
.hello-bubble.out-going { opacity: 0; transform: translateY(-8px) scale(.96); }
.hello-bubble.in-coming { opacity: 0; transform: translateY(8px) scale(.96); transition: none; }
.hello-bubble[lang="ar"] { font-family: var(--ar); }
.lede { margin-top: 1.5rem; font-size: 1.1875rem; }
.works-in { margin-top: 1rem; color: var(--muted); }

.play {
  margin-top: 2rem; display: inline-flex; align-items: center; gap: .7rem;
  font: 500 1rem var(--text); color: var(--ink); background: var(--cap);
  border: 0; border-radius: .55rem; padding-block: .85rem; padding-inline: 1rem 1.25rem; box-shadow: var(--shadow); cursor: pointer;
}
.play svg { width: 1.1rem; height: 1.1rem; fill: var(--end); }
[dir="rtl"] .play svg { transform: scaleX(-1); }
.play:active { background: var(--grey-deep); }

/* Phone */
.phone-wrap { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.phone {
  position: relative; width: 340px; height: 690px; border-radius: 54px; overflow: hidden;
  background: #F2F2F7; border: 10px solid #1C1D22;
  box-shadow: 0 30px 60px -20px rgba(35, 37, 47, .45), 0 0 0 1px #3A3B42;
  display: flex; flex-direction: column; font-family: var(--ios);
}
.island { position: absolute; top: 10px; left: 50%; width: 96px; height: 28px; margin-left: -48px; border-radius: 20px; background: #000; z-index: 3; }

.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #fff; }
.chat-head { padding: 52px 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 3px; border-bottom: 1px solid #ECECEF; background: #F8F8FA; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(160deg, #A9ADB8, #7D828E); color: #fff; display: grid; place-items: center; font-weight: 600; }
.who { font-size: 12px; color: var(--ink); }
.thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 12px 12px 8px; overflow: hidden; }
.msg { max-width: 78%; padding: 7px 12px; border-radius: 18px; font-size: 15px; line-height: 1.3; }
.msg.in { align-self: flex-start; background: #E9E9EB; color: #000; }
.msg.out { align-self: flex-end; background: var(--bubble); color: #fff; }
.msg.new { animation: pop .35s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes pop { from { transform: translateY(14px) scale(.92); opacity: 0; } }
.field { margin: 0 10px 8px; min-height: 34px; border: 1px solid #DADADE; border-radius: 18px; padding: 6px 12px; font-size: 15px; color: #000; }

/* The keyboard, drawn like ours */
.kb { position: relative; background: #D5D7DD; padding: 8px 0 30px; }
.bar { display: flex; align-items: center; gap: 8px; padding: 0 8px 10px; }
.tone, .send { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.chip { font-size: 10.5px; font-weight: 600; color: var(--end); background: rgba(255, 106, 61, .18); padding: 2px 8px; border-radius: 9px; }
.cap { font-size: 7.5px; color: #8A8D96; white-space: nowrap; }
.compose { flex: 1; min-width: 0; min-height: 34px; display: flex; align-items: center; gap: 1px; font: 400 14px/1.25 var(--ios); color: #000; overflow: hidden; }
.compose #compose-text { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
.caret { width: 2px; height: 18px; background: var(--end); flex: none; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.arrow { display: grid; place-items: center; width: 40px; height: 27px; border-radius: 14px; background: linear-gradient(135deg, var(--start), var(--end)); transition: transform .15s; }
.arrow.press { transform: scale(.88); }
.arrow.busy svg { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.keys { display: grid; gap: 9px; padding: 0 3px; direction: ltr; } /* layouts are defined left to right, as in the app */
.krow { display: flex; justify-content: center; gap: var(--gap, 5px); }
.k {
  position: relative; flex: 0 0 auto; width: 26.5px; height: 40px; border-radius: 6px; background: var(--cap); box-shadow: var(--shadow);
  display: grid; place-items: center; font-size: 19px; color: #000; line-height: 1;
}
.k.sp { background: #ABB0BA; font-size: 13px; }
.k.space { flex: 1; font-size: 12px; color: #8A8D96; }
.k.wide { width: 38px; }
.k.ret { width: 72px; }
.k.down::after {
  content: attr(data-c); position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 48px; border-radius: 9px; background: var(--cap); box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  display: grid; place-items: center; font-size: 26px; z-index: 2;
}
.k.space.down, .k.sp.down { background: #9399A4; }
.k svg { width: 19px; height: 19px; fill: none; stroke: #000; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.picker {
  position: absolute; inset-inline-end: 8px; bottom: 100%; margin-bottom: -40px; width: 176px; padding: 10px; border-radius: 16px;
  background: rgba(255, 255, 255, .96); box-shadow: 0 10px 30px rgba(0, 0, 0, .22); font-size: 12px; z-index: 4;
}
.picker > span { display: block; color: #8A8D96; font-size: 11px; margin: 0 0 6px 4px; }
.picker ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.picker li { padding: 6px 8px; border-radius: 8px; }
.picker li.on { background: rgba(255, 45, 122, .12); color: var(--end); font-weight: 600; }

.caption { max-width: 340px; min-height: 3em; text-align: center; font-size: 1rem; color: var(--ink); }
.scenes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.scenes button {
  font: 500 .875rem var(--text); color: var(--muted); background: transparent; border: 0; border-radius: .45rem; padding: .45rem .7rem; cursor: pointer;
}
.scenes button[aria-selected="true"] { background: var(--cap); color: var(--ink); box-shadow: var(--shadow); }

/* Steps: a real sequence, so numbered */
.steps h2 { max-width: 24ch; }
.steps ol { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.steps li { display: grid; gap: .6rem; align-content: start; }
.n {
  width: 2.75rem; height: 2.75rem; border-radius: .5rem; background: var(--cap); box-shadow: var(--shadow);
  display: grid; place-items: center; font: 500 1.25rem var(--display); margin-bottom: .4rem;
}
.steps li p { color: var(--muted); max-width: 30ch; }

/* Tones */
.tones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.tones-copy p { margin-top: 1rem; color: var(--muted); max-width: 30ch; }
.tones-demo { background: var(--cap); border-radius: 1.25rem; padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow); }
.source { font-size: 1.25rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }
.chips button {
  font: 600 .875rem var(--text); color: var(--muted); background: var(--grey); border: 0; border-radius: 999px; padding: .4rem .95rem; cursor: pointer;
}
.chips button[aria-checked="true"] { color: var(--end); background: rgba(255, 106, 61, .16); }
.tones-demo .out { font: 500 clamp(1.25rem, 2.4vw, 1.625rem)/1.35 var(--display); min-height: 4.2em; text-align: start; }

/* Languages: the top rows of each layout, as keycaps */
.langs-lede { margin-top: 1rem; color: var(--muted); max-width: var(--measure); }
.rows { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.rows li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: 1rem; }
.rows .name { font-size: .9375rem; color: var(--muted); }
.row { display: flex; gap: clamp(.2rem, 1vw, .4rem); flex-wrap: nowrap; }
.row b {
  flex: 1 1 0; min-width: 0; max-width: 3.1rem; aspect-ratio: 0.86; border-radius: .45rem;
  background: var(--cap); box-shadow: var(--shadow); display: grid; place-items: center;
  font-weight: 400; font-size: clamp(1.05rem, 2.2vw, 1.5rem);
}

/* Fix */
.fix > p { margin-top: 1rem; color: var(--muted); max-width: var(--measure); }
.before-after { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; max-width: 46rem; }
.before-after p { font-size: clamp(1.1rem, 2vw, 1.4rem); text-align: start; }
.before-after [lang="ar"] { font-family: var(--ar); }
.was { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255, 45, 122, .7); text-decoration-thickness: 2px; }
.now { color: var(--ink); }

/* Details */
.details-lede { margin-top: 1rem; color: var(--muted); }
.details dl { margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
.details dt { font-weight: 600; }
.details dd { margin: .35rem 0 0; color: var(--muted); max-width: 36ch; }

/* Privacy */
.privacy p { margin-top: 1rem; max-width: var(--measure); }

.foot { color: var(--muted); font-size: .9375rem; border-top: 1px solid var(--grey-deep); padding-top: 2rem; padding-bottom: 3rem; flex-wrap: wrap; }

/* Small screens */
@media (max-width: 900px) {
  .hero, .tones { grid-template-columns: 1fr; }
  .phone-wrap { justify-self: center; }
  .steps ol, .details dl { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 520px) {
  .soon { display: none; }
  .rows li { grid-template-columns: 1fr; gap: .4rem; }
  .before-after { grid-template-columns: 1fr; }
  .phone { transform: scale(.92); transform-origin: top center; margin-bottom: -55px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Footer links and the legal pages */
.foot-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--ink); }
.legal { max-width: 44rem; margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 2rem) 4rem; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.legal .meta { margin-top: .5rem; color: var(--muted); }
.legal h2 { font-size: 1.25rem; margin: 2.25rem 0 .6rem; }
.legal p, .legal li { line-height: 1.65; }
.legal p + p { margin-top: .8rem; }
.legal ul { margin: .6rem 0 0; padding-inline-start: 1.25rem; display: grid; gap: .5rem; }
.legal a { color: var(--bubble); }
.legal .note { margin-top: 2.5rem; color: var(--muted); font-size: .9375rem; }