/* ============================================================================
   VideoGrab — luxury visual identity
   Palette: deep garnet red + champagne gold + warm ivory.
   Display: refined serif (Palatino/Iowan family) · Body: system sans.
   One bold moment (the garnet hero/footer frame); gold used sparingly.
   ========================================================================== */
:root {
  color-scheme: light;
  --wine:#8e1c2a;          /* primary garnet red   */
  --wine-deep:#6b0f1a;     /* hover / deep accents  */
  --wine-ink:#330a10;      /* darkest surface       */
  --gold:#b8923f;          /* champagne gold accent */
  --gold-bright:#d8b55e;   /* gold highlight        */
  --ink:#271a1c;           /* warm near-black text  */
  --muted:#7c6a65;         /* warm grey-brown       */
  --ivory:#faf6f1;         /* page background       */
  --blush:#f4ebe4;         /* tinted band           */
  --surface:#ffffff;
  --line:#ebe0d8;          /* warm hairline         */
  --line-strong:#dcccc1;
  --shadow:0 18px 40px -22px rgba(74,12,22,.45);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Hoefler Text",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; min-width:320px; overflow-x:hidden; font-family:var(--sans); background:var(--ivory); color:var(--ink); line-height:1.6; overflow-wrap:anywhere; }
img { display:block; max-width:100%; }
button,input,select,textarea { font:inherit; }
a { color:var(--wine); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:2px; }
.container { max-width:1120px; margin:0 auto; padding:0 20px; }
.section { padding:40px 0; }
.muted { color:var(--muted); } .small { font-size:13px; }
h1,h2,h3 { font-family:var(--serif); font-weight:600; letter-spacing:-.01em; color:var(--ink); }
h1 { font-size:clamp(30px,4.4vw,46px); line-height:1.1; margin:0 0 14px; }
h2 { font-size:clamp(21px,2.6vw,27px); line-height:1.2; margin:0 0 14px; }
h3 { font-size:18px; margin:0 0 6px; }
.lead { color:#5c4b45; max-width:66ch; margin:0 0 14px; font-size:16px; }
:focus-visible { outline:2px solid var(--wine); outline-offset:3px; }
::selection { background:var(--wine); color:#fff; }

/* Buttons --------------------------------------------------------------- */
.btn { display:inline-flex; min-height:46px; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(180deg,var(--wine),var(--wine-deep)); color:#fff; border:0; border-radius:11px;
  padding:11px 26px; font-size:15px; font-weight:600; cursor:pointer; text-decoration:none; letter-spacing:.01em;
  touch-action:manipulation; box-shadow:0 10px 24px -14px rgba(107,15,26,.9); transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { background:linear-gradient(180deg,var(--wine-deep),var(--wine-ink)); text-decoration:none; transform:translateY(-1px); box-shadow:0 16px 30px -16px rgba(107,15,26,.95); }
.btn.ghost { background:#fff; color:var(--ink); border:1px solid var(--line-strong); box-shadow:none; }
.btn.ghost:hover { background:var(--blush); border-color:var(--gold); transform:none; }
/* The download action is the moment of delight — champagne gold on dark ink. */
.btn.ok { background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#2a1402; box-shadow:0 12px 26px -14px rgba(184,146,63,.95); }
.btn.ok:hover { background:linear-gradient(180deg,var(--gold),#9a7a31); color:#2a1402; }
.btn:disabled { opacity:.55; cursor:default; transform:none; box-shadow:none; }

/* Promo bar ------------------------------------------------------------- */
.promo { background:var(--wine-ink); color:#f3e7df; font-size:14px; border-bottom:1px solid rgba(216,181,94,.3); }
.promo-in { display:flex; gap:10px; align-items:center; justify-content:center; padding:9px 16px; }
.promo a { color:var(--gold-bright); font-weight:700; }

/* Header ---------------------------------------------------------------- */
.site-head { position:sticky; top:0; z-index:40; background:rgba(250,246,241,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.head-in { position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:68px; padding:10px 20px; }
.brand { font-family:var(--serif); font-weight:700; font-size:21px; color:var(--ink); display:flex; align-items:center; gap:10px; letter-spacing:-.01em; }
.logo { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center;
  background:linear-gradient(145deg,var(--wine),var(--wine-ink)); color:var(--gold-bright); border-radius:9px; font-size:15px;
  box-shadow:inset 0 0 0 1px rgba(216,181,94,.4); }
.nav { display:flex; flex-wrap:wrap; align-items:center; gap:18px; font-size:14.5px; }
.nav a { color:#4a3b37; }
.nav a:hover { color:var(--wine); text-decoration:none; }
.nav .account-link { color:var(--wine); font-weight:700; }
.nav .upgrade-link { color:var(--gold); font-weight:700; }
.nav-toggle { display:none; min-width:46px; min-height:46px; align-items:center; justify-content:center; gap:6px; padding:8px 12px;
  border:1px solid var(--line-strong); border-radius:11px; background:#fff; color:var(--ink); font-weight:700; cursor:pointer; touch-action:manipulation; }

/* Hero — the one bold, memorable surface -------------------------------- */
.hero { position:relative; background:radial-gradient(120% 140% at 50% -20%, #7a1522 0%, var(--wine-deep) 42%, var(--wine-ink) 100%); color:#fdeee6; border-bottom:1px solid rgba(216,181,94,.35); overflow:hidden; }
.hero::after { content:""; position:absolute; left:50%; transform:translateX(-50%); top:0; width:min(680px,86%); height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.hero .container { padding-top:72px; padding-bottom:72px; text-align:center; }
.hero h1 { color:#fff; font-size:clamp(32px,5.6vw,56px); margin-bottom:18px; }
.hero .lead { color:#f0d8ce; margin-left:auto; margin-right:auto; font-size:clamp(16px,2vw,19px); }
.hero .btn { margin-top:10px; }
.hero .btn:not(.ok) { background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:#2a1402; box-shadow:0 14px 30px -14px rgba(0,0,0,.6); }
.hero .btn:not(.ok):hover { background:linear-gradient(180deg,#e6c877,var(--gold)); }

/* Platform chooser cards ------------------------------------------------ */
.cards { display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.card { position:relative; display:block; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { border-color:var(--gold); box-shadow:var(--shadow); transform:translateY(-3px); text-decoration:none; }
.card-name { font-family:var(--serif); font-size:24px; font-weight:600; letter-spacing:-.01em; }
.card-title { font-weight:600; margin-top:4px; color:var(--ink); }
.card p { color:var(--muted); font-size:14px; margin:8px 0 0; }
.card-open { display:inline-block; margin-top:14px; color:var(--wine); font-weight:700; font-size:14px; }
.card:hover .card-open { color:var(--wine-deep); }

/* How it works — a genuine sequence, so numbered, set in gold serif ------ */
.band { background:var(--blush); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.steps { display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.step { background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:12px; padding:20px 22px; }
.step-n { font-family:var(--serif); color:var(--wine); font-weight:700; font-size:15px; letter-spacing:.02em; }
.step b { display:block; margin-top:4px; font-size:16px; }
.step p { color:var(--muted); font-size:14px; margin:6px 0 0; }

/* Downloader widget ----------------------------------------------------- */
.dl-wrap { display:grid; gap:22px; grid-template-columns:minmax(0,1fr) 300px; margin-top:10px; }
@media (max-width:860px){ .dl-wrap { grid-template-columns:1fr; } }
.downloader { position:relative; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:16px; padding:24px; box-shadow:var(--shadow); }
.downloader label { font-size:14px; font-weight:700; color:var(--ink); }
.dl-row { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.dl-row input { flex:1; min-width:180px; padding:13px 14px; border:1px solid var(--line-strong); border-radius:11px; font-size:15px; background:#fff; transition:border-color .15s, box-shadow .15s; }
.dl-row input:focus { outline:none; border-color:var(--wine); box-shadow:0 0 0 3px rgba(142,28,42,.14); }
.msg { margin-top:14px; border-radius:11px; padding:11px 14px; font-size:14px; }
.msg.err { background:#fdf0f0; border:1px solid #f3c6c6; color:#9b1c1c; }
.msg.warn { background:#fdf3e7; border:1px solid #f0d6a9; color:#8a5a16; }
.msg.ok { background:#eef7ef; border:1px solid #bfe0c4; color:#20603a; }
.preview { margin-top:18px; }
.preview-skeleton { min-height:190px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; border-radius:12px; background:linear-gradient(100deg,#f3ece6 30%,#faf6f1 45%,#f3ece6 60%); background-size:220% 100%; animation:skeleton 1.25s ease-in-out infinite; color:var(--muted); font-size:14px; text-align:center; padding:20px; }
.spinner { width:30px; height:30px; border:3px solid #e4d6cc; border-top-color:var(--wine); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes skeleton { 0%{background-position:100% 0}100%{background-position:-100% 0} }
.preview-in { display:flex; gap:16px; flex-wrap:wrap; }
.thumb { width:230px; max-width:100%; aspect-ratio:16/9; background:#efe6df; border-radius:12px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--line); }
.thumb img { width:100%; height:100%; object-fit:cover; }
.pv-info { flex:1; min-width:200px; }
.pv-info h3 { font-size:19px; }
.pv-info select { display:block; max-width:100%; min-height:46px; margin-top:4px; padding:10px 34px 10px 12px; border:1px solid var(--line-strong); border-radius:9px; background:#fff; }
.pv-info .btn { margin-top:14px; }
.quality-label { display:block; margin-top:12px; font-weight:700; font-size:14px; color:var(--ink); }
.plan-line { font-size:13px; color:var(--muted); margin:12px 0 0; }
.plan-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.02em; }
.plan-badge.free { color:var(--wine); background:#f6e4e3; }
.plan-badge.premium { color:#7a5a12; background:linear-gradient(180deg,#fbeecb,#f3dca0); border:1px solid #e6cd86; }
.adgate { margin-top:18px; border-top:1px solid var(--line); padding-top:16px; }
.ad-step { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.ad-slot { width:100%; min-height:280px; display:flex; align-items:center; justify-content:center; overflow:hidden; contain:layout paint; background:var(--blush); border:1px dashed var(--line-strong); border-radius:12px; color:var(--muted); margin-bottom:12px; }
.ad-slot iframe,.ad-slot ins { max-width:100%; }
.download-status { margin-top:12px; min-height:24px; }
.side { }
.crumb { font-size:13px; color:var(--muted); margin-bottom:12px; }
.crumb a,.foot-legal a { text-decoration:underline; text-underline-offset:2px; }
.grid2 { display:grid; gap:28px; grid-template-columns:1fr 1fr; margin-top:40px; }
@media (max-width:720px){ .grid2 { grid-template-columns:1fr; } }
.grid2 h2 { font-size:20px; }
.grid2 ul, .grid2 ol { padding-left:20px; color:#574843; font-size:14.5px; }
.errs { display:grid; gap:12px; }
.err-item { border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:16px; }
.err-item b { color:var(--wine); }
.err-item p { color:var(--muted); font-size:14px; margin:4px 0 0; }
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip { border:1px solid var(--line-strong); background:#fff; border-radius:999px; padding:9px 16px; font-size:14px; color:var(--ink); }
.chip:hover { border-color:var(--gold); color:var(--wine); text-decoration:none; }

/* SEO copy under the downloader */
.seo-copy { max-width:72ch; margin:24px 0 6px; }
.seo-copy p { color:#574843; font-size:15.5px; line-height:1.75; margin:0 0 12px; }
.seo-copy p:first-of-type { font-size:17px; color:#4a3b36; }

/* FAQ ------------------------------------------------------------------- */
.faq details { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
.faq details[open] { border-color:var(--gold); }
.faq summary { cursor:pointer; font-weight:700; color:var(--ink); }
.faq p { color:var(--muted); font-size:14.5px; margin:10px 0 0; }

/* Affiliate ------------------------------------------------------------- */
.aff h2 { margin-bottom:12px; }
.aff-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.side .aff-grid { grid-template-columns:1fr; }
.aff-card { display:block; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:16px; transition:border-color .15s, box-shadow .15s; }
.aff-card:hover { border-color:var(--gold); box-shadow:var(--shadow); text-decoration:none; }
.aff-label { font-weight:700; color:var(--ink); }
.aff-card p { color:var(--muted); font-size:13px; margin:4px 0 0; }
.aff-tag { font-size:11px; color:var(--gold); font-weight:700; }

/* Prose (info/legal pages) ---------------------------------------------- */
.prose { max-width:68ch; }
.prose h1 { margin-bottom:8px; }
.prose h2 { margin-top:26px; }
.prose p, .prose li { color:#4f403b; }
.prose ul, .prose ol { color:#4f403b; }

/* Member account -------------------------------------------------------- */
.account-page { max-width:920px; }
.account-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.account-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:24px; box-shadow:var(--shadow); }
.account-card h2 { font-size:20px; }
.account-card label { display:block; margin:12px 0; font-size:14px; font-weight:700; color:var(--ink); }
.account-card input { display:block; width:100%; margin-top:5px; padding:11px 13px; border:1px solid var(--line-strong); border-radius:10px; font-size:15px; }
.account-card input:focus { outline:none; border-color:var(--wine); box-shadow:0 0 0 3px rgba(142,28,42,.14); }
@media (max-width:720px){ .account-grid { grid-template-columns:1fr; } }

/* Pricing --------------------------------------------------------------- */
.pricing-page { max-width:1020px; }
.pricing-head { text-align:center; margin-bottom:28px; }
.pricing-head .lead { margin-left:auto; margin-right:auto; }
.pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.price-card { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:var(--shadow); }
/* premium tier wears the gold */
.price-card.premium, .price-card:last-child { border-color:var(--gold); border-top:3px solid var(--gold); }
.price-card h2 { margin-top:8px; font-size:22px; }
.free-plan { max-width:500px; margin:0 auto 20px; text-align:center; }
.plan-price { font-family:var(--serif); font-size:40px; line-height:1.1; font-weight:600; color:var(--wine); margin:12px 0; }
.plan-price span { font-family:var(--sans); font-size:14px; color:var(--muted); font-weight:500; }
.feature-list { list-style:none; padding:0; margin:18px 0; color:#4f403b; }
.feature-list li { margin:9px 0; padding-left:26px; position:relative; }
.feature-list li::before { content:""; position:absolute; left:4px; top:9px; width:9px; height:5px; border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(-45deg); }
.price-card .btn { width:100%; }
.price-card > .btn + .offline-option { margin-top:12px; }
.offline-option { margin-top:14px; border:1px solid var(--line); border-radius:11px; padding:12px 14px; background:var(--blush); }
.offline-option summary { cursor:pointer; font-weight:700; color:var(--ink); }
.offline-option p { color:var(--muted); font-size:13px; }
.offline-option label { display:block; margin:10px 0; font-size:13px; font-weight:700; color:var(--ink); }
.offline-option input { display:block; width:100%; min-height:46px; margin-top:4px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:9px; background:#fff; }
.offline-upi { padding:9px 11px; border-radius:9px; background:#eef7ef; color:#20603a!important; font-weight:600; }
.pricing-notice { max-width:720px; margin:0 auto 20px; }
.request-history { margin:20px 0; padding-top:16px; border-top:1px solid var(--line); }
.request-line { font-size:13px; color:#574843; }
.request-status { font-weight:700; }
.request-status.approved{ color:#20603a; } .request-status.rejected{ color:#9b1c1c; } .request-status.pending{ color:#9a6a12; }
@media (max-width:720px){ .pricing-grid { grid-template-columns:1fr; } .price-card{ padding:20px; } }

/* Footer — dark garnet to bookend the hero ------------------------------ */
.site-foot { background:var(--wine-ink); color:#e9d7cd; margin-top:56px; border-top:3px solid var(--gold); }
.foot-grid { display:grid; gap:28px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); padding:44px 0 32px; }
.foot-grid .brand { color:#fff; }
.foot-grid h2 { margin:0 0 10px; font-size:13px; font-family:var(--sans); font-weight:700; letter-spacing:.04em; color:var(--gold-bright); }
.foot-grid ul { list-style:none; padding:0; margin:0; font-size:14px; }
.foot-grid li { margin:6px 0; }
.foot-grid a { color:#e4cfc4; }
.foot-grid a:hover { color:#fff; }
.foot-grid .muted { color:#c7a99d; }
.foot-legal { border-top:1px solid rgba(216,181,94,.25); padding:18px 0; font-size:12.5px; color:#c7a99d; }
.foot-legal a { color:var(--gold-bright); }

/* Responsive ------------------------------------------------------------ */
@media (max-width:720px) {
  .container { padding-left:16px; padding-right:16px; }
  .section { padding-top:28px; padding-bottom:28px; }
  .site-head { backdrop-filter:none; background:var(--ivory); }
  .head-in { min-height:62px; padding:8px 16px; }
  .brand { min-width:0; max-width:calc(100% - 94px); font-size:19px; }
  .logo { flex:0 0 32px; }
  .nav-toggle { display:inline-flex; }
  .nav { display:none; position:absolute; top:calc(100% + 1px); left:12px; right:12px; z-index:60; max-height:calc(100vh - 84px); overflow-y:auto; padding:8px; flex-direction:column; gap:2px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 44px -18px rgba(74,12,22,.5); }
  .nav.is-open { display:flex; }
  .nav a { display:flex; min-height:46px; align-items:center; padding:9px 12px; border-radius:9px; }
  .nav a:hover { background:var(--blush); text-decoration:none; }
  .hero .container { padding-top:48px; padding-bottom:50px; }
  .promo-in { flex-wrap:wrap; text-align:center; }
  .cards { grid-template-columns:1fr; gap:14px; }
  .card { padding:20px; }
  .downloader { padding:18px; }
  .thumb { width:100%; }
  .pv-info { min-width:0; width:100%; }
  .pv-info select,.pv-info .btn { width:100%; }
  .grid2 { gap:22px; margin-top:30px; }
  .account-card { padding:18px; }
  .account-card input { min-height:48px; font-size:16px; }
  .account-card .btn { width:100%; }
  .foot-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
}
@media (max-width:560px) {
  .dl-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .dl-row input { grid-column:1/-1; width:100%; min-width:0; min-height:50px; font-size:16px; }
  .dl-row .btn { width:100%; padding-left:12px; padding-right:12px; }
  .preview-skeleton { min-height:300px; }
  .adgate > .btn { width:100%; margin:0 0 8px; }
  .ad-slot { min-height:280px; }
  .chips { gap:8px; }
  .chip { display:inline-flex; min-height:44px; align-items:center; }
  .faq summary { min-height:44px; display:flex; align-items:center; }
}
@media (max-width:420px) {
  .foot-grid { grid-template-columns:1fr; }
  .brand { font-size:17px; }
  .nav-toggle span:last-child { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}