/* ════════════════════════════════════════════════════════════════════════
   public/css/landing.css
   Loaded by landing.html only. Marketing-site styles: nav, hero,
   plan-output (3D stack), live builder demo, How It Works, pricing, footer.
══════════════════════════════════════════════════════════════════════════ */

  /* ════════════════════════════════════
     LANDING PAGE STYLES
  ════════════════════════════════════ */

  /* NAV */
  #view-landing nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    padding: 0 56px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .nav-logo {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 22px;
    color: var(--black);
    text-decoration: none;
    letter-spacing: -0.5px;
  }
  .nav-logo span { color: var(--grey-light); }

  .nav-right { display: flex; align-items: center; gap: 32px; }

  .nav-link {
    text-decoration: none;
    color: var(--grey-mid);
    font-size: 13px;
    transition: color 0.2s;
  }
  #view-landing .nav-link:hover { color: var(--black); }

  .nav-cta {
    background: var(--black);
    color: var(--white);
    padding: 9px 20px;
    border-radius: 2px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: opacity 0.2s;
    cursor: pointer;
    border: none;
    font-family: 'DM Sans', sans-serif;
  }
  .nav-cta:hover { opacity: 0.75; }

  /* HERO */
  .hero {
    padding: 148px 56px 80px;
    max-width: 1080px;
    margin: 0 auto;
  }

  .hero-eyebrow {
    font-size: 16px; font-weight: 500; letter-spacing: 0.12em;
    color: var(--grey-mid); text-transform: uppercase; margin-bottom: 28px;
    opacity: 0; animation: fadeUp 0.6s ease forwards;
  }

  .hero-headline {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 68px; line-height: 1.05; letter-spacing: -2px;
    max-width: 760px; margin-bottom: 32px;
    opacity: 0; animation: fadeUp 0.6s ease 0.1s forwards;
  }
  .hero-headline em { font-style: italic; color: var(--grey-light); }

  .hero-sub {
    font-size: 18px; color: var(--grey-dark); font-weight: 300;
    line-height: 1.75; max-width: 540px; margin-bottom: 48px;
    opacity: 0; animation: fadeUp 0.6s ease 0.2s forwards;
  }

  .hero-actions {
    display: flex; align-items: center; gap: 28px;
    opacity: 0; animation: fadeUp 0.6s ease 0.3s forwards;
  }

  .btn-primary {
    background: var(--black); color: var(--white); padding: 15px 36px;
    border-radius: 2px; text-decoration: none; font-size: 12px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase; transition: opacity 0.2s;
    cursor: pointer; border: none; font-family: 'DM Sans', sans-serif; display: inline-block;
  }
  .btn-primary:hover { opacity: 0.75; }

  /* Secondary CTA — outlined, sits well under hero illustrations without
     competing with .btn-primary for visual weight. */
  .btn-secondary {
    background: transparent; color: var(--black); padding: 14px 30px;
    border: 1.5px solid var(--black); border-radius: 2px; text-decoration: none;
    font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer; font-family: 'DM Sans', sans-serif; display: inline-block;
    transition: background 0.2s, color 0.2s;
  }
  .btn-secondary:hover { background: var(--black); color: var(--white); }

  .btn-text {
    color: var(--grey-mid); text-decoration: none; font-size: 13px;
    border-bottom: 1px solid var(--border); padding-bottom: 1px; transition: color 0.2s;
  }
  #view-landing .btn-text:hover { color: var(--black); }

  .hero-sub-clear {
    font-family: 'DM Serif Display', Georgia, serif;
    font-style: italic;
    font-size: 1.08em;
  }

  .hero-price-note {
    margin-top: 20px; font-size: 12px; color: var(--grey-mid);
    opacity: 0; animation: fadeUp 0.6s ease 0.4s forwards;
  }

  /* PLAN PREVIEW */
  .plan-preview { max-width: 1080px; margin: 0 auto 100px; padding: 0 56px; }

  .preview-label {
    font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--grey-mid); margin-bottom: 20px; text-align: center;
  }

  .preview-card {
    border: 1px solid var(--border); border-radius: 3px; overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.08);
  }

  .preview-bar {
    background: var(--black); padding: 14px 28px; display: flex;
    justify-content: space-between; align-items: center;
  }

  .preview-bar-logo { font-family: 'DM Serif Display', Georgia, serif; font-size: 14px; color: var(--white); }
  .preview-bar-logo span { color: rgba(255,255,255,0.3); }
  .preview-bar-client { font-size: 10px; color: rgba(255,255,255,0.35); letter-spacing: 0.14em; text-transform: uppercase; }

  .preview-content { padding: 36px 28px 28px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; }

  .preview-section-label { font-size: 9px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey-mid); margin-bottom: 12px; }

  .preview-page-title { font-family: 'DM Serif Display', Georgia, serif; font-size: 26px; letter-spacing: -0.5px; margin-bottom: 4px; }
  .preview-page-sub { font-size: 10px; color: var(--grey-mid); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; }
  .preview-hr { height: 1px; background: var(--border); margin-bottom: 20px; }

  .preview-actions-list { display: flex; flex-direction: column; gap: 8px; }

  .preview-action { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--grey-pale); border-radius: 2px; }
  .preview-action-num { font-size: 10px; color: var(--grey-mid); min-width: 18px; }
  .preview-action-text { font-size: 12px; color: var(--black); flex: 1; }
  .preview-action-tag { font-size: 9px; padding: 3px 8px; border-radius: 20px; font-weight: 500; white-space: nowrap; }
  .tag-now { background: var(--black); color: var(--white); }
  .tag-soon { background: var(--border); color: var(--grey-mid); }

  .preview-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 14px; }
  .preview-stat { background: var(--white); padding: 14px 16px; }
  .preview-stat label { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-mid); display: block; margin-bottom: 4px; }
  .preview-stat-val { font-family: 'DM Serif Display', Georgia, serif; font-size: 22px; color: var(--black); }
  .preview-stat-sub { font-size: 10px; color: var(--grey-mid); }

  .preview-alert { border: 1px solid var(--border); border-radius: 2px; padding: 13px 15px; margin-bottom: 10px; }
  .preview-alert-label { font-size: 9px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--black); margin-bottom: 4px; }
  .preview-alert-body { font-size: 11px; color: var(--grey-mid); line-height: 1.5; }

  /* PLAN OUTPUT PREVIEW (landing page sample plans section) */
  .plan-output-preview { max-width: 1200px; margin: 0 auto 60px; padding: 0 20px; overflow: visible; }
  .plan-output-label { font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-mid); margin-bottom: 16px; text-align: center; }
  .plan-output-cta { text-align: center; margin-top: 36px; }

  /* 3D treatment for sample plan stack */
  .plan-stage-3d {
    position: relative;
    height: 720px;
    perspective: 2000px;
    perspective-origin: 50% 45%;
    margin: 0 auto;
  }
  .plans-cluster {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
    pointer-events: none; /* CRITICAL — preserve-3d hit-test fix */
  }
  .plan-card-3d {
    position: absolute;
    width: 450px;
    height: 660px;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1), box-shadow 0.6s ease, filter 0.6s ease, opacity 0.6s ease;
    will-change: transform;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
  }
  .plan-card-3d * { pointer-events: none; }
  .plan-card-3d.front {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateZ(80px) rotateY(0deg) rotateX(2deg);
    box-shadow:
      0 2px 4px rgba(20,30,50,0.04),
      0 8px 16px rgba(20,30,50,0.06),
      0 24px 48px rgba(20,30,50,0.12),
      0 60px 120px rgba(20,30,50,0.2);
    z-index: 3;
  }
  .plan-card-3d.back-left {
    left: 50%;
    top: 50%;
    transform: translate(-118%, -52%) translateZ(-60px) rotateY(-16deg) rotateX(2deg);
    box-shadow:
      0 4px 8px rgba(20,30,50,0.04),
      0 16px 32px rgba(20,30,50,0.08),
      0 40px 80px rgba(20,30,50,0.12);
    z-index: 1;
    filter: brightness(0.9) saturate(0.85);
    opacity: 0.88;
    cursor: pointer;
  }
  .plan-card-3d.back-right {
    left: 50%;
    top: 50%;
    transform: translate(18%, -48%) translateZ(-60px) rotateY(16deg) rotateX(2deg);
    box-shadow:
      0 4px 8px rgba(20,30,50,0.04),
      0 16px 32px rgba(20,30,50,0.08),
      0 40px 80px rgba(20,30,50,0.12);
    z-index: 1;
    filter: brightness(0.9) saturate(0.85);
    opacity: 0.88;
    cursor: pointer;
  }
  .plan-card-3d.back-left:hover,
  .plan-card-3d.back-right:hover { filter: brightness(1) saturate(1); opacity: 1; }
  .plan-card-3d.front::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 35%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.04) 100%);
    pointer-events: none;
    border-radius: 6px;
    z-index: 50;
  }

  /* ─────── LIVE BUILDER DEMO (auto-typing demo of plan being built) ─────── */
  /* Tinted full-width section so the white browser-chrome frame pops
     against the page bg, and the page rhythm doesn't run on as white
     for too long. */
  .builder-section { background: var(--grey-pale); padding: 80px 56px; }
  .builder-inner { max-width: 1080px; margin: 0 auto; }
  .builder-header { margin-bottom: 56px; }
  .builder-headline { font-family: 'DM Serif Display', Georgia, serif; font-size: 40px; letter-spacing: -1px; margin-top: 16px; }
  .builder-frame {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(20,30,50,0.04), 0 16px 32px rgba(20,30,50,0.08), 0 32px 64px rgba(20,30,50,0.10);
    border: 1px solid rgba(20,30,50,0.06);
    overflow: hidden;
  }
  .builder-chrome { background: #f4f5f7; padding: 8px 14px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #e8e8e6; }
  .builder-dot { width: 10px; height: 10px; border-radius: 50%; background: #d8d8d4; }
  .builder-dot.r { background: #e87764; } .builder-dot.y { background: #e8c264; } .builder-dot.g { background: #6cc572; }
  .builder-url { flex: 1; text-align: center; font-size: 10px; color: #999; }
  .builder-tabs { background: #fff; padding: 10px 18px; display: flex; gap: 4px; border-bottom: 1px solid #e8e8e6; }
  .builder-tab { padding: 5px 12px; border-radius: 5px; font-size: 11px; font-weight: 500; color: #888; transition: background 0.4s, color 0.4s; }
  .builder-tab.active { background: #f4f5f7; color: #1e3a5e; font-weight: 600; }
  /* Desktop is naturally stable because the form pane (taller of the two
     panes) dominates the grid row height and barely changes. min-height
     handles it. Mobile is the one that needs a hard lock — see media query. */
  .builder-body { display: grid; grid-template-columns: 340px 1fr; min-height: 420px; background: #fff; }
  .builder-form { background: #fafaf7; padding: 18px; border-right: 1px solid #e8e8e6; overflow: hidden; position: relative; }
  .form-pane.hidden { display: none; }
  .builder-form .b-section { margin-bottom: 16px; }
  .builder-form .b-section-title { font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #888; margin-bottom: 8px; }
  .builder-form .b-row { margin-bottom: 10px; }
  .builder-form .b-label { display: block; font-size: 10px; color: #666; margin-bottom: 3px; font-weight: 500; }
  .builder-form .b-input { width: 100%; background: #fff; border: 1px solid #e0e0dc; border-radius: 4px; padding: 6px 9px; font-size: 12px; color: #1e3a5e; min-height: 28px; transition: border-color 0.15s, box-shadow 0.15s; }
  .builder-form .b-input.active { border-color: #1e3a5e; box-shadow: 0 0 0 3px rgba(30,58,94,0.06); }
  .builder-form .b-input.active::after { content: ''; display: inline-block; width: 1px; height: 12px; background: #1e3a5e; margin-left: 1px; vertical-align: middle; animation: builder-caret 1s step-end infinite; }
  @keyframes builder-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
  .builder-form .b-input-multi { min-height: 56px; line-height: 1.5; padding-top: 7px; padding-bottom: 7px; }
  /* Logo upload zone */
  .form-logo-zone { border: 2px dashed #d4d4d0; border-radius: 8px; padding: 18px 12px; text-align: center; background: #fff; transition: border-color 0.3s, background 0.3s; position: relative; min-height: 92px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
  .form-logo-zone.dragover { border-color: #1e3a5e; background: rgba(30,58,94,0.03); }
  .form-logo-zone.filled { border-style: solid; border-color: #e0e0dc; }
  .form-logo-zone-text { font-size: 10px; color: #888; line-height: 1.4; transition: opacity 0.3s; }
  .form-logo-zone-text strong { color: #1e3a5e; font-weight: 600; }
  .form-dropped-logo { opacity: 0; transform: scale(0.7); transition: opacity 0.5s cubic-bezier(.2,.8,.2,1), transform 0.5s cubic-bezier(.2,1.4,.4,1); font-family: 'DM Serif Display', serif; font-size: 17px; color: #1e3a5e; line-height: 1; letter-spacing: 0.01em; }
  .form-dropped-logo.shown { opacity: 1; transform: scale(1); }
  .floating-logo { position: absolute; z-index: 10; opacity: 0; pointer-events: none; background: white; border: 1px solid #e0e0dc; border-radius: 6px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(30,58,94,0.18); font-family: 'DM Serif Display', serif; font-size: 14px; color: #1e3a5e; white-space: nowrap; }
  .floating-logo.flying { opacity: 1; }
  /* KPI picker */
  .form-kpi-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .form-kpi-pick { background: #fff; border: 1px dashed #d4d4d0; border-radius: 4px; padding: 6px 8px; opacity: 0.55; transition: opacity 0.25s, border-color 0.25s, border-style 0.25s, background 0.25s, transform 0.15s; position: relative; }
  .form-kpi-pick.selected { opacity: 1; border-style: solid; border-color: #1e3a5e; background: rgba(30,58,94,0.04); }
  .form-kpi-pick-label { font-size: 8px; color: #999; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 1px; transition: color 0.25s; }
  .form-kpi-pick.selected .form-kpi-pick-label { color: #1e3a5e; }
  .form-kpi-pick-value { font-size: 11px; color: #1e3a5e; font-weight: 600; min-height: 13px; }
  .form-kpi-pick-check { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 2px; border: 1px solid #d4d4d0; transition: background 0.2s, border-color 0.2s; }
  .form-kpi-pick.selected .form-kpi-pick-check { background: #1e3a5e; border-color: #1e3a5e; }
  .form-kpi-pick.selected .form-kpi-pick-check::after { content: ''; display: block; width: 4px; height: 7px; border: solid white; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin: 0 auto; }
  /* Plan preview pane */
  .builder-preview { padding: 18px; background: #f4f5f7; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
  .builder-card { width: 100%; max-width: 560px; background: #fff; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 14px 32px rgba(0,0,0,0.08); overflow: hidden; display: flex; flex-direction: column;
    --bbrand: #d4d4d0; --bheader-bg: #fff; --bheader-text: #c4c4c0; --bheader-border: #f0f0ee; }
  .builder-card.branded { --bbrand: #1e3a5e; --bheader-bg: #1e3a5e; --bheader-text: #fff; --bheader-border: transparent; }
  .builder-card .preview-header { background: var(--bheader-bg); border-bottom: 1px solid var(--bheader-border); padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; transition: background 0.6s, border-color 0.6s; }
  .builder-card .preview-header-name { font-family: 'DM Serif Display', serif; font-size: 16px; color: var(--bheader-text); line-height: 1.1; margin-bottom: 2px; min-height: 18px; transition: color 0.6s; }
  .builder-card .preview-header-meta { font-size: 6.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #999; transition: color 0.6s; }
  .builder-card.branded .preview-header-meta { color: rgba(255,255,255,0.45); }
  .builder-card .preview-header-logo { font-family: 'DM Serif Display', serif; font-size: 11px; color: var(--bheader-text); text-align: right; opacity: 0; transform: translateY(-4px); transition: opacity 0.5s, transform 0.5s cubic-bezier(.2,1.4,.4,1), color 0.6s; line-height: 1.1; white-space: nowrap; }
  .builder-card .preview-header-logo.shown { opacity: 1; transform: translateY(0); }
  /* Sections start hidden — appear as data fills */
  .builder-card .preview-overview, .builder-card .preview-kpis { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.35s, padding 0.45s, border-width 0.45s; }
  .builder-card .preview-overview.shown { max-height: 80px; opacity: 1; padding: 7px 18px; border-bottom-width: 1px; }
  .builder-card .preview-kpis.shown { max-height: 70px; opacity: 1; padding: 7px 18px; border-bottom-width: 2px; }
  .builder-card .preview-overview { background: #fff; border-bottom-style: solid; border-bottom-color: #e8e8e6; flex-shrink: 0; }
  .builder-card .preview-section-title { font-size: 6px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bbrand); padding-bottom: 3px; border-bottom: 2px solid var(--bbrand); margin-bottom: 4px; transition: color 0.6s, border-color 0.6s; }
  .builder-card .preview-overview-text { font-size: 7.5px; color: var(--bbrand); line-height: 1.55; text-align: justify; min-height: 28px; transition: color 0.6s, opacity 0.3s; }
  .builder-card .preview-kpis { display: flex; gap: 5px; background: #f4f5f7; border-bottom-style: solid; border-bottom-color: #e8e8e6; flex-shrink: 0; }
  .builder-card .preview-kpi { flex: 1; background: #fff; border-radius: 3px; padding: 6px 7px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border-top: 3px solid var(--bbrand); transition: opacity 0.3s, border-top-color 0.6s; opacity: 0.4; }
  .builder-card .preview-kpi.filled { opacity: 1; }
  .builder-card .preview-kpi-value { font-family: 'DM Serif Display', serif; font-size: 12px; color: var(--bbrand); line-height: 1; margin-bottom: 2px; min-height: 12px; transition: color 0.6s; }
  .builder-card .preview-kpi-label { font-size: 5.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #999; font-weight: 600; }

  .plan-output-tabs { display: flex; justify-content: center; gap: 6px; margin-bottom: 24px; }
  .plan-output-tab { padding: 9px 22px; border: 1px solid var(--border); background: var(--white); color: var(--grey-mid); font-size: 12px; font-family: 'DM Sans', sans-serif; cursor: pointer; border-radius: 2px; transition: all 0.2s; font-weight: 500; letter-spacing: 0.06em; }
  .plan-output-tab.active { background: var(--black); color: var(--white); border-color: var(--black); }
  .plan-output-tab:hover:not(.active) { color: var(--black); border-color: var(--black); }
  .plan-output-frame { border: 1px solid var(--border); border-radius: 3px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,0.08); background: #dde1e7; padding: 24px; }
  .plan-output-page { display: none; }
  .plan-output-page.active { display: block; }

  /* STRIP */
  .strip { background: var(--black); padding: 26px 56px; display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: nowrap; }
  .strip-item { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); white-space: nowrap; }
  .strip-item strong { color: var(--white); font-weight: 500; margin-right: 8px; }
  .strip-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.15); }

  /* ABOUT */
  .about { padding: 100px 56px; max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; }

  .section-label { font-size: 16px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-mid); margin-bottom: 20px; }

  .about-headline { font-family: 'DM Serif Display', Georgia, serif; font-size: 40px; line-height: 1.1; letter-spacing: -1px; margin-bottom: 24px; }
  .about-headline em { font-style: italic; color: var(--grey-light); }
  .how-headline em, .features-headline em, .compliance-headline em, .pricing-headline em { font-style: italic; color: var(--grey-light); }
  .about-body { font-size: 16px; color: var(--grey-dark); font-weight: 300; line-height: 1.8; }

  .contrast-box { border: 1px solid var(--border); border-radius: 2px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.07); }
  .contrast-row { display: grid; grid-template-columns: 1fr 1fr; }
  .contrast-col { padding: 32px 36px; }
  .contrast-col:first-child { border-right: 1px solid var(--border); background: #fafaf9; }
  .contrast-col:last-child { background: #fff; }
  .contrast-col-label { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 24px; }
  .contrast-col:first-child .contrast-col-label { color: var(--grey-mid); }
  .contrast-col:last-child .contrast-col-label { color: var(--black); }
  .contrast-item { font-size: 14px; color: var(--grey-dark); padding: 11px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; font-weight: 300; }
  .contrast-item:last-child { border-bottom: none; }
  .contrast-item .x { color: #ccc; font-size: 15px; flex-shrink: 0; }
  .contrast-item .check { color: var(--black); font-size: 15px; flex-shrink: 0; font-weight: 500; }

  /* HOW */
  .how { background: var(--grey-pale); padding: 100px 56px; }
  .how-inner { max-width: 1080px; margin: 0 auto; }
  .how-header { margin-bottom: 56px; }
  .how-headline { font-family: 'DM Serif Display', Georgia, serif; font-size: 40px; letter-spacing: -1px; margin-top: 16px; }
  .how-interactive { position: relative; max-width: 1080px; }
  .how-tabs-col { display: flex; flex-direction: column; width: 45%; }
  .how-tab { padding: 28px 0 0; border-top: 1px solid var(--border); cursor: pointer; }
  .how-tab-num { font-family: 'DM Serif Display', Georgia, serif; font-size: 36px; color: var(--border); line-height: 1; margin-bottom: 8px; transition: color 0.2s; }
  .how-tab-title { font-size: 16px; font-weight: 500; color: var(--grey-mid); transition: color 0.2s; }
  .how-tab:hover .how-tab-num, .how-tab.active .how-tab-num { color: var(--black); }
  .how-tab:hover .how-tab-title, .how-tab.active .how-tab-title { color: var(--black); }
  .how-tab-progress { height: 2px; background: var(--border); margin-top: 20px; overflow: hidden; }
  .how-tab-progress-fill { height: 100%; background: var(--black); width: 0%; }
  .how-panels-col { position: absolute; right: 0; width: 48%; transition: top 0.3s ease; }
  .how-panel { display: none; }
  .how-panel.active { display: block; animation: fadeUp 0.25s ease; }
  .how-panel-body { font-size: 18px; color: var(--grey-dark); font-weight: 300; line-height: 1.8; }
  .how-tab-mobile-panel { display: none; }

  /* FEATURES */
  .features { padding: 100px 56px; max-width: 1080px; margin: 0 auto; }
  .features-header { margin-bottom: 56px; }
  .features-headline { font-family: 'DM Serif Display', Georgia, serif; font-size: 40px; letter-spacing: -1px; margin-top: 16px; }
  .features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; }
  .feature { background: var(--white); padding: 40px; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; position: relative; }
  .feature:hover { background: #fafaf9; transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.09); z-index: 1; }
  .feature-icon { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 2px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: background 0.2s, border-color 0.2s; }
  .feature-icon svg { width: 16px; height: 16px; stroke: var(--black); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s; }
  .feature:hover .feature-icon { background: var(--black); border-color: var(--black); }
  .feature:hover .feature-icon svg { stroke: var(--white); }
  .feature-title { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
  .feature-body { font-size: 14px; color: var(--grey-mid); font-weight: 300; line-height: 1.7; }

  /* PRICING */
  .pricing { background: var(--grey-pale); padding: 100px 56px; }
  .pricing-inner { max-width: 1080px; margin: 0 auto; }
  .pricing-header { margin-bottom: 56px; }
  .pricing-headline { font-family: 'DM Serif Display', Georgia, serif; font-size: 40px; letter-spacing: -1px; margin-top: 16px; }
  .pricing-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; background: var(--border); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; }
  .pricing-card { background: var(--white); padding: 44px 40px; display: flex; flex-direction: column; }
  .pricing-card.featured { background: var(--black); }
  .pricing-tier { font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey-mid); margin-bottom: 20px; }
  .pricing-card.featured .pricing-tier { color: rgba(255,255,255,0.4); }
  .pricing-amount { font-family: 'DM Serif Display', Georgia, serif; font-size: 52px; letter-spacing: -2px; line-height: 1; color: var(--black); margin-bottom: 4px; }
  .pricing-card.featured .pricing-amount { color: var(--white); }
  .pricing-period { font-size: 12px; color: var(--grey-mid); margin-bottom: 28px; min-height: 32px; }
  .pricing-card.featured .pricing-period { color: rgba(255,255,255,0.4); }
  .pricing-divider { height: 1px; background: var(--border); margin-bottom: 28px; }
  .pricing-card.featured .pricing-divider { background: rgba(255,255,255,0.1); }
  .pricing-includes { font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-mid); margin-bottom: 16px; }
  .pricing-card.featured .pricing-includes { color: rgba(255,255,255,0.35); }
  .pricing-features { list-style: none; margin-bottom: 36px; flex: 1; }
  .pricing-features li { font-size: 13px; color: var(--grey-dark); font-weight: 300; padding: 7px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
  .pricing-features li:last-child { border-bottom: none; }
  .pricing-features li::before { content: '·'; color: var(--grey-light); font-size: 16px; }
  .pricing-card.featured .pricing-features li { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.08); }
  .pricing-card.featured .pricing-features li::before { color: rgba(255,255,255,0.2); }
  .pricing-btn { display: block; text-align: center; padding: 13px; border-radius: 2px; text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; transition: opacity 0.2s; border: 1px solid var(--border); color: var(--black); cursor: pointer; background: transparent; font-family: 'DM Sans', sans-serif; }
  .pricing-card.featured .pricing-btn { background: var(--white); border-color: transparent; color: var(--black); }
  .pricing-btn:hover { opacity: 0.7; }
  .pricing-note { font-size: 11px; color: var(--grey-light); text-align: center; margin-top: 10px; }

  /* PRICING TOGGLE */
  .pricing-toggle-wrap { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 40px; }
  .pricing-toggle-label { font-size: 13px; color: var(--grey-mid); transition: color 0.2s; }
  .pricing-toggle-label.active { color: var(--black); font-weight: 500; }
  .pricing-toggle { position: relative; width: 44px; height: 24px; background: var(--black); border-radius: 12px; cursor: pointer; border: none; padding: 0; flex-shrink: 0; transition: background 0.2s; }
  .pricing-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--white); border-radius: 50%; transition: transform 0.2s; }
  .pricing-toggle.monthly::after { transform: translateX(0); }
  .pricing-toggle.yearly::after { transform: translateX(20px); }
  .pricing-save-badge { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: var(--black); color: var(--white); padding: 3px 8px; border-radius: 20px; opacity: 0; transition: opacity 0.2s; }
  .pricing-save-badge.visible { opacity: 1; }

  /* COMPLIANCE */
  .compliance { background: #f9f9f8; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 100px 56px; }
  .compliance-inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .compliance-headline { font-family: 'DM Serif Display', Georgia, serif; font-size: 40px; line-height: 1.1; letter-spacing: -1px; margin-top: 16px; margin-bottom: 20px; }
  .compliance-body { font-size: 16px; color: var(--grey-dark); font-weight: 300; line-height: 1.8; margin-bottom: 0; }
  .compliance-right { display: flex; flex-direction: column; gap: 0; }
  .compliance-col-label { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey-mid); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
  .compliance-item { font-size: 15px; color: var(--grey-dark); font-weight: 300; padding: 13px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; }
  .compliance-item:last-child { border-bottom: none; }
  .compliance-item .ci-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
  .compliance-item .ci-dot.ok { background: #22c55e; }
  .compliance-item .ci-dot.no { background: none; width: auto; height: auto; font-size: 13px; color: #ef4444; font-weight: 600; }
  .compliance-never { font-size: 12px; color: var(--grey-light); margin-top: 20px; line-height: 1.7; }
  .compliance-badge { display: inline-flex; align-items: center; gap: 8px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 3px; padding: 8px 16px; margin-bottom: 28px; }
  .compliance-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
  .compliance-badge-text { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #16a34a; }

  /* CTA */
  .cta-section { padding: 120px 56px; max-width: 1080px; margin: 0 auto; text-align: center; }
  .cta-headline { font-family: 'DM Serif Display', Georgia, serif; font-size: 54px; letter-spacing: -1.5px; line-height: 1.05; margin-bottom: 24px; }
  .cta-headline em { font-style: italic; color: var(--grey-light); }
  .cta-sub { font-size: 16px; color: var(--grey-mid); font-weight: 300; margin-bottom: 44px; }

  /* FOOTER — direct-child only so this grid doesn't apply to <footer>
     elements rendered inside live plan previews on the samples page (the
     plan formats own their own footer flex layout). */
  #view-landing > footer {
    background: #0e0e0e;
    padding: 56px 56px 48px;
  }
  .footer-inner {
    max-width: 1280px; margin: 0 auto;
    display: flex; justify-content: space-between; gap: 48px;
  }
  .footer-brand { max-width: 280px; }
  .footer-logo { font-family: 'DM Serif Display', Georgia, serif; font-size: 20px; color: #fff; text-decoration: none; }
  .footer-logo span { color: #777; }
  .footer-tag { font-family: 'DM Serif Display', Georgia, serif; font-style: italic; font-size: 14px; color: #888; margin: 10px 0 18px; line-height: 1.5; }
  .footer-copy { font-size: 11.5px; color: #666; }
  .footer-cols { display: flex; gap: 72px; flex-wrap: wrap; }
  .footer-col { display: flex; flex-direction: column; gap: 9px; min-width: 120px; }
  .footer-col-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #777; margin-bottom: 4px; }
  .footer-col a { font-size: 13px; color: #b8b8b8; text-decoration: none; transition: color 0.18s; }
  .footer-col a:hover { color: #fff; }
  .section-divider { border: none; border-top: 1px solid var(--border); max-width: 1080px; margin: 0 auto; }

  @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

  @media (max-width: 768px) {
    #view-landing nav { padding: 0 24px; }
    #view-landing .nav-link { display: none; }
    /* Sign In stays visible on mobile (returning users need a way in) */
    #view-landing .nav-link.nav-signin { display: inline-block; }
    .hero { padding: 100px 24px 60px; }
    .hero-headline { font-size: 40px; letter-spacing: -1px; }
    .hero-sub { font-size: 16px; max-width: 100%; }
    .hero-actions { flex-direction: column; align-items: stretch; gap: 16px; }
    .btn-primary { text-align: center; }

    /* Sample plans — JS rebuilds as horizontal scroll carousel on mobile */
    .plan-output-preview { padding: 0; margin-bottom: 60px; }
    /* Disable desktop 3D treatment on mobile — JS rebuilds layout inline.
       Avoid touching transform/width/height/position here: the JS sets those
       inline and any !important here would block it (caused content cutoff). */
    .plan-stage-3d { perspective: none; height: auto; }
    .plans-cluster { pointer-events: auto; transform-style: flat; }
    .plan-card-3d::after, .plan-card-3d.front::after { display: none; }
    .plan-card-3d * { pointer-events: auto; }
    /* Strip the desktop back-card dimming so all 3 carousel cards are full color */
    .plan-card-3d, .plan-card-3d.back-left, .plan-card-3d.back-right,
    .plan-card-3d.back-left:hover, .plan-card-3d.back-right:hover {
      filter: none; opacity: 1; cursor: default;
    }
    /* Live builder demo — stack form above preview on mobile.
       Drop the grey page bg on mobile so it's flush-white with the sample
       plans section above (no visible white-strip-then-grey-box transition
       at the mobile section boundary). */
    .builder-section { padding: 0 24px 56px; background: transparent; }
    .builder-header { margin-bottom: 32px; }
    .builder-headline { font-size: 32px; }
    /* Mobile demo body locked. Reverted card section pre-reveal —
       card sections still slide in as before. Just tighter padding
       above and below the plan card so the overall card area is
       smaller (less dead space between form and plan, and after plan). */
    .builder-body { grid-template-columns: 1fr; height: 480px; background: #f4f5f7; }
    .builder-form { border-right: none; border-bottom: none; height: 220px; overflow-y: auto; padding: 12px 16px 4px; background: #f4f5f7; }
    .builder-preview { padding: 0 14px 4px; background: #f4f5f7; }
    .builder-tabs { padding: 8px 14px; }

    /* Strip — single column, each item on own line, slide-in animation */
    .strip { flex-direction: column; align-items: flex-start; gap: 0; padding: 36px 28px; }
    .strip-dot { display: none; }
    .strip-item { flex: 0 0 auto; font-size: 12px; width: 100%; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.07); opacity: 0; transform: translateX(-24px); transition: opacity 0.4s ease, transform 0.4s ease; }
    .strip-item:last-child { border-bottom: none; }
    .strip-item.slide-in { opacity: 1; transform: translateX(0); }

    /* About — single column, no negative margin on contrast box */
    .about { grid-template-columns: 1fr; gap: 36px; padding: 64px 24px; }
    .about-headline { font-size: 32px; }
    .about > div:last-child { margin-right: 0 !important; }
    .contrast-box { margin-right: 0 !important; }
    .contrast-col { padding: 24px 20px; }
    .contrast-item { font-size: 13px; padding: 9px 0; }
    .section-divider { margin: 0 24px; }

    /* How It Works — accordion on mobile: panel shows inline below its active tab */
    .how { padding: 64px 24px; }
    .how-headline { font-size: 32px; }
    .how-interactive { position: static !important; }
    .how-tabs-col { width: 100% !important; }
    .how-panels-col { display: none !important; }
    .how-tab-mobile-panel {
      display: none;
      font-size: 15px;
      color: var(--grey-dark);
      font-weight: 300;
      line-height: 1.8;
      padding: 14px 0 4px;
    }
    .how-tab.active .how-tab-mobile-panel { display: block; }

    /* Features — 2x2 grid on mobile */
    .features { padding: 64px 24px; }
    .features-headline { font-size: 32px; }
    .features-grid { grid-template-columns: 1fr 1fr; }
    .feature { padding: 24px 20px; transition: none; }
    .feature-title { font-size: 14px; }
    .feature-body { font-size: 12px; }
    .feature.tapped { background: #fafaf9; }
    .feature.tapped .feature-icon { background: var(--black); border-color: var(--black); }
    .feature.tapped .feature-icon svg { stroke: var(--white); }

    /* Compliance */
    .compliance { padding: 64px 24px; }
    .compliance-inner { grid-template-columns: 1fr; gap: 40px; }
    .compliance-headline { font-size: 32px; }
    .compliance-right { padding-top: 0 !important; }
    .compliance-right > div { margin-top: 0 !important; } /* drop inline 40px on mobile — grid gap is already 40px */

    /* Pricing */
    .pricing { padding: 64px 24px; }
    .pricing-headline { font-size: 32px; }
    .pricing-grid { grid-template-columns: 1fr; }

    .cta-section { padding: 80px 24px; }
    .cta-headline { font-size: 36px; letter-spacing: -1px; }
    #view-landing > footer { padding: 40px 24px; }
    .footer-inner { flex-direction: column; gap: 32px; }
    .footer-cols { gap: 36px 48px; }
  }

  @media (max-width: 480px) {
    .hero-headline { font-size: 32px; }
    .hero-eyebrow { font-size: 13px; }
    .cta-headline { font-size: 30px; }
    .about-headline, .how-headline, .features-headline,
    .compliance-headline, .pricing-headline { font-size: 28px; }
    .section-label { font-size: 13px; }
  }

  /* ════════════════════════════════════
     APP / BUILDER — MOBILE STYLES
  ════════════════════════════════════ */
  @media (max-width: 768px) {
    /* Dashboard header — two-row layout on mobile */
    #db-header {
      height: auto !important;
      padding: 0 14px !important;
      flex-wrap: wrap;
      align-items: center;
      gap: 0 !important;
    }
    /* Row 1 left: logo */
    .dbh-brand {
      order: 1;
      flex: 1;
      padding: 10px 0 8px;
      border-bottom: 1px solid #1c1c1c;
    }
    .dbh-brand a { font-size: 22px !important; }
    /* Row 1 right: sign-out (only visible item in dbh-right on mobile) */
    .dbh-right {
      order: 2;
      flex: 0 0 auto;
      padding: 10px 0 8px;
      gap: 0 !important;
      border-bottom: 1px solid #1c1c1c;
      margin-left: 0 !important;
    }
    #db-save-status { display: none !important; }
    #db-plans-left { display: none !important; }
    #db-user-email { display: none !important; }
    #db-advisor-badge { display: none !important; }
    #db-signout-btn { font-size: 11px !important; color: #888 !important; }
    /* Row 2: New Plan | My Plans | Upgrade to Advisor */
    .dbh-nav {
      order: 3;
      flex: 0 0 100%;
      padding: 6px 0 8px;
      gap: 8px !important;
    }
    .dbh-nav button { flex: 1; padding: 8px 6px !important; font-size: 11px !important; text-align: center; border-color: #333 !important; }
    #db-current-client { display: none !important; }
    /* Plans slide-out panel — align with two-row header (~88px) */
    #db-plans-panel { top: 88px !important; height: calc(100vh - 88px) !important; }
    /* Mobile toggle bar sticks just under two-row db-header */
    html.dashboard .mobile-view-toggle { top: 88px; }

    /* Topbar */
    .topbar { padding: 0 16px; height: 54px; }
    .topbar-tab { padding: 6px 10px; font-size: 11px; }
    .topbar-home { font-size: 11px; padding: 5px 10px; }

    /* Branding screen */
    .branding-screen { padding: 20px 16px; max-width: 100%; }
    .account-area { margin-top: 56px; padding-top: 32px; border-top-width: 3px; }
    .account-area-header h2 { font-size: 22px; }
    .account-area-header p { font-size: 13px; }
    .screen-title { font-size: 26px; }
    .screen-sub { font-size: 13px; margin-bottom: 20px; }
    .branding-grid { grid-template-columns: 1fr; gap: 16px; margin-bottom: 20px; }
    .brand-card { padding: 20px 16px; }
    .save-brand-btn { width: 100%; padding: 14px; font-size: 14px; }
    .color-row { grid-template-columns: 1fr 1fr; }

    /* Builder layout — stacked on mobile */
    .builder-layout { display: block; height: auto; }
    .sidebar { height: auto; overflow-y: visible; border-right: none; border-bottom: 1px solid var(--grey-mid); }
    .sidebar-inner { padding: 20px 16px 80px; } /* bottom padding for sticky bar */
    .sidebar-heading { font-size: 20px; }
    .sidebar-sub { font-size: 12px; margin-bottom: 16px; }
    .sidebar.mobile-hide { display: none; }

    /* Preview pane — hidden by default on mobile, toggled in */
    .preview-pane { display: none; height: auto; min-height: calc(100vh - 54px); padding: 16px 14px 80px; background: #dde1e7; }
    .preview-pane.mobile-show { display: block; }

    /* Tab nav for multi-step builder — horizontal scroll */
    .tab-nav { flex-direction: row; overflow-x: auto; padding-bottom: 4px; margin-bottom: 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 4px; }
    .tab-nav::-webkit-scrollbar { display: none; }
    .tab-btn { flex-shrink: 0; white-space: nowrap; padding: 7px 12px; font-size: 11px; border: 1px solid #e0e0e0; }
    .tab-btn.active { border-color: var(--app-navy); }
    .tab-num { display: none; }
    .nav-row { position: sticky; bottom: 0; background: var(--white); padding: 12px 0 8px; margin-top: 16px; border-top: 1px solid #f0f0f0; z-index: 10; }

    /* Mobile Form / Preview toggle bar */
    .mobile-view-toggle {
      display: flex; background: var(--white);
      border-bottom: 2px solid #e8e8e6;
      position: sticky; top: 54px; z-index: 90;
    }
    .mvt-btn {
      flex: 1; padding: 12px 8px; font-size: 12px; font-weight: 700;
      border: none; background: transparent; cursor: pointer;
      color: #aaa; border-bottom: 2px solid transparent; margin-bottom: -2px;
      font-family: 'DM Sans', sans-serif; letter-spacing: 0.06em;
      text-transform: uppercase; transition: all 0.18s;
    }
    .mvt-btn.mvt-active { color: var(--app-navy); border-bottom-color: var(--app-navy); }

    /* Form inputs — prevent iOS auto-zoom (needs font-size ≥ 16px) */
    .form-input, .form-select, .form-textarea { font-size: 16px; }
    .brand-input { font-size: 16px; }
    .form-label { font-size: 10px; }
    .form-section-title { font-size: 10px; margin: 20px 0 10px; }
    .goal-status-btn { font-size: 9px; padding: 5px 2px; }

    /* Generated plan pages — remove fixed aspect ratio; height set by JS scalePlanToFit */
    .plan-page { aspect-ratio: unset; max-width: 100%; width: 100%; margin-bottom: 16px; overflow: visible; }
    .plan-scale-inner { overflow: hidden; } /* clip at inner level so page height stays exact */
    .plan-cover { height: auto; min-height: auto; padding: 36px 20px; }
    .plan-cover:before, .plan-cover:after { display: none; }
    .plan-body { height: auto; overflow: visible; padding: 28px 20px; }
    .cover-client { font-size: 36px; }
    .cover-meta { flex-wrap: wrap; gap: 20px; }
    .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .metric-grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .metric-value { font-size: 20px; }
    .two-col { grid-template-columns: 1fr; gap: 14px; }
    .data-box { padding: 16px; }
    .plan-section-title { font-size: 10px; margin-bottom: 10px; padding-bottom: 5px; }
    .plan-page-header { margin-bottom: 24px; padding-bottom: 12px; }
    .plan-page-title { font-size: 26px; }
    .preview-actions { flex-direction: column; gap: 8px; margin-bottom: 16px; }
    .action-btn { width: 100%; text-align: center; padding: 12px; }
    .gen-btn { padding: 13px 16px; font-size: 14px; }

    /* Preview placeholder */
    .preview-placeholder { min-height: 300px; }
    .ph-title { font-size: 22px; }

    /* Firm settings live preview — scale down for mobile */
    .brand-preview { padding: 16px; margin-bottom: 20px; }
    .preview-mock-body { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 12px; }
    .preview-mock-val { font-size: 13px; }
    .preview-mock-box { padding: 6px 8px; }
    .preview-mock-overview { padding: 8px 12px; }
    .preview-mock-overview-text { font-size: 8px; }
  }