/* The Paprika 4 homepage (Website/Index4.cshtml), served at / once Store:Paprika4IsLive is true.
   A page of its own, without Bootstrap: light gray ground, white cards, Paprika red as the only accent.
   Each feature row is a still of the real app with one small overlay moving on it, driven by
   /static/js/home4.js. */

:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --ink: #1b1d20;
  --muted: #61656b;
  --line: #dfe2e6;
  --accent: #c4381f;
  --accent-soft: #fbece7;
  --accent-hover: #a92f19;
  --accent-ink: #8f1c12; /* red text on --accent-soft */
  --hero-from: #e0502f; --hero-to: #8f1c12;
  --btn: #1b1d20;
  --btn-ink: #ffffff;
  --bezel: #1b1d20;
  --shadow: 0 1px 2px rgba(20,24,32,.06), 0 12px 32px -8px rgba(20,24,32,.16);
  --shadow-lg: 0 2px 4px rgba(20,24,32,.05), 0 30px 70px -20px rgba(20,24,32,.28);
  --f-display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --f-body: "Instrument Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  --wrap: 1120px;
  /* Spice colours from the icon, for the glows behind the screenshots */
  --saffron: #f2a91e; --orange: #ee7a22; --paprika: #d9482b; --basil: #2f9e58; --teal: #169c9a;
  --glow: var(--paprika);
  /* Small tinted labels and notes (pages4.css), and the guides' links (help4.css) */
  --tag: #e8eaee;
  --info-ink: #1b6690; --info-bg: #e3f0f7; --ok-ink: #23744a; --ok-bg: #e4f3ea;
  --link: #2582b1; --link-hover: #1b6690;
  color-scheme: light dark;
}
/* Dark mode, following the device's setting. The screenshots are still the light ones. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111214;
    --surface: #1b1c1f;
    --ink: #ecedf0;
    --muted: #9da2a9;
    --line: #2d2f34;
    --accent: #ee6040;
    --accent-soft: #3b1f18;
    --accent-hover: #ff7655;
    --accent-ink: #ffb4a2;
    --hero-from: #ff8a5c; --hero-to: #e0502f;
    --btn: #000000;
    --bezel: #000000;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -8px rgba(0,0,0,.6);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.35), 0 30px 70px -20px rgba(0,0,0,.7);
    --tag: #2a2c30;
    --info-ink: #9fd0ec; --info-bg: #13293a; --ok-ink: #8fd6ad; --ok-bg: #15301f;
    --link: #5fb3e0; --link-hover: #8ccbee;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
/* A still in a <picture> (for its dark twin) lays out as if the <img> stood alone */
picture { display: contents; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; line-height: 1.15; text-wrap: balance; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 24px; }
@media (max-width: 600px) { .wrap { padding-inline: 16px; } }

/* The holiday banner over the navigation, pointing to the gift page (_Paprika4, October to December) */
.gift-banner { background: var(--accent-soft); color: var(--accent-ink); font-size: .92rem; }
.gift-banner .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; padding-block: 10px; text-align: center; }
.gift-banner svg { display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gift-banner a { font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }

/* Navigation */
.nav { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-block: 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-weight: 500; font-size: 1.3rem; letter-spacing: .01em; }
.brand img { width: 32px; height: 32px; border-radius: 22.5%; }
/* The full name where it fits beside the menu (or, on narrow screens, beside Buy Premium and the menu button) */
.brand .full { white-space: nowrap; }
@media (max-width: 529px), (min-width: 761px) and (max-width: 939px) { .brand .full { display: none; } }
.nav-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; list-style: none; margin: 0 0 0 auto; padding: 0; font-size: .92rem; color: var(--muted); }
.nav a { text-decoration: none; }
.nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--ink); }
.nav-toggle { display: none; }
/* Buy Premium: at the end of the navigation, and under the pricing table's Premium column */
.buy { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: var(--accent); color: #fff; font-weight: 600; font-size: .92rem; line-height: 1.1; padding: 10px 16px; border-radius: 11px; white-space: nowrap; transition: transform .15s ease, background-color .15s; }
.buy:hover { background: var(--accent-hover); transform: translateY(-1px); }
/* Narrow screens fold the menu into a button, with Buy Premium kept beside it. Without JavaScript the
   links just wrap under the name. */
@media (max-width: 760px) {
  .nav { column-gap: 10px; }
  .nav .buy { margin-left: auto; }
  @media (max-width: 359px) { .brand { gap: 8px; font-size: 1.15rem; } .nav .buy { padding-inline: 11px; font-size: .85rem; } }
  .menus .nav-toggle { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; }
  .menus .nav-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .menus .nav-toggle[aria-expanded="true"] { border-color: var(--ink); }
  .menus .nav-menu { display: none; position: absolute; top: calc(100% - 8px); right: 0; z-index: 20; min-width: 210px; flex-direction: column; gap: 0; padding: 6px; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
  .menus .nav.open .nav-menu { display: flex; align-items: stretch; }
  .menus .nav-menu a { display: block; padding: 10px 14px; border-radius: 9px; }
  .menus .nav-menu a:hover { background: var(--bg); }
  .menus .nav-menu .drop summary { display: flex; justify-content: space-between; padding: 10px 14px; border-radius: 9px; }
  .menus .nav-menu .drop summary:hover { background: var(--bg); }
  .menus .nav-menu .drop ul { position: static; min-width: 0; padding: 0 0 4px 12px; background: none; border: 0; box-shadow: none; }
  .menus .nav-menu .drop ul a { padding: 8px 14px; font-size: .95rem; color: var(--muted); }
  .menus .nav-menu .drop .hd { padding-inline: 14px; }
  html:not(.menus) .nav-menu { order: 5; margin-left: 0; flex-basis: 100%; }
}

/* Store buttons */
.stores { display: flex; flex-wrap: wrap; gap: 14px 12px; }
/* Each download with its platform named under it, a quarter of the badge's height clear of it */
.dl { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dl small { font-size: .78rem; font-weight: 500; color: var(--muted); line-height: 1; }
.store { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; background: var(--btn); color: var(--btn-ink); height: 48px; padding: 0 18px 0 14px; border: 1px solid #a6a6a6; border-radius: 9px; line-height: 1.1; min-width: 0; transition: transform .15s ease; }
.store:hover { transform: translateY(-1px); }
/* The stores' own badges, at the Windows button's height; the artwork is never altered */
.store-badge { display: block; line-height: 0; transition: transform .15s ease; }
.store-badge:hover { transform: translateY(-1px); }
.store-badge img { display: block; height: 48px; width: auto; }
.store svg { width: 22px; height: 22px; flex: none; fill: currentColor; }
.store span { font-size: 1.2rem; font-weight: 600; }

.premium { display: inline-block; font-family: var(--f-body); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.eb { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }

.section { padding-block: 88px; }
.section-head { display: grid; gap: 10px; margin-bottom: 40px; max-width: 46rem; }
.section-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.section-head p { color: var(--muted); font-size: 1.1rem; }
@media (max-width: 600px) { .section { padding-block: 60px; } }

/* Hero: the headline, the store buttons, and the Mac with the iPhone over its corner */
.hero { text-align: center; padding-block: 72px 0; display: grid; justify-items: center; gap: 18px; }
.hero h1 { font-size: clamp(2.6rem, 6.4vw, 4.4rem); line-height: 1.08; }
.hero h1 span { display: block; text-wrap: balance; }
/* A lighter red deepening to a darker one across the headline, the icon's own two reds; plain red where
   text can't take a background */
.hero h1 { color: var(--accent); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 { background: linear-gradient(120deg, var(--hero-from) 15%, var(--hero-to) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
}
.hero .lead { font-size: clamp(1.08rem, 1.8vw, 1.25rem); color: var(--muted); max-width: 34rem; }
.hero .stores { justify-content: center; margin-top: 6px; }
/* Where the four no longer fit on one line, two even columns, so the rows line up */
@media (max-width: 720px) {
  .hero .stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 400px; }
  .hero .store { padding-inline: 14px; height: 40px; }
  .hero .store-badge img { height: 40px; }
  .dl { gap: 10px; }
}
/* Too narrow for "Mac App Store" in half the width: one column */
@media (max-width: 370px) { .hero .stores { grid-template-columns: 1fr; } }
.stage { position: relative; margin: 56px auto 0; max-width: 1040px; padding-bottom: 40px; }
/* The corners follow the Mac window's own, about 36px of the 1800px capture, so the desktop behind it
   doesn't show. The capture holds the whole window, its rounded bottom corners too. */
.stage .win { width: 86%; border-radius: 2.2% / 3%; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); background: var(--surface); }
.stage .phone { position: absolute; right: 3%; bottom: 0; width: 27%; border: 3px solid var(--bezel); border-radius: 30px; overflow: hidden; box-shadow: var(--shadow-lg); background: var(--bezel); }
.stage .phone img { border-radius: 27px; }
@media (max-width: 600px) {
  .stage .win { width: 100%; }
  .stage .phone { width: 36%; right: -4px; bottom: -20px; border-width: 2px; border-radius: 18px; }
  .stage .phone img { border-radius: 16px; }
}

/* Feature rows */
.drow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 90px; }
.drow.flip .copy { order: 2; }
.drow .copy { display: grid; gap: 16px; justify-items: start; }
.drow h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.04; font-weight: 600; letter-spacing: -.03em; }
.checks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.checks svg { width: 20px; height: 20px; flex: none; color: var(--accent); stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 560px; }
.visual .halo { position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 32%, transparent) 0%, transparent 68%); filter: blur(10px); }
.visual .dp { width: min(290px, 72%); }
@media (max-width: 860px) {
  .drow { grid-template-columns: 1fr; padding-block: 64px; gap: 36px; }
  .drow.flip .copy { order: 0; }
  .visual { min-height: 0; }
}

/* Reveal on scroll. Without JavaScript, or with reduced motion, everything is simply shown. */
.js .rv { opacity: .3; transform: translateY(22px); transition: opacity .7s, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .rv.in { opacity: 1; transform: none; }

/* Phone frame, for screenshots and mock-ups alike */
/* The screen (.scr) has the still's own proportions and the bezel is padding around it, so the still
   is never cropped: a frame given the still's aspect ratio and then padding would be narrower inside
   than the still, and object-fit: cover would shave its sides. */
.dp { position: relative; background: #0d0d0f; border-radius: 15% / 6.9%; padding: 1.2%; box-shadow: 0 2px 4px rgba(20,24,32,.08), 0 26px 50px -16px rgba(20,24,32,.35); }
.dp::before { content: ""; position: absolute; top: 2.1%; left: 50%; width: 28%; height: 3.1%; transform: translateX(-50%); background: #000; border-radius: 99px; z-index: 5; }
.dp .scr { position: relative; width: 100%; aspect-ratio: 1320 / 2868; border-radius: 13.8% / 6.35%; overflow: hidden; background: #fff; container-type: size; }
.scr > img, .scr > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* iPad Pro 11-inch, portrait: an even bezel and rounded corners, no notch */
.dt { position: relative; background: #0d0d0f; border-radius: 6% / 4.1%; padding: 2.6%; box-shadow: 0 2px 4px rgba(20,24,32,.08), 0 26px 50px -16px rgba(20,24,32,.35); }
.dt .scr { position: relative; width: 100%; aspect-ratio: 1668 / 2420; border-radius: 3.6% / 2.5%; overflow: hidden; background: #fff; container-type: size; }
.visual .dt { width: min(400px, 100%); }
/* Cook mode's iPad screen is nearly twice the phone's width in points, so at 400px its text is far
   smaller than the phone rows'. Its row gives it the wider column, and it grows with the window to
   600px, but never taller than the window: the frame is 1.43 times as tall as it is wide. */
@media (min-width: 861px) {
  .drow.cook { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
  .drow.cook .visual .dt { width: min(100%, 600px, max(400px, calc((100svh - 80px) / 1.43))); }
}
/* An Android phone: an even bezel, and the camera in the top of the screen */
.da { position: relative; background: #0d0d0f; border-radius: 10% / 4.5%; padding: 1.4%; box-shadow: 0 2px 4px rgba(20,24,32,.08), 0 26px 50px -16px rgba(20,24,32,.35); }
.da::before { content: ""; position: absolute; top: 2.6%; left: 50%; width: 4.4%; aspect-ratio: 1; transform: translateX(-50%); background: #000; border-radius: 50%; z-index: 5; }
.da .scr { position: relative; width: 100%; aspect-ratio: 880 / 1956; border-radius: 9% / 4%; overflow: hidden; background: #fff; container-type: size; }
.visual .da { width: min(280px, 70%); }
/* A Windows window, its own title bar in the still */
.ww { position: relative; width: 100%; aspect-ratio: 1440 / 900; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); background: #fff; }
.ww .scr { position: relative; width: 100%; height: 100%; container-type: size; }

/* The one thing moving on each still: overlays (.ov) placed at percentages of the screen, so they
   scale with it, stepped by the classes home4.js puts on the frame (.vig). They fade for the loop's
   reset; the still stays. With reduced motion every step is applied at once, and nothing moves. */
.vig .ov { position: absolute; z-index: 4; pointer-events: none; }
.vig.fade .ov { opacity: 0 !important; transition: opacity .4s; }
/* Where a finger tapped */
.tapmark { width: 14%; aspect-ratio: 1; margin: -7% 0 0 -7%; border-radius: 50%; background: rgba(255,255,255,.5); border: 2px solid rgba(20,24,32,.3); box-shadow: 0 2px 12px rgba(20,24,32,.25); opacity: 0; z-index: 6; }
.vig.s-tap .tapmark { animation: tap .65s ease-out forwards; }
@keyframes tap { 0% { transform: scale(.55); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
/* A wide row, for a window or several devices, too wide for half a row: the copy across the top and
   the visual the row's full width under it */
.drow.wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto; align-items: start; gap: 24px 56px; }
.drow.wide .copy { display: contents; }
.drow.wide .copy > :not(.checks) { grid-column: 1; }
/* The list is taller than the eyebrow and heading: the spare height goes above them, so they stay
   together, as in the other rows, and end level with the list */
.drow.wide .copy > .eb { align-self: end; margin-bottom: -8px; }
.drow.wide .checks { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.drow.wide .visual { grid-column: 1 / -1; min-height: 0; margin-top: 24px; }
.drow.wide .visual .halo { width: 60%; }
@media (max-width: 860px) {
  .drow.wide { grid-template-columns: 1fr; grid-template-rows: none; }
  .drow.wide .checks { grid-column: 1; grid-row: auto; }
}
/* 1. Scanning: the scanner's line sweeps the card from --from down to --to, which stops short of the
   Scan button, pauses there, and comes back up */
.scanline { left: 0; right: 0; top: var(--from); height: 4px; background: #ffc21a; box-shadow: 0 0 3px 1px #fff3b8, 0 0 24px 9px rgba(242,169,30,.8), 0 0 48px 18px rgba(238,122,34,.35); opacity: 0; }
.vig.s-scan .scanline { animation: scan 5.6s ease-in-out forwards; }
@keyframes scan { 0% { top: var(--from); opacity: 0; } 8% { opacity: 1; } 44%, 56% { top: var(--to); } 92% { opacity: 1; } 100% { top: var(--from); opacity: 0; } }
/* 2. Cook mode: what it heard, then the ingredient is crossed off: greyed and struck through, as the
   ones already crossed off in the still are */
.heard { display: flex; align-items: center; gap: 1.6cqw; padding: 1.7cqw 2.8cqw; border-radius: 99px; background: rgba(27,29,32,.92); color: #fff; font: 600 2.7cqw/1 -apple-system, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 4px 14px rgba(20,24,32,.25); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s cubic-bezier(.16,1,.3,1); }
.heard i { width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: var(--saffron); animation: pulse 1s ease-in-out infinite; }
.vig.s-heard .heard { opacity: 1; transform: none; }
@keyframes pulse { 50% { transform: scale(1.6); } }
.cross { background: rgba(255,255,255,.6); opacity: 0; transition: opacity .4s; }
.cross::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; background: #c2c2c7; transform: scaleX(0); transform-origin: left; transition: transform .35s ease-out .1s; }
.vig.s-cross .cross { opacity: 1; }
.vig.s-cross .cross::after { transform: none; }
/* 3. Groceries: the item's box is checked, and its text greys out */
/* The app's own checked box: 38px square at 2x, its blue, and a check about a fifth of the box thick */
.tick { width: 4%; aspect-ratio: 1; margin: -2% 0 0 -2%; border-radius: 10%; background: #4a90e4; opacity: 0; transform: scale(.4); transition: opacity .15s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.tick::after { content: ""; position: absolute; left: 33%; top: 14%; width: 26%; height: 52%; border: solid #fff; border-width: 0 .5cqw .5cqw 0; transform: rotate(45deg); }
.veil { background: rgba(255,255,255,.55); opacity: 0; transition: opacity .35s; }
.vig.s-done .tick { opacity: 1; transform: none; }
.vig.s-done .veil { opacity: 1; }
/* 4. Meals: a copy of the recipe's row lifts out of the list, glides to a day and settles into it as a
   meal, the way the day's others look. Both places are given as --x0/--y0/--w0/--h0 and --x1 etc. */
.drag { left: var(--x0); top: var(--y0); width: var(--w0); height: var(--h0); background: #fff; border: 1px solid #e3e3e3; border-radius: .3cqw; display: flex; align-items: center; gap: .9cqw; font: 400 .95cqw/1 "Segoe UI", system-ui, sans-serif; color: #1b1d20; opacity: 0; transition: left 1.2s cubic-bezier(.45,0,.2,1), top 1.2s cubic-bezier(.45,0,.2,1), width .45s, height .45s, transform .3s, box-shadow .3s, opacity .25s, background .3s, border-color .3s; }
/* The recipe's own thumbnail, cut from the still by showing the still through a thumbnail-sized window */
.drag i { width: 2.05cqw; aspect-ratio: 1; border-radius: .3cqw; flex: none; background: url(/static/images/home4/windows-meals@2x.webp) no-repeat; background-size: 100cqw 100cqh; background-position: -76cqw -35cqh; }
.vig.s-lift .drag { opacity: 1; transform: scale(1.03); box-shadow: 0 .8cqw 2cqw rgba(20,24,32,.28); }
.vig.s-drag .drag { left: var(--x1); top: var(--y1); }
.vig.s-drop .drag { width: var(--w1); height: var(--h1); transform: none; box-shadow: none; background: #dce5f4; border-color: #dce5f4; border-left: .15cqw solid #2e60b4; padding-left: .4cqw; }
.vig.s-drop .drag i { display: none; }
/* 5. Every device: an iPhone, and as the row scrolls into view an Android phone and an iPad spring
   out from behind it and stay out. Out is where they are without JavaScript, too. The bezels are in
   pixels here, thin as the hero's: a percentage would be of the whole stage, not of each device. */
.trio { position: relative; width: min(900px, 100%); aspect-ratio: 900 / 600; margin-inline: auto; }
.trio > * { position: absolute; bottom: 0; left: 50%; }
.trio .dp { width: 28%; padding: 3px; transform: translateX(-50%); z-index: 3; }
.trio .da { width: 24%; padding: 2px; bottom: 4%; z-index: 2; transform: translateX(-128%) rotate(-5deg); transform-origin: bottom center; }
/* The 13-inch iPad of the store captures, squarer than the 11-inch */
.trio .dt { width: 40%; padding: 6px; bottom: 4%; z-index: 1; transform: translateX(-14%) rotate(3deg); transform-origin: bottom left; }
.trio .dt .scr { aspect-ratio: 2064 / 2752; }
.js .trio .da, .js .trio .dt { transition: transform .9s cubic-bezier(.2,.9,.25,1.1), opacity .45s; }
.js .trio:not(.in) .da, .js .trio:not(.in) .dt { transform: translateX(-50%) scale(.92); opacity: 0; }

/* More features: tiles that lift on hover */
#more h2, #pricing h2, .faq h2 { font-weight: 600; letter-spacing: -.03em; font-size: clamp(2rem, 4vw, 2.8rem); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 24px 24px 0; overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.tile:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -22px rgba(20,24,32,.35); }
.tile h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.tile .d { color: var(--muted); font-size: .95rem; margin-top: 6px; }
.tile .shot { margin-top: auto; padding-top: 22px; height: 250px; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; position: relative; }
.tile .shot::before { content: ""; position: absolute; left: 10%; right: 10%; top: 30px; height: 220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 30%, transparent) 0%, transparent 68%); filter: blur(10px); }
.tile .shot img { position: relative; width: 66%; border: 3px solid var(--bezel); border-bottom: 0; border-radius: 26px 26px 0 0; box-shadow: var(--shadow); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.tile .shot.mac img { width: 100%; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; }
/* A crop from inside a screen, the nutrition label: a panel rather than the top of a phone */
.tile .shot.flat img { width: 86%; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; }
/* The watch's own screen, black to its edge, in a band of case around it. The watch and the Echo are whole devices
   rather than a phone's top, so their band grows with them where a one-column tile makes them taller than 250px */
.tile .shot.watch { align-items: center; padding-block: 32px; height: auto; min-height: 250px; }
.tile .shot.watch img { width: 46%; border: 8px solid #1b1b1d; border-radius: 26% / 22%; background: #000; }
/* An Echo Show: the whole landscape screen in its black bezel */
.tile .shot.echo { align-items: center; padding-block: 32px; height: auto; min-height: 250px; }
.tile .shot.echo img { width: 94%; border: 10px solid #1b1b1d; border-radius: 16px; background: #000; }
.tile:hover .shot img { transform: translateY(-6px); }
.js .tile.rv { transition-delay: calc(var(--i, 0) * 90ms); }
.js .tile.rv.in { transition: opacity .7s, transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; transition-delay: 0s; }
.js .tile.rv.in:hover { transform: translateY(-4px); }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tiles { grid-template-columns: 1fr; } }

/* Pricing: a table, stacked into one card per row on phones */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.plans { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 1rem; }
.plans th, .plans td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.plans td:not(:first-child), .plans th:not(:first-child) { text-align: center; width: 25%; }
.plans thead th { font-family: var(--f-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em; padding-top: 22px; }
.plans thead th.hl { color: var(--accent); }
.plans tfoot td { border-bottom: 0; padding-block: 16px 20px; }
.plans tfoot .buy { width: 100%; max-width: 170px; }
.plans tfoot .trial { display: block; margin-top: 10px; font-size: .9rem; font-weight: 600; }
.plans .yes { color: var(--accent); font-weight: 600; }
.plans tbody td:first-child { font-weight: 600; }
.plans .dash { color: var(--muted); }
.fine { color: var(--muted); font-size: .88rem; margin-top: 14px; max-width: 70ch; }
@media (max-width: 640px) {
  .tbl-wrap { overflow: visible; }
  .plans, .plans tbody, .plans tfoot, .plans tr, .plans td { display: block; min-width: 0; }
  .plans thead { display: none; }
  .plans tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .plans tfoot tr { padding: 16px 18px; }
  .plans tfoot td, .plans tfoot td:not(:first-child) { padding: 0; width: auto; }
  .plans tfoot td:not(:last-child) { display: none; }
  .plans tfoot .buy { max-width: none; padding-block: 12px; font-size: 1rem; }
  .plans tbody td, .plans tbody td:not(:first-child) { padding: 0; border: 0; width: auto; text-align: left; }
  .plans tbody td:first-child { grid-column: 1 / -1; font-weight: 600; margin-bottom: 6px; }
  .plans tbody td:not(:first-child)::before { display: block; font-size: .78rem; font-weight: 400; color: var(--muted); }
  .plans tbody td:nth-child(2)::before { content: "Free"; }
  .plans tbody td:nth-child(3)::before { content: "Premium"; color: var(--accent); }
}

/* FAQ */
.faq { max-width: 780px; }
.faq h2 { margin-bottom: 12px; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 18px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 1.3rem; line-height: 1; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); margin-top: 10px; max-width: 62ch; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding-block: 28px 40px; font-size: .88rem; color: var(--muted); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.foot .links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot .co { margin-left: auto; }
/* Menus: User Guides, by platform, and Cloud Sync, the account pages, as the old navigation had them.
   They open downward from the navigation and upward from the footer. */
.drop { position: relative; }
.drop summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; }
.drop summary::-webkit-details-marker { display: none; }
.drop summary:hover, .drop[open] summary { color: var(--ink); }
.drop summary svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.drop[open] summary svg { transform: rotate(180deg); }
.drop ul { position: absolute; left: -14px; z-index: 30; min-width: 190px; list-style: none; margin: 0; padding: 6px; font-size: .92rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.nav .drop ul { top: calc(100% + 12px); }
.foot .drop ul { bottom: calc(100% + 10px); }
.drop ul a { display: block; padding: 8px 12px; border-radius: 9px; color: var(--ink); }
.drop ul a:hover { background: var(--bg); }
.drop ul a[aria-current="page"] { font-weight: 600; }
.drop .hd { padding: 8px 12px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.drop .hd ~ .hd { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.nav-menu .drop.on summary { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Dark mode's own touches, after the rules they adjust (the colors themselves are the tokens at the top) */
@media (prefers-color-scheme: dark) {
  /* Black devices on a near-black page: a faint rim keeps their edges */
  .dp, .dt, .da { box-shadow: 0 0 0 1px rgba(255,255,255,.13), 0 26px 50px -16px rgba(0,0,0,.7); }
  .tile .shot img { box-shadow: 0 0 0 1px rgba(255,255,255,.1), var(--shadow); }
  .tile:hover { box-shadow: 0 24px 44px -22px rgba(0,0,0,.8); }
  /* Bootstrap's own dark mode (data-bs-theme, set in _Paprika4), given this site's colors */
  :root[data-bs-theme="dark"] { --bs-body-bg: var(--surface); --bs-body-color: var(--ink); --bs-emphasis-color: var(--ink); --bs-secondary-color: var(--muted); --bs-border-color: var(--line); --bs-tertiary-bg: var(--bg); }
  /* Groceries, over the dark still: the app's lighter blue box with a dark check, and its dark ground */
  .tick { background: #62adf1; }
  .tick::after { border-color: #10233a; }
  .veil { background: rgba(21,19,18,.55); }
  /* Meals, over the dark still: the dark list row lifts out, and settles as the dark month's meal pill */
  .drag { background: #2b2b2b; border-color: #3e3e3e; color: #f2f2f2; }
  .drag i { background-image: url(/static/images/home4/windows-meals-dark@2x.webp); }
  .vig.s-drop .drag { background: #1e293c; border-color: #1e293c; border-left-color: #295fb3; }
  /* Cook mode's crossing-off, over the dark still: dimmed and struck through in its own dark gray */
  .cross { background: rgba(0,0,0,.55); }
  .cross::after { background: #5c5c60; }
  /* The guides' tables' heading rows and notes (custom5.css), whose colors are their own */
  .table-bordered tr.heading > :is(td, th) { background-color: var(--bg); }
  :is(.help-layout, .post) .markdown-alert-note { --alert-color: #9fd0e0; --alert-border: #3f7f93; --alert-bg: #13262c; }
}