@font-face { font-family: "Readex Pro"; src: url("assets/fonts/readex-pro-latin-wght-normal.woff2") format("woff2"); font-weight: 160 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex Pro"; src: url("assets/fonts/readex-pro-arabic-wght-normal.woff2") format("woff2"); font-weight: 160 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --ink: #111111; --sun: #FFD43B; --cream: #F2EDE2; --paper: #F7F3EA; --sky: #CDE8F2; --pink: #E6007E; --shell: #1F9D6A;
  --surface: #FFFFFF; --muted: #4F4A40; --line: #111111; --on-sun: #111111;
  --hard: 6px 6px 0; --hard-sm: 4px 4px 0;
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 0L28 14L14 28L0 14Z' fill='none' stroke='%23111' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {:root:not([data-theme=light]) {
    --ink: #F2EDE2; --cream: #1E1C17; --paper: #12110E; --surface: #1C1A15; --muted: #B5AD9C; --line: #F2EDE2;
    --sun: #E2BD4C; --sky: #16303A;
    --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 0L28 14L14 28L0 14Z' fill='none' stroke='%23E2BD4C' stroke-opacity='.16' stroke-width='1.2'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme=dark] {
    --ink: #F2EDE2; --cream: #1E1C17; --paper: #12110E; --surface: #1C1A15; --muted: #B5AD9C; --line: #F2EDE2;
    --sun: #E2BD4C; --sky: #16303A;
    --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 0L28 14L14 28L0 14Z' fill='none' stroke='%23E2BD4C' stroke-opacity='.16' stroke-width='1.2'/%3E%3C/svg%3E");
    color-scheme: dark;
  }


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 "Readex Pro", system-ui, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

/* Language: show only the chosen one */
html[lang=ar] .en, html[lang=en] .ar { display: none !important; }

/* Header */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1.2rem; padding: .7rem clamp(16px, 4vw, 40px);
  background: var(--cream); border-bottom: 3px solid var(--line); }
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-size: 1.5rem; }
.brand .in { font-weight: 300; }
.links { display: flex; gap: 1.3rem; margin-inline-start: auto; font-weight: 600; }
.links a { text-decoration: none; }
.links a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--pink); }
.lang { font: inherit; font-weight: 700; cursor: pointer; background: var(--surface); color: var(--ink); border: 3px solid var(--line);
  box-shadow: var(--hard-sm) var(--line); padding: .3rem .9rem; }
[dir=rtl] .lang { box-shadow: -4px 4px 0 var(--line); }
@media (max-width: 760px) { .links { display: none; } .lang { margin-inline-start: auto; } }

main > section { padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 40px); max-width: 1240px; margin: 0 auto; }
h1, h2, h3 { line-height: 1.1; margin: 0; }
h2 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; margin-block-end: 2rem; letter-spacing: -.01em; }
[dir=rtl] h1, [dir=rtl] h2 { letter-spacing: 0; line-height: 1.3; }

/* Buttons */
.btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; text-decoration: none;
  font-weight: 700; padding: .75rem 1.3rem; background: var(--surface); color: var(--ink); border: 3px solid var(--line);
  box-shadow: var(--hard-sm) var(--line); transition: transform .08s, box-shadow .08s; }
[dir=rtl] .btn { box-shadow: -4px 4px 0 var(--line); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--line); }
[dir=rtl] .btn:hover { transform: translate(2px, -2px); box-shadow: -6px 6px 0 var(--line); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
.btn.primary { background: #111; color: #fff; border-color: #111; box-shadow: var(--hard-sm) var(--sun); }
[dir=rtl] .btn.primary { box-shadow: -4px 4px 0 var(--sun); }
@media (prefers-color-scheme: dark) {:root:not([data-theme=light]) .btn.primary { background: var(--sun); color: #111; border-color: var(--sun); box-shadow: var(--hard-sm) #F2EDE2; } }
:root[data-theme=dark] .btn.primary { background: var(--sun); color: #111; border-color: var(--sun); box-shadow: var(--hard-sm) #F2EDE2; }

.btn.big { font-size: 1.15rem; padding: 1rem 1.6rem; }
.btn small { font-weight: 500; font-size: .8rem; opacity: .8; }
.btn small:empty { display: none; }
.cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-start: 1.8rem; }

/* Hero */
.hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
main > .hero { max-width: none; background: var(--sun) var(--lattice); border-bottom: 3px solid var(--line); color: #111;
  padding-inline: max(clamp(16px, 4vw, 40px), calc((100% - 1240px) / 2 + 40px)); }
@media (prefers-color-scheme: dark) {:root:not([data-theme=light]) main > .hero { background: #1A1813 var(--lattice); color: var(--ink); border-bottom-color: var(--sun); } }
:root[data-theme=dark] main > .hero { background: #1A1813 var(--lattice); color: var(--ink); border-bottom-color: var(--sun); }

.tag-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; margin: 0 0 1.2rem; }
.tag-row .free-tag { margin: 0; }
.lib-pill { display: inline-flex; align-items: baseline; gap: .35rem; font-weight: 700; font-size: .9rem; background: #111; color: #fff;
  border: 3px solid #111; padding: .25rem .8rem; text-decoration: none; box-shadow: 4px 4px 0 var(--pink); }
.lib-pill b { color: #FFD43B; font-size: 1.05rem; }
.lib-pill:hover span, .lib-pill:focus-visible span { text-decoration: underline; text-decoration-thickness: 2px; }
.free-tag { display: inline-block; font-weight: 700; font-size: .9rem; background: #fff; color: #111; border: 3px solid #111; padding: .25rem .8rem; margin: 0 0 1.2rem; }
.hero h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); font-weight: 700; letter-spacing: -.02em; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 34em; margin: 1.3rem 0 0; }
.hero .btn:not(.primary) { background: #fff; color: #111; border-color: #111; box-shadow: var(--hard-sm) #111; }
.hero-art { position: relative; padding-block-end: 70px; }
.frame { margin: 0; border: 3px solid var(--line); background: var(--surface); box-shadow: var(--hard) var(--line); }
[dir=rtl] .frame { box-shadow: -6px 6px 0 var(--line); }
.hero .frame { border-color: #111; box-shadow: 10px 10px 0 #111; }
[dir=rtl] .hero .frame { box-shadow: -10px 10px 0 #111; }
@media (prefers-color-scheme: dark) {:root:not([data-theme=light]) .hero .frame { border-color: var(--sun); box-shadow: 10px 10px 0 var(--sun); }:root:not([data-theme=light])[dir=rtl] .hero .frame { box-shadow: -10px 10px 0 var(--sun); } }
:root[data-theme=dark] .hero .frame { border-color: var(--sun); box-shadow: 10px 10px 0 var(--sun); }:root[data-theme=dark][dir=rtl] .hero .frame { box-shadow: -10px 10px 0 var(--sun); }

.tilt { transform: rotate(1.5deg); }
[dir=rtl] .tilt { transform: rotate(-1.5deg); }
.hero-tempo { position: absolute; inset-block-end: -10px; inset-inline-start: -30px; width: clamp(150px, 18vw, 230px); }
[dir=rtl] .hero-tempo { transform: scaleX(-1); }
.bubble { position: absolute; inset-block-end: 70px; inset-inline-start: clamp(130px, 16vw, 210px); margin: 0; background: #fff; color: #111;
  border: 3px solid #111; padding: .45rem .8rem; font-weight: 700; box-shadow: var(--hard-sm) #111; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-tempo { inset-inline-start: -8px; width: 140px; }
  .bubble { inset-inline-start: 120px; inset-block-end: 40px; font-size: .9rem; }
}

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.step { background: var(--surface); border: 3px solid var(--line); box-shadow: var(--hard) var(--line); padding: 1.6rem; position: relative; }
[dir=rtl] .step { box-shadow: -6px 6px 0 var(--line); }
.step .num { display: inline-grid; place-items: center; width: 52px; height: 52px; font-weight: 700; font-size: 1.2rem;
  background: var(--sun); color: #111; border: 3px solid var(--line); margin-block-end: 1rem; }
.step:nth-child(3) .num { background: var(--shell); color: #fff; }
.step h3 { font-size: 1.4rem; margin-block-end: .5rem; }
.step p { margin: 0; color: var(--muted); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.hood { margin-block: 3rem 1rem; max-width: 72rem; }
.hood h3 { font-size: 1.5rem; margin-block-end: 1.2rem; }
.hood dl { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 2.5rem; }
.hood dl > div { border-inline-start: 4px solid var(--sun); padding-inline-start: 1rem; }
.hood dt { font-weight: 700; font-size: 1.1rem; margin-block-end: .3rem; }
.hood dd { margin: 0; color: var(--muted); max-width: 34rem; }
.hood p { margin-block: 1.4rem 0; font-weight: 700; }
@media (max-width: 760px) { .hood dl { grid-template-columns: 1fr; } }

/* Features */
.feature { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-block: 3rem 4.5rem; }
.feature.flip { grid-template-columns: 1.2fr .8fr; }
.feature.flip .feature-text { order: 2; }
.feature h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-block-end: .7rem; }
.feature p { margin: 0; font-size: 1.1rem; color: var(--muted); }
@media (max-width: 860px) { .feature, .feature.flip { grid-template-columns: 1fr; } .feature.flip .feature-text { order: 0; } }

.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 1.2rem; }
.card { background: var(--surface); border: 3px solid var(--line); padding: 1.3rem 1.4rem; }
.card h3 { font-size: 1.2rem; margin-block-end: .45rem; }
.card h3::before { content: ""; display: inline-block; width: .7em; height: .7em; background: var(--pink); border: 2px solid var(--line);
  margin-inline-end: .5rem; vertical-align: .05em; }
.card p { margin: 0; color: var(--muted); }

.private { display: flex; align-items: center; gap: 2rem; margin-block: 4.5rem; background: var(--sky); border: 3px solid var(--line);
  box-shadow: var(--hard) var(--line); padding: clamp(1.2rem, 3vw, 2.2rem); }
[dir=rtl] .private { box-shadow: -6px 6px 0 var(--line); }
.private img { width: 180px; flex: none; }
.private h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-block-end: .5rem; }
.private p { margin: 0; }
@media (max-width: 700px) { .private { flex-direction: column; text-align: center; } }

/* Download */
main > .download { max-width: none; background: var(--cream); border-block: 3px solid var(--line);
  padding-inline: max(clamp(16px, 4vw, 40px), calc((100% - 1240px) / 2 + 40px)); }
.download h2 { margin-block-end: .4rem; }
.download .sub { margin: 0 0 2rem; color: var(--muted); font-size: 1.1rem; }
.os-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.os { display: flex; flex-direction: column; gap: .6rem; background: var(--surface); border: 3px solid var(--line); padding: 1.3rem; }
.os h3 { font-size: 1.4rem; }
.os p { margin: 0; color: var(--muted); flex: 1; }
.os .btn { align-self: flex-start; }
.os.yours { background: var(--sun); color: #111; box-shadow: var(--hard) var(--line); }
[dir=rtl] .os.yours { box-shadow: -6px 6px 0 var(--line); }
.os.yours p { color: #111; }
.os.yours::before { content: "Your computer"; align-self: flex-start; font-size: .8rem; font-weight: 700; background: #111; color: #fff; padding: .1rem .5rem; }
html[lang=ar] .os.yours::before { content: "جهازك"; }
.note { margin-block-start: 2rem; max-width: 52em; }
.note p { margin: .4rem 0; }

/* Courses */
.courses { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.courses h2 { margin-block-end: 1rem; }
.courses p { color: var(--muted); font-size: 1.1rem; margin: 0; }
.yaml { margin: 0; background: #111; color: #F2EDE2; border: 3px solid var(--line); box-shadow: var(--hard) var(--sun);
  padding: 1.4rem 1.6rem; overflow-x: auto; font: 15px/1.7 "JetBrains Mono", ui-monospace, monospace; text-align: left; }
.yaml .k { color: var(--sun); }
@media (max-width: 860px) { .courses { grid-template-columns: 1fr; } }

/* Footer */
.foot { background: #111; color: #F2EDE2; padding: 3rem clamp(16px, 4vw, 40px) 2rem; overflow: hidden; }
.foot-top { display: flex; align-items: center; gap: 1rem; max-width: 1240px; margin: 0 auto; }
.foot-top img { width: 130px; }
[dir=rtl] .foot-top img { transform: scaleX(-1); }
.foot-top p { font-size: 1.2rem; margin: 0; }
.word { font-size: clamp(5rem, 22vw, 17rem); font-weight: 700; line-height: .9; margin: 1rem auto .5rem; max-width: 1240px; color: var(--sun);
  letter-spacing: -.04em; text-align: start; direction: ltr; }
[dir=rtl] .word { text-align: right; }
.word .in { font-weight: 300; color: #F2EDE2; }
.foot .small { max-width: 1240px; margin: 0 auto; font-size: .95rem; color: #CFC7B6; }
.foot { border-top: 3px solid var(--line); }

/* Guide page */
.guide-head { display: flex; align-items: center; gap: clamp(16px, 4vw, 48px); max-width: 1240px; margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) clamp(16px, 4vw, 40px) 1rem; }
.guide-head img { width: clamp(140px, 18vw, 220px); flex: none; }
[dir=rtl] .guide-head img { transform: scaleX(-1); }
.guide-head h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
.toc { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: inline-flex; gap: .4rem; text-decoration: none; font-weight: 700; padding: .4rem .8rem; border: 3px solid var(--line); background: var(--surface); }
.toc a::before { content: counter(toc, decimal-leading-zero); color: var(--muted); }
.toc a:hover { background: var(--sun); color: #111; }
main > .chapter { display: grid; grid-template-columns: auto 1fr 1.1fr; gap: clamp(16px, 3vw, 40px); align-items: start;
  padding-block: clamp(40px, 6vw, 72px); border-bottom: 3px solid var(--line); scroll-margin-top: 80px; }
.chapter .num { display: inline-grid; place-items: center; width: 60px; height: 60px; font-weight: 700; font-size: 1.3rem;
  background: var(--sun); color: #111; border: 3px solid var(--line); box-shadow: var(--hard-sm) var(--line); }
[dir=rtl] .chapter .num { box-shadow: -4px 4px 0 var(--line); }
.chapter h2 { margin-block-end: 1rem; font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.chapter ul, .chapter ol { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: .7rem; }
.chapter li { color: var(--muted); }
.chapter li b { color: var(--ink); }
.chapter code { font-family: "JetBrains Mono", monospace; font-size: .9em; background: var(--cream); padding: 0 .3rem; }
.chapter .frame img { width: 100%; }
.chapter-tempo { width: 220px; justify-self: center; }
.chapter .shots { display: grid; gap: 18px; align-content: start; }
@media (max-width: 960px) {
  main > .chapter { grid-template-columns: auto 1fr; }
  .chapter .frame, .chapter-tempo, .chapter .shots { grid-column: 1 / -1; }
}
@media (max-width: 560px) { main > .chapter { grid-template-columns: 1fr; } .guide-head { flex-direction: column; align-items: flex-start; } }
main > .chapter { max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
main > .chapter:last-child { border-bottom: 0; }

/* Open a link (open.html) */
main.opener { min-height: 70vh; padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 40px); }
.open-card { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start;
  background: var(--surface); border: 3px solid var(--line); box-shadow: 10px 10px 0 var(--sun); padding: clamp(24px, 4vw, 48px); }
[dir=rtl] .open-card { box-shadow: -10px 10px 0 var(--sun); }
.open-tempo { width: 100%; }
.open-body h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); overflow-wrap: anywhere; }
[dir=rtl] .open-body h1 { line-height: 1.35; }
.open-body .lead { margin-block-start: .9rem; color: var(--muted); }
.open-steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.4rem; }
.open-steps p { margin: .6rem 0; max-width: 36em; }
.open-steps .small, .private-note { font-size: .92rem; color: var(--muted); }
.open-get { margin-block-start: 2.2rem; padding-block-start: 1.6rem; border-top: 3px dashed var(--line); }
.open-get h2 { font-size: 1.5rem; margin-block-end: .5rem; }
.open-get p { margin: .4rem 0; max-width: 36em; }
.open-get .cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-block-start: 1rem; }
.private-note { margin-block-start: 2rem; }
@media (max-width: 700px) { .open-card { grid-template-columns: 1fr; } .open-tempo { width: 130px; } }
button.btn { font: inherit; font-weight: 700; cursor: pointer; }

/* Latest version, downloads and visits */
.stats { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.stats li { display: flex; align-items: baseline; gap: .4rem; background: var(--surface); color: var(--ink); border: 3px solid var(--line);
  padding: .35rem .8rem; font-size: .95rem; }
.stats b { font-size: 1.25rem; }
.stats li.courses { background: #111; color: #fff; border-color: #111; box-shadow: var(--hard-sm) var(--pink); }
.stats li.courses b { color: #FFD43B; }
.stats li.courses a { display: flex; align-items: baseline; gap: .4rem; color: inherit; text-decoration: none; }
.stats li.courses a:hover span { text-decoration: underline; text-decoration-thickness: 3px; }
.nav-count { display: inline-block; min-width: 1.6em; padding: 0 .35em; margin-inline-start: .15em; background: var(--sun); color: var(--on-sun);
  border: 2px solid var(--line); font-size: .8em; line-height: 1.5; text-align: center; }
/* What's new */
.whatsnew { border-top: 3px solid var(--line); }
.wn-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; margin-block-end: 1rem; }
.wn-head h2 { margin: 0; }
.wn-date { color: var(--muted); margin: 0; }
.wn-notes { background: var(--surface); border: 3px solid var(--line); box-shadow: var(--hard) var(--line); padding: 1.2rem 1.6rem; max-width: 900px; text-align: left; }
.wn-notes > ul { padding-inline-start: 1.1rem; margin: 0; }
.wn-notes li { margin: .45rem 0; } .wn-notes ul ul { margin: .3rem 0; }
.wn-notes p { margin: .5rem 0; }
.wn-notes code { font-family: "JetBrains Mono", monospace; font-size: .9em; background: var(--cream); padding: 0 .25rem; }
.wn-more { display: flex; flex-wrap: wrap; gap: .8rem; margin-block-start: 1.4rem; }
.wn-lang { color: var(--muted); margin: 0 0 .8rem; }

/* Light / dark switch */
:root[data-theme=light] { color-scheme: light; }
.theme { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; cursor: pointer; background: var(--surface); color: var(--ink);
  border: 3px solid var(--line); box-shadow: var(--hard-sm) var(--line); }
[dir=rtl] .theme { box-shadow: -4px 4px 0 var(--line); }
.theme svg { width: 20px; height: 20px; }
.theme .sun { display: none; }
:root[data-theme=dark] .theme .sun { display: block; } :root[data-theme=dark] .theme .moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .theme .sun { display: block; } :root:not([data-theme=light]) .theme .moon { display: none; } }
@media (max-width: 760px) { .theme { margin-inline-start: auto; } .theme + .lang { margin-inline-start: 0; } }
.stats li[hidden], [hidden] { display: none !important; }
.chip-new { font-size: .7rem; vertical-align: middle; border: 2px solid currentColor; padding: 0 .35rem; margin-inline-start: .3rem; }

/* On your phone */
.phone { padding-block: 4rem 3rem; }
.phone-head { max-width: 46rem; margin-block-end: 2rem; }
.phone-head p { font-size: 1.1rem; color: var(--muted); margin: 0; }
.phones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px); }
.phones li { display: flex; flex-direction: column; gap: .35rem; }
.phones img { width: 100%; height: auto; border: 3px solid var(--line); border-radius: 22px; background: var(--surface);
  box-shadow: var(--hard-sm) var(--line); margin-block-end: .6rem; }
[dir=rtl] .phones img { box-shadow: -4px 4px 0 var(--line); }
.phones b { font-size: 1.05rem; }
.phones li > span { color: var(--muted); font-size: .95rem; }
.phone-facts { margin: 2.5rem 0 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 2.5rem; max-width: 72rem; }
.phone-facts dt { font-weight: 800; margin-block-end: .2rem; }
.phone-facts dd { margin: 0; color: var(--muted); }
.phone .cta { display: flex; flex-wrap: wrap; gap: .8rem; }
@media (max-width: 860px) {
  /* Swipe through the screens, two at a time */
  .phones { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-block-end: .8rem; padding-inline: 2px 8px; }
  .phones li { scroll-snap-align: start; }
  .phone-facts { grid-template-columns: 1fr; }
}
.chapter .phone-shot { max-width: 300px; justify-self: center; border-radius: 22px; overflow: hidden; }

/* "New in 1.24" on a feature, and the small note under it */
.new-badge { display: inline-block; margin: 0 0 .7rem !important; padding: .1rem .6rem; font-size: .85rem !important; font-weight: 800;
  background: var(--pink, #E6007E); color: #fff !important; border: 2px solid var(--ink, #111); }
.feature .small-note { margin-top: .8rem; font-size: .95rem; }