/* Palette Pilot — site styles. Brand: cream, slate, coral, peach, mauve, sage. Font: Poppins. */
:root{
  --cream:#FBF4EC; --paper:#FFFFFF; --sand:#F3E7D8; --line:#EADFD1; --stone:#EFE6DA;
  --slate:#2E4045; --muted:#5B6B6E; --mist:#C9D2D2;
  --coral:#EE8B74; --coral-ink:#B5503A; --peach:#F4BC88; --mauve:#BC98B6; --sage:#8DBFA8; --teal:#6FA893; --aqua:#A9D3D0;
  --radius:24px; --wrap:1200px;
  --step--1:clamp(.84rem,.82rem + .1vw,.9rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.08rem);
  --step-1:clamp(1.2rem,1.1rem + .4vw,1.45rem);
  --step-2:clamp(1.6rem,1.35rem + 1vw,2.25rem);
  --step-3:clamp(2.1rem,1.6rem + 2.2vw,3.75rem);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--cream);color:var(--slate);font-family:Poppins,"Helvetica Neue",Arial,system-ui,sans-serif;font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--slate);text-underline-offset:3px}
a:hover{color:var(--coral-ink)}
:focus-visible{outline:3px solid var(--coral-ink);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-weight:500;letter-spacing:-.02em;line-height:1.15;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.eyebrow{font-size:var(--step--1);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-ink)}
.lede{color:var(--muted);font-size:var(--step-1);line-height:1.6;max-width:36ch}
.muted{color:var(--muted)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:var(--paper);padding:10px 16px;z-index:10}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 28px;border-radius:999px;font:inherit;font-weight:500;text-decoration:none;border:1.5px solid var(--slate);cursor:pointer;text-align:center}
.btn-solid{background:var(--slate);color:var(--cream)}
.btn-solid:hover{background:#22323a;color:var(--cream)}
.btn-line{background:transparent;color:var(--slate)}
.btn-line:hover{background:var(--slate);color:var(--cream)}
.btn-coral{background:var(--coral);border-color:var(--coral);color:var(--slate);font-weight:600}
.btn-coral:hover{background:#f39d88;color:var(--slate)}
.btn-cream{background:var(--cream);border-color:var(--cream);color:var(--slate)}
.btn-cream:hover{background:var(--paper);color:var(--slate)}

/* Header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--cream) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{width:48px;height:48px;flex-shrink:0}
.brand-name{display:flex;flex-direction:column;gap:1px}
.brand-name b{font-size:1.45rem;font-weight:600;line-height:1;letter-spacing:-.01em}
.brand-name small{font-size:.72rem;color:var(--muted)}
.nav{display:flex;align-items:center;gap:32px}
.nav a{text-decoration:none;font-size:.97rem}
.nav .btn{font-size:.93rem;padding:10px 22px;min-height:44px}
.menu-btn{display:none;width:44px;height:44px;border:0;background:transparent;padding:0;align-items:center;justify-content:center;cursor:pointer;color:var(--slate)}
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--cream);border-bottom:1px solid var(--line);padding:8px clamp(16px,4vw,40px) 20px}
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:14px;border-bottom:1.5px solid var(--slate)}
}

/* Hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:center;padding-block:clamp(40px,7vw,96px)}
.hero-copy{display:flex;flex-direction:column;gap:26px}
.swatch-dots{display:flex;align-items:center;gap:8px}
.swatch-dots i{width:10px;height:10px;border-radius:50%;display:block}
.hero h1{font-size:var(--step-3)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.text-link{font-weight:500;padding:12px 4px}
.hero-art{position:relative;padding:0 0 60px 40px}
.hero-art .photo{width:100%;height:auto;aspect-ratio:9/10;object-fit:cover;object-position:30% 50%;border-radius:28px}
.hero-dial{position:absolute;left:0;bottom:0;width:clamp(120px,15vw,210px);aspect-ratio:1;border-radius:50%;background:var(--cream);box-shadow:0 20px 44px rgba(46,64,69,.18);display:grid;place-items:center}
.hero-dial svg{width:82%;height:82%}
.chip{position:absolute;right:-8px;top:32px;background:var(--paper);border-radius:16px;padding:12px 16px 12px 12px;display:flex;gap:12px;align-items:center;box-shadow:0 14px 30px rgba(46,64,69,.14);max-width:260px}
.chip i{width:40px;height:40px;border-radius:10px;background:var(--coral);flex-shrink:0}
.chip span{display:flex;flex-direction:column;line-height:1.35;font-size:.92rem;font-weight:500}
.chip small{color:var(--muted);font-weight:400;font-size:.8rem}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .hero-art{order:-1;padding:0 0 44px 20px}
  .hero-art .photo{aspect-ratio:4/3}
  .chip{right:8px;top:14px}
}

/* Sections */
.section{padding-block:clamp(56px,9vw,104px)}
.section-white{background:var(--paper)}
.section-sand{background:var(--sand)}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 40px;margin-bottom:clamp(32px,5vw,56px)}
.section-head h2{font-size:var(--step-2);max-width:20ch}
.section-head p{color:var(--muted);max-width:42ch}
.center{text-align:center;justify-content:center;flex-direction:column;align-items:center}
.center h2{max-width:none}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.step{background:var(--cream);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;gap:14px}
.step svg{width:64px;height:64px}
.step h3{font-size:var(--step-1)}
.step p{color:var(--muted)}
@media (max-width:860px){.steps{grid-template-columns:1fr}}

/* Tiers */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.tier{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;gap:20px;position:relative}
.tier svg{width:84px;height:84px}
.tier h3{font-size:var(--step-1)}
.tier .for{color:var(--muted);margin-top:6px}
.price{font-size:2.3rem;font-weight:500;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.price small{font-size:1rem;font-weight:400;margin-right:4px}
.includes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex-grow:1;font-size:.95rem}
.includes li{display:flex;gap:10px;align-items:flex-start}
.includes li::before{content:"";width:18px;height:18px;flex-shrink:0;margin-top:3px;border-radius:50%;background:var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%232E4045' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.tier-feature{background:var(--slate);border-color:var(--slate);color:var(--cream)}
.tier-feature .for{color:var(--mist)}
.tier-feature .dial-disc{width:84px;height:84px;border-radius:50%;background:var(--cream);display:grid;place-items:center}
.tier-feature .dial-disc svg{width:72px;height:72px}
.tier-feature .includes li::before{background-color:var(--coral)}
.badge{position:absolute;top:24px;right:24px;background:var(--coral);color:var(--slate);font-size:.72rem;font-weight:600;letter-spacing:.08em;padding:6px 12px;border-radius:999px}
.soon{font-size:.88rem;line-height:1.5;border-radius:12px;padding:10px 12px;background:var(--stone);color:var(--slate)}
.tier-feature .soon{background:#3d5359;color:var(--cream)}
.fine{margin-top:28px;text-align:center;color:var(--muted);font-size:.9rem}
@media (max-width:960px){.tiers{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}

/* Guides */
.guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
.guide{background:var(--cream);border-radius:20px;padding:18px;display:flex;gap:18px;align-items:center}
.guide .disc{width:72px;height:72px;border-radius:50%;flex-shrink:0;display:grid;place-items:center}
.guide .disc i{width:40px;height:40px;border-radius:50%;border:5px solid var(--slate);background:var(--cream)}
.guide div{display:flex;flex-direction:column;gap:2px;min-width:0}
.guide b{font-weight:500;font-size:1.05rem;line-height:1.3}
.guide small{color:var(--muted);font-size:.9rem}
.guide .buy{margin-left:auto;flex-shrink:0;font-size:.88rem;padding:8px 16px;min-height:40px}
.bundle{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;background:var(--paper);border-radius:20px;padding:22px 26px}
.bundle p b{font-weight:600}
@media (max-width:960px){.guides{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.guides{grid-template-columns:1fr}}

/* About */
.about .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,7vw,96px);align-items:center}
.portrait{width:100%;height:auto;max-width:460px;aspect-ratio:1;border-radius:50%;border:10px solid var(--slate);object-fit:cover;object-position:50% 30%}
.about-copy{display:flex;flex-direction:column;gap:22px}
.about-copy blockquote{margin:0;font-size:var(--step-2);font-weight:500;letter-spacing:-.02em;line-height:1.22;text-wrap:balance}
.about-copy p{color:var(--muted);max-width:60ch}
.sig b{display:block;font-weight:500;font-size:1.2rem}
@media (max-width:860px){.about .wrap{grid-template-columns:1fr}.portrait{max-width:300px}}

/* CTA */
.cta{background:var(--slate);color:var(--cream);border-radius:32px;padding:clamp(36px,6vw,72px) clamp(24px,6vw,80px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px}
.cta h2{font-size:var(--step-2);color:var(--cream)}
.cta p{color:var(--mist);margin-top:10px}
.cta a.email{color:var(--cream)}

/* Footer */
.site-footer{padding-block:clamp(56px,8vw,88px) 40px}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.footer-cols{display:flex;flex-wrap:wrap;gap:24px 72px}
.footer-cols div{display:flex;flex-direction:column;gap:10px}
.footer-cols span{font-weight:500}
.footer-bottom{margin-top:48px;border-top:1px solid var(--line);padding-top:22px;font-size:.88rem;color:var(--muted);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}

/* Policy pages */
.policy{padding-block:clamp(40px,7vw,80px)}
.policy .wrap{max-width:780px}
.policy h1{font-size:var(--step-3);margin:10px 0 18px}
.policy .updated{color:var(--muted);font-size:.92rem;margin-bottom:36px}
.policy h2{font-size:var(--step-1);margin:36px 0 10px}
.policy p,.policy li{color:#3b4d52;max-width:68ch}
.policy p+p{margin-top:14px}
.policy ul,.policy ol{padding-left:1.3em;display:flex;flex-direction:column;gap:6px;margin:10px 0 0}
.policy-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.policy-nav a{font-size:.92rem;padding:8px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;background:var(--paper)}
.policy-nav a[aria-current]{background:var(--slate);color:var(--cream);border-color:var(--slate)}