/* Carp Army Advertising marketing pages (redesigned 8 Oct 2026). Builds on /brand/studio.css: dark
   bands with lake photography, Barlow Condensed Black headings, photo tiles, price moments.
   Shared by the home page, Advert types, Pricing, How it works, Credits terms, Create, Presenter,
   Examples and the For-businesses pages. */
.top .brand{font-size:19px}
.top nav{gap:18px}
.top nav .btn.small{padding:9px 15px;font-size:14px}
main>section.wrap{padding-top:72px}
.section{padding:84px 0}
.section-heading,.sec-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:30px;flex-wrap:wrap}
.section-heading>p{color:var(--muted);max-width:280px;font-size:15px}
.section-heading>.text-link{font-weight:700;text-decoration:none;border-bottom:1px solid currentColor}
.section-lead{color:var(--muted);margin-bottom:16px}
.muted{color:var(--muted)}
.text-link{font-weight:700;text-decoration:none;border-bottom:1px solid currentColor}
/* Home hero: the demo video sits inside the advert-card frame */
.hero .hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:48px;align-items:center;padding-top:72px;padding-bottom:40px}
.hero.simple .hero-grid,.hero .hero-grid.simple{grid-template-columns:1fr}
.hero-copy h1{font-size:clamp(54px,7vw,100px);letter-spacing:-.02em;margin:14px 0 18px}
.hero-copy h1 em{font-style:normal;color:var(--orange)}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero-demo{position:relative;justify-self:end;width:min(100%,360px)}
.hero-demo .phone{position:relative;padding:0;background:#000;border:0;border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(239,237,228,.12);aspect-ratio:4/5}
.hero-demo .phone video{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;background:#242d22;border-radius:0}
.hero-demo .phone::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(10,16,8,.55) 100%);pointer-events:none}
.demo-caption{position:absolute;z-index:2;left:16px;top:16px;background:var(--orange);color:var(--orange-ink);padding:6px 10px;font-size:11px;font-weight:800;letter-spacing:.14em;border-radius:6px;pointer-events:none}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:100%;background:var(--orange-ink);margin-right:6px;animation:pulse 2.2s infinite}
.demo-note{margin:14px 0 0;color:var(--band-muted);display:grid;gap:3px;font-size:13px;text-align:right}
.demo-note strong{color:var(--band-text);font-family:var(--display);text-transform:uppercase;font-size:20px;letter-spacing:.02em}
.demo-note small{color:var(--band-muted);font-size:11.5px}
.hero .hero-bottom{display:flex;grid-template-columns:none;padding:18px 20px;position:relative;z-index:1;border-top:1px solid var(--band-line);padding:18px 20px;display:flex;justify-content:space-between;gap:12px;color:var(--band-muted);font-size:10px;letter-spacing:1.7px;font-weight:700}
/* Subpage intro as a dark band */
.page-intro.wrap{position:relative;max-width:none;background:var(--band);color:var(--band-text);padding:72px max(20px,calc((100% - 1240px)/2)) 56px;overflow:hidden}
.page-intro.wrap::before{content:"";position:absolute;inset:0;background:url('/library/hero-fisheries.jpg') center 40%/cover no-repeat;opacity:.26;filter:saturate(.8)}
.page-intro.wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,20,9,.96) 0%,rgba(12,20,9,.86) 45%,rgba(12,20,9,.4) 100%),linear-gradient(0deg,var(--band) 0,transparent 40%)}
.page-intro>*{position:relative;z-index:1}
.page-intro .eyebrow{color:var(--orange)}
.page-intro h1{font-size:clamp(50px,6.6vw,92px);letter-spacing:-.02em}
.page-intro h1 em{font-style:normal;color:var(--orange)}
.page-intro .lead{font-size:19px;max-width:60ch;margin:20px 0;color:var(--band-muted)}
.page-intro .lead a{color:var(--band-text)}
.page-intro .btn{margin-top:4px}
/* Advert types as photo tiles */
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.type-card{position:relative;display:flex;flex-direction:column;background:var(--band);color:var(--band-text);border:1.5px solid rgba(239,237,228,.08);border-radius:var(--radius);overflow:hidden;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s}
.type-card:hover,.type-card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--orange)}
.type-visual{position:relative;min-height:265px;overflow:hidden;background:var(--band2)}
.type-visual>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;opacity:.8;transition:transform .6s,opacity .3s}
.type-card:hover .type-visual>img{transform:scale(1.04);opacity:.95}
.type-visual.animated>img{animation:drift 9s ease-in-out infinite alternate}
.type-visual[data-chip]::before{content:attr(data-chip);position:absolute;top:16px;right:16px;z-index:3;background:var(--band-text);color:var(--ink);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:6px}
.type-visual.presenter[data-chip]::before{background:rgba(12,20,9,.55);color:var(--band-text);backdrop-filter:blur(6px)}
.sample-art{position:relative;height:100%;min-height:265px;z-index:1;background:linear-gradient(0deg,rgba(12,20,9,.92),rgba(12,20,9,.05) 70%);padding:22px;color:#fff;display:flex;flex-direction:column;justify-content:end;gap:10px}
.sample-art small,.visual-label,.tag{font-size:10px;letter-spacing:1.7px;font-weight:800;text-transform:uppercase}
.sample-art small{color:var(--orange)}
.sample-art strong{font-family:var(--display);font-size:44px;line-height:.9;text-transform:uppercase;font-weight:900;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.sample-art span{font-size:11px;letter-spacing:.8px;opacity:.9}
.motion-line{color:#ffe0b6}
.presenter img{filter:saturate(.88);object-position:center}
.play-icon{position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;width:62px;height:62px;border-radius:100%;display:grid;place-items:center;border:2px solid var(--orange);color:var(--orange);background:rgba(12,20,9,.35);backdrop-filter:blur(4px);padding-left:4px;font-size:20px}
.visual-label{position:absolute;z-index:2;bottom:14px;left:14px;color:#fff}
.type-body{padding:22px;display:grid;gap:10px;flex:1}
.type-body .tag{color:var(--orange);font-family:var(--display);font-size:13px;letter-spacing:.2em}
.type-body h3{font-size:32px;font-weight:900;color:var(--band-text)}
.type-body p{color:var(--band-muted);font-size:14px}
.card-bottom{display:flex;justify-content:space-between;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid var(--band-line);font-size:12.5px;font-weight:700;color:var(--band-muted)}
.card-bottom b{color:var(--orange)}
/* This is our water */
.sport-band{position:relative;background:var(--band);color:var(--band-text);padding:88px 0;overflow:hidden}
.sport-band::before{content:"";position:absolute;inset:0;background:url('/library/lake-dusk-willows.jpg') center/cover;opacity:.22;filter:saturate(.8)}
.sport-band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,20,9,.92),rgba(12,20,9,.55))}
.sport-band .wrap{position:relative;z-index:1}
.sport-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.sport-band .eyebrow{color:var(--orange)}
.sport-band h2{font-size:clamp(42px,5vw,76px)}
.sport-band h2 em{font-style:normal;color:var(--orange)}
.sport-band p{font-size:18px;color:var(--band-muted)}
.sector-links{display:grid;grid-template-columns:1fr 1fr;margin-top:25px}
.sector-links a{padding:13px 0;border-top:1px solid var(--band-line);text-decoration:none;font-weight:700;color:var(--band-text)}.sector-links a:hover{color:var(--orange)}
/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none;margin:0;padding:0}
.steps article,.steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.steps article>span{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:var(--orange);color:var(--orange-ink);font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:.1em}
.steps h3{font-size:26px;margin:16px 0 8px}
.steps p{font-size:14px;color:var(--muted)}
/* Pricing: action prices as big numbers, the credit strip as a dark band */
.pricing-section{background:#EBEBE0}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.price-grid>p{grid-column:1/-1;color:var(--muted)}
.price-card{position:relative;background:var(--band);color:var(--band-text);border:1.5px solid rgba(239,237,228,.08);border-radius:var(--radius);padding:22px;display:grid;gap:6px;overflow:hidden;min-height:200px;align-content:end}
.price-card::before{content:"";position:absolute;inset:0;background:url('/library/lake-mist-sunrise.jpg') center/cover;opacity:.18}
.price-card:nth-child(3n+2)::before{background-image:url('/library/lake-dawn-platform.jpg')}
.price-card:nth-child(3n)::before{background-image:url('/library/lake-dusk-willows.jpg')}
.price-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,20,9,.2),rgba(12,20,9,.95) 75%)}
.price-card>*{position:relative;z-index:1}
.price-card .tag{color:var(--orange);font-family:var(--display);font-size:13px;letter-spacing:.2em}
.price-card h3{font-size:24px;font-weight:800;color:var(--band-text)}
.price-card strong{font:900 52px/1 var(--display);color:var(--band-text)}
.price-card p{color:var(--band-muted);font-size:13px}
.credit-strip{position:relative;margin-top:22px;background:var(--band);color:var(--band-text);padding:28px 30px;border-radius:var(--radius);display:flex;gap:25px;justify-content:space-between;align-items:center;overflow:hidden}
.credit-strip::before{content:"";position:absolute;inset:0;background:url('/library/lake-dawn-rods.jpg') center/cover;opacity:.2}
.credit-strip::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,20,9,.95),rgba(12,20,9,.6))}
.credit-strip>*{position:relative;z-index:1}
.credit-strip .tag{color:var(--orange);font-family:var(--display);font-size:13px;letter-spacing:.2em}
.credit-strip p{color:var(--band-muted);max-width:610px}
.credit-strip h3{font-size:32px;font-weight:900;margin:7px 0;color:var(--band-text)}
.credit-strip .btn{white-space:nowrap}
.fine{font-size:13px;margin-top:14px;color:var(--muted)}
/* Examples */
.examples-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.examples-grid>p{grid-column:1/-1}
.example-card{background:var(--band);color:var(--band-text);border:1.5px solid rgba(239,237,228,.08);border-radius:var(--radius);overflow:hidden}
.example-card video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#263020}
.example-card-body{padding:16px;display:grid;gap:7px}
.example-card .tag{color:var(--orange);font-family:var(--display);font-size:12px;letter-spacing:.2em}
.example-card h3{font-size:24px;color:var(--band-text)}
.example-card p{font-size:13px;color:var(--band-muted)}
.example-card small{color:var(--band-muted);font-size:12px}
.example-filters{display:flex;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.example-filters label{font-size:12.5px;font-weight:700}
.example-filters select{display:block;margin-top:6px;padding:11px 14px;border:1.5px solid var(--line);background:var(--card);border-radius:var(--radius-s);font:inherit;font-size:14px;color:var(--ink)}
/* Guide tiles (How it works) and FAQ */
.tiles article{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.tiles article h3{font-size:28px;margin-bottom:8px}
.tiles article p{color:var(--muted);font-size:14px}
.faq{max-width:850px}
.faq h2{margin-bottom:16px}
.faq h2+h2,.faq p+h2,.faq ul+h2{margin-top:36px}
.faq p{color:var(--ink2);margin-bottom:12px;max-width:72ch;line-height:1.6}
.faq ul{margin:0 0 14px;padding-left:20px;color:var(--ink2);line-height:1.6}
details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);padding:14px 18px;margin-bottom:10px}
summary{cursor:pointer;font-weight:700}details p{color:var(--muted);margin-top:8px;max-width:70ch}
.member-note{background:#fff8ef;border:1px solid #F3C98F;border-radius:12px;padding:14px 16px;margin-bottom:18px}
.soon{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);padding:24px}
/* Closing band */
.end{text-align:center;padding-bottom:84px}
.end .eyebrow{color:var(--orange-deep)}
.end h2{font-size:clamp(40px,5vw,72px);margin-bottom:24px}
.end p{color:var(--muted);margin:10px 0 22px}
@media (max-width:980px){.hero .hero-grid,.sport-grid{grid-template-columns:1fr;gap:38px}.hero-demo{justify-self:start}.demo-note{text-align:left}.type-grid,.examples-grid{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}.price-grid{grid-template-columns:1fr}.section-heading{align-items:start;flex-direction:column}.tiles{grid-template-columns:1fr}}
@media (max-width:560px){.hero .hero-grid{padding-top:48px;padding-bottom:28px}.hero-copy h1{font-size:54px}.hero-demo{width:100%}.hero-bottom{display:block}.hero-bottom span{display:block;margin:5px 0}.type-grid,.examples-grid,.steps{grid-template-columns:1fr}.credit-strip{align-items:start;flex-direction:column;padding:22px}.page-intro.wrap{padding-top:52px;padding-bottom:44px}.section{padding:56px 0}.sample-art strong{font-size:38px}}