[fix](ui): tablet uses the compact mobile chrome (no app-bar wrap) + general hero invite

Owner feedback (Fase 2b continued):
- Navigation chrome breakpoint moves 640 -> 1024: tablets now share the phone's
  elegant single-row top bar (brand left + Guide) with the bottom tab bar,
  action bar and settings sheet — the app bar can never wrap again. Content-
  density rules stay on the 640 phone tier. Docs updated (design-spec §6.1,
  mobile-experience-plan §5); historical -phone class names now mean
  "compact tier".
- Hero radar chip: "21 architectures · 1 answer" -> a general, inviting
  "Decide with confidence" / "Putuskan dengan yakin".

Verified: iPad-768 overflow 0 + tabbar active, desktop-1280 nav intact;
119 unit + 14 e2e, lint, all 6 guards green.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: programmerShinobi

docs/03-blueprint/design-specification.md

@@ -279,7 +279,7 @@ utilities via `tailwind.config.js`); view code references these instead of hardc
 | **Type** | `--aa-fs-2xs..2xl` = 11/12/12.5/13.5/15 px + fluid lg/xl/2xl via `clamp()`; `--aa-lh` 1.6 |
 | **Elevation** | `--aa-shadow-sm/md/lg` over a theme-aware `--aa-shadow-color` |
 | **Touch & focus** | `--aa-touch` 44 px (coarse pointers); `--aa-focus-ring` 2 px info, global `:focus-visible` |
-| **Breakpoints** | canonical (cannot be `var()` in `@media`): **phone ≤ 640 px · tablet 641–1024 px · laptop ≥ 1025 px** |
+| **Breakpoints** | canonical (cannot be `var()` in `@media`): **phone ≤ 640 px · tablet 641–1024 px · laptop ≥ 1025 px**. **Navigation chrome switches at ≤ 1024 px** (Fase 2b): phones AND tablets share the compact mobile chrome (bottom tab bar, action bar, settings sheet, compact top bar — brand left + Guide) so the app bar never wraps; content-density rules (`.f-div`, overlay padding, grid columns) keep the 640 px phone tier. Historical `-phone` class names mean "compact tier". |
 
 Base classes: `.aa-page` / `.aa-frame` / `.aa-surface` / `.aa-panel` / `.aa-card` / `.aa-wrap` /
 `.aa-touch`. New classes are namespaced `aa-`; no `!important`.

docs/03-blueprint/mobile-experience-plan.md

@@ -60,8 +60,11 @@ Desktop (≥641px) is unchanged (top nav + header controls as today).
 
 ## 5. Breakpoint & tokens
 
-- Phone tier: **≤640px** (canonical, design-spec §6.1). Bottom nav + action bar + settings sheet are
-  phone-only; ≥641px keeps the current top-nav desktop layout.
+- ~~Phone tier: **≤640px** (canonical, design-spec §6.1). Bottom nav + action bar + settings sheet are
+  phone-only; ≥641px keeps the current top-nav desktop layout.~~ **Updated (Fase 2b, 2026-07-16):**
+  the navigation chrome now switches at **≤1024px** — tablets share the phone's bottom nav /
+  action bar / settings sheet / compact top bar so the app bar never wraps; only content-density
+  rules stay on the 640px phone tier (design-spec §6.1).
 - Safe area: `padding-bottom: env(safe-area-inset-bottom)` on the fixed bars; the viewport already
   uses `viewport-fit=cover`? (verify/set in index.html).
 

src/i18n/dict.ts

@@ -321,10 +321,10 @@ export const DICT = {
   'lp.meta.iso': { en: 'ISO/IEC 2023', id: 'ISO/IEC 2023' },
   'lp.meta.client': { en: 'client-side', id: 'client-side' },
   'lp.radar.aria': { en: 'Trade-off radar across five architecture dimensions', id: 'Radar trade-off lima dimensi arsitektur' },
-  /* Hero radar chips — short, elegant one-liners that tease the product's two hooks:
-     instant explained analysis (Advisor) and the breadth of the library (Insights). */
+  /* Hero radar chips — short, GENERAL one-liners that invite trying the product (owner
+     feedback: no detailed numbers — just the promise). */
   'lp.chip.try': { en: 'Instant · free · explained', id: 'Instan · gratis · dijelaskan' },
-  'lp.chip.explore': { en: '21 architectures · 1 answer', id: '21 arsitektur · 1 jawaban' },
+  'lp.chip.explore': { en: 'Decide with confidence', id: 'Putuskan dengan yakin' },
   'lp.patterns.kicker': { en: 'Pattern Library', id: 'Pustaka Pola' },
   'lp.patterns.h2': { en: 'Know the pattern before you pick it.', id: 'Kenali polanya sebelum memilihnya.' },
   'lp.patterns.sub': {

src/index.css

@@ -778,11 +778,18 @@ svg {
 }
 
 /* ---- Phone tier (≤640px — canonical breakpoint, design-spec §6.1) ---- */
-@media (max-width: 640px) {
-  /* Keyboard-centric chrome adds noise on touch phones. */
+/* ---- Compact-nav tier (≤1024px — phones AND tablets, Fase 2b) ----------------
+   Owner feedback: the app bar must NEVER wrap. Below the laptop tier the mobile
+   chrome takes over entirely (bottom tab bar + compact top bar), so tablets get
+   the same elegant single-row experience as phones. The historical class names
+   keep the -phone suffix; they now mean "compact tier". */
+@media (max-width: 1024px) {
+  /* Keyboard-centric chrome adds noise on touch devices. */
   .aa-hide-phone {
     display: none;
   }
+}
+@media (max-width: 640px) {
   /* Tighter vertical rhythm on small screens. */
   .f-div {
     margin: var(--aa-space-4) 0;
@@ -1429,7 +1436,7 @@ svg {
 .aa-tabbar {
   display: none;
 }
-@media (max-width: 640px) {
+@media (max-width: 1024px) {
   .aa-tabbar {
     position: fixed;
     inset-inline: 0;
@@ -1562,7 +1569,7 @@ svg {
 .aa-mobile-actionbar {
   display: none;
 }
-@media (max-width: 640px) {
+@media (max-width: 1024px) {
   .aa-mobile-actionbar {
     position: fixed;
     inset-inline: 0;
@@ -1607,8 +1614,8 @@ svg {
   margin-bottom: var(--aa-space-2);
   border-radius: var(--border-radius-xl);
 }
-@media (max-width: 640px) {
-  /* Phones: MobileChrome owns navigation; the bar is a compact row (brand left + Guide right). */
+@media (max-width: 1024px) {
+  /* Compact tier: MobileChrome owns navigation; the bar is a compact row (brand left + Guide right). */
   .aa-appbar {
     border-radius: var(--border-radius-lg);
   }
@@ -1618,7 +1625,7 @@ svg {
 .aa-brand-phone {
   display: none;
 }
-@media (max-width: 640px) {
+@media (max-width: 1024px) {
   .aa-brand-phone {
     display: inline-flex;
     align-items: center;
@@ -1686,7 +1693,7 @@ svg {
     background: var(--color-background-info);
   }
 }
-@media (max-width: 640px) {
+@media (max-width: 1024px) {
   .aa-topnav {
     display: none;
   }
@@ -1698,7 +1705,7 @@ svg {
   align-items: center;
   gap: 10px;
 }
-@media (max-width: 640px) {
+@media (max-width: 1024px) {
   .aa-desktop-controls {
     display: none;
   }