/* ============================================================
   Linkorae · Oversized DDP landing (ad page)
   One service. One job: capture a quote request.
   Tokens: portal/assets/brand.css
   ============================================================ */
@import url('../../portal/assets/brand.css?v=20260728brand');

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body.lp{
  font-family:var(--ff);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px));
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.lp-wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* ---- bar: brand + lang + one CTA. No site nav. ---- */
.lp-bar{
  position:sticky;top:0;z-index:40;
  background:rgba(248,250,252,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.lp-bar-in{
  display:flex;align-items:center;gap:12px;height:56px;
}
.lp-logo{
  display:flex;align-items:center;gap:8px;
  font-size:17px;font-weight:800;letter-spacing:-.02em;
}
.lp-logo img{width:28px;height:28px;border-radius:7px}
.lp-bar-sp{margin-left:auto}
.lp-lang{
  display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;
}
.lp-lang button{
  border:0;background:transparent;padding:6px 10px;
  font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;
}
.lp-lang button.on{background:var(--ink);color:#fff}
.lp-bar-cta{
  display:inline-flex;align-items:center;
  background:var(--brand);color:#fff;
  font-size:13px;font-weight:700;
  padding:8px 14px;border-radius:8px;
}
.lp-bar-cta:hover{background:var(--brand-d)}
@media (max-width:899px){
  .lp-bar{height:auto}
  .lp-bar-in{height:48px;gap:8px}
  .lp-logo{font-size:16px}
  .lp-bar-cta{display:none}
}
.lp-bar-wa{
  display:none;
  font-size:12px;font-weight:600;color:var(--ink-2);padding:8px 10px;
}
@media (min-width:720px){
  .lp-bar-wa{display:inline-flex}
}

/* ---- hero (navy desk — no cropped photo) ---- */
.lp-hero{
  position:relative;
  background:var(--ink);
  color:#fff;
  padding:36px 0 48px;
  overflow:hidden;
}
.lp-hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(12,111,106,.14), transparent 55%),
    radial-gradient(90% 70% at 88% 18%, rgba(27,58,82,.28), transparent 50%),
    linear-gradient(165deg, #0b1220 0%, #152536 45%, #1b3a52 100%);
}
.lp-hero-bg::after{
  content:'';
  position:absolute;inset:0;
  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:48px 48px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.5), transparent 88%);
  opacity:.5;
}
.lp-hero-in{
  position:relative;z-index:1;
  display:grid;gap:28px;
}
@media (min-width:900px){
  .lp-hero-in{grid-template-columns:1.15fr .85fr;align-items:start;gap:40px}
}
.lp-kicker{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:10px;
}
.lp-hero h1{
  font-size:clamp(26px, 4.2vw, 40px);
  font-weight:800;letter-spacing:-.03em;line-height:1.18;
  max-width:20em;
}
.lp-hero .lede{
  margin-top:14px;font-size:16.5px;line-height:1.5;
  color:rgba(255,255,255,.82);max-width:38em;
}
.lp-chips{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;
}
.lp-chips span{
  font-size:12px;font-weight:600;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.12);
}
.lp-chips span.hi{
  background:rgba(232,93,4,.28);
  border-color:rgba(255,255,255,.22);
  color:#fff;
}
.lp-hero-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.lp-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 20px;border-radius:10px;
  font-size:15px;font-weight:700;border:0;cursor:pointer;
}
.lp-btn-brand{background:var(--brand);color:#fff}
.lp-btn-brand:hover{background:var(--brand-d)}
.lp-btn-ghost{
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.35);
}
.lp-btn-ghost:hover{background:rgba(255,255,255,.08)}
.lp-btn-line{
  background:#fff;color:var(--ink);
  border:1px solid var(--line);
}
.lp-btn-line:hover{background:var(--bg)}
.lp-trust{
  margin-top:16px;font-size:13px;color:rgba(255,255,255,.55);
}
.lp-hero-visual{
  margin:0;
  border-radius:14px;
  overflow:hidden;
  background:#0b1220;
}
.lp-hero-visual .frame{position:relative}
.lp-hero-visual .frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.lp-hero-visual img{
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  object-position:center 42%;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}

/* Oversized ads only: photo-first on phones, copy | tall crate on desktop. */
.lp-hero--split{
  padding:0;
  background:#0b1220;
}
.lp-hero--split .lp-hero-bg{display:none}
.lp-hero-split{
  position:relative;z-index:1;
  display:grid;
  grid-template-areas:"visual" "copy";
}
.lp-hero--split .lp-hero-copy{grid-area:copy}
.lp-hero--split .lp-hero-visual{grid-area:visual}
.lp-hero--split .lp-hero-copy{
  padding:18px 18px 22px;
}
.lp-hero--split h1{
  font-size:clamp(24px, 7vw, 30px);
  max-width:16em;
}
.lp-hero--split .lede{
  margin-top:10px;
  font-size:15px;
  line-height:1.45;
  max-width:36em;
}
.lp-hero--split .lp-chips{margin-top:12px;gap:6px}
.lp-hero--split .lp-chips span{padding:5px 9px;font-size:11.5px}
.lp-hero--split .lp-hero-acts{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.lp-hero--split .lp-hero-acts .lp-btn-ghost{display:none}
.lp-hero--split .lp-hero-acts .lp-btn{width:100%}
.lp-hero--split .lp-trust{
  margin-top:12px;
  font-size:12px;
  line-height:1.45;
}
.lp-hero--split .lp-hero-visual{
  margin:0;
  border-radius:0;
}
.lp-hero--split .lp-hero-visual .frame::after{
  background:linear-gradient(180deg, transparent 62%, rgba(11,18,32,.42));
}
.lp-hero--split .lp-hero-visual img{
  width:100%;
  height:auto;
  max-height:44vh;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:center bottom;
  filter:contrast(1.02) saturate(1.02);
}
@media (min-width:900px){
  .lp-hero--split{min-height:580px}
  .lp-hero-split{
    grid-template-areas:"copy visual";
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    min-height:580px;
    align-items:stretch;
  }
  .lp-hero--split .lp-hero-copy{
    padding:56px 40px 56px clamp(24px, calc((100vw - 1120px) / 2 + 20px), 80px);
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .lp-hero--split h1{font-size:clamp(26px, 3.4vw, 40px)}
  .lp-hero--split .lede{margin-top:14px;font-size:16.5px;line-height:1.5}
  .lp-hero--split .lp-chips{margin-top:18px;gap:8px}
  .lp-hero--split .lp-chips span{padding:6px 10px;font-size:12px}
  .lp-hero--split .lp-hero-acts{
    display:flex;
    flex-wrap:wrap;
    grid-template-columns:none;
    margin-top:22px;
  }
  .lp-hero--split .lp-hero-acts .lp-btn-ghost{display:inline-flex}
  .lp-hero--split .lp-hero-acts .lp-btn{width:auto}
  .lp-hero--split .lp-trust{margin-top:16px;font-size:13px}
  .lp-hero--split .lp-hero-visual{
    position:relative;
    margin:0;
    border-radius:0;
    min-height:100%;
  }
  .lp-hero--split .lp-hero-visual .frame{
    position:absolute;
    inset:0;
  }
  .lp-hero--split .lp-hero-visual .frame::after{
    background:linear-gradient(90deg, rgba(11,18,32,.38), transparent 34%);
  }
  .lp-hero--split .lp-hero-visual img{
    width:100%;
    height:100%;
    max-height:none;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center bottom;
    transform:none;
    filter:saturate(1.03) contrast(1.02);
  }
}

/* ---- form card ---- */
.lp-card{
  background:#fff;color:var(--ink);
  border-radius:14px;
  padding:22px 22px 18px;
  border:1px solid var(--line);
}
.lp-quote .lp-card{
  position:static;
  max-width:560px;
  margin:0 auto;
  box-shadow:0 12px 32px rgba(15,23,42,.08);
}
.lp-card h2{
  font-size:18px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px;
}
.lp-card .hint{font-size:13px;color:var(--ink-2);margin-bottom:14px}
.lp-fld{margin-bottom:10px}
.lp-fld label{
  display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:4px;
}
.lp-fld .req{color:var(--brand)}
.lp-fld input,.lp-fld select,.lp-fld textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;
  padding:11px 12px;background:var(--bg);color:var(--ink);
  font-size:16px; /* iOS: no zoom */
}
.lp-fld textarea{min-height:88px;resize:vertical;line-height:1.4}
.lp-fld input:focus,.lp-fld select:focus,.lp-fld textarea:focus{
  outline:2px solid var(--ring-brand);border-color:var(--brand);
  background:#fff;
}
.lp-hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.lp-err{display:none;font-size:12px;color:var(--danger);margin:-4px 0 8px;line-height:1.45}
.lp-err.on{display:block}
.lp-err a{color:var(--danger);font-weight:700;text-decoration:underline}
.lp-submit{width:100%;margin-top:4px}
.lp-submit:disabled{opacity:.65;cursor:wait}
.lp-fine{
  margin-top:10px;font-size:12px;color:var(--muted);text-align:center;line-height:1.4;
}
.lp-ok{display:none;padding:8px 0 4px}
.lp-ok.on{display:block}
.lp-ok p{font-size:14px;margin-bottom:10px}
.lp-ok .lp-btn{width:100%;margin-bottom:8px}
.lp-form.done .lp-fields{display:none}
.lp-form.done .lp-submit{display:none}

/* ---- sections ---- */
.lp-sec{padding:56px 0}
.lp-sec h2{
  font-size:clamp(22px, 3vw, 28px);
  font-weight:800;letter-spacing:-.03em;line-height:1.2;
  margin-bottom:10px;
}
.lp-sec .sub{font-size:16px;color:var(--ink-2);max-width:40em;margin-bottom:28px}
.lp-pain{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lp-pain-q{
  font-size:clamp(20px, 2.6vw, 26px);
  font-weight:750;letter-spacing:-.02em;line-height:1.3;
  max-width:22em;
}
.lp-pain p.body{margin-top:14px;max-width:42em;color:var(--ink-2)}

.lp-grades{
  display:grid;gap:12px;
}
@media (min-width:720px){
  .lp-grades{grid-template-columns:repeat(3,1fr)}
}
.lp-grade{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 18px 16px;
}
.lp-grade h3{font-size:15px;font-weight:750;margin-bottom:6px}
.lp-grade p{font-size:13.5px;color:var(--ink-2)}
.lp-grade .who{
  display:inline-block;
  font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:3px 8px;border-radius:999px;margin-bottom:8px;
  background:rgba(232,93,4,.12);color:var(--brand-ink);
}
.lp-grade.other{
  background:#f4f6f8;
  border-color:#d7dee6;
}
.lp-grade.other .who{
  background:#e4eaef;
  color:#5b6b7a;
}
.lp-grade-cta{
  display:inline-flex;align-items:center;
  margin-top:12px;
  font-size:13.5px;font-weight:700;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;
}
.lp-grade-cta:hover{color:var(--brand-d)}
.lp-note{
  margin-top:16px;font-size:13.5px;color:var(--ink-2);
  background:var(--brand-soft);border-radius:10px;padding:12px 14px;
}

.lp-split{
  display:grid;gap:14px;
}
@media (min-width:720px){
  .lp-split{grid-template-columns:1fr 1fr}
}
.lp-box{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;
}
.lp-box h3{font-size:15px;font-weight:750;margin-bottom:12px}
.lp-box ul{list-style:none}
.lp-box li{
  font-size:14px;padding:7px 0 7px 18px;position:relative;color:var(--ink-2);
  border-bottom:1px solid var(--line-2);
}
.lp-box li:last-child{border-bottom:0}
.lp-box.in li::before{content:'';position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:50%;background:var(--ok)}
.lp-box.out li::before{content:'';position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:50%;background:var(--muted)}

.lp-steps{list-style:none;display:grid;gap:0}
@media (min-width:800px){
  .lp-steps{grid-template-columns:repeat(5,1fr);gap:12px}
}
.lp-steps li{
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
@media (min-width:800px){
  .lp-steps li{border-bottom:0;padding:0}
}
.lp-steps .n{
  display:block;font-size:12px;font-weight:800;letter-spacing:.08em;
  color:var(--brand);margin-bottom:8px;
}
.lp-steps h3{font-size:15px;font-weight:750;margin-bottom:6px}
.lp-steps p{font-size:13.5px;color:var(--ink-2)}

.lp-eta{
  display:grid;gap:12px;
}
@media (min-width:720px){
  .lp-eta{grid-template-columns:repeat(3,1fr)}
}
.lp-eta article{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;
}
.lp-eta b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;margin:4px 0 6px}
.lp-eta span{font-size:13px;color:var(--ink-2)}
.lp-eta .k{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

.lp-shots{
  display:grid;gap:16px;margin-top:32px;
}
@media (min-width:720px){
  .lp-shots{grid-template-columns:1fr 1fr;align-items:stretch}
}
.lp-shot{
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  display:flex;flex-direction:column;
  min-width:0;
}
.lp-shot .frame{
  position:relative;
  background:var(--sel);
  -webkit-user-select:none;
  user-select:none;
  flex:0 0 auto;
}
.lp-shot .frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
.lp-shot img{
  width:100%;
  height:auto;
  display:block;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}
.lp-shot img.cover{
  aspect-ratio:16 / 10;
  object-fit:cover;
  object-position:50% 38%;
}
.lp-shot img.cover.top{
  object-position:50% 22%;
}
.lp-shot img.sq{
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center;
}
.lp-shot img.fit{
  aspect-ratio:16 / 9;
  object-fit:contain;
  object-position:center;
  background:#e8eef3;
}
.lp-shot img.portrait{
  aspect-ratio:3 / 4;
  object-fit:cover;
  object-position:50% 28%;
}
.lp-shot img.doc{
  width:100%;
  height:auto;
  object-fit:contain;
  background:#fff;
}
.lp-shot.span2{
  grid-column:1 / -1;
}
.lp-diagram{
  margin-top:28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
}
.lp-diagram .frame{
  position:relative;
  padding:18px 20px 6px;
  background:#fff;
  -webkit-user-select:none;
  user-select:none;
}
.lp-diagram .frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}
.lp-diagram img{
  width:100%;
  max-width:920px;
  height:auto;
  display:block;
  margin:0 auto;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}
.lp-diagram.wide .frame{
  padding:0;
  background:#0b1c33;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.lp-diagram.wide img{
  max-width:none;
  width:100%;
  min-width:980px;
  height:auto;
  display:block;
}
.lp-diagram figcaption{
  font-size:12.5px;color:var(--ink-2);line-height:1.45;
  padding:8px 16px 14px;
  text-align:center;
}
.lp-shot figcaption{
  font-size:13.5px;
  color:var(--ink-2);
  line-height:1.5;
  padding:12px 16px 14px;
  border-top:1px solid var(--line-2);
  min-height:4.6em;
  flex:1 1 auto;
}
.lp-shot figcaption .k{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}

.lp-faq details{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:0;margin-bottom:8px;
}
.lp-faq summary{
  cursor:pointer;font-weight:700;font-size:15px;
  padding:14px 16px;list-style:none;
}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq details p{
  padding:0 16px 14px;font-size:14px;color:var(--ink-2);
}

.lp-band{background:var(--ink);color:#fff;padding:40px 0}
.lp-band h2{color:#fff;margin-bottom:8px}
.lp-band p{color:rgba(255,255,255,.75);margin-bottom:16px}
.lp-foot{
  background:var(--ink);color:rgba(255,255,255,.55);
  padding:28px 0 36px;font-size:13px;
  border-top:1px solid rgba(255,255,255,.08);
}
.lp-foot-in{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:baseline}
.lp-foot b{color:#fff}
.lp-foot a:hover{color:#fff}

/* ---- mobile dock ---- */
.lp-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;gap:8px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--line);
}
.lp-dock a,.lp-dock .lp-btn{
  flex:1;
  min-width:0;
  min-height:46px;
  font-size:14px;
  padding:0 12px;
}
@media (min-width:900px){
  .lp-dock{display:none}
  body.lp{padding-bottom:0}
}

/* ---- WhatsApp floating button ---- */
.lp-wa-fab{
  display:none;
  position:fixed;
  right:18px;
  bottom:calc(80px + env(safe-area-inset-bottom));
  z-index:60;
  width:56px;height:56px;
  border-radius:50%;
  background:#25D366;color:#fff;
  align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(18,140,70,.38);
}
.lp-wa-fab svg{width:30px;height:30px;display:block}
.lp-wa-fab:hover{background:#1ebe57}
.lp-wa-fab:focus-visible{outline:3px solid #25D366;outline-offset:3px}
.lp-wa-fab::after{
  content:'';
  position:absolute;inset:0;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.45);
  animation:lp-wa-pulse 2.2s ease-out infinite;
  pointer-events:none;
}
@keyframes lp-wa-pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}
  70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
.lp-wa-fab-tip{
  position:absolute;right:64px;
  background:var(--ink);color:#fff;
  font-size:13px;font-weight:600;
  padding:8px 12px;border-radius:8px;
  white-space:nowrap;
  opacity:0;pointer-events:none;
  transform:translateX(6px);
  transition:opacity .15s, transform .15s;
}
.lp-wa-fab-tip::after{
  content:'';
  position:absolute;right:-5px;top:50%;margin-top:-5px;
  border:5px solid transparent;border-left-color:var(--ink);
}
@media (min-width:900px){
  .lp-wa-fab{display:flex;bottom:24px;right:24px}
  .lp-wa-fab:hover .lp-wa-fab-tip{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .lp-wa-fab::after{animation:none}
}

/* ---- specialty cargo: accepted / refused grid ---- */
.lp-cats{
  display:grid;gap:12px;
}
@media (min-width:720px){
  .lp-cats{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1040px){
  .lp-cats{grid-template-columns:repeat(3,1fr)}
}
.lp-cat{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 18px 16px;
  display:flex;flex-direction:column;min-width:0;
}
.lp-cat h3{font-size:15px;font-weight:750;margin-bottom:6px}
.lp-cat p{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.lp-cat .who{font-size:12px;font-weight:700;color:var(--brand-ink);margin-bottom:8px}
.lp-cat .no{
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2);
  font-size:13px;color:var(--danger);line-height:1.45;
}
.lp-cat .warn{
  margin-top:8px;font-size:12.5px;color:var(--warn);line-height:1.4;
}
.lp-ban{
  margin-top:16px;
  background:var(--danger-soft);
  border:1px solid #f3c7c2;
  border-radius:12px;
  padding:16px 18px;
}
.lp-ban h3{font-size:15px;font-weight:750;margin-bottom:8px;color:var(--danger)}
.lp-ban p{font-size:13.5px;color:var(--ink);line-height:1.5}
.lp-rules{
  list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:6px 20px;
}
.lp-rules li{
  font-size:14.5px;color:var(--ink-2);line-height:1.5;
  padding:14px 0 14px 18px;position:relative;
  border-bottom:1px solid var(--line-2);
}
.lp-rules li:last-child{border-bottom:0}
.lp-rules li::before{
  content:'';position:absolute;left:0;top:20px;
  width:8px;height:8px;border-radius:50%;background:var(--brand);
}
@media (min-width:720px){
  .lp-grades.four{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1040px){
  .lp-grades.four{grid-template-columns:repeat(4,1fr)}
}