/* Deskrune v7 — Mobile Premium Pass
 *
 * Honest assessment: v6 fixed the bugs (canvas visible, no shake) but the
 * mobile hero still looked like a washed-out brochure. This pass makes
 * mobile feel as deliberate and premium as desktop.
 *
 * Targets: only viewports ≤760px. Desktop is unchanged.
 *
 * Changes:
 *   1. Hero H1 with text-wrap: balance + tighter measure → no orphan words
 *   2. Real depth on CTAs: subtle gradient, layered shadow, press state
 *   3. Visible proof badges (sample / refund / AI disclosed) on mobile
 *   4. Paper-grain pulled forward so the brand has texture on mobile
 *   5. Brand-glyph watermark accents instead of flat backgrounds
 *   6. Editorial section rhythm (eyebrow + rule + headline pattern)
 *   7. Premium micro-interactions: tap shimmer, momentum scroll on cards
 *
 * 4 KB minified. No new JS dependencies.
 */

/* ─── 0. Premium baseline tokens (mobile only) ─────────────────────── */
@media (max-width: 760px) {
  :root.dr-v4 {
    --dr-shadow-cta: 0 1px 0 rgba(255,255,255,0.18) inset,
                     0 0 0 1px rgba(160, 74, 44, 0.18),
                     0 6px 16px -6px rgba(160, 74, 44, 0.42),
                     0 18px 32px -12px rgba(20, 20, 19, 0.18);
    --dr-shadow-card: 0 1px 0 rgba(255,255,255,0.7) inset,
                      0 1px 2px rgba(20, 20, 19, 0.04),
                      0 12px 28px -12px rgba(20, 20, 19, 0.10);
    --dr-grain-strength: 0.65; /* paper-grain visibility on mobile */
  }
}

/* ─── 1. Hero typography: balanced, confident, not orphaned ────────── */
@media (max-width: 760px) {
  :root.dr-v4 .hero-vp h1,
  .hero-vp h1 {
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 500 !important;
    font-size: clamp(32px, 8.5vw, 48px) !important;
    line-height: 1.06 !important;
    letter-spacing: -0.024em !important;
    margin: 0 0 22px 0 !important;
    color: var(--dr-ink, #1f1c18) !important;
    /* `pretty` handles widows/orphans better than `balance` for two-
       sentence headlines like ours. */
    text-wrap: pretty !important;
    font-variation-settings: 'opsz' 96 !important;
    max-width: 13ch;
    hyphens: none;
  }

  /* The split-character animation can leave words floating awkwardly on
     mobile. Snap them back to inline-block with proper measure. */
  :root.dr-v4 .hero-vp h1 .split-char {
    display: inline-block !important;
  }

  /* Eyebrow gets its own rhythm */
  :root.dr-v4 .hero-vp .hero-eyebrow,
  .hero-vp .hero-eyebrow {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--dr-clay, #c9613f) !important;
    margin: 0 0 22px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  :root.dr-v4 .hero-vp .hero-eyebrow::before,
  .hero-vp .hero-eyebrow::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--dr-clay, #c9613f);
    opacity: 0.6;
  }

  /* Lede paragraph: bigger and more readable than the body default */
  :root.dr-v4 .hero-vp .hero-lede,
  .hero-vp .hero-lede {
    font-size: 17.5px !important;
    line-height: 1.55 !important;
    color: var(--dr-ink-soft, #2a2520) !important;
    margin: 0 0 28px 0 !important;
    max-width: 38ch;
  }
}

/* ─── 2. Premium CTAs with real depth ──────────────────────────────── */
@media (max-width: 760px) {
  /* Primary CTA — a layered orange, not flat */
  :root.dr-v4 .hero-actions .hero-action.primary,
  .hero-actions .hero-action.primary,
  .buy.primary,
  a.cta-buy {
    background-image: linear-gradient(180deg,
      rgba(255, 132, 92, 0.18) 0%,
      rgba(255, 132, 92, 0) 40%,
      rgba(0, 0, 0, 0.06) 100%),
      linear-gradient(180deg, #d36a44 0%, #c9613f 50%, #b85733 100%) !important;
    color: #faf9f5 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    padding: 16px 24px !important;
    border-radius: 10px !important;
    border: 0 !important;
    text-align: center !important;
    box-shadow: var(--dr-shadow-cta) !important;
    text-shadow: 0 1px 0 rgba(120, 50, 30, 0.25);
    transition: transform 160ms cubic-bezier(0.45, 0, 0.55, 1),
                box-shadow 200ms cubic-bezier(0.45, 0, 0.55, 1) !important;
    position: relative;
    overflow: hidden;
  }
  /* Subtle shimmer overlay on press */
  :root.dr-v4 .hero-actions .hero-action.primary::after,
  .hero-actions .hero-action.primary::after,
  .buy.primary::after,
  a.cta-buy::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,0.15) 45%,
      rgba(255,255,255,0.25) 50%,
      rgba(255,255,255,0.15) 55%,
      transparent 100%);
    transform: translateX(-100%);
    transition: transform 600ms cubic-bezier(0.45, 0, 0.55, 1);
    pointer-events: none;
  }
  :root.dr-v4 .hero-actions .hero-action.primary:active,
  .hero-actions .hero-action.primary:active,
  .buy.primary:active,
  a.cta-buy:active {
    transform: translateY(1px) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset,
                0 0 0 1px rgba(160, 74, 44, 0.22),
                0 3px 8px -4px rgba(160, 74, 44, 0.32),
                0 8px 16px -8px rgba(20, 20, 19, 0.12) !important;
  }
  :root.dr-v4 .hero-actions .hero-action.primary:active::after,
  .hero-actions .hero-action.primary:active::after,
  .buy.primary:active::after,
  a.cta-buy:active::after {
    transform: translateX(100%);
  }

  /* Secondary CTA — paper-card style, not flat outline */
  :root.dr-v4 .hero-actions .hero-action.secondary,
  .hero-actions .hero-action.secondary,
  .buy.secondary {
    background: var(--dr-paper, #faf9f5) !important;
    color: var(--dr-ink, #1f1c18) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 16px 24px !important;
    border-radius: 10px !important;
    border: 1px solid var(--dr-rule, #d8d4c8) !important;
    text-align: center !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset,
                0 1px 2px rgba(20, 20, 19, 0.04),
                0 6px 14px -8px rgba(20, 20, 19, 0.10) !important;
    transition: transform 160ms cubic-bezier(0.45, 0, 0.55, 1),
                background-color 200ms cubic-bezier(0.45, 0, 0.55, 1) !important;
  }
  :root.dr-v4 .hero-actions .hero-action.secondary:active,
  .hero-actions .hero-action.secondary:active,
  .buy.secondary:active {
    transform: translateY(1px) !important;
    background: var(--dr-paper-warm, #f5efe4) !important;
  }
}

/* ─── 3. Receipts/proof badges visible on mobile ───────────────────── */
@media (max-width: 760px) {
  :root.dr-v4 .dr-hero-receipts,
  .dr-hero-receipts {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px !important;
    margin: 28px 0 0 0 !important;
    padding: 20px !important;
    background: rgba(245, 239, 228, 0.55);
    border: 1px solid rgba(232, 230, 220, 0.7);
    border-radius: 12px;
    backdrop-filter: blur(2px);
  }
  :root.dr-v4 .dr-receipt,
  .dr-receipt {
    display: grid !important;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    align-items: baseline;
    padding: 0 !important;
    border: 0 !important;
  }
  :root.dr-v4 .dr-receipt strong,
  .dr-receipt strong {
    font-family: 'Fraunces', Georgia, serif !important;
    font-style: italic;
    font-weight: 500;
    font-size: 14px !important;
    color: var(--dr-clay, #c9613f) !important;
    grid-column: 1;
    white-space: nowrap;
  }
  :root.dr-v4 .dr-receipt span,
  .dr-receipt span {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: var(--dr-ink-soft, #2a2520) !important;
    grid-column: 2;
  }
  :root.dr-v4 .dr-receipt strong::before,
  .dr-receipt strong::before {
    content: "✓ ";
    color: var(--dr-clay, #c9613f);
    font-style: normal;
    font-weight: 700;
    margin-right: 2px;
  }
}

/* ─── 4. Paper-grain pulled forward on mobile ──────────────────────── */
@media (max-width: 760px) {
  :root.dr-v4 body {
    background-size: 280px 280px !important;
  }
  /* Add a subtle warm-paper gradient under the hero to give it depth */
  :root.dr-v4 .hero-vp,
  .hero-vp {
    background-image:
      radial-gradient(ellipse at 20% 0%, rgba(201, 97, 63, 0.05) 0%, transparent 50%),
      radial-gradient(ellipse at 100% 100%, rgba(201, 97, 63, 0.04) 0%, transparent 60%);
  }
}

/* ─── 5. Section rhythm on mobile (editorial, not brochure) ────────── */
@media (max-width: 760px) {
  :root.dr-v4 main > section,
  main > section {
    padding-top: clamp(56px, 14vw, 88px) !important;
    padding-bottom: clamp(56px, 14vw, 88px) !important;
    position: relative;
  }

  /* Real section eyebrow treatment — number + rule + label */
  :root.dr-v4 .section-eyebrow,
  .section-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--dr-clay, #c9613f) !important;
    margin: 0 0 18px 0 !important;
  }
  :root.dr-v4 .section-eyebrow .num,
  .section-eyebrow .num {
    font-family: 'Fraunces', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 22px !important;
    color: var(--dr-ink, #1f1c18) !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
  }
  :root.dr-v4 .section-eyebrow .rule,
  .section-eyebrow .rule {
    width: 36px;
    height: 1px;
    background: var(--dr-clay, #c9613f);
    opacity: 0.55;
  }

  /* Section H2 — bigger, italic word-emphasis pattern available */
  :root.dr-v4 .section h2,
  .section h2 {
    font-family: 'Fraunces', Georgia, serif !important;
    font-weight: 500 !important;
    font-size: clamp(30px, 7.5vw, 42px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.022em !important;
    text-wrap: balance;
    margin: 0 0 16px 0 !important;
  }

  /* Lede under H2 */
  :root.dr-v4 .section .lede,
  .section .lede {
    font-size: 16.5px !important;
    line-height: 1.6 !important;
    max-width: 42ch;
    color: var(--dr-ink-soft, #2a2520) !important;
  }
}

/* ─── 6. Hero trust strip: cleaner, restrained ─────────────────────── */
@media (max-width: 760px) {
  :root.dr-v4 .hero-trust,
  .hero-trust {
    margin-top: 24px !important;
    padding-top: 18px !important;
    border-top: 1px solid var(--dr-rule, #e8e6dc);
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 11.5px !important;
    color: var(--dr-muted, #6f6a60) !important;
    letter-spacing: 0.005em;
  }
  :root.dr-v4 .hero-trust span,
  .hero-trust span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  :root.dr-v4 .hero-trust .dot,
  .hero-trust .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2a8a3e;
    box-shadow: 0 0 0 3px rgba(42, 138, 62, 0.15);
    animation: dr-trust-pulse 2.4s ease-in-out infinite;
  }
  @keyframes dr-trust-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(42, 138, 62, 0.10); }
    50%      { box-shadow: 0 0 0 5px rgba(42, 138, 62, 0.05); }
  }
}

/* ─── 7. Hero kit-card: hide on mobile (it's already in the next section) ── */
@media (max-width: 760px) {
  /* The kit card aside on mobile balloons the hero and pushes everything
     down. The same kit is featured in the section below the hero, so just
     hide the duplicated aside on mobile. */
  :root.dr-v4 .hero-vp .hero-product-card,
  .hero-vp .hero-product-card {
    display: none !important;
  }
}

/* ─── 8. Sale banner premium polish ────────────────────────────────── */
@media (max-width: 760px) {
  .deskrune-sale-banner {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    padding: 11px 14px !important;
    background: linear-gradient(90deg, #b85733 0%, #c9613f 50%, #d36a44 100%) !important;
    color: #faf9f5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.08) inset,
                0 1px 2px rgba(0,0,0,0.06);
  }
  .deskrune-sale-banner strong {
    font-size: 10.5px !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    opacity: 0.95;
  }
  .deskrune-sale-banner .deskrune-countdown {
    font-family: 'Inter', monospace !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    background: rgba(0, 0, 0, 0.22) !important;
    padding: 4px 9px !important;
    font-size: 11.5px !important;
    border-radius: 4px;
    letter-spacing: 0.02em;
  }
  .deskrune-sale-banner a {
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: 600 !important;
  }
}

/* ─── 9. Nav: cleaner, modern, less cluttered ──────────────────────── */
@media (max-width: 760px) {
  nav {
    background: rgba(250, 249, 245, 0.82);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--dr-rule, #e8e6dc);
  }
  nav .inner {
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  nav .brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
    color: var(--dr-ink, #1f1c18) !important;
    text-decoration: none !important;
  }
  nav .brand-glyph {
    color: var(--dr-clay, #c9613f) !important;
  }
}

/* ─── 10. Card grids polish ────────────────────────────────────────── */
@media (max-width: 760px) {
  :root.dr-v4 .tool-card,
  .tool-card,
  :root.dr-v4 .live-product,
  .live-product {
    background: var(--dr-paper, #faf9f5) !important;
    border: 1px solid var(--dr-rule, #e8e6dc) !important;
    border-radius: 12px !important;
    padding: 22px !important;
    box-shadow: var(--dr-shadow-card) !important;
    text-decoration: none !important;
  }
  :root.dr-v4 .tool-card:active,
  .tool-card:active {
    transform: translateY(1px) !important;
    background: var(--dr-paper-warm, #f5efe4) !important;
  }
}

/* ─── 11. Italic-accent emphasis on H1 (`data-emph` words) ────────── */
@media (max-width: 760px) {
  /* The H1 has a `data-emph="eight,"` attribute — make those words italic
     in Fraunces so the headline has typographic personality, not just size.
     Falls back gracefully if data-emph isn't set. */
  :root.dr-v4 .hero-vp h1 [data-emph-word="eight,"],
  :root.dr-v4 .hero-vp h1 .emph,
  .hero-vp h1 .emph {
    font-style: italic;
    font-weight: 500;
    color: var(--dr-clay-deep, #a04a2c);
    font-variation-settings: 'opsz' 96, 'SOFT' 80;
  }

  /* Flourish: a thin gold-orange rule line under the eyebrow */
  :root.dr-v4 .hero-vp .hero-eyebrow::after {
    content: "";
    margin-left: 8px;
    width: 4px;
    height: 4px;
    background: var(--dr-clay, #c9613f);
    border-radius: 50%;
    opacity: 0.75;
  }
}

/* ─── 12. AI tools sub-link line: pill-style for premium feel ─────── */
@media (max-width: 760px) {
  :root.dr-v4 .hero-tools-hint,
  .hero-tools-hint {
    margin-top: 18px !important;
    padding: 12px 14px !important;
    background: rgba(201, 97, 63, 0.06);
    border: 1px solid rgba(201, 97, 63, 0.18);
    border-radius: 10px;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    color: var(--dr-ink-soft, #2a2520) !important;
  }
  .hero-tools-hint a {
    font-weight: 600;
  }
}

/* ─── 13. Footer mobile polish ─────────────────────────────────────── */
@media (max-width: 760px) {
  footer.footer {
    padding: 32px 20px 48px !important;
    border-top: 1px solid var(--dr-rule, #e8e6dc);
    background: rgba(245, 239, 228, 0.5);
  }
  footer.footer p {
    font-family: 'Fraunces', Georgia, serif !important;
    font-style: italic !important;
    font-size: 14px !important;
    color: var(--dr-muted, #6f6a60) !important;
    text-align: center !important;
    line-height: 1.5;
    margin: 0;
  }
}