/* ═══════════════════════════════════════════════════════════
   Frely v2 — "Calm Editorial"
   Warm paper, ink text, one burnt-orange accent.
   Outfit (display) + Manrope (body) + JetBrains Mono (code).
   ═══════════════════════════════════════════════════════════ */

@font-face { font-family:'Outfit'; font-weight:700; font-display:swap; src:url('/v2/fonts/outfit700.woff2') format('woff2'); }
@font-face { font-family:'Outfit'; font-weight:800; font-display:swap; src:url('/v2/fonts/outfit800.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:400; font-display:swap; src:url('/v2/fonts/manrope400.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:500; font-display:swap; src:url('/v2/fonts/manrope500.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:700; font-display:swap; src:url('/v2/fonts/manrope700.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:400; font-display:swap; src:url('/v2/fonts/jbmono400.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-weight:600; font-display:swap; src:url('/v2/fonts/jbmono600.woff2') format('woff2'); }

:root {
  --paper: #faf7f2;
  --paper-deep: #f3efe7;
  --ink: #1d1a16;
  --ink-soft: #575046;
  --ink-faint: #8a8177;
  --line: #e4ddd1;
  --line-strong: #cfc5b4;
  --accent: #c2410c;
  --accent-deep: #9a3412;
  --accent-soft: #fff1e7;
  --radius: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-gutter:stable; }
html, body { overflow-x:clip; }
@supports not (scrollbar-gutter:stable) { html { overflow-y:scroll; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family:'Manrope', system-ui, sans-serif;
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img { max-width:100%; display:block; height:auto; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1180px; margin:0 auto; padding:0 clamp(20px, 4vw, 48px); }

h1,h2,h3 { font-family:'Outfit', sans-serif; letter-spacing:-0.02em; line-height:1.08; color:var(--ink); }
h2 { font-size:clamp(2rem, 4.4vw, 3.3rem); font-weight:800; }

.kicker {
  font-family:'JetBrains Mono', monospace; font-size:0.78rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--accent);
  margin-bottom:18px;
}

/* ── buttons & links ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Manrope'; font-weight:700; font-size:0.98rem;
  padding:14px 28px; border-radius:99px; border:1.5px solid var(--ink);
  transition:transform .35s var(--ease), background .25s ease, color .25s ease, box-shadow .35s var(--ease);
  cursor:pointer;
}
.btn:active { transform:scale(0.97); }
.btn-ink { background:var(--ink); color:var(--paper); }
.btn-ink:hover { background:var(--accent-deep); border-color:var(--accent-deep); transform:translateY(-2px); box-shadow:0 10px 26px rgba(154,52,18,0.28); }
.btn-big { padding:17px 36px; font-size:1.04rem; }

.link-arrow {
  display:inline-flex; align-items:center; gap:9px;
  font-weight:700; color:var(--accent-deep);
  border-bottom:1.5px solid transparent;
  transition:gap .3s var(--ease), border-color .25s ease;
}
.link-arrow:hover { gap:14px; border-color:var(--accent-deep); }
.link-arrow .arr { transition:transform .3s var(--ease); }
.link-arrow.light { color:#ffb388; }
.link-arrow.light:hover { border-color:#ffb388; }

/* ── topbar ── */
.topbar {
  position:sticky; top:0; z-index:50;
  background:rgba(250,247,242,0.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-in { display:flex; align-items:center; gap:34px; height:70px; }
.brand { font-family:'Outfit'; font-weight:800; font-size:1.42rem; letter-spacing:-0.02em; }
.brand-dot { color:var(--accent); }
.topnav { display:flex; gap:26px; margin-left:auto; }
.topnav a { font-size:0.94rem; font-weight:500; color:var(--ink-soft); transition:color .2s ease; }
.topnav a:hover { color:var(--ink); }
.topbar .btn { padding:11px 22px; font-size:0.92rem; }

/* ── hero ── */
.hero { padding:clamp(64px, 9vw, 120px) 0 0; }
.hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(40px, 5vw, 80px); align-items:center; }
.hero-h { font-size:clamp(2.9rem, 6.4vw, 5.1rem); font-weight:800; margin:0 0 26px; }
.hero-h .accent { color:var(--accent); }
.hero-sub { font-size:1.22rem; line-height:1.6; color:var(--ink-soft); max-width:30em; margin-bottom:36px; }
.hero-cta { display:flex; align-items:center; gap:30px; flex-wrap:wrap; }

/* polaroid stack */
.hero-visual { position:relative; min-height:480px; }
.polaroid {
  position:absolute; background:#fff; border:1px solid var(--line);
  border-radius:6px; padding:10px 10px 12px;
  box-shadow:0 2px 6px rgba(29,26,22,0.06), 0 24px 50px rgba(29,26,22,0.13);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.polaroid img { border-radius:3px; }
.polaroid figcaption {
  font-family:'JetBrains Mono', monospace; font-size:0.72rem; color:var(--ink-faint);
  padding-top:9px; text-align:center;
}
.polaroid:hover { z-index:5; box-shadow:0 4px 10px rgba(29,26,22,0.08), 0 34px 70px rgba(29,26,22,0.2); }
.p1 { width:62%; top:0; left:0; transform:rotate(-2.4deg); z-index:3; }
.p1:hover { transform:rotate(-1deg) scale(1.03); }
.p2 { width:56%; top:26%; right:0; transform:rotate(1.8deg); z-index:2; }
.p2:hover { transform:rotate(0.4deg) scale(1.03); }
.p3 { width:58%; bottom:0; left:8%; transform:rotate(-1.2deg); z-index:1; }
.p3:hover { transform:rotate(0deg) scale(1.03); }

.proofline {
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  margin-top:clamp(56px, 7vw, 90px); padding:22px 0;
  border-top:1px solid var(--line);
  font-family:'JetBrains Mono', monospace; font-size:0.82rem; color:var(--ink-faint);
}
.proofline .sep { width:5px; height:5px; border-radius:50%; background:var(--accent); flex-shrink:0; }

/* ── sections ── */
.section { padding:clamp(72px, 10vw, 130px) 0; }
.section-paper { background:var(--paper-deep); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sec-head { margin-bottom:clamp(44px, 6vw, 70px); }
.sec-sub { margin-top:16px; font-size:1.12rem; color:var(--ink-soft); max-width:36em; }

/* pain rows — editorial numbered list, no cards */
.pain-list { border-top:1px solid var(--line-strong); }
.pain-row {
  display:grid; grid-template-columns:110px 1fr; gap:clamp(20px, 4vw, 60px);
  padding:clamp(28px, 4vw, 44px) 0;
  border-bottom:1px solid var(--line-strong);
  transition:padding-left .4s var(--ease);
}
.pain-row:hover { padding-left:14px; }
.pain-num {
  font-family:'Outfit'; font-weight:700; font-size:clamp(1.6rem, 3vw, 2.4rem);
  color:var(--line-strong); line-height:1;
  transition:color .3s ease;
}
.pain-row:hover .pain-num { color:var(--accent); }
.pain-row h3 { font-size:clamp(1.25rem, 2.2vw, 1.7rem); margin-bottom:10px; }
.pain-row p { color:var(--ink-soft); max-width:44em; }

/* desks — split showcase */
.desk {
  display:grid; grid-template-columns:1.08fr 0.92fr;
  gap:clamp(36px, 5vw, 76px); align-items:center;
  padding:clamp(40px, 5vw, 64px) 0;
}
.desk + .desk { border-top:1px solid var(--line); }
.desk-flip .desk-shot { order:2; }
.desk-shot {
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(29,26,22,0.12);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.desk-shot:hover { transform:translateY(-6px); box-shadow:0 40px 90px rgba(29,26,22,0.17); }
.desk-copy h3 { font-size:clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom:14px; }
.desk-copy p { color:var(--ink-soft); max-width:32em; }
.desk-copy .kicker { margin-bottom:12px; }

/* setup */
.setup-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(40px, 6vw, 90px); align-items:start; }
.setup-copy p { margin:20px 0 26px; color:var(--ink-soft); max-width:26em; }
.setup-steps { list-style:none; counter-reset:st; }
.setup-steps li {
  counter-increment:st; position:relative;
  padding:30px 0 30px 74px;
  border-bottom:1px solid var(--line);
}
.setup-steps li:first-child { padding-top:6px; }
.setup-steps li::before {
  content:counter(st, decimal-leading-zero);
  position:absolute; left:0; top:28px;
  font-family:'Outfit'; font-weight:700; font-size:1.5rem; color:var(--accent);
}
.setup-steps li:first-child::before { top:4px; }
.setup-steps .step-k { font-family:'Outfit'; font-weight:700; font-size:1.22rem; display:block; margin-bottom:8px; }
.setup-steps p { color:var(--ink-soft); margin-bottom:14px; max-width:38em; }
.setup-steps code {
  font-family:'JetBrains Mono', monospace; font-size:0.9rem;
  background:var(--ink); color:var(--paper);
  padding:9px 16px; border-radius:8px; display:inline-block;
}

/* your data — ink section */
.section-ink { background:var(--ink); color:#efe9df; }
.section-ink h2 { color:#faf7f2; }
.own-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(40px, 6vw, 90px); align-items:start; }
.own-copy p { margin:22px 0 28px; color:#b5ac9f; max-width:26em; font-size:1.1rem; }
.own-list { list-style:none; }
.own-list li {
  padding:24px 0; border-bottom:1px solid rgba(239,233,223,0.14);
  color:#cfc6b8; line-height:1.6;
}
.own-list li:first-child { padding-top:6px; }
.own-list strong { color:#faf7f2; display:block; margin-bottom:5px; font-size:1.05rem; }

/* FAQ */
.faq-grid { display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(40px, 6vw, 90px); align-items:start; }
.faq-head .link-arrow { margin-top:22px; }
.faq-list details { border-bottom:1px solid var(--line-strong); }
.faq-list summary {
  list-style:none; cursor:pointer; position:relative;
  font-family:'Outfit'; font-weight:700; font-size:1.18rem;
  padding:26px 54px 26px 0;
  transition:color .2s ease;
}
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after {
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:'Manrope'; font-weight:400; font-size:1.7rem; color:var(--accent);
  transition:transform .35s var(--ease);
}
.faq-list details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq-list summary:hover { color:var(--accent-deep); }
.faq-list details p { padding:0 40px 28px 0; color:var(--ink-soft); max-width:40em; }

/* join */
.join-wrap { display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 6vw, 90px); align-items:center; }
.join-copy p { margin:20px 0 0; color:var(--ink-soft); max-width:28em; font-size:1.1rem; }
.join-alt { margin-top:26px !important; font-size:0.98rem !important; }
.join-alt a { color:var(--accent-deep); font-weight:700; border-bottom:1.5px solid var(--accent-deep); }

.join-form {
  background:#fff; border:1px solid var(--line);
  border-radius:18px; padding:clamp(28px, 4vw, 44px);
  box-shadow:0 24px 60px rgba(29,26,22,0.09);
  display:flex; flex-direction:column; gap:9px;
}
.f-label { font-size:0.88rem; font-weight:700; margin-top:14px; }
.f-label:first-child { margin-top:0; }
.f-label em { font-style:normal; font-weight:400; color:var(--ink-faint); }
.f-input {
  font-family:'Manrope'; font-size:1rem; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line-strong);
  border-radius:10px; padding:13px 16px; width:100%;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.f-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(194,65,12,0.14); }
select.f-input { appearance:none; }
.join-form .btn { margin-top:22px; }
.f-note { margin-top:14px; font-size:0.86rem; color:var(--ink-faint); text-align:center; }
.frely-waitlist-success {
  background:#e8f5ec; border:1px solid #b7dfc4; color:#1d5c33;
  padding:16px 20px; border-radius:12px; font-weight:600; margin-bottom:8px;
}

/* footer */
.footer { background:var(--paper-deep); border-top:1px solid var(--line); }
.footer-in {
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding:clamp(48px, 6vw, 72px) clamp(20px, 4vw, 48px);
}
.foot-brand p { margin-top:14px; color:var(--ink-faint); font-size:0.94rem; max-width:22em; }
.foot-col { display:flex; flex-direction:column; gap:11px; }
.foot-col h4 {
  font-family:'JetBrains Mono', monospace; font-size:0.76rem; font-weight:600;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:7px;
}
.foot-col a { font-size:0.95rem; color:var(--ink-soft); transition:color .2s ease; }
.foot-col a:hover { color:var(--accent-deep); }
.foot-base {
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  padding:20px clamp(20px, 4vw, 48px) 28px;
  border-top:1px solid var(--line);
  font-size:0.88rem; color:var(--ink-faint);
}
.foot-note a { border-bottom:1px solid var(--line-strong); transition:color .2s ease; }
.foot-note a:hover { color:var(--accent-deep); }

/* ── reveal ── */
html.js .js-reveal, html.js .reveal { opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
html.js .reveal.in, html.js .js-reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html.js .js-reveal, html.js .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

/* ── responsive ── */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns:1fr; }
  .hero-visual { min-height:420px; max-width:640px; }
  .topnav { display:none; }
  .setup-grid, .own-grid, .faq-grid, .join-wrap { grid-template-columns:1fr; }
  .footer-in { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  .pain-row { grid-template-columns:1fr; gap:10px; }
  .pain-num { font-size:1.3rem; }
  .desk { grid-template-columns:1fr; }
  .desk-flip .desk-shot { order:0; }
  .hero-visual { min-height:340px; }
  .p1 { width:74%; }
  .p2 { width:66%; top:30%; }
  .p3 { width:70%; }
  .footer-in { grid-template-columns:1fr; gap:28px; }
  .topbar-in { gap:16px; }
}