/* JetShipper public site — brand tokens from docs/brand/02_brand_kit.md.
   Contrast rules (brand kit §6): red text on white only (use --red-dark on Mist); on Ink, text is White/Mist only. */
@font-face{font-family:"Archivo";src:url(fonts/archivo-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Archivo";src:url(fonts/archivo-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --red:#E6211E;--red-dark:#B81C19;--ink:#0F172A;--mist:#F6F7F9;--white:#FFFFFF;
  --border:#E7EAEF;--divider:#EDEFF2;--slate:#4A5364;--muted:#5B6472;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;--display:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --wrap:1200px;--gutter:clamp(20px,4vw,40px);--radius:14px;--site-header-height:73px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--site-header-height) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:6px;z-index:100}
.skip:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:8px;
  font:600 16px/1.2 var(--sans);text-decoration:none;border:1.5px solid transparent;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--red);color:var(--white)}
.btn-primary:hover{background:var(--red-dark)}
.btn-secondary{border-color:#C9CFD8;color:var(--ink);background:var(--white)}
.btn-secondary:hover{border-color:var(--ink)}
.btn-light{background:var(--white);color:var(--ink)}
.btn-light:hover{background:var(--mist)}
.arrow::after{content:"→";font-family:var(--sans)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border)}
.site-header .wrap{display:flex;align-items:center;gap:28px;min-height:72px}
.logo{display:block;padding:12px 0;margin-right:auto;flex:none}
.logo img{width:150px}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:15px;font-weight:500;text-decoration:none;color:var(--slate)}
.nav a:hover{color:var(--ink)}
.header-actions{display:flex;align-items:center;gap:14px}
.lang{font:600 13px/1 var(--sans);text-decoration:none;color:var(--slate);border:1px solid var(--border);border-radius:6px;padding:8px 9px}
.lang:hover{border-color:var(--ink);color:var(--ink)}
.signin{font-size:15px;font-weight:600;text-decoration:none}
.signin:hover{color:var(--red-dark)}
.site-header .btn{min-height:42px;padding:9px 16px;font-size:15px}
.mobile-nav{display:none}
.mobile-nav summary{display:grid;place-items:center;position:relative;width:40px;height:40px;list-style:none;
  border:1px solid var(--border);border-radius:8px;color:var(--ink);cursor:pointer}
.mobile-nav summary::-webkit-details-marker{display:none}
.menu-icon{width:18px;height:14px;border-block:2px solid currentColor;position:relative}
.menu-icon::after{content:"";position:absolute;left:0;right:0;top:4px;border-top:2px solid currentColor}
.mobile-nav[open] .menu-icon{height:2px;border:0;background:currentColor;transform:rotate(45deg)}
.mobile-nav[open] .menu-icon::after{top:0;transform:rotate(90deg)}
.mobile-panel{position:absolute;top:100%;left:var(--gutter);right:var(--gutter);display:grid;gap:4px;padding:12px;
  max-width:480px;margin-left:auto;max-height:calc(100dvh - var(--site-header-height) - 12px);overflow-y:auto;
  background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,.14)}
.mobile-panel a{display:flex;align-items:center;min-height:44px;padding:10px 12px;border-radius:6px;
  font-size:15px;font-weight:500;text-decoration:none}
.mobile-panel a:hover{background:var(--mist)}
.mobile-platforms>span{display:block;padding:10px 12px;font-size:15px;font-weight:500;color:var(--slate)}
.mobile-platforms>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mobile-platforms a{background:var(--mist)}
@media (max-width:980px){.nav{display:none}.mobile-nav{display:block}.site-header .wrap{gap:18px}}
@media (max-width:760px){
  :root{--site-header-height:109px}
  .site-header .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;padding-block:10px;min-height:108px}
  .site-header .logo{grid-column:1;grid-row:1;margin:0;padding:0;min-width:0}
  .site-header .logo img{width:124px;max-width:100%}
  .site-header .header-actions{display:contents}
  .site-header .lang{grid-column:2;grid-row:1}
  .site-header .signin{grid-column:3;grid-row:1}
  .site-header .mobile-nav{grid-column:4;grid-row:1}
  .site-header .header-actions .btn{grid-column:1/-1;grid-row:2;width:100%;min-height:40px;padding:8px 12px;
    font-size:14px;white-space:normal;text-align:center}
}
@media (max-width:560px){
  .signin{font-size:14px}
  .lang{padding:7px 7px}
}

/* Section scaffolding */
.section{padding-block:clamp(64px,9vw,112px)}
.section.tint{background:var(--mist)}
.eyebrow{font:600 12px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.tint .eyebrow{color:var(--red-dark)}
.section h2{font-size:clamp(32px,4.2vw,52px);max-width:18ch}
.section-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 56px;align-items:end;margin-bottom:48px}
.section-head .lead{color:var(--slate);font-size:18px;max-width:46ch}
@media (max-width:820px){.section-head{grid-template-columns:1fr;margin-bottom:36px}}

/* Hero */
.hero{padding-block:clamp(56px,9vw,120px) clamp(48px,7vw,88px)}
.hero h1{font-size:clamp(40px,6.4vw,84px);letter-spacing:-.035em;line-height:1.02;max-width:15ch}
.hero .lead{font-size:clamp(18px,1.6vw,21px);color:var(--slate);max-width:52ch;margin-top:26px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero-note{margin-top:18px;font-size:15px;color:var(--muted)}
.hero-legacy{margin-top:40px;padding-top:20px;border-top:1px solid var(--border);font-size:15px;color:var(--muted)}
.hero-legacy a{color:var(--red);font-weight:600;text-decoration:none;white-space:nowrap}
.hero-legacy a:hover{text-decoration:underline}

/* Stats */
.stats{border-block:1px solid var(--border);background:var(--white)}
.stats dl{display:grid;grid-template-columns:repeat(4,1fr);margin:0}
.stats dl>div{padding:30px 24px;border-left:1px solid var(--border)}
.stats dl>div:first-child{border-left:0;padding-left:0}
.stats dd{margin:0;font:700 clamp(30px,3.4vw,44px)/1 var(--display);letter-spacing:-.03em}
.stats dt{margin-top:10px;color:var(--slate);font-size:15px}
@media (max-width:720px){.stats dl{grid-template-columns:1fr 1fr}.stats dl>div{padding:22px 16px}
  .stats dl>div:nth-child(odd){border-left:0;padding-left:0}.stats dl>div:nth-child(n+3){border-top:1px solid var(--border)}}

/* Seller's Nightmare — mirrors output/marketing/sellers-nightmare/index.html (poster, season heading, one large
   episode card with toolbar and "Episode NN" buttons, closing). Light page, white card, dark poster and closing. */
.sn{background:var(--mist);padding-block:clamp(40px,6vw,72px)}
.sn-poster{position:relative;isolation:isolate;overflow:hidden;border-radius:18px;background:var(--ink);min-height:570px;color:var(--white)}
.sn-poster-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center;z-index:-2}
.sn-poster::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(15,23,42,.97),rgba(15,23,42,.65) 38%,transparent 64%)}
.sn-poster-copy{padding:42px;max-width:56%}
.sn-credit{font-size:12px;letter-spacing:.11em;margin:0 0 38px}
.sn-meta{font:500 11px/1.3 var(--mono);letter-spacing:.12em;margin:0 0 14px}
.sn-meta span{padding:0 9px}
.sn-series{font:700 clamp(40px,5.7vw,76px)/.96 var(--display);letter-spacing:-.035em;color:var(--white);margin:0 0 25px}
.sn-tagline{font-size:19px;line-height:1.5;font-weight:500;margin:0 0 14px}
.sn-jale{font-size:14px;line-height:1.65;max-width:335px;color:var(--border);margin:0 0 25px}
.sn-start{display:inline-flex;gap:25px;align-items:center;background:var(--red);color:var(--white);border-radius:6px;text-decoration:none;padding:14px 19px;font-size:14px;font-weight:600}
.sn-start:hover{background:var(--red-dark)}
.sn-season{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin:54px 0 0}
.sn-season .eyebrow{margin-bottom:8px;color:var(--red-dark)}
.sn-season h2{font-size:31px;letter-spacing:-.025em}
.sn-season>p{font-size:14px;color:var(--slate);line-height:1.5;margin:0 0 4px}
.sn-carousel{scroll-margin-top:90px}
.sn-toolbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:20px 0 16px}
.sn-count{font:500 12px/1.3 var(--mono);color:var(--ink)}
.sn-arrows{display:flex;gap:8px}
.sn-arrows button{border:1px solid #C9CFD8;background:var(--white);color:var(--ink);border-radius:50%;width:42px;height:42px;font:400 20px/1 var(--sans);cursor:pointer}
.sn-arrows button:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.sn-arrows button:disabled{opacity:.4;cursor:default;background:var(--white);color:var(--ink);border-color:#C9CFD8}
.sn-track{list-style:none;margin:0;padding:0;display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:18px}
.sn-track::-webkit-scrollbar{display:none}
.sn-slide{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.sn-card{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);background:var(--white);border:1px solid var(--border);border-radius:18px;overflow:hidden;height:100%}
.sn-visual{position:relative;min-width:0;aspect-ratio:3/2;background:var(--ink)}
.sn-visual img{width:100%;height:100%;object-fit:cover}
.sn-visual::after{content:"";position:absolute;inset:32% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.83));pointer-events:none}
.sn-caption{position:absolute;z-index:1;bottom:27px;left:30px;right:28px}
.sn-caption p{font:500 12px/1.3 var(--mono);color:var(--white);letter-spacing:.05em;margin:0 0 9px}
.sn-caption h3{font:700 clamp(26px,2.6vw,38px)/1.09 var(--display);letter-spacing:-.8px;color:var(--white);max-width:540px;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.sn-copy{padding:32px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.sn-tag{font-size:11px;letter-spacing:.15em;color:var(--slate);text-transform:uppercase}
.sn-problem{font-size:18px;line-height:1.5;margin:15px 0 22px}
.sn-answer{border-top:1px solid var(--border);padding-top:21px}
.sn-answer strong{font-size:11px;letter-spacing:.12em;color:var(--red-dark);font-weight:600}
.sn-answer p{font-size:16px;line-height:1.6;margin:10px 0 19px}
.sn-cta{align-self:flex-start;color:var(--red-dark);text-decoration:none;border-bottom:1px solid rgba(184,28,25,.35);line-height:1.55;font-size:14px}
.sn-cta:hover{color:var(--red);border-bottom-color:var(--red)}
.sn-chips{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0 55px}
.sn-chip{display:inline-flex;align-items:center;min-height:44px;border:1px solid #C9CFD8;border-radius:8px;padding:11px 16px;background:transparent;color:var(--slate);font:500 12px/1 var(--mono);text-decoration:none}
.sn-chip:hover{border-color:var(--red)}
.sn-chip[aria-current="true"]{background:var(--red);color:var(--white);border-color:var(--red)}
.sn-closing{display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden;border-radius:18px;background:var(--ink);color:var(--white)}
.sn-closing-copy{padding:48px;align-self:center}
.sn-closing .eyebrow{color:var(--white)}
.sn-closing h2{font:700 clamp(35px,4vw,55px)/1.05 var(--display);letter-spacing:-.02em;margin:15px 0 20px;color:var(--white)}
.sn-closing p{font-size:16px;line-height:1.65;max-width:430px;color:var(--white)}
.sn-closing-logo{display:inline-block;margin:4px 0 0 -18px;padding:18px}
.sn-closing-logo img{width:184px}
.sn-closing>img{width:100%;height:400px;object-fit:cover;object-position:center 65%}
@media (max-width:800px){
  .sn-poster{min-height:0}
  .sn-poster-art{position:relative;height:340px;object-position:72% center;z-index:0}
  .sn-poster::after{display:none}
  .sn-poster-copy{padding:28px;max-width:none}
  .sn-credit{margin-bottom:20px}
  .sn-series{font-size:58px}
  .sn-tagline{font-size:18px}.sn-jale{max-width:500px}
  .sn-season{display:block}.sn-season>p{margin-top:12px}
  .sn-card{grid-template-columns:1fr}
  .sn-slide{flex-basis:92%}
  .sn-track{gap:12px}
  .sn-copy{padding:25px}
  .sn-caption{bottom:20px;left:23px;right:20px}
  .sn-caption h3{font-size:29px}
  .sn-chips{gap:7px;margin-bottom:38px}
  .sn-closing{grid-template-columns:1fr}.sn-closing-copy{padding:30px}.sn-closing>img{height:340px}
}
@media (max-width:480px){
  .sn-poster-art{height:255px;object-position:74% center}
  .sn-poster-copy{padding:25px}
  .sn-series{font-size:45px}
  .sn-season h2{font-size:27px}
  .sn-caption p{font-size:10px}.sn-caption h3{font-size:26px}
  .sn-count{font-size:10px}
  .sn-chip{padding:10px 12px}
  .sn-closing-copy{padding:26px}
}

/* End-of-page band */
.band{border-top:1px solid var(--border);padding-block:clamp(48px,7vw,80px)}
.band-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.band h2{font-size:clamp(32px,4vw,48px)}
.band p{color:var(--slate);margin-top:10px;font-size:18px}
.band-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hero-legacy-inline{font-size:15px;color:var(--muted)}
.hero-legacy-inline a{color:var(--red);font-weight:600;text-decoration:none}
.hero-legacy-inline a:hover{text-decoration:underline}

/* What we make */
.types{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.types li{background:var(--mist);border:1px solid var(--border);border-radius:var(--radius);padding:26px 22px;min-height:112px;display:flex;flex-direction:column;justify-content:flex-end}
.types .name{font:700 clamp(22px,2.2vw,28px)/1.1 var(--display);letter-spacing:-.02em}
.make-foot{display:grid;grid-template-columns:1.3fr 1fr;gap:24px 56px;margin-top:36px;color:var(--slate);font-size:18px}
.make-foot strong{color:var(--ink)}
@media (max-width:820px){.types{grid-template-columns:1fr 1fr}.make-foot{grid-template-columns:1fr}}

/* How it works */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s}
.steps li{padding:26px 22px 0 0;border-top:2px solid var(--border);position:relative}
.steps li:nth-child(-n+4){border-top-color:var(--ink)}  /* the steps the seller does */
.steps .n{font:700 28px/1 var(--display);color:var(--red);display:block;margin-bottom:14px}
.steps h3{font-size:20px;line-height:1.2;margin-bottom:10px}
.steps p{color:var(--slate);font-size:16px}
.steps .who{display:inline-block;margin-top:14px;font:600 13px/1.3 var(--sans);color:var(--muted)}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr;gap:28px 24px}}
@media (max-width:560px){.steps{grid-template-columns:1fr;gap:0}.steps li{padding:22px 0 24px}}

/* Services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:28px}
.service h3{font-size:24px;margin-bottom:12px}
.service p{color:var(--slate);font-size:16px}
@media (max-width:860px){.services{grid-template-columns:1fr}}

/* Showcase */
.products{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.product figure{margin:0;aspect-ratio:1;background:var(--mist)}
.product figure img{width:100%;height:100%;object-fit:cover}
.product-body{padding:16px 16px 18px}
.product h3{font-size:17px;line-height:1.3;font-family:var(--sans);font-weight:600;letter-spacing:0}
.price{margin-top:6px;font:600 15px/1.4 var(--sans);color:var(--slate);font-variant-numeric:tabular-nums}
.badge{display:inline-block;margin-top:10px;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--red-dark);background:#FDF3F3;border-radius:4px;padding:6px 7px}
.showcase-note{margin-top:22px;font-size:14px;color:var(--muted);max-width:80ch}
.showcase-more{margin-top:28px}
@media (max-width:980px){.products{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.products{grid-template-columns:1fr 1fr;gap:12px}}

/* Sample + pricing */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.sample-card{background:var(--ink);color:var(--white);border-radius:var(--radius);padding:clamp(28px,4vw,44px)}
.sample-card .eyebrow{color:var(--mist)}
.sample-card h2{font-size:clamp(30px,3.4vw,42px);color:var(--white)}
.sample-card p{margin-top:16px;color:var(--mist);font-size:18px}
.sample-card .btn{margin-top:28px}
.price-list{list-style:none;padding:0;margin:28px 0 0}
.price-list li{padding:16px 0 16px 30px;border-top:1px solid var(--border);position:relative;color:var(--slate)}
.price-list li:last-child{border-bottom:1px solid var(--border)}
.price-list li::before{content:"";position:absolute;left:4px;top:26px;width:10px;height:10px;border-radius:2px;background:var(--red)}
.price-list strong{color:var(--ink)}

/* About */
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,6vw,80px)}
.about-grid .body{font-size:clamp(19px,1.8vw,23px);line-height:1.5;margin-top:24px}
.about-grid .where{margin-top:18px;color:var(--slate)}
.promises{list-style:none;margin:0;padding:0;align-self:end}
.promises li{font:700 clamp(19px,1.8vw,23px)/1.3 var(--display);letter-spacing:-.01em;padding:18px 0;border-top:1px solid var(--border)}
.promises li:last-child{border-bottom:1px solid var(--border)}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}}

/* Footer */
.site-footer{background:var(--white);border-top:1px solid var(--border);padding-block:56px 36px;font-size:15px;color:var(--slate)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr;gap:36px}
.site-footer h3{font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.site-footer p+p{margin-top:10px}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--ink);text-decoration:underline}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li+li{margin-top:8px}
.footer-logo img{width:150px;margin-bottom:16px}
.footer-bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.footer-bottom .descriptor{font:600 11px/1.4 var(--sans);letter-spacing:.13em;text-transform:uppercase}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

/* Simple pages */
.page{padding-block:clamp(56px,8vw,96px);min-height:50vh}
.page h1{font-size:clamp(36px,5vw,60px);max-width:18ch}
.page .lead{margin-top:18px;color:var(--slate);font-size:19px;max-width:56ch}
.page .notice{margin-top:32px;padding:22px 24px;border:1px solid var(--border);border-left:4px solid var(--red);border-radius:8px;background:var(--mist);max-width:64ch}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.contact-grid > div{border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.contact-grid h2{font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.contact-grid a{color:var(--red);font-weight:600;text-decoration:none}
.contact-grid a:hover{text-decoration:underline}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* Utilities (no inline styles: CSP style-src 'self') */
.mt-xs{margin-top:8px}.mt-s{margin-top:12px}.mt-m{margin-top:22px}.mt-l{margin-top:40px}.pt-0{padding-top:0}
.muted{color:var(--slate)}.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* Hero order card — an illustration of one order's path, not a UI screen */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.order-card{margin:0;background:var(--white);border:1px solid var(--border);border-radius:18px;padding:26px 26px 22px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 40px -18px rgba(15,23,42,.18)}
.order-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.order-label{font:600 13px/1 var(--sans);color:var(--muted)}
.order-shop{font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border:1.5px dashed #C9CFD8;border-radius:6px;padding:7px 9px}
.order-item{margin-top:18px;font:700 22px/1.2 var(--display);letter-spacing:-.01em}
.order-steps{list-style:none;margin:20px 0 0;padding:0}
.order-steps li{position:relative;padding:11px 0 11px 34px;font-size:16px;color:var(--ink)}
.order-steps li::before{content:"";position:absolute;left:0;top:13px;width:20px;height:20px;border-radius:50%;background:var(--ink)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.order-steps li::after{content:"";position:absolute;left:9.25px;top:35px;bottom:-11px;width:1.5px;background:var(--border)}
.order-steps li:last-child::after{display:none}
.order-steps li:nth-child(4){font-weight:600}
.order-steps li:nth-child(4)::before{background-color:var(--red)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.order-card{max-width:520px}}
.signin,.site-header .btn,.lang{white-space:nowrap}
@media (max-width:420px){
  .site-header .wrap{gap:8px}.logo img{width:108px}.header-actions{gap:10px}
  .signin{font-size:13.5px}.site-header .btn{padding:8px 10px;font-size:13.5px}
}

/* Episode 08's one button: to the closing image */
.sn-deserve{align-self:flex-start;display:inline-flex;align-items:center;gap:14px;background:var(--red);color:var(--white);border-radius:6px;text-decoration:none;padding:14px 19px;font-size:15px;font-weight:600;margin-top:4px}
.sn-deserve:hover{background:var(--red-dark)}
.sn-answer p:last-child{margin-bottom:0}
#sn-closing{scroll-margin-top:90px}

/* The 3-minute game — right after the series */
.game{background:var(--mist);padding-block:0 clamp(48px,7vw,80px)}
.game-card{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0;background:var(--white);border:1px solid var(--border);border-radius:18px;overflow:hidden}
.game-copy{padding:clamp(28px,4vw,48px)}
.game .eyebrow{color:var(--red-dark)}
.game h2{font-size:clamp(30px,3.6vw,46px);max-width:16ch}
.game-body{margin-top:16px;font-size:18px;color:var(--slate);max-width:46ch}
.game-facts{list-style:none;padding:0;margin:26px 0 30px;display:flex;flex-wrap:wrap;gap:10px}
.game-facts li{display:flex;align-items:baseline;gap:8px;border:1px solid var(--border);border-radius:99px;padding:9px 14px;font-size:14px;color:var(--slate)}
.game-facts b{font:500 13px/1 var(--mono);color:var(--ink)}
.game-fine{margin-top:14px;font-size:13px;color:var(--muted)}
.game-timer{background:var(--ink);color:var(--white);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding:clamp(28px,4vw,48px)}
.game-timer-label{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.game-timer-clock{font:500 clamp(64px,9vw,120px)/1 var(--mono);letter-spacing:-.04em;color:var(--white)}
.game-timer-bar{display:block;width:100%;height:6px;border-radius:99px;background:#243049;overflow:hidden}
.game-timer-bar i{display:block;height:100%;width:100%;background:var(--red);border-radius:99px;transform-origin:left}
@media (prefers-reduced-motion:no-preference){.game-timer-bar i{animation:gameclock 180s linear infinite}}
@keyframes gameclock{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (max-width:820px){.game-card{grid-template-columns:1fr}.game-timer{order:-1;padding:24px 28px}.game-timer-clock{font-size:64px}}

/* Platform pages /etsy/ /shopify/ (D8) */
.how-note{margin-top:36px;color:var(--slate)}
.how-note a{color:var(--red-dark);font-weight:600;text-decoration:none;margin-left:4px;display:inline-flex;gap:6px}
.how-note a:hover{text-decoration:underline}
.rules{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rule{border:1px solid var(--border);border-top:4px solid #1F7A4D;border-radius:var(--radius);padding:24px}
.rule.no{border-top-color:var(--red);background:var(--mist)}
.rule h2{font-size:22px;margin:14px 0 10px}
.rule p{color:var(--slate)}
.rule-tag{display:inline-block;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;border-radius:4px;padding:6px 8px;color:#14633D;background:#EAF5EF}
.rule.yes .rule-tag::before{content:"✓ "}
.rule.no .rule-tag{color:var(--red-dark);background:#FDF3F3}
.rule.no .rule-tag::before{content:"✕ "}
@media (max-width:860px){.rules{grid-template-columns:1fr}}
.plat-sec{margin-top:clamp(52px,7vw,80px);max-width:780px}
.plat-sec h2{font-size:clamp(26px,3vw,34px);margin-bottom:18px}
.checklist{margin:0;padding:0;list-style:none;counter-reset:c}
.checklist li{counter-increment:c;position:relative;padding:15px 0 15px 50px;border-top:1px solid var(--divider)}
.checklist li::before{content:counter(c);position:absolute;left:4px;top:13px;font:700 18px/1.4 var(--display);color:var(--red-dark)}
.faq{margin:0}
.faq div{padding:16px 0;border-top:1px solid var(--divider)}
.faq dt{font-weight:600}
.faq dd{margin:6px 0 0;color:var(--slate)}
.source{margin-top:26px;font-size:15px;color:var(--muted)}
.source a{color:var(--red-dark)}
.plat-cta{margin-top:clamp(52px,7vw,80px);padding:clamp(28px,4vw,44px);border-radius:var(--radius);background:var(--ink);color:var(--white)}
.plat-cta h2{font-size:clamp(28px,3.4vw,40px)}
.plat-cta > p:not(.row){margin-top:10px;color:var(--mist)}
.page .plat-h1{max-width:20ch}
.plat-band{margin-top:clamp(64px,9vw,112px)}
.plat-band h2{font-size:clamp(30px,3.6vw,44px);max-width:22ch}
.plat-band .lead{margin-top:16px}
.rule h3{font-size:22px;margin:14px 0 10px}
.feats{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px}
.feats li{padding:22px 0 26px;border-top:1px solid var(--border)}
.feats h3{font-size:20px;margin:0 0 8px}
.feats p,.helps p{color:var(--slate)}
.helps{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.helps li{padding:20px 22px;border-radius:var(--radius);background:var(--mist)}
.helps h3{font-size:18px;margin-bottom:6px}
.plat-details{margin-top:clamp(40px,6vw,72px)}
.plat-details + .plat-sec{margin-top:8px}
@media (max-width:860px){.feats,.helps{grid-template-columns:1fr}}
/* Main menu: Platforms → Etsy / Shopify (opens on hover and keyboard focus; the label itself goes to /etsy/) */
.nav-drop{position:relative;display:inline-flex}
.nav-drop > a::after{content:"▾";font-size:.75em;margin-left:5px;opacity:.6}
.nav-drop .drop{display:none;position:absolute;top:100%;left:-14px;min-width:170px;padding:8px;margin-top:6px;background:var(--white);
  border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 30px rgba(15,23,42,.10);z-index:50}
.nav-drop .drop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.nav-drop:hover .drop,.nav-drop:focus-within .drop{display:flex;flex-direction:column}
.nav-drop .drop a{padding:9px 12px;border-radius:6px;white-space:nowrap}
.nav-drop .drop a:hover{background:var(--mist)}
/* JOD — JetShipper On Demand (homepage, after the hero) */
.jod h2{max-width:none}
.jod-verb{display:inline-block;height:1.12em;overflow:hidden;vertical-align:bottom;color:var(--red)}
.jod-roll{display:flex;flex-direction:column}
.jod-roll span{height:1.12em;line-height:1.12em;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.jod-roll{animation:jod-roll 15s cubic-bezier(.7,0,.3,1) infinite}}
@keyframes jod-roll{0.00%,11.14%{transform:translateY(-0.00em)}14.29%,25.43%{transform:translateY(-1.12em)}28.57%,39.71%{transform:translateY(-2.24em)}42.86%,54.00%{transform:translateY(-3.36em)}57.14%,68.29%{transform:translateY(-4.48em)}71.43%,82.57%{transform:translateY(-5.60em)}85.71%,96.86%{transform:translateY(-6.72em)}100%{transform:translateY(-7.84em)}}
.jod .lead{margin-top:20px;color:var(--slate);font-size:18px;max-width:58ch}
.jod-grid{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.jod-grid ol{display:contents;list-style:none}
.jod-grid li{border:1px solid var(--border);border-radius:var(--radius);padding:22px 22px 24px;background:var(--white)}
.jod-grid h3{font-size:19px;margin:0 0 8px}
.jod-grid li p{color:var(--slate);font-size:16px}
.jod-sum{border-radius:var(--radius);padding:22px 22px 24px;background:var(--ink);color:var(--white);display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.jod-sum p{font:700 24px/1.15 var(--display);letter-spacing:-.02em}
.jod-sum a{color:var(--white);font-weight:600;text-decoration:none;display:inline-flex;gap:6px}
.jod-sum a:hover{text-decoration:underline}
@media (max-width:980px){.jod-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.jod-grid{grid-template-columns:1fr}}
/* "How it works" → the two platform pages */
.how-plat{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:880px}
.how-card{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--white);text-decoration:none;transition:border-color .15s}
.how-card:hover{border-color:var(--ink)}
.how-card strong{font:700 19px/1.2 var(--display);color:var(--ink)}
.how-card span{color:var(--slate);font-size:16px}
@media (max-width:640px){.how-plat{grid-template-columns:1fr}}
/* Legal pages (D10) */
.legal-date{margin-top:14px;font-size:15px;color:var(--muted)}
.page .notice.draft{border-left-color:#B7791F;background:#FFF8E6}
.legal{max-width:760px;margin-top:36px}
.legal > p{margin-top:14px}
.legal h2{font-size:22px;margin:40px 0 12px}
.legal ul{margin:10px 0 0;padding-left:22px}
.legal li{margin-top:8px}
.legal a{color:var(--red-dark)}
.legal mark.todo{background:#FFF1B8;color:var(--ink);padding:1px 4px;border-radius:3px;font-size:.92em}
.legal-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px}
.legal-table th,.legal-table td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
.legal-table th{background:var(--mist);font-weight:600}
@media (max-width:640px){.legal-table{display:block;overflow-x:auto}}
/* What we make: jewelry first (strongest), then leather, wood, DTF printing (Erman 13 Oct) */
.types .sub{margin-top:8px;color:var(--slate);font-size:15px}
.types li:first-child{background:var(--ink);border-color:var(--ink)}
.types li:first-child .name{color:var(--white)}
.types li:first-child .sub{color:var(--mist)}
.make-foot{align-items:center}
.make-foot .sample-card{padding:28px}
.sample-card h3{font-size:clamp(24px,2.6vw,32px);color:var(--white)}
.price-list{margin-top:0}
.pricing-lead{margin-top:18px;color:var(--slate);font-size:18px;max-width:34ch}
.price-note{margin-top:14px;font-size:14px;color:var(--muted)}

/* Comparison guide (/print-on-demand-jewelry/) */
.cmp-sec{max-width:none}
.cmp-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
.cmp{width:100%;border-collapse:collapse;min-width:620px;font-size:16px}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:16px 18px;border-top:1px solid var(--divider)}
.cmp thead th{border-top:0;background:var(--mist);font-family:var(--display);font-size:17px}
.cmp thead th:last-child{background:var(--ink);color:var(--white)}
.cmp tbody th{font-weight:600;width:24%}
.cmp td{color:var(--slate)}
.cmp td:last-child{color:var(--ink);font-weight:500}
.cmp-two{display:grid;grid-template-columns:1fr 1fr;gap:24px 48px;max-width:none}
.cmp-two h2{font-size:clamp(22px,2.4vw,28px)}
@media (max-width:760px){.cmp-two{grid-template-columns:1fr}}
.cmp-list{margin:0;padding-left:20px;display:grid;gap:10px;color:var(--slate)}
.cmp-p{color:var(--slate);margin-bottom:14px;max-width:62ch}
@media (max-width:760px){
  .cmp-scroll{overflow:visible;border:0}
  .cmp{min-width:0;display:block}.cmp thead{display:none}.cmp tbody,.cmp tr{display:block}
  .cmp tr{border:1px solid var(--border);border-radius:12px;margin-bottom:12px;overflow:hidden}
  .cmp th,.cmp td{display:block;width:auto;border:0;padding:10px 16px}
  .cmp tbody th{background:var(--mist);width:auto}
  .cmp td::before{content:attr(data-label);display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:2px}
  .cmp td:last-child{border-top:1px solid var(--divider)}
}

/* Contact form (Erman 19 Oct) */
.cform-sec{margin-top:clamp(48px,6vw,72px);max-width:760px}
.cform-sec h2{font-size:clamp(26px,3vw,34px);margin-bottom:20px}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.cf-field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.cf-message,.cf-note,.cf-actions{grid-column:1/-1}
.cf-field input,.cf-field textarea{font:400 16px/1.4 var(--sans);color:var(--ink);padding:12px 14px;border:1.5px solid #C9CFD8;border-radius:8px;background:var(--white);width:100%}
.cf-field textarea{resize:vertical;min-height:140px}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(230,33,30,.25)}
.cf-field input:user-invalid,.cf-field textarea:user-invalid{border-color:var(--red)}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-note{font-size:14px;color:var(--muted)}
.cf-note a{color:var(--ink)}
.cf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.cf-actions .btn[disabled]{opacity:.6;cursor:wait}
.cform-status{font-size:15px}
.cform-status.ok{color:#155C3A}.cform-status.err{color:var(--red-dark)}
@media (max-width:620px){.cform{grid-template-columns:1fr}}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer-legal a{color:var(--slate)}

/* Seller-first flow (20 Oct): homepage FAQ, Etsy page sections */
.faq-wrap .faq{max-width:860px}
.faq-wrap h2{font-size:clamp(30px,3.6vw,44px);margin-bottom:20px}
.plat-wide{max-width:none}
.cmp.prob tbody th{width:28%}
.cmp.prob thead th:nth-child(2){background:var(--mist);color:var(--ink)}
.plat-steps{counter-reset:pst}
.plat-steps li{counter-increment:pst}
.plat-steps li h3::before{content:counter(pst) ". ";color:var(--red)}
@media (max-width:620px){.cmp.prob tbody th{width:auto}}