# Apple source design audit for PtaKaro

This audit indexes 20 original Apple CSS assets, 27,044 CSS rules and 56,513 declarations across the five reference pages. It inspects key components and targeted iPhone JavaScript. Exact source values, derived interpretations and PtaKaro recommendations are separate in [audit.json](audit.json). The audit does not claim that every runtime state, language or product configuration was exercised.

The reference contains multiple systems: marketing editorial pages, retail shopping shelves, a dense comparison table and the App Store application. Their differences are useful design evidence. They should not be flattened into one universal Apple token set.

## Evidence and reproducibility

- [Machine-readable audit](audit.json): curated tokens, component anatomy, exact rule records and recommendations.
- [Complete parsed CSS rules](source-rules.json): each rule has an ID, source ID, selector, media/support context, source line and column, and exact declarations.
- [Source inventory](source-inventory.json) and [download manifest](source-manifest.json): original URLs, local files, hashes, sizes and retrieval provenance.
- [iPhone browser measurements](iphone-computed.json) and [other reference measurements](reference-computed.json): parent audit cross-checks at selected viewports. Hidden template elements can have zero-size rectangles.
- [Parser](parse_sources.py) and [audit builder](build_audit.py): repeatable generation scripts. Source files are retained in this workspace; no Desktop deliverables were created.

CSS records are source declarations, not a simulated full browser cascade. Page overrides and component variants must be applied before treating library defaults as rendered values. A computed `transition: all` without a duration normally means the default zero-duration transition, not an animation.

## Typography

Marketing uses `SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif` for body copy and `SF Pro Display` for display text. The App Store uses a separate compact system stack with a 13 px body. The original Apple font families are reference evidence; the existing PtaKaro brand uses Plus Jakarta Sans and Noto Sans Arabic.

| Role | Large | Medium ≤1068 | Small ≤734 | Weight / source |
|---|---|---|---|---|
| Editorial super title | 80 / 84 px | 64 / 68 px | 48 / ~52 px | 600; `.typography-headline-super` |
| Section headline | 56 / 60 px | 48 / ~52 px | 28 / 32 px | 600; `.typography-section-header-headline` |
| Feature card headline | 28 / 32 px | 24 / 28 px | 21 / 25 px | 600; `.typography-feature-card-headline` |
| Feature label | 17 / ~21 px | 14 / ~18 px | 14 / ~18 px | 600; `.typography-feature-card-label` |
| Reading body | 17 / 25 px | 17 / 25 px | 17 / 25 px | 400; `.typography-body` |
| Tight card body | 17 / ~21 px | 14 / ~18 px | 14 / ~18 px | 400; `.typography-feature-card-body` |
| Caption | 12 / ~16 px | same | same | 400; `.typography-caption` |
| Modal headline | 56 / 60 px | 48 / ~52 px | 40 / 44 px; 32 / 36 px ≤480 | 600; `.typography-modal-header-headline` |
| Watch comparison group heading | 32 / 40 px | 28 / ~36 px | 24 / ~32 px | 600; comparison row header |
| App Store body | 13 / 16 px | — | 13 / 16 px | 400; `body` in S20 |
| App Store paragraph / review body | 13 / 18 px | — | same | `--body-tall` |

These line heights are rounded for readability. The JSON keeps exact unitless ratios and letter spacing. Notable tracking: 80 px title −.015em; 64 px −.009em; 56 px −.005em; 48 px generally −.003em in iPhone; 28 px +.007em; 24 px +.009em; 21 px +.011em; 17 px body −.022em; 14 px body −.016em; 12 px caption −.01em. The homepage 48 px generic headline uses −.002em, demonstrating a real source variant.

## Color and theme

| Semantic role | Marketing light | Marketing dark |
|---|---|---|
| Main text | #1d1d1f | #f5f5f7 |
| Secondary text | #6e6e73 | #86868b |
| Link | #0066cc | #2997ff |
| Page | #ffffff | #000000 |
| Secondary fill | #fafafc | #161617 |
| Tertiary fill / editorial tile | #f5f5f7 | #1d1d1f |
| Strong divider | #d2d2d7 | #424245 |
| Quiet divider | #e8e8ed | #333336 |
| Primary action fill | #0071e3 | #0071e3 |
| Primary action hover / active | #0076df / #006edb | same |
| Neutral action fill / hover / active | #1d1d1f / #272729 / #18181a | #f5f5f7 / #ffffff / #ededf2 |

The source also defines alpha-based glyph/fill alternatives. Exact maps are in `tokens.color_palettes`. App Store uses `--systemBlue: #007aff`, `--systemLink: #0068da`, primary black at `#d9` alpha and different dark/increased-contrast sets. It is not the same palette as marketing.

## Responsive layout and spacing

| Token / role | Source value | Evidence / interpretation |
|---|---|---|
| Marketing small | `max-width: 734px` | [R05430](source-rules.json), [R08394](source-rules.json). Default large >1068px; medium 735–1068px; small ≤734px. Some components additionally have 480px rules. |
| Marketing medium | `max-width: 1068px` | [R08393](source-rules.json), [R07224](source-rules.json).  |
| Marketing xlarge | `min-width: 1441px` | [R09327](source-rules.json).  |
| Global navigation and footer mobile | `max-width: 833px` | [R00026](source-rules.json), [R01321](source-rules.json). The global header breakpoint is independent of the marketing content breakpoint. |
| Store handheld condition | `(max-width:1023px) and (max-device-width:736px)` | [R16552](source-rules.json), [R16074](source-rules.json). Do not silently replace this with a viewport-only rule when reporting the source. |
| Watch comparison two columns | `max-width: 1068px` | [R24172](source-rules.json). Three columns above 1068px, two columns below; 6.5% column gap on small. |
| App Store mobile chrome | `max-width: 483px` | [R25945](source-rules.json), [R25950](source-rules.json). At ≥484px the component becomes sidebar navigation. |
| App Store desktop gutter and shelf arrows | `min-width: 1000px` | [R25402](source-rules.json), [R25448](source-rules.json). Body gutter 25px below; 40px from 1000px. Shelf arrow controls are hidden below 1000px. |

| Token / role | Source value | Evidence / interpretation |
|---|---|---|
| Marketing content max width | `1260px; mobile max 420px` | [R05429](source-rules.json), [R05430](source-rules.json).  |
| Marketing hero max width | `1680px` | [R05429](source-rules.json).  |
| Gallery content width | `min(1260px, 87.5%) desktop; max variable becomes 420px on small` | [R08541](source-rules.json), [R05430](source-rules.json). Left/right content gutters are (100% − content width)/2; at 1440px this is 90px; at 390px this is 24.375px. |
| Feature card width × minimum height | `{"large": "372 × 680px", "medium": "344 × 628px", "small": "260 × 480px"}` | [R08392](source-rules.json), [R08393](source-rules.json), [R08394](source-rules.json). Special card variants may override minimum heights. |
| Feature copy inset | `{"large": "32px", "medium": "28px", "small": "24px"}` | [R08408](source-rules.json), [R08409](source-rules.json), [R08410](source-rules.json).  |
| Marketing card set gap | `20px` | [R07966](source-rules.json).  |
| iPhone section header bottom spacing | `{"large": "48px", "medium": "48px", "small": "32px"}` | [R06510](source-rules.json), [R06511](source-rules.json), [R09144](source-rules.json), [R09146](source-rules.json), [R09147](source-rules.json). The html-prefixed page override wins over shared component base 80/64/48px through specificity. |
| Section padding defaults | `{"large": "160px", "medium": "128px", "small": "96px"}` | [R10000](source-rules.json), [R10001](source-rules.json), [R10002](source-rules.json), [R10005](source-rules.json), [R10006](source-rules.json). Defaults only. Actual sections can override padding or use no-pad classes. Do not label every section as 160px. |
| Section padding with all-access-pass controls | `{"large": "216px", "medium": "206px", "small": "196px"}` | [R10000](source-rules.json), [R10003](source-rules.json), [R10004](source-rules.json), [R10008](source-rules.json).  |
| Gallery arrow layout | `36px height; 90px pair width; 48px top padding` | [R08516](source-rules.json). Small gutter and padding variants are retained in component evidence. |
| Homepage grid gutter | `12px gap; 12px margin-bottom` | [R03279](source-rules.json).  |
| Homepage tile height | `{"default": {"hero": "580px", "promo": "580px"}, "medium": {"hero": "570px", "promo": "490px"}, "small": {"hero": "500px", "promo": "500px"}, "large_tall_viewport": "hero 692px at min-width1069px + min-height776px", "medium_tall_viewport": "hero 650px at width735–1068px + min-height734px"}` | [R03262](source-rules.json), [R03263](source-rules.json), [R03264](source-rules.json), [R03265](source-rules.json), [R03266](source-rules.json).  |
| Homepage promo columns | `2; 1 at ≤734px` | [R03341](source-rules.json), [R03342](source-rules.json).  |
| Globalnav shell | `44px desktop; 48px mobile; content max 1024px including 22px inline insets` | [R00019](source-rules.json), [R00026](source-rules.json), [R00050](source-rules.json). The useful inner line is 980px when maximum shell width is reached. |
| Flyout content insets | `40px top / 84px bottom desktop; mobile 50px top + 48px side insets` | [R00249](source-rules.json), [R00251](source-rules.json).  |
| Comparison content | `{"large": "980px", "medium": "692px", "small": "87.5%"}` | [R23717](source-rules.json), [R23719](source-rules.json), [R23720](source-rules.json).  |
| Comparison grid | `3 columns and 3% gap; 2 columns ≤1068px; 6.5% gap ≤734px` | [R24171](source-rules.json), [R24172](source-rules.json), [R24173](source-rules.json).  |
| Store main hero product card | `400 × 500px; handheld309 ×450px` | [R16885](source-rules.json), [R16892](source-rules.json), [R16893](source-rules.json), [R16886](source-rules.json). Source dimensions use 23.5294117647rem ×29.4117647059rem. Pixel conversion assumes the observed 17px root; supplied browser measurements agree. |
| Store content card width variants | `980px full; 646px two-thirds; 480px half; 400px 40%; 313px third` | [R16547](source-rules.json), [R16558](source-rules.json), [R16563](source-rules.json), [R16568](source-rules.json), [R16571](source-rules.json). rem-based source sizes use the 17px root for 480/400 conversions. |
| Store card shelf gap | `20px margin-inline-end` | [R17208](source-rules.json).  |
| Store card copy inset | `28px` | [R16593](source-rules.json), [R16597](source-rules.json). 1.6470588235rem on desktop converts to 28px at 17px root. |
| App Store body gutters | `25px; 40px ≥1000px; module gutter 30px` | [R25401](source-rules.json), [R25402](source-rules.json).  |
| Footer content | `980px max content width + 22px side padding` | [R01275](source-rules.json).  |

## Shape, elevation and material

| Token / role | Source value | Evidence / interpretation |
|---|---|---|
| Marketing action button | `980px` | [R06177](source-rules.json). Pill geometry; not the radius for all UI controls. |
| Marketing card and rich modal | `28px` | [R07697](source-rules.json), [R08315](source-rules.json).  |
| Store cards | `18px` | [R16547](source-rules.json), [R16885](source-rules.json).  |
| Watch model field | `13px` | [R23724](source-rules.json), [R23726](source-rules.json). Page-specific 13px overrides shared template 5px. |
| Circular tile control | `50% with 36px diameter` | [R06452](source-rules.json).  |
| Paddlenav | `36px radius with 36px diameter` | [R06248](source-rules.json), [R06250](source-rules.json).  |
| Global search result hover surface | `5px` | [R00474](source-rules.json).  |
| App Store global radii | `{"xsmall": "5px", "small": "9px", "medium": "12px", "large": "17px", "xlarge": "24px"}` | [R25401](source-rules.json).  |
| App Store privacy/accessibility card | `10px` | [R26187](source-rules.json), [R26737](source-rules.json).  |
| App Store review card | `24px` | [R26675](source-rules.json), [R25401](source-rules.json).  |
| Store rest shadow | `2px 4px 12px #00000014` | [R16547](source-rules.json), [R16885](source-rules.json). #14 alpha =20/255 ≈7.84%; browser may display rounded 0.08. |
| Store hover shadow | `2px 4px 16px #00000029` | [R16548](source-rules.json). #29 alpha =41/255 ≈16.08%. |
| Marketing card shadow | `initial (no elevation by default)` | [R06440](source-rules.json). Flat editorial marketing cards differ from elevated retail cards. |
| App Store small and medium shadows | `{"small": "0 3px 9px #00000014", "medium": "0 3px 20px #00000014"}` | [R25427](source-rules.json).  |
| Global nav supported scrim | `saturate(180%) blur(20px); rgba(250,250,252,.8) light; rgba(22,22,23,.8) dark` | [R00030](source-rules.json), [R00032](source-rules.json).  |
| Flyout curtain | `rgba(232,232,237,.4) + blur(20px)` | [R00041](source-rules.json).  |
| Marketing rich modal scrim | `rgba(0,0,0,.48); optional blur 20px` | [R08315](source-rules.json), [R08290](source-rules.json). Blur applies when ric-modal-scrim-blur class is present. |

## Motion: exact roles and timing

| Token / role | Source value | Evidence / interpretation |
|---|---|---|
| Small control feedback | `100ms linear: background, color, opacity or fill` | [R06250](source-rules.json), [R06253](source-rules.json), [R06452](source-rules.json), [R08311](source-rules.json).  |
| Marketing hover transform | `300ms cubic-bezier(0,0,0.5,1)` | [R07699](source-rules.json), [R07700](source-rules.json). Scale amount is JS-set; see JS audit. |
| Store hover transform and elevation | `300ms cubic-bezier(0,0,.5,1); scale3d(1.01,1.01,1.01)` | [R16547](source-rules.json), [R16548](source-rules.json).  |
| Store closer-look CTA | `500ms default ease; reduced-motion none` | [R16988](source-rules.json), [R16992](source-rules.json). Shorthand .5s implies transition-property all and timing ease. |
| Global nav link feedback | `320ms cubic-bezier(.4,0,.6,1)` | [R00133](source-rules.json).  |
| Global nav curtain | `320ms cubic-bezier(.4,0,.6,1) with80ms delay; visibility uses step-start/open and step-end/close` | [R00041](source-rules.json), [R00046](source-rules.json).  |
| Global nav desktop flyout items | `320ms entry; delay= group delay + item index × 20ms + 80ms; translateY(-4px)→0` | [R00262](source-rules.json), [R00264](source-rules.json). Close duration varies by reverse item index, capped at 240ms. The rule does not itself override the default ease timing function. |
| Global nav mobile entry | `240ms cubic-bezier(.4,0,.6,1); delay 200ms + index×20ms; translateY(-8px)` | [R00109](source-rules.json).  |
| Global nav search result hover | `20ms cubic-bezier(.4,0,.6,1)` | [R00471](source-rules.json), [R00474](source-rules.json).  |
| Global nav bag badge | `300ms cubic-bezier(.25,.1,.3,1)` | [R00561](source-rules.json), [R00562](source-rules.json), [R00563](source-rules.json).  |
| Accordion tray | `height 400ms ease-in-out; reduced-motion none` | [R08593](source-rules.json), [R08635](source-rules.json), [R08639](source-rules.json).  |
| Image accordion transitions | `inline image opacity 400ms ease-in-out; button padding 400ms; desktop image opacity 200ms with incoming 200ms delay` | [R08785](source-rules.json), [R08794](source-rules.json), [R08820](source-rules.json), [R08822](source-rules.json).  |
| Staggered reveal CSS values | `150ms item delay; opacity900ms; translate30px over700ms` | [R08532](source-rules.json). Variables are unitless seconds consumed by JavaScript; easing is verified in JS below. |
| Homepage timed dot width | `250ms linear` | [R04525](source-rules.json).  |
| Homepage gallery caption opacity | `400ms ease; baseopacity 0.36` | [R04792](source-rules.json).  |
| Watch selector border | `200ms ease` | [R24285](source-rules.json), [R24286](source-rules.json).  |
| App Store shelf arrow feedback | `250ms linear` | [R25429](source-rules.json).  |
| App Store mobile navigation translation | `400ms cubic-bezier(.4,0,.2,1); reduced-motion none` | [R25945](source-rules.json), [R25949](source-rules.json).  |
| App Store share button | `210ms ease-out background-color` | [R26520](source-rules.json).  |

The iPhone JavaScript adds three details that cannot be inferred reliably from CSS alone:

1. **Card scale is responsive.** `_setCardWidthCSSVar()` sets `(width + 6) / width`. A 372 px card scales to ~1.0161; a 260 px card to ~1.0231. Store cards separately use a fixed 1.01 scale.
2. **Rich modal animation is an 800 ms timeline.** Normal easing is the named mathematical `easeInOutCubic`; reduced motion is 10 ms with `easeInOutSin`. Scrim alpha and blur run across the full timeline. Base overlay content fades during 200–800 ms. The enhanced code path slides from 100vh during 20–800 ms; close switches to opacity with `easeInOutQuad` and stationary y, then reverses the timeline.
3. **Staggered reveal uses `easeInOutQuad`.** The CSS supplies 150 ms per-item delay, 900 ms opacity duration, and 30 px translation over 700 ms.

The JSON retains targeted JavaScript snippets with character offsets. Mathematical easing functions should not be mislabeled as an arbitrary CSS cubic-bezier approximation. CSS runtime variables such as globalnav flyout rate remain unresolved unless a browser measurement captures them.

The retained Watch comparison script also verifies behavior: it renders three selected products at large/xlarge and two at medium/small; choosing a model already present swaps the affected selections; and visible selected models are written to a shareable `modelList` URL query. These are source findings, not a claim that every combination was tested.

## Component anatomy and variants

### Global Navigation

44/48px shell → centered content line → category trigger → desktop mega-menu / mobile list → search flyout → bag flyout → backdrop curtain.

Supported source variants: light, dark, scrim, flyout open, closing, mobile menu, nested menu, search results, keyboard focus.

- Global chrome switches at 833px, not 734px.
- Desktop max 1024px includes 22px side insets.
- CSS exposes flyout-rate as a runtime variable initially0s; do not claim one measured height-animation duration without runtime evidence.

PtaKaro recommendation: Keep a shared PtaKaro header for all routes. Preserve keyboard focus, Escape, expanded-state semantics and mobile back hierarchy. Use the PtaKaro mark and labels.

### Action Buttons

text label → optional icon → 1px border → pill background.

Supported source variants: primary, secondary outline, neutral, secondary neutral, light, dark, hover, active, disabled, focus, elevated, base, reduced.

- Base 14/18px + 8px vertical padding + 1px borders ≈36px.
- Elevated 17/20px + 11px vertical padding + 1px borders ≈44px.
- Reduced 12/16px + 3px padding + 1px borders ≈24px; small visual size is not a recommended standalone touch target.
- Primary hover is #0076DF in marketing CSS; global-bag source uses #0077ED. These are separate source variants.

PtaKaro recommendation: Use pill geometry for calls to action; keep field radius separate. Use ink on lime for the brand primary and an ink-outline secondary. Recheck optical text sizing in Plus Jakarta Sans.

### Feature Card

rounded tile → image/media layer → label → headline → optional body/caption → full-card action surface → bottom-right circular tile control.

Supported source variants: light, dark, alternate-background, hover, focus, link, modal trigger.

- Width and min-height 372×680 /344×628 /260×480.
- Copy padding 32/28/24px; radius 28px; action 36px at 16px from bottom/right.
- Hover scale adds 6px to card width using runtime measurement.
- Tile background normally #f5f5f7, changes to white on alternate sections; no default shadow.

PtaKaro recommendation: Use for device stories, PTA guidance, price methodology and buying education. Keep one headline and one clear action per card.

### Scroll Gallery

responsive gutters → overflow-x scroll-container → horizontal card-set → snap-aligned gallery items → previous/next paddles.

Supported source variants: first, middle, last, disabled arrows, touch scroll, keyboard, no-js fallback.

- Native scroll-snap-type:x mandatory.
- Gutters derive from min(max-content, 87.5%).
- Arrows are 36px visual circles, pair 90px wide.
- Source removes focus outlines from some scroll containers; actionable items must retain a visible focus indication.

PtaKaro recommendation: Use native scrolling with keyboard controls, an announced item count, visible disabled state, and no loss of focus.

### Rich Modal

fixed full viewport root → scrim pseudo-element → overlay container → rounded content sheet → scrollable content → sticky close wrapper → 36px icon inside 44px button → topic label/headline.

Supported source variants: closed, open, scrollable, light, dark, light scrim, blur scrim, normal-width, wide, inner-container, reduced motion.

- Radius 28px, z-index 11000.
- Page overlay width 816px large,692px medium,100% small; wide 1029px; inner-container 87.5% up to 1260px.
- Desktop content padding 76px; mobile inline 6.25%, bottom 60px; small sheet max 480px with 10px outside gutters.
- Close icon 36px, button 44px, top/right 20px.
- Open/close timing is JavaScript-driven; see JS evidence.

PtaKaro recommendation: Use for concise product details or explanation. Preserve labelled title, focus trapping, Escape, return focus and scroll-lock. Keep overlay content scrollable on small screens.

### Image Accordion

rounded split container → title button → chevron/icon → expanding content tray → associated image.

Supported source variants: collapsed, expanded, first borderless, hover, dark, light, reduced motion.

- 1px #d2d2d7 separators in light; #424245 dark.
- Tray 400ms ease-in-out; images have separate opacity timings.
- Desktop side padding 90px /medium 67px /small 30px with 20px minimum.

PtaKaro recommendation: Use an accessible single-expand accordion for compatibility or PTA questions. Pair each control with aria-expanded and aria-controls; do not rely on image change alone.

### Product Lineup

product title → hero image link → finish indicators → positioning copy → price → primary/secondary CTAs → optional feature rows.

Supported source variants: available, new, light/dark, gallery scroll.

- Product title and feature headline scales are separate from section titles.
- Product images use dedicated assets and sizes; preserve aspect ratio and neutral backgrounds.
- Finish swatches are product data, not brand palette.

PtaKaro recommendation: Use verified local-market prices and explicit PTA status. Treat product finishes as data values. Keep comparison actions consistent across cards.

### Homepage Campaign Tiles

full-bleed tile → image or inline video → headline/logo → subhead → pill CTA group → overlay action.

Supported source variants: hero, half-width promo, light, dark, small stacked, tall-viewport.

- 12px white gutters.
- Hero and promo heights depend on both width and, for hero, viewport height.
- Promo grid is 2 columns then 1 at 734px.

PtaKaro recommendation: Use large campaign modules selectively. Supply art-directed image crops for mobile; do not only shrink desktop imagery.

### Timed Entertainment Gallery

slide/media surface → caption → CTA → timed dots → play/pause control.

Supported source variants: playing, paused, current, previous-current, truncated dot rail, keyboard focus, dark/light.

- Timed dot width transitions 250ms linear.
- Caption opacity 400ms ease.
- Control hover feedback 100ms linear.
- Autoplay timing and real runtime playback behavior are not proved by CSS alone.

PtaKaro recommendation: Autoplay only where it adds value; provide an obvious pause control and respect reduced motion. Prefer manual device galleries for pricing comparisons.

### Store Product Card

title/eyebrow copy → product art → closer-look CTA → finish indicators → bottom price + buy CTA.

Supported source variants: normal, hover/focus-within, dark, handheld, reduced motion.

- 18px radius; 400×500px typical 40% card at 17px root; 309×450px handheld.
- 28px copy insets; 12px swatch image; 24px top swatch spacing desktop.
- Scale 1.01 and rest/hover shadows create elevation.
- Handheld breakpoints use max-device-width as well as viewport width.

PtaKaro recommendation: Suitable for product shopping shelves. Preserve a compact persistent price/action row, avoid hiding essential information behind hover.

### Store Editorial Card

full-card image or flat surface → 12px eyebrow → 28px headline → optional 14px copy → link/video action.

Supported source variants: 40/50/66/100 width variants, dark, image, video, hover.

- 480px half-width content card differs from 400px product card.
- Header 80/84px on desktop, 48/52px handheld.
- Shelf label 28/32px desktop; effective small CSS includes 24/28px overrides.

PtaKaro recommendation: Use for trade-in, financing and buying-help content where the market offering actually exists.

### Watch Comparison

intro headline → sticky model selector row → product image → finish controls → price and actions → section header → aligned specification rows.

Supported source variants: 3-column desktop, 2-column medium/small, sticky, model changed, finish selected, legacy static finishes, native select focus.

- 980px /692px /87.5% content widths.
- Three-to-two columns occurs at 1068px, not just mobile.
- Selector radius 13px via page override;19px text desktop; mobile source 17px and non-iOS 16px override.
- Focus is 4px rgba(131,192,253,.5); hover border #1d1d1f.
- Rows use aligned equal-column grid and shared section headings.

PtaKaro recommendation: A strong starting point for PtaKaro side-by-side phone comparison: keep two phones visible on mobile with grouped specification headings and sticky selected-model controls.

### App Store Compact Detail

application identity/hero → share action → metadata info ribbon → screenshot shelf → description disclosure → ratings/review cards → privacy/accessibility cards → information rows.

Supported source variants: mobile top chrome, desktop sidebar, light, dark, increased contrast, shelves, detail modals.

- App Store uses 13/16px body, not marketing 17/25px.
- Shared radius scale 5/9/12/17/24px, but privacy/accessibility cards10px.
- Review card 24px radius,186px height,20px 16px padding.
- Shelf arrows 28×64px,radius 6px,hidden below 1000px.
- Privacy/accessibility cards 30px padding and 8px gap.

PtaKaro recommendation: Use compact information patterns for specifications and dense detail pages. Do not reduce all PtaKaro body copy to 13px simply because this application uses it.

### Footer

footnotes → breadcrumb → desktop link directory → mobile accordion sections → shopping/support line → legal row.

Supported source variants: desktop columns, mobile accordion, light, dark, keyboard focus.

- 12/16px text; footer surface #f5f5f7; primary footer text black 56%; link black 72%.
- Content max 980px with 22px padding.
- Directory becomes column at 833px.

PtaKaro recommendation: Use real PtaKaro support/contact destinations and concise legal text. Keep mobile footer headings operable as buttons.

## Accessibility and source limits

Marketing focus uses a 2 px blue outline with a 1 px normal offset and a 3 px container offset. The rich modal close control is a 36 px icon inside a 44 px button. Watch native selects use a 4 px translucent blue focus ring. Disabled marketing buttons use .42 opacity in light and .36 in dark themes. Several CSS/JS paths explicitly remove motion for reduced-motion users. These details do not by themselves prove complete keyboard/screen-reader behavior; interaction testing remains a separate evidence layer.

The parsed styles contain no-JavaScript fallbacks, dark/light variants, locale-specific fonts, old browser branches and hidden templates. Those were retained in the complete rule index, but the curated component audit intentionally concentrates on the supplied English reference routes. It does not claim to test every possible state.

## PtaKaro adaptation, separate from Apple evidence

The existing brand tokens are ink `#101827`, lime `#C5F135`, paper `#F6F5F0`, white `#FFFFFF`, slate `#536071`, and line `#DCE1D8`; Latin typography is Plus Jakarta Sans and Urdu is Noto Sans Arabic. Preserve this identity while using the reference to tighten hierarchy, whitespace, component states and motion.

- Use pill actions and separate rounded fields. A 12 px PtaKaro field is a brand choice; Apple’s comparison field is 13 px and its action pill is 980 px.
- Keep 28 px editorial cards and 18 px retail cards as separate component families. Elevation belongs to the retail family; editorial cards are flat by default.
- Start with 17/25 reading text, 14/20 metadata and selective 13/18 dense detail text. Recheck tracking, line wrapping and Urdu shaping in the actual brand fonts.
- Expose hover, active, focus, disabled, selected, open, error and reduced-motion states in the guide. Only states backed by source evidence should carry an Apple-source label.
- Use a consistent shared header/footer, device card, feature card, gallery, comparison table, modal, accordion and compact detail family. Keep real pricing and PTA status independent from copied design-reference content.
- Name intentional motion properties. Preserve the exact Apple reference beside any faster PtaKaro adaptation, especially for the 800 ms dialog timeline.

## Existing local builds and provenance

The local homepage copies original Apple main/homepage/footer CSS and adds custom site/campaign styles and independent navigation/gallery behavior. The iPhone, Mac, Watch and App Store builds reconstruct markup and use their own `public/style.css`. Their HTML and data are useful project context, but their authored CSS is not evidence of Apple source values. Source hashes and paths for these builds are recorded in the JSON.

Original CSS links were resolved from the retained page sources. Some CSS snapshots pre-existed this audit and some linked versions were fetched during it. The manifest records that distinction. The source bundle is a reproducible reference snapshot, not a promise that every value will remain unchanged on Apple’s live sites.