glyph-ai 0.1.0

package/bundled/server/data/design-systems/arc-design-system.md

@@ -0,0 +1,922 @@
+# Arc.net Design System & Section Boilerplate
+
+> Source: https://arc.net/ (scraped 2026-03-22)
+
+---
+
+## Design System
+
+### Colors
+
+| Role | Value | RGB |
+|------|-------|-----|
+| **Primary** | `#3139FB` | `rgb(49, 57, 251)` — Arc Blue, used for headlines, buttons, backgrounds, press quotes, footer |
+| **Secondary** | `#FFFCEC` | `rgb(255, 252, 236)` — Warm Cream, used for body background, hero section, testimonials |
+| **Tertiary** | `#000000D9` | `rgba(0, 0, 0, 0.85)` — Near-Black, used for CTA pill buttons |
+| **Neutral - Text Primary** | `#000000` | `rgb(0, 0, 0)` — Body text, hero headlines |
+| **Neutral - Text Secondary** | `#696969` | `rgb(105, 105, 105)` — Subtext, feature descriptions |
+| **Neutral - Text Muted** | `rgba(0,0,0,0.65)` | Hero subtitle text |
+| **Neutral - White** | `#FFFFFF` | `rgb(255, 255, 255)` — Nav text, button text on dark backgrounds |
+| **Accent - Button Text** | `#2702C2` | `rgb(39, 2, 194)` — Deep indigo, download button text & download page bg |
+| **Alt - Warm Cream (Students)** | `#F5F4E2` | `rgb(245, 244, 226)` — Students page body background |
+| **Alt - Dark Brown-Gray** | `#3C3B3A` | `rgb(60, 59, 58)` — Students page headings & button bg |
+| **Alt - Warm Gray** | `#766E6A` | `rgb(118, 110, 106)` — Students page body text |
+| **Alt - Muted Label** | `#97928F` | `rgb(151, 146, 143)` — Students page subtitle/labels |
+| **Alt - Darker Cream** | `#E1E0CE` | `rgb(225, 224, 206)` — Promotional banner backgrounds |
+| **Alt - FAQ Link Blue** | `#0047FF` | `rgb(0, 71, 255)` — Inline links on FAQ page |
+
+### Typography
+
+| Role | Font Family | Size | Weight | Line Height | Letter Spacing |
+|------|-------------|------|--------|-------------|----------------|
+| **Display / Hero Headline** | `"ABC Oracle", Helvetica, sans-serif` | 20px | 400 | 24px | normal |
+| **Section Heading (H1)** | `"Marlin Soft SQ", system stack` | 32px | 700 | 31.2px | -1.6px |
+| **Feature Section Heading** | `"Marlin Soft SQ", system stack` | 40px | 700 | 39px | -1.6px |
+| **Body Text** | `InterVariable, Inter, system stack` | 17px | 500 | 25.5px | — |
+| **Nav Link** | `"Marlin Soft SQ", system stack` | 14px | 500 | — | -0.28px |
+| **Button Label** | `-apple-system, system-ui, sans-serif` | 14px | 600 | — | — |
+| **CTA Pill Label** | `"ABC Oracle", Helvetica, sans-serif` | 24px | 400 | — | — |
+| **Press Quote** | `"Marlin Soft SQ", system stack` | 16px | 700 | normal | — |
+| **Testimonial Quote** | `Marlin, system stack` | 16px | 400 | normal | — |
+| **Testimonial Author** | `"ABC Favorit Mono", monospace stack` | 12px | 700 | — | — |
+| **Footer Link** | `InterVariable, Inter, system stack` | 12px | 600 | — | — |
+| **Footer Column Header** | `InterVariable, Inter, system stack` | 12px | 600 | — | — (uppercase) |
+| **Text Link (inline)** | `InterVariable, Inter, system stack` | 17px | 700 | — | — |
+| **Page Title (FAQ)** | `Marlin, system stack` | 67px | 700 | 67px | -2.68px |
+| **FAQ Question (H2)** | `"Marlin Soft SQ", system stack` | 28px | 600 | 36px | -1.12px |
+| **FAQ Answer** | `-apple-system, system-ui, sans-serif` | 16px | 400 | 28px | — |
+| **Blog Card Title** | `"Marlin Soft SQ", system stack` | 28px | 700 | — | — |
+| **Blog Category** | `"ABC Favorit Mono", monospace stack` | 12px | 400 | — | — (uppercase) |
+| **Blog Read More** | `"Marlin Soft SQ", system stack` | 16px | 500 | — | — (uppercase) |
+| **Students H1** | `"Marlin Soft SQ", system stack` | 56px | 700 | 48px | -2.8px |
+| **Students Subtitle** | `"Marlin Soft SQ", system stack` | 16px | 500 | — | 1.2px (uppercase) |
+| **Students Section H2** | `"Marlin Soft SQ", system stack` | 40px | 700 | 46px | -2px |
+| **Students Body** | `Inter, system stack` | 20px | 500 | 26px | — |
+| **Download Page H1** | `"Marlin Soft SQ", system stack` | 45.5px | 700 | 45.5px | -1.82px |
+| **Version Info** | `InterVariable, Inter, system stack` | 10px | 600 | — | — |
+| **"Also Available" Label** | `"ABC Favorit Mono", monospace stack` | 14px | 600 | — | — (uppercase) |
+
+**Font Stack Summary:**
+- **Headings / Display:** `"Marlin Soft SQ"` (tight letter-spacing, bold) and `"ABC Oracle"` (elegant, normal weight)
+- **Body / UI:** `InterVariable, Inter` (medium weight)
+- **Monospace / Labels:** `"ABC Favorit Mono"` (bold, used for @handles)
+- **System fallback:** `-apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif`
+
+### Buttons
+
+#### Download Button (Primary)
+```
+background: #FFFFFF
+color: #2702C2 (deep indigo)
+font-size: 14px
+font-weight: 600
+font-family: -apple-system, system-ui, sans-serif
+padding: 8px 0px (inner, full-width within container)
+border-radius: 10px
+border: none
+height: 45px
+display: flex
+gap: 10px
+align-items: center
+icon: platform logo (Apple/Windows) left-aligned
+```
+
+#### CTA Pill Button (Hero)
+```
+background: rgba(0, 0, 0, 0.85)
+color: #FFFFFF
+font-size: 24px
+font-weight: 400
+font-family: "ABC Oracle", Helvetica, sans-serif
+padding: 8px 22px 8px 8px
+border-radius: 22px (fully rounded pill)
+display: flex
+gap: 16px
+align-items: center
+icon: product icon (left), arrow (right)
+text-decoration: none
+```
+
+#### Download Button (Dark Variant — Students/Landing Pages)
+```
+background: #3C3B3A (dark brown-gray)
+color: #FFFFFF
+font-size: 18px
+font-weight: 600
+font-family: -apple-system, system-ui, sans-serif
+padding: 18px 32px 18px 29px
+border-radius: 14px
+border: none
+display: flex
+gap: 10px
+align-items: center
+icon: platform logo (Apple/Windows) left-aligned
+```
+
+#### Text Link
+```
+color: #3139FB (Arc Blue)
+font-size: 17px
+font-weight: 700
+font-family: InterVariable, Inter, system stack
+text-decoration: none
+pattern: "Label →" (arrow suffix)
+```
+
+### Input Fields
+Not present on the homepage. Arc uses direct download CTAs rather than form inputs.
+
+### Spacing
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| **Page max-width** | ~1200px (full viewport) | Main content container |
+| **Nav inner width** | 1136px | Navigation content area |
+| **Section vertical padding (small)** | 48px | Testimonials section |
+| **Section vertical padding (large)** | 128px | Features section |
+| **Hero top padding** | 72px | Above hero headline |
+| **Nav height** | 96px (container) / 36px (nav element) | Top navigation bar |
+| **Card gap** | 8px | Between feature card heading and body |
+| **Nav gap** | 16px | Between nav items |
+| **Button gap** | 10px | Between icon and label in buttons |
+| **CTA pill gap** | 16px | Between icon and label in CTA pill |
+| **Marquee quote padding** | 24px | Around each press quote |
+| **Marquee quote gap** | 12px | Between quote text and publication logo |
+| **Download section inner padding** | 150px top / 80px bottom | Blue download/quote section |
+| **Download section gap** | 24px | Between elements in download section |
+
+### Visual Characteristics
+- **Wavy border dividers:** Decorative scalloped/wave SVG borders between major sections (cream ↔ blue transitions)
+- **No visible borders on cards** — content sections use background color shifts
+- **Marquee animation** — press quotes scroll horizontally in a continuous loop (two rows, duplicated content)
+- **Sticky nav bar with Dia promotion** — The nav stays at top with a cream-background Dia hero persistent bar below
+- **Color blocking** — alternates between cream (`#FFFCEC`) and Arc Blue (`#3139FB`) sections
+- **Generous whitespace** — large padding values, minimal clutter
+- **Product screenshots** — browser window mockups with rounded corners, showing real UI
+
+---
+
+## Section Boilerplate
+
+### Navigation
+
+**Structure:**
+```
+<header> (sticky top, blue background #3139FB, full-width)
+  <div> (container, flex, justify-between, align-center, h-96px, max-w-~1136px, mx-auto)
+    <a href="/"> (logo)
+      <img> (Arc logo, white)
+    </a>
+    <nav>
+      <ul> (flex, gap-16px)
+        <li><a href="/max">Max</a></li>         <!-- has sparkle icon suffix -->
+        <li><a href="/search">Mobile</a></li>   <!-- has phone icon suffix -->
+        <li><a href="/developers">Developers</a></li>
+        <li><a href="/students">Students</a></li>
+        <li><a href="/blog">Blog</a></li>
+      </ul>
+    </nav>
+  </div>
+</header>
+```
+
+**Interactions:**
+- Nav links: white text (#FFFFFF), 14px, font-weight 500, "Marlin Soft SQ"
+- "Max" and "Mobile" items have small icon suffixes (sparkle gear icon, phone icon respectively)
+- No dropdown menus
+- Nav is persistent/sticky at top while scrolling
+- No hamburger menu visible (desktop-only view observed)
+- No hover state color change detected (stays white)
+
+---
+
+### Hero
+
+**Structure:**
+```
+<section> (bg: #FFFCEC cream, pt-72px, mt-90px from nav, flex-col, center-aligned)
+  <div> (text container, centered)
+    <h1 style="font: 700 bold 'Marlin Soft SQ'; large display size">
+      Meet Dia, the next evolution of Arc
+    </h1>
+    <p style="font: 400 'ABC Oracle' 20px; color: rgba(0,0,0,0.65)">
+      A familiar design that weaves AI into everyday tasks
+    </p>
+  </div>
+  <a href="https://diabrowser.com"> (CTA pill)
+    <div style="bg: rgba(0,0,0,0.85); rounded-full; px-22px; py-8px; flex; gap-16px">
+      <img> (product icon, 40x40ish)
+      <span style="font: 400 24px 'ABC Oracle'; white">Try Dia</span>
+      <img> (arrow icon →)
+    </div>
+  </a>
+  <img> (hero image — browser screenshot, rounded corners, large, centered)
+</section>
+```
+
+**Spacing:**
+- Top padding: 72px
+- Margin-top: 90px (clears sticky nav)
+- Gap between headline and subtitle: ~12px
+- Gap between subtitle and CTA: ~24px
+- Gap between CTA and hero image: ~40px
+- Text alignment: center
+- Background: `#FFFCEC` (warm cream)
+
+---
+
+### Social Proof (Press Marquee)
+
+**Structure:**
+```
+<aside> (bg: #FFFCEC, h-67px, overflow-hidden)
+  <div> (marquee row 1, flex, animate-scroll-left)
+    <a href="[article-url]" style="flex; gap-12px; p-24px; nowrap">
+      <span style="font: 700 16px 'Marlin Soft SQ'; color: #3139FB">
+        "Quote text from publication."
+      </span>
+      <img> (publication logo — Bloomberg, Inverse, Fast Company, YouTube)
+    </a>
+    <!-- Duplicated items for seamless loop -->
+  </div>
+  <div> (marquee row 2, scrolls opposite direction)
+    <!-- Same structure, same quotes duplicated -->
+  </div>
+</aside>
+```
+
+**Details:**
+- Two-row horizontal marquee, continuous scroll animation
+- 4 unique quotes from: Bloomberg, Inverse, Fast Company, and a YouTube review
+- Each quote is a link to the source article
+- Publication logos sit inline after the quote text
+- Text: bold 16px Marlin Soft SQ, Arc Blue (#3139FB)
+- Quote padding: 24px per item, 12px gap between text and logo
+- Background matches cream (#FFFCEC) — seamless with surrounding sections
+
+---
+
+### Downloads (Quote + CTA)
+
+**Structure:**
+```
+<section> (bg: #3139FB blue, full-width)
+  <div> (flex-col, align-center, pt-150px, pb-80px, gap-24px)
+    <span>" "</span> (decorative open quote)
+    <h1 style="font: 700 32px 'Marlin Soft SQ'; color: #FFFCEC; letter-spacing: -1.6px; line-height: 31.2px">
+      "Arc is the Chrome replacement I've been waiting for."
+    </h1>
+    <a href="https://www.theverge.com/..."> (attribution)
+      <img> (The Verge logo, white)
+    </a>
+    <div> (button group, flex)
+      <a href="https://releases.arc.net/release/Arc-latest.dmg">
+        <button style="bg: white; color: #2702C2; rounded-10px; font-weight: 600; h-45px; flex; gap-10px">
+          <img> (Apple icon)
+          Download Arc for Mac
+        </button>
+      </a>
+      <a href="https://releases.arc.net/windows/ArcInstaller.exe">
+        <button> (same style)
+          <img> (Windows icon)
+          Download Arc for Windows
+        </button>
+      </a>
+    </div>
+  </div>
+  <div> (browser screenshot area)
+    <img alt="Screenshot of Arc by The Browser Company of New York">
+  </div>
+  <div> (scroll indicator)
+    <span>More Details</span>
+    <img> (down arrow)
+  </div>
+</section>
+```
+
+**Spacing:**
+- Inner padding: 150px top, 80px bottom
+- Gap between elements: 24px
+- Background: `#3139FB` (Arc Blue)
+- Quote marks: decorative curly quotes flanking the headline
+- Attribution logo below headline
+- Two download buttons side by side
+- Large browser screenshot below buttons
+
+---
+
+### Features
+
+**Structure:**
+```
+<div> (bg: transparent/cream, py-128px)
+  <!-- Feature Intro -->
+  <div> (text-center, mb-large)
+    <p style="font: 700 40px 'Marlin Soft SQ'; color: #3139FB; letter-spacing: -1.6px; line-height: 39px">
+      A browser that doesn't just meet your needs — it anticipates them.
+    </p>
+    <div style="font: 500 17px Inter; color: #696969; line-height: 25.5px">
+      Clean and calm, Arc shapes itself to how you use the internet.
+    </div>
+  </div>
+
+  <!-- Feature 1: Spaces -->
+  <div> (flex-col, gap-8px)
+    <p style="font: 700 40px 'Marlin Soft SQ'; color: #3139FB">
+      Space for the different sides of you.
+    </p>
+    <div style="font: 500 17px Inter; color: #696969">
+      Effortlessly organize everything you do online — work, study, hobbies —
+      all in one window with <strong>Spaces</strong> and <strong>Profiles</strong>.
+    </div>
+    <img> (browser screenshot showing Spaces UI — photo grid + sidebar)
+  </div>
+
+  <!-- Feature 2: Customization -->
+  <div> (same structure)
+    <p>Your perfect setup.</p>
+    <div>Find your perfect setup with <strong>Split View</strong>, <strong>Themes</strong>, and more.</div>
+    <img> (browser screenshot showing Split View + Theme picker)
+  </div>
+
+  <!-- Feature 3: Privacy -->
+  <div> (same structure)
+    <p>The comfort of privacy.</p>
+    <div>
+      Arc is built from the ground up to be private and secure.
+      We don't know what sites you visit or what you search for.
+      <a href="/privacy" style="color: #3139FB; font-weight: 700">Learn more about privacy in Arc →</a>
+    </div>
+  </div>
+</div>
+```
+
+**Spacing:**
+- Section padding: 128px vertical
+- Gap between feature heading and body: 8px
+- Feature heading: 40px bold Marlin Soft SQ, Arc Blue, tight -1.6px letter-spacing
+- Feature body: 17px medium Inter, gray (#696969), 25.5px line-height
+- Bold keywords within body text using `<strong>` tags
+- Each feature has an accompanying large browser screenshot
+- Privacy feature includes an inline text link with arrow (→)
+
+---
+
+### Social Proof (Testimonials)
+
+**Structure:**
+```
+<div> (bg: #FFFCEC cream, py-48px, flex, gap-16px)
+  <img> (Arc logo watermark, left side)
+  <div> (testimonials grid/flex — 4 columns)
+    <!-- Testimonial Card -->
+    <div> (p-16px top/sides)
+      <div style="font: 400 16px Marlin; color: #3139FB; line-height: normal">
+        Way more powerful than Chrome. Arc looks like the future of browsers.
+      </div>
+      <div style="font: 700 12px 'ABC Favorit Mono'; color: #3139FB; uppercase-ish">
+        @beebomco
+      </div>
+    </div>
+
+    <!-- Repeat for each testimonial -->
+    <div>
+      <div>Arc brought order to the chaos that was my online life. There's no going back.</div>
+      <div>@katelaurielee</div>
+    </div>
+    <div>
+      <div>Arc lives up to the hype. So intuitive, playful and pretty.</div>
+      <div>@fiveboiii</div>
+    </div>
+    <div>
+      <div>I just tried using a computer without Arc and it was miserable.</div>
+      <div>@markfishman_XYZ</div>
+    </div>
+  </div>
+</div>
+```
+
+**Details:**
+- 4 testimonials in a horizontal row
+- Quote text: 16px Marlin, regular weight, Arc Blue
+- Author handle: 12px ABC Favorit Mono, bold, Arc Blue, @-prefixed, visually uppercase
+- Author handles appear in a bordered pill/tag below the quote
+- Background: cream (#FFFCEC)
+- Section padding: 48px vertical, 16px gap between cards
+- Large Arc logo/illustration on the left side
+
+---
+
+### CTA (Footer CTA)
+
+**Structure:**
+```
+<aside> (bg: #3139FB blue, inside footer/contentinfo area)
+  <div> (centered content, large padding)
+    <div>
+      <h2 style="font: 700 large 'Marlin Soft SQ'; color: #FFFCEC">
+        Enter <em>your</em> new home on the internet
+      </h2>
+    </div>
+    <a href="https://releases.arc.net/release/Arc-latest.dmg">
+      <button style="bg: white; color: #2702C2; rounded-10px; font-weight: 600; h-45px">
+        <img> (Apple icon)
+        Download Arc for Mac
+      </button>
+    </a>
+  </div>
+</aside>
+```
+
+**Details:**
+- Background: Arc Blue (#3139FB)
+- Headline uses italic emphasis on "your"
+- Single download button (platform-detected — shows Mac or Windows)
+- Button style: white bg, deep indigo text, 10px radius, 45px height
+- Wavy decorative border at bottom transitioning to footer
+
+---
+
+### Footer
+
+**Structure:**
+```
+<footer> (bg: #3139FB blue, color: #FFFCEC cream)
+  <!-- CTA Section (see CTA above) -->
+  <aside>...</aside>
+
+  <!-- Footer Content -->
+  <div> (flex/grid layout, padding-large)
+    <!-- Logo -->
+    <a href="/">
+      <img> (Arc logo, cream/white)
+    </a>
+
+    <!-- Link Columns -->
+    <div> (flex, gap between columns)
+      <!-- Column 1: Product -->
+      <div>
+        <div style="font: 600 12px Inter; color: #FFFCEC; text-transform: uppercase">PRODUCT</div>
+        <a href="/download">Download</a>
+        <a href="/privacy">Privacy Policy</a>
+        <a href="https://start.arc.net/terms-of-use">Terms of Use</a>
+        <a href="/security">Security</a>
+        <a href="/max">Arc Max</a>
+        <a href="/search">Arc for iPhone</a>
+        <a href="/integrations">Integrations</a>
+        <a href="/credits">Credits</a>
+      </div>
+
+      <!-- Column 2: Resources -->
+      <div>
+        <div style="text-transform: uppercase">RESOURCES</div>
+        <a href="https://resources.arc.net">Resource Center</a>
+        <a href="https://resources.arc.net/hc/en-us/articles/...">Release Notes</a>
+        <a href="/students">Students</a>
+        <a href="/faq">FAQ</a>
+        <a href="https://thebrowser.company/careers/">Careers @ BCNY</a>
+      </div>
+    </div>
+
+    <!-- Social Icons -->
+    <div> (flex, gap)
+      <a href="https://www.youtube.com/c/TheBrowserCompany">
+        <img alt="TheBrowserCompany on Youtube">
+      </a>
+      <a href="https://twitter.com/browsercompany">
+        <img alt="@browsercompany on Twitter">
+      </a>
+    </div>
+
+    <!-- Company Badge -->
+    <a href="https://thebrowser.company"> (bottom-right)
+      <img> (The Browser Company of New York wordmark)
+    </a>
+  </div>
+</footer>
+```
+
+**Details:**
+- Background: Arc Blue (#3139FB), all text in cream (#FFFCEC)
+- Column headers: 12px Inter, 600 weight, uppercase
+- Links: 12px Inter, 600 weight, cream color, no underline
+- Two columns: "Product" (8 links) and "Resources" (5 links)
+- Social icons: YouTube and Twitter (X)
+- Arc logo top-left, "The Browser Company of New York" wordmark bottom-right
+- Wavy decorative border between CTA and footer links area
+
+---
+
+### Blog
+
+> Source: https://arc.net/blog
+
+**Structure:**
+```
+<div> (bg: white/cream, full page)
+  <!-- Dia Promotion Banner -->
+  <a href="https://diabrowser.com"> (full-width banner)
+    <div style="bg: #2702C2 deep indigo; h-88px; flex; align-center; justify-center">
+      <span style="font: 700 24px 'Marlin Soft SQ'; color: white">
+        Meet Dia, a new AI browser from the makers of Arc →
+      </span>
+      <img> (Dia icon, right side)
+    </div>
+  </a>
+
+  <!-- Blog Post Grid -->
+  <ul style="display: flex; gap: 76px; overflow-x: scroll; snap">
+    <!-- Blog Card (repeating) -->
+    <li style="flex: none; w-752px; h-673px; flex-col">
+      <span style="font: 400 12px 'ABC Favorit Mono'; color: rgba(0,0,0,0.5); text-transform: uppercase">
+        Fresh Features
+      </span>
+      <a style="font: 700 28px 'Marlin Soft SQ'; color: #000; text-decoration: none">
+        Meet the School of Browser Class of 2024
+      </a>
+      <a style="font: 500 16px 'Marlin Soft SQ'; color: #3139FB; text-transform: uppercase; flex; gap">
+        <span>Read More</span>
+        <img> (arrow icon →)
+      </a>
+      <a> (cover image link)
+        <img> (cover image, large, fills remaining space)
+      </a>
+    </li>
+    <!-- More cards... -->
+  </ul>
+</div>
+```
+
+**Details:**
+- Horizontal scrolling card layout (not grid), gap of 76px between cards
+- Each card is 752px wide, ~673px tall, stacked vertically
+- Category tag: 12px ABC Favorit Mono, uppercase, 50% opacity black
+- Post title: 28px Marlin Soft SQ, bold, black
+- "Read More" link: 16px Marlin Soft SQ, medium weight, Arc Blue, uppercase, with arrow icon
+- Cover image fills remaining vertical space
+- Categories include: "Fresh Features", "Security Bulletin", "Open Tab"
+- Dia promotion banner at top: deep indigo (#2702C2) bg, 88px tall, white bold text
+
+---
+
+### FAQ
+
+> Source: https://arc.net/faq (long-form) and https://arc.net/students (accordion)
+
+#### Variant A: Long-Form FAQ (arc.net/faq)
+
+**Structure:**
+```
+<div> (cream/white bg, centered)
+  <!-- Page Header -->
+  <div style="text-align: center; mt-64px; px-24px">
+    <h1 style="font: 700 67px Marlin; color: #3139FB; line-height: 67px; letter-spacing: -2.68px; text-align: center">
+      Frequently Asked
+      Questions
+    </h1>
+    <div style="font: 400 16px 'ABC Favorit Mono'; color: #000">
+      Updated · May 1, 2024
+    </div>
+  </div>
+
+  <!-- FAQ Content -->
+  <article style="max-width: 500px; mx-auto">
+    <!-- Question Block (repeating) -->
+    <h2 style="font: 600 28px 'Marlin Soft SQ'; color: #171717; line-height: 36px; letter-spacing: -1.12px; mt-32px; mb-8px">
+      What makes Arc different from other browsers?
+    </h2>
+    <p style="font: 400 16px system-ui; color: #6F6F6F; line-height: 28px; mb-16px">
+      Answer text with <strong>bold emphasis</strong> and
+      <a style="font-weight: 500; color: #0047FF; text-decoration: none">inline links</a>.
+    </p>
+    <!-- Bullet lists where appropriate -->
+    <ul style="list-style: none; px-40px">
+      <li><strong>Bold bullet point text</strong></li>
+    </ul>
+    <!-- More question blocks... -->
+  </article>
+</div>
+```
+
+**Details:**
+- Page title: 67px Marlin, bold, Arc Blue, centered, tight letter-spacing (-2.68px)
+- Updated date: 16px ABC Favorit Mono, monospace, black
+- Content area: 500px max-width, centered
+- Question headings (H2): 28px Marlin Soft SQ, 600 weight, near-black (#171717), -1.12px letter-spacing
+- Answer text: 16px system-ui, 400 weight, gray (#6F6F6F), 28px line-height
+- Inline links: 500 weight, blue (#0047FF), no underline
+- Spacing: 32px margin-top before each question, 8px margin-bottom after H2, 16px between paragraphs
+- Bold bullet lists with no list-style markers
+
+#### Variant B: Accordion FAQ (arc.net/students)
+
+**Structure:**
+```
+<div style="px-55px">
+  <div style="display: flex; flex-direction: column; gap: 10px">
+    <!-- Accordion Item (repeating) -->
+    <div style="cursor: pointer; pb-10px; border-bottom: 1px solid rgba(14,15,16,0.1); display: flex; gap: 10px; h-46px">
+      <img> (+ plus icon, Arc Blue)
+      <span style="font: 400 16px Inter; color: #3C3B3A">
+        I'm a student who loves Arc. How can I get more involved?
+      </span>
+    </div>
+    <!-- Last item has no border-bottom -->
+  </div>
+</div>
+```
+
+**Details:**
+- Flex column layout, 10px gap between items
+- Each item: 46px height, flex row, plus (+) icon left, question text right
+- Text: 16px Inter, regular weight, dark brown-gray (#3C3B3A)
+- Border-bottom: 1px solid rgba(14,15,16,0.1) — very subtle separator
+- Last item has no bottom border
+- Plus icon toggles to expand/collapse answer content
+- Section padding: 55px horizontal
+
+---
+
+### Downloads
+
+> Source: https://arc.net/download
+
+**Structure:**
+```
+<div> (bg: #2702C2 deep indigo, full-page)
+  <!-- Dia Promotion Card -->
+  <div style="px-40px">
+    <div style="bg: white; rounded-lg; overflow-hidden; flex; h-184px">
+      <div style="p-large">
+        <p style="font: 700 'Marlin Soft SQ'">
+          <strong>Meet Dia.</strong> Same Arc feel, with a faster, smarter foundation.
+        </p>
+        <a> (CTA pill — same as homepage hero pill)
+          Try Dia →
+        </a>
+      </div>
+      <div>
+        <img> (Dia browser screenshot)
+      </div>
+    </div>
+  </div>
+
+  <!-- App Icon -->
+  <img> (Arc app icon, centered, large ~80px)
+
+  <!-- Headline -->
+  <h1 style="font: 700 45.5px 'Marlin Soft SQ'; color: #FFFCEC; line-height: 45.5px; letter-spacing: -1.82px; text-align: center">
+    Ready to let go
+    of the old internet?
+  </h1>
+
+  <!-- Primary Download Button -->
+  <div style="flex-col; align-center">
+    <a href="https://releases.arc.net/release/Arc-latest.dmg">
+      <button style="bg: white; color: #2702C2; rounded-10px; font-weight: 600; font-size: 14px">
+        <img> (Apple icon)
+        Download Arc for Mac
+      </button>
+    </a>
+    <span style="font: 600 10px Inter; color: rgba(255,255,255,0.7)">
+      Versions 13.0 and later
+    </span>
+  </div>
+
+  <!-- Divider -->
+  <div> (wavy decorative border)
+  <div style="font: 600 14px 'ABC Favorit Mono'; color: #FFFCEA; text-transform: uppercase">
+    Also Available On
+  </div>
+
+  <!-- Platform Cards -->
+  <div style="flex; gap; justify-center">
+    <a href="[windows-url]" style="flex; p-12.8px; rounded-16px; w-270px; h-89px">
+      <img> (Arc Windows icon)
+      <div>
+        <div style="font-weight: bold">Windows</div>
+        <div>Download</div>
+      </div>
+    </a>
+    <a href="[ios-url]" style="same as above">
+      <img> (Arc iOS icon)
+      <div>
+        <div>iOS</div>
+        <div>Get it in the App Store →</div>
+      </div>
+    </a>
+  </div>
+
+  <!-- More Info Link -->
+  <a style="font: 600 13px Inter; color: #FFFCEA; text-decoration: none">
+    More info on supported and unsupported devices →
+  </a>
+</div>
+```
+
+**Details:**
+- Full-page deep indigo background (#2702C2) — darker than the homepage Arc Blue
+- Dia promo card at top: white bg, rounded, horizontal layout with text + screenshot
+- Large centered app icon above headline
+- Headline: 45.5px Marlin Soft SQ, bold, cream text, centered
+- Primary download button: white bg, deep indigo text, same style as homepage
+- Version info: 10px Inter, 600 weight, 70% opacity white
+- "Also Available On" label: 14px ABC Favorit Mono, uppercase, cream
+- Platform cards: 270x89px, 16px border-radius, flex layout with icon + text
+- Wavy decorative border separating primary download from secondary platforms
+
+---
+
+### Showcase (Feature Cards with Screenshots)
+
+> Source: https://arc.net/students — "Features so good, they feel illegal"
+
+**Structure:**
+```
+<div>
+  <!-- Section Header -->
+  <div>
+    <h2 style="font: 700 40px 'Marlin Soft SQ'; color: #3C3B3A; line-height: 46px">
+      Features so good, they feel illegal
+    </h2>
+    <p style="font: 500 20px Inter; color: #766E6A; line-height: 26px">
+      Smart downloads, split views, picture-in-picture,
+      <a style="text-decoration: underline">AI-powered features</a>, and more.
+      Arc is packed with features that help you stay on top of it all.
+    </p>
+  </div>
+
+  <!-- Feature Cards Grid -->
+  <div style="display: flex; gap; horizontal-scroll or grid-2col">
+    <!-- Feature Card -->
+    <div>
+      <div style="rounded-lg; overflow-hidden">
+        <img> (browser screenshot demonstrating the feature)
+      </div>
+      <div style="mt-small">
+        <p style="font: 400 Inter; color: #3C3B3A">
+          <em style="font-weight: bold; font-style: italic">Split View</em>
+          Multitask (or procrastinate) with up to three tabs side-by-side.
+        </p>
+      </div>
+    </div>
+    <!-- More feature cards: Easels, Tidy Downloads, Themes & Boosts, Arc Sync -->
+  </div>
+</div>
+```
+
+**Details:**
+- Section heading: 40px Marlin Soft SQ, bold, dark (#3C3B3A)
+- Body text: 20px Inter, medium weight, warm gray (#766E6A), 26px line-height
+- Inline links use underline text-decoration
+- Feature cards: screenshot image + label + description below
+- Feature label uses italic emphasis (`<em>`) with bold weight
+- Feature description follows the label inline in the same paragraph
+- Cards arranged in a 2-column layout (or horizontal scroll on narrower viewports)
+- Screenshots show real browser UI with rounded corners
+
+---
+
+### Stats
+
+> Source: https://arc.net/students — "Loved by students at 7,000 schools"
+
+**Structure:**
+```
+<div style="px-55px">
+  <h2 style="font: 700 40px 'Marlin Soft SQ'; color: #3C3B3A; line-height: 46px; letter-spacing: -2px">
+    Loved by students at 7,000 schools around the world
+  </h2>
+  <p style="font: 500 20px Inter; color: #766E6A; line-height: 26px">
+    A new semester. A smarter browser. Experience the browser that's
+    earning extra credit with students everywhere.
+  </p>
+</div>
+```
+
+**Details:**
+- Heading: 40px Marlin Soft SQ, bold, dark (#3C3B3A), -2px letter-spacing, 46px line-height
+- Body: 20px Inter, medium weight, warm gray (#766E6A), 26px line-height
+- Section padding: 55px horizontal
+- Stats are woven into the heading text (e.g., "7,000 schools") rather than displayed as standalone numbers
+- No separate stat cards or counters — Arc uses narrative stat integration
+- Typically followed by a visual section (e.g., interactive Spaces demo)
+
+---
+
+### Newsletter / Promotional Banner
+
+> Source: https://arc.net/students — "Arc for Students '24" section, and blog Dia banner
+
+**Structure:**
+```
+<div style="bg: #E1E0CE (darker cream); overflow: hidden; h-507px">
+  <!-- Sticker images -->
+  <img> (decorative sticker images flanking the content)
+
+  <!-- Scrolling Marquee -->
+  <div style="flex; animate-scroll">
+    <p>Arc for Students '24</p>
+    <!-- Repeated for seamless loop -->
+  </div>
+
+  <!-- Content -->
+  <div style="centered">
+    <h2 style="font: 700 40px 'Marlin Soft SQ'; color: #3C3B3A">
+      Arc for Students '24
+    </h2>
+    <img> (ambassador badge/illustration)
+    <p style="body text">
+      Applications are now closed for the Arc Ambassador program...
+    </p>
+    <a>
+      <button style="bg: #3C3B3A; color: white; font: 600 18px system-ui; px-32px; py-18px; rounded-14px">
+        Stay in the loop →
+      </button>
+    </a>
+  </div>
+</div>
+```
+
+**Details:**
+- Background: darker cream (#E1E0CE), distinct from main page cream
+- Overflow hidden with decorative sticker images
+- Horizontal scrolling marquee text for "Arc for Students '24"
+- Section heading: 40px Marlin Soft SQ, bold, dark
+- CTA button variant: dark bg (#3C3B3A), white text, 18px, 600 weight, 14px border-radius, generous padding (18px 32px)
+- Height: ~507px
+- This pattern is also used for the Dia banner on the blog page (deep indigo bg, 88px, full-width)
+
+---
+
+### How It Works
+
+> Source: https://arc.net/students — "Create separate Spaces" interactive section
+
+**Structure:**
+```
+<div style="px-55px">
+  <!-- Heading with interactive keyword highlights -->
+  <h2 style="font: 700 40px 'Marlin Soft SQ'; color: #3C3B3A; line-height: 46px; letter-spacing: -2px">
+    Create separate Spaces for
+    <span style="cursor: pointer"> (clickable, with icon)
+      <img> (emoji/icon)
+      classes,
+    </span>
+    <span style="cursor: pointer">
+      <img> (emoji/icon)
+      clubs,
+    </span>
+    <span style="cursor: pointer">
+      <img> (emoji/icon)
+      work,
+    </span>
+    and the rest of
+    <span style="color: different">your life</span>
+  </h2>
+
+  <p style="font: 500 20px Inter; color: #766E6A; line-height: 26px">
+    Arc is the first browser that organizes your busy life.
+    Everything finds its place — no more navigating endless windows and tabs.
+  </p>
+
+  <!-- Interactive Browser Demo -->
+  <div style="rounded-lg; overflow-hidden; border: subtle">
+    <!-- Browser window mockup with sidebar showing Spaces -->
+    <!-- Clicking keywords in heading switches the active Space in the demo -->
+    <div style="flex">
+      <div> (sidebar with tabs, spaces, + New Tab)
+      <div> (main content area showing website)
+    </div>
+    <!-- Dot navigation at bottom of sidebar -->
+    <div style="flex; gap; align-center">
+      <img> (trash icon)
+      <span>●</span> <span>●</span> <span>●</span>
+      <img> (+ icon)
+    </div>
+  </div>
+</div>
+```
+
+**Details:**
+- Heading has interactive clickable keywords with inline emoji/icons
+- Clicking a keyword (classes, clubs, work) switches the browser demo below to show that Space
+- Same typography as Stats heading: 40px Marlin Soft SQ, bold, dark, -2px letter-spacing
+- Body text: 20px Inter, medium weight, warm gray
+- Browser demo: large mockup with sidebar + main content, rounded corners
+- Dot navigation at bottom of sidebar indicates multiple Spaces
+- Section padding: 55px horizontal
+
+---
+
+## Sections Not Present Across Arc.net
+
+The following requested sections were **not found** across any Arc page:
+
+| Section | Notes |
+|---------|-------|
+| **About** | Company info lives at thebrowser.company (separate domain) |
+| **Comparison** | Arc does not use a competitor comparison table |
+| **Contact** | No contact form; support via resources.arc.net |
+| **Pricing** | Arc is free — no pricing section exists |
+| **Store** | No merchandise or paid products section |