/* FOREWORD website — shared styles. Single CSS file for all pages so the site
   stays trivially deployable as a flat GitHub Pages bundle. Brand:
     - Saturated blue (matches the app's HeaderBackground asset, light mode)
     - Deep navy in dark mode (matches the app's HeaderBackground dark variant)
     - Serif heavy headlines (matches the FOREWORD wordmark)
     - System UI body for fast load + native feel
*/

:root {
    --accent: #327CE2;        /* header blue */
    --accent-dark: #14306B;   /* header navy (used in fixed header bg + tile text color) */
    --gold: #F2C84D;          /* prestige ring color from achievements */
    --bg: #FFFFFF;
    --bg-muted: #F5F5F7;
    --text: #1C1C1E;
    --text-muted: #6B6B70;
    --border: #E5E5EA;
    --max-width: 720px;
}

/* Force light scheme regardless of OS preference. Site has a dark navy
   fixed header that already provides high contrast; swapping the body to
   black on dark-mode preference made the page feel inconsistent across
   devices (mobile browsers often default to light, desktop browsers
   inherit OS). Locking color-scheme: light also keeps native widgets
   (scrollbars, form controls, focus rings) in their light variants. */
html {
    color-scheme: light;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Header bar — mirrors the app's blue header.
   Fixed to the top with a frosted-glass effect: semi-transparent dark navy
   bg + 20px backdrop blur lets the page content show through gently as the
   user scrolls. Decorative tile "ticker" sits inside the header (above the
   blur layer); page content scrolls UNDER it.

   Browsers without backdrop-filter (older Firefox, ancient Safari) get the
   solid var(--accent-dark) background — graceful degradation. */
.site-header {
    background: rgba(20, 48, 107, 0.78);    /* navy at 78% — fallback solid via @supports below */
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    color: white;
    padding: 14px 24px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    overflow: hidden;
}

@supports not (backdrop-filter: blur(1px)) {
    .site-header { background: var(--accent-dark); }
}

.site-header .wordmark {
    position: relative;
    z-index: 2;
}

/* Small "Download on the App Store" badge anchored to the right side of
   the fixed header. White variant since the header is dark navy. Hidden
   on very narrow viewports so it doesn't crowd the centered wordmark. */
.site-header .header-cta {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 3;
    line-height: 0;
    transition: opacity 0.15s;
}

.site-header .header-cta:hover {
    opacity: 0.85;
    text-decoration: none;
}

.site-header .header-cta img {
    height: 30px;
    width: auto;
    display: block;
}

@media (max-width: 480px) {
    .site-header .header-cta { display: none; }
}

/* Wordmark rendered as 3 puzzle tiles: FORE | W | ORD.
   The W is styled as the "thread tile" — gold fill, white letters —
   bridging the two halves of the brand name. Mirrors the app's
   thread-tile mechanic in the live wordmark. */
.site-header a.wordmark {
    display: inline-flex;
    gap: 3px;
    align-items: stretch;
    text-decoration: none;
    /* Soft drop shadow on the tile group keeps it readable against the
       decorative tile-strip behind it without needing per-tile shadows. */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.30));
    transition: transform 0.15s;
}

.site-header a.wordmark:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.site-header .wordmark-tile {
    background: white;
    color: var(--accent-dark);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", system-ui, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.06em;
    padding: 6px 9px;
    border-radius: 6px;
    line-height: 1;
    text-transform: uppercase;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Subtle puzzle-piece tilt — same recipe as the hero wordmark, dialed
   down to the header's smaller tile size so it reads as personality
   without looking jittery. Hover snaps the tiles flat for a small
   "click into place" reveal. The group's own translateY(-1px) hover
   transform still applies on top, so the trio lifts as a unit while
   each tile straightens. */
.site-header .wordmark-tile:nth-child(1) {
    transform: rotate(-2deg) translateY(1px);
}
.site-header .wordmark-tile:nth-child(2) {
    transform: rotate(1.5deg) translateY(-1.5px);
}
.site-header .wordmark-tile:nth-child(3) {
    transform: rotate(-1.5deg) translateY(0.5px);
}

.site-header a.wordmark:hover .wordmark-tile {
    transform: rotate(0deg) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .site-header .wordmark-tile {
        transition: none;
    }
    .site-header a.wordmark:hover .wordmark-tile {
        /* Keep the static tilt on hover under reduced motion */
        transform: revert-layer;
    }
}

/* The middle "W" — the FOREWORD app icon itself. Embeds the brand mark
   directly into the wordmark; the icon's W-thread design serves as the
   word's W.

   Sizing: FORE/ORD tiles are font-size 13px + padding 6px×2 + line-height 1
   = 25px tall. We explicitly size this tile to 25×25 so it stays square
   AND visually aligned with the text tiles. align-self: center prevents
   the flex parent's `align-items: stretch` from inflating it (which was
   the previous bug — a stretched 32×32 img dragged the whole row to 32px
   tall and the W tile dwarfed the letters). */
.site-header .wordmark-tile.thread {
    background: transparent;
    padding: 0;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
}

.site-header .wordmark-tile.thread img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Tile decoration ticker — fixed positions chosen to look organic but stay
   off the centered wordmark. Small monospace-ish tile pills. */
.tile-strip {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.tile-strip .deco {
    position: absolute;
    background: white;
    color: var(--accent-dark);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    font-weight: 800;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
    opacity: 0.30;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

@media (max-width: 639px) {
    /* Below 640px, the wordmark needs the full header width — hide decoration. */
    .tile-strip { display: none; }
}

/* Main content container.
   padding-top accounts for the fixed header (~54px tall: 14×2 padding +
   25px wordmark + 1px border) + breathing room. */
main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 96px 24px 80px;
}

h1 {
    font-family: ui-serif, Georgia, "Times New Roman", serif;
    font-weight: 800;
    font-size: 36px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}

h2 {
    font-size: 22px;
    font-weight: 700;
    margin-top: 36px;
    margin-bottom: 12px;
}

h3 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 8px;
}

p {
    margin-bottom: 16px;
    color: var(--text);
}

ul, ol {
    margin: 0 0 16px 28px;
}

li {
    margin-bottom: 8px;
}

strong {
    font-weight: 600;
}

.muted {
    color: var(--text-muted);
}

.small {
    font-size: 14px;
}

.last-updated {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

/* Hero — index page */
.hero {
    text-align: center;
    padding: 24px 0 48px;
}

/* Hero wordmark — same FORE | W | ORD tile composition as the header but
   blown up to logo scale and given a subtle "loose tiles dropped into
   place" tilt. Replaces a plain <h1>FOREWORD</h1>; we keep the <h1> as
   the outer element so heading semantics + SEO survive.

   font-size: 0 on the flex container kills the inline-flex baseline gap
   that would otherwise creep in from the h1 inheriting body font-size.
   Each child tile re-asserts its own font-size, so this only affects the
   between-tile whitespace. */
.hero-wordmark {
    display: inline-flex;
    gap: 6px;
    align-items: stretch;
    margin: 0 auto 16px;
    font-size: 0;
    line-height: 1;
    letter-spacing: normal;
    filter: drop-shadow(0 6px 14px rgba(20, 48, 107, 0.22));
}

.hero-wordmark .wordmark-tile {
    background: var(--accent);
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", system-ui, sans-serif;
    font-weight: 800;
    font-size: 52px;
    letter-spacing: 0.04em;
    padding: 18px 22px;
    border-radius: 16px;
    line-height: 1;
    text-transform: uppercase;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Subtle puzzle-piece tilt — each tile rotates a few degrees and shifts
   vertically so the three pieces read as loose tiles dropped into the
   chain. Hover snaps them flat for a tiny "click into place" reveal. */
.hero-wordmark .wordmark-tile:nth-child(1) {
    transform: rotate(-2.5deg) translateY(2px);
}
.hero-wordmark .wordmark-tile:nth-child(2) {
    transform: rotate(1.8deg) translateY(-3px);
}
.hero-wordmark .wordmark-tile:nth-child(3) {
    transform: rotate(-1.5deg) translateY(1px);
}

.hero-wordmark:hover .wordmark-tile {
    transform: rotate(0deg) translateY(0);
}

/* Thread tile — the app icon as the W. Sized to match the natural
   FORE/ORD tile height (font 52px + padding 18×2 = 88px). */
.hero-wordmark .wordmark-tile.thread {
    background: transparent;
    padding: 0;
    width: 88px;
    height: 88px;
    border-radius: 18px;
    overflow: hidden;
    align-self: center;
    flex: 0 0 auto;
}

.hero-wordmark .wordmark-tile.thread img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Reduced motion: skip the hover transform animation entirely.
   The static tilt remains (it's not motion, just composition). */
@media (prefers-reduced-motion: reduce) {
    .hero-wordmark .wordmark-tile {
        transition: none;
    }
    .hero-wordmark:hover .wordmark-tile {
        /* preserve the static tilt — don't snap on hover */
        transform: revert-layer;
    }
}

@media (max-width: 480px) {
    .hero-wordmark .wordmark-tile {
        font-size: 34px;
        padding: 13px 15px;
        border-radius: 12px;
    }
    .hero-wordmark .wordmark-tile.thread {
        width: 60px;
        height: 60px;
        border-radius: 13px;
    }
}

.hero .tagline {
    font-family: ui-serif, Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 22px;
    color: var(--text-muted);
    margin: 8px 0 32px;
}

.hero-pitch {
    font-size: 19px;
    color: var(--text);
    max-width: 580px;
    margin: 0 auto 32px;
}

/* Apple "Download on the App Store" badge.
   Per Apple's marketing guidelines (developer.apple.com/app-store/marketing/guidelines/):
     - Use the official badge artwork only — no custom typography or recoloring
     - Minimum height: 40pt on web
     - Clear space: at least 1/10th the badge height around all sides
     - Black variant on light backgrounds, white variant on dark backgrounds
   Badge SVG natively 119.66 × 40, scales perfectly via height: */
.app-store-badge {
    display: inline-block;
    margin-top: 16px;
    line-height: 0;            /* prevents inline-image baseline gap */
    transition: opacity 0.15s;
}

.app-store-badge:hover {
    opacity: 0.85;
    text-decoration: none;
}

.app-store-badge img {
    height: 56px;              /* hero CTA size — well above 40pt minimum */
    width: auto;
    display: block;
}

/* Footer variant — smaller but still ≥40pt (Apple's minimum) */
.app-store-badge.footer-cta {
    margin-bottom: 16px;
    padding: 0;                /* override the .footer-cta capsule padding */
    background: none;
    border-radius: 0;
}

.app-store-badge.footer-cta img {
    height: 40px;              /* exactly Apple's minimum web badge height */
}

/* Page is forced light-mode (see :root section), so always show the
   black-on-light badge variant. The .badge-dark <img> is no longer
   rendered in HTML, but kept selector here for safety in case it
   reappears in legacy markup. */
.app-store-badge .badge-dark { display: none; }

/* Preview video — autoplaying silent loop centerpiece. Sits between the hero
   and the static screenshot strip. autoplay+muted+playsinline are required
   for mobile Safari to play without a tap; loop keeps it running for any
   visitor who pauses to read the page. */
.preview-video {
    margin: 48px auto 16px;
    max-width: 320px;        /* phone-aspect cap so the video doesn't overwhelm copy */
    text-align: center;
}

.preview-video video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 22px;
    box-shadow:
        0 12px 40px rgba(20, 48, 107, 0.28),
        0 2px 6px rgba(0, 0, 0, 0.10);
    background: var(--bg-muted);   /* prevents bg flash before first frame paints */
}

/* Screenshots strip — between hero and "How it works".
   Layout strategy:
     - Desktop (≥920px): 4 phones in a row, evenly spaced
     - Tablet (640-919px): 2x2 grid
     - Mobile (<640px): horizontal scroll-snap carousel — Apple marketing standard,
       lets the user thumb through without crushing each phone to thumbnail width
*/
.screenshots-strip {
    margin: 56px 0 16px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 0 4px;
}

.screenshots-strip figure {
    margin: 0;
    text-align: center;
}

.screenshots-strip img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    box-shadow:
        0 6px 24px rgba(20, 48, 107, 0.20),       /* main lift */
        0 1px 3px rgba(0, 0, 0, 0.08);             /* edge crispness */
    background: var(--bg-muted);                   /* prevents white-edge flash on dark mode */
}

.screenshots-strip figcaption {
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

@media (max-width: 919px) {
    .screenshots-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 639px) {
    /* Mobile: switch to horizontal scroll-snap carousel.
       Each phone shows at ~75% of viewport width so the next one peeks. */
    .screenshots-strip {
        display: flex;
        grid-template-columns: none;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 16px;
        padding: 0 16px;
        margin-left: -24px;          /* break out of <main> padding for full-bleed scroll */
        margin-right: -24px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;       /* Firefox */
    }
    .screenshots-strip::-webkit-scrollbar { display: none; }   /* WebKit */

    .screenshots-strip figure {
        flex: 0 0 75%;
        scroll-snap-align: center;
    }

    .screenshots-strip img {
        border-radius: 14px;
    }
}

/* Feature grid — index page "What's in it" section */
.features {
    margin: 48px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.feature {
    padding: 24px 20px;
    background: var(--bg-muted);
    border-radius: 12px;
    border: 1px solid var(--border);
    text-align: center;
}

.feature .feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    background: var(--accent);
    color: white;
    border-radius: 12px;
}

.feature .feature-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feature h3 {
    margin-top: 0;
    color: var(--accent);
}

.feature p {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0;
}

/* Footer */
footer {
    border-top: 1px solid var(--border);
    padding: 32px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    background: var(--bg-muted);
}

footer a {
    color: var(--text-muted);
    margin: 0 12px;
}

footer a:hover {
    color: var(--accent);
}

footer .footer-cta {
    display: inline-block;
    margin-bottom: 16px;
    padding: 10px 22px;
    background: var(--accent);
    color: white;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

footer .footer-cta:hover {
    color: white;
    opacity: 0.85;
    text-decoration: none;
}

footer .footer-links {
    margin-top: 8px;
}

footer .copyright {
    margin-top: 12px;
    font-size: 13px;
}

footer .footer-aside {
    max-width: 540px;
    margin: 16px auto 0;
    font-size: 13px;
    line-height: 1.55;
    font-style: italic;
    color: var(--text-muted);
}

footer .footer-aside a {
    margin: 0;
    font-style: normal;
    border-bottom: 1px dotted currentColor;
    text-decoration: none;
}

footer .footer-aside a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Privacy + Terms — table of contents on long pages */
.toc {
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 16px 16px 36px;
    margin: 24px 0 36px;
}

.toc h3 {
    margin-top: 0;
    margin-left: -20px;
    margin-bottom: 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    list-style: none;
}

.toc ol {
    margin: 0;
}

.toc li {
    margin-bottom: 4px;
}

/* Tables in legal pages */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 15px;
}

th, td {
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--border);
}

th {
    background: var(--bg-muted);
    font-weight: 600;
}