/* picaggo.com home (dark premium, Oct 2026). Layout: cinematic dark single column; one orchestrated moment (photos from everyone fly into one album), then quiet editorial sections */
:root{
  color-scheme: dark;
  --night:#121010; --char:#1D1A19; --char-2:#272322; --line:#38322F;
  --ivory:#F4EFE7; --muted:#ADA39A; --wheat:#F2D9AE; --red:#B8252A; --red-hi:#D2353B;
  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --body:"Manrope", "Segoe UI", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ivory);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.serif{font-family:var(--display);font-weight:600;font-variant-numeric:lining-nums}
.ital{font-family:var(--display);font-style:italic;font-weight:600;color:var(--wheat)}
.eyebrow{font:700 12px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--wheat)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;text-decoration:none;font:700 16px/1 var(--body);
     padding:18px 26px;border-radius:12px;box-shadow:0 10px 30px rgba(184,37,42,.35);transition:background .2s,transform .2s}
.btn:hover{background:var(--red-hi);transform:translateY(-1px)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--wheat);outline-offset:3px}
.ghost{color:var(--muted);text-decoration:none;font:600 15px var(--body)}
.ghost:hover{color:var(--ivory)}

/* nav */
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(18,16,16,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(56,50,47,.6)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 15px var(--body);letter-spacing:.14em}
.brand img{width:40px}
.navr{display:flex;align-items:center;gap:18px}
.navr .btn{padding:12px 16px;font-size:14px;box-shadow:none}

/* hero */
.hero{position:relative;padding-block:56px 40px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto;height:120%;background:radial-gradient(60% 50% at 70% 35%,rgba(242,217,174,.10),transparent 70%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero h1.eyebrow{margin:0;font:700 12px/1.5 var(--body);letter-spacing:.2em;max-width:34em}
.h-display{margin:18px 0 0;font:600 clamp(46px,6.4vw,84px)/1.0 var(--display);letter-spacing:-.5px;text-wrap:balance}
.h-display .ital{display:block;font-size:1.08em;margin-top:6px}
.lede{margin:24px 0 0;max-width:30em;color:var(--muted);font-size:18px}
.lede b{color:var(--ivory);font-weight:600}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:32px}
.fine{margin-top:14px;color:var(--muted);font-size:13px}

/* event strip */
.strip{border-block:1px solid var(--line);overflow:hidden;padding-block:20px;margin-top:40px}
.strip .track{display:flex;gap:36px;width:max-content;animation:marq 38s linear infinite}
.strip span{font:500 26px var(--display);white-space:nowrap;color:var(--muted)}
.strip span::after{content:"\00B7";font-size:22px;margin-left:36px;color:var(--wheat);vertical-align:middle}
@keyframes marq{to{transform:translateX(-50%)}}

/* three no's */
.nos{padding-block:48px 40px}
.no{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:44px;border-bottom:1px solid var(--line)}
.no:last-child{border-bottom:0}
.no:nth-child(even) .txt{order:2}
.no h2{margin:12px 0 0;font:600 clamp(40px,5vw,64px)/1.02 var(--display);text-wrap:balance}
.no p{color:var(--muted);max-width:30em;margin:18px 0 0}
.no .media{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;max-height:560px;background:var(--char)}
.no .media img,.no .media video{width:100%;height:100%;object-fit:cover}
.tag{position:absolute;left:14px;bottom:14px;background:rgba(18,16,16,.78);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);
     border-radius:30px;padding:8px 14px;font:600 13px var(--body)}
.tag em{font-style:normal;color:var(--wheat)}
.rise{transition:transform .9s cubic-bezier(.2,.75,.2,1)}
.js .rise.below{transform:translateY(28px)}

/* everyone */
.everyone{padding-block:80px}
.sec-h{max-width:720px}
.sec-h h2{margin:12px 0 0;font:600 clamp(36px,4.4vw,56px)/1.05 var(--display);text-wrap:balance}
.sec-h p{color:var(--muted);margin:14px 0 0}
.sources{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.src{background:var(--char);border:1px solid var(--line);border-radius:16px;overflow:hidden;min-width:0}
.src img{width:100%;aspect-ratio:1;object-fit:cover}
.src div{padding:16px 16px 18px}
.src b{display:block;font:600 22px/1.15 var(--display)}
.src span{display:block;margin-top:6px;color:var(--muted);font-size:14px;line-height:1.5}

/* steps */
.how{padding-block:40px 80px}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:40px;counter-reset:s}
.step{position:relative;border-top:1px solid var(--line);padding-top:22px;min-width:0}
.step .n{font:600 46px/1 var(--display);color:var(--wheat)}
.step h3{margin:12px 0 6px;font:700 19px var(--body)}
.step p{margin:0;color:var(--muted);font-size:15px}

/* real couple */
.real{padding-block:72px;background:linear-gradient(180deg,var(--night),#1A1615 40%,var(--night))}
.real .wrap{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:56px;align-items:center}
.phone{border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55);aspect-ratio:9/16;background:#000}
.phone video{width:100%;height:100%;object-fit:cover}
blockquote{margin:16px 0 0;font:500 clamp(30px,3.6vw,44px)/1.15 var(--display);text-wrap:balance}
blockquote .ital{font-weight:500}
.who{margin-top:16px;color:var(--muted);font-size:14px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px}
.stat b{display:block;font:600 40px/1 var(--display);color:var(--ivory);font-variant-numeric:lining-nums tabular-nums}
.stat span{display:block;margin-top:8px;color:var(--muted);font-size:13px}

/* reviews */
.reviews{padding-block:72px}
.revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.rev{background:var(--char);border:1px solid var(--line);border-radius:16px;padding:24px;min-width:0}
.rev .st{color:var(--wheat);letter-spacing:3px;font-size:14px}
.rev p{margin:12px 0 0;font-size:15.5px;color:var(--ivory)}
.rev span{display:block;margin-top:14px;color:var(--muted);font-size:13px}

/* final */
.final{padding-block:90px 70px;text-align:center;background:radial-gradient(70% 60% at 50% 30%,#3B3735 0%,var(--night) 70%)}
.final img.logo{width:84px;margin:0 auto 26px}
.final h2{margin:0;font:600 clamp(40px,5.4vw,72px)/1.02 var(--display)}
.final h2 .ital{display:block}
.final p{color:var(--muted);margin:20px auto 0;max-width:34em}
.final .cta{justify-content:center}
footer{border-top:1px solid var(--line);padding-block:26px;color:var(--muted);font-size:13px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

@media (max-width: 860px){
  .hero{padding-block:34px 10px}
  .hero .wrap{grid-template-columns:1fr;gap:6px}
  .no{grid-template-columns:1fr;gap:22px;padding-block:30px}
  .no:nth-child(even) .txt{order:0}
  .no .media{max-height:460px}
  .sources{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:1fr}
  .real .wrap{grid-template-columns:1fr;gap:30px}
  .phone{max-width:320px;margin:0 auto}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .revs{grid-template-columns:1fr}
  .navr .ghost{display:none}
  .nos{padding-block:56px 20px}
}
@media (prefers-reduced-motion: reduce){
  .strip .track{animation:none}
  .rise,.js .rise.below{transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- shared header / dropdown / footer ---------- */
.drop{position:relative}
.drop>button{background:none;border:0;color:var(--muted);font:600 15px var(--body);cursor:pointer;padding:8px 0}
.drop>button:hover,.drop:focus-within>button{color:var(--ivory)}
.drop .menu{position:absolute;top:100%;left:-14px;min-width:230px;background:var(--char);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.5);display:none}
.drop:hover .menu,.drop:focus-within .menu{display:block}
.menu a{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:8px;text-decoration:none;font:600 14px var(--body);color:var(--ivory)}
.menu a:hover{background:var(--char-2)}
.menu a small{color:var(--muted);font-weight:500}
.burger{display:none;position:relative;width:42px;height:42px;flex:none;border:0;border-radius:50%;background:rgba(244,239,231,.08);cursor:pointer;transition:background .2s}
.burger:hover{background:rgba(244,239,231,.14)}
.burger span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:var(--ivory);transition:transform .25s ease,top .25s ease}
.burger span:first-child{top:16px}
.burger span:last-child{top:24px}
.burger[aria-expanded="true"] span:first-child{top:20px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:20px;transform:rotate(-45deg)}
.sheet{display:none}
.site-foot{border-top:1px solid var(--line);padding-block:56px 30px;color:var(--muted);font-size:14px}
.site-foot .cols{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:28px}
.site-foot h4{margin:0 0 12px;font:700 12px var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--ivory)}
.site-foot a{display:block;text-decoration:none;color:var(--muted);padding:4px 0}
.site-foot a:hover{color:var(--ivory)}
.site-foot .about p{margin:12px 0 18px;max-width:22em}
.stores{display:flex;flex-wrap:wrap;gap:10px}
.site-foot .store{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:9px 13px;font:600 13px var(--body);color:var(--ivory)}
.socials{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
.socials a{display:inline;padding:0}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px}
.soon{display:inline-block;margin-left:8px;font:700 10px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#121010;background:var(--wheat);padding:3px 7px;border-radius:5px;vertical-align:middle}

/* ---------- section scaffolding ---------- */
.section{padding-block:84px}
.center-h{text-align:center;margin-inline:auto}
.center-h p{margin-inline:auto}

/* ---------- app screens (light, like the real app) ---------- */
.device{position:relative;width:250px;aspect-ratio:9/19.3;border-radius:38px;background:#0b0b0b;padding:9px;box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 0 0 1.5px #3a3a3a;flex:none;max-width:100%}
.device::before{content:"";position:absolute;top:15px;left:50%;width:76px;height:20px;margin-left:-38px;border-radius:12px;background:#0b0b0b;z-index:3}
.scr{position:relative;height:100%;border-radius:30px;overflow:hidden;background:#fff;color:#16161a;font:500 10.5px/1.35 var(--body)}
.scr .sb{height:34px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 20px 4px;font:700 10px var(--body)}
.app-top{display:flex;align-items:center;gap:8px;padding:8px 14px 6px}
.app-top b{font:800 13.5px var(--body);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-top .x{color:#9a9aa2;font-size:15px}
.avs{display:flex;padding:2px 14px 8px}
.avs i{width:20px;height:20px;border-radius:50%;margin-right:-5px;border:2px solid #fff;font:700 8px/16px var(--body);color:#fff;text-align:center;font-style:normal}
.row2{display:flex;gap:6px;padding:0 14px 8px}
.pbtn{flex:1;text-align:center;border-radius:9px;padding:8px 4px;font:700 10px var(--body)}
.pbtn.red{background:#D7262E;color:#fff}
.pbtn.lt{background:#FDECEC;color:#C21F27}
.sync{margin:0 14px 8px;display:flex;align-items:center;justify-content:space-between;background:#F2FBF5;border:1px solid #CDEFD9;border-radius:10px;padding:7px 10px;font:700 10px var(--body);color:#167A40}
.tog{width:30px;height:17px;border-radius:9px;background:#28C76F;position:relative;flex:none}
.tog::after{content:"";position:absolute;right:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff}
.tabs{display:flex;gap:5px;padding:0 14px 8px;overflow:hidden}
.tabs span{border-radius:20px;padding:4px 9px;background:#F1F1F4;font:700 9px var(--body);color:#55555d;white-space:nowrap}
.tabs span.on{background:#D7262E;color:#fff}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:0 2px}
.grid3 div{aspect-ratio:1;background-size:cover;background-position:center}
.field{margin:0 14px 9px;border:1px solid #E6E6EB;border-radius:10px;padding:7px 10px}
.field small{display:block;color:#8a8a93;font:600 8.5px var(--body);text-transform:uppercase;letter-spacing:.06em}
.field b{font:700 11.5px var(--body)}
.cta-big{margin:12px 14px 0;background:#D7262E;color:#fff;text-align:center;border-radius:12px;padding:11px;font:800 11.5px var(--body)}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:0 14px 9px}
.chips span{border:1px solid #E6E6EB;border-radius:20px;padding:4px 9px;font:700 9.5px var(--body);color:#33333a}
.chips span.on{border-color:#D7262E;color:#C21F27;background:#FDECEC}
.h-scr{padding:4px 14px 10px;font:800 16px/1.2 var(--body)}
.h-scr span{display:block;font:500 10px var(--body);color:#77777f;margin-top:3px}
.invite{margin:4px 14px 8px;border-radius:14px;overflow:hidden;position:relative;aspect-ratio:4/5;background-size:cover;background-position:center}
.invite::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.7))}
.invite div{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;color:#fff}
.invite small{font:700 8px var(--body);letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.invite b{display:block;font:600 22px/1.05 var(--display);margin-top:4px}
.thumbs{display:flex;gap:6px;padding:0 14px 20px}
.thumbs div{flex:1;aspect-ratio:3/4;border-radius:8px;background-size:cover;background-position:center;position:relative;border:2px solid transparent}
.thumbs div.on{border-color:#D7262E}
.thumbs span{position:absolute;left:0;right:0;bottom:-15px;text-align:center;font:700 8px var(--body);color:#55555d}
.wa{background:#EFE7DE;height:100%;display:flex;flex-direction:column}
.wa .wh{background:#075E54;color:#fff;padding:40px 12px 9px;display:flex;align-items:center;gap:8px;font:700 11.5px var(--body)}
.wa .wh i{width:24px;height:24px;border-radius:50%;background:#D7262E;display:inline-block;font-style:normal}
.wa .wh small{display:block;font:500 9px var(--body);opacity:.8}
.wa .msgs{padding:10px;display:flex;flex-direction:column;gap:7px}
.bub{max-width:84%;border-radius:9px;padding:6px 8px;font:500 10px/1.35 var(--body);box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bub.me{align-self:flex-end;background:#D9FDD3}
.bub.them{align-self:flex-start;background:#fff}
.bub .ph{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:4px}
.bub .ph div{aspect-ratio:1;border-radius:4px;background-size:cover;background-position:center}
.prog{margin:0 14px 8px;background:#F4F4F7;border-radius:10px;padding:8px 10px}
.prog b{display:flex;justify-content:space-between;font:700 10px var(--body)}
.bar{height:5px;border-radius:5px;background:#E6E6EB;margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;width:72%;background:#D7262E;border-radius:5px}

/* ---------- three ways ---------- */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px}
.way{background:var(--char);border:1px solid var(--line);border-radius:22px;padding:30px 22px 26px;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.way.super{border-color:rgba(242,217,174,.55);background:linear-gradient(180deg,#2A2420,var(--char))}
.way .device{width:210px}
.way h3{margin:24px 0 6px;font:600 28px/1.1 var(--display)}
.way p{margin:0;color:var(--muted);font-size:15px;max-width:22em}
.way .lab{font:700 11px var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.way.super .lab{color:var(--wheat)}

/* ---------- features ---------- */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px}
.feat{background:var(--char);border:1px solid var(--line);border-radius:18px;overflow:hidden;min-width:0;display:flex;flex-direction:column}
.feat.wide{grid-column:span 2}
.feat .vis{position:relative;height:210px;background:#1a1716;overflow:hidden}
.feat .vis>img{width:100%;height:100%;object-fit:cover}
.feat .body{padding:18px 20px 22px}
.feat h3{margin:0;font:600 25px/1.1 var(--display)}
.feat p{margin:8px 0 0;color:var(--muted);font-size:14.5px}
.mini-cards{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;padding:18px 18px 34px}
.mini{width:92px;aspect-ratio:4/5;border-radius:10px;background-size:cover;background-position:center;position:relative;box-shadow:0 10px 24px rgba(0,0,0,.45);overflow:hidden;flex:none}
.mini b{position:absolute;left:6px;right:6px;bottom:6px;font:600 13px/1 var(--display);color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.mini.pol{background:#fff;padding:6px 6px 22px}
.mini.pol div{height:100%;background-size:cover;background-position:center;border-radius:2px}
.mini.pol b{color:#222;text-shadow:none;bottom:5px;font-size:12px;text-align:center}
.mini.ed{background:#F4EFE7}
.mini.ed div{position:absolute;left:8px;right:8px;top:8px;height:58%;background-size:cover;background-position:center}
.mini.ed b{color:#1b1b1b;text-shadow:none;font-style:italic}
.mini.st{background:transparent;box-shadow:none;overflow:visible}
.mini.st div{position:absolute;inset:0;border-radius:8px;background-size:cover;background-position:center;box-shadow:0 8px 18px rgba(0,0,0,.45);border:3px solid #fff}
.mini.st div:nth-child(1){transform:rotate(-8deg) translate(-6px,4px)}
.mini.st div:nth-child(2){transform:rotate(6deg) translate(6px,-2px)}
.mini-lab{position:absolute;bottom:10px;left:0;right:0;text-align:center;font:600 11px var(--body);color:var(--muted);display:flex;justify-content:center;gap:52px}
.wall{position:absolute;inset:18px 22px;border-radius:10px;border:6px solid #0d0d0d;background:#000;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:3px;box-shadow:0 14px 30px rgba(0,0,0,.6)}
.wall div{background-size:cover;background-position:center;border-radius:2px}
.selfie{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px}
.selfie .face{width:84px;height:84px;border-radius:50%;background-size:cover;background-position:center;border:3px solid var(--wheat)}
.selfie .arrow{color:var(--wheat);font-size:22px}
.selfie .found{display:grid;grid-template-columns:repeat(3,44px);gap:4px}
.selfie .found div{width:44px;height:44px;border-radius:6px;background-size:cover;background-position:center}
.wish{position:absolute;inset:22px;background:#fff;border-radius:12px;padding:16px;color:#222;box-shadow:0 14px 30px rgba(0,0,0,.5);transform:rotate(-2deg)}
.wish b{font:italic 600 19px var(--display);color:#B8252A}
.wish p{font:500 12.5px/1.45 var(--body);margin:6px 0 0;color:#333}
.wish small{display:block;margin-top:8px;font:700 10px var(--body);color:#888}
.drive{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:18px;font:700 13px var(--body);color:var(--ivory)}
.drive .box{width:100px;height:100px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:#2A2523;border:1px solid var(--line);font:800 12px var(--body);text-align:center;padding:8px}

/* ---------- see the app ---------- */
.lineup{display:flex;justify-content:center;align-items:flex-end;gap:26px;margin-top:48px}
.lineup figure{margin:0;display:flex;flex-direction:column;align-items:center}
.lineup figure:nth-child(2) .device{width:270px;transform:translateY(-26px)}
.lineup figcaption{margin-top:16px;text-align:center;color:var(--muted);font:600 13px var(--body)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:40px auto 0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 2px;font:600 18px/1.35 var(--body);color:var(--ivory)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 28px/0.8 var(--body);color:var(--wheat);transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:var(--muted);max-width:44em}

@media (max-width: 860px){
  .navr .drop,.navr .ghost{display:none}
  .burger{display:inline-block}
  .sheet a[aria-current]{color:var(--wheat)}
  .sheet.open{display:block;position:fixed;inset:64px 0 0;z-index:30;background:var(--night);padding:20px;overflow:auto}
  .sheet a{display:block;padding:14px 4px;border-bottom:1px solid var(--line);text-decoration:none;font:600 18px var(--body)}
  .site-foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-foot .about{grid-column:1 / -1}
  .ways{grid-template-columns:1fr}
  .feats{grid-template-columns:1fr}
  .feat.wide{grid-column:auto}
  .lineup{flex-direction:column;align-items:center;gap:36px}
  .lineup figure:nth-child(2) .device{transform:none;width:250px}
  .section{padding-block:60px}
  .mini{width:70px}
  .mini-lab{gap:28px}
}


/* ---------- try the demo ---------- */
.tryq{position:fixed;right:22px;bottom:22px;z-index:25;width:196px;background:linear-gradient(180deg,#2A2523,#1D1A19);border:1px solid var(--line);
  border-radius:20px;padding:18px 16px 16px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.55)}
.tryq .qrbox{width:156px;height:156px;margin:0 auto;background:#fff;border-radius:14px;padding:12px;display:flex;align-items:center;justify-content:center}
.tryq .qrbox img,.tryq .qrbox canvas{width:132px!important;height:132px!important}
.tryq b{display:block;margin-top:14px;font:italic 600 24px/1.1 var(--display);color:var(--ivory)}
.tryq span{display:block;margin-top:6px;font:500 12.5px/1.45 var(--body);color:var(--muted)}
.tryx{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--muted);font:400 20px/1 var(--body);cursor:pointer;padding:4px}
.tryx:hover{color:var(--ivory)}
.trym{display:none}
@media (max-width:860px){
  .tryq{display:none}
  .trym{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;padding-block:20px;
    background:var(--char);border:1px solid rgba(242,217,174,.4);border-radius:18px;padding-inline:20px}
  .trym b{display:block;font:italic 600 24px var(--display)}
  .trym span{display:block;color:var(--muted);font-size:14px;margin-top:4px}
  .trym{margin-inline:20px;width:auto}
}

/* ---------- pricing (real plans) ---------- */
.ptabs{display:flex;justify-content:center;gap:6px;margin:30px auto 0;background:var(--char);border:1px solid var(--line);border-radius:40px;padding:5px;width:max-content;max-width:100%}
.ptabs button{background:none;border:0;color:var(--muted);font:700 14px var(--body);padding:10px 20px;border-radius:30px;cursor:pointer}
.ptabs button.active{background:var(--ivory);color:var(--night)}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:860px;margin:30px auto 0}
.plan{background:var(--char);border:1px solid var(--line);border-radius:20px;padding:28px 26px;display:flex;flex-direction:column;gap:14px;min-width:0}
.plan.pop{border-color:rgba(242,217,174,.55);background:linear-gradient(180deg,#2A2420,var(--char))}
.pname{font:700 13px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.price{font:600 46px/1 var(--display);font-variant-numeric:lining-nums}
.price small{font:500 14px var(--body);color:var(--muted)}
.storage{display:flex;justify-content:space-between;align-items:baseline;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.storage b{font:800 18px var(--body)}
.storage span{color:var(--muted);font-size:13px}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--ivory);font-size:15px}
.plan li::before{content:"\2713";color:var(--wheat);margin-right:10px}
.plan li strong{color:var(--wheat);font-weight:700}
.plan .btn{align-self:stretch;justify-content:center;margin-top:auto}
.pnote{text-align:center;color:var(--muted);font-size:12.5px;margin:20px auto 0;max-width:600px}
.guarantee{display:flex;gap:14px;align-items:center;max-width:560px;margin:26px auto 0;background:var(--char);border:1px solid var(--line);border-radius:16px;padding:16px 20px}
.guarantee svg{flex:none}
.guarantee strong{display:block;font:700 15px var(--body)}
.guarantee span{color:var(--muted);font-size:14px}
@media (max-width:860px){.plans{grid-template-columns:1fr}}

/* ---------- reviews: author line ---------- */
.rev .by{display:block;margin-top:14px;color:var(--ivory);font:700 13px var(--body)}
.rev .by small{display:block;color:var(--muted);font-weight:500;margin-top:2px}
.rev p strong{color:var(--wheat);font-weight:600}

/* ---------- footer extras ---------- */
.site-foot .brand img{width:40px}
.site-foot .socials a{color:var(--muted)}
.site-foot .legal a{display:inline;padding:0}
.feat{scroll-margin-top:80px}
@media (max-width:480px){
  .navr{gap:10px}
  .navr .btn{padding:10px 12px;font-size:13px;white-space:nowrap}
  .brand{font-size:13px;letter-spacing:.1em;gap:8px}
  .brand img{width:32px}
  .burger{width:40px;height:40px}
  .burger span{left:12px;right:12px}
  .burger span:first-child{top:15px}
  .burger span:last-child{top:23px}
  .burger[aria-expanded="true"] span{top:19px}
}

/* ---------- weddings page ---------- */
.hero-photo{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/5;max-height:600px;box-shadow:0 30px 80px rgba(0,0,0,.55);min-width:0}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:40px}
.day{border-radius:16px;overflow:hidden;position:relative;aspect-ratio:3/4;background:#1a1716;min-width:0}
.day img{width:100%;height:100%;object-fit:cover}
.day::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.75))}
.day div{position:absolute;left:14px;bottom:12px;z-index:1}
.day b{display:block;font:600 24px var(--display)}
.day span{font:600 12px var(--body);color:var(--wheat)}
.steps4{grid-template-columns:repeat(4,minmax(0,1fr))}
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:36px}
.path{background:var(--char);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.path b{display:block;font:600 24px var(--display)}
.path span{display:block;color:var(--muted);font-size:15px;margin-top:4px}
.path .stores{margin-top:14px}
.path .store{display:inline-flex;border:1px solid var(--line);border-radius:10px;padding:9px 13px;font:600 13px var(--body);color:var(--ivory);text-decoration:none}
.center-note{text-align:center;margin-top:26px}
.no p a,.step p a,.center-note a,.pnote a{color:var(--wheat)}
.final .cta .ghost{margin-left:6px}
@media (max-width:860px){
  .days{grid-template-columns:repeat(2,minmax(0,1fr))}
  .day:last-child{grid-column:1 / -1;aspect-ratio:16/9}
  .steps4{grid-template-columns:1fr}
  .paths{grid-template-columns:1fr}
  .hero-photo{margin-top:30px}
}

/* ---------- pricing page ---------- */
.page-hero{padding-block:64px 24px;text-align:center}
.page-hero .eyebrow{margin:0}
.page-hero .h-display{margin-inline:auto}
.page-hero .lede{margin-inline:auto}
.pgroup{margin-top:40px}
.plabel{text-align:center;max-width:620px;margin:0 auto}
.plabel b{display:block;font:600 30px var(--display)}
.plabel span{display:block;color:var(--muted);font-size:15px;margin-top:4px}
.pgroup .plans{margin-top:22px}
.cmp-wrap{overflow-x:auto;margin-top:36px;border:1px solid var(--line);border-radius:18px;background:var(--char)}
.cmp{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.cmp th,.cmp td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:center}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{font:700 15px var(--body);color:var(--ivory);vertical-align:bottom}
.cmp thead th small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:2px}
.cmp tbody th{text-align:left;font-weight:600;color:var(--ivory)}
.cmp td{color:var(--muted)}
.cmp td.y{color:var(--wheat);font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- photographers page ---------- */
.feat .vis .wm{position:absolute;right:16px;bottom:14px;font:600 italic 22px var(--display);color:rgba(255,255,255,.78);text-shadow:0 1px 8px rgba(0,0,0,.55);letter-spacing:.02em}
.final .fine a{color:var(--wheat)}

/* ===== Refinement after Rajesh's review, 2 Oct (once.film as the reference) =====
   Calmer: ivory pill buttons instead of red, a quiet header, one call to action
   per screen, and an app-phone showcase instead of the flying cards. */
.btn{background:var(--ivory);color:#141212;border-radius:999px;box-shadow:none;padding:16px 26px;font:700 15px/1 var(--body)}
.btn:hover{background:#fff;transform:translateY(-1px)}
.btn-line{background:transparent;color:var(--ivory);border:1px solid rgba(244,239,231,.3)}
.btn-line:hover{background:rgba(244,239,231,.06);border-color:var(--ivory)}
.navr .btn{background:transparent;color:var(--ivory);border:1px solid rgba(244,239,231,.28);padding:10px 16px;font-size:13.5px}
.navr .btn:hover{background:rgba(244,239,231,.06);border-color:var(--ivory)}
.plan:not(.pop) .btn{background:transparent;color:var(--ivory);border:1px solid var(--line)}
.plan:not(.pop) .btn:hover{border-color:var(--ivory)}
.hero h1.eyebrow{color:var(--muted);font-size:11.5px;letter-spacing:.18em}
.hero .lede{font-size:17px}
.hero .cta{margin-top:28px}

/* menu: Events group */
.drop .menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.sheet .sgroup{border-bottom:1px solid var(--line)}
.sheet .sgroup summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 4px;font:600 18px var(--body);color:var(--ivory)}
.sheet .sgroup summary::-webkit-details-marker{display:none}
.sheet .sgroup summary::after{content:"+";font:400 24px/1 var(--body);color:var(--wheat);transition:transform .2s}
.sheet .sgroup[open] summary::after{transform:rotate(45deg)}
.sheet .sgroup a{border-bottom:0!important;padding:10px 4px 10px 16px!important;font-size:16px!important;color:var(--muted)!important}
.sheet .sgroup a:last-child{padding-bottom:16px!important}
.sheet .sheet-cta{display:flex!important;justify-content:center;margin-top:24px;border-bottom:0!important;color:#141212!important;font-size:16px!important}

/* the demo: a tap link on phones, a QR card with a link on desktop */
.trym{display:none!important}
.demo-link{display:none}
.tryq .trylink{display:inline-block;margin-top:10px;color:var(--wheat);font:700 13px var(--body);text-decoration:none}
.tryq .trylink:hover{text-decoration:underline}

/* hero showcase: one app phone, photos arriving one by one */
.showcase{position:relative;display:flex;justify-content:center;align-items:center;min-width:0;padding-block:10px 20px}
.showcase::before{content:"";position:absolute;width:420px;height:420px;max-width:100%;border-radius:50%;background:radial-gradient(closest-side,rgba(242,217,174,.14),transparent);pointer-events:none}
.showcase .device{width:290px}
.showcase .stats-row{display:flex;justify-content:space-between;padding:0 14px 8px;font:600 9.5px var(--body);color:#8a8a93}
.showcase .stats-row b{display:block;font:800 15px var(--body);color:#16161a;font-variant-numeric:tabular-nums}
.toast{margin:0 14px 8px;display:flex;align-items:center;gap:8px;background:#16161a;color:#fff;border-radius:12px;padding:8px 10px;font:600 10px/1.3 var(--body);min-height:38px;transition:opacity .35s ease,transform .35s ease}
.toast i{width:22px;height:22px;border-radius:6px;flex:none;background-size:cover;background-position:center}
.toast em{display:block;font-style:normal;color:#F2D9AE;font-weight:600}
.toast.out{opacity:0;transform:translateY(-6px)}
.live div{opacity:0;transform:scale(.9);transition:opacity .5s ease,transform .5s ease}
.live div.in{opacity:1;transform:none}
.showcase .cap{position:absolute;bottom:-6px;left:0;right:0;text-align:center;color:var(--muted);font:600 12px var(--body);letter-spacing:.08em}

@media (max-width:860px){
  .navr .btn{display:none}
  .demo-link{display:inline-block;margin-top:16px;color:var(--wheat);font:600 14.5px var(--body);text-decoration:none}
  .showcase{margin-top:34px}
  .showcase .device{width:250px}
}
@media (prefers-reduced-motion: reduce){
  .live div{opacity:1;transform:none;transition:none}
  .toast{transition:none}
}
/* the big headline is the page's h1 now; keywords live in the first sentence below it */
h1.h-display{font-weight:600}
.hero .lede{max-width:34em}
.page-hero .lede{max-width:36em}
/* three ways: two no-app options, then the app */
.ways-key{display:grid;grid-template-columns:2fr 1fr;gap:22px;margin-top:40px;font:700 11px var(--body);letter-spacing:.18em;text-transform:uppercase}
.ways-key span{padding-bottom:10px;border-bottom:1px solid var(--line);color:var(--muted);text-align:center}
.ways-key .k-app{color:var(--wheat);border-color:rgba(242,217,174,.55)}
.ways-key + .ways{margin-top:22px}
@media (max-width:860px){.ways-key{display:none}}

/* the QR card waits until the visitor scrolls past the first screen */
.tryq{opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .4s ease,transform .4s ease}
.tryq.show{opacity:1;transform:none;pointer-events:auto}
/* the QR card sits bottom-left so it never collides with the chat bubble (bottom-right) */
.tryq{right:auto;left:22px}
/* final call to action: "Instantly." sits on the second line, after "in one place." */
.final h2 .ital{display:inline}
/* hero headline: "Every … photo, / in one place. / Instantly." */
.hero .h-display{font-size:clamp(40px,5vw,68px);text-wrap:wrap}
.hero .h-display.long{font-size:clamp(36px,3.9vw,54px)}
/* desktop menu: logo left, links centred, sign in + button right */
nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
nav .navc{display:flex;align-items:center;gap:30px}
nav .navc .ghost{color:var(--muted)}
nav .navr{justify-self:end}
nav .brand{justify-self:start}
@media (max-width:860px){nav .wrap{display:flex}nav .navc{display:none}}