/* Home page and its simple pages (Pile design). Loaded after site.css on: home, who-its-for, questions, prices, iphone.
   Colors are the Fractal variables used in Figma (ZungiDill Website Redesign, page "Redesign options 2").
   3D objects are built in Figma from shapes and exported; icons are Fractal library icons. */
@font-face{font-family:"Source Serif 4";src:url(../fonts/SourceSerif4-700-italic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}
.p-home{
  --f-green:#2F5D50;--f-deep:#173F34;--f-ink:#1F2A24;--f-off:#F6F4EE;--f-gold:#D9A441;--f-grey30:#4B534D;--f-grey50:#626A63;--f-grey90:#ECE9E1;
  --f-r:32px;--f-pad:80px;
  color:var(--f-ink);background:#fff;
}
.p-home section{padding:0;border:0}
.p-home h1,.p-home h2,.p-home h3{color:var(--f-ink)}
.h-wrap{max-width:1440px;margin:0 auto;padding:0 var(--f-pad)}
.h-big{font-size:clamp(52px,8.9vw,128px);line-height:.9;letter-spacing:-.035em}
.h-lede{font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--f-grey30)}
.p-home main a{color:var(--f-green);font-weight:600}
.p-home main .btn{color:#fff;font-weight:600}

/* header */
.p-home header{background:rgba(255,255,255,.94);box-shadow:none}
.p-home .bar{height:88px}
.p-home nav a{color:var(--f-ink)}
.p-home .wrap.bar{max-width:1440px;padding:0 var(--f-pad)}

/* buttons: Fractal radius S, small lift on hover */
.p-home .btn{border-radius:8px;min-height:56px;padding:0 30px;background:var(--f-green);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.p-home .btn:hover{background:#264D42;transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(23,63,52,.55)}
.p-home main .btn.quiet{background:var(--f-off);color:var(--f-ink)}
.p-home .btn.quiet:hover{background:var(--f-grey90)}
.p-home nav .navbtn a{border-radius:8px;background:var(--f-green);color:#fff;transition:transform .2s ease,box-shadow .2s ease}
.p-home nav .navbtn a:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(23,63,52,.55)}
.h-badge{display:block;border-radius:8px;transition:transform .2s ease}
.h-badge:hover{transform:translateY(-2px)}
.h-badge img{height:56px;width:auto}

/* hero: the card with the gold check, headline, one line, two buttons, one quiet row */
.h-hero{background:var(--f-off);padding:16px 0 112px!important;text-align:center}
.h-float{width:clamp(280px,40vw,580px);margin:0 auto 24px}
.h-herocard{width:100%;height:auto;animation:h-float 6s ease-in-out infinite}
@keyframes h-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.h-hero h1{font-size:clamp(46px,8.1vw,116px);line-height:.92;letter-spacing:-.035em;max-width:13em;margin:0 auto}
.p-home h1 em{font-style:italic;color:var(--f-green)}
.h-hero .h-lede{margin:28px auto 0;max-width:30em}
.h-acts{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;margin-top:36px}
.h-facts{list-style:none;margin:72px auto 0;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:left}
.h-facts li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--f-grey30)}
.h-facts svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--f-green)}

/* section head: huge title left, short text right */
.h-head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
.h-head>p,.h-head>div>p{max-width:470px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--f-grey30)}
.h-head>div>p{margin-top:24px}
@media (min-width:1200px){.h-head>h2{white-space:nowrap}}

/* how it works: alternating rows, step 3 on a full-width green band */
.h-how{padding:128px 0 112px!important}
.h-how>.h-head{margin-bottom:48px}
.h-rows{list-style:none;margin:0;padding:0}
.h-row{padding:28px 0}
.h-row.h-band{background:var(--f-green);padding:78px 0;margin:28px 0}
.h-rowin{display:grid;grid-template-columns:640fr 520fr;gap:96px;align-items:center}
.h-row:nth-child(even) .h-vis{order:2}
.h-vis{position:relative;aspect-ratio:640/440;background:var(--f-off);border-radius:var(--f-r)}
.h-band .h-vis{background:var(--f-deep)}
.h-num{position:absolute;left:6.5%;top:7%;width:19%;height:auto}
.h-obj{position:absolute;right:6%;top:50%;width:56%;height:auto;translate:0 -50%}
.h-row:nth-child(2) .h-obj{width:58%}
.h-txt h3{font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.03em}
.h-txt p{margin-top:22px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--f-grey30);max-width:26em}
.h-band .h-txt h3,.h-band .h-txt p{color:#fff}
.h-after{text-align:center}
.h-timing{margin:56px auto 0;max-width:860px;font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:var(--f-ink)}
.h-who{margin-top:20px;font-size:16px}

/* step objects and numbers rise in once when they scroll into view (site.js adds .in) */
.js-rv .rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js-rv .h-obj.rv{transition-delay:.12s}
.js-rv .rv.in{opacity:1;transform:none}

/* prices */
.h-prices{background:var(--f-off);padding:128px 0!important}
.h-plans{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;margin-top:56px}
.h-plan{background:#fff;border-radius:var(--f-r);padding:56px;display:flex;flex-direction:column}
.h-plan h3{font-size:clamp(24px,2vw,28px)}
.h-opt{margin-top:8px;font-size:15px;color:var(--f-grey30)}
.h-amt{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-top:18px}
.h-amt b{font:700 clamp(56px,5vw,72px)/1 var(--serif);letter-spacing:-.02em;color:var(--f-ink)}
.h-amt>span{font-size:17px;color:var(--f-grey30)}
.h-then{margin-top:14px;font-size:17px;line-height:1.55;color:var(--f-grey30)}
.h-then b{color:var(--f-ink)}
.h-simple .h-then{margin-bottom:32px}
.h-plan ul{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:12px}
.h-plan li{display:flex;gap:12px;font-size:17px;color:var(--f-ink)}
.h-plan li svg{width:24px;height:24px;flex:none;color:var(--f-green)}
.h-plan .btn{margin-top:auto;align-self:flex-start}
.h-terms{margin-top:14px;font-size:14px;color:var(--f-grey50)}
.h-seeprices{margin-top:28px;font-size:16px}
.h-fine{margin-top:32px;font-size:14px;color:var(--f-grey30);max-width:900px}

/* contact */
.h-contact{padding:120px 0!important}
.h-cbtns{display:flex;flex-direction:column;gap:12px;align-items:flex-end;flex:none}
.h-head .h-cbtns .h-soon{margin-top:8px;font-size:14px;color:var(--f-grey50);max-width:none}

/* simple pages: who it's for, questions, prices, iPhone */
.h-subpage{padding:96px 0 136px!important}
.h-subpage h1.h-big{font-size:clamp(48px,7.4vw,104px);line-height:.95}
.h-sublede{margin-top:24px;max-width:640px;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:var(--f-grey30)}
.h-sublede b{color:var(--f-ink)}
.h-open{display:grid;grid-template-columns:repeat(2,1fr);gap:64px 80px;margin-top:72px;max-width:1120px}
.h-open h3{font-size:clamp(26px,2.4vw,34px);line-height:1.12;letter-spacing:-.015em}
.h-open p{margin-top:14px;color:var(--f-grey30);font-size:18px;line-height:1.55}
.h-subpage .h-plan{background:var(--f-off)}
.h-qlinks{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:12px 28px}
.h-qpage{margin-top:64px;max-width:860px;display:grid;gap:8px}
.h-q summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;min-height:48px;font:600 20px/1.35 var(--sans);color:var(--f-ink)}
.h-q summary::-webkit-details-marker{display:none}
.h-q summary svg{width:26px;height:26px;flex:none;color:var(--f-green);transition:transform .25s ease}
.h-q[open] summary svg{transform:rotate(45deg)}
.h-q>div{padding:0 0 22px;color:var(--f-grey30);max-width:680px;font-size:17px}
.h-split{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center}
.h-iphonepage h1.h-big{font-size:clamp(44px,5.6vw,80px)}
.h-iphonepage .h-acts{justify-content:flex-start}
.p-home .notify{border-radius:var(--f-r);padding:36px;background:var(--f-off);box-shadow:none}
.p-home .nrow input{border-radius:8px}
.p-home .nbtn{border-radius:8px;background:var(--f-green);transition:transform .2s ease}
.p-home .nbtn:hover{transform:translateY(-2px)}

/* footer: deep ink green */
.p-home footer{background:var(--f-ink);color:rgba(255,255,255,.82);padding:88px 0 48px}
.p-home footer .wrap{max-width:1440px;padding:0 var(--f-pad)}
.p-home footer h4{color:var(--f-gold)}
.p-home footer a,.p-home footer .brand span{color:#fff}
.p-home .disc{color:rgba(255,255,255,.7)}

/* tablet */
@media (max-width:1100px){
  .p-home{--f-pad:40px;--f-r:28px}
  .h-rowin{gap:48px}
  .h-split{gap:48px}
  .h-plan{padding:44px}
  .h-facts{gap:28px}
}
@media (max-width:900px){
  .h-split{grid-template-columns:1fr}
  .h-rowin{grid-template-columns:1fr;gap:28px}
  .h-row:nth-child(even) .h-vis{order:0}
  .h-row{padding:20px 0}
  .h-row.h-band{padding:56px 0;margin:20px 0}
  .h-head{flex-direction:column;align-items:flex-start;gap:20px}
  .h-cbtns{align-items:flex-start}
  .h-hero{padding-bottom:96px!important}
  .h-how,.h-prices,.h-contact{padding-top:96px!important;padding-bottom:96px!important}
  .h-facts{grid-template-columns:1fr;max-width:460px;gap:16px}
  .h-open{grid-template-columns:1fr;gap:48px}
}
@media (max-width:760px){
  .h-plans{grid-template-columns:1fr}
}
/* phone */
@media (max-width:640px){
  .p-home{--f-pad:16px;--f-r:24px}
  .p-home .bar{height:64px}
  .h-hero{padding:8px 0 64px!important}
  .h-hero h1{font-size:clamp(40px,11.8vw,56px);line-height:.98}
  .h-acts{flex-direction:column;align-items:stretch}
  .h-acts .btn{width:100%}
  .h-badge img{margin:0 auto}
  .h-facts{margin-top:48px}
  .h-big{font-size:clamp(46px,15vw,64px);line-height:.95}
  .h-how,.h-prices,.h-contact{padding-top:72px!important;padding-bottom:72px!important}
  .h-how{padding-bottom:64px!important}
  .h-row{padding:14px 0}
  .h-row.h-band{padding:40px 0;margin:14px 0}
  .h-txt h3{font-size:36px}
  .h-plans{margin-top:36px}
  .h-plan{padding:32px 24px}
  .h-plan .btn{align-self:stretch}
  .h-cbtns{flex-direction:column;align-items:stretch;width:100%}
  .h-cbtns .btn{width:100%}
  .h-subpage{padding:56px 0 88px!important}
  .h-subpage h1.h-big{font-size:clamp(44px,13vw,56px)}
  .h-open{margin-top:48px;gap:40px}
  .h-q summary{font-size:17px}
  .p-home .notify{padding:24px 20px}
  .p-home .nrow input{flex:none;width:100%;height:52px}
  .p-home footer{padding:64px 0 120px}
}

/* reduce motion: no float, no rise, no lift */
@media (prefers-reduced-motion:reduce){
  .h-herocard{animation:none}
  .js-rv .rv{opacity:1;transform:none;transition:none}
  .p-home .btn,.p-home .btn:hover,.h-badge:hover,.p-home .nbtn:hover,.p-home nav .navbtn a:hover{transition:none;transform:none}
  .h-q summary svg{transition:none}
}

/* Inner pages built with this stylesheet (Questions, Prices, Who it's for, iPhone) use the same page header as
   Support and Learn (see theme.css): same title size, top spacing, gaps, left edge and 760px text column. */
.h-subpage{padding:56px 0 88px!important}
.h-subpage>.h-wrap{max-width:1160px;padding:0 32px}
.p-home .h-subpage h1.h-big,.p-home .h-iphonepage h1.h-big{font-size:clamp(38px,4.8vw,54px);line-height:1.08;font-weight:700;letter-spacing:-.02em;max-width:760px}
.h-subpage .h-sublede{margin-top:16px;max-width:760px;font-size:20px;line-height:1.55}
.h-subpage .h-qlinks{margin-top:32px}
.h-subpage .h-qpage{margin-top:32px}
.h-subpage .h-open{margin-top:32px}
.h-subpage .h-plans{margin-top:32px}
.h-iphonepage .h-split{align-items:start}
@media (max-width:640px){
  .h-subpage>.h-wrap{padding:0 16px}
  .h-subpage .h-sublede{font-size:18px}
}