/* Koord.ai webfonts — Playfair Display (Google) + Satoshi (Fontshare). */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap");
@import url("https://fonts.cdnfonts.com/css/satoshi");

/* Koord.ai color system — "Tech Meets Editorial".
   Stark monochromatic base + two deliberate accents. */
:root {
  /* Base palette */
  --koord-base: #faf8f6;        /* Base Fill — main background */
  --koord-white: #FFFFFF;       /* Card surface */
  --koord-charcoal: #1A1A1A;    /* Primary text & headings */
  --koord-pink: #FF4A7A;        /* Signature Pink — accent */
  --koord-olive: #667052;       /* Deep Olive — primary action */
  --koord-olive-hover: #555A43;
  --koord-olive-soft: rgba(102, 112, 82, 0.10);
  --koord-taupe: #5A5250;       /* Main headings */
  --koord-ink: #1C1B1A;         /* Step subheading text */
  --koord-rose: #B89598;        /* Subheadings, links */
  --koord-camel: #D4A373;       /* Warm Camel — secondary / icons */

  /* Derived neutrals */
  --koord-gray-600: #5C5C5C;    /* Secondary text */
  --koord-gray-400: #9A9A9A;    /* Muted text, kickers */
  --koord-border: #E7E4E0;      /* Hairlines, dividers (warm gray) */
  --koord-border-30: rgba(231, 228, 224, 0.3); /* Anchor image frame fill */

  /* Accent states */
  --koord-pink-hover: #EE3D6C;
  --koord-pink-soft: rgba(255, 74, 122, 0.10);
  --koord-camel-soft: rgba(212, 163, 115, 0.14);

  /* Overlay */
  --koord-overlay-dim: rgba(0, 0, 0, 0.4);   /* Capture dim layer */
  --koord-overlay-lightbox: rgba(26, 26, 26, 0.92);

  /* Semantic aliases */
  --surface-page: var(--koord-base);
  --surface-card: var(--koord-white);
  --surface-frame: var(--koord-border-30);
  --text-heading: var(--koord-taupe);
  --text-subheading: var(--koord-rose);
  --text-body: var(--koord-charcoal);
  --text-secondary: var(--koord-gray-600);
  --text-muted: var(--koord-gray-400);
  --text-on-action: var(--koord-white);
  --action-primary: var(--koord-olive);
  --action-primary-hover: var(--koord-olive-hover);
  --accent-secondary: var(--koord-camel);
  --border-subtle: var(--koord-border);
  --focus-ring: rgba(102, 112, 82, 0.35);
}

/* Koord.ai typography — Satoshi throughout; headings 560 with tight tracking. */
:root {
  --font-serif: "Satoshi", "Inter", system-ui, -apple-system, sans-serif; /* heading stack (legacy name) */
  --font-sans: "Satoshi", "Inter", system-ui, -apple-system, sans-serif;

  /* Scale */
  --text-hero: 48px;        /* Welcome page headline (serif, 600) */
  --text-display: 28px;     /* Section headings (serif, 600) */
  --text-title: 22px;       /* Stylist card / occasion title (serif, 600) */
  --text-subtitle: 14px;    /* Italic vibe line (sans, italic 400) */
  --text-body: 14px;        /* Body & UI (sans, 400) */
  --text-small: 13px;       /* Secondary UI (sans, 400) */
  --text-kicker: 11px;      /* "LOOK 1 OF 3" (sans, 600, uppercase) */

  --leading-tight: 1.2;
  --leading-body: 1.55;
  --tracking-kicker: 0.12em;
  --tracking-caps: 0.06em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heading: 560;          /* variable-font weight for main headings */
  --tracking-heading: -0.055em;
}

/* Koord.ai spacing, radii, shadows, motion. */
:root {
  /* Spacing — 4px base, generous whitespace */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii */
  --radius-card: 16px;      /* Cards, anchor frame */
  --radius-control: 10px;   /* Inputs, small controls */
  --radius-pill: 999px;     /* Buttons */

  /* Shadows — quiet, warm-tinted */
  --shadow-card: 0 1px 2px rgba(26, 26, 26, 0.05), 0 6px 16px rgba(26, 26, 26, 0.06);
  --shadow-float: 0 4px 12px rgba(26, 26, 26, 0.08), 0 16px 40px rgba(26, 26, 26, 0.12);
  --shadow-action: 0 6px 16px rgba(255, 74, 122, 0.28);

  /* Motion — calm crossfades, no bounce */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-story: 1500ms; /* Stylist Story crossfade cadence */
}

/* Page styles */
*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);font-family:var(--font-sans);color:var(--text-body)}
a{color:var(--koord-olive); text-decoration: none;}
a:hover{color:var(--koord-olive-hover)}
.wrap{max-width:960px;margin:0 auto;padding:72px 32px 80px}
header{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.logo-slot{width:100%;height:248px;border-radius:var(--radius-card);display:flex;align-items:center;justify-content:center}
.logo-slot img{display:block;width:min(100%,654px);height:auto;max-width:100%}
.mono{font-family:monospace;font-size:11px;color:var(--text-muted)}
.sub{margin:0;font-size:16px;color:var(--text-secondary);max-width:480px;line-height:1.6}
h2{margin:0 0 28px;font-family:var(--font-serif);font-size:var(--text-display);font-weight:510;letter-spacing:-0.015em;color:var(--text-heading)}
.how{margin-top:72px}
.how h2{text-align:center}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .wrap{padding:48px 20px 64px}
  .logo-slot{height:auto;min-height:0}
  .steps{grid-template-columns:1fr}
}
.step{display:flex;flex-direction:column;gap:12px}
.clip{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.step-title{font-family:var(--font-serif);font-size:20px;font-weight:560;letter-spacing:-0.055em;color:var(--koord-ink)}
.step-title .num{color:var(--koord-rose);margin-right:10px}
.step p{margin:0;font-size:14px;line-height:1.6;color:var(--text-secondary)}
.cta{margin-top:80px;text-align:center;border-top:1px solid var(--border-subtle);padding-top:56px}
.cta h2{margin:0 0 8px}
.cta .lead{margin:0 0 28px;font-size:14px;color:var(--text-secondary)}
.stores{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 22px;font-size:14px;font-family:var(--font-sans);font-weight:600;border-radius:var(--radius-pill);border:1px solid var(--koord-charcoal);background:transparent;color:var(--text-heading);text-decoration:none;cursor:pointer;transition:background var(--duration-fast) var(--ease-out)}
.btn-outline:hover{background:var(--koord-olive-soft);color:var(--text-heading)}
.install{margin:24px 0 0;font-size:14px;color:var(--text-secondary)}
.install a{font-weight:600}
.site-footer{margin-top:64px;padding-top:24px;border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--text-secondary);text-align:center}
.site-footer a,.footer-link{color:var(--koord-olive);font-weight:500}
.site-footer a:hover,.footer-link:hover{color:var(--koord-olive-hover)}
.footer-link{padding:0;border:0;background:none;font:inherit;cursor:pointer}
.policy-dialog{width:min(100% - 32px,720px);max-height:min(88vh,900px);padding:0;border:0;border-radius:28px;background:var(--surface-card);box-shadow:var(--shadow-float)}
.policy-dialog::backdrop{background:rgba(28,27,26,0.58);backdrop-filter:blur(6px)}
.policy-dialog__card{position:relative;padding:32px 32px 28px;max-height:min(88vh,900px);overflow-y:auto}
.policy-dialog__close{position:absolute;top:18px;right:18px;width:36px;height:36px;border:0;border-radius:999px;background:var(--koord-olive-soft);color:var(--text-heading);font-size:24px;line-height:1;cursor:pointer;transition:background var(--duration-fast) var(--ease-out)}
.policy-dialog__close:hover{background:rgba(102, 112, 82, 0.18)}
.policy-dialog__eyebrow{margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--koord-rose)}
.policy-dialog h2{margin:0 0 8px;padding-right:48px;font-size:32px;line-height:1.1}
.policy-dialog__updated{margin:0 0 20px;font-size:13px;color:var(--text-muted)}
.policy-dialog__content{display:grid;gap:18px}
.policy-dialog__section{display:grid;gap:10px}
.policy-dialog__section h3,.policy-dialog__section h4{margin:0;color:var(--text-heading)}
.policy-dialog__section h3{font-family:var(--font-serif);font-size:20px;font-weight:560;letter-spacing:-0.03em}
.policy-dialog__section h4{font-size:14px;font-weight:600;letter-spacing:0.01em}
.policy-dialog p{margin:0 0 14px;font-size:15px;line-height:1.7;color:var(--text-secondary)}
.policy-dialog ul{margin:0;padding-left:20px;color:var(--text-secondary)}
.policy-dialog li{margin:0 0 8px;font-size:15px;line-height:1.7}
.policy-dialog__actions{margin-top:24px;display:flex;justify-content:flex-start}
@media(max-width:560px){
  .policy-dialog{width:min(100% - 20px,720px);border-radius:22px}
  .policy-dialog__card{padding:28px 20px 24px}
  .policy-dialog h2{font-size:26px}
}