/* Tellingly homepage, built from Claude Design "Homepage v5" (rounds 5 to 14, 2026-11-03).
   Grounds: light grey, white, ink. Red is the light and the one main button. No warm tones. */
:root{
  --ink:#1F2430; --muted:#5C6377; --ground:#F1F2F4; --paper:#FFFFFF;
  --light:#B23A2E; --light-dark:#C8473A; --line:#D9DCE1; --ti:#8A8F96;
  --wrap:1200px; --bleed:1800px; --gut:clamp(24px,6vw,120px); /* --bleed caps every edge-to-edge section on wide monitors; the band's colour still runs the full width */
  --body:clamp(19px,1.35vw,21px);
}
*{box-sizing:border-box}
html.ready{scroll-behavior:smooth} /* smooth only after load: an animated initial jump to #begin was lost when the page kept laying out under it */
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,system-ui,-apple-system,sans-serif;font-size:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-0.025em;line-height:1.05;text-wrap:balance}
h2{font-size:clamp(36px,4.6vw,66px)}
h3{font-size:clamp(26px,2.6vw,36px);letter-spacing:-0.015em;line-height:1.12}
p{margin:0}
.wrap{max-width:calc(var(--wrap) + 2*var(--gut));margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.bleed{max-width:var(--bleed);margin:0 auto}
.kicker{font-weight:800;font-size:19px;color:var(--muted);margin-bottom:12px}
.muted{color:var(--muted)}
.small{font-size:17px}
.cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:64px;padding:0 32px;border-radius:999px;font-weight:800;font-size:20px;text-decoration:none;border:2px solid transparent;transition:background .15s,transform .1s}
.btn:active{transform:scale(.98)}
.btn-red{background:var(--light);color:#fff}
.btn-red:hover{background:#9C3127}
.btn-plain{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-plain:hover{background:var(--ground)}
.btn-white{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn-white:hover{background:var(--ground)}

/* 01 hero */
.hero{background:var(--ground);text-align:center;padding:20px var(--gut) clamp(40px,6vh,72px);position:relative;overflow:hidden}
.hero-kicker{font-size:17px;color:var(--muted);margin-bottom:8px}
.faces{position:relative;height:clamp(240px,40vh,440px);width:min(100vw,1600px);left:50%;transform:translateX(-50%)} /* sized by the window's height, so the opening (faces, wordmark, headline, buttons) fits on one screen */
.faces .f{position:absolute;border-radius:50%;overflow:hidden;background:transparent;transform:translate(-50%,-50%);will-change:transform,opacity;transition:opacity .3s cubic-bezier(.33,1,.68,1)}
.faces .f img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:opacity .8s cubic-bezier(.65,0,.35,1)}
.faces .f img.out{opacity:0}
.hero-word{position:relative;display:inline-block;margin:-30px auto 22px}
.hero-word .wordmark{width:clamp(220px,34vw,420px);height:auto;margin:0 auto}
.light{position:absolute;border-radius:50%;background:var(--light);pointer-events:none;opacity:0}
h1{font-size:clamp(40px,min(5.6vw,8vh),80px);max-width:14ch;margin:0 auto 18px}
.lede{max-width:34ch;margin:0 auto 32px;font-size:clamp(20px,1.8vw,26px);line-height:1.35}
.hero .cta{justify-content:center}
.price-line{margin-top:18px;color:var(--muted);font-size:18px}

/* 02 vera */
.vera{background:#fff}
.vera-in{position:relative;max-width:var(--bleed);margin:0 auto;overflow:hidden} /* clips the question's shade at the photo's edge on wide monitors */
.vera picture img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:74% 50%}
.vera-q{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);max-width:min(44vw,620px);color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.vera-q::before{content:"";position:absolute;inset:-60px -80px -60px -200px;background:radial-gradient(ellipse at 35% 50%,rgba(20,24,32,.55),rgba(20,24,32,0) 70%);z-index:-1}
.q-label{font-weight:700;font-size:18px;margin-bottom:10px}
.q-text{font-size:clamp(28px,3.2vw,48px);font-weight:800;line-height:1.12;letter-spacing:-0.02em}
.vera-copy{padding-top:clamp(56px,7vw,112px);padding-bottom:clamp(64px,8vw,120px)}
.vera-copy h2{max-width:30ch;margin-bottom:24px}
.example{max-width:70ch;color:var(--muted);font-size:18px}
@media (max-width:700px){
  /* phones: a shorter face field (the circles scale with it) so the wordmark,
     headline, line and buttons all fit on the first screen under Safari's bars */
  .hero-kicker{font-size:15px}
  .faces{height:clamp(200px,28vh,280px)}
  .hero-word{margin:0 auto 16px}
  .hero-word .wordmark{width:min(220px,60vw)}
  .vera picture img{aspect-ratio:4/5}
  .vera-q{position:static;transform:none;max-width:none;background:var(--ink);padding:32px 24px 36px;text-shadow:none}
  .vera-q::before{display:none}
}
@media (min-width:701px) and (max-height:820px){
  /* short, wide screens (a tablet on its side, a small laptop): the opening
     still fits one screen */
  .hero{padding-top:12px}
  .faces{height:clamp(170px,26vh,260px)}
  .hero-word{margin:-16px auto 14px}
  .hero-word .wordmark{width:clamp(220px,28vw,360px)}
  h1{font-size:clamp(40px,min(5.6vw,7vh),64px);margin-bottom:14px}
  .lede{font-size:20px;margin-bottom:22px}
}
@media (max-width:400px){
  /* narrow phones (the S23 at 360 wide, under Chrome's bars): everything a
     little tighter so both buttons are whole on the first screen */
  .hero{padding-top:12px}
  .hero-kicker{margin:0 -12px 4px;font-size:min(15px,3.9vw);white-space:nowrap} /* one line, so it doesn't push the second button off the screen */
  .faces{height:clamp(150px,20vh,220px)}
  .hero-word{margin-bottom:10px}
  h1{margin-bottom:12px}
  .lede{font-size:18px;margin-bottom:20px}
  .hero .btn{min-height:56px;font-size:19px}
  .hero .cta{gap:10px}
}

/* 03 biographer */
.bio{background:var(--ground);padding:clamp(48px,6vw,88px) 0 clamp(64px,8vw,120px)}
.bio .big{max-width:980px;font-size:clamp(42px,6vw,90px);line-height:1.02;letter-spacing:-0.035em}
.beats{position:relative;max-width:calc(var(--wrap) + 2*var(--gut));margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:1fr;}
/* The stage is a full-height sticky layer laid over the beat column; the beats
   leave the phone's half of each row empty (alternating), so the phone never
   covers words. The stage ends with the last beat because it is the first
   grid child spanning the same rows. */
.beat .m-shot{display:none} /* the phone pictures show only under 700px; the turning phone shows above */
.phone-stage{grid-column:1;grid-row:1 / span 4;position:sticky;top:6vh;height:88vh;pointer-events:none;z-index:2;align-self:start}
.beat{grid-column:1;min-height:88vh;display:flex;flex-direction:column;justify-content:center;gap:16px;width:min(44%,520px);padding:0;transition:opacity .15s linear}
.beat:nth-of-type(1){grid-row:1}.beat:nth-of-type(2){grid-row:2}.beat:nth-of-type(3){grid-row:3}.beat:nth-of-type(4){grid-row:4}
/* the text of beats 1 and 3 sits left (the phone goes right); beats 2 and 4 the reverse */
.beat:nth-of-type(2),.beat:nth-of-type(4){justify-self:end}
.beat p{font-size:var(--body);color:var(--ink)}
.pull-label{font-weight:700;color:var(--muted);font-size:17px;margin-top:8px}
.pull{margin:0;font-family:Newsreader,Georgia,"Times New Roman",serif;font-size:clamp(22px,2vw,28px);line-height:1.35;font-weight:500}
.phone3d{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);perspective:1800px;width:min(300px,26vw,calc(74vh * 780 / 1696))}
.phone-box{position:relative;width:100%;aspect-ratio:780/1667;transform-style:preserve-3d}
.phone-box .face{position:absolute;backface-visibility:hidden;transform-origin:50% 50%}
.phone-box .front,.phone-box .back{inset:0;border-radius:15%/7%}
.phone-box .front .frame{position:absolute;inset:0;box-shadow:none}
.phone-box .front .frame img{width:calc(100% - 3.2cqw);height:calc(100% - 3.2cqw);object-fit:cover}
.phone-box .front{transform:translateZ(calc(var(--d)/2))}
.phone-box .back{transform:rotateY(180deg) translateZ(calc(var(--d)/2));background:linear-gradient(135deg,#9A9FA6,#8A8F96 45%,#7E838A)}
.phone-box .left,.phone-box .right{top:6.9%;height:86.2%;width:var(--d);left:50%;margin-left:calc(var(--d)/-2);background:linear-gradient(to bottom,#A3A8AF,#8A8F96 50%,#7D828A)}
.phone-box .left{transform:rotateY(-90deg) translateZ(calc(var(--w)/2))}
.phone-box .right{transform:rotateY(90deg) translateZ(calc(var(--w)/2))}
.phone-box .top,.phone-box .bottom{left:15%;width:70%;height:var(--d);top:50%;margin-top:calc(var(--d)/-2);background:#8A8F96}
/* the corners: thin rounded titanium layers stacked through the depth, so the
   edge reads as a solid rounded slab instead of square strips poking past
   the front's curve */
.phone-box .slab{position:absolute;inset:0;border-radius:15%/7%;background:#8A8F96;backface-visibility:visible}
.phone-box .top{transform:rotateX(90deg) translateZ(calc(var(--h)/2))}
.phone-box .bottom{transform:rotateX(-90deg) translateZ(calc(var(--h)/2))}
.phone-box .left i,.phone-box .right i{display:none}
.phone-box .left i:nth-child(1){top:18%;height:4.2%}
.phone-box .left i:nth-child(2){top:25.5%;height:6.8%}
.phone-box .left i:nth-child(3){top:33.5%;height:6.8%}
.phone-box .right i{top:28%;height:10%}
.frame{position:relative;box-sizing:border-box;container-type:inline-size;border-radius:15%/7%;line-height:0;
  background:linear-gradient(135deg,#D5D8DD 0%,#8A8F97 18%,#C4C8CD 42%,#767B83 66%,#B9BDC3 88%,#8A8F97 100%);
  box-shadow:0 36px 64px -20px rgba(31,36,48,.34),0 14px 26px -12px rgba(31,36,48,.2),inset 0 0 0 1px rgba(255,255,255,.4)}
.frame img{display:block;width:calc(100% - 3.2cqw);height:auto;aspect-ratio:auto 780/1695;margin:1.6cqw;border-radius:13.6%/6.3%} /* the ratio holds the space until the picture loads, so a link into the page lands where it should */
.frame::after{content:"";position:absolute;left:50%;top:1.3%;width:31%;aspect-ratio:125/37;transform:translateX(-50%);border-radius:999px;background:#000}
.frame::before{content:"";position:absolute;left:-1.3%;top:18%;height:4.2%;width:1.6%;background:linear-gradient(to right,#6F747C,#C9CDD2 55%,#7D828A);border-radius:3px 0 0 3px;
  box-shadow:0 calc(7.5cqw * 1.0) 0 0 #8F949B, 0 calc(15.5cqw * 1.0) 0 0 #8F949B}
.frame .btn-r{position:absolute;right:-1.3%;top:28%;height:10%;width:1.6%;background:linear-gradient(to right,#6F747C,#C9CDD2 55%,#7D828A);border-radius:0 3px 3px 0}
.numbers{position:relative;z-index:3;background:var(--ground);padding-top:clamp(48px,6vw,88px);display:flex;flex-direction:column;gap:20px}
.numbers h3{max-width:24ch;font-size:clamp(24px,2.2vw,32px);line-height:1.3}
.stats{display:flex;flex-wrap:wrap;gap:28px 56px;padding:22px 0;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.stats b{display:block;font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:-0.03em}
.stats span{font-weight:700;font-size:17px}
@media (max-width:700px){.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}.stats b{font-size:clamp(34px,11vw,48px)}.stats span{display:block;margin-top:6px;font-size:15px;line-height:1.25}} /* phones: the three numbers on one line, a long label wraps under its own number */
.road{margin:20px 0 0;font-family:Newsreader,Georgia,serif;font-size:clamp(26px,2.6vw,38px);line-height:1.3;max-width:30ch}
@media (max-width:700px){
  .beats{display:flex;flex-direction:column}
  .beat{width:auto!important;min-height:0!important;padding:28px 0 8px;justify-self:auto;opacity:1!important}
  .phone-stage{display:none}
  .beat .m-shot{width:min(260px,72vw);margin:0 auto 20px}
  .phone3d{position:relative;top:auto;left:auto;transform:none;margin:0 auto;width:min(260px,70vw)}
  .beats{display:flex;flex-direction:column}
  .beats .beat .m-shot{display:block}
}

/* bands */
.band-ink{background:#fff;color:var(--ink);padding:clamp(48px,6vw,88px) 0;border-top:1.5px solid var(--line)}
.band-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.band-ink h2{font-size:clamp(34px,4vw,60px);flex:1 1 420px;min-width:0;line-height:1.06}
.band-ink .btn{white-space:nowrap}
.band-in{gap:28px clamp(32px,4vw,64px)}
.band-photo{background:var(--ground)}
.band-photo .split{display:grid;grid-template-columns:1fr 1fr}
.band-photo picture img{width:100%;height:100%;object-fit:cover;min-height:420px}
.band-copy{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:clamp(40px,5vw,72px) var(--gut)}
.band-copy h2{font-size:clamp(36px,4.4vw,64px)}
.band-copy p{font-size:clamp(20px,1.6vw,24px)}
@media (max-width:900px){.band-photo .split{grid-template-columns:1fr}.band-photo picture img{min-height:0;aspect-ratio:4/3}}

/* 04 frank */
.frank{background:#fff}
.frank-band{background:var(--ink);color:#fff}
.frank-head{display:grid;grid-template-columns:1fr 1.2fr;max-width:var(--bleed);margin:0 auto}
.frank-head h2{padding:clamp(40px,5vw,80px) var(--gut);align-self:center;font-size:clamp(36px,4.4vw,64px)}
.frank-head picture img{width:100%;height:100%;object-fit:cover;min-height:360px}
.pair{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(24px,3vw,48px)}
.pair-copy{display:flex;flex-direction:column;gap:14px}
.pair-copy p{color:var(--ink)}
.shots{display:flex;gap:16px;justify-content:center;align-items:flex-start}
.shots .frame{flex:1;max-width:260px}
.shots.one .frame{max-width:300px}
.shots .frame:nth-child(2){margin-top:48px}
.pair-flip .shots{order:2}
@media (max-width:900px){.frank-head{grid-template-columns:1fr}.frank-head picture img{min-height:0;aspect-ratio:4/3}.pair{grid-template-columns:1fr}.pair-flip .shots{order:-1}} /* stacked: pictures always before their words, so two blocks of words never sit back to back */

/* 05 decides */
.decides{background:var(--ground)}
.decides .pair{padding-bottom:clamp(48px,6vw,96px)}

/* 06 phones */
.phones{position:relative;min-height:min(80vh,720px);overflow:hidden;display:flex;align-items:flex-end;max-width:var(--bleed);margin:0 auto}
.fader img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--x,50%) 50%;opacity:0;transition:opacity 1.2s ease}
/* --x / --xm per photo (index.html) keep BOTH people in the crop: the pair sits right of centre in most of them */
.fader img.on{opacity:1}
.phones::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,24,32,.72),rgba(20,24,32,.1) 55%)}
.phones-copy{position:relative;z-index:1;color:#fff;padding:clamp(40px,5vw,80px) var(--gut);max-width:min(640px,calc(30ch + var(--gut)));display:flex;flex-direction:column;gap:14px}
.phones-copy p{max-width:40ch;font-size:clamp(19px,1.5vw,22px)}
.phones-copy h2{font-size:clamp(36px,4.4vw,64px)}
@media (max-width:700px){
  /* phones: the photo on top in a fixed 4:5 frame, the words under it on ink.
     Nothing overlaps on any phone, and the crop is the same on all of them. */
  .phones{display:block;min-height:0;background:var(--ink)}
  .phones::after{display:none}
  .fader{position:relative;aspect-ratio:4/5;overflow:hidden}
  .fader img{object-position:var(--xm,var(--x,50%)) 50%}
  .phones-copy{max-width:none;padding-top:28px;padding-bottom:40px}
}

/* 07 compare */
.compare{background:#fff;padding:clamp(56px,7vw,112px) 0}
.compare h2{margin-bottom:36px}
.compare table{width:100%;border-collapse:collapse}
.compare th{text-align:left;font-size:19px;color:var(--muted);padding-bottom:18px;font-weight:800}
.compare th:last-child{color:var(--ink)}
.compare td{padding:22px 0;border-top:1.5px solid var(--line);vertical-align:top;font-size:var(--body)}
.compare td:first-child{color:var(--muted);width:40%;padding-right:28px}
.compare td:last-child{font-weight:800}
@media (max-width:700px){.compare td{display:block;width:auto;padding:12px 0}.compare td:first-child{width:auto;border-top:1.5px solid var(--line);padding-top:22px}.compare td:last-child{border-top:0;padding-bottom:22px}.compare thead{display:none}}

/* 08 promises */
.promises{background:var(--ink);color:#fff;padding:clamp(56px,7vw,112px) 0}
.light-k{color:#B9BEC8}
.promises h2{margin-bottom:40px;font-size:clamp(40px,5vw,76px)}
.promises h2 .line{display:inline-block}
.promises dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:32px 56px}
.promises dt{font-weight:800;font-size:clamp(22px,1.8vw,26px);margin-bottom:8px}
.promises dd{margin:0;color:#C9CDD4}
@media (max-width:800px){.promises dl{grid-template-columns:1fr}}

/* 09 give */
.give{background:#fff}
.give-in{display:grid;grid-template-columns:1.2fr 1fr}
.give picture img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;min-height:460px}
.give-copy{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:clamp(48px,6vw,96px) var(--gut)}
.give-copy h2{font-size:clamp(34px,4.2vw,62px)}
.price{font-weight:800;font-size:clamp(20px,1.6vw,24px)}
@media (max-width:900px){.give-in{grid-template-columns:1fr}.give picture img{min-height:0;aspect-ratio:4/3}}

/* 10 close */
.close{background:var(--ground);padding:clamp(56px,7vw,112px) 0 0}
.close h2{margin-bottom:32px}
.faq{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 40px}
.faq h3{font-size:22px;margin-bottom:8px}
.faq p{font-size:18px;color:var(--ink)}
@media (max-width:900px){.faq{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.faq{grid-template-columns:1fr}}
.note{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;margin:clamp(56px,7vw,96px) 0;padding:32px;background:#fff;border-radius:20px}
.note picture{flex:0 0 clamp(240px,28vw,400px);max-width:100%} /* a fixed-width photo, so the words sit beside it instead of wrapping under it */
.note picture img{width:100%;height:auto;border-radius:14px}
.note>div{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px}
.note h3{font-size:24px}
.note p{font-size:18px}
@media (max-width:820px){.note picture{flex-basis:100%;max-width:480px}} /* tablets and phones: the photo on top, full width, the words under it */
.sign{font-weight:800}
/* The family photo and the closing block, from the design file itself
   (Homepage v5): the whole photo at its own shape on computers, a 4:5 crop
   on phones, then the close on white. */
.close-photo{display:block;max-width:var(--bleed);margin:clamp(72px,9vw,140px) auto 0}
.close-photo img{width:100%;height:auto;aspect-ratio:1800/1004;object-fit:cover;object-position:40% 50%}
@media (max-width:700px){.close-photo img{aspect-ratio:4/5}}
.close-end{background:var(--paper);padding-bottom:clamp(48px,5vw,72px)}
.begin{text-align:center;display:flex;flex-direction:column;align-items:center;gap:clamp(20px,2.2vw,30px);padding:clamp(64px,8vw,120px) 0 0}
.begin h2{font-size:clamp(40px,5vw,76px);line-height:1.04;letter-spacing:-0.03em;margin:0}
.wordmark.small{width:clamp(200px,18vw,280px);height:auto}
.begin p{max-width:28em;font-size:clamp(19px,1.5vw,22px)}
.stores{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}
.store{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.2;background:var(--ink);color:#fff;text-decoration:none;padding:0 26px;border-radius:16px;min-height:68px;min-width:220px;box-sizing:border-box}
.store:hover{background:#33394A}
.store small{font-size:15px;font-weight:600}
.store b{font-size:22px;font-weight:800}
footer{max-width:var(--wrap);margin:clamp(64px,7vw,104px) auto 0;padding-top:28px;border-top:1.5px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;font-size:18px}
footer nav{display:flex;flex-wrap:wrap;gap:12px 28px;font-weight:700}
footer a{color:var(--ink);text-decoration:none}
/* phones and tablets: two even columns (what it is, then the legal pages) instead of rows that wrap unevenly */
@media (max-width:900px){footer{flex-direction:column}footer nav{display:grid;grid-template-columns:auto auto;grid-template-rows:repeat(4,auto);grid-auto-flow:column;justify-content:start;gap:4px 48px}footer nav a{padding:8px 0;white-space:nowrap}}
@media (max-width:420px){footer{font-size:16px}footer nav{column-gap:28px}}
footer p{color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .faces .f img{transition:none}
  .phone-box{transition:opacity .3s}
  .fader img{transition:none}
}