/*
Theme Name: Fashionme Ledger
Theme URI: https://www.fashionme.com
Author: Fashionme
Description: Ledger Warm (design direction 3a) — Swiss grid on warm paper. Hairline ink rules do the structural work, surfaces stay flat, and signal red is reserved for the single primary action. Ported from the Next.js reference at app/page.tsx.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: Proprietary
Text Domain: fashionme-ledger
*/

/* ---------------------------------------------------------------------------
   Tokens. Mirrors app/globals.css in the Next.js repo — the portal still
   renders /get-quote and /q/[token] with these exact values, and a visitor
   crosses from this site into that one mid-funnel. If you change a value here,
   change it there too (SPEC §6 Hosts records that this duplication exists and
   why).
--------------------------------------------------------------------------- */
:root {
  --paper: #f6f3ee;
  --paper-sunk: #efeae2;
  --paper-edge: #e9e7e2;
  --ink: #1a1712;
  --ink-muted: #6b665d;
  --ink-faint: #8c877c;
  --signal: #d6392b;
  --terracotta: #a8603f;
  --moss: #2f7d55;
  --amber: #b8791a;
  --rule: #1a171226;
  --rule-strong: #1a171233;

  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", monospace;
}

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

body {
  margin: 0;
  background: var(--paper-edge);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

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

img {
  max-width: 100%;
  height: auto;
}

/* Zero radius everywhere; the logo mark is the one deliberate exception. */
.fm-shell {
  margin: 0 auto;
  width: 100%;
  max-width: 1440px;
  background: var(--paper);
}

/* --- hatch placeholders ---------------------------------------------------
   Stand-ins for photography that does not exist yet. Ink for the customer's
   input, terracotta for what we deliver — the pairs read before → after. */
.fm-hatch {
  display: flex;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.fm-hatch--ink {
  background: repeating-linear-gradient(135deg, #1a17120d 0 9px, #1a171200 9px 18px);
  color: #1a171273;
}
.fm-hatch--terracotta {
  background: repeating-linear-gradient(135deg, #a8603f18 0 9px, #a8603f00 9px 18px);
  color: var(--terracotta);
}
.fm-hatch--bl { align-items: flex-end; justify-content: flex-start; }
.fm-hatch--br { align-items: flex-end; justify-content: flex-end; }
.fm-hatch--c  { align-items: center; justify-content: center; }

/* --- nav ------------------------------------------------------------------ */
.fm-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--ink);
  padding: 20px 24px;
}
.fm-logo {
  display: flex;
  align-items: center;
  gap: 11px;
}
.fm-logo__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--ink);
  color: var(--paper);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
}
.fm-logo__word {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}
.fm-dot { color: var(--signal); }

.fm-nav__links {
  display: none;
  gap: 30px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.fm-nav__links a:hover { color: var(--ink); }

.fm-nav__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
}
.fm-nav__signin { color: var(--ink-muted); }
.fm-nav__signin:hover { color: var(--ink); }

.fm-btn-signal {
  background: var(--signal);
  color: #fff;
  padding: 9px 18px;
}
.fm-btn-signal:hover { opacity: 0.9; }

/* --- hero ----------------------------------------------------------------- */
.fm-hero {
  display: grid;
  border-bottom: 1px solid var(--ink);
}
.fm-hero__copy {
  border-bottom: 1px solid var(--ink);
  padding: 56px 24px;
}
.fm-eyebrow {
  margin-bottom: 28px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--terracotta);
}
.fm-hero h1 {
  margin: 0 0 24px;
  font-size: 46px;
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.03em;
}
.fm-hero__lede {
  margin: 0 0 32px;
  max-width: 440px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.fm-btn-pair {
  display: flex;
  width: fit-content;
  border: 1px solid var(--ink);
  font-size: 14px;
}
.fm-btn-pair > a { padding: 14px 28px; }
.fm-btn-pair > a.is-signal { background: var(--signal); color: #fff; }
.fm-btn-pair > a.is-signal:hover { opacity: 0.9; }
.fm-btn-pair > a.is-plain:hover { background: var(--paper-sunk); }

.fm-hero__media { display: grid; }
.fm-hero__media > .fm-hatch { min-height: 200px; }
.fm-hero__media > .fm-hatch:first-child { border-bottom: 1px solid var(--ink); }

/* --- how it works --------------------------------------------------------- */
.fm-steps {
  display: grid;
  border-bottom: 1px solid var(--ink);
}
.fm-step {
  padding: 40px 24px;
  border-bottom: 1px solid var(--ink);
}
.fm-step:last-child { border-bottom: 0; }
.fm-step__n {
  margin-bottom: 12px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--signal);
}
.fm-step__t {
  margin-bottom: 8px;
  font-size: 19px;
  font-weight: 500;
}
.fm-step__b {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* --- options -------------------------------------------------------------- */
.fm-section {
  border-bottom: 1px solid var(--ink);
  padding: 48px 24px;
}
.fm-section__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}
.fm-section__head h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.fm-section__note { font-size: 13px; color: var(--ink-muted); }

.fm-options {
  display: grid;
  border: 1px solid var(--ink);
  background: #fff;
}
.fm-option {
  position: relative;
  padding: 28px;
  border-bottom: 1px solid var(--ink);
}
.fm-option:last-child { border-bottom: 0; }
.fm-option__badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--signal);
  color: #fff;
  font-size: 11px;
  padding: 4px 10px;
}
.fm-option__name {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
}
.fm-option__body {
  margin: 0 0 22px;
  max-width: 560px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.fm-facts { display: flex; gap: 8px; }
.fm-fact {
  border: 1px solid var(--ink);
  padding: 5px 10px;
  font-size: 12px;
}

.fm-addons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid var(--ink);
  border-top: 0;
  background: var(--paper-sunk);
  font-size: 13px;
}
.fm-addons > span {
  padding: 14px 20px;
  border-right: 1px solid var(--rule);
}
.fm-addons > span:last-child { border-right: 0; }
.fm-addons__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--terracotta);
}

/* --- services strip ------------------------------------------------------- */
.fm-services {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--ink);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.fm-services > span {
  padding: 16px 24px;
  border-bottom: 1px solid var(--ink);
  text-align: center;
}
.fm-services > span:last-child { border-bottom: 0; }
.fm-services__label {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  text-align: left !important;
}

/* --- AI Studio ------------------------------------------------------------ */
.fm-ai { display: grid; border-bottom: 1px solid var(--ink); }
.fm-ai__copy {
  border-bottom: 1px solid var(--ink);
  padding: 48px 24px;
}
.fm-ai__eyebrow {
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--terracotta);
}
.fm-ai__copy h2 {
  margin: 0 0 16px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.fm-ai__body {
  margin: 0 0 22px;
  max-width: 380px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
}
.fm-ai__cta {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
  font-size: 14px;
}
.fm-ai__media { display: grid; grid-template-columns: 1fr 1fr; }
.fm-ai__media > .fm-hatch { min-height: 200px; }
.fm-ai__media > .fm-hatch:first-child { border-right: 1px solid var(--ink); }

/* --- cases ---------------------------------------------------------------- */
.fm-cases { display: grid; border-bottom: 1px solid var(--ink); }
.fm-case { border-bottom: 1px solid var(--ink); }
.fm-case:last-child { border-bottom: 0; }
.fm-case > .fm-hatch {
  height: 190px;
  border-bottom: 1px solid var(--ink);
}
.fm-case__body { padding: 24px; }
.fm-case__tags {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}
.fm-case__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--moss);
}
.fm-case__tagtext {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--moss);
}
.fm-case__t {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
}
.fm-case__metric {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.fm-case__caption { font-size: 12px; color: var(--ink-muted); }

/* --- trust + portal preview ----------------------------------------------- */
.fm-trust { display: grid; border-bottom: 1px solid var(--ink); }
.fm-trust__copy {
  border-bottom: 1px solid var(--ink);
  padding: 48px 24px;
}
.fm-trust__copy h2 {
  margin: 0 0 24px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.fm-stats { display: grid; gap: 24px; }
.fm-stat__v {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.fm-stat__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--moss);
}
.fm-stat__l { font-size: 13px; color: var(--ink-muted); }

.fm-portal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  background: var(--paper-sunk);
  padding: 40px 24px;
}
.fm-portal__eyebrow {
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.fm-prow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--rule);
  border-left-width: 3px;
  background: #fff;
  padding: 14px 16px;
}
.fm-prow__t { font-size: 14px; font-weight: 600; }
.fm-prow__n { margin-top: 3px; font-size: 12px; }
.fm-prow__stage {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}

/* --- CTA ------------------------------------------------------------------ */
.fm-cta {
  display: grid;
  align-items: center;
  gap: 32px;
  background: var(--ink);
  color: var(--paper);
  padding: 48px 24px;
}
.fm-cta__h {
  margin-bottom: 8px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.fm-cta__s { font-size: 15px; color: #f6f3eeb3; }
.fm-cta__btn {
  justify-self: start;
  background: var(--signal);
  color: #fff;
  padding: 16px 34px;
  font-size: 16px;
}
.fm-cta__btn:hover { opacity: 0.9; }

/* --- footer --------------------------------------------------------------- */
.fm-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  border-top: 1px solid var(--ink);
  padding: 44px 24px;
  font-size: 13px;
  color: var(--ink-muted);
}
.fm-footer__brand { grid-column: span 2; }
.fm-footer__word {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.fm-footer__blurb { margin: 0; max-width: 240px; line-height: 1.5; }
.fm-footer__h { margin-bottom: 12px; color: var(--ink); }
.fm-footer ul { margin: 0; padding: 0; list-style: none; line-height: 1.9; }
.fm-footer a:hover { color: var(--ink); }

/* --- breakpoints ---------------------------------------------------------- */
@media (min-width: 768px) {
  .fm-nav { padding: 20px 56px; }
  .fm-hero__copy { padding: 64px 56px; }
  .fm-hero h1 { font-size: 62px; }
  .fm-section { padding: 56px; }
  .fm-section__head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }
  .fm-steps { grid-template-columns: repeat(3, 1fr); }
  .fm-step {
    padding: 44px 40px;
    border-bottom: 0;
    border-right: 1px solid var(--ink);
  }
  .fm-step:last-child { border-right: 0; }
  .fm-options { grid-template-columns: repeat(2, 1fr); }
  .fm-option {
    border-bottom: 0;
    border-right: 1px solid var(--ink);
  }
  .fm-option:last-child { border-right: 0; }
  .fm-services { flex-direction: row; }
  .fm-services > span {
    flex: 1;
    padding: 18px 24px;
    border-bottom: 0;
    border-right: 1px solid var(--ink);
  }
  .fm-services > span:last-child { border-right: 0; }
  .fm-services__label { flex: 0 0 auto; }
  .fm-cases { grid-template-columns: repeat(3, 1fr); }
  .fm-case {
    border-bottom: 0;
    border-right: 1px solid var(--ink);
  }
  .fm-case:last-child { border-right: 0; }
  .fm-ai__copy { padding: 56px; }
  .fm-trust__copy { padding: 56px; }
  .fm-portal { padding: 40px 56px; }
  .fm-stats { grid-template-columns: repeat(3, 1fr); }
  .fm-cta { padding: 56px; }
  .fm-cta__h { font-size: 44px; }
  .fm-footer { padding: 44px 56px; }
}

@media (min-width: 1024px) {
  .fm-nav__links { display: flex; }
  .fm-hero { grid-template-columns: repeat(12, 1fr); }
  .fm-hero__copy {
    grid-column: span 7;
    border-bottom: 0;
    border-right: 1px solid var(--ink);
  }
  .fm-hero h1 { font-size: 82px; }
  .fm-hero__media {
    grid-column: span 5;
    grid-template-rows: 1fr 1fr;
  }
  .fm-ai { grid-template-columns: 1fr 1fr; }
  .fm-ai__copy {
    border-bottom: 0;
    border-right: 1px solid var(--ink);
  }
  .fm-ai__media { min-height: 300px; }
  .fm-trust { grid-template-columns: 1fr 1fr; }
  .fm-trust__copy {
    border-bottom: 0;
    border-right: 1px solid var(--ink);
  }
  .fm-cta { grid-template-columns: 1fr auto; }
  .fm-footer { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .fm-footer__brand { grid-column: span 1; }
}