/* Public pages (landing, blog, legal). Same tokens as the app. Sharp section breaks, no waves or gradients. */
.is-public{background:var(--bg)}
.pub-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
.pub-wrap.narrow>*{max-width:760px}
@media (min-width:760px){.pub-wrap{padding:0 28px}}
.pub-top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:var(--bw) solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.pub-top .pub-wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.pub-brand{display:inline-flex;align-items:center;min-height:44px;margin:0;text-decoration:none}
.pub-brand .logo{height:38px;width:auto}
.pub-foot .pub-brand .logo{height:34px}
.pub-nav{display:flex;align-items:center;gap:4px}
.pub-nav form{display:contents}
.pub-nav .langmenu ul{left:auto;right:0}
.pub-link{min-width:44px;min-height:44px;border:0;background:none;cursor:pointer;font:800 14px/1 var(--f-body);color:var(--muted)}
.pub-login{display:inline-flex;align-items:center;padding:0 8px;color:var(--primary-text,var(--primary));text-decoration:none}
.pub-login:hover{text-decoration:underline}
.pub-anchors{display:none}
@media (min-width:760px){
  .pub-anchors{display:flex;gap:4px;margin-left:auto;margin-right:12px}
  .pub-anchors a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-weight:800;font-size:15px;color:var(--ink);text-decoration:none}
  .pub-anchors a:hover{color:var(--primary-text,var(--primary))}
}
/* Landing (templates/public/landing.html). Every landing class starts with lp-: app.css is loaded on public pages too. */
.lp-kicker{margin:0 0 10px;font:800 15px/1.3 var(--f-body);color:var(--primary-text,var(--primary))}
.lp-hero{padding:28px 0 44px}
.lp-hero-grid{display:grid;gap:24px;align-items:start}
@media (min-width:900px){
  .lp-hero{padding:32px 0 72px}
  .lp-hero-grid{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"top phone" "bottom phone";column-gap:56px;row-gap:0}
  .lp-hero-top{grid-area:top;align-self:end}
  .lp-hero-bottom{grid-area:bottom;align-self:start}
  .lp-hero-grid .lp-phone{grid-area:phone;align-self:center}
}
.lp-hero h1{margin:0 0 14px;font:800 clamp(34px,8.6vw,58px)/1.04 var(--f-display);letter-spacing:-.01em;max-width:16ch;text-wrap:balance}
.lp-sub{margin:0 0 22px;font-size:19px;line-height:1.5;color:var(--muted);max-width:40ch}
.lp-ctas{display:flex;flex-direction:column;align-items:flex-start}
.lp-btn-lg{min-height:58px;padding:0 28px;font-size:16px;white-space:nowrap}
@media (max-width:559px){.lp-ctas .lp-btn-lg{width:100%}}
.lp-fud{margin:10px 0 0;font-size:14px;color:var(--muted)}
.lp-counter{margin:20px 0 0;font-size:15px;color:var(--muted)}
.lp-counter b{color:var(--ink)}
.lp-more{margin:6px 0 0}
.lp-more a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:800;color:var(--primary-text,var(--primary))}
/* Hero phone, drawn in CSS. Every size is a multiple of --u (1px on a 316px device) so the device scales as one piece.
   The whole screen is always shown (no max-height crop: it cut the keyboard mid-row). Screen 1:2 = status bar + screenshot 300x576.
   Fixed colours: the screenshot is the light app, the device is graphite in both themes. Rail = graphite frame, black glass bezel inside,
   1px light chamfer between them (edge highlight), 1px dark outer edge, flat bottom shadow like every card. No blur, no glow. */
.lp-phone{--pw:clamp(300px,33vw,372px);--u:calc(var(--pw) / 316);--rail:#57524A;--rail-dark:#3A3631;position:relative;margin:0;justify-self:center;width:var(--pw);padding:calc(8 * var(--u));border:calc(3.5 * var(--u)) solid var(--rail);border-radius:calc(50 * var(--u));background:#141311;box-shadow:inset 0 0 0 1px #8A8274,0 0 0 1px var(--rail-dark),0 calc(12 * var(--u)) 0 var(--line)}
.lp-phone::before,.lp-phone::after{content:"";position:absolute;right:calc(-6.5 * var(--u));width:calc(3 * var(--u));border-radius:0 calc(2 * var(--u)) calc(2 * var(--u)) 0;background:var(--rail);box-shadow:1px 0 0 var(--rail-dark)}
.lp-phone::before{top:calc(112 * var(--u));height:calc(42 * var(--u))}
.lp-phone::after{top:calc(172 * var(--u));height:calc(78 * var(--u))}
.lp-screen{position:relative;display:block;overflow:hidden;padding-top:calc(26 * var(--u));border-radius:calc(38.5 * var(--u));background:#FFFCF1}
.lp-screen::before{content:"";position:absolute;z-index:1;top:calc(8 * var(--u));left:50%;width:calc(12 * var(--u));height:calc(12 * var(--u));margin-left:calc(-6 * var(--u));border-radius:50%;background:#0B0B0A;box-shadow:inset 0 0 0 calc(2.5 * var(--u)) #262420}
.lp-sbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:calc(6 * var(--u));height:calc(28 * var(--u));padding:0 calc(26 * var(--u)) 0 calc(30 * var(--u));font:800 calc(11.5 * var(--u))/1 var(--f-body);color:#2A2620}
.lp-sbar::before{content:"9:41";margin-right:auto}
.lp-sbar i{width:calc(10 * var(--u));height:calc(10 * var(--u));background:#2A2620;clip-path:polygon(100% 0,100% 100%,0 100%)}
.lp-sbar::after{content:"";width:calc(18 * var(--u));height:calc(9.5 * var(--u));margin-right:calc(2 * var(--u));border:calc(1.5 * var(--u)) solid #2A2620;border-radius:calc(3 * var(--u));background:#2A2620;box-shadow:inset 0 0 0 calc(1 * var(--u)) #FFFCF1,calc(3.5 * var(--u)) 0 0 calc(-2.5 * var(--u)) #2A2620}
.lp-phone img{display:block;width:100%;height:auto}
/* Desktop: as big as possible (372px) while the whole device, shadow included, stays inside the first screen (1280x800 gives about 355px) */
@supports (height:100svh){@media (min-width:900px){.lp-phone{--pw:clamp(300px,min(33vw,calc((100svh - 112px) / 1.94)),372px)}}}
/* Mobile: the device is the hero's main picture (84vw, max 340px); its top (instruction, Arabic word) still lands in the first screen under the CTA */
@media (max-width:899px){.lp-phone{--pw:min(84vw,340px)}}

/* Waitlist form */
.wl-form{max-width:520px}
.wl-label{display:block;margin:0 0 6px;font-size:14px;font-weight:800}
.wl-row{display:flex;flex-wrap:wrap;gap:10px}
.wl-form input[type=email]{flex:1 1 220px;min-width:0;min-height:54px;padding:0 16px;border:var(--bw) solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:700 17px/1 var(--f-body)}
.wl-form input[type=email]:focus{border-color:var(--primary)}  /* keeps the :focus-visible ring (tools/check_ui.py focus-ring) */
.wl-form input[aria-invalid=true]{border-color:var(--err)}
.wl-form .btn{flex:1 0 auto;max-width:100%;min-height:54px}
@media (min-width:560px){.wl-row{flex-wrap:nowrap}.wl-form .btn{white-space:nowrap}}
.wl-form .form-error{margin:10px 0 0}
.wl-note{margin:8px 0 0;font-size:13px;color:var(--muted)}
.wl-note a{color:var(--muted);font-weight:700}
.wl-form:target,.wl-form:has([aria-invalid=true]){scroll-margin-top:96px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Sections */
section h2{margin:0 0 20px;font:800 clamp(28px,6vw,40px)/1.1 var(--f-display);max-width:22ch;text-wrap:balance}
section[id]{scroll-margin-top:72px}
.band{background:var(--sunken);border-top:var(--bw) solid var(--line);border-bottom:var(--bw) solid var(--line)}
.lp-read{max-width:760px;margin-inline:auto}
.lp-lead{margin:0 0 18px;font-size:18px;color:var(--muted);max-width:58ch}
.lp-demo,.lp-pain,.lp-rigor,.lp-program,.lp-who,.lp-faq,.lp-proof{padding:52px 0}
.lp-how,.lp-offers{padding:56px 0}
.lp-final{padding:60px 0 96px}
/* Demo: same option buttons as the app player (.opts/.opt in app.css) */
.lp-demo-grid{display:grid;gap:24px}
@media (min-width:900px){.lp-demo-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}}
.lp-demo-box{padding:20px;border:var(--bw) solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:0 4px 0 var(--line)}
.lp-demo-count{margin:0 0 8px;font-size:14px;font-weight:800;color:var(--muted)}
.lp-q{margin:0;padding:0;border:0;min-width:0}
.lp-q legend{padding:0;font:800 19px/1.3 var(--f-display)}
.lp-q-ar{margin:8px 0 14px;font-size:38px;line-height:1.7;text-align:right}
.lp-q .opt{font-weight:700}
.lp-q-fb{min-height:24px;margin:12px 0 0;font-weight:800}
.lp-demo-next{margin-top:12px}
.lp-demo-score{margin:0 0 6px;font:800 22px/1.3 var(--f-display)}
.lp-demo-end p{margin:0 0 14px}
.lp-story{margin:0 0 18px;font-size:19px;line-height:1.6;max-width:58ch}
.lp-agitate{margin:0;font:800 19px/1.4 var(--f-display);max-width:46ch}
.lp-method{display:grid;gap:28px;max-width:960px}
@media (min-width:760px){.lp-method{grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:start}}
/* Method section: the same CSS device as the hero, smaller (every app screenshot on the landing sits in this device, docs/ux-ui.md) */
.lp-phone.lp-m-phone{--pw:min(260px,68vw)}
.lp-phone.lp-m-shot{--pw:min(220px,60vw);margin:0 auto 32px}
@media (min-width:760px){.lp-phone.lp-m-shot{margin-left:0}}
.lp-m-text h3{margin:0 0 6px;font:800 24px/1.2 var(--f-display)}
.lp-m-text p{margin:0 0 24px;font-size:17px;color:var(--muted);max-width:52ch}
.lp-m-text .lp-m-note{font-size:15px}
.lp-section-cta{margin:8px 0 0}
.lp-rigor-grid{display:grid;gap:24px}
@media (min-width:900px){.lp-rigor-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}}
.lp-rigor p{font-size:18px;max-width:58ch}
.lp-specimen{margin:0;padding:20px 24px;border:var(--bw) solid var(--line);border-radius:var(--r);background:var(--surface)}
.lp-specimen .ar{margin:0 0 10px;font:400 36px/1.7 var(--f-ar);text-align:right;color:var(--ink)}
@media (min-width:900px){.lp-specimen .ar{font-size:52px}}
.lp-specimen figcaption{font-size:16px;font-weight:800}
.lp-specimen figcaption span{display:block;margin-top:4px;font-size:14px;font-weight:400;color:var(--muted)}
.lp-lessons{list-style:none;margin:0;padding:0;border-top:var(--bw) solid var(--line)}
.lp-lessons li{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0;border-bottom:var(--bw) solid var(--line)}
.lp-num{font:800 20px/1 var(--f-display);color:var(--muted)}
.lp-lessons .is-soon .lp-num{font-size:15px}
.lp-l-title{margin:0;font-weight:800;font-size:17px}
.lp-l-ex{margin:2px 0 0;font-size:15px;color:var(--muted)}
.lp-l-ex .ar{font-size:22px;line-height:1.6;color:var(--ink);margin-inline-end:6px}
.lp-status{display:grid;justify-items:end;font-size:14px;font-weight:800;color:var(--muted);text-align:right}
.lp-status.is-free{color:var(--primary-text,var(--primary))}
.lp-status small{font-size:13px;font-weight:700}
.lp-who p{font-size:18px;max-width:58ch}
.lp-founder{display:flex;gap:16px;align-items:center;margin:0 0 18px}
.lp-founder img{border-radius:50%}
.lp-proof blockquote{margin:0 0 18px;padding-left:18px;border-left:4px solid var(--primary)}
.lp-proof blockquote p{margin:0 0 6px;font-size:18px}
.lp-proof blockquote footer{font-size:14px;font-weight:800;color:var(--muted)}
.lp-note{margin:12px 0 0;color:var(--muted);max-width:60ch}
.lp-note a{color:var(--primary-text,var(--primary));font-weight:800}
.lp-free{margin:20px 0 0;padding:20px;border:var(--bw) solid var(--primary);border-radius:var(--r);background:var(--surface);box-shadow:0 4px 0 var(--primary)}
.lp-free-price{margin:0;font:800 34px/1 var(--f-display)}
.lp-free p{margin:8px 0 16px;font-size:17px;max-width:52ch}
.lp-paid{margin:18px 0 0}
.lp-paid div{padding:14px 0;border-bottom:var(--bw) solid var(--line)}
.lp-paid dt{display:flex;justify-content:space-between;gap:12px;font:800 20px/1.3 var(--f-display)}
.lp-paid dt span{font:800 16px/1.6 var(--f-body);color:var(--muted);white-space:nowrap}
.lp-paid dd{margin:4px 0 0;color:var(--muted);max-width:56ch}
.lp-faq details{border-bottom:var(--bw) solid var(--line)}
.lp-faq details:first-of-type{border-top:var(--bw) solid var(--line)}
.lp-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 0;cursor:pointer;list-style:none;font:800 19px/1.3 var(--f-display)}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"\f078";flex:none;font:900 14px/1 "Font Awesome 6 Free";color:var(--muted)}
.lp-faq details[open] summary::after{content:"\f077"}
.lp-faq details p{margin:0 0 18px;font-size:17px;color:var(--muted);max-width:62ch}
.lp-final .wl-form{margin-top:6px}
.lp-final-try{margin:22px 0 0;font-size:16px}
.lp-final-try a{color:var(--primary-text,var(--primary));font-weight:800}
.form-error{margin:0 0 14px;padding:10px 14px;border-radius:var(--r-sm);background:var(--err-bg);color:var(--err);font-weight:700}
.lp-sticky{position:fixed;inset:auto 0 0 0;z-index:30;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:var(--bw) solid var(--line)}
@media (min-width:900px){.lp-sticky{display:none!important}}
/* keyboard focus never lands under the sticky CTA (WCAG 2.4.11, tools/check_ui.py focus-covered) */
@media (max-width:899px){html:has(.lp-sticky:not([hidden])){scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
.pub-foot{padding:36px 0 calc(96px + env(safe-area-inset-bottom,0px));border-top:var(--bw) solid var(--line)}
@media (min-width:900px){.pub-foot{padding-bottom:40px}}
.foot-grid{display:grid;gap:20px}
@media (min-width:760px){.foot-grid{grid-template-columns:minmax(0,1.4fr) auto auto auto;gap:48px}}
.foot-line{margin:6px 0 0;font-size:14px;color:var(--muted);max-width:44ch}
.pub-foot ul{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.pub-foot a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--muted);font-weight:700}
.wl-resend{margin:0 0 14px}
.msg-page{padding:72px 0;text-align:center}
.msg-page>.pub-wrap>i{font-size:44px;color:var(--primary-text,var(--primary));margin-bottom:12px}
.msg-page h1{margin:0 0 10px;font:800 32px/1.1 var(--f-display)}
.msg-page p{margin:0 auto 22px;max-width:44ch;color:var(--muted);font-size:17px}
.msg-page .small{font-size:14px;margin-top:18px}
.legal{padding-block:40px 72px}  /* keep .pub-wrap's side gutter */
.legal h1{margin:0 0 16px;font:800 34px/1.1 var(--f-display)}
.legal h2{margin:28px 0 8px;font:800 22px/1.2 var(--f-display);max-width:none}
.legal p,.legal li{font-size:16px;max-width:68ch}
.todo{padding:2px 6px;border-radius:6px;background:var(--err-bg);color:var(--err);font-weight:800}
/* Blog: list + support column (never a card grid) */
.blog-grid{display:grid;gap:32px;padding-block:36px 72px}
@media (min-width:960px){.blog-grid{grid-template-columns:minmax(0,1fr) 17rem;gap:56px}}
.blog-list h1,.post h1{margin:0 0 20px;font:800 clamp(30px,7vw,44px)/1.08 var(--f-display)}
.post-row{border-bottom:var(--bw) solid var(--line)}
.post-row a{display:block;padding:18px 0;text-decoration:none}
.post-row h2{margin:0 0 6px;font:800 21px/1.25 var(--f-display);max-width:none}
.post-row p{margin:0 0 6px;color:var(--muted)}
.post-row span{font-size:14px;color:var(--muted);font-weight:700}
.blog-side{display:flex;flex-direction:column;gap:16px}
@media (min-width:960px){.blog-side{position:sticky;top:88px;align-self:start}}
.side-card{border:var(--bw) solid var(--line);border-radius:var(--r);padding:18px;background:var(--surface)}
.side-card h2{margin:0 0 8px;font:800 18px/1.2 var(--f-display)}
.side-card p{margin:0 0 12px;color:var(--muted)}
.side-card ul,.side-card ol{margin:0;padding-left:18px}
.side-card li{margin:6px 0}
.toc li{margin:0}.toc a{display:block;padding:11px 0}  /* 44 px rows: each heading is a tap target (docs/ux-ui.md) */
.post{max-width:68ch}
.post .crumbs a{display:inline-flex;min-height:44px;min-width:44px;align-items:center;font-weight:800;color:var(--primary-text,var(--primary));text-decoration:none}
.post-meta{margin:-8px 0 24px;color:var(--muted);font-weight:700}
.post section h2{margin:32px 0 10px;font:800 26px/1.2 var(--f-display);max-width:none}
.post p,.post li{font-size:18px;line-height:1.65}
.post a{color:var(--primary-text,var(--primary));font-weight:800}
.post a.btn{color:var(--on-primary);white-space:nowrap}
.post details{border-bottom:var(--bw) solid var(--line)}
.post summary{min-height:52px;padding:12px 0;cursor:pointer;font-weight:800}
.post-cta{margin:40px 0;padding:22px;border:var(--bw) solid var(--primary);border-radius:var(--r);box-shadow:0 4px 0 var(--primary)}
.post-cta h2{margin:0 0 6px;font:800 22px/1.2 var(--f-display)}
.post-cta p{margin:0 0 14px}
.related ul{padding-left:18px}
.related li{margin:0}.related a{display:inline-block;padding:10px 0}  /* 44px tap target: the titles were 24px tall */
/* Arabic in articles: inline runs keep the line height, example rows get their own right-aligned box (CLAUDE.md) */
.post .ar,.post-row .ar,.side-card .ar{font-family:var(--f-ar);font-size:1.2em;line-height:1.7;font-weight:500;direction:rtl;unicode-bidi:isolate}  /* 1.7: with line-height 1 the harakat of a wrapped Arabic line ran 7-17px into the next line (tools/check_ui.py harakat-lines) */
.post h1 .ar,.post h2 .ar{font-weight:700}
.post-ex{list-style:none;margin:16px 0 20px;padding:0;border-top:var(--bw) solid var(--line)}
.post-ex li{padding:12px 0;border-bottom:var(--bw) solid var(--line)}
.post-ex p{margin:0;font-size:16px;color:var(--muted)}
.post-ex p.ar{margin:0 0 4px;font-size:26px;line-height:1.7;text-align:right;color:var(--ink)}
@media (min-width:760px){.post-ex li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}.post-ex p.ar{order:2;margin:0}}
.post-table{overflow-x:auto;margin:16px 0 20px;border:var(--bw) solid var(--line);border-radius:var(--r-sm)}
.post-table table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5}
.post-table th,.post-table td{padding:10px 12px;border-bottom:var(--bw) solid var(--line);text-align:start;vertical-align:top}
.post-table th{background:var(--sunken);font-weight:800}
.post-table tr:last-child td{border-bottom:0}
.post-draft{margin:0 0 12px;padding:10px 14px;border:var(--bw) dashed var(--line);border-radius:var(--r-sm);background:var(--sunken);font-weight:800}
.empty{color:var(--muted)}
@media (max-width:559px){
  .compare,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare thead{display:none}
  .compare tr{padding:12px 14px;border-bottom:var(--bw) solid var(--line)}
  .compare tr:last-child{border-bottom:0}
  .compare th,.compare td{padding:2px 0;border:0}
  .compare tbody th{width:auto;margin-bottom:4px}
  .compare td::before{content:attr(data-label) "\00a0: ";font-weight:700;color:var(--muted)}
}

/* 404: same column as the header logo, display title like the other pages. */
.err-page{padding-block:64px 88px}
.err-page h1{margin:0 0 12px;font:800 34px/1.1 var(--f-display)}
.err-page p{max-width:56ch}
.err-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.contact-page{padding-block:40px 72px}
.contact-page form{max-width:560px;margin-top:20px}
.contact-done{display:flex;gap:10px;align-items:center;font-weight:800;color:var(--ok)}

/* Guides (core/guides.py, docs/seo.md "Guides"): reading pages, one column, Arabic large enough for the harakat */
.guide{padding-block:40px 72px}
.guide h1{margin:0 0 12px;font:800 34px/1.15 var(--f-display)}
.guide h2{margin:36px 0 8px;font:800 22px/1.25 var(--f-display);max-width:none}
.guide p{font-size:16px;line-height:1.7;max-width:68ch}
.guide [lang=ar]{font-family:var(--f-ar);font-size:1.25em;line-height:1.7;unicode-bidi:isolate}
.guide-lead{font-size:18px;color:var(--ink)}
.guide-letters,.guide-marks,.gt-ex,.guide-related ul{list-style:none;margin:0;padding:0}
.guide-letters>li,.guide-marks>li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:start;padding:16px 0;border-bottom:var(--bw) solid var(--line)}
.guide .gl-char,.guide .gm-ar{font-size:44px;line-height:1.3;text-align:center;color:var(--ink)}
.gl-body p,.guide-marks p{margin:0}
.gl-name{font-weight:800}
.gl-latin{color:var(--muted);font-weight:700;margin-inline-start:6px}
.guide .gl-forms{display:flex;gap:18px;justify-content:flex-end;margin-top:4px;font-size:1.5em}
.guide .gl-tag{font-size:14px;color:var(--muted)}
.gm-name{font-weight:800}
.gm-ex{color:var(--muted)}
.gm-ex [lang=ar]{color:var(--ink)}
.guide-terms{margin:24px 0 0}
.guide-terms>div{padding:20px 0;border-bottom:var(--bw) solid var(--line);scroll-margin-top:80px}
.guide-terms dt{font:800 20px/1.4 var(--f-display)}
.guide .gt-ar{display:block;font-size:1.4em;font-weight:700}
.guide-terms dd{margin:6px 0 0}
.guide .gt-lesson{margin:0;font-size:14px;font-weight:700;color:var(--primary-text,var(--primary))}
.gt-ex li{padding:6px 0}
.gt-ex li>span:last-child{color:var(--muted);margin-inline-start:8px}
.guide-cta{margin-top:48px;padding:24px;border:var(--bw) solid var(--line);border-radius:var(--r);background:var(--sunken)}
.guide-cta h2{margin-top:0}
.guide-related a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:760px){.guide h1{font-size:44px}.guide-letters>li,.guide-marks>li{grid-template-columns:96px minmax(0,1fr)}}