/* =========================================================================
   TapYap marketing site — shared styles.

   Brand vocabulary mirrors the app's:
     coral  #FF5B6B  — primary CTA, accents
     ink    #1A1F2A  — body text
     paper  #FFFCF5  — page background
     smoke  #6E7B8E  — secondary text
     mint   #4ECDC4  — secondary accent (mesh / offline section)
     butter #F5C544  — subtle warm tint

   The site is built to be hosted as plain static files. No JS deps, no
   Tailwind, no build step. Drop it in S3 / Netlify / GitHub Pages — or
   serve from the existing Go backend's static dir if you'd rather.
   ========================================================================= */

:root {
    --coral: #FF5B6B;
    --coral-deep: #E84455;
    --ink: #1A1F2A;
    --ink-soft: #2C3340;
    --paper: #FFFCF5;
    --paper-warm: #FFF5E6;
    --smoke: #6E7B8E;
    --smoke-faint: #B0BAC8;
    --mint: #4ECDC4;
    --mint-deep: #2BA39B;
    --butter: #F5C544;
    --line: #E8E0D0;
    --shadow-soft: 0 4px 24px rgba(26, 31, 42, 0.06);
    --shadow-pop: 0 18px 48px rgba(255, 91, 107, 0.18);
    --radius: 18px;
    --radius-lg: 28px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
                 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--coral-deep);
    text-decoration: none;
    transition: opacity 0.15s ease;
}
a:hover { opacity: 0.75; }

img { max-width: 100%; display: block; }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 28px;
}

/* ---------------------------------------------------------------- nav --- */
.nav {
    position: sticky;
    top: 0;
    background: rgba(255, 252, 245, 0.85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid rgba(232, 224, 208, 0.5);
    z-index: 100;
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 28px;
    max-width: 1100px;
    margin: 0 auto;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.brand img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}
.nav-links {
    display: flex;
    gap: 28px;
    font-size: 14px;
    font-weight: 500;
    color: var(--smoke);
}
.nav-links a { color: var(--smoke); }
.nav-links a:hover { color: var(--ink); opacity: 1; }

@media (max-width: 700px) {
    .nav-links { display: none; }
}

/* ---------------------------------------------------------------- hero --- */
.hero {
    padding: 80px 0 100px;
    text-align: center;
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
}
.hero h1 {
    font-size: clamp(40px, 7vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    font-weight: 800;
    margin: 0 0 18px;
    color: var(--ink);
}
.hero h1 .accent {
    background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero .lede {
    font-size: clamp(18px, 2.4vw, 22px);
    color: var(--smoke);
    max-width: 620px;
    margin: 0 auto 40px;
    line-height: 1.45;
}
.hero .promise {
    display: inline-block;
    padding: 7px 16px;
    background: rgba(255, 91, 107, 0.10);
    color: var(--coral-deep);
    border-radius: 99px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.hero-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 28px;
    border-radius: 22px;
    box-shadow: var(--shadow-pop);
}

/* Store badges — official Apple + Google images. Both are vendor-supplied
   so we don't restyle them; we just normalize displayed height + lift on
   hover. Google's badge ships with significant internal whitespace (it's
   designed for bus shelters), so we render it taller and crop with
   negative margin so the two badges visually align. */
.store-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 8px;
}
.store-badge {
    display: inline-block;
    transition: transform 0.18s ease;
    line-height: 0;
}
.store-badge:hover {
    transform: translateY(-2px);
    opacity: 1;
}
.store-badge img {
    height: 56px;
    width: auto;
    display: block;
}
/* Google's badge has ~14% internal whitespace; render at the same visual
   height as Apple's by upsizing + cropping with negative margin. */
.store-badge:nth-child(2) img {
    height: 80px;
    margin: -12px 0;
}

/* ------------------------------------------------------------- section --- */
section {
    padding: 90px 0;
}
section.tinted { background: var(--paper-warm); }
section.dark {
    background: var(--ink);
    color: white;
}
section.dark h2, section.dark h3 { color: white; }
section.dark p { color: rgba(255,255,255,0.78); }

.eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--coral-deep);
    margin: 0 0 14px;
}
section.dark .eyebrow { color: var(--mint); }

h2 {
    font-size: clamp(32px, 4.5vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 800;
    margin: 0 0 20px;
    color: var(--ink);
}
h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.section-lede {
    font-size: 19px;
    color: var(--smoke);
    max-width: 640px;
    line-height: 1.55;
    margin: 0 0 56px;
}

/* ------------------------------------------------- "how it works" steps - */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
@media (max-width: 880px) {
    .steps { grid-template-columns: 1fr; gap: 24px; }
}
.step {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.step:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
}
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%);
    color: white;
    border-radius: 12px;
    font-weight: 800;
    font-size: 17px;
    margin-bottom: 22px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--smoke); margin: 0; }

/* ----------------------------------------------- diagram of two-degree --- */
.network-diagram {
    margin-top: 56px;
    padding: 50px 32px;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    text-align: center;
}
.network-svg { max-width: 720px; margin: 0 auto; }
.network-caption {
    color: var(--smoke);
    font-size: 15px;
    margin: 18px auto 0;
    max-width: 520px;
    line-height: 1.5;
}

/* ----------------------------------------------- features grid pattern --- */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 880px) {
    .features { grid-template-columns: 1fr; }
}
.feature {
    padding: 24px 0;
}
.feature-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 91, 107, 0.10);
    color: var(--coral-deep);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}
.feature h3 { margin-bottom: 6px; font-size: 19px; }
.feature p { color: var(--smoke); margin: 0; font-size: 15.5px; line-height: 1.5; }

/* ------------------------------------------------------- screenshots --- */
.screenshots {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
}
.phone-frame {
    width: 280px;
    aspect-ratio: 9/19;
    background: var(--ink);
    border: 8px solid var(--ink);
    border-radius: 38px;
    box-shadow: 0 20px 60px rgba(26, 31, 42, 0.22);
    overflow: hidden;
    position: relative;
}
.phone-frame::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 22px;
    background: var(--ink);
    border-radius: 0 0 14px 14px;
    z-index: 2;
}
.phone-frame .screenshot-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--paper-warm) 0%, white 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--smoke);
    text-align: center;
    padding: 24px;
    font-size: 13px;
    line-height: 1.5;
}
.phone-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------- offline section --- */
.offline-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
@media (max-width: 800px) {
    .offline-grid { grid-template-columns: 1fr; }
}
.offline-grid h2 { color: white; }
.offline-grid p { color: rgba(255,255,255,0.78); margin-bottom: 18px; }
.offline-grid .pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}
.offline-grid .pill {
    background: rgba(78, 205, 196, 0.14);
    color: var(--mint);
    padding: 7px 14px;
    border-radius: 99px;
    font-weight: 500;
    font-size: 14px;
    border: 1px solid rgba(78, 205, 196, 0.22);
}

/* -------------------------------------------------------- final CTA --- */
.final-cta {
    text-align: center;
    padding: 100px 0 120px;
    background: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
}
.final-cta h2 {
    margin-bottom: 18px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.final-cta .section-lede {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 36px;
}

/* ---------------------------------------------------------- footer --- */
footer {
    background: var(--ink);
    color: rgba(255,255,255,0.6);
    padding: 60px 0 36px;
    font-size: 14.5px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}
@media (max-width: 760px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.footer-brand { color: white; font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.footer-tagline { color: rgba(255,255,255,0.55); margin: 0; font-size: 14px; line-height: 1.55; }
footer h4 {
    color: white;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 14px;
    font-weight: 700;
}
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: 8px; }
footer a { color: rgba(255,255,255,0.7); }
footer a:hover { color: white; opacity: 1; }
.footer-bottom {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    color: rgba(255,255,255,0.45);
    font-size: 13px;
}

/* ============================================================ legal pages */
.legal-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 60px 28px 100px;
    line-height: 1.7;
}
.legal-page h1 {
    font-size: 42px;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
    color: var(--ink);
}
.legal-page .updated {
    color: var(--smoke);
    font-size: 14px;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}
.legal-page h2 {
    font-size: 24px;
    margin: 40px 0 12px;
    letter-spacing: -0.01em;
}
.legal-page h3 {
    font-size: 18px;
    margin: 28px 0 8px;
    color: var(--ink);
}
.legal-page p, .legal-page li {
    color: var(--ink-soft);
    font-size: 16.5px;
}
.legal-page ul, .legal-page ol {
    padding-left: 24px;
    margin: 8px 0 16px;
}
.legal-page li { margin-bottom: 6px; }
.legal-page strong { color: var(--ink); font-weight: 600; }
.legal-page .callout {
    background: var(--paper-warm);
    border-left: 4px solid var(--coral);
    padding: 16px 20px;
    border-radius: 0 12px 12px 0;
    margin: 24px 0;
}
.legal-page .callout p { margin: 0; }
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--smoke);
    font-size: 14px;
    margin-bottom: 32px;
    font-weight: 500;
}
.back-link:hover { color: var(--ink); opacity: 1; }

/* ----- security section (TYSPv1) ----- */
.security-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 36px;
    margin-bottom: 36px;
}
@media (max-width: 880px) {
    .security-grid { grid-template-columns: 1fr; gap: 22px; }
}
.sec-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px 26px;
}
.sec-card h3 {
    margin-bottom: 12px;
    font-size: 19px;
}
.sec-card p {
    color: var(--smoke);
    margin: 0;
    line-height: 1.6;
}
.tech-paragraph {
    background: var(--cloud, #F2EBE3);
    border-left: 3px solid var(--mint);
    padding: 22px 26px;
    border-radius: 0 12px 12px 0;
    color: var(--smoke);
    line-height: 1.7;
    font-size: 15px;
    margin: 36px 0 28px 0;
}
.tech-paragraph strong { color: var(--ink); }
.audit-note {
    color: var(--smoke);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 20px;
    opacity: 0.85;
}

/* ----- security comparison + privacy modes (TYSPv1) ----- */
.security-h3 {
    margin-top: 56px;
    margin-bottom: 14px;
    font-size: 22px;
    color: var(--ink);
}
.comparison-lede {
    color: var(--smoke);
    line-height: 1.7;
    margin-bottom: 22px;
}
.comparison-wrap {
    overflow-x: auto;
    margin-bottom: 18px;
}
table.comparison {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-size: 14.5px;
}
table.comparison th,
table.comparison td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    line-height: 1.45;
}
table.comparison thead th {
    background: var(--cloud, #F2EBE3);
    font-weight: 700;
    color: var(--ink);
}
table.comparison thead th:nth-child(2),
table.comparison thead th:nth-child(3) {
    width: 25%;
}
table.comparison tbody tr:last-child td { border-bottom: 0; }
table.comparison td.yes      { color: #1F7A47; font-weight: 600; }
table.comparison td.no       { color: var(--coral-deep); }
table.comparison td.partial  { color: #A86A00; }
table.comparison td.roadmap  { color: var(--smoke); font-style: italic; }
table.comparison .muted      { color: var(--smoke); font-size: 12.5px; font-weight: normal; }

.comparison-note {
    color: var(--smoke);
    font-size: 14.5px;
    line-height: 1.6;
    margin-top: 6px;
}

.max-sec-list {
    list-style: disc;
    padding-left: 22px;
    margin: 12px 0 18px 0;
    color: var(--smoke);
    line-height: 1.7;
}
.max-sec-list li { margin-bottom: 8px; }
.max-sec-list strong { color: var(--ink); }
.max-sec-perf {
    color: var(--smoke);
    font-size: 14.5px;
    line-height: 1.6;
    margin-bottom: 24px;
}

@media (max-width: 720px) {
    table.comparison th, table.comparison td { padding: 10px 12px; font-size: 13.5px; }
}