/* =====================================================================
   PrepShipHub — Solutions / channel page styles
   Shared across Walmart, Shopify, eBay, 3PL pages.
   Accent is themeable per page via --ch (primary) and --ch-light (tint on dark).
   ===================================================================== */
:root{ --ch:#0071dc; --ch-light:#bcd6ff; }

/* ---- hero ---- */
.s-hero{position:relative;overflow:hidden;color:#e6eefb;padding:80px 0 0;
  background:radial-gradient(1100px 560px at 78% -8%,rgba(43,82,134,.55),transparent 60%),radial-gradient(760px 460px at 92% 12%,color-mix(in srgb,var(--ch) 22%,transparent),transparent 58%),linear-gradient(180deg,var(--navy-900),var(--navy-950))}
.s-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(900px 500px at 70% 0%,#000,transparent 75%);opacity:.5}
.s-hero .wrap{position:relative;z-index:2}
.s-hero-content{text-align:center;max-width:740px;margin:0 auto;padding-bottom:48px}
.s-hero h1{color:#fff;font-size:clamp(34px,4.5vw,56px);font-weight:800;letter-spacing:-.03em;line-height:1.08}
.s-hero h1 .hl{color:transparent;background:linear-gradient(100deg,var(--ch-light),color-mix(in srgb,var(--ch-light) 45%,#fff));-webkit-background-clip:text;background-clip:text}
.s-hero-sub{margin:20px auto 0;font-size:clamp(16px,1.3vw,18px);color:#b3c6e4;line-height:1.65;max-width:580px}
.s-hero-badge{display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--ch) 18%,transparent);border:1px solid color-mix(in srgb,var(--ch-light) 40%,transparent);padding:6px 16px;border-radius:50px;font-size:12px;font-weight:700;color:var(--ch-light);letter-spacing:.04em;margin-bottom:24px}
.s-hero-badge svg{width:14px;height:14px}

/* product preview floating over hero bottom */
.s-hero-preview{position:relative;max-width:960px;margin:0 auto;padding:0 24px}
.s-hero-preview .appwin{background:#fff;border:1px solid var(--slate-200);border-radius:16px 16px 0 0;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.25)}
.s-hero-preview .topbar{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--slate-50);border-bottom:1px solid var(--slate-200)}
.s-hero-preview .dots i{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:5px}
.s-hero-preview .dots i:nth-child(1){background:#ff5f57}.s-hero-preview .dots i:nth-child(2){background:#febc2e}.s-hero-preview .dots i:nth-child(3){background:#28c840}
.s-hero-preview .addr{font-family:var(--font-mono);font-size:11px;color:var(--slate-500);background:var(--slate-100);padding:4px 12px;border-radius:6px;flex:1;text-align:center}
.s-hero-preview .sync-dot{width:7px;height:7px;border-radius:50%;background:var(--ch)}
.s-hero-preview .ph-tag{font-size:10px;padding:3px 8px;border-radius:6px;font-weight:700}
.s-hero-preview .ph-tag.ch{background:color-mix(in srgb,var(--ch) 12%,transparent);color:var(--ch)}
.s-hero-preview .ph-tag.navy{background:rgba(29,64,114,.12);color:var(--navy-800)}
.s-hero-preview .ph-tag.muted{background:var(--slate-100);color:var(--slate-600)}

/* overview intro */
.s-overview{padding:64px 0 48px;text-align:center}
.s-overview h2{font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.02em;color:var(--ink);max-width:720px;margin:0 auto}
.s-overview p{font-size:17px;color:var(--slate-600);max-width:640px;margin:16px auto 0;line-height:1.65}

/* feature deep-dives */
.s-feature{padding:56px 0}
.s-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:860px){.s-feature-grid{grid-template-columns:1fr;gap:32px}}
.s-feature-grid.reverse{direction:rtl}.s-feature-grid.reverse>*{direction:ltr}
.sf-copy .kicker{margin-bottom:12px}
.sf-copy h3{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.sf-copy p.lead{font-size:16px;color:var(--slate-600);line-height:1.6;margin-top:14px;max-width:480px}
.sf-checks{display:grid;gap:14px;margin-top:24px}
.sf-check{display:flex;gap:12px;align-items:flex-start}
.sf-check svg{width:20px;height:20px;color:var(--navy-800);flex-shrink:0;margin-top:2px}
.sf-check b{font-size:14px;color:var(--ink)}
.sf-check p{font-size:13.5px;color:var(--slate-600);margin-top:2px}

.sf-visual{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:16px;padding:24px;position:relative;overflow:hidden}
.sf-visual.dark{background:var(--navy-900);border-color:rgba(255,255,255,.1)}
.sf-visual .mock{background:#fff;border:1px solid var(--slate-200);border-radius:12px;padding:18px}
.sf-visual.dark .mock{background:var(--navy-850);border-color:rgba(255,255,255,.08)}
.mock-header{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:13px;font-weight:700;color:var(--ink)}
.sf-visual.dark .mock-header{color:#fff}
.mock-header svg{width:18px;height:18px;color:var(--navy-800)}
.sf-visual.dark .mock-header svg{color:var(--ch-light)}
.mock-row{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;background:var(--slate-50);border-radius:8px;font-size:12px;margin-bottom:6px}
.sf-visual.dark .mock-row{background:rgba(255,255,255,.05)}
.mock-row .k{color:var(--slate-600)}.mock-row .v{color:var(--ink);font-weight:700;font-family:var(--font-mono)}
.sf-visual.dark .mock-row .k{color:#94aacb}.sf-visual.dark .mock-row .v{color:#fff}
.mock .v.ch{color:var(--ch)}

/* 3-card feature row */
.s-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
@media(max-width:860px){.s-cards{grid-template-columns:1fr}}
.s-card{background:#fff;border:1px solid var(--slate-200);border-radius:16px;padding:0;overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.s-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(11,27,48,.12)}
.s-card-visual{background:var(--slate-50);padding:24px;min-height:200px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-bottom:1px solid var(--slate-200)}
.s-card-body{padding:24px}
.s-card-body h3{font-size:17px;font-weight:700;color:var(--ink)}
.s-card-body p{font-size:14px;color:var(--slate-600);line-height:1.55;margin-top:8px}
.s-card-icon{width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--ch) 10%,transparent);color:var(--ch);display:grid;place-items:center}
.s-card-icon svg{width:22px;height:22px}

/* mini dashboard inside cards */
.mini-dash{background:#fff;border:1px solid var(--slate-200);border-radius:10px;padding:14px;width:100%;max-width:220px;position:relative;z-index:2;box-shadow:0 4px 16px rgba(11,27,48,.08)}
.mini-dash .md-title{font-size:10px;font-weight:700;color:var(--navy-800);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.mini-dash .md-title::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ch)}
.mini-dash .md-row{display:flex;justify-content:space-between;font-size:11px;padding:6px 0;border-bottom:1px solid var(--slate-100)}
.mini-dash .md-row:last-child{border:none}
.mini-dash .md-row .k{color:var(--slate-500)}.mini-dash .md-row .v{color:var(--ink);font-weight:700;font-family:var(--font-mono)}

/* workflow steps on dark bg */
.wf-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;counter-reset:step}
@media(max-width:860px){.wf-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.wf-steps{grid-template-columns:1fr}}
.wf-step{background:linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:28px;position:relative;overflow:hidden;-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);box-shadow:0 12px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.16);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s,background .35s}der-color .35s,background .35s;overflow:hidden}
.wf-step::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--ch-light),var(--brand));transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1);border-radius:3px 3px 0 0}
.wf-step:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--ch-light) 55%,transparent);box-shadow:0 30px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.22);background:linear-gradient(165deg,rgba(255,255,255,.2),rgba(255,255,255,.08))}
.wf-step:hover::after{transform:scaleX(1)}
.wf-step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-mono);font-weight:700;font-size:28px;color:var(--ch-light);display:block;margin-bottom:12px;line-height:1;transition:color .3s}
.wf-step:hover::before{color:var(--brand)}
.wf-step h4{font-size:16px;color:#fff;font-weight:700;transition:color .3s}
.wf-step:hover h4{color:var(--ch-light)}
.wf-step p{font-size:13.5px;color:#cdd9ec;line-height:1.55;margin-top:8px}

/* quote block */
.s-quote{background:linear-gradient(135deg,var(--navy-900),var(--navy-850));border-radius:20px;padding:48px;color:#fff;position:relative;overflow:hidden}
.s-quote::after{content:"\201C";position:absolute;top:-20px;left:30px;font-size:180px;font-weight:800;color:color-mix(in srgb,var(--ch-light) 8%,transparent);line-height:1;pointer-events:none}
.s-quote blockquote{font-size:18px;line-height:1.7;color:#e0eaf8;max-width:700px;position:relative;z-index:2;font-style:italic}
.s-quote .who{margin-top:24px;display:flex;align-items:center;gap:14px;position:relative;z-index:2}
.s-quote .av{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:15px;flex:none;background:var(--ch);color:#fff}
.s-quote .nm{font-weight:700;font-size:15px}.s-quote .rl{font-size:13px;color:#94aacb}

/* video section */
.s-video{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:linear-gradient(145deg,var(--navy-900),#0a1520);display:grid;place-items:center;cursor:pointer;transition:transform .2s}
.s-video:hover{transform:scale(1.01)}
.s-video .overlay-text{position:absolute;bottom:48px;left:0;right:0;text-align:center;color:#fff;font-size:clamp(22px,3vw,36px);font-weight:800;letter-spacing:-.02em;text-wrap:balance;padding:0 24px}
.s-video .overlay-text span{color:var(--ch-light)}
.s-video .play-btn{width:84px;height:84px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 16px 44px rgba(0,0,0,.4);transition:transform .2s;position:relative;z-index:2}
.s-video:hover .play-btn{transform:scale(1.08)}
.s-video .play-btn svg{width:30px;height:30px;color:var(--navy-900);margin-left:4px}

/* security strip */
.sec-strip{background:linear-gradient(135deg,var(--navy-900),var(--navy-850));border-radius:14px;padding:22px 32px;display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center;border:1px solid color-mix(in srgb,var(--ch-light) 10%,transparent)}
.sec-strip .si{display:flex;align-items:center;gap:10px}
.sec-strip .si svg{width:20px;height:20px;color:var(--ch-light)}
.sec-strip .si span{font-size:14px;font-weight:700;color:#fff}
.sec-strip .sd{width:1px;height:20px;background:color-mix(in srgb,var(--ch-light) 20%,transparent)}

/* social badge accent */
.rbadge .lg.ch{background:var(--ch)}

/* FAQ */
.s-faq .faq-item{border-bottom:1px solid var(--slate-200)}
.s-faq .faq-q{width:100%;text-align:left;background:none;border:none;padding:22px 4px;display:flex;align-items:center;gap:18px;font-size:17px;font-weight:700;color:var(--ink);cursor:pointer;font-family:inherit}
.s-faq .faq-q .pm{margin-left:auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--slate-300);display:grid;place-items:center;flex:none;transition:.2s}
.s-faq .faq-q .pm svg{width:14px;height:14px;transition:transform .25s}
.s-faq .faq-item.open .faq-q .pm{background:var(--accent);border-color:var(--accent);color:#fff}
.s-faq .faq-item.open .faq-q .pm svg{display:none}
.s-faq .faq-q .pm::after{content:"";display:none;width:12px;height:2px;background:currentColor;border-radius:1px}
.s-faq .faq-item.open .faq-q .pm::after{display:block}
.s-faq .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.s-faq .faq-a .inner{padding:0 4px 24px;font-size:15px;color:var(--slate-600);line-height:1.6;max-width:700px}
.s-faq .faq-item.open .faq-a{max-height:340px}

/* image-slot custom element rendered as a clean static placeholder
   (the agency authoring widget / image-slot.js is intentionally not loaded). */
image-slot { display: grid; place-items: center; background: var(--slate-50); border: 1.5px dashed var(--slate-300); border-radius: 16px; color: var(--slate-400); overflow: hidden; }
image-slot::before { content: attr(placeholder); font-size: 13px; line-height: 1.5; padding: 24px; text-align: center; max-width: 340px; }

/* ===== Legal pages (Terms of Service, Privacy Policy) ===== */
.legal-wrap { max-width: 840px; }
.legal-title { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin-top: 10px; line-height: 1.1; }
.legal-sub { font-size: 16px; color: var(--slate-500); margin-top: 12px; }
.legal-updated { font-size: 13px; color: var(--slate-400); margin-top: 14px; }
.legal-prose { margin-top: 28px; color: var(--slate-600); font-size: 14.5px; line-height: 1.75; }
.legal-prose h2 { font-size: 21px; font-weight: 800; color: var(--ink); margin: 34px 0 10px; letter-spacing: -.01em; }
.legal-prose h3 { font-size: 16.5px; font-weight: 700; color: var(--ink); margin: 26px 0 8px; }
.legal-prose h4 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 26px 0 8px; }
.legal-prose p { margin: 11px 0; }
.legal-prose ul, .legal-prose ol { margin: 12px 0 12px 22px; padding: 0; }
.legal-prose li { margin: 7px 0; }
.legal-prose a { color: var(--accent); font-weight: 600; word-break: break-word; }
.legal-prose a:hover { text-decoration: underline; }
.legal-prose strong, .legal-prose b { color: var(--ink); font-weight: 700; }
.legal-prose hr { border: none; border-top: 1px solid var(--slate-200); margin: 26px 0; }
.legal-prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13.5px; }
.legal-prose th, .legal-prose td { border: 1px solid var(--slate-200); padding: 9px 12px; text-align: left; vertical-align: top; }
.legal-prose th { background: var(--slate-50); font-weight: 700; color: var(--ink); }
.legal-contact { margin-top: 18px; padding: 18px 20px; background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: var(--r-md); }
.legal-contact p { margin: 0; line-height: 1.7; }