/* PlanEat — shared stylesheet for planeatapp.com
 *
 * Every page links this file; each page keeps only a small inline <style> with
 * the critical tokens (so the first paint is never unstyled) plus whatever is
 * unique to that page.
 *
 * VERSIONING: this file is served `immutable` for a year. A change is a RENAME
 * (site-v4.css) plus an update to every <link> — never an edit in place, or
 * visitors keep the old one until their cache expires. This applies while
 * developing too: the hosting emulator sends the same immutable header, so an
 * in-place edit shows up as "the CSS did not apply" until a hard reload. v1 was
 * edited in place once and cost exactly that confusion. */

:root {
    --display: "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --body:    -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
    --cream:        #FBF3E9;
    --cream-2:      #F6EAD9;
    --card:         #F1E4D2;
    --card-line:    #E7D6BF;
    --ink:          #241E18;
    --muted:        #6E6156;
    --terracotta:   #A24A28;
    --terracotta-2: #C05F35;
    --teal:         #3F7E77;
    --olive:        #927611;
    --rose:         #B15668;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--cream-2); }

body {
    font-family: var(--body);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
    background:
        radial-gradient(1100px 700px at 88% -8%, rgba(192,95,53,0.16), transparent 60%),
        radial-gradient(900px 600px at -5% 12%, rgba(63,126,119,0.10), transparent 55%),
        linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

a { color: var(--terracotta); text-decoration: none; }
a:hover { color: var(--terracotta-2); }

.page {
    max-width: 1120px; margin: 0 auto;
    padding:
        calc(2.2rem + env(safe-area-inset-top))
        calc(2.5rem + env(safe-area-inset-right))
        calc(4rem + env(safe-area-inset-bottom))
        calc(2.5rem + env(safe-area-inset-left));
}

/* ---------- Nav ---------- */
.topnav {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4.5rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand img { width: 40px; height: 40px; border-radius: 0.7rem; box-shadow: 0 6px 16px rgba(162,74,40,0.22); }
.brand span {
    font-family: var(--display); font-weight: 700;
    font-size: 1.4rem; letter-spacing: -0.01em;
}
.nav-right { display: flex; align-items: center; gap: 1.2rem; }
.lang {
    display: inline-flex; gap: 0.4rem; font-size: 0.85rem; font-weight: 600;
    color: var(--muted); text-decoration: none;
}
.lang a { color: var(--muted); text-decoration: none; }
.lang a:hover { color: var(--ink); }
.lang .on { color: var(--terracotta); }
.lang .sep { color: var(--card-line); }
.nav-ig {
    display: inline-flex; align-items: center; gap: 0.4rem;
    text-decoration: none; font-weight: 600; font-size: 0.85rem;
    color: var(--muted); transition: color 0.2s ease;
}
.nav-ig:hover { color: var(--terracotta); }
.nav-ig svg { display: block; }
.nav-cta {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--ink); color: var(--cream);
    text-decoration: none; font-weight: 600; font-size: 0.9rem;
    padding: 0.6rem 1.15rem; border-radius: 999px;
    transition: transform 0.2s ease, background 0.2s ease;
}
.nav-cta:hover { transform: translateY(-2px); background: #3a3128; color: var(--cream); }

/* ---------- Sub-navigation ----------
   The landing pages sit here rather than in the top row: four Italian labels
   plus the language switcher, Instagram and the CTA do not fit on one line at
   1120px, and Italian labels are the long ones. A second row also scales when a
   fifth page arrives.

   On narrow screens it scrolls horizontally instead of collapsing behind a
   hamburger — the site has no JavaScript of its own and a menu that needs a
   script to open is a menu that can fail to open. */
.topnav.has-sub { margin-bottom: 1.1rem; }
.subnav {
    display: flex; align-items: center; gap: 0.55rem;
    /* `safe` matters: a plain `center` on a scrolling flex row pushes the
       overflow off BOTH edges, and the part that spills to the left cannot be
       scrolled back to. With `safe` the row centres while it fits and falls
       back to flex-start the moment it does not. */
    justify-content: safe center;
    margin-bottom: 3.6rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.subnav::-webkit-scrollbar { display: none; }

/* Each chip carries the tint its own page already uses on its feature cards, so
   the nav is scannable by colour before it is read. The two custom properties
   are set per item below; everything else is shared. No rule under the row —
   with four outlined chips a hairline as well reads as noise. */
.subnav a {
    display: inline-flex; align-items: center; gap: 0.5rem; flex: none;
    padding: 0.5rem 0.95rem 0.5rem 0.6rem;
    border: 1px solid var(--card-line);
    border-radius: 999px;
    background: rgba(255,255,255,0.55);
    color: var(--muted); font-weight: 600; font-size: 0.86rem;
    white-space: nowrap; text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.subnav a .ic {
    width: 26px; height: 26px; border-radius: 0.6rem; flex: none;
    display: grid; place-items: center;
    background: var(--chip-bg); color: var(--chip);
}
.subnav a:hover { color: var(--ink); border-color: var(--chip); }
.subnav a[aria-current="page"] {
    color: var(--ink);
    border-color: var(--chip);
    background: var(--chip-bg);
}
.subnav a.c-plan   { --chip: var(--terracotta); --chip-bg: rgba(162,74,40,0.12); }
.subnav a.c-import { --chip: var(--teal);       --chip-bg: rgba(63,126,119,0.14); }
.subnav a.c-shop   { --chip: var(--olive);      --chip-bg: rgba(146,118,17,0.14); }
.subnav a.c-pro    { --chip: var(--rose);       --chip-bg: rgba(177,86,104,0.14); }

/* ---------- Hero ---------- */
.hero {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; margin: 1rem auto 6.5rem; max-width: 46rem;
}
h1 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(2.3rem, 5.6vw, 3.7rem);
    letter-spacing: -0.015em; line-height: 1.04;
    margin-bottom: 1.35rem;
}
h1 .accent { color: var(--terracotta); }
.intro {
    color: var(--muted); font-size: 1.12rem; line-height: 1.7;
    margin: 0 auto 2rem; max-width: 32rem;
}
.microcopy { font-size: 0.84rem; color: #9a8f83; margin-top: 0.9rem; }

/* ---------- Store badges ----------
   Both badges expose exactly --badge-h of visible artwork. The App Store SVG is
   full-bleed so it uses --badge-h directly; the Google Play PNG has transparent
   padding baked into its canvas (646x250 canvas, 564x168 of art, 41px padding
   all round), so it is scaled up and pulled back in by negative margins.
   Widths still differ between the two stores: the official lockups have
   different aspect ratios, and both vendors specify matching on height.

   Both locales use the ENGLISH Play lockup: Google retired the per-locale badge
   assets and `intl/it_it/.../it_badge_web_generic.png` now 404s. One asset means
   one set of numbers — do not reintroduce a second geometry. */
.store-badges { --badge-h: 40px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.8rem; }
.store-badges img { display: block; }
.badge-apple img { height: var(--badge-h); width: auto; }
.badge-play img {
    height: calc(var(--badge-h) * 250 / 168);
    width: auto;
    margin: calc(var(--badge-h) * -41 / 168);
}

/* ---------- Section heading ---------- */
.section-head { max-width: 34rem; margin: 0 auto 2.6rem; text-align: center; }
.section-head .kicker {
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--terracotta); margin-bottom: 0.7rem;
}
.section-head h2 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: -0.01em; line-height: 1.1;
}
.section-head p { color: var(--muted); font-size: 1rem; margin-top: 0.8rem; }

/* ---------- Card grids ---------- */
.features, .grid3 {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem; margin-bottom: 6.5rem;
}
.grid2 {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem; margin-bottom: 6.5rem;
}
.feature {
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--card-line);
    padding: 1.5rem; border-radius: 1.25rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -24px rgba(90,55,30,0.45);
    border-color: rgba(162,74,40,0.3);
}
.feature.lead { background: linear-gradient(155deg, rgba(162,74,40,0.10), rgba(192,95,53,0.04)); border-color: rgba(162,74,40,0.28); }
.feature .ic {
    width: 44px; height: 44px; border-radius: 0.85rem;
    display: grid; place-items: center; margin-bottom: 1rem;
}
.feature h3 {
    font-family: var(--display); font-weight: 700;
    font-size: 1.18rem; margin-bottom: 0.35rem; letter-spacing: -0.005em;
}
.feature p { color: var(--muted); font-size: 0.92rem; }

/* tint helpers */
.t-terra { background: rgba(162,74,40,0.12); color: var(--terracotta); }
.t-teal  { background: rgba(63,126,119,0.14); color: var(--teal); }
.t-olive { background: rgba(146,118,17,0.14); color: var(--olive); }
.t-rose  { background: rgba(177,86,104,0.14); color: var(--rose); }

/* ---------- Numbered steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-bottom: 5rem; }
.step { display: flex; flex-direction: column; gap: 0.5rem; }
.step .n { font-family: var(--display); font-weight: 700; font-size: 0.85rem; color: var(--terracotta); letter-spacing: 0.06em; }
.step .bar { height: 2px; background: var(--card-line); }
.step .bar.on { background: var(--terracotta); }
.step h3 { font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin-top: 0.4rem; }
.step p { color: var(--muted); font-size: 0.92rem; }

/* ---------- Closing band ---------- */
.band {
    background: linear-gradient(155deg, rgba(162,74,40,0.10), rgba(192,95,53,0.04));
    border: 1px solid rgba(162,74,40,0.28);
    border-radius: 1.25rem; padding: 3rem 2rem; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
    margin-bottom: 3.5rem;
}
.band h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2rem); letter-spacing: -0.01em; line-height: 1.1; max-width: 26rem; }

/* ---------- Footer ---------- */
footer { color: #9a8f83; font-size: 0.82rem; text-align: center; }
footer .footer-links {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 1.4rem; margin-bottom: 1.1rem;
}
footer a { color: var(--muted); text-decoration: none; font-weight: 500; }
footer a:hover { color: var(--ink); }
footer .disclaimer { max-width: 42rem; margin: 0 auto; line-height: 1.6; }

/* ---------- Entrance animation ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; animation: rise 0.7s cubic-bezier(0.2,0.7,0.2,1) forwards; }
.d1 { animation-delay: 0.05s; } .d2 { animation-delay: 0.15s; }
.d3 { animation-delay: 0.25s; } .d4 { animation-delay: 0.35s; } .d5 { animation-delay: 0.45s; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .hero { margin-bottom: 5rem; }
}
@media (max-width: 860px) {
    .features, .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .page {
        padding:
            calc(1.6rem + env(safe-area-inset-top))
            calc(1.4rem + env(safe-area-inset-right))
            calc(3rem + env(safe-area-inset-bottom))
            calc(1.4rem + env(safe-area-inset-left));
    }
    .topnav { margin-bottom: 3rem; }
    .topnav.has-sub { margin-bottom: 0.9rem; }
    /* Bleed the scroll container to the page edge so a chip cut off mid-row
       reads as scrollable rather than as clipped. */
    /* Belt and braces for engines without the `safe` keyword: below this width
       the row always overflows, so start it at the left edge. */
    .subnav { justify-content: flex-start; margin-bottom: 2.4rem; margin-left: -1.4rem; margin-right: -1.4rem; padding-left: 1.4rem; padding-right: 1.4rem; }
    .hero { margin-bottom: 3.5rem; }
    .features, .grid3, .grid2, .steps { margin-bottom: 3.5rem; }
    .band { padding: 2.2rem 1.4rem; }
}
@media (max-width: 640px) {
    .nav-ig span { display: none; }
    .nav-ig {
        justify-content: center;
        width: 38px; height: 38px; gap: 0;
        border-radius: 999px;
        color: var(--terracotta);
        background: rgba(162, 74, 40, 0.10);
    }
    .nav-ig svg { width: 20px; height: 20px; }
    .steps { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
}
@media (max-width: 520px) {
    .nav-cta { display: none; }
    .features, .grid3, .grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .reveal { animation: none; opacity: 1; }
    html { scroll-behavior: auto; }
}