/* App berry, with warm and cool accents for the public website. */
:root { --peach-soft:#FFE2CC; --lilac-soft:#EDE4F7; --mint-soft:#E2EFE8; }
.foot { background:var(--brand-deep); color:var(--card); border:0; }
.foot__links a,.foot__legal { color:#F1DCE5; }
.foot__links a:hover { color:white; }
.cta { background:var(--peach-soft); }
.ideas-page .page-hero { background:var(--peach-soft); }
.safety-page .page-hero { background:var(--lilac-soft); }
.home-hero { position:relative; isolation:isolate; overflow:hidden; margin-top:112px; max-width:1144px; width:calc(100% - 48px); padding:65px 28px 42px; border-radius:32px; background:var(--brand-deep); color:var(--card); }
.home-hero::before,.home-hero::after { content:""; position:absolute; z-index:-1; width:310px; height:310px; border:1px solid #FFFFFF25; border-radius:50%; pointer-events:none; }
.home-hero::before { left:-210px; top:65px; }
.home-hero::after { right:-205px; bottom:-100px; width:400px; height:400px; }
.home-hero h1 { font-size:clamp(54px,6vw,82px); }
.home-hero__detail { color:#F5DFE9; max-width:51ch; }
.home-hero .primary-link { background:var(--peach-soft); color:#57122F; }
.home-hero .primary-link:hover { background:#FFF0E3; }
.home-hero .secondary-link { border-color:#DFA9C0; color:var(--card); }
.home-hero .secondary-link:hover { background:#FFFFFF15; }
.home-hero :focus-visible { outline-color:var(--peach-soft); }
.plan-trail { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 26px; list-style:none; padding:0; margin:36px 0 0; color:#F5DFE9; font-size:13px; }
.plan-trail li { display:flex; align-items:center; gap:10px; }
.plan-trail li::before { content:""; width:7px; height:7px; background:var(--peach-soft); border-radius:50%; }
.site-paths { border:0; padding-block:44px 48px; gap:30px; }
.path-icon { background:var(--brand-soft); }
.site-paths>a:nth-child(2) .path-icon { background:var(--peach-soft); }
.site-paths>a:nth-child(3) .path-icon { background:var(--mint-soft); color:#246049; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:28px; }
.section-heading h2,.how-faq>h2 { font-size:clamp(29px,3.2vw,40px); letter-spacing:-.04em; line-height:1.18; }
.section-heading p { color:var(--muted); margin-top:12px; }
.section-heading>a,.text-link { color:var(--brand-deep); font-size:14px; font-weight:600; text-underline-offset:5px; }
.section-heading>a { flex-shrink:0; }
.date-preview { padding-block:24px 76px; }
.date-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.date-photo { text-decoration:none; }
.photo-frame { overflow:hidden; border-radius:18px; background:var(--brand-soft); }
.date-photo img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform .6s var(--ease); }
.date-photo:hover img,.date-photo:focus-visible img { transform:scale(1.045); }
.date-photo h3 { font-size:19px; line-height:1.35; margin-top:18px; letter-spacing:-.4px; }
.date-photo p { color:var(--muted); margin-top:5px; font-size:14px; }
.how-intro { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:72px; padding-top:144px; padding-bottom:64px; }
.how-intro h1 { font-size:19px; font-weight:600; color:var(--brand); letter-spacing:-.3px; }
.how-lead { font-size:clamp(42px,4.8vw,64px); line-height:1.06; letter-spacing:-.055em; font-weight:700; margin-top:18px; }
.how-intro__copy>p:not(.how-lead) { max-width:45ch; margin-top:24px; color:var(--muted); line-height:1.75; }
.how-intro .text-link { display:inline-block; margin-top:24px; }
.how-photo { margin:0; position:relative; padding:0 16px 24px 0; }
.how-photo::before { content:""; position:absolute; inset:24px 0 0 24px; background:var(--peach-soft); border-radius:80px 22px 22px 22px; z-index:-1; }
.how-photo img { display:block; width:100%; height:auto; aspect-ratio:1.1; object-fit:cover; border-radius:80px 18px 18px 18px; }
.how-photo figcaption { display:inline-block; padding:14px 18px; background:var(--brand-deep); color:white; border-radius:12px; font-size:14px; position:relative; margin-top:-26px; margin-left:24px; }
.how-body { max-width:1040px; }
.how-steps { list-style:none; padding:0; margin:0; counter-reset:how; }
.how-steps>li { counter-increment:how; position:relative; padding:38px 0 42px 84px; border-top:1px solid var(--hair); }
.how-steps>li::before { content:counter(how); position:absolute; left:0; top:38px; display:grid; place-items:center; width:48px; height:48px; border-radius:16px; color:var(--brand-deep); background:var(--brand-soft); font-size:20px; font-weight:700; }
.how-steps>li:nth-child(2)::before { background:var(--peach-soft); }
.how-steps>li:nth-child(3)::before { background:var(--lilac-soft); }
.how-steps>li:nth-child(4)::before { background:var(--mint-soft); color:#246049; }
.step-copy h2 { font-size:clamp(25px,3vw,32px); letter-spacing:-.035em; line-height:1.25; }
.step-copy p,.step-copy ul { max-width:68ch; color:var(--muted); font-size:16px; line-height:1.75; margin-top:16px; }
.step-copy ul { padding-left:20px; }
.step-copy li+li { margin-top:10px; }
.step-copy strong { color:var(--ink); font-weight:600; }
.step-copy .step-takeaway { color:var(--brand-deep); font-weight:600; }
.step-copy .text-link { display:inline-block; margin-top:18px; }
.two-ways { display:grid; grid-template-columns:1fr 1fr; gap:28px; background:var(--brand-soft); padding:24px; border-radius:18px; margin-top:22px; }
.two-ways h3 { font-size:17px; }
.two-ways p { margin-top:8px; font-size:15px; }
.timing-section { background:var(--lilac-soft); margin-top:18px; padding:52px 0; }
.timing-section .section-heading p { color:#615367; }
.timing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.timing-grid article+article { border-left:1px solid #C9B7D6; padding-left:32px; }
.timing-grid strong { display:block; font-size:clamp(24px,2.7vw,34px); color:var(--brand-deep); line-height:1.3; letter-spacing:-.04em; }
.timing-grid h3 { font-size:16px; margin-top:12px; }
.timing-grid p { font-size:14px; color:#615367; line-height:1.75; margin-top:10px; max-width:36ch; }
.how-faq { max-width:1040px; padding-top:64px; padding-bottom:72px; }
.how-faq>h2 { margin-bottom:26px; }
.how-faq details { border-bottom:1px solid var(--hair); }
.how-faq summary { position:relative; cursor:pointer; list-style:none; font-weight:600; font-size:17px; line-height:1.5; padding:22px 42px 22px 0; }
.how-faq summary::-webkit-details-marker { display:none; }
.how-faq summary::after { content:"+"; position:absolute; right:5px; top:18px; font-size:26px; font-weight:400; color:var(--brand); transition:transform .22s; }
.how-faq details[open] summary::after { transform:rotate(45deg); }
.how-faq details[open]>div { animation:answer-in .24s ease-out; }
.how-faq details p { max-width:68ch; color:var(--muted); line-height:1.75; padding-bottom:24px; }
.ideas-list { display:grid; gap:40px; }
.ideas-list article { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; scroll-margin-top:110px; }
.ideas-list article:nth-child(2) { background:var(--mint-soft); padding:24px; border-radius:24px; }
.ideas-list img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:18px; }
.ideas-list h2 { font-size:clamp(28px,3vw,38px); letter-spacing:-.04em; line-height:1.2; }
.ideas-list p { color:var(--muted); margin-top:16px; line-height:1.75; }
.idea-tag { display:inline-block; padding:6px 12px; background:var(--peach-soft); border-radius:8px; font-size:13px; color:#6D3A1D; margin-top:20px; }
@keyframes headline-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes trail-in { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:none; } }
@keyframes answer-in { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:no-preference) {
  .home-hero h1,.how-intro__copy { animation:headline-in .7s var(--ease) both; }
  .home-hero__detail,.hero-links { animation:headline-in .7s .12s var(--ease) both; }
  .plan-trail li { animation:trail-in .45s .25s var(--ease) both; }
  .plan-trail li:nth-child(2) { animation-delay:.45s; }.plan-trail li:nth-child(3) { animation-delay:.65s; }
  .how-photo { animation:headline-in .8s .15s var(--ease) both; }
}
@media(max-width:820px) {
  .home-hero { margin-top:96px; padding:48px 24px 32px; width:calc(100% - 32px); border-radius:24px; }
  .home-hero h1 { font-size:clamp(43px,10vw,70px); }.home-hero__detail { font-size:16px; }
  .plan-trail { gap:12px 18px; font-size:12px; }.plan-trail li { gap:7px; }
  .section-heading { align-items:start; flex-direction:column; gap:16px; }
  .site-paths { gap:22px; padding-block:32px; }.date-preview { padding-top:12px; padding-bottom:48px; }
  .date-gallery { gap:18px; }.date-photo h3 { font-size:17px; }
  .how-intro { gap:32px; padding-top:116px; padding-bottom:44px; }.how-lead { font-size:44px; }
  .how-photo figcaption { margin-left:12px; font-size:12px; padding:12px; }
  .timing-grid { gap:22px; }.timing-grid article+article { padding-left:22px; }
  .ideas-list article { gap:24px; }
}
@media(max-width:600px) {
  .date-gallery { grid-template-columns:1fr; gap:28px; }.date-photo img { aspect-ratio:1.6; }
  .how-intro { grid-template-columns:1fr; }.how-lead { font-size:48px; }
  .how-photo { max-width:470px; }.how-photo img { aspect-ratio:1.5; border-top-left-radius:54px; }.how-photo figcaption { font-size:13px; }
  .how-steps>li { padding:28px 0 30px 52px; }.how-steps>li::before { top:28px; width:34px; height:34px; font-size:16px; border-radius:11px; }
  .step-copy p,.step-copy ul { font-size:15px; }.two-ways { grid-template-columns:1fr; padding:18px; gap:22px; }
  .timing-grid { grid-template-columns:1fr; gap:24px; }.timing-grid article+article { border-left:0; border-top:1px solid #C9B7D6; padding:24px 0 0; }.timing-grid p { max-width:60ch; }
  .timing-section { padding-block:38px; }.how-faq { padding-top:42px; padding-bottom:48px; }.how-faq summary { font-size:16px; }
  .ideas-list article { grid-template-columns:1fr; gap:22px; }.ideas-list article:nth-child(2) { padding:18px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; }
  .date-photo img,.how-faq summary::after { transition:none; }
}