/* Introducing marketing site. Brand: peach, orange, ink; Bricolage Grotesque + Figtree (self-hosted). */
:root{
  --peach:#FFECE6;--peach-2:#FFDCD0;--orange:#FF5A36;--orange-d:#E2421F;--ink:#17142F;--ink-2:#262145;
  --soft:#5A5670;--white:#FFFFFF;--line:rgba(23,20,47,.12);
  --disp:'Bricolage Grotesque','Arial Black',sans-serif;--body:'Figtree','Segoe UI',system-ui,sans-serif;
  --wrap:1180px;--gut:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--peach);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:1;margin:0}
p{margin:0}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:10px;z-index:10}
.skip:focus{left:8px}

/* header */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:20px;max-width:var(--wrap);margin:0 auto;padding:14px var(--gut);background:color-mix(in srgb,var(--peach) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:10px;font:800 21px var(--disp);letter-spacing:-.02em;text-decoration:none}
.logo{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--orange);color:#fff;font:800 19px var(--disp);letter-spacing:-.04em}
.logo-sm{width:28px;height:28px;border-radius:9px;font-size:14px}
.top nav{display:flex;gap:22px;margin-left:auto;font-weight:600;font-size:15px}
.top nav a{text-decoration:none;color:var(--soft)}
.top nav a:hover{color:var(--ink)}
@media (max-width:760px){.top nav{display:none}.top .btn-sm{margin-left:auto}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:16px;background:var(--orange);color:#fff;font:700 16px var(--body);text-decoration:none;transition:transform .2s cubic-bezier(.2,.9,.25,1.25),background .2s}
.btn:hover{background:var(--orange-d)}
.btn:active{transform:scale(.96)}
.btn-sm{min-height:40px;padding:0 16px;border-radius:12px;font-size:14px}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.store{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:8px 22px 8px 16px;border-radius:16px;background:var(--ink);color:#fff;text-decoration:none;transition:transform .2s cubic-bezier(.2,.9,.25,1.25)}
.store:active{transform:scale(.96)}
.store svg{width:26px;height:26px}
.store span{display:flex;flex-direction:column;font:700 17px/1.15 var(--body)}
.store small{font-weight:500;font-size:12px;opacity:.75}
.store-light{background:#fff;color:var(--ink)}

/* hero: the three live pages are the point */
.hero{max-width:var(--wrap);margin:0 auto;padding:clamp(28px,6vw,72px) var(--gut) clamp(56px,8vw,110px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.hero h1{font-size:clamp(46px,7.4vw,94px);letter-spacing:-.035em;line-height:.93;max-width:11ch;text-wrap:balance}
.lead{margin-top:26px;font-size:clamp(18px,1.9vw,21px);line-height:1.5;color:var(--soft);max-width:33em}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.fine{margin-top:16px;font-size:14px;color:var(--soft)}
.fan{position:relative;height:clamp(460px,52vw,620px)}
.fan .phone{position:absolute;top:50%;left:50%;width:clamp(190px,21vw,260px)}
.fan .p1{transform:translate(-118%,-46%) rotate(-7deg)}
.fan .p2{transform:translate(-50%,-54%);z-index:2}
.fan .p3{transform:translate(18%,-46%) rotate(7deg)}
@media (prefers-reduced-motion:no-preference){
  .fan .phone{animation:rise .9s cubic-bezier(.2,.9,.25,1.15) both}
  .fan .p1{animation-delay:.15s}.fan .p3{animation-delay:.3s}
  @keyframes rise{from{opacity:0;translate:0 60px}}
}
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .fan{height:auto;display:flex;justify-content:center;gap:12px;margin:8px calc(var(--gut)*-1) 0;padding:20px 0 40px;overflow:hidden}
  .fan .phone{position:relative;top:auto;left:auto;width:min(42vw,220px);flex:none}
  .fan .p1{transform:rotate(-5deg) translateY(18px)}
  .fan .p2{transform:none}
  .fan .p3{transform:rotate(5deg) translateY(18px)}
}

/* phone frame with a live page scaled to fit (site.js sets --s) */
.phone{border-radius:clamp(26px,3.2vw,40px);padding:clamp(7px,.8vw,10px);background:var(--ink);box-shadow:0 30px 60px -20px color-mix(in srgb,var(--glow,#000) 55%,transparent),0 2px 0 rgba(255,255,255,.08) inset}
.scr{position:relative;aspect-ratio:390/844;border-radius:clamp(20px,2.5vw,31px);overflow:hidden;background:#fff}
.scr iframe{position:absolute;top:0;left:0;width:390px;height:844px;border:0;transform:scale(var(--s,.6));transform-origin:0 0;pointer-events:auto}
.fan .scr iframe{pointer-events:none}

/* how it works */
.how{max-width:var(--wrap);margin:0 auto;padding:clamp(56px,8vw,110px) var(--gut)}
.how h2,.pricing h2,.faq h2{font-size:clamp(36px,5vw,60px);max-width:16ch}
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px)}
.steps li{position:relative;padding-top:22px;border-top:3px solid var(--ink)}
.steps .n{display:block;font:800 clamp(64px,7vw,96px)/.8 var(--disp);color:var(--orange);letter-spacing:-.05em;margin-bottom:18px}
.steps h3{font-size:clamp(23px,2.3vw,28px);letter-spacing:-.02em;margin-bottom:10px}
.steps p{color:var(--soft);max-width:30em}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* gallery: dark band so the pages carry the color */
.gallery{background:var(--ink);color:#fff;padding:clamp(64px,9vw,120px) var(--gut)}
.gallery-head{max-width:calc(var(--wrap) - 2*var(--gut));margin:0 auto}
.gallery h2{font-size:clamp(36px,5.4vw,68px);max-width:14ch}
.gallery-head p{margin-top:18px;color:rgba(255,255,255,.72);max-width:36em;font-size:18px}
.exs{list-style:none;margin:56px auto 0;padding:0;max-width:calc(var(--wrap) - 2*var(--gut));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.ex .phone{background:#2B2650}
.ex-t{margin-top:22px}
.ex h3{font-size:24px;letter-spacing:-.02em}
.ex-who{margin-top:4px;color:rgba(255,255,255,.66);font-size:15px}
.ex-concept{margin-top:12px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.86)}
.ex-concept b{color:#fff}
.ex-open{display:inline-block;margin-top:14px;font-weight:700;font-size:15px;color:#FFB59F;text-underline-offset:4px}
.ex-open:hover{color:#fff}
@media (max-width:1000px){.exs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .exs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-inline:calc(var(--gut)*-1);padding:0 var(--gut) 8px;scrollbar-width:none}
  .ex{flex:0 0 72%;scroll-snap-align:center}
}

/* pricing */
.pricing{max-width:var(--wrap);margin:0 auto;padding:clamp(64px,9vw,120px) var(--gut)}
.pricing .sub{margin-top:16px;color:var(--soft);font-size:18px;max-width:34em}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px}
.plan{background:var(--white);border-radius:24px;padding:28px;box-shadow:0 1px 0 var(--line)}
.plan h3{font-size:22px;letter-spacing:-.02em}
.plan .price{font:800 48px/1 var(--disp);letter-spacing:-.04em;margin:18px 0 20px}
.plan .price small{font:600 16px var(--body);letter-spacing:0;color:var(--soft)}
.plan ul{margin:0;padding:0;list-style:none}
.plan li{padding:10px 0 10px 28px;border-top:1px solid var(--line);position:relative;font-size:15.5px}
.plan li::before{content:"";position:absolute;left:2px;top:17px;width:12px;height:7px;border-left:2.5px solid var(--orange);border-bottom:2.5px solid var(--orange);transform:rotate(-45deg)}
.plan-main{background:var(--orange);color:#fff;transform:rotate(-1.5deg)}
.plan-main .price small{color:rgba(255,255,255,.85)}
.plan-main li{border-color:rgba(255,255,255,.3)}
.plan-main li::before{border-color:#fff}
.withus{display:flex;align-items:center;gap:24px;justify-content:space-between;margin-top:16px;background:var(--ink);color:#fff;border-radius:24px;padding:28px 32px}
.withus h3{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em}
.withus p{margin-top:8px;color:rgba(255,255,255,.75);max-width:38em}
.withus .price{font:800 48px/1 var(--disp);letter-spacing:-.04em;color:#FFB59F;margin:0}
@media (max-width:860px){.plans{grid-template-columns:1fr}.plan-main{transform:none}.withus{flex-direction:column;align-items:flex-start}}

/* faq */
.faq{max-width:820px;margin:0 auto;padding:0 var(--gut) clamp(64px,9vw,120px)}
.faq h2{margin-bottom:28px}
details{border-top:2px solid var(--ink)}
details:last-of-type{border-bottom:2px solid var(--ink)}
summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font:700 19px/1.35 var(--body);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-10px;border-right:3px solid var(--orange);border-bottom:3px solid var(--orange);transform:rotate(45deg);transition:transform .25s}
details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
details p{padding:0 0 22px;color:var(--soft);max-width:36em}
details a{color:var(--orange-d)}

/* closing */
.get{background:var(--orange);color:#fff;text-align:center;padding:clamp(72px,10vw,130px) var(--gut)}
.get h2{font-size:clamp(42px,7vw,88px);letter-spacing:-.045em;max-width:12ch;margin:0 auto}
.get p{margin:18px auto 30px;font-size:19px;max-width:30em;color:rgba(255,255,255,.9)}
.foot{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;max-width:var(--wrap);margin:0 auto;padding:28px var(--gut) 40px;font-size:14px;color:var(--soft)}
.foot p{display:flex;align-items:center;gap:10px}
.foot nav{display:flex;flex-wrap:wrap;gap:18px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline}

/* text pages (privacy, support) */
.doc{max-width:720px;margin:0 auto;padding:clamp(24px,5vw,56px) var(--gut) 72px}
.doc h1{font-size:clamp(40px,7vw,64px);letter-spacing:-.04em}
.doc .meta{margin-top:10px;color:var(--soft)}
.doc h2{font-size:clamp(24px,3vw,30px);letter-spacing:-.02em;margin:40px 0 12px}
.doc p,.doc li{max-width:38em}
.doc p+p{margin-top:12px}
.doc ul{padding-left:20px}
.doc li{margin:8px 0}
.doc a{color:var(--orange-d)}
.doc .card{background:var(--white);border-radius:20px;padding:24px 26px;margin-top:20px}
.doc .card h2{margin-top:0}
/* report form */
.report{display:grid;gap:10px;padding-bottom:24px}
.report label,.report legend{font-weight:700;font-size:15.5px}
.report small{font-weight:400;color:var(--soft)}
.report input[type=text],.report input:not([type]),.report input[type=email],.report textarea{font:inherit;width:100%;border:2px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff;color:var(--ink)}
.report input:focus,.report textarea:focus{outline:none;border-color:var(--ink)}
.report .addr{display:flex;align-items:center;gap:6px}
.report .addr span{color:var(--soft);white-space:nowrap}
.report fieldset{border:0;padding:0;margin:8px 0;display:grid;gap:8px}
.report .opt{font-weight:500;display:flex;gap:10px;align-items:center;padding:10px 12px;border:2px solid var(--line);border-radius:14px;cursor:pointer}
.report .opt:has(input:checked){border-color:var(--orange);background:var(--peach)}
.report .msg{min-height:22px;color:var(--orange-d);font-weight:600;margin:0}
.report .btn{justify-self:start;border:0;cursor:pointer}
.report .btn:disabled{opacity:.6}