/* The homepage and the information pages: one header, the four-colour ribbon, the content, one footer.
   Built from design/mockups/web-home.html; colours come from tokens.css. */
@font-face { font-family: Literata; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/literata-normal.woff2) format('woff2') }
@font-face { font-family: Literata; font-style: italic; font-weight: 200 900; font-display: swap; src: url(/fonts/literata-italic.woff2) format('woff2') }

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--surface); color: var(--ink); font: 15px/1.5 var(--f-ui); min-height: 100vh; display: flex; flex-direction: column }
main { flex: 1 }
button, input { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
h1, h2, h3 { text-wrap: balance }
img { max-width: 100% }
[hidden] { display: none !important }

.s-in {
  max-width: 1240px; margin-inline: auto;
  padding-inline: max(clamp(18px, 4vw, 56px), env(safe-area-inset-left, 0px)) max(clamp(18px, 4vw, 56px), env(safe-area-inset-right, 0px));
}

/* The app's four list colours as one ribbon, right under the top menu and above the footer. */
.s-nav { position: relative; border-bottom: 1px solid var(--line); background: var(--surface) }
.s-nav::after, .foot::before { content: ""; display: block; height: 5px; background: linear-gradient(90deg, var(--t-ot) 0 25%, var(--t-nt) 25% 50%, var(--t-ps) 50% 75%, var(--t-pr) 75% 100%) }
.s-nav::after { position: absolute; left: 0; right: 0; bottom: -1px }
.s-nav-in { display: flex; align-items: center; gap: 14px; padding-block: 16px }
.logo { display: flex; align-items: center; gap: 10px; font: 600 18px/1 var(--f-read); color: var(--ink); text-decoration: none; margin-right: auto }
.logo img { width: 34px; height: 34px; border-radius: 9px; display: block }
.s-nav a.lnk { color: var(--muted); text-decoration: none; font-size: 14.5px; padding: 8px 4px }
.s-nav a.lnk:hover { color: var(--ink) }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  padding: 0 20px; border-radius: 12px; border: 0; background: var(--btn); color: var(--btn-ink);
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: color-mix(in srgb, var(--btn) 86%, var(--surface)) }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line) }
.btn.ghost:hover { background: var(--sel) }
.btn.small { min-height: 38px; padding: 0 14px; font-size: 14px }
/* The light / dark switch at the end of the top menu. */
.theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer }
.theme-btn:hover { background: var(--sel) }
.theme-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.theme-btn .i-sun, .theme-btn.is-dark .i-moon { display: none }
.theme-btn.is-dark .i-sun { display: block }

/* ---------- homepage ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; padding-block: 48px }
.eyebrow { font: 600 12px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px }
.eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-red); display: inline-block }
.hero h1 { font: 500 clamp(32px, 4.4vw, 50px)/1.08 var(--f-read); margin: 14px 0; letter-spacing: -.01em }
.hero p.lead { font-size: 17px; line-height: 1.55; color: var(--muted); margin: 0 0 22px; max-width: 34em }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px }
/* Google's official Albanian badge, unaltered; the image carries its own clear space,
   pulled back so the badge lines up with the text above it. */
.badge { display: inline-block; line-height: 0; border-radius: 10px; margin-left: -13px }
.badge img { display: block; height: 76px; width: auto; max-width: 100% }
.promise { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink) }
.promise li { display: flex; align-items: center; gap: 6px }
.promise li + li::before { content: "·"; color: var(--muted); margin-right: 8px }
.iphone { margin: 18px 0 0; font-size: 14.5px; color: var(--muted) }
.iphone a { color: var(--accent); font-weight: 600 }

/* Two real phones with the app's own screens, in a phone's true 1080 x 2400 shape: Sot in front, a verse in every translation behind. */
.phone-wrap { position: relative; width: min(390px, 100%); height: 500px; margin-inline: auto }
.phone {
  position: absolute; bottom: 0; width: 225px; aspect-ratio: 1080 / 2400; border-radius: 34px;
  border: 8px solid var(--brand-tile); background: var(--brand-tile); overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-tile) 78%, var(--badge-ink)), 0 30px 50px -26px var(--shade);
}
.phone.ph-front { right: 0; z-index: 2 }
.phone.ph-back { left: 0; bottom: 34px; z-index: 1; transform: scale(.94); transform-origin: bottom left; opacity: .97 }
.phone img { display: block; width: 100%; height: 100%; border-radius: 26px }
.phone::before { content: ""; position: absolute; top: 8px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--brand-tile); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-tile) 88%, var(--badge-ink)); z-index: 2 }

.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-block: 34px; border-top: 1px solid var(--line) }
.feat h2 { font: 600 18px/1.25 var(--f-read); margin: 0 0 6px }
.feat p { margin: 0; color: var(--muted); font-size: 14.5px }
/* Each feature gets the same-size icon tile, in one of the app's list colours, so the headlines line up. */
.ficon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; margin-bottom: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent) }
.ficon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }

.study { background: color-mix(in srgb, var(--t-nt) 7%, var(--surface)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.study-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding-block: 40px }
.study h2 { font: 500 clamp(26px, 3vw, 34px)/1.15 var(--f-read); margin: 12px 0 }
.study p { color: var(--muted); margin: 0 0 20px; font-size: 15.5px; max-width: 32em }
/* Install: the browser's own window on computers, three steps on iPhone; hidden on Android (the Play app) and once installed. */
.study [hidden] { display: none !important }
.inst-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; position: relative }
.inst-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }
.study p.inst-note { font-size: 13.5px; margin: 10px 0 0 }
.inst-pop { position: absolute; left: 0; top: calc(100% + 10px); z-index: 5; width: min(360px, 100%); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px var(--shade); padding: 16px 18px }
.inst-pop h3 { margin: 0 0 8px; padding-right: 30px; font: 600 16px/1.3 var(--f-read) }
.inst-pop ol { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.55 }
.inst-pop li { margin-bottom: 4px }
.inst-pop .share { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }
.inst-pop .x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 17px }
.inst-pop .x:hover { background: var(--sel) }
.preview { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; box-shadow: 0 18px 40px -28px var(--shade) }
.pv-bar { height: 26px; background: var(--chrome); display: flex; align-items: center; gap: 5px; padding: 0 10px }
.pv-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: block }
.pv-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); min-height: 190px }
.pv-text { padding: 16px 20px; font: 13px/1.6 var(--f-read) }
.pv-text .vn { font: 600 .6em/0 var(--f-ui); color: var(--muted); vertical-align: .6em; margin-right: .2em }
.pv-text .on { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); padding-left: 6px; border-radius: 3px; display: block }
.pv-panel { border-left: 1px solid var(--line); padding: 14px 16px; font-size: 12px }
.pv-panel b { font: 600 13px var(--f-read); display: block; margin-bottom: 8px }
.pv-panel .ver { color: var(--muted); font-weight: 600; font-size: 10.5px }
.pv-panel .ver span { color: var(--accent); font-weight: 400; margin-left: 5px }
.pv-panel p { margin: 2px 0 10px; font: 12px/1.5 var(--f-read); color: var(--ink) }

.today { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-block: 22px; font-size: 14px; color: var(--muted) }
.today b { color: var(--ink); font-weight: 600 }
.today a { color: inherit; text-decoration: none }
.today a:hover { color: var(--ink); text-decoration: underline }
.today a i { display: inline-block; width: 9px; height: 13px; margin-right: 7px; vertical-align: -1px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%) }
.today-list { display: flex; flex-wrap: wrap; gap: 6px 18px }

/* ---------- footer ---------- */
.foot { background: var(--surface); color: var(--ink); border-top: 1px solid var(--line) }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-block: 22px 18px }
.f-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font: 600 16px/1 var(--f-read); margin-right: auto }
.f-logo img { width: 28px; height: 28px; border-radius: 8px; display: block; box-shadow: 0 0 0 1px var(--line) }
.f-links { display: flex; flex-wrap: wrap; gap: 6px 20px }
.f-links a { color: var(--muted); text-decoration: none; font-size: 13.5px; padding: 3px 0 }
.f-links a:hover, .f-links a[aria-current] { color: var(--ink) }
.foot-bottom { display: flex; justify-content: center; text-align: center; padding-block: 12px 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted) }

/* ---------- information pages: one readable column ---------- */
.page { padding-block: 44px 64px }
.page-in { max-width: 46rem }
.page h1 { font: 500 clamp(30px, 4vw, 42px)/1.1 var(--f-read); margin: 0 0 10px }
.page .updated { color: var(--muted); font-size: 13.5px; margin: 0 0 22px }
.page .lead { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0 0 28px }
.page h2 { font: 600 20px/1.3 var(--f-read); margin: 30px 0 8px }
.page p, .page li { font-size: 15.5px; line-height: 1.65 }
.page p { margin: 0 0 12px }
.page ul { margin: 0 0 12px; padding-left: 20px }
.page li { margin-bottom: 6px }
.page a:not(.btn) { color: var(--accent) }
.short { list-style: none; padding: 16px 18px !important; border: 1px solid var(--line); border-radius: 12px; background: var(--bg) }
.short li { padding-left: 26px; position: relative }
.short li::before { content: "✓"; position: absolute; left: 0; color: var(--t-ps); font-weight: 700 }
.tcards { display: grid; gap: 16px; margin: 0 0 26px }
.tcard { border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; background: var(--surface); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: start }
.tcard .code { display: inline-block; font: 700 12px var(--f-ui); letter-spacing: .06em; border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; margin-bottom: 8px }
.page .tcard h2 { margin: 0 0 10px; font: 600 20px/1.3 var(--f-read) }
.tcard dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 14.5px }
.tcard dt { color: var(--muted) }
.tcard dd { margin: 0 }
.tcard .go { align-self: center; white-space: nowrap }

@media (max-width: 900px) {
  .hero, .study-in { grid-template-columns: minmax(0, 1fr) }
  .feats { grid-template-columns: minmax(0, 1fr); gap: 18px }
  .s-nav a.lnk { display: none }
}
@media (max-width: 760px) {
  .pv-body { grid-template-columns: minmax(0, 1fr) }
  .pv-panel { border-left: 0; border-top: 1px solid var(--line) }
}
@media (max-width: 640px) {
  .f-logo { margin-right: 0; flex-basis: 100% }
  .tcard { grid-template-columns: minmax(0, 1fr) }
  .tcard .go { justify-self: start }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 30px }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important } }