@font-face{font-family:Lufga;src:url("/assets/lufga-light.woff") format("woff");font-weight:300;font-display:swap} 
@font-face{font-family:Lufga;src:url("/assets/lufga-regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:Lufga;src:url("/assets/lufga-medium.woff") format("woff");font-weight:500;font-display:swap}
@font-face{font-family:Lufga;src:url("/assets/lufga-semibold.woff") format("woff");font-weight:600;font-display:swap}
@font-face{font-family:'Reenie Beanie';src:url("/assets/reenie-beanie-regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
/* Page shell — from the Figma frame: 1440 wide, 80px margins, 1280 content.
   --pad-x is monotonic at every viewport: it holds the 80px margin down from
   1440, floors at the 24px phone margin, and above 1440 centres the 1280
   content instead of letting the measure grow. No breakpoint needed. */
:root{
  --gutter: clamp(24px, 5.5556vw, 80px);
  --content: 1280px;
  --pad-x: max(var(--gutter), (100% - var(--content)) / 2);
  --col-gutter: 24px;
}
:root{--ink:#1a1a18;--body:#3a3a36;--muted:#8a8a82;--rule:#e6e2db;--paper:#faf8f5}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 Lufga,sans-serif}
button,a{font:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
img{display:block;max-width:100%}
picture{display:contents}
h1,h2,h3,p,blockquote{margin:0}
:focus-visible{outline:2px solid #5956a8;outline-offset:4px}
.skip-link{position:absolute;z-index:30;left:16px;top:-60px;padding:12px 20px;background:#fff}
.skip-link:focus{top:12px}
.site-header{height:80px;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad-x)}
.brand img{width:104px;height:24px}
.header-link{font-size:20px;font-weight:500;line-height:1.2}
.header-link:hover,.section-rule a:hover,.footer-bottom a:hover{opacity:.55}
.hero{height:800px;display:flex;align-items:center;padding:0 var(--pad-x)}
.hero h1{font-size:clamp(60px,6.25vw,90px);font-weight:300;letter-spacing:-.028em;line-height:1.3;white-space:nowrap}
.section-rule{height:80px;padding:0 var(--pad-x);border-block:1px solid var(--rule);display:flex;align-items:center;font-size:18px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.section-rule-split{justify-content:space-between}
.section-rule-split>span{width:var(--col8);flex:0 0 auto;height:46px;display:flex;align-items:center}
.section-rule-split>a{flex:1 1 auto;height:46px;display:flex;align-items:center}
.section-rule-split>a{border-left:1px solid var(--rule);justify-content:flex-end;color:var(--ink);font-size:20px;letter-spacing:0;text-transform:none}
.section-rule-split>a span{margin-left:12px}
/* Figma 12-column grid, read off the 1440 frame: 1280 content, 80 margins, 24 gutter,
   column = (1280 - 11*24)/12 = 84.667. Every width in the file is a column multiple:
   411 = 4 cols, 845 = 8 cols, 1280 = 12, 925 = margin + 8 cols. Columns are derived
   from these tokens rather than hard-coded fr or px tracks, so the ratio holds at every
   width and the margins - not the columns - absorb anything wider than 1440. */
/* Viewport units, not percentages: a percentage inside a custom property is resolved
   by whatever property consumes it, so --m read 80 inside a grid cell and 320 on the
   section. vw resolves the same everywhere. */
:root{
  --content-w:min(var(--content),100vw - 2*var(--gutter));
  --m:calc((100vw - var(--content-w)) / 2);
  --u:calc((var(--content-w) - 264px) / 12);
  --col4:calc(4*var(--u) + 72px);
  --col8:calc(8*var(--u) + 168px)}
.section-split{display:grid;grid-template-columns:calc(var(--m) + var(--col8)) calc(var(--m) + var(--col4));gap:var(--col-gutter);min-height:800px}
.you-visual{padding:0;min-width:0;display:flex}
.gradient-scene{flex:1;min-height:640px;position:relative;overflow:hidden;display:grid;place-items:center}
.vibe-gradient{position:absolute;inset:-12%;--vibe-first:#f5bfd7;--vibe-middle:#c6a7e7;--vibe-glow:#ffe1b6;--vibe-base:#eab3d5;background:radial-gradient(ellipse 90% 95% at 13% 17%,var(--vibe-first) 0%,transparent 68%),radial-gradient(ellipse 73% 80% at 83% 83%,var(--vibe-glow) 0%,transparent 70%),radial-gradient(ellipse 90% 95% at 55% 50%,var(--vibe-middle) 0%,transparent 72%),var(--vibe-base);filter:blur(23px);animation:vibe-drift 9s ease-in-out infinite alternate}
.vibe-polaroid{position:relative;z-index:1;width:var(--vibe-card-width,340px);aspect-ratio:392/455;background:url("/assets/figma/polaroid-frame.webp") center/100% 100% no-repeat;transform:rotate(-1.5deg);filter:drop-shadow(0 2px 3px #5143541a) drop-shadow(0 18px 26px #5143542e)}
.vibe-caption{position:absolute;left:6%;right:6%;bottom:6.5%;height:15%;display:flex;align-items:center;justify-content:center;color:#422a44;font-family:'Reenie Beanie',cursive;font-size:calc(var(--vibe-card-width,340px) * .119);font-weight:400;font-synthesis:none;line-height:1;white-space:nowrap}
.vibe-caption span{display:block;clip-path:inset(0 0 0 0)}
.vibe-caption.is-writing span{animation:vibe-write 1.15s steps(28,end) both}
@media(min-width:901px){.gradient-scene{--vibe-card-width:min(340px,40svh)}}
@media(min-width:601px) and (max-width:900px){.gradient-scene{--vibe-card-width:min(340px,55vw)}}
@media(max-width:600px){.gradient-scene{--vibe-card-width:min(50vw,290px)}}
@keyframes vibe-write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes vibe-drift{from{transform:translate(-2%,-2%) scale(1.04)}to{transform:translate(2%,2%) scale(1.1)}}
@media(prefers-reduced-motion:reduce){.vibe-gradient,.vibe-caption.is-writing span{animation:none;transition:none}}
.you-copy{padding:80px var(--m) 80px 0;display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.you-copy>p{font-size:24px;line-height:1.6;max-width:411px}
.download-group{display:flex;align-items:flex-start;flex-direction:column}
.tag{color:var(--muted);font-size:16px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;line-height:1.2}
.download-group strong{margin-top:12px;font-size:26px;font-weight:600;line-height:1.6}
.store-badges{display:flex;gap:24px;margin-top:24px}
.store-badge{border:0;padding:0;background:none;width:173.5px;height:50px;position:relative;flex:none;transition:opacity .2s}
.store-badge:hover{opacity:.72}
.store-badge:not(.app-store)>img{width:100%;height:100%}
.app-store img{position:absolute}
.app-store .badge-base{inset:0;width:100%;height:100%}
.app-store .badge-icon{left:8.03%;top:19.62%;width:15.4%;height:56.6%}
.app-store .badge-top{left:29.81%;top:21.09%;width:57.78%;height:15.9%}
.app-store .badge-title{left:28.77%;top:44.68%;width:62.73%;height:39.05%}
.store-note{min-height:1.4em;font-size:13px;color:var(--muted);margin-top:8px}
.reverse{grid-template-columns:calc(var(--m) + var(--col4)) calc(var(--m) + var(--col8))}
.learn{padding:80px 0}
.learn-copy{padding-left:var(--m);padding-right:0}
.learn-copy h2,.chat-copy h2,.section-copy h2,.between h2,.footer-main h2{font-weight:300;font-size:clamp(40px,3.75vw,54px);letter-spacing:-.022em;line-height:1.06}
.learn-copy p,.chat-copy>p:not(.pull-line),.section-copy p,.between-top .section-copy p{font-size:clamp(18px,1.6667vw,24px);line-height:1.6;color:var(--body);margin-top:40px}
.chat{min-height:819px}
/* Figma 1440 block 03: panel inner 761 wide inside the 925 column, phone 460 wide
   (60.45% of it) centred, full height 938.78 with the panel 739 tall - 21.28% of the
   phone is cropped off the bottom. The phone takes whichever of width or height binds,
   so the panel is always filled and the crop stays at 21.28% instead of pooling dead
   space above the phone. 100/1.6066 = 62.2426. */
.phone-stage{container-type:size;position:relative;overflow:hidden;padding:var(--gutter) var(--u) 0 var(--m);--phone-w:min(100cqw,max(60.45cqw,62.2426cqh));--phone-h:calc(var(--phone-w) * 938.7755 / 460)}
.phone{position:absolute;top:var(--gutter);left:calc(var(--m) + (100cqw - var(--phone-w)) / 2);width:var(--phone-w);height:var(--phone-h)}
.phone-frame{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.phone-screen{cursor:default;position:absolute;left:6.7%;right:6.7%;top:2%;bottom:2%;border-radius:45px;overflow:hidden;background:#f9f8f5}
.phone-video{width:100%;height:100%;object-fit:cover;display:block}
.chat-copy{padding:80px var(--m) 80px 0}
.chat-copy .pull-line{font-size:clamp(18px,1.6667vw,24px);line-height:1.5;margin-top:64px;font-weight:600;font-style:italic}
.section-shell{width:var(--content-w);margin-inline:auto;display:grid;grid-template-columns:var(--col4) var(--col8);gap:var(--col-gutter)}
.comparison,.decide{min-height:800px;padding-block:80px}
.section-copy{min-width:0}
.comparison .section-copy p,.decide .section-copy p{max-width:411px}
.trip-animation{display:block;width:100%;height:100%;border:0;background:transparent}
.paper-pair{display:flex;justify-content:center;gap:70px;margin-top:40px}
.paper{width:min(35.5%,300px);height:537px;object-fit:contain}
.paper-left{transform:rotate(-2deg)}
.paper-right{transform:rotate(2deg)}
.comparison-arrow{position:absolute;width:140px;height:146px;top:178px}
.comparison-arrow.left{left:19%}
.comparison-arrow.right{right:5%}
.discover-card{position:relative;aspect-ratio:1164/1351;width:100%;min-width:0;transition:transform .55s cubic-bezier(.22,.8,.3,1)}
.discover-card .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transition:opacity .28s ease}
.discover-card.is-swapping .photo{opacity:0}
.between{min-height:800px;padding-top:80px}
.between-top{min-height:276px}
.vibes h3{font-size:20px;min-width:0;line-height:1.6;font-weight:400;margin:0 0 24px}
.vibe-list{display:grid;grid-template-columns:repeat(3,minmax(0,auto));gap:clamp(8px,1.2vw,20px);min-width:0}
.vibe-chip{position:relative;isolation:isolate;border:0;cursor:pointer;border-radius:100px;color:var(--muted);font-size:clamp(12px,1.15vw,16px);line-height:1.3;min-height:42px;padding:8px clamp(6px,.8vw,12px);white-space:nowrap;background:transparent;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.vibe-chip::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background-image:var(--chip-bg);background-position:center;background-size:cover;opacity:.35;transition:opacity .2s}
/* Unselected: gradient at 35%, label in the brand gray. Selected: full gradient, ink, semibold. */
.vibe-chip.is-selected{font-weight:600;color:var(--ink)}
.vibe-chip.is-selected::before{opacity:1}
.vibe-chip:hover::before{opacity:.6}
.vibe-chip.is-selected:hover::before{opacity:1}
.between-top .section-copy{padding-left:var(--col-gutter);min-width:0}
.between-top .section-copy p{max-width:761px}
.discover-gallery{--col-gap:24px;--cols:4;width:min(100% - 2*var(--gutter),var(--content),calc(var(--cols) * 34.46svh + (var(--cols) - 1) * var(--col-gap)));margin:40px auto 0;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--col-gap);align-items:center}

.discover-card:nth-child(1){transform:rotate(-2deg)}
.discover-card:nth-child(2){transform:rotate(2deg)}
.discover-card:nth-child(3){transform:rotate(-1deg)}
.discover-card:nth-child(4){transform:rotate(2deg)}
.statement-rule{min-height:160px;display:flex;align-items:center;padding:24px var(--pad-x);border-block:1px solid var(--rule);font-weight:600;letter-spacing:.04em;font-size:36px;line-height:1.2}
.testimonials{padding:40px var(--pad-x);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;min-height:300px;align-content:center;grid-auto-rows:min-content}
/* stretch, not center: center sized each card to its own quote, so the
   shortest one sat visibly smaller than its neighbours. */
.testimonials blockquote{background:#fff;border-radius:24px;padding:24px;align-self:stretch;
  display:flex;flex-direction:column}
.testimonials blockquote cite{margin-top:auto}
.quote-stripe{height:6px;border-radius:6px;background:url("/assets/figma/hero-gradient.webp") center/cover}
.testimonials blockquote:nth-child(2) .quote-stripe,.testimonials blockquote:nth-child(5) .quote-stripe{background-image:url("/assets/figma/quote-gradient-2.webp")}
.testimonials blockquote:nth-child(3) .quote-stripe,.testimonials blockquote:nth-child(6) .quote-stripe{background-image:url("/assets/figma/quote-gradient-3.webp")}
.testimonials p,.testimonials cite{font-size:16px;line-height:1.6;font-style:normal;display:block;margin-top:12px}
.testimonials cite{color:#8e8e93}
.faq{padding-block:24px;border-top:1px solid var(--rule);min-height:817px}
.faq h2{margin-top:24px}
.faq-list{border-left:1px solid var(--rule);padding:40px 0 40px 84px;margin-top:24px}
.faq details,.faq-row{border-bottom:1px solid var(--rule)}
.faq summary,.faq-row{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:80px;padding:20px 0;font-size:24px;line-height:1.2;letter-spacing:.04em;font-weight:600}
.faq summary{cursor:pointer}
.faq-row span{font-weight:400}
.faq summary::-webkit-details-marker{display:none}
.faq summary span::before{content:"+"}
.faq details[open] summary span::before{content:"−"}
.faq details p{font-size:24px;font-weight:300;line-height:1.6;color:var(--body);padding:12px 0 24px}
.site-footer{background:var(--ink);color:#fff;min-height:800px;padding:80px var(--pad-x) 28px}
.footer-main{min-height:560px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.footer-main p{font-size:24px;line-height:1.6;margin-top:24px;max-width:850px}
.footer-main strong{font-size:52px;line-height:1.06;font-weight:600;margin-top:24px}
.footer-main>span{font-size:24px;margin-top:12px;font-weight:500}
.footer-main .store-badges{margin-top:24px}
.footer-main .store-note{margin-top:8px;color:#c9c8c5;font-size:13px}
.footer-bottom{border-top:1px solid #777670;display:flex;align-items:center;justify-content:space-between;min-height:80px;gap:20px;color:#8e8e93;font-size:20px;font-weight:300;letter-spacing:.02em}
.footer-bottom nav{display:flex;gap:32px;flex-wrap:wrap}
.footer-bottom>span{border-left:1px solid #777670;padding-left:24px;white-space:nowrap}
@media(max-width:1300px){

  .testimonials{padding-inline:var(--pad-x);gap:24px}
  .site-footer{padding-inline:var(--pad-x)}
}
@media(max-width:900px){
  .site-header{height:68px}
  .hero{height:calc(100svh - 68px)}
  .hero h1{font-size:clamp(44px,6.8vw,70px)}
  .section-split,.reverse{grid-template-columns:1fr;gap:0}
  .you{min-height:0}
  .you-visual{padding:0}
  .gradient-scene{flex:1;height:auto;min-height:min(55vw,420px)}
  .you-copy{padding:48px var(--pad-x) 64px;gap:50px}
  .you-copy>p{max-width:680px}
  .learn{padding:64px var(--pad-x);gap:60px}
  .learn-copy{padding:0;max-width:650px}
    .chat{min-height:0;display:flex;flex-direction:column-reverse}
  .chat-copy{max-width:none;padding:64px var(--pad-x)}
  .phone-stage{height:680px;padding:0 var(--pad-x)}
  
  .section-shell,.between-top{display:grid;grid-template-columns:1fr;gap:48px;width:min(100% - 2*var(--gutter),var(--content));margin-inline:auto}
  .comparison,.decide{padding-block:64px}
  .decide-visual{height:clamp(500px,72svh,700px)}
  .between{padding-top:64px}
  .between-top .section-copy{padding:0;border:0;grid-row:1}
  .vibes{grid-row:2}
  .vibe-list{grid-template-columns:repeat(3,minmax(0,auto));gap:16px}
  .discover-gallery{--col-gap:12px;margin-top:64px}
  .testimonials{grid-template-columns:repeat(3,1fr);gap:16px}
  .faq-list{border:0;padding:0;margin:0}
  .footer-bottom{font-size:16px}
  .section-split,.comparison,.decide,.between{min-height:calc(100svh - 80px)}
  .testimonials{min-height:calc(100svh - 240px)}
  .faq,.site-footer{min-height:100svh}
}
@media(max-width:600px){
  html{scroll-behavior:auto}
  .site-header{height:64px;padding-inline:var(--pad-x)}
  .brand img{width:91px;height:auto}
  .header-link{font-size:16px}
  .hero{height:calc(100svh - 64px);min-height:0;padding:0 var(--pad-x)}
  .hero h1{font-size:clamp(35px,9.4vw,56px);line-height:1.2;letter-spacing:-.035em;white-space:normal}
  .section-rule{height:62px;padding-inline:var(--pad-x);font-size:12px}
  .section-rule-split>a{font-size:14px;height:34px}
  .you-visual{padding:0}
  .gradient-scene{flex:1;height:auto;min-height:clamp(360px,100vw,520px)}
  .you-copy{padding:32px var(--pad-x) 48px;gap:48px}
  .you-copy>p{font-size:18px}
  .download-group strong{font-size:22px}
  .store-badges{gap:12px}
  .store-badge{width:min(42vw,173.5px);height:auto;aspect-ratio:173.5/50}
  .learn{padding:48px 24px;gap:36px}
  .learn-copy h2,.chat-copy h2,.section-copy h2,.between h2,.footer-main h2{font-size:clamp(36px,8vw,40px)}
  .learn-copy p,.chat-copy>p:not(.pull-line),.section-copy p,.between-top .section-copy p{font-size:18px;margin-top:24px}
      .chat-copy{padding:48px var(--pad-x)}
  .chat-copy .pull-line{font-size:18px;margin-top:24px}
  .phone-stage{height:570px;padding:0 var(--pad-x)}
  
  .phone-screen{border-radius:30px}
            .section-shell,.between-top{gap:36px}
  .comparison,.decide{padding-block:48px}
  .decide-visual{height:clamp(480px,70svh,620px)}
  .paper-pair{gap:20px;margin-top:22px}
  .paper{width:44%;height:310px}
  .comparison-arrow{width:70px;height:75px;top:125px}
  .comparison-arrow.left{left:4%}.comparison-arrow.right{right:0}
  .between{padding-top:48px}
  .vibe-list{grid-template-columns:repeat(3,minmax(0,auto));gap:12px}
  .vibe-chip{font-size:12px;min-height:36px}
  .discover-gallery{--cols:2;--col-gap:20px;margin:40px auto 48px}
  .statement-rule{min-height:120px;padding:24px var(--pad-x);font-size:27px}
  /* One row the reader swipes, rather than three stacked cards. Scroll padding
     keeps the first and last card off the screen edge when they snap. */
  .testimonials{display:flex;gap:16px;padding:32px 0;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad-x);
    padding-inline:var(--pad-x);-webkit-overflow-scrolling:touch;
    scrollbar-width:none;min-height:0}
  .testimonials::-webkit-scrollbar{display:none}
  .testimonials blockquote{flex:0 0 min(82%,320px);scroll-snap-align:start;width:auto}
  .faq{padding-block:40px}
  .faq h2{margin:0}
  .faq-list{margin-top:20px}
  .faq summary,.faq-row{font-size:18px;min-height:70px;letter-spacing:0}
  .faq details p{font-size:17px}
  .site-footer{min-height:700px;padding:48px var(--pad-x) 24px}
  .footer-main{min-height:480px}
  .footer-main p{font-size:18px}
  .footer-main strong{font-size:42px}
  .footer-main>span{font-size:18px}
  .footer-bottom{align-items:flex-start;flex-direction:column;padding-top:20px;font-size:14px}
  .footer-bottom nav{gap:12px 20px}
  .footer-bottom>span{padding:0;border:0}
  .section-split,.comparison,.decide,.between{min-height:calc(100svh - 62px)}
  .testimonials{min-height:calc(100svh - 182px)}
}
/* On wide screens, a label and its content together occupy one viewport.
   svh avoids changing the composition as browser controls appear or disappear. */
@media(min-width:901px){
  :root{
    --header-h:clamp(56px,10svh,80px);
    --rule-h:clamp(56px,10svh,80px);
    --panel-h:calc(100svh - var(--rule-h));
    --panel-pad:clamp(32px,8.5svh,80px);
    --copy-size:clamp(16px,min(1.6667vw,2.65svh),24px);
    --heading-size:clamp(36px,min(4.0278vw,6.65svh),58px);
    --statement-h:clamp(110px,18svh,160px);
  }
  .site-header{height:var(--header-h)}
  .header-link{font-size:clamp(16px,2.3svh,20px)}
  .hero{height:calc(100svh - var(--header-h))}
  .hero h1{font-size:clamp(48px,min(6.25vw,11.8svh),90px)}
  .section-rule{height:var(--rule-h);font-size:clamp(14px,2.1svh,18px)}
  .section-rule-split>a{font-size:clamp(16px,2.3svh,20px)}
  .section-split,.comparison,.decide,.between{min-height:var(--panel-h)}
  .section-split{grid-template-rows:minmax(min-content,1fr)}
  .section-split>*{min-height:0}
  .you-visual{padding-top:0;padding-bottom:0}
  .gradient-scene{height:100%;width:100%;flex:1}
  .you-copy{padding-top:var(--panel-pad);padding-bottom:var(--panel-pad)}
  .you-copy>p{font-size:var(--copy-size)}
  .you-copy .store-badges{width:100%;max-width:371px;gap:clamp(8px,1.5vw,24px)}
  .you-copy .store-badge{width:min(173.5px,calc(50% - 12px));height:auto;aspect-ratio:173.5/50}
  .learn{padding-top:var(--panel-pad);padding-bottom:var(--panel-pad)}
  .learn-copy h2,.chat-copy h2,.section-copy h2,.between h2,.footer-main h2{font-size:var(--heading-size)}
  .learn-copy p,.chat-copy>p:not(.pull-line),.section-copy p,.between-top .section-copy p{font-size:var(--copy-size);margin-top:clamp(24px,4.5svh,40px)}
      .chat-copy{padding-top:var(--panel-pad);padding-bottom:var(--panel-pad)}
  .chat-copy .pull-line{font-size:var(--copy-size);margin-top:clamp(24px,4.5svh,40px)}
  
  
        .comparison,.decide{padding-top:var(--panel-pad);padding-bottom:var(--panel-pad)}
  .paper-pair{margin-top:clamp(20px,4svh,40px)}
  .paper{height:min(537px,67svh)}
  .comparison-arrow{width:min(140px,17svh);height:auto;top:min(178px,22svh)}
  .decide-visual{display:block;height:100%}
  .between{padding-top:var(--panel-pad)}
  .between-top{min-height:0}
  .vibes h3{font-size:clamp(16px,2.3svh,20px);margin-bottom:clamp(12px,2.6svh,24px)}
  .vibe-list{gap:clamp(12px,2.6svh,24px)}
  .vibe-chip{min-height:clamp(34px,4.7svh,42px);font-size:clamp(12px,1.8svh,16px)}
  .discover-gallery{margin-top:clamp(20px,4svh,40px);justify-items:center}
  
  .statement-rule{min-height:var(--statement-h);font-size:clamp(27px,4svh,36px)}
  .testimonials{min-height:calc(100svh - var(--statement-h) - var(--rule-h));align-items:center}
  .faq{min-height:100svh}
  .faq-list{padding-top:clamp(24px,4svh,40px);padding-bottom:clamp(24px,4svh,40px)}
  .faq summary,.faq-row{min-height:clamp(56px,8svh,80px);font-size:clamp(18px,2.7svh,24px)}
  .faq details p{font-size:var(--copy-size)}
  .site-footer{min-height:100svh;padding-top:var(--panel-pad);display:flex;flex-direction:column}
  .footer-main{min-height:0;flex:1}
  .footer-main p,.footer-main>span{font-size:var(--copy-size)}
  .footer-main strong{font-size:clamp(40px,5.8svh,52px)}
  .footer-bottom{min-height:clamp(52px,8svh,80px);font-size:clamp(14px,2.1svh,20px)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* --- Block 02 · polaroid pinup ------------------------------------------ */
@font-face{font-family:'Gloria Hallelujah';src:url("/assets/block2/gloria.woff2") format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Homemade Apple';src:url("/assets/block2/homemade.woff2") format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Permanent Marker';src:url("/assets/block2/marker.woff2") format('woff2');font-weight:400;font-display:swap}
.pinup{border-left:1px solid #e8e8e8;padding:0 40px;display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden}
.pinup-stage{position:absolute;top:0;left:0;width:1080px;height:1080px;transform-origin:0 0}
.pinup-scale{position:relative;width:100%;max-width:1080px;aspect-ratio:1/1}
.pinup-photo,.pinup-card{position:absolute;will-change:transform,opacity}
.pinup-photo{box-shadow:0 6px 18px #0000002e}
.pinup-win{position:absolute;overflow:hidden;background:#1a1a1a}
.pinup-win img{position:absolute;left:0}
.pinup-frame{position:absolute;inset:0;width:100%;height:100%}
.pinup-band{position:absolute;display:flex;align-items:center;justify-content:center}
.pinup-ink{position:relative;display:inline-block}
.pinup-ink>span{opacity:0;white-space:nowrap;line-height:1}
.pinup-ink>div{position:absolute;left:-4px;top:-6px;bottom:-6px;overflow:hidden;width:0}
.pinup-ink>div>span{position:absolute;left:4px;top:6px;white-space:nowrap;line-height:1}
/* The global img{max-width:100%} would collapse the strip photos, whose
   wrappers are zero-size anchors; the stage sizes its own images. */
.pinup-stage img{max-width:none}
/* Mobile: the carousel runs full-bleed, as in the reference, and the 1080x1920
   stage is cropped to the band the photos actually use (y 280-1600) so the
   empty copy areas of the source composition are not carried over. */
@media(max-width:900px){.pinup{border-left:0;border-top:1px solid #e8e8e8;padding:24px 0;overflow:visible;display:block}
  .pinup-scale{aspect-ratio:1080/1320;max-width:none;width:100vw;flex:none;margin-left:calc(50% - 50vw);overflow:hidden}
}

/* --- Block 04 · taste profiles (day wheel) ------------------------------ */
.comparison-visual,.decide-visual{position:relative;min-width:0}
/* Matches block 02: the visual column opens with the same hairline at the same
   column boundary, since both grids split after 4 columns + the 24 gutter. */
.comparison-visual{min-height:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2.5svh,24px);border-left:1px solid #e8e8e8;padding-left:clamp(20px,3vw,40px)}
.destination{margin:0 auto;width:max-content;display:flex;align-items:center;gap:12px;border-radius:22px;background:#fff;padding:9px 25px;box-shadow:0 10px 40px #0000000a}
.destination div{display:flex;flex-direction:column}
.destination strong{font-size:14px;line-height:1.2;font-weight:500}
.destination span{font-size:12px;color:var(--muted)}
.day-wheel-comparison{width:min(100%,600px);margin-inline:auto;flex:none;display:grid;grid-template-columns:minmax(0,1fr) clamp(96px,9vw,120px) minmax(0,1fr);grid-template-rows:clamp(44px,7svh,62px) auto;column-gap:clamp(8px,1.4vw,20px);row-gap:clamp(16px,3svh,32px)}
.traveler-head{display:flex;align-items:center;gap:12px;min-width:0}
.traveler-maya{grid-column:1;grid-row:1}
.traveler-alex{grid-column:3;grid-row:1}
.traveler-head>div{display:flex;flex-direction:column;min-width:0}
.traveler-head strong{font-size:clamp(20px,2vw,28px);font-weight:500;line-height:1.1}
.traveler-head div span{color:var(--muted);font-size:clamp(11px,1vw,14px);line-height:1.3;white-space:nowrap}
.traveler-avatar{width:clamp(28px,3vw,42px);height:clamp(28px,3vw,42px);border-radius:50%;flex:none}
.traveler-maya .traveler-avatar{background:linear-gradient(135deg,#ffcf31 7%,#ff9bc1 55%,#9ab8ff)}
.traveler-alex .traveler-avatar{background:linear-gradient(135deg,#ffe8a6,#c3d9e3 60%,#b8b4db)}
.time-wheel{position:relative;grid-column:2;grid-row:2;width:min(100%,120px);aspect-ratio:1;align-self:center;justify-self:center;border-radius:50%;background:#fff;box-shadow:0 9px 28px #1a1a180e,0 0 0 1px #e8e5df}
.time-ring{position:absolute;inset:4px;border-radius:50%}
.time-hand{position:absolute;inset:4px;border-radius:50%;transform:rotate(var(--wheel-angle,0deg));will-change:transform}
.time-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -90deg,#454540 0deg 1.6deg,transparent 1.6deg 15deg);-webkit-mask:radial-gradient(circle,transparent 0 60%,#000 61% 68%,transparent 69%);mask:radial-gradient(circle,transparent 0 60%,#000 61% 68%,transparent 69%)}
.time-marker{position:absolute;top:2px;left:50%;width:10px;height:10px;border-radius:50%;background:#ffd119;transform:translateX(-50%);box-shadow:0 0 0 2px #fff}
.time-face{position:absolute;inset:21%;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--paper)}
.time-face time{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:clamp(15px,1.7vw,21px);font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.time-ap{font-size:.52em;font-weight:500;letter-spacing:.08em;line-height:1;margin-top:.22em;color:var(--muted)}
.route-viewport{--route-card-h:clamp(120px,20svh,154px);position:relative;height:clamp(232px,36svh,317px);min-width:0;align-self:start;overflow:hidden;perspective:760px;perspective-origin:50% 50%;isolation:isolate;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent)}
.route-maya{grid-column:1;grid-row:2}
.route-alex{grid-column:3;grid-row:2}
.route-card{position:absolute;left:0;right:0;top:50%;height:var(--route-card-h);display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 9px 28px #1a1a180e;opacity:0;transform:translateY(-50%);transform-origin:center center;backface-visibility:hidden;will-change:transform,opacity}
.route-card:first-child{opacity:1}
.route-card>picture{display:block;min-height:0;height:100%;overflow:hidden}
.route-photo{display:block;width:100%;height:100%;min-height:0;object-fit:cover;object-position:center;filter:saturate(.88)}
.route-card-copy{display:flex;flex-direction:column;gap:3px;min-width:0;padding:10px 14px 12px;background:#fff}
.route-card-copy strong{font-size:clamp(15px,1.5vw,20px);font-weight:500;line-height:1.15}
.route-card-copy span{font-size:clamp(11px,1vw,14px);line-height:1.3;color:var(--muted)}
.route-maya .route-card{border-bottom:4px solid #ffd119}
.route-alex .route-card:not(.is-free){border-bottom:4px solid #c7d7de}
.route-alex .route-card.is-free{display:flex;align-items:center;justify-content:center;background:#faf8f5;border:1px dashed #c9c7c2;box-shadow:none}
.route-card.is-free .route-card-copy{background:transparent;align-items:center;text-align:center}
.route-card.is-free strong{color:var(--muted);font-weight:500}
.route-card.is-free span{color:var(--muted)}
.route-free-label{color:#a3a19b;font-size:clamp(15px,1.4vw,18px);font-weight:400;letter-spacing:.01em}
@media(max-width:900px){
.comparison-visual{min-height:600px}
}
@media(max-width:600px){
.comparison-visual{min-height:420px}
.destination{padding:7px 18px}
.day-wheel-comparison{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);grid-template-rows:40px auto;column-gap:8px;row-gap:10px}
.time-wheel{grid-column:2;grid-row:2;width:72px}
.time-face{inset:15%}
.time-face time{font-size:13px}
.comparison-visual{border-left:0;padding-left:0}
  .route-viewport{--route-card-h:clamp(118px,20svh,140px);height:clamp(210px,30svh,258px)}
.route-card{border-radius:12px}
.route-card-copy{padding:8px 8px 10px;gap:2px}
.route-card-copy strong{font-size:12px}
.route-card-copy span{font-size:10px;line-height:1.2}
.route-free-label{font-size:12px}
.traveler-head{gap:6px}
.traveler-head strong{font-size:18px}
.traveler-head div span{display:none}
.traveler-avatar{width:26px;height:26px}
}
@media(min-width:901px) and (max-height:560px){
.day-wheel-comparison{grid-template-rows:80px auto}
.time-wheel{width:80px}
.route-card-copy span{display:none}
}

/* ---------------------------------------------------------------------------
   Ghost figments. A page-anchored overlay, not a viewport-fixed one: each slot
   is pinned to a document position so it stays put whichever way the reader
   scrolls. The loop carries its own alpha and fades from and to nothing, so the
   only thing CSS does is place it. pointer-events:none keeps it inert.
--------------------------------------------------------------------------- */
body{position:relative}
/* On top of the page and see-through: the figment holds its place on screen
   while the content scrolls behind it. multiply keeps it a tint rather than a
   film, pointer-events:none keeps it inert, and the opacity is low enough that
   everything underneath stays readable. */
.figments{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden;
  transition:opacity .45s ease}
/* multiply over the dark footer reads as a smudge, so it stands down there */
.figments.is-hidden{opacity:0}
.figment{position:absolute;aspect-ratio:1;opacity:0;pointer-events:none;
  mix-blend-mode:multiply;transform-origin:50% 50%;will-change:opacity;
  transition:opacity 1.8s cubic-bezier(.45,0,.55,1)}
.figment video{width:100%;height:100%;display:block;object-fit:contain}
/* Safari still-frame mode: three frames of the loop stacked and crossfaded over
   one appearance, so the shape still breathes. The first frame is already up
   when the container starts fading in, and the last is still up while it fades
   out, so nothing ever cuts. */
.figment.is-stills img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.figment.is-stills.is-playing img{animation:fig-cross var(--fig-loop,7500ms) linear both}
.figment.is-stills.is-playing img:nth-child(2){animation-name:fig-cross-2}
.figment.is-stills.is-playing img:nth-child(3){animation-name:fig-cross-3}
@keyframes fig-cross{0%{opacity:1}35%{opacity:1}55%{opacity:0}100%{opacity:0}}
@keyframes fig-cross-2{0%{opacity:0}35%{opacity:0}55%{opacity:1}68%{opacity:1}88%{opacity:0}100%{opacity:0}}
@keyframes fig-cross-3{0%{opacity:0}68%{opacity:0}88%{opacity:1}100%{opacity:1}}
.figment.is-live{opacity:var(--figment-opacity,.34)}

/* The swipe row must size to its tallest card, not to the section. These sit at
   the end of the sheet because the section-height rules above would otherwise win. */
@media(max-width:600px){
  .testimonials{min-height:0;align-items:stretch}
}

/* Block 06 chips: between 901 and 1100 the four-column cell is too narrow for "Adventurous" at the regular gap. */
@media(min-width:901px) and (max-width:1100px){.vibe-list{gap:10px}.vibe-chip{padding:8px 6px}}
@media(min-width:901px) and (max-width:1000px){.vibe-list{grid-template-columns:repeat(2,minmax(0,auto))}}

.faq details p a{color:inherit;text-decoration:underline;text-underline-offset:3px}