/* Editorial layer (2026-10-13, v3). Loaded after the page's own <style>; it
 * only restyles. Robbie's black and white stays the base. The finish follows
 * high-end editorial sites (A24, Freshman, Waka Waka, Metalab on Mobbin):
 * no shadows, no rounded cards, hairlines, small numbers, big type contrast.
 * Delete the <link> in index.html to return to the previous look.
 */
:root{
  --ink:#141414; --ink-2:#2b2b2b; --grey:#808080; --grey-2:#a8a8a8;
  --line:#e4e4e4; --paper:#f5f5f4; --white:#fff;
}
::selection{background:var(--ink); color:var(--white)}

/* section labels get a running number: "01 — Pricing" */
main{counter-reset:sec}
main .sec .eyebrow:first-child{counter-increment:sec}
main .sec .eyebrow:first-child::before{content:counter(sec, decimal-leading-zero) "  —  "; white-space:pre; color:var(--ink); font-weight:700}
.sec--ink .eyebrow:first-child::before, .page-sub main > .page-title:first-child .eyebrow::before{color:var(--white)}
.eyebrow{color:var(--grey)}
.sec h2{text-wrap:balance}

/* buttons: square like the original, with an arrow that moves on hover */
.btn{position:relative; transition:background .25s ease, color .25s ease, border-color .25s ease}
.btn::after{content:"→"; display:inline-block; margin-left:.8em; transition:transform .25s ease}
.btn:hover::after{transform:translateX(4px)}
.hdr .btn::after{display:none}

/* header: white glass once scrolled; thin underline on hover */
.hdr--solid, .page-sub .hdr, .hdr.open{background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(1.3) blur(14px); backdrop-filter:saturate(1.3) blur(14px)}
.hdr nav a:not(.btn){position:relative}
.hdr nav a:not(.btn)::after{content:""; position:absolute; left:0; right:0; bottom:-.45em; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease}
.hdr nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav-dd__menu a::after{display:none}

/* inner pages open on a black band like the home hero */
.page-sub main > .page-title:first-child{background:var(--ink); color:var(--white);
  padding-top:clamp(5rem,13vh,9rem); padding-bottom:clamp(4rem,10vh,7rem); margin-bottom:clamp(1rem,3vh,2rem)}
.page-sub main > .page-title:first-child h1{font-size:clamp(2.8rem,1.4rem + 6.4vw,7.5rem); letter-spacing:-.035em; line-height:.92; margin:1.2rem 0 2rem; text-wrap:balance}
.page-sub main > .page-title:first-child .eyebrow{color:rgba(255,255,255,.6)}
.page-sub main > .page-title:first-child .lede{color:rgba(255,255,255,.78)}
.page-sub main > .page-title:first-child .btn{background:var(--white); border-color:var(--white); color:var(--ink)}
.page-sub main > .page-title:first-child .btn:hover{background:transparent; color:var(--white)}
.page-sub main > .page-title:first-child .measure{max-width:62rem}

/* ── lists without photos become an index: number | name | details ── */
.cards:not(.cards--pics){display:block; counter-reset:row; margin-top:3rem; border-top:1px solid var(--ink)}
.cards:not(.cards--pics) > .card{counter-increment:row; position:relative; display:grid; grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1.2fr);
  column-gap:2.5rem; padding:1.9rem 0; border:0; border-bottom:1px solid var(--line); transition:padding .35s ease, background .35s ease}
.cards:not(.cards--pics) > .card::before{content:counter(row, decimal-leading-zero); grid-column:1; grid-row:1 / span 20;
  font-size:var(--step--1); font-weight:700; letter-spacing:.12em; color:var(--grey); padding-top:.3em}
.cards:not(.cards--pics) > .card > h3{grid-column:2; grid-row:1 / span 20; margin:0; font-size:var(--step-2); line-height:1.08; letter-spacing:-.015em}
.cards:not(.cards--pics) > .card > :not(h3){grid-column:3}
.cards:not(.cards--pics) > .card:hover{padding-left:.8rem}
.sec--ink .cards:not(.cards--pics){border-top-color:var(--white)}
.sec--ink .cards:not(.cards--pics) > .card{border-bottom-color:rgba(255,255,255,.16)}
@media (max-width:760px){
  .cards:not(.cards--pics) > .card{grid-template-columns:2rem minmax(0,1fr); row-gap:.7rem; column-gap:1rem}
  .cards:not(.cards--pics) > .card::before{grid-row:1}
  .cards:not(.cards--pics) > .card > h3{grid-row:1; font-size:var(--step-1)}
  .cards:not(.cards--pics) > .card > :not(h3){grid-column:2}
}
/* a price under the name, and a card whose first line is a price */
.card h3 .price{display:block; margin-top:.6rem; font-size:.62em; letter-spacing:.06em; color:var(--grey)}
.card p.price-p{font-size:var(--step-3); font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--ink)}
.cards:not(.cards--pics) > .card:has(> p.price-p){align-items:center}
/* the founders' offer: the one row printed in reverse */
.cards:not(.cards--pics) > .card.card--feature{background:var(--ink); color:var(--white); padding-inline:1.4rem; border-bottom-color:var(--ink)}
.card--feature::before{color:rgba(255,255,255,.55) !important}
.card--feature p{color:rgba(255,255,255,.8) !important}
.card--feature h3 .price{color:rgba(255,255,255,.7)}

/* photo lists (class tiles, team): square photos, caption under a hairline */
.cards--pics .card{border-top:0}
.cards--pics .card > picture{margin-bottom:1rem}
.cards--pics .card > h3{border-top:1px solid var(--ink); padding-top:1rem}
.cards--pics .card > picture img, .disc img, .gal img{transition:filter .85s ease, transform 1.1s cubic-bezier(.2,.7,.2,1)}
.cards--pics .card > picture, .disc picture, .gal figure{display:block; overflow:hidden}
.cards--pics .card:hover > picture img, .disc figure:hover img, .gal figure:hover img{transform:scale(1.035)}

/* steps: square numbers */
.step__n{border-radius:0}

/* questions: hairline rows, the open one gets a black rule */
.faq{border-top:1px solid var(--ink)}
.faq details[open]{border-bottom-color:var(--ink)}

/* footer sits flush under the marquee */
.ftr{border-top:0}

/* tagline marquee above the footer: solid and outlined words */
.marquee{background:var(--ink); color:var(--white); overflow:hidden; padding:clamp(1.6rem,4vw,3rem) 0; border-top:1px solid rgba(255,255,255,.08)}
.marquee__track{display:flex; width:max-content; will-change:transform}
.marquee__item{display:flex; align-items:center; gap:clamp(1.2rem,3vw,2.6rem); padding-right:clamp(1.2rem,3vw,2.6rem);
  font-weight:700; text-transform:uppercase; letter-spacing:-.02em; line-height:1; font-size:clamp(3rem,2rem + 6vw,8.5rem); white-space:nowrap}
.marquee__item .o{color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.85)}
.marquee__item .dot{width:.14em; height:.14em; background:var(--white); flex:none}

/* scroll reveals added by warm.js; nothing is hidden unless that script ran */
@media (prefers-reduced-motion:no-preference){
  .wr{opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
  .wr.wr-in{opacity:1; transform:none}
}