/* ============================================================
   LANE PAGE SYSTEM. Shared by /portfolio/brand-ugc and
   /portfolio/travel-ugc. Same Edition III tokens as the hub and
   brockpivec.com, so all four surfaces read as one designer.

   Structure follows the canonical productized-service order found
   across 30 surveyed landing pages: hero with price, trust wall,
   proof, how it works, the work, deliverables, pricing, FAQ, close.
   Target 8 to 11 screens. Portfolios sprawl; lane pages do not.
   ============================================================ */
:root{
  --paper:#F2EBD8; --paper2:#E9DFC7; --raised:#FBF7ED; --sunk:#E4D9BE;
  --ink:#191512; --ink-soft:#4A443C; --ink-faint:#6E675B;
  --rule:#D8D1C0;
  --seal:#B5321F;          /* THE one accent. Wayfinding, never mood. */
  --ledger:#1E6B45;        /* status only */
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --serif:'Instrument Serif',Georgia,serif;
  --body:'Source Serif 4',Georgia,serif;
  --stamp:4px 4px 0 rgba(25,21,18,.16);
  --stamp-press:2px 2px 0 rgba(25,21,18,.20);
  --lift:0 2px 4px rgba(25,21,18,.09), 0 18px 40px rgba(25,21,18,.15);
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;
  line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.5;
  mix-blend-mode:multiply;will-change:transform;transform:translateZ(0);contain:strict;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .49 0 0 0 0 .36 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img,video{display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 34px}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
em{font-style:italic;color:var(--seal)}
::selection{background:var(--seal);color:#fff}
a:focus-visible,button:focus-visible,summary:focus-visible,.clip:focus-visible{
  outline:2px solid var(--seal);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);
  font-weight:700;font-size:14px;padding:12px 18px}
.skip:focus{left:0}
section[id],div[id]{scroll-margin-top:96px}

/* ---- FILE BAR ---- */
.filebar{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:2px solid var(--ink)}
.fb{max-width:var(--maxw);margin:0 auto;padding:13px 34px;display:flex;align-items:center;
  justify-content:space-between;gap:20px}
.subj{font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap}
.subj b{color:var(--ink);font-weight:600}
.subj .lane{color:var(--seal);font-weight:600}
.fnav{display:flex;gap:20px;align-items:center}
.fnav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);transition:color .18s;white-space:nowrap}
.fnav a:hover{color:var(--seal)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:13px 20px;
  border:2px solid var(--ink);background:var(--ink);color:var(--paper);box-shadow:var(--stamp);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease);cursor:pointer}
.btn:hover{transform:translate(2px,2px);box-shadow:var(--stamp-press)}
.btn.out{background:transparent;color:var(--ink)}
.btn.seal{background:var(--seal);border-color:var(--seal);color:#fff}
.btn.sm{padding:10px 15px;font-size:11px}
@media(max-width:1080px){.fnav a{display:none}}

/* ---- HERO. Price lives here: the top steal from 30 landing pages. ---- */
.hero{padding:56px 0 60px}
.stampline{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:22px}
.stampline .g{color:var(--ledger);font-weight:600}
h1{font-size:clamp(42px,5.9vw,80px);line-height:.96}
.lede{font-size:19px;line-height:1.56;color:var(--ink-soft);max-width:52ch;margin-top:22px}
.lede b{color:var(--ink);font-weight:600}
.hcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;align-items:center}
/* price + risk reversal, side by side, exactly as the 7 price-showing pages do */
.pricebar{display:flex;flex-wrap:wrap;gap:26px;align-items:baseline;margin-top:24px;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding:16px 0}
.pricebar .p{font-family:var(--serif);font-size:34px;line-height:1}
.pricebar .p small{font-family:var(--mono);font-size:12px;letter-spacing:.07em;color:var(--ink-faint)}
.pricebar .risk{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--ink-faint);
  line-height:1.6;max-width:44ch}
.pricebar .risk b{color:var(--ledger);font-weight:600}

/* ---- TRUST WALL. Proof before pitch. ---- */
.trust{background:var(--paper2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:26px 0}
.trust .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);text-align:center;margin-bottom:16px}
.tnames{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px}
.tnames span{font-family:var(--mono);font-size:14px;color:var(--ink-faint)}
.tnames span.on{color:var(--ink);font-weight:600;border-bottom:2px solid var(--seal);padding-bottom:2px}

/* ---- SECTIONS ---- */
section{padding:72px 0;border-top:1px solid var(--rule)}
.sec-no{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--seal);font-weight:600;margin-bottom:14px}
h2{font-size:clamp(30px,3.9vw,50px);line-height:1.05;max-width:20ch;text-wrap:balance}
.sub{color:var(--ink-soft);max-width:62ch;margin-top:14px;font-size:17.5px}

/* ---- PHONE FRAME. Pure CSS bezel, no image assets.
   Ranked first for proving craft fast across 22 vertical-video sites. ---- */
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px}
.phone{position:relative;background:var(--ink);padding:10px;border-radius:26px;
  box-shadow:var(--lift);cursor:pointer;border:0;width:100%;
  transition:transform .2s var(--ease)}
.phone:hover{transform:translateY(-4px)}
.phone::before{content:"";position:absolute;top:17px;left:50%;transform:translateX(-50%);
  width:52px;height:5px;background:rgba(255,255,255,.22);border-radius:3px;z-index:3}
.phone .screen{position:relative;overflow:hidden;border-radius:18px;background:#15120f}
.phone video{width:100%;aspect-ratio:9/19;object-fit:cover;display:block}
.phone .tag{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;background:rgba(242,235,216,.94);color:var(--ink);
  padding:4px 8px;z-index:2}
.phone .tag.ad{background:var(--seal);color:#fff;left:auto;right:12px;font-weight:600;white-space:nowrap}
.snd{position:absolute;bottom:12px;right:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(10,8,6,.66);color:#fff;border:1px solid rgba(255,255,255,.34);display:flex;
  align-items:center;justify-content:center;cursor:pointer;appearance:none;-webkit-appearance:none;
  padding:0;z-index:3}
.snd svg{width:14px;height:14px;display:block}
.pcap{display:block;padding:11px 10px 4px;text-align:center}
.pcap b{display:block;font-size:14px;font-weight:600;line-height:1.3;color:var(--paper)}
.pcap span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  color:rgba(242,235,216,.62);margin-top:4px}
@media(max-width:900px){.phones{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:560px){.phones{grid-template-columns:1fr;max-width:330px;margin-left:auto;margin-right:auto}}

/* ---- HOW IT WORKS: numbered hairline steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:36px;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);counter-reset:st}
.steps div{padding:24px 22px 26px;border-right:1px solid var(--rule)}
.steps div:last-child{border-right:none}
.steps div::before{counter-increment:st;content:"0" counter(st);display:block;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--seal);
  font-weight:600;margin-bottom:11px}
.steps b{display:block;font-size:17px;font-weight:600;margin-bottom:6px}
.steps p{font-size:14.5px;color:var(--ink-soft);line-height:1.5}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}.steps div:nth-child(2){border-right:none}}
@media(max-width:520px){.steps{grid-template-columns:1fr}.steps div{border-right:none;border-bottom:1px solid var(--rule)}}

/* ---- DELIVERABLES / VENDOR APPARATUS ---- */
.vend{display:grid;grid-template-columns:repeat(4,1fr);margin-top:36px;
  border:2px solid var(--ink);background:var(--raised)}
.vend div{padding:22px 20px 24px;border-right:1px solid var(--rule)}
.vend div:last-child{border-right:none}
.vend b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--seal);font-weight:600;margin-bottom:9px}
.vend p{font-size:15px;color:var(--ink-soft);line-height:1.5}
.vend p strong{color:var(--ink);font-weight:600}
@media(max-width:900px){.vend{grid-template-columns:1fr 1fr}.vend div:nth-child(2){border-right:none}}
@media(max-width:540px){.vend{grid-template-columns:1fr}.vend div{border-right:none;border-bottom:1px solid var(--rule)}}

/* ---- CASE ---- */
.case{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;margin-top:36px}
.case figure{background:var(--raised);padding:12px;box-shadow:var(--lift)}
.case img{width:100%;aspect-ratio:4/3;object-fit:cover}
.case figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-faint);
  padding-top:10px;text-align:center}
.clist{list-style:none}
.clist li{font-size:16px;color:var(--ink-soft);padding:12px 0 12px 24px;border-top:1px solid var(--rule);
  position:relative}
.clist li::before{content:"";position:absolute;left:0;top:21px;width:10px;height:6px;
  border-left:2px solid var(--seal);border-bottom:2px solid var(--seal);transform:rotate(-45deg)}
.clist li b{color:var(--ink);font-weight:600}
@media(max-width:900px){.case{grid-template-columns:1fr;gap:28px}}

/* ---- RATES ---- */
.rates{display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px;
  border:2px solid var(--ink);background:var(--raised)}
.plan{padding:26px 22px 28px;border-right:1px solid var(--rule);position:relative}
.plan:last-child{border-right:none}
.plan.pick{background:var(--sunk)}
.plan.pick::before{content:"MOST BRANDS START HERE";position:absolute;top:0;left:0;right:0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;background:var(--ink);color:var(--paper);
  padding:5px 0;text-align:center;font-weight:600}
.plan.pick .nm{margin-top:21px}
.nm{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint)}
.amt{font-family:var(--serif);font-size:46px;line-height:1;margin:9px 0 2px}
.amt small{font-family:var(--mono);font-size:12px;letter-spacing:.07em;color:var(--ink-faint)}
.plan ul{list-style:none;margin-top:15px}
.plan li{font-size:14.5px;color:var(--ink-soft);padding:8px 0 8px 19px;border-top:1px solid var(--rule);
  position:relative}
.plan li:first-child{border-top:none}
.plan li::before{content:"";position:absolute;left:0;top:16px;width:9px;height:5px;
  border-left:1.5px solid var(--ledger);border-bottom:1.5px solid var(--ledger);transform:rotate(-45deg)}
@media(max-width:860px){.rates{grid-template-columns:1fr}.plan{border-right:none;border-bottom:1px solid var(--rule)}.amt{font-size:38px}}
.addons{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.addon{border:1px solid var(--rule);background:var(--raised);padding:9px 14px;font-size:13.5px;color:var(--ink-soft)}
.addon b{color:var(--ink);font-weight:600}
.fine{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--ink-faint);
  margin-top:18px;line-height:1.6;max-width:74ch}

/* ---- FAQ ---- */
.faq{max-width:820px;margin-top:28px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;font-weight:600;font-size:16px;padding:18px 0;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"[ + ]";font-family:var(--mono);font-size:12px;letter-spacing:.07em;
  color:var(--seal);flex:none}
.faq details[open] summary:after{content:"[ \2212 ]"}
.faq details p{color:var(--ink-soft);font-size:15.5px;padding-bottom:18px;max-width:70ch}

/* ---- CROSS-LANE + CLOSE ---- */
.cross{background:var(--paper2);text-align:center}
.cross h2{margin:0 auto;max-width:26ch}
.cross .sub{margin-left:auto;margin-right:auto}
.cross .hcta{justify-content:center}
.close{background:var(--ink);color:var(--paper)}
.close h2{color:var(--paper)}
.close h2 em{color:#E4C77E}
.close .sub{color:rgba(242,235,216,.74)}
.close .sec-no{color:#E4C77E}
.close .btn{background:var(--paper);border-color:var(--paper);color:var(--ink);
  box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.close .btn.out{background:transparent;color:var(--paper)}
.close .fine{color:rgba(242,235,216,.62)}
footer{padding:30px 0 92px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--ink-faint);text-align:center}
footer b{color:var(--ink-soft)}
.fnav2{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.fnav2 a{border-bottom:1px solid var(--rule);padding-bottom:2px}
.fnav2 a:hover{color:var(--seal);border-color:var(--seal)}

.fab{display:none}
@media(max-width:760px){
  .wrap{padding:0 22px}
  section{padding:56px 0}
  .fb{padding:11px 22px}
  .subj{font-size:11px}
  .fab{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;justify-content:center;
    background:var(--seal);color:#fff;font-family:var(--mono);font-weight:600;font-size:13px;
    letter-spacing:.1em;text-transform:uppercase;
    padding:15px 16px calc(15px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 28px rgba(25,21,18,.22)}
  .filebar .btn{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .phone:hover{transform:none}
}