/* eBay Playbook inspired design */
:root{
  --bg:#ffffff; 
  --card:#ffffff; 
  --accent:#0064d2; 
  --muted:#707070; 
  --text:#191919;
  --border:#e5e5e5;
  --radius:8px;
  --max-width:1200px;
  --shadow:0 2px 8px rgba(0,0,0,0.1);
  --header-height:72px;
  --header-height-scrolled:56px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: 'Helvetica Neue', Arial, sans-serif; 
  margin:0; 
  background:var(--bg); 
  color:var(--text); 
  -webkit-font-smoothing:antialiased;
  font-size:18px;
  line-height:1.6;
  /* CHANGED: default text alignment set to left for better readability */
  text-align: left;
}
.container{width:90%; max-width:var(--max-width); margin:0 auto; padding:0 24px}

/* Header - eBay Playbook style */
.site-header{
  background:#fff; 
  border-bottom:1px solid var(--border);
  position:fixed; /* ensure header always visible */
  top:0; left:0; right:0;
  z-index:9999;
  transition:box-shadow 180ms ease, background 180ms ease, padding 180ms ease;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px;
  min-height:var(--header-height);
}

/* ensure main content isn't hidden under fixed header */
main{ padding-top:var(--header-height); transition:padding-top 160ms ease }
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:600;
  color:var(--accent);
  text-decoration:none;
  font-size:20px;
}

.header-logo{ display:block; width:52px; height:auto; border-radius:6px; }
.brand-text{ font-family: 'Helvetica Neue', Arial, sans-serif; font-size:1.05rem; }

@media(min-width:768px){
  .header-logo{ width:64px }
  .brand-text{ font-size:1.25rem }
}
.nav{display:none}
.nav a{
  color:var(--text);
  text-decoration:none;
  font-size:16px;
  font-weight:500;
  margin-left:32px;
  transition:color 0.2s ease;
}
.nav a:hover{color:var(--accent)}
.menu-toggle{background:none;border:0;font-size:24px;cursor:pointer}

/* HERO - Large typography like eBay Playbook */
.hero{
  background:#fff;
  /* CHANGED: removed top padding so gap from header to title is controlled by .hero-inner padding (~20px) */
  padding:0 0 24px; /* top padding removed to reduce space above title */
  border-bottom:1px solid var(--border);
}
.hero-inner{text-align:left; max-width:800px}
.title{
  font-size:3rem;
  font-weight:600;
  line-height:1.05;
  margin:0 0 16px; /* smaller gap below title */
  color:var(--text);
  letter-spacing:-0.02em;
}

/* CHANGED: add a small logo next to the H1 and align text with it */
/* CHANGED: logo left and title right. Adjust sizes below as needed. */
.hero-title-row{ display:flex; align-items:center; gap:18px; justify-content:center; padding:50px 0 }
.hero-title-logo{ width:160px; height:auto; display:block }
@media(min-width:768px){
  .hero-title-row{ justify-content:flex-start }
  .hero-title-logo{ width:220px }
}
/* CHANGED: replaced the constrained border with a full-width rule element. Adjust spacing here if needed */
.full-width-rule{ width:100vw; height:1px; background:var(--border); margin-top:12px; margin-left:calc(50% - 50vw) }
@media(min-width:768px){
  .full-width-rule{ margin-top:16px; margin-left:calc(50% - 50vw) }
}
/* Use a Minecraft / pixel-style font for the main title */
.title{
  /* Jersey 25 (pixel-style) for the main title */
  font-family: 'Jersey 25', 'Press Start 2P', 'Helvetica Neue', Arial, sans-serif;
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  /* tune for readability on small screens */
  font-size:2.6rem;
}

@media(min-width:768px){
  .title{ font-size:2.6rem }
}

/* Example @font-face (use only if you have the font file and the right to use it):
@font-face {
  font-family: 'Minecraft';
  src: url('/fonts/Minecraft.woff2') format('woff2'),
       url('/fonts/Minecraft.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
*/
.lead{
  /* color:var(--muted); */
  margin:0 0 20px; /* tightened lead spacing */
  font-size:22px;
  line-height:1.5;
  max-width:600px;
}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap}

/* CHANGED: make hero CTA buttons equal width */
.hero-cta{ display:flex; gap:12px; align-items:center }
.hero-cta .btn{ flex:1; min-width:140px; display:inline-flex; align-items:center; justify-content:center }
/* CHANGED: use the same pixel-style font as H1 for hero CTA buttons */
.hero-cta .btn{ font-family: 'Jersey 25', 'Press Start 2P', 'Helvetica Neue', Arial, sans-serif; font-size:1.20rem; text-transform:none }

/* Hero layout with illustration */
.hero > .container{ max-width:100%; padding:0; }
.hero-inner{ display:flex; flex-direction:column; gap:12px; align-items:stretch; max-width:var(--max-width); margin:0 auto; padding:30px 18px; /* CHANGED: top padding 20px gives ~20px gap between header and title */ }
.hero-body{ display:flex; flex-direction:column; gap:12px; align-items:center; padding: 50px 0 50px 0 }
.hero-copy{ flex:1; max-width:720px }
.hero-media{ width:100%; max-width:420px; margin:0 auto }
.hero-image{ width:100%; height:auto; display:block; border-radius:10px }

@media(min-width:768px){
  .hero-body{ flex-direction:row; align-items:center; gap:20px }
  /* CHANGED: reduce top gap on desktop only to ~12px (was controlled by .hero-inner padding) */
  .hero-inner{ padding-top:12px }
  .hero-media{ flex:0 0 44%; max-width:44% }
  .hero-copy{ flex:1; max-width:56% }
  /* ensure title sits above both columns and stretches full width */
  .title{ max-width:100% }
}

/* Buttons - eBay style */
.btn{
  display:inline-block; 
  padding:16px 32px; 
  border-radius:var(--radius); 
  text-decoration:none; 
  font-size:16px;
  transition:all 0.2s ease;
  cursor:pointer;
  border:2px solid transparent;
}
.btn.primary{
  background:var(--accent); 
  color:#fff;
  border-color:var(--accent);
}
.btn.primary:hover{
  background:#0056b8;
  border-color:#0056b8;
}
.btn.ghost{
  background:transparent; 
  color:var(--accent); 
  border:2px solid var(--accent);
}
.btn.ghost:hover{
  background:var(--accent);
  color:#fff;
}

/* SECTIONS - Clean eBay Playbook style */
.section{padding:80px 0}
.section.alt{background:#f7f7f7}
.section h2{
  font-size:2.5rem;
  font-weight:600;
  margin:0 0 48px;
  color:var(--text);
  letter-spacing:-0.01em;
}
.grid{display:grid; gap:32px}
.card{
  background:var(--card); 
  padding:40px; 
  border-radius:var(--radius); 
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}
/* CHANGED: ensure images inside cards inherit the card's content width */
.card-img{ width:100%; height:auto; display:block; border-radius:8px; margin:12px 0 }

/* CHANGED: .card--media makes the image full-bleed (edge-to-edge) inside the card
   and moves the textual content into .card-body with normal padding. */
.card--media{ padding:0; overflow:hidden }
.card--media .card-img{ width:100%; display:block; margin:0; border-radius:0 }
.card--media .card-body{ padding:20px 24px }

/* CHANGED: feature-card - image left, content right; stacks on small screens */
.feature-card{ padding:0; overflow:hidden; margin-bottom:20px }
/* CHANGED: remove the boxed/card visual for feature rows so they appear as plain sections */
.feature-card{ background:transparent; box-shadow:none; border:none; border-radius:0; margin-top: 70px }
.feature-body{ display:flex; flex-direction:column; gap:12px; align-items:stretch }
.feature-media{ flex:0 0 auto; }
.feature-image{ width:100%; height:auto; display:block; border-radius:6px; border: 1px solid lightgray }
.feature-content{ padding:18px 20px; text-align: left; }

@media(min-width:768px){
  .feature-body{ flex-direction:row; align-items:center; gap:20px }
  .feature-media{ flex:0 0 40%; max-width:40%; border: 1px solid lightgrey }
  .feature-image{ border-radius:8px }
  .feature-content{ flex:1; padding:24px }
}

/* CHANGED: benefits section - image on left and list on right, reuse feature-image sizing */
.benefits-inner{ display:flex; flex-direction:column; gap:16px; align-items:center }
.benefits-media{ width:auto; /* CHANGED: let the image determine its own width (we set the image to 800px) */ }
.benefits-list-container{ width:100%; text-align:left }

/* CHANGED: set the benefits image to 255px width (shrinks on small screens); edit this value to change size */
.benefits-media .feature-image{ width:255px; max-width:100%; height:auto; display:block; margin:0; border:none; border-radius:8px; }
.benefits-list li{ border-bottom:none; padding:10px 0 }

@media(min-width:768px){
  /* Center the list vertically next to the image */
  .benefits-inner{ flex-direction:row; gap:24px; align-items:center }
  /* CHANGED: keep the image column auto so it only uses as much space as the image requires */
  .benefits-media{ flex:0 0 auto; }
  .benefits-list-container{ flex:1 }
  /* Ensure the list content itself is centered vertically in its column */
  .benefits-list-container{ display:flex; align-items:center }
}
.card h3{
  font-size:1.5rem;
  font-weight:600;
  margin:0 0 16px;
  color:var(--text);
}
.card p{
  color:var(--muted);
  font-size:16px;
  margin:0;
  line-height:1.6;
}
.benefits-list{
  padding-left:0; 
  list-style:none;
  font-size:18px;
}
.benefits-list li{
  padding:12px 0;
  border-bottom:1px solid var(--border);
  color:var(--text);
}
.benefits-list li:last-child{border-bottom:none}

/* Privacy policy section styles */
.privacy p{ margin:0 0 12px; color:var(--text) }
.privacy h3{ margin-top:14px; margin-bottom:8px }
.privacy .muted{ color:var(--muted); margin-bottom:8px }
/* Full-width border under the privacy section */
.privacy .full-width-rule{ margin-top:100px }

/* Contact Form */
.contact-form{display:grid; gap:24px; max-width:600px}
.contact-form label{
  font-weight:600;
  color:var(--text);
  margin-bottom:8px;
  display:block;
}
.contact-form input, .contact-form textarea{
  padding:16px; 
  border-radius:var(--radius); 
  border:2px solid var(--border);
  font-size:16px;
  transition:border-color 0.2s ease;
}
.contact-form input:focus, .contact-form textarea:focus{
  border-color:var(--accent);
  outline:none;
}
.form-actions{margin-top:16px}
.form-status{margin-top:16px; color:var(--muted)}

/* Footer */
.site-footer{
  padding:40px 0; 
  text-align:center; 
  color:var(--muted);
  border-top:1px solid var(--border);
  background:#f7f7f7;
}

/* resources removed per request */

/* Responsive Design */
@media(min-width:768px){
  .nav{display:block}
  .menu-toggle{display:none}
  /*.hero{padding:60px 0 140px}*/
  .title{font-size:4.5rem}
  .lead{font-size:24px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .section{padding:100px 0}
}

@media(min-width:1024px){
  .title{font-size:5rem}
  .container{padding:0 40px}
}

/* Accessibility helpers */
button:focus, a:focus, input:focus, textarea:focus{outline:3px solid rgba(37,99,235,.15); outline-offset:2px}

/* Header scrolled state (compact + shadow) */
.site-header.scrolled{ box-shadow:0 6px 24px rgba(0,0,0,0.08); background:rgba(255,255,255,0.98); }
.site-header.scrolled .container{ padding:10px 24px; min-height:var(--header-height-scrolled); }
.site-header.scrolled ~ main{ padding-top:var(--header-height-scrolled); }



.logo-img
{
  margin: 0 auto;
  text-align: center
  width: 500px;
}


section#benefits
{
    padding-top: 90px;
}

section#benefits h1
{
    margin-bottom: 50px;
}

section#privacy
{
    padding-bottom: 50px;
}

section#contact
{
    padding-top: 50px;
}

section#hero
{
    padding-top: 30px;
}