/* Loaded only at phone widths. Desktop rules and layouts stay untouched. */
@media (max-width: 760px) {
  html { scroll-padding-top: 96px; }
  body { background: #f5f7f7; }
  .wrap { width: calc(100% - 40px); }
  .header {
    position: sticky; top: 0; z-index: 20; width: 100%; min-height: 76px;
    padding: 12px 20px; gap: 16px; background: #fff;
    border-bottom: 1px solid var(--line);
  }
  .brand { min-width: 0; }
  .brand img { width: 154px; max-width: 100%; }
  .header .button.small {
    min-height: 44px; padding: 11px 17px; border-radius: 24px;
    font-size: .875rem; white-space: nowrap; flex-shrink: 0;
  }
  .button { min-height: 56px; border-radius: 10px; padding: 16px 20px; font-size: 1rem; }
  .button:active { transform: translateY(1px); }
  .eyebrow { font-size: .75rem; letter-spacing: .08em; line-height: 1.5; margin-bottom: 14px; }
  h2 { font-size: clamp(1.75rem, 7.4vw, 2.25rem); line-height: 1.16; letter-spacing: -.035em; text-wrap: balance; }
  h3 { font-size: 1.125rem; line-height: 1.35; }
  p { line-height: 1.6; }
  .hero {
    width: 100%; padding: 32px 20px 0; gap: 25px; background: #fff;
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-copy { max-width: 540px; width: 100%; margin-inline: auto; }
  .hero-copy .eyebrow { font-size: .6875rem; letter-spacing: .08em; }
  .hero-copy h1 { font-size: clamp(1.875rem, 9.2vw, 2.75rem); line-height: 1.12; letter-spacing: -.045em; }
  .hero-copy h1 .desktop-break, .hero-intro { display: none; }
  .hero-copy .lead { font-size: 1rem; line-height: 1.6; margin: 18px 0 22px; max-width: 38ch; }
  .hero-copy > .button { justify-content: space-between; width: 100%; }
  .hero-note { font-size: .8125rem; margin-top: 12px; line-height: 1.5; }
  .hero-photography { max-width: 540px; margin-inline: auto; background: #fff; border-radius: 14px 14px 0 0; }
  .hero-photography .art-label, .hero-photography .art-caption { display: none; }
  .hero-photography > img {
    width: 100%; height: auto; aspect-ratio: 1.65; object-fit: cover;
    object-position: center 9%; border-radius: 14px 14px 0 0;
  }
  .service-strip { background: #fff; border-top: 0; border-bottom: 1px solid var(--line); }
  .strip-inner { max-width: 540px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding-block: 18px 24px; }
  .strip-inner p { border: 0; padding: 0; font-size: .8125rem; line-height: 1.5; white-space: normal; }
  .strip-inner strong { display: inline; font-size: inherit; margin: 0; }
  .strip-inner p:last-child { flex-basis: 100%; }
  .section { padding-block: 44px; }
  .plans { width: 100%; padding: 42px 20px; background: #f0f4f3; border-bottom: 1px solid var(--line); }
  .center-heading { max-width: 540px; margin: 0 auto 24px; text-align: left; }
  .center-heading > p:last-child { font-size: 1rem; line-height: 1.6; margin-top: 16px; }
  .center-heading > p:last-child br { display: none; }
  .plan-grid { max-width: 540px; margin-inline: auto; grid-template-columns: minmax(0,1fr); gap: 16px; }
  .plan, .plan.featured {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'kicker kicker' 'name price' 'description description' 'features features' 'detail detail' 'action action';
    gap: 0 12px; padding: 22px; border-radius: 16px;
  }
  .plan.featured { border-top: 4px solid var(--orange); padding-top: 19px; }
  .plan-kicker { grid-area: kicker; font-size: .6875rem; letter-spacing: .075em; margin: 0 0 10px; min-height: 0; }
  .plan h3 { grid-area: name; align-self: center; font-size: 1.5rem; letter-spacing: -.035em; overflow-wrap: anywhere; }
  .plan .price { grid-area: price; font-size: 2.1rem; margin: 0; white-space: nowrap; text-align: right; }
  .plan .price > span { display: block; font-size: .8125rem; line-height: 1.2; margin: 2px 0 0; }
  .plan-description { grid-area: description; min-height: 0; font-size: .9375rem; line-height: 1.55; margin: 13px 0 0; }
  .plan ul { grid-area: features; margin: 18px 0 0; padding: 16px 0 0; }
  .plan li { font-size: .9375rem; line-height: 1.5; padding-left: 24px; margin-bottom: 8px; }
  .plan li:last-child { margin-bottom: 0; }
  .plan-detail { grid-area: detail; font-size: .8125rem; line-height: 1.5; padding: 10px 0 18px; margin: 0; }
  .plan .button { grid-area: action; min-height: 52px; margin: 0; border-radius: 9px; }
  .plan-footnote { max-width: 540px; margin: 20px auto 0; font-size: .8125rem; line-height: 1.6; }
  .how { width: 100%; padding-inline: 20px; background: #fff; gap: 24px; }
  .how > div, .steps { width: 100%; max-width: 540px; margin-inline: auto; }
  .how h2 br, .support h2 br { display: none; }
  .section-copy { font-size: 1rem; margin: 17px 0 0; }
  .steps { display: grid; gap: 12px; }
  .steps li, .steps li:first-child { padding: 20px 18px; border: 1px solid #e3e9e7; border-radius: 12px; background: #f7f9f8; gap: 15px; }
  .step-number { font-size: .8125rem; padding-top: 3px; font-weight: 700; }
  .steps p { font-size: .9375rem; line-height: 1.6; margin-top: 8px; }
  .support { padding-block: 44px; }
  .support > .wrap { max-width: 540px; }
  .section-heading { gap: 16px; }
  .section-heading > p { font-size: 1rem; }
  .support-grid { grid-template-columns: minmax(0,1fr); gap: 0; margin-top: 26px; }
  .support-grid article { padding: 20px 0; }
  .category { display: none; }
  .support-grid h3 { font-size: 1.125rem; margin: 0 0 8px; }
  .support-grid p { font-size: .9375rem; line-height: 1.6; }
  .support-note { margin: 8px 0 0; padding-top: 18px; border-top: 1px solid #486473; line-height: 1.6; }
  .reassurance.with-photo { padding-block: 42px; }
  .reassurance.with-photo > .wrap { max-width: 540px; gap: 25px; }
  .reassurance.with-photo .reassurance-copy h2 { font-size: clamp(1.65rem, 7vw, 2.1rem); line-height: 1.2; text-wrap: balance; }
  .reassurance.with-photo p:not(.eyebrow) { margin: 18px 0; font-size: 1rem; }
  .text-link { min-height: 48px; gap: 16px; font-size: 1rem; }
  .family-photo { border-radius: 12px; }
  .family-photo img { aspect-ratio: 1.5; object-position: center; }
  .testimonials { padding-block: 42px; }
  .testimonials > .wrap { max-width: 540px; }
  .testimonials-heading { text-align: left; margin: 0 0 24px; }
  .testimonials-heading h2 { max-width: 15ch; }
  .testimonial-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .testimonial-card { padding: 24px; border-radius: 14px; }
  .testimonial-stars { font-size: 1.125rem; margin-bottom: 18px; }
  .testimonial-card blockquote { margin-bottom: 22px; }
  .testimonial-card blockquote p { font-size: 1rem; line-height: 1.7; }
  .testimonial-card figcaption { padding-top: 16px; }
  .faq { background: #fff; width: 100%; padding-inline: 20px; gap: 24px; }
  .faq > div { width: 100%; max-width: 540px; margin-inline: auto; }
  .faq-list summary { min-height: 64px; font-size: 1rem; line-height: 1.5; padding: 20px 36px 20px 0; }
  .faq-list details p { font-size: .9375rem; line-height: 1.65; margin-right: 0; }
  footer { padding: 32px 0 max(24px, env(safe-area-inset-bottom)); }
  .footer-inner img { width: 160px; }
  .footer-inner > div + div { margin-top: 20px; }
  .footer-inner p { line-height: 1.6; }
  .footer-bottom { margin-top: 24px; line-height: 1.6; }
  /* Signup becomes a full-screen mobile surface; all fields and terms remain. */
  #signup { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; overscroll-behavior: contain; }
  .signup-layout { display: block; min-height: 100%; }
  .dialog-close { position: sticky; display: block; top: max(10px,env(safe-area-inset-top)); margin: 12px 14px -56px auto; width: 44px; height: 44px; z-index: 3; }
  .signup-summary { padding: 26px 24px 20px; }
  .signup-summary .eyebrow { display: none; }
  .signup-summary h2 { padding-right: 52px; font-size: 1.5rem; }
  .signup-summary .price { font-size: 2rem; margin: 8px 0; }
  .signup-summary p:not(.eyebrow):not(.price) { font-size: .875rem; }
  .signup-summary #selected-allowance { margin: 0; }
  .signup-summary .demo-note { font-size: .8125rem !important; margin-top: 12px; line-height: 1.55; }
  .signup-main { padding: 28px 24px max(32px, env(safe-area-inset-bottom)); }
  .signup-main h2 { font-size: 1.65rem; }
  .signup-main > div > p:not(.eyebrow) { font-size: .9375rem; }
  .signup-main fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 26px 0; }
  .signup-main legend { padding: 0 6px; margin: 0; font-size: 1rem; }
  .signup-main label { font-size: .9375rem; margin: 12px 0 7px; }
  .signup-main input { min-height: 52px; border-radius: 7px; font-size: 1rem; }
  .signup-main .permission-label { gap: 12px; margin: 22px 0; line-height: 1.6; }
  .signup-main .permission-label input { width: 24px; height: 24px; min-height: 24px; }
  .signup-main .field-hint { font-size: .8125rem !important; line-height: 1.6; }
  .signup-main .button { justify-content: space-between; }
  .signup-main .edit-button { justify-content: center; }
  .return-page { width: 100%; margin: 0; padding: 32px 24px; }
  .return-page h1 { font-size: 2rem; }
  .return-page .button { width: 100%; margin: 16px 0 0; }
}
@media (max-width: 360px) {
  .header { padding-inline: 16px; gap: 10px; }
  .brand img { width: 140px; }
  .header .button.small { padding-inline: 13px; }
  .hero, .plans, .how, .faq { padding-inline: 16px; }
  .plan, .plan.featured { padding-inline: 18px; gap: 0 8px; }
  .plan h3 { font-size: 1.3rem; }
  .plan .price { font-size: 1.9rem; }
  .plan .price > span { font-size: .75rem; }
  .signup-main, .signup-summary { padding-inline: 18px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .button:active { transform: none; }
}

/* Perry's calm, separated feed, with membership selection kept near the top. */
@media(max-width:760px){
  .perry-inspired{background:#eaf1ee}
  .perry-inspired .strip-inner{width:calc(100% - 32px);padding:10px 0;gap:5px 16px;justify-content:center}
  .perry-inspired .strip-inner p{font-size:.875rem;text-align:center}
  .perry-inspired .strip-inner p:nth-child(2){display:none}
  .perry-inspired .strip-inner p:last-child{flex-basis:auto}
  .perry-inspired .header{min-height:80px;padding:14px 20px;margin-bottom:14px}
  .perry-inspired .brand img{width:164px}
  .perry-inspired .header .button.small{border-radius:6px}
  .perry-inspired main{display:flex;flex-direction:column;gap:14px;padding:0 12px 14px}
  .perry-inspired main>section,.perry-inspired .hero-surface{width:100%;margin:0;border:0;border-radius:12px;min-width:0}
  .perry-inspired .hero-surface{background:#fff}
  .perry-inspired .hero{width:100%;padding:30px 22px 22px;grid-template-columns:minmax(0,1fr);gap:24px;background:transparent}
  .perry-inspired .hero-copy h1{font-size:clamp(2rem,9.2vw,2.75rem);line-height:1.1;letter-spacing:-.045em}
  .perry-inspired .hero-copy .eyebrow{font-size:.75rem;letter-spacing:.08em}
  .perry-inspired .hero-copy .lead{font-size:1.0625rem;line-height:1.55;margin:18px 0 22px}
  .perry-inspired .button{border-radius:6px}
  .perry-inspired .hero-photography{width:100%;max-width:540px;box-shadow:none;border-radius:8px;background:transparent}
  .perry-inspired .hero-photography>img{aspect-ratio:1.65;border-radius:8px;object-position:center 9%}
  .perry-inspired .plans{padding:28px 18px;background:#fff}
  .perry-inspired .center-heading{display:block;max-width:540px;margin:0 auto 24px}
  .perry-inspired .center-heading>p:last-child{margin-top:16px}
  .perry-inspired .plan,.perry-inspired .plan.featured{padding:22px 18px;border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:8px;box-shadow:none}
  .perry-inspired .plan.featured{border-color:var(--navy);border-left-color:var(--orange)}
  .perry-inspired .plan h3{font-size:1.4rem}
  .perry-inspired .plan-kicker{font-size:.75rem}
  .perry-inspired .plan-footnote{max-width:540px;margin:20px auto 0}
  .perry-inspired .how{padding:32px 22px}
  .perry-inspired .how>div{max-width:540px}
  .perry-inspired .how .section-copy{font-size:1rem}
  .perry-inspired .steps{display:block;max-width:540px;margin:26px auto 0}
  .perry-inspired .steps li,.perry-inspired .steps li:first-child,.perry-inspired .steps li+li{display:flex;align-items:flex-start;gap:16px;background:transparent;padding:22px 0;border:0;border-bottom:1px solid #456259;border-radius:0}
  .perry-inspired .steps li:last-child{padding-bottom:0;border:0}
  .perry-inspired .step-number{margin:0;flex:none;font-size:.8125rem}
  .perry-inspired .steps h3{font-size:1.125rem}
  .perry-inspired .steps p{font-size:1rem}
  .perry-inspired .support{background:#fff;padding:32px 22px}
  .perry-inspired .support>.wrap{width:100%}
  .perry-inspired .support-grid{display:block;border:0;margin-top:24px}
  .perry-inspired .support-grid article{padding:20px 0;border:0;border-top:1px solid var(--line)}
  .perry-inspired .category{display:block;font-size:.75rem;margin-bottom:10px}
  .perry-inspired .support-grid h3{margin:0 0 8px;font-size:1.25rem}
  .perry-inspired .support-grid p{font-size:1rem}
  .perry-inspired .support-note{border-color:var(--line)}
  .perry-inspired .reassurance.with-photo{background:#fff;padding:32px 22px}
  .perry-inspired .reassurance.with-photo>.wrap{width:100%}
  .perry-inspired .family-photo{box-shadow:none;border-radius:8px}
  .perry-inspired .testimonials{padding:32px 18px;background:#fff}
  .perry-inspired .testimonials>.wrap{width:100%}
  .perry-inspired .testimonials-heading{max-width:540px;margin:0 auto 24px}
  .perry-inspired .testimonial-card{background:#f7faf8;border-radius:8px;padding:22px}
  .perry-inspired .faq{padding:32px 22px;background:#fff}
  .perry-inspired footer{margin:0 12px 14px;padding:30px 22px;border:0;border-radius:12px;background:#fff}
  .perry-inspired footer>.wrap{width:100%;max-width:540px}
}
@media(max-width:360px){
  .perry-inspired .header{padding-inline:16px;gap:10px}
  .perry-inspired .brand img{width:140px}
  .perry-inspired .hero{padding-inline:18px}
  .perry-inspired .plans{padding-inline:14px}
  .perry-inspired .plan,.perry-inspired .plan.featured{padding-inline:14px}
  .perry-inspired .plan h3{font-size:1.2rem}
}

/* Consistent desktop-style arrows, with a stronger stroke on phone screens.
   Use a vector mask so mobile fonts cannot turn the arrow into an emoji. */
@media(max-width:760px){
  .button > span[aria-hidden="true"]{
    display:inline-block;position:relative;flex:0 0 22px;
    width:22px;height:22px;font-size:0;line-height:0;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19L19 5M5 5h14v14' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19L19 5M5 5h14v14' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  .button > span.arrow-forward{transform:rotate(45deg)}
  .perry-inspired .header .button.small{gap:9px}
  .perry-inspired .header .button > span{display:inline-block;flex-basis:18px;width:18px;height:18px}
}