/* ==========================================================================
   RARETOGS — design tokens
   Palette:  #FFFFFF paper · #0B0B0B ink · #6E6E6B graphite (secondary text)
             #E8E7E2 hairline · #F6F5F1 panel · #B23B2E signal (live-only accent)
   Type:     Fraunces (display, editorial serif w/ italic) · Inter (body/utility)
   Signature: the "on-air" dot — a live broadcast tally light used wherever
              RareTogs is telling you something is coming, not yet live.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600&display=swap');

:root{
  --paper:#FFFFFF;
  --ink:#0B0B0B;
  --graphite:#6E6E6B;
  --hairline:#E4E3DE;
  --panel:#F6F5F1;
  --signal:#B23B2E;
  --max:1180px;
  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
button{font:inherit;cursor:pointer;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

:focus-visible{outline:2px solid var(--ink); outline-offset:3px;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}

h1,h2,h3,.serif{
  font-family:'Fraunces',serif;
  font-weight:500;
  letter-spacing:-0.01em;
  margin:0;
}
em{font-style:italic; font-weight:400;}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Inter',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--graphite);
}

/* ---- live dot signature ---- */
.dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--signal);
  flex:none;
  position:relative;
}
.dot::after{
  content:'';
  position:absolute; inset:-5px;
  border-radius:50%;
  border:1px solid var(--signal);
  opacity:0.55;
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(0.6); opacity:0.6;}
  100%{transform:scale(1.9); opacity:0;}
}

/* ---- header ---- */
header{
  border-bottom:1px solid var(--hairline);
  position:sticky; top:0; background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(180%) blur(8px);
  z-index:200;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:19px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.navlinks{
  display:flex; align-items:center; gap:34px;
  font-size:14px; font-weight:500;
}
.navlinks a{color:var(--graphite); transition:color .15s;}
.navlinks a:hover, .navlinks a.active{color:var(--ink);}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--ink); font-weight:600; font-size:14px;
}
.nav-cta:hover{color:var(--signal);}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px;
  border:1px solid var(--ink);
  border-radius:2px;
  font-size:13px; font-weight:600;
  letter-spacing:0.02em;
  white-space:nowrap;
  transition:background .15s, color .15s;
}
.btn-dark{background:var(--ink); color:var(--paper);}
.btn-dark:hover{background:#2a2a2a;}
.btn-light{background:transparent; color:var(--ink);}
.btn-light:hover{background:var(--ink); color:var(--paper);}

.navtoggle{display:none; background:none; border:none; padding:8px;}
.navtoggle span{display:block; width:22px; height:1.5px; background:var(--ink); margin:5px 0; transition:transform .2s, opacity .2s;}
.navtoggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.navtoggle.open span:nth-child(2){opacity:0;}
.navtoggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* ---- hero ---- */
.hero{padding:88px 0 64px;}
.hero h1{
  font-size:clamp(44px,7vw,84px);
  line-height:0.98;
  margin:22px 0 26px;
}
.lede{max-width:520px; font-size:17px; color:var(--graphite); margin-bottom:34px;}

.formrow{display:flex; gap:10px; max-width:460px; margin-bottom:14px;}
.formrow input[type=email]{
  flex:1;
  border:1px solid var(--hairline);
  border-radius:2px;
  padding:14px 16px;
  font-family:'Inter',sans-serif;
  font-size:14px;
  background:var(--paper);
  color:var(--ink);
}
.formrow input[type=email]:focus{border-color:var(--ink);}
.center .formrow{margin-left:auto; margin-right:auto;}

input, textarea{
  color:var(--ink);
  background:var(--paper);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--paper) inset;
  box-shadow: 0 0 0 1000px var(--paper) inset;
  transition: background-color 9999s ease-in-out 0s;
}
.fineprint{font-size:12.5px; color:var(--graphite);}

/* ---- sections ---- */
section{padding:64px 0;}
.section-tight{padding:48px 0;}
.hairline-top{border-top:1px solid var(--hairline);}
.hairline-bottom{border-bottom:1px solid var(--hairline);}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.section-head{max-width:600px; margin-bottom:48px;}
.section-head h2{font-size:clamp(30px,4vw,46px); margin-top:16px; line-height:1.08;}

.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline);}
.card{background:var(--paper); padding:30px 26px;}
.card .icon{margin-bottom:20px;}
.card h3{font-family:'Inter',sans-serif; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px;}
.card p{font-size:14px; color:var(--graphite); margin:0;}

.icon svg{width:26px; height:26px; stroke:var(--ink); fill:none; stroke-width:1.4;}

/* ---- feature list ---- */
.feature{display:flex; gap:16px; margin-bottom:26px; align-items:flex-start;}
.feature .icon{flex:none; width:24px; height:24px; display:flex; align-items:center; justify-content:center; margin-top:3px;}
.feature .icon svg{width:22px; height:22px;}
.feature h4{font-family:'Inter',sans-serif; font-weight:600; font-size:14.5px; margin-bottom:4px;}
.feature p{margin:0; color:var(--graphite); font-size:14px;}

/* ---- panel (coming soon aside) ---- */
.panel{
  background:var(--panel);
  border:1px solid var(--hairline);
  padding:36px 32px;
}
.panel .eyebrow{margin-bottom:16px;}
.panel h3{font-family:'Fraunces',serif; font-size:22px; font-weight:500; margin-bottom:10px;}
.panel p{color:var(--graphite); font-size:14.5px; margin-bottom:22px;}

/* ---- checklist ---- */
.checklist li{
  display:flex; gap:12px; align-items:flex-start;
  padding:10px 0;
  border-top:1px solid var(--hairline);
  font-size:14.5px;
}
.checklist li:last-child{border-bottom:1px solid var(--hairline);}
.checkmark{flex:none; width:18px; height:18px; margin-top:2px;}
.checkmark svg{width:100%; height:100%; stroke:var(--ink); fill:none; stroke-width:1.6;}

/* ---- steps (how it works) ---- */
.steps{display:flex; flex-direction:column;}
.step{
  display:grid; grid-template-columns:56px 44px 1fr; gap:20px;
  align-items:center;
  padding:30px 0;
  border-top:1px solid var(--hairline);
}
.step:last-child{border-bottom:1px solid var(--hairline);}
.step-num{font-family:'Fraunces',serif; font-size:15px; color:var(--graphite); line-height:1;}
.step .icon{display:flex; align-items:center; justify-content:center; width:44px; height:44px;}
.step .icon svg{width:24px; height:24px;}
.step h4{font-family:'Inter',sans-serif; font-weight:600; font-size:16px; margin-bottom:6px;}
.step p{margin:0; color:var(--graphite); font-size:14.5px; max-width:520px;}

/* ---- timeline (Explore What's Coming / How It Works steps) ---- */
.timeline{border-left:1px solid var(--hairline); max-width:640px; margin-left:2px;}
.timeline-item{position:relative; padding:0 0 26px 30px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-item .marker{position:absolute; left:0; top:9px; transform:translate(-50%,0);}
.timeline-item .marker-num{
  position:absolute; left:0; top:-3px; transform:translate(-50%,0);
  width:27px; height:27px; border-radius:50%;
  background:var(--paper); border:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:12.5px; color:var(--graphite);
}
.timeline-cat{font-family:'Inter',sans-serif; font-weight:600; font-size:15px;}
.timeline-item h4{font-family:'Inter',sans-serif; font-weight:600; font-size:16px; margin-bottom:6px;}
.timeline-item p{margin:0; color:var(--graphite); font-size:14.5px; max-width:480px;}
.timeline-item.timeline-item--num{padding-left:44px;}
.timeline-item.timeline-item--num .marker-num{left:0;}

/* ---- stat/icon row (3-up) ---- */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; text-align:center;}
.trio .icon{margin:0 auto 16px;}
.trio h4{font-family:'Inter',sans-serif; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px;}
.trio p{margin:0; color:var(--graphite); font-size:14px;}

/* ---- faq accordion ---- */
.faq-item{border-top:1px solid var(--hairline);}
.faq-item:last-child{border-bottom:1px solid var(--hairline);}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; padding:22px 0;
  font-family:'Fraunces',serif; font-size:18px; text-align:left; color:var(--ink);
}
.faq-q .plus{font-family:'Inter',sans-serif; font-size:20px; font-weight:400; transition:transform .2s; flex:none; margin-left:20px;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{color:var(--graphite); font-size:14.5px; padding-bottom:22px; margin:0; max-width:640px;}

/* ---- social row ---- */
.social{display:flex; gap:18px; justify-content:center; margin:28px 0;}
.social a{
  width:40px; height:40px; border:1px solid var(--hairline); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s;
}
.social a:hover{background:var(--ink); border-color:var(--ink);}
.social a:hover svg{stroke:var(--paper);}
.social svg{width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:1.4;}

.center{text-align:center;}
.centerwrap{max-width:600px; margin:0 auto;}

/* ---- cta banner ---- */
.cta-banner{background:var(--ink); color:var(--paper); padding:56px 0; text-align:center;}
.cta-banner .eyebrow{color:#B9B9B5;}
.cta-banner h2{color:var(--paper); font-size:clamp(26px,4vw,38px); margin:16px 0 26px;}
.cta-banner .btn-dark{background:var(--paper); color:var(--ink); border-color:var(--paper);}
.cta-banner .btn-dark:hover{background:#efefec;}

/* ---- footer ---- */
footer{border-top:1px solid var(--hairline); padding:64px 0 32px; margin-top:40px;}
.foot-grid{display:grid; grid-template-columns:1.2fr 1fr 1.3fr; gap:40px;}
.foot-logo{font-family:'Fraunces',serif; font-weight:600; font-size:18px; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:14px;}
.foot-col h5{font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--graphite); font-weight:600; margin-bottom:16px;}
.foot-col a, .foot-col p{display:block; font-size:14px; color:var(--graphite); margin-bottom:10px;}
.foot-col a:hover{color:var(--ink);}
.foot-social{display:flex; gap:14px; margin-top:14px;}
.foot-social svg{width:16px; height:16px; stroke:var(--graphite); fill:none; stroke-width:1.4;}
.foot-form{display:flex; gap:8px; margin-top:10px;}
.foot-form input{flex:1; border:1px solid var(--hairline); padding:11px 12px; font-size:13px; font-family:'Inter',sans-serif;}

/* ---- role selector (Brand/Seller vs Buyer) ---- */
.role-select{border:none; margin:10px 0 22px; padding:0; max-width:460px;}
.center .role-select{margin-left:auto; margin-right:auto;}
.role-select legend{
  width:100%; padding:0; margin-bottom:14px;
  font-family:'Inter',sans-serif; font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em; color:var(--graphite);
  text-align:inherit;
}
.role-options{display:flex; gap:10px;}
.role-option{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--hairline); border-radius:2px;
  padding:13px 12px;
  font-family:'Inter',sans-serif; font-size:14px; font-weight:500;
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.role-option input{accent-color:var(--ink); margin:0; flex:none;}
.role-option.checked,
.role-option:has(input:checked){border-color:var(--ink); background:var(--panel);}

.role-select--compact{margin-bottom:8px; margin-top:14px;}
.role-select--compact legend{font-size:11px; margin-bottom:8px;}
.role-select--compact .role-option{padding:9px 10px; font-size:12.5px; gap:6px;}

/* ---- thank-you card (shown inline after AJAX form submit) ---- */
.thankyou-card{
  border:1px solid var(--hairline); background:var(--panel);
  padding:32px 28px; text-align:center; max-width:460px;
}
.center .thankyou-card{margin-left:auto; margin-right:auto;}
.thankyou-card .check{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--ink);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
}
.thankyou-card .check svg{width:18px; height:18px; stroke:var(--ink); fill:none; stroke-width:2;}
.thankyou-card h3{font-size:20px; margin-bottom:8px;}
.thankyou-card p{color:var(--graphite); font-size:14px; margin:0;}
.thankyou-card--compact{padding:20px 18px; text-align:left; max-width:none; margin-top:10px;}
.thankyou-card--compact .check{margin:0 0 10px; width:30px; height:30px;}
.thankyou-card--compact .check svg{width:14px; height:14px;}
.thankyou-card--compact h3{font-size:15px;}
.thankyou-card--compact p{font-size:13px;}

/* ---- extended form fields (text / select / checkbox) ---- */
.field{margin-bottom:18px; text-align:left; max-width:460px;}
.center .field{margin-left:auto; margin-right:auto;}
.field label{display:block; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--graphite); margin-bottom:8px;}
.field input[type=text], .field input[type=email], .field select{
  width:100%; border:1px solid var(--hairline); border-radius:2px;
  padding:14px 16px; font-family:'Inter',sans-serif; font-size:14px;
  background:var(--paper); color:var(--ink); appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230B0B0B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.field input:focus, .field select:focus{border-color:var(--ink);}
.field-hint{font-size:12.5px; color:var(--graphite); margin-top:6px;}
.checkbox-list{display:flex; flex-direction:column; gap:10px;}
.checkbox-option{display:flex; align-items:center; gap:10px; font-size:14px; cursor:pointer;}
.checkbox-option input{accent-color:var(--ink); flex:none;}
.conditional-field{overflow:hidden; max-height:0; transition:max-height .25s ease;}
.conditional-field.show{max-height:140px;}
.foot-bottom{
  border-top:1px solid var(--hairline); margin-top:48px; padding-top:24px;
  display:flex; justify-content:space-between; font-size:12.5px; color:var(--graphite);
}

.status-note{
  font-size:13px; color:var(--graphite); border:1px solid var(--hairline);
  background:var(--panel); padding:14px 18px; border-radius:2px; margin-top:18px;
}

/* ---- page hero (sub pages) ---- */
.page-hero{padding:64px 0 40px;}
.page-hero h1{font-size:clamp(34px,5.5vw,58px); margin:16px 0 20px; line-height:1.05;}
.page-hero .lede{max-width:560px;}

/* ---- responsive ---- */
@media (max-width: 920px){
  .two-col{grid-template-columns:1fr; gap:40px;}
  .cards{grid-template-columns:repeat(2,1fr);}
  .trio{grid-template-columns:1fr; gap:32px;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:32px;}
}
@media (max-width: 720px){
  .navlinks{
    position:fixed; top:76px; left:0; right:0; height:calc(100vh - 76px);
    background:var(--paper);
    z-index:150;
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    padding:4px 32px 40px;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s, transform .18s;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .navlinks.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .navlinks a{width:100%; padding:19px 0; border-bottom:1px solid var(--hairline); font-size:17px;}
  .navlinks .nav-cta{
    margin-top:14px; padding:16px 0; font-size:15px;
    text-transform:uppercase; letter-spacing:0.06em; border-bottom:none;
  }
  .navtoggle{display:block; position:relative; z-index:160;}
  body.nav-open{overflow:hidden;}
  .formrow{flex-direction:column;}
  .foot-grid{grid-template-columns:1fr; gap:28px;}
  .foot-bottom{flex-direction:column; gap:8px;}
  .step{grid-template-columns:32px 32px 1fr; gap:14px;}
  .hero{padding:36px 0 48px;}
  .page-hero{padding:28px 0 32px;}
}
@media (max-width: 560px){
  .cards{grid-template-columns:1fr 1fr;}
}
@media (max-width: 420px){
  .cards{grid-template-columns:1fr;}
}