/* ── Landing page ───────────────────────────────────────────────────────────
   Shares the app's cream/orange palette. Standalone from style.css so the
   marketing page can evolve without touching the tool's layout. */
:root {
    --bg: #FFF7ED;
    --panel: #FCEEDD;
    --panel-hi: #F8E4CC;
    --surface2: #FBF2E4;
    --border: #EDD5B0;
    --text: #DB3800;
    --ink: #4A2A18;          /* readable body copy — softer than pure accent */
    --muted: #B86030;
    --accent: #DB3800;
    --accent-h: #BA2F00;
    --success: #15803d;
    --danger: #991b1b;
    --radius: 10px;
    --maxw: 1080px;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 760px; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: rgba(252, 238, 221, 0.85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.nav .brand { display: flex; align-items: center; gap: 10px; }
.nav .brand h1 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--text);
}
.nav .spacer { margin-left: auto; }
.nav-link {
    color: var(--muted);
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: color .15s;
}
.nav-link:hover { color: var(--text); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, transform .05s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 18px -8px rgba(219, 56, 0, 0.6);
}
.btn-primary:hover { background: var(--accent-h); }
.btn-ghost {
    background: var(--panel-hi);
    color: var(--text);
    border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface2); }
.btn-lg { font-size: 16px; padding: 14px 28px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
    padding: 72px 0 56px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
}
.hero-eyebrow {
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 12px;
}
.hero h2 {
    font-size: 44px;
    line-height: 1.1;
    letter-spacing: -1px;
    color: var(--text);
    font-weight: 700;
    margin-bottom: 18px;
}
.hero h2 em { font-style: normal; color: var(--ink); }
.hero p.lead {
    font-size: 18px;
    color: var(--ink);
    max-width: 34ch;
    margin-bottom: 28px;
}
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .cta-note { font-size: 13px; color: var(--muted); margin-top: 14px; }

/* ── Section scaffolding ─────────────────────────────────────────────────── */
section { padding: 64px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-head h3 {
    font-size: 30px;
    letter-spacing: -0.5px;
    color: var(--text);
    margin-bottom: 12px;
}
.section-head p { font-size: 17px; color: var(--muted); }

/* ── How it works ────────────────────────────────────────────────────────── */
.steps-simple {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
    counter-reset: step;
    margin-bottom: 44px;
}
.steps-simple .step {
    display: flex;
    align-items: center;
    gap: 10px;
}
.steps-simple .step::before {
    counter-increment: step;
    content: counter(step);
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 50%;
    flex: none;
}
.steps-simple .step h4 { font-size: 16px; font-weight: 600; color: var(--text); }

/* ── Comparison table ────────────────────────────────────────────────────── */
.compare-wrap { overflow-x: auto; }
table.compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 760px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(74, 42, 24, 0.10), 0 2px 8px rgba(74, 42, 24, 0.05);
}
table.compare.compare-grouped { min-width: 1080px; }
table.compare th, table.compare td {
    padding: 14px 15px;
    text-align: left;
    font-size: 15px;
    border-bottom: 1px solid var(--border);
}
table.compare thead th {
    background: var(--panel-hi);
    color: var(--muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
table.compare thead th.us {
    color: #fff;
    background: var(--accent);
}
table.compare-grouped thead tr:first-child th {
    text-align: center;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
}
table.compare-grouped thead tr:first-child th:first-child { background: transparent; border-bottom: none; }
table.compare-grouped thead tr:last-child th { text-align: center; }

/* Group color-banding: subtle per-category tint tying the group label to its columns */
th.grp-diy   { color: var(--accent); border-bottom: 3px solid var(--accent) !important; }
th.grp-phone { color: var(--muted);  border-bottom: 3px solid var(--muted) !important; }
th.grp-mail  { color: var(--ink);    border-bottom: 3px solid var(--ink) !important; }
table.compare tbody td:nth-child(2),
table.compare tbody td:nth-child(3),
table.compare tbody td:nth-child(4) { background: rgba(219, 56, 0, 0.03); }
table.compare tbody td:nth-child(5) { background: rgba(184, 96, 48, 0.05); }
table.compare tbody td:nth-child(6),
table.compare tbody td:nth-child(7),
table.compare tbody td:nth-child(8) { background: rgba(74, 42, 24, 0.03); }

/* Zebra striping — layered on top of the column tint via a semi-transparent overlay */
table.compare tbody tr:nth-child(even) td { background-image: linear-gradient(rgba(74, 42, 24, 0.035), rgba(74, 42, 24, 0.035)); background-blend-mode: multiply; }

.compare-ico-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
}
.compare-ico {
    display: block;
    width: 20px;
    height: 20px;
    color: var(--accent);
}
.grp-diy-badge .compare-ico   { color: var(--accent); }
.grp-phone-badge .compare-ico { color: var(--muted); }
.grp-mail-badge .compare-ico  { color: var(--ink); }

table.compare td:first-child, table.compare th:first-child {
    font-weight: 700;
    color: var(--ink);
    background: var(--panel) !important;
}
table.compare tbody td:not(:first-child) {
    text-align: center;
    font-weight: 500;
    color: var(--ink);
}
table.compare td.us { background: rgba(219, 56, 0, 0.06); color: var(--text); font-weight: 600; }
table.compare tbody tr:last-child td { border-bottom: none; }
.tick { color: var(--success); font-weight: 700; }
.cross { color: var(--danger); font-weight: 700; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--border);
    padding: 28px 0;
    margin-top: 40px;
}
footer .wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
footer .muted { color: var(--muted); font-size: 14px; }
footer .spacer { margin-left: auto; }

/* ── Hero: 3D lifting photo mat ───────────────────────────────────────────── */
/* A perspective-tilted mat of scanned prints. Each lifts off toward the viewer
   and dissolves, in fast overlapping waves, then the mat clears and loops.
   Pure CSS; decorative (aria-hidden in the markup). */
.hero-mat { display: flex; align-items: center; justify-content: center; min-height: 340px; }
.hm-scene { perspective: 1050px; perspective-origin: 50% 42%; width: 380px; height: 270px; max-width: 100%; }
.hm-stack { position: relative; width: 380px; height: 270px; transform-style: preserve-3d; transform: rotateX(30deg); }

.hm-ground { position: absolute; left: 28px; top: 38px; width: 324px; height: 196px; border-radius: 16px;
    background: rgba(74,42,24,.30); filter: blur(22px); opacity: .4; transform: translateZ(-6px); }
.hm-mat { position: absolute; left: 24px; top: 32px; width: 332px; height: 206px; border-radius: 12px;
    background:
      repeating-linear-gradient(45deg, rgba(0,0,0,.015) 0 8px, transparent 8px 16px),
      linear-gradient(160deg, #EBECE6, #DBDCD4);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), inset 0 2px 12px rgba(0,0,0,.06);
    transform-style: preserve-3d; }

.hm-pos { position: absolute; transform-style: preserve-3d; }
.hm-print { transform-style: preserve-3d; background: #FCF7EF; padding: 5px; border-radius: 2.5px;
    box-shadow: 0 5px 11px rgba(74,42,24,.20), 0 1px 3px rgba(74,42,24,.16); will-change: transform, opacity; }
.hm-face { position: relative; overflow: hidden; border-radius: 1.5px; box-shadow: inset 0 0 0 1px rgba(74,42,24,.08); }

/* mini-scenes (fixed photo colours) */
.hm-sunset { background:
    radial-gradient(circle at 50% 46%, #FFE7A8 0 9%, rgba(255,205,130,.55) 10% 14%, transparent 15%),
    linear-gradient(180deg,#FFC38A 0%, #FF9A63 38%, #F1774A 49%, #D75E3B 50%, #A94836 76%, #7E3A30 100%); }
.hm-ocean { background:
    radial-gradient(circle at 74% 24%, #FFF4D8 0 6%, transparent 7%),
    linear-gradient(180deg,#CDEBF7 0%, #A9DAEF 47%, #2E86B0 49%, #1F6C97 62%, #164F73 100%); }
.hm-field { background:
    radial-gradient(circle at 24% 22%, #FFF0C0 0 7%, transparent 8%),
    linear-gradient(180deg,#C4E6F2 0%, #ADD9E7 32%, #E7C877 40%, #D3A24A 60%, #A9762E 100%); }
.hm-forest { background: linear-gradient(180deg,#CFEAB2 0%, #A9D48C 26%, #5E9A50 40%, #3C7439 100%); }
.hm-forest::before { content:""; position:absolute; inset:0; background:#2F5F32;
    clip-path: polygon(0 100%, 8% 60%, 16% 100%, 26% 52%, 36% 100%, 46% 58%, 56% 100%, 66% 48%, 78% 100%, 89% 56%, 100% 100%); }
.hm-mountain { background: linear-gradient(180deg,#DCEFF2 0%, #C3E2EA 46%, #9FCBD8 56%, #7FB0C0 100%); }
.hm-mountain::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg,#7E94A6,#5C7488);
    clip-path: polygon(0 100%, 18% 50%, 30% 72%, 48% 34%, 64% 64%, 80% 46%, 100% 68%, 100% 100%); }
.hm-mountain::after { content:""; position:absolute; inset:0; background:#F4FAFC;
    clip-path: polygon(44% 42%, 48% 34%, 53% 44%, 49% 48%); }

/* cartoon family group (original CSS art) */
.hm-portrait { background: linear-gradient(180deg,#FCE7CC 0%, #F6D0A6 56%, #ECBA86 100%); }
.hm-portrait::after { content:""; position:absolute; left:0; right:0; bottom:0; height:20%; background:#C98A57; }
.hm-fig { position:absolute; bottom:20%; border-radius:5px 5px 3px 3px; }
.hm-fig::before { content:""; position:absolute; left:50%; top:-40%;
    transform:translateX(-50%); width:96%; padding-bottom:96%; height:0; border-radius:50%; background:inherit; }
.hm-fa { left:12%; width:20%; height:48%; background:#B85C34; }
.hm-fb { left:40%; width:22%; height:56%; background:#7C5480; }
.hm-fc { left:69%; width:15%; height:34%; background:#3F6E9E; }

/* structured 2 rows × 3 cols, spaced apart, each print lightly rotated */
.hm-c1 { left: 48px;  top: 56px;  transform: rotateZ(-4deg); }
.hm-c2 { left: 152px; top: 56px;  transform: rotateZ(3deg); }
.hm-c3 { left: 278px; top: 56px;  transform: rotateZ(6deg); }
.hm-c4 { left: 48px;  top: 158px; transform: rotateZ(3deg); }
.hm-c5 { left: 163px; top: 140px; transform: rotateZ(-4deg); }
.hm-c6 { left: 256px; top: 158px; transform: rotateZ(-5deg); }

/* fast, overlapping lift sequence (not strictly row-order) */
.hm-c2 .hm-print { animation: hm-lift1 6s ease-in-out infinite; }
.hm-c4 .hm-print { animation: hm-lift2 6s ease-in-out infinite; }
.hm-c1 .hm-print { animation: hm-lift3 6s ease-in-out infinite; }
.hm-c6 .hm-print { animation: hm-lift4 6s ease-in-out infinite; }
.hm-c3 .hm-print { animation: hm-lift5 6s ease-in-out infinite; }
.hm-c5 .hm-print { animation: hm-lift6 6s ease-in-out infinite; }

@keyframes hm-lift1 {
    0%{opacity:0;transform:translateZ(0) translateY(4px) scale(.95)}
    5%{opacity:1;transform:translateZ(0) translateY(0) scale(1)}
    12%{opacity:1;transform:translateZ(0) translateY(0) scale(1);filter:blur(0)}
    26%{opacity:0;transform:translateZ(120px) translateY(-64px) scale(1.14);filter:blur(2.5px)}
    100%{opacity:0;transform:translateZ(120px) translateY(-64px) scale(1.14);filter:blur(2.5px)}
}
@keyframes hm-lift2 {
    0%{opacity:0;transform:translateZ(0) translateY(4px) scale(.95)}
    5%{opacity:1;transform:translateZ(0) translateY(0) scale(1)}
    20%{opacity:1;transform:translateZ(0) translateY(0) scale(1);filter:blur(0)}
    34%{opacity:0;transform:translateZ(120px) translateY(-64px) scale(1.14);filter:blur(2.5px)}
    100%{opacity:0;transform:translateZ(120px) translateY(-64px) scale(1.14);filter:blur(2.5px)}
}
@keyframes hm-lift3 {
    0%{opacity:0;transform:translateZ(0) translateY(4px) scale(.95)}
    5%{opacity:1;transform:translateZ(0) translateY(0) scale(1)}
    30%{opacity:1;transform:translateZ(0) translateY(0) scale(1);filter:blur(0)}
    44%{opacity:0;transform:translateZ(120px) translateY(-64px) scale(1.14);filter:blur(2.5px)}
    100%{opacity:0;transform:translateZ(120px) translateY(-64px) scale(1.14);filter:blur(2.5px)}
}
@keyframes hm-lift4 {
    0%{opacity:0;transform:translateZ(0) translateY(4px) scale(.95)}
    5%{opacity:1;transform:translateZ(0) translateY(0) scale(1)}
    40%{opacity:1;transform:translateZ(0) translateY(0) scale(1);filter:blur(0)}
    54%{opacity:0;transform:translateZ(120px) translateY(-64px) scale(1.14);filter:blur(2.5px)}
    100%{opacity:0;transform:translateZ(120px) translateY(-64px) scale(1.14);filter:blur(2.5px)}
}
@keyframes hm-lift5 {
    0%{opacity:0;transform:translateZ(0) translateY(4px) scale(.95)}
    5%{opacity:1;transform:translateZ(0) translateY(0) scale(1)}
    52%{opacity:1;transform:translateZ(0) translateY(0) scale(1);filter:blur(0)}
    66%{opacity:0;transform:translateZ(120px) translateY(-64px) scale(1.14);filter:blur(2.5px)}
    100%{opacity:0;transform:translateZ(120px) translateY(-64px) scale(1.14);filter:blur(2.5px)}
}
@keyframes hm-lift6 {
    0%{opacity:0;transform:translateZ(0) translateY(4px) scale(.95)}
    5%{opacity:1;transform:translateZ(0) translateY(0) scale(1)}
    64%{opacity:1;transform:translateZ(0) translateY(0) scale(1);filter:blur(0)}
    78%{opacity:0;transform:translateZ(120px) translateY(-64px) scale(1.14);filter:blur(2.5px)}
    100%{opacity:0;transform:translateZ(120px) translateY(-64px) scale(1.14);filter:blur(2.5px)}
}

/* ── Alternating section band ────────────────────────────────────────────── */
.alt-band { background: var(--panel-hi); }

/* ── Fine print note ─────────────────────────────────────────────────────── */
.fine-note {
    font-size: 14px;
    color: var(--muted);
    text-align: center;
    max-width: 62ch;
    margin: 26px auto 0;
    line-height: 1.6;
}
.fine-note a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.fine-note a:hover { text-decoration-color: var(--accent); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; padding: 48px 0 40px; gap: 32px; }
    .hero h2 { font-size: 36px; }
    .steps-simple { gap: 20px; }
    section { padding: 48px 0; }
}

/* Phones: the top nav is a single no-wrap row, so keep only the brand + CTA.
   The Guides/Privacy links stay reachable in the footer. */
@media (max-width: 560px) {
    .nav { padding: 12px 16px; gap: 8px; }
    .nav .nav-link { display: none; }
    .nav .btn-primary { padding: 9px 16px; font-size: 14px; }
    .wrap { padding: 0 18px; }
    .hero { padding: 36px 0 32px; }
    .hero h2 { font-size: 30px; letter-spacing: -0.5px; }
    .hero p.lead { font-size: 16px; }
    .section-head h3 { font-size: 24px; }
    footer .wrap { row-gap: 6px; }
}

/* keep the fixed-width 3D scene from overflowing narrow phones */
@media (max-width: 420px) {
    .hero-mat { min-height: 300px; }
    .hm-scene { transform: scale(0.82); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    /* hold the mat as a full, still page of prints */
    .hm-print { animation: none !important; opacity: 1 !important; transform: none !important; }
}