/* CamCalo landing site (#673). One stylesheet, self-hosted fonts, no inline
   styles (the CSP allows style-src 'self' only). Colours follow brand-spec.md. */

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/manrope-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/manrope-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/manrope-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/manrope-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/tajawal-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/tajawal-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/tajawal-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  /* Light only (Sam, 26 Oct 2026): browsers and Android's automatic dark mode leave it alone. */
  color-scheme: only light;
  --paper: #fbfaf6;
  --surface: #ffffff;
  --surface-2: #f2f0e9;
  --ink: #193945;
  --ink-soft: #3f5a65;
  --muted: #5d717a;
  --line: rgb(25 57 69 / 12%);
  --primary: #2f6bd8;
  --primary-hover: #2458b8;
  --primary-ink: #2455ad;
  --primary-soft: #edf4ff;
  --teal: #2a637b;
  --check: #24743a;
  --shadow: 0 30px 60px -30px rgb(25 57 69 / 35%);
  --shadow-soft: 0 12px 32px -18px rgb(25 57 69 / 30%);
  --bezel: #14191d;
  --closing-from: #2a637b;
  --closing-to: #2f6bd8;
  /* The top bar: a neutral white glass with no cream tint (Sam, 26 Oct 2026,
     19:32 UTC), light enough over the photo for the bar's text. */
  --bar-bg: rgb(255 255 255 / 66%);
  --bar-bg-scrolled: rgb(255 255 255 / 84%);
  --bar-line: rgb(25 57 69 / 10%);
  /* Where the hero photo fades in under the bar: the bar's colour. */
  --bar-fade: var(--bar-bg);
  /* Desktop scale (Sam, 26 Oct 2026): from 1280 px the page is drawn at 90%,
     as if the browser were zoomed to 90%, but the hero photo keeps its size.
     Lengths in px are multiplied by --k and the root font size scales the rem
     ones; vw, svh and the photo-width terms stay, as they do under zoom.
     Phones and tablets keep --k at 1. */
  --k: 1;
  --bar-h: calc(88px * var(--k));
  --radius: calc(24px * var(--k));
  --gutter: clamp(calc(16px * var(--k)), 4vw, calc(40px * var(--k)));
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (min-width: 1280px) {
  :root { --k: 0.9; }
  html { font-size: 90%; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 12px * var(--k)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
html[lang="ar"] body { font-family: "Tajawal", var(--font); line-height: 1.75; }
img, video, svg { display: block; max-width: 100%; }
a { color: var(--primary-ink); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { letter-spacing: 0; line-height: 1.35; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

.container { width: min(calc(1180px * var(--k)), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip-link { position: absolute; inset-inline-start: calc(12px * var(--k)); top: -60px; z-index: 20; padding: calc(10px * var(--k)) calc(16px * var(--k)); border-radius: calc(10px * var(--k)); background: var(--surface); color: var(--ink); font-weight: 700; }
.skip-link:focus { top: calc(10px * var(--k)); }
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: calc(8px * var(--k)); min-height: calc(48px * var(--k)); padding: calc(12px * var(--k)) calc(24px * var(--k)); border-radius: 999px; border: 1px solid transparent; font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.button:active { transform: translateY(1px); }
.button-primary { background: var(--primary); color: #fff; box-shadow: 0 10px 24px -12px rgb(47 107 216 / 70%); }
.button-primary:hover { background: var(--primary-hover); }
.button-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.button-secondary:hover { background: var(--surface-2); }
.button-small { min-height: calc(44px * var(--k)); padding: calc(9px * var(--k)) calc(20px * var(--k)); font-size: 1rem; }
.button-wide { width: 100%; }
.button-light { background: #fff; color: #193945; }
.button-light:hover { background: #eef3f6; }
html[dir="rtl"] .button .icon-arrow { transform: scaleX(-1); }

/* Top bar: a neutral white glass, the same height at every width, and
   taller with a bigger logo since Sam's second pass (26 Oct 2026). */
.topbar { position: sticky; top: 0; z-index: 10; height: var(--bar-h); background: var(--bar-bg); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--bar-line); transition: background-color 200ms ease, box-shadow 200ms ease; }
.topbar.is-scrolled { background: var(--bar-bg-scrolled); box-shadow: 0 10px 30px -22px rgb(25 57 69 / 45%); }
.topbar-inner { display: flex; align-items: center; gap: calc(24px * var(--k)); height: 100%; width: min(calc(1280px * var(--k)), 100% - 2 * var(--gutter)); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: calc(52px * var(--k)); width: auto; }
.topnav { display: flex; gap: calc(28px * var(--k)); margin-inline-start: calc(12px * var(--k)); }
.topnav a, .topbar-open { color: var(--ink); font-weight: 600; font-size: 1rem; text-decoration: none; }
.topnav a:hover, .topbar-open:hover { color: var(--primary-ink); }
.topbar-actions { display: flex; align-items: center; gap: calc(18px * var(--k)); margin-inline-start: auto; }

.lang-menu { position: relative; }
.lang-menu summary { display: inline-flex; align-items: center; gap: calc(6px * var(--k)); min-height: calc(44px * var(--k)); padding: calc(6px * var(--k)) calc(12px * var(--k)); border-radius: 999px; color: var(--ink); font-weight: 700; font-size: 0.9375rem; cursor: pointer; list-style: none; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { background: var(--surface-2); color: var(--ink); }
.lang-menu ul { position: absolute; inset-inline-end: 0; top: calc(100% + 8px * var(--k)); min-width: calc(160px * var(--k)); padding: calc(6px * var(--k)); border-radius: calc(16px * var(--k)); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.lang-menu a { display: block; padding: calc(10px * var(--k)) calc(12px * var(--k)); border-radius: calc(10px * var(--k)); color: var(--ink); text-decoration: none; font-weight: 600; }
.lang-menu a:hover { background: var(--surface-2); }
.lang-menu a[aria-current="page"] { color: var(--primary-ink); }
/* The bar's text one step bigger and bolder on tablets and desktops (Sam,
   26 Oct 2026, 19:32 UTC). Below 680 px it keeps the smaller size, so Open
   CamCalo stays on one line. */
@media (min-width: 680px) {
  .topnav a, .topbar-open { font-size: 1.0625rem; font-weight: 700; }
  .lang-menu summary { font-size: 1rem; }
  .topbar .button-small { font-size: 1.0625rem; }
}

/* Hero (Sam's pick, 26 Oct 2026). Phones (below 600 px, or turned sideways):
   the clip runs edge to edge under the top bar and the copy sits on a sheet
   that overlaps it, like the app's bottom sheets. Tablets and desktops: the
   clip fills the first screen under the glass bar and the copy sits on the
   table under the plate. The still and
   the video are the same full 1920 x 1080 frame, so they always line up and
   the hero has no join.
   The whole phone stays in view at every size (Sam, 26 Oct). Over all 524
   frames of the master it spans 9.8% to 94.5% of the frame's height and 20%
   to 49.4% of its width (centre 34.6%). So the frame is sized from the room
   for the phone: its 84.7% fits between 8 px below the top of the box and
   8 px above the sheet. On a narrow screen the frame is wider than the
   screen, with the phone in the middle; it always covers the box. */
.hero { position: relative; container-type: inline-size; }
.hero-stage { --overlap: 28px; }
.hero-media { --mh: max(min(calc(100svh - var(--bar-h) - 200px), 56.25cqw), 300px, calc(47.64cqw + var(--overlap) + 16px)); position: relative; overflow: hidden; height: var(--mh); background: #e9e4dc; }
.hero-frame { --frame-h: calc((var(--mh) - var(--overlap) - 16px) / 0.847); position: absolute; top: calc(8px - var(--frame-h) * 0.098); left: clamp(calc(100cqw - var(--frame-h) * 16 / 9), calc(50cqw - var(--frame-h) * 0.615), 0px); width: calc(var(--frame-h) * 16 / 9); height: var(--frame-h); }
.hero-base, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video { opacity: 0; transition: opacity 400ms ease; }
.video-ready .hero-video { opacity: 1; }
.video-toggle { position: absolute; right: 14px; bottom: 42px; z-index: 3; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(15 21 25 / 55%); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.video-toggle[hidden] { display: none; }
.video-toggle:hover { background: rgb(15 21 25 / 72%); }
.video-toggle .icon { grid-area: 1 / 1; width: calc(20px * var(--k)); height: calc(20px * var(--k)); }
.video-toggle .icon-pause, .video-toggle.is-playing .icon-play { display: none; }
.video-toggle.is-playing .icon-pause { display: block; }

.hero-sheet { position: relative; z-index: 2; margin-top: calc(-1 * var(--overlap)); border-radius: 28px 28px 0 0; background: var(--paper); }
.hero-sheet::before { content: ""; position: absolute; left: 50%; top: 10px; width: 40px; height: 5px; margin-left: -20px; border-radius: 99px; background: var(--line); }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 56px; align-items: end; width: min(1180px, 100% - 2 * var(--gutter)); margin-inline: auto; padding: 40px 0 8px; }
.hero-copy h1 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; line-height: 1.1; color: var(--ink); text-wrap: balance; }
html[lang="ar"] .hero-copy h1 { line-height: 1.3; }
.hero-lead { max-width: 40em; margin-top: 12px; color: var(--ink-soft); font-size: clamp(1rem, 2.2vw, 1.15rem); text-wrap: pretty; }
.hero-cta { display: flex; flex-direction: column; align-items: flex-end; }
.hero-actions { display: flex; flex-wrap: wrap; gap: calc(12px * var(--k)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Store badges: Apple first, both the height of the buttons, with a quarter
   of that height clear around each (Apple's and Google's badge rules). */
.hero-actions.has-badges { --badge-h: calc(48px * var(--k)); gap: max(calc(12px * var(--k)), calc(var(--badge-h) / 4)); align-items: center; }
.store-badges { display: flex; flex-wrap: wrap; gap: max(calc(12px * var(--k)), calc(var(--badge-h) / 4)); }
.store-badge { display: block; border-radius: calc(10px * var(--k)); }
.store-badge img { height: var(--badge-h); width: auto; }

/* The logo's corners: red top left, yellow top right, green bottom left,
   blue bottom right. Each is one drawing, turned by CSS. */
.corners { position: absolute; inset: 0; pointer-events: none; }
.corner { position: absolute; width: var(--corner, 44px); height: var(--corner, 44px); }
.corner .icon { width: 100%; height: 100%; stroke-width: var(--corner-stroke, 7); }
.corner-tl { left: 0; top: 0; color: #e63f32; }
.corner-tr { right: 0; top: 0; color: #f2b305; transform: scaleX(-1); }
.corner-bl { left: 0; bottom: 0; color: #339e4e; transform: scaleY(-1); }
.corner-br { right: 0; bottom: 0; color: #3b7ce8; transform: scale(-1, -1); }
/* The word for photo in the headline, inside the corners, with more room
   around it since Sam's second pass (26 Oct). */
.framed-word { position: relative; display: inline-block; padding: 0.1em 0.42em 0.16em; margin-inline: 0.06em 0.04em; white-space: nowrap; }
.framed-word .corners { --corner: 0.46em; --corner-stroke: 8; }
/* وجبتك starts with a tall و and ends low, so it needs more room on its start
   side, so both sides read as even as around "photo". */
html[lang="ar"] .framed-word { padding-inline: 0.56em 0.32em; }
/* "photo" and "foto" get more room inside the corners (Sam, 26 Oct 17:43
   UTC); the Arabic word keeps its values. */
html:not([lang="ar"]) .framed-word { padding-inline: 0.6em; }
/* On the narrowest phones a little less, so the English headline keeps two
   lines and the buttons stay on the first screen. */
@media (max-width: 380px) { html:not([lang="ar"]) .framed-word { padding-inline: 0.5em; } }

@media (max-width: 899px) {
  .hero-copy { grid-template-columns: minmax(0, 1fr); padding-top: 34px; }
  .hero-cta { align-items: flex-start; }
}
/* Phones: the hand and the phone, in the middle of the screen. */
@media (max-width: 599px) {
  .hero-stage { --overlap: 24px; }
  .hero-media { --mh: max(min(54svh, 560px), 330px, calc(47.64cqw + var(--overlap) + 16px)); }
  .hero-sheet { border-radius: 24px 24px 0 0; }
  .hero-copy { width: auto; padding: 32px 20px 8px; }
  .hero-actions .button { flex: 1 1 auto; padding-inline: 18px; }
  .hero-actions.has-badges .button { flex-basis: 100%; }
  .video-toggle { bottom: 38px; }
}
@media (max-width: 599px) and (max-height: 720px) {
  .hero-media { --mh: max(46svh, 280px, calc(47.64cqw + var(--overlap) + 16px)); }
  .hero-copy h1 { font-size: 1.75rem; }
  .hero-lead { margin-top: 8px; font-size: 0.95rem; line-height: 1.5; }
}

/* Desktop: the whole frame under the glass bar, the headline above the
   meal and the lead and buttons on the table under the plate (x 51.3% to
   97.1% of the frame, from 81.5% of its height, below the plate's shadow;
   see the headline's own note below). The phone's top sits 8 px under the bar; the
   frame's top is cut under the bar as far as that allows. The frame is as wide as the window unless the
   window is too short for the phone and the buttons: the copy is about 12%
   of the frame's width plus 42 px tall (measured from 1280 to 1920 px), so
   the frame's height is at most (window - bar - 56 px) / 0.86. Then the
   photo gets narrower than the window, keeps to its right edge and fades
   into the page on its left. The photo's bottom fades into the page: under
   the copy from 76% of the frame, under the phone only below it. A soft
   paper-coloured light behind the lead and the buttons keeps them readable
   on the photo, so they stay ink. The copy's sizes follow the photo's width. The photo's
   size uses the bar height from before the desktop scale (88 px), so the
   photo stays as large as before (Sam, 26 Oct); the bar and the gap above
   the phone scale with the page.
   Tablets get this hero too, from 600 px wide (Sam, 26 Oct 17:43 UTC);
   phones keep the App-native one. Phones in landscape are wider than 600 px
   but at most about 440 px tall, so the hero also needs 500 px of height.
   Under the bar the photo fades in from the bar's colour, like its sides and
   bottom (Sam, 26 Oct 17:43 UTC): 4.5% of the photo's height, but only 8 px
   over the phone (20% to 49.4% of the width, with 5% soft edges), so the
   phone's top, 7 px under the bar at its highest, stays clear. Where the
   photo is narrower than the window, the fade gives way to the side fades,
   so the paper beside the photo meets no tinted edge. Without the script the
   bar keeps its line. */
@media (min-width: 1280px), (min-width: 600px) and (min-height: 500px) {
  .hero { margin-top: calc(-1 * var(--bar-h)); }
  .js .topbar-hero:not(.is-scrolled) { border-bottom-color: transparent; }
  .hero-stage { --fh: min(56.25cqw, calc((100svh - 88px - 56px) / 0.86)); --fw: calc(var(--fh) * 16 / 9); --u: calc(var(--fw) / 100); --top: calc(var(--bar-h) + 8px * var(--k) - var(--fh) * 0.098); position: relative; display: flow-root; min-height: calc(var(--top) + var(--fh)); padding-bottom: calc(32px * var(--k)); overflow: hidden; background: var(--paper); }
  /* The frame is centred, so a window wider than the frame gets the same
     paper and fade on both sides (Sam, 26 Oct, on a 2000 px window). */
  .hero-media { --fade: min(12%, calc((100cqw - var(--fw)) * 1.5)); position: absolute; top: var(--top); right: calc((100% - var(--fw)) / 2); width: var(--fw); height: var(--fh); }
  .hero-frame { inset: 0; width: auto; height: auto; }
  .hero-media::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(to right, var(--paper), rgb(251 250 246 / 0%) var(--fade), rgb(251 250 246 / 0%) calc(100% - var(--fade)), var(--paper)); pointer-events: none; }
  .hero-media::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 4.5%; background: linear-gradient(rgb(251 250 246 / 0%), var(--paper)); pointer-events: none; }
  .hero-frame::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: calc(var(--bar-h) - var(--top)); height: 4.5%; background: linear-gradient(var(--bar-fade), rgb(243 240 231 / 0%)); -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent), linear-gradient(to right, #000 15%, transparent 20%, transparent 49.4%, #000 54.4%), linear-gradient(#000, transparent 8px); -webkit-mask-composite: source-in, source-over, source-over; mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent), linear-gradient(to right, #000 15%, transparent 20%, transparent 49.4%, #000 54.4%), linear-gradient(#000, transparent 8px); mask-composite: intersect, add, add; pointer-events: none; }
  .hero-frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(rgb(251 250 246 / 0%), rgb(251 250 246 / 40%) 45%, var(--paper)); -webkit-mask-image: linear-gradient(to right, transparent 50%, #000 60%); mask-image: linear-gradient(to right, transparent 50%, #000 60%); pointer-events: none; }
  .video-toggle { right: auto; left: calc(16px * var(--k)); bottom: calc(4.5% + 12px * var(--k)); width: calc(44px * var(--k)); height: calc(44px * var(--k)); }
  .hero-sheet { --sheet-top: 0.815; z-index: 1; width: calc(var(--fw) * 0.458); margin: calc(var(--top) + var(--fh) * var(--sheet-top)) auto 0 calc((100% - var(--fw)) / 2 + var(--fw) * 0.513); border-radius: 0; background: none; }
  .hero-sheet::before { display: none; }
  .hero-sheet::after { content: ""; position: absolute; z-index: -1; inset: -50% -8% 25%; background: radial-gradient(closest-side, rgb(251 250 246 / 90%), rgb(251 250 246 / 68%) 55%, rgb(251 250 246 / 0%)); pointer-events: none; }
  .hero-copy { display: block; width: auto; padding: 0; text-align: center; }
  .hero-copy h1 { font-size: clamp(2.25rem, calc(var(--u) * 3.15), 4.5rem); line-height: 1.08; color: #193945; }
  html[lang="ar"] .hero-copy h1 { line-height: 1.25; }
  /* The headline sits above the meal (Sam, 26 Oct 19:32 UTC), centred
     over the plate from 13.5% of the photo's height, in a box from 50.5%
     to 89.5% of its width: right of the phone in every frame of the video
     (its right edge reaches 49.6%). The lead and the buttons stay on the
     table, a little lower than under the headline (--sheet-top), below the
     plate's shadow.
     Its size follows the photo's width all the way (1.75rem at the least),
     so it keeps two lines where the photo is small.
     The photo does not mirror in Arabic, so neither does the place. A soft
     paper-coloured glow behind it keeps it readable over the curtains and
     the glass. It reaches 26% of the box's width beyond it on both sides,
     to the photo's right edge, and at least 1.6 em above and below it,
     and fades out gradually, so a one-line headline (Arabic) leaves no rim
     over the napkin. It is masked off left of 49.7% of the
     photo's width and fades in up to 54%, so the phone stays clear while
     the video plays and the glow has no visible edge beside it. */
  .hero-copy h1 { --h1-l: 0.505; --h1-w: 0.39; position: absolute; z-index: 0; left: calc(var(--fw) * (var(--h1-l) - 0.513)); width: calc(var(--fw) * var(--h1-w)); top: calc(var(--fh) * (0.135 - var(--sheet-top))); font-size: clamp(1.75rem, calc(var(--u) * 3.15), 4.5rem); }
  .hero-copy h1::after { content: ""; position: absolute; z-index: -1; inset: min(-80%, -1.6em) -26%; background: radial-gradient(closest-side, rgb(251 250 246 / 94%), rgb(251 250 246 / 90%) 50%, rgb(251 250 246 / 62%) 72%, rgb(251 250 246 / 25%) 88%, rgb(251 250 246 / 0%)); -webkit-mask-image: linear-gradient(to right, transparent calc(var(--fw) * (0.497 - var(--h1-l) + 0.26 * var(--h1-w))), #000 calc(var(--fw) * (0.54 - var(--h1-l) + 0.26 * var(--h1-w)))); mask-image: linear-gradient(to right, transparent calc(var(--fw) * (0.497 - var(--h1-l) + 0.26 * var(--h1-w))), #000 calc(var(--fw) * (0.54 - var(--h1-l) + 0.26 * var(--h1-w)))); pointer-events: none; }
  .hero-lead { max-width: 36em; margin: 0.3em auto 0; font-size: clamp(0.95rem, calc(var(--u) * 1.05), 1.3rem); font-weight: 600; line-height: 1.32; color: #1f3d48; text-wrap: balance; }
  .hero-cta { align-items: center; }
  .hero-actions { justify-content: center; margin-top: clamp(calc(6px * var(--k)), calc(var(--u) * 0.6), calc(14px * var(--k))); }
  .hero-actions .button { min-height: clamp(calc(42px * var(--k)), calc(var(--u) * 2.9), calc(58px * var(--k))); padding-inline: clamp(calc(20px * var(--k)), calc(var(--u) * 1.5), calc(30px * var(--k))); font-size: clamp(0.95rem, calc(var(--u) * 0.95), 1.15rem); }
  .hero-copy .button-secondary { background: rgb(255 255 255 / 82%); color: #193945; border-color: rgb(25 57 69 / 16%); }
  .hero-copy .button-secondary:hover { background: #fff; }
  /* The badges stay at least 40 px high (the badge rules' minimum), so they
     do not follow the desktop scale below that. */
  .hero-actions.has-badges { --badge-h: clamp(40px, calc(var(--u) * 2.9), calc(58px * var(--k))); }
  .hero-actions.has-badges .button { min-height: var(--badge-h); }
}
/* Small windows on their side (600 to 899 px wide): above the meal there
   is no room for a two-line headline, so it stays with the copy on the
   table, from 74.5% of the photo's height, as before Sam's 19:32 pick. */
@media (min-width: 600px) and (max-width: 899px) and (min-height: 500px) {
  .hero-sheet { --sheet-top: 0.745; }
  .hero-copy h1 { position: static; width: auto; font-size: clamp(2.25rem, calc(var(--u) * 3.15), 4.5rem); }
  .hero-copy h1::after { display: none; }
}
/* Tablets held upright: the table under the plate is too narrow for the
   copy, so it sits centred under the photo, on the paper the photo fades
   into. */
@media (min-width: 600px) and (max-width: 1023px) and (min-height: 500px) and (orientation: portrait) {
  .hero-sheet::after { display: none; }
  .hero-frame::after { height: 6%; -webkit-mask-image: none; mask-image: none; }
  .hero-sheet { width: min(640px, 100% - 2 * var(--gutter)); margin: calc(var(--top) + var(--fh) * 0.985) auto 0; }
  /* Above the meal there is no room for the headline here, so it stays
     with the copy. */
  .hero-copy h1 { position: static; width: auto; font-size: clamp(2.25rem, 5.4vw, 3.25rem); }
  .hero-copy h1::after { display: none; }
  .hero-lead { margin-top: 0.5em; font-size: clamp(1rem, 2.3vw, 1.2rem); }
  .hero-actions { margin-top: 20px; }
  .hero-actions .button { min-height: 48px; padding-inline: 24px; font-size: 1rem; }
}

/* Sections */
.section { padding-block: clamp(calc(64px * var(--k)), 10vw, calc(128px * var(--k))); }
.section-head { max-width: calc(760px * var(--k)); margin-inline: auto; text-align: center; }
.eyebrow { color: var(--teal); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
html[lang="ar"] .eyebrow { letter-spacing: 0; font-size: 0.9375rem; text-transform: none; }
.section h2 { margin-top: calc(10px * var(--k)); font-size: clamp(1.75rem, 4.4vw, 2.75rem); font-weight: 800; text-wrap: balance; }
.section-lead { margin-top: calc(16px * var(--k)); color: var(--ink-soft); font-size: clamp(1rem, 2vw, 1.15rem); text-wrap: pretty; }

/* What CamCalo does (Viewfinder, Sam's pick): a large statement, three
   features separated by hairlines, each with one of the logo's corners, and
   the real meal screen framed by the corners. Desktop: text left, screen
   right. Tablets: the statement across the top, then the features beside the
   screen. Phones: one column. */
.intro { background: var(--paper); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); grid-template-areas: "head shot" "list shot"; column-gap: clamp(calc(40px * var(--k)), 7vw, calc(112px * var(--k))); align-items: center; }
.intro-head { grid-area: head; align-self: end; }
.intro h2 { margin-top: 0; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.08; text-wrap: balance; }
.intro .section-lead { max-width: 34em; margin-top: calc(20px * var(--k)); }
.intro-list { grid-area: list; align-self: start; margin-top: clamp(calc(32px * var(--k)), 4vw, calc(48px * var(--k))); border-top: 1px solid var(--line); }
.intro-list li { display: grid; grid-template-columns: calc(26px * var(--k)) minmax(0, 1fr); gap: calc(18px * var(--k)); padding-block: calc(22px * var(--k)); border-bottom: 1px solid var(--line); }
.intro-list .glyph { width: calc(24px * var(--k)); height: calc(24px * var(--k)); margin-top: calc(4px * var(--k)); }
.intro-list .glyph .icon { width: 100%; height: 100%; stroke-width: 8; }
.intro-list h3 { font-size: 1.2rem; font-weight: 800; }
.intro-list p { margin-top: calc(4px * var(--k)); color: var(--ink-soft); }
.intro-shot { grid-area: shot; justify-self: center; }
.framed { position: relative; width: fit-content; padding: calc(36px * var(--k)); }
.framed .corners { --corner: calc(64px * var(--k)); --corner-stroke: 6; }
.framed .phone { width: calc(300px * var(--k)); }
@media (max-width: 1099px) {
  .intro-grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head head" "list shot"; column-gap: clamp(28px, 5vw, 56px); }
  .intro-head { max-width: 40em; }
  .framed { padding: 24px; }
  .framed .corners { --corner: 46px; }
  .framed .phone { width: 240px; }
}
@media (max-width: 699px) {
  .intro-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "list" "shot"; }
  .intro-shot { margin-top: 40px; }
  .framed .phone { width: min(260px, calc(100vw - 2 * var(--gutter) - 48px)); }
}

.how { background: var(--surface-2); }
.steps { display: grid; gap: clamp(calc(40px * var(--k)), 5vw, calc(56px * var(--k))); margin-top: clamp(calc(40px * var(--k)), 6vw, calc(64px * var(--k))); grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: step; }
.step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.step-text { max-width: calc(320px * var(--k)); margin-top: calc(28px * var(--k)); }
.step-number { display: inline-grid; place-items: center; width: calc(34px * var(--k)); height: calc(34px * var(--k)); border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: 0.9375rem; }
.step h3 { margin-top: calc(14px * var(--k)); font-size: 1.25rem; font-weight: 800; }
.step p { margin-top: calc(8px * var(--k)); color: var(--ink-soft); }
@media (max-width: 899px) {
  .steps { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* Phone frame around the real app screenshots */
.phone { position: relative; width: min(100%, calc(280px * var(--k))); padding: calc(9px * var(--k)); border-radius: calc(44px * var(--k)); background: var(--bezel); box-shadow: var(--shadow), inset 0 0 0 1.5px rgb(255 255 255 / 14%); }
.phone img { width: 100%; height: auto; border-radius: calc(35px * var(--k)); background: var(--surface); }

.features-grid { display: grid; gap: clamp(calc(40px * var(--k)), 6vw, calc(80px * var(--k))); align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.features-head { text-align: start; margin-inline: 0; }
.feature-list { display: grid; gap: calc(20px * var(--k)); margin: calc(32px * var(--k)) 0 0; }
.feature-list div { padding-inline-start: calc(18px * var(--k)); border-inline-start: 3px solid var(--primary); }
.feature-list dt { font-weight: 800; font-size: 1.15rem; }
.feature-list dd { margin: calc(4px * var(--k)) 0 0; color: var(--ink-soft); }
.feature-phones { display: flex; justify-content: center; gap: clamp(calc(16px * var(--k)), 3vw, calc(32px * var(--k))); }
.feature-phones > div { flex: 0 1 calc(260px * var(--k)); min-width: 0; }
.feature-phones > div:nth-child(2) { margin-top: calc(64px * var(--k)); }
.feature-phones .phone { width: min(100%, calc(260px * var(--k))); }
@media (max-width: 899px) {
  .features-grid { grid-template-columns: 1fr; }
  .features-head { text-align: center; margin-inline: auto; }
  .feature-list { text-align: start; }
}
@media (max-width: 520px) {
  .feature-phones > div:nth-child(2) { margin-top: 40px; }
  .feature-phones .phone { padding: 6px; border-radius: 30px; }
  .feature-phones .phone img { border-radius: 25px; }
}

.pricing-grid { display: grid; gap: calc(24px * var(--k)); align-items: start; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); max-width: calc(980px * var(--k)); }
.price-card { padding: clamp(calc(28px * var(--k)), 5vw, calc(48px * var(--k))); border-radius: calc(32px * var(--k)); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.price-card h2 { margin-top: calc(8px * var(--k)); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(4px * var(--k)) calc(10px * var(--k)); margin-top: calc(16px * var(--k)); }
.price-amount { font-size: clamp(2.5rem, 7vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; unicode-bidi: isolate; }
.price-period { color: var(--muted); font-weight: 600; }
/* The Unlimited claim, with "Unlimited" in the brand blue, and its Fair Use
   qualifier right under it. */
.unlimited { margin-top: calc(24px * var(--k)); font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
html[lang="ar"] .unlimited { letter-spacing: 0; line-height: 1.4; }
.unlimited strong { color: var(--primary-ink); }
.check-list { display: grid; gap: calc(12px * var(--k)); margin-top: calc(22px * var(--k)); padding-top: calc(22px * var(--k)); border-top: 1px solid var(--line); }
.check-list li { display: flex; gap: calc(12px * var(--k)); align-items: flex-start; font-weight: 600; }
.check-list .icon { margin-top: calc(2px * var(--k)); color: var(--check); }
.fair-use { margin-top: calc(8px * var(--k)); color: var(--ink-soft); font-size: 0.9375rem; }
.fair-use a { white-space: nowrap; }
.renews { margin-top: calc(22px * var(--k)); font-size: 0.9375rem; font-weight: 600; }
.price-card .button { margin-top: calc(24px * var(--k)); }
.fine-print { margin-top: calc(14px * var(--k)); color: var(--muted); font-size: 0.8125rem; }
.free-card { padding: calc(28px * var(--k)); border-radius: var(--radius); background: var(--surface-2); border: 1px dashed var(--line); }
.free-card h3 { font-size: 1.1rem; font-weight: 800; }
.free-card p { margin-top: calc(10px * var(--k)); color: var(--ink-soft); font-size: 0.9375rem; }
@media (max-width: 899px) { .pricing-grid { grid-template-columns: 1fr; max-width: 560px; } }

.closing { padding: 0 var(--gutter) clamp(calc(64px * var(--k)), 10vw, calc(120px * var(--k))); }
.closing-inner { width: min(calc(1180px * var(--k)), 100%); padding: clamp(calc(40px * var(--k)), 7vw, calc(80px * var(--k))) clamp(calc(24px * var(--k)), 6vw, calc(72px * var(--k))); border-radius: calc(36px * var(--k)); background: linear-gradient(135deg, var(--closing-from), var(--closing-to)); color: #fff; text-align: center; }
.closing h2 { font-size: clamp(1.75rem, 4.4vw, 2.75rem); font-weight: 800; }
.closing p { max-width: 34em; margin: calc(14px * var(--k)) auto 0; color: rgb(255 255 255 / 86%); font-size: 1.1rem; }
.closing .button { margin-top: calc(28px * var(--k)); }

.footer { padding-block: calc(56px * var(--k)) calc(32px * var(--k)); border-top: 1px solid var(--line); background: var(--paper); font-size: 0.9375rem; }
.footer-grid { display: grid; gap: calc(32px * var(--k)); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.footer-brand p { margin-top: calc(12px * var(--k)); color: var(--ink-soft); max-width: 30em; }
.footer-brand .footer-disclaimer { color: var(--muted); font-size: 0.875rem; }
.footer-title { margin-bottom: calc(10px * var(--k)); color: var(--muted); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
html[lang="ar"] .footer-title { letter-spacing: 0; font-size: 0.875rem; text-transform: none; }
.footer-links + .footer-title { margin-top: calc(24px * var(--k)); }
.footer-links { display: grid; gap: calc(6px * var(--k)); }
.footer-links a { color: var(--ink-soft); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
.footer-links a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.footer-bottom { margin-top: calc(40px * var(--k)); padding-top: calc(20px * var(--k)); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }
.trademarks { margin-top: calc(12px * var(--k)); font-size: 0.8125rem; }
.preview-notice { margin-block-end: calc(12px * var(--k)); padding: calc(10px * var(--k)) calc(14px * var(--k)); border: 1px solid var(--line); border-radius: calc(12px * var(--k)); color: var(--ink-soft); background: rgb(59 124 232 / 6%); }
.company-pending { padding: calc(10px * var(--k)) calc(14px * var(--k)); border: 1px dashed #c58a1a; border-radius: calc(12px * var(--k)); color: #8a5a00; background: rgb(242 179 5 / 10%); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .footer-brand { grid-column: 1 / -1; } }
/* Below 360 px a long Swedish link and the support address no longer fit side by side. */
@media (max-width: 359px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

.not-found { padding-block: clamp(calc(64px * var(--k)), 12vw, calc(140px * var(--k))); text-align: center; }
.not-found h1 { font-size: clamp(2rem, 6vw, 3rem); font-weight: 800; }
.not-found p { margin-top: calc(16px * var(--k)); color: var(--ink-soft); }
.not-found-languages { display: flex; justify-content: center; gap: calc(16px * var(--k)); margin-top: calc(24px * var(--k)); }

/* Narrow top bar: the mark only, no section links. At the bigger bar sizes
   the full logo, Open CamCalo and Get started need about 635 px, and the
   section links another 230 px, so the compact bar runs up to 639 px. With
   the bigger bar text from 680 px the links need about 15 px more, so they
   show from 920 px. */
@media (max-width: 919px) { .topnav { display: none; } }
@media (max-width: 639px) {
  .topbar-inner { gap: 10px; }
  .brand img { height: 46px; }
  .topbar-actions { gap: 6px; }
  .topbar-open { font-size: 0.875rem; }
  .lang-menu summary { padding-inline: 8px; }
  .lang-menu summary .icon { display: none; }
  /* Under the bar at its end edge, so the menu never leaves a narrow screen
     wherever the button sits (it moves when Open CamCalo hides). */
  .lang-menu { position: static; }
  .lang-menu ul { inset-inline-end: var(--gutter); }
  .button-small { padding-inline: 14px; }
}
@media (max-width: 359px) { .topbar-open { display: none; } }

/* Scroll reveal. Only with the motion class, which site.js sets when the
   visitor has not asked for reduced motion. */
.motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms ease, transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.motion .reveal.is-visible { opacity: 1; transform: none; }
.motion .reveal.delay-1 { transition-delay: 60ms; }
.motion .reveal.delay-2 { transition-delay: 160ms; }
.motion .reveal.delay-3 { transition-delay: 260ms; }
.motion .step .phone { transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1); transform: translateY(24px) scale(0.97); }
.motion .step.is-visible .phone { transform: none; }
/* The corners around the intro's phone close in onto it once, like a camera
   finding focus (Sam, 26 Oct). Each corner is flipped to face its own
   direction, so one translate moves all four outward. Reduced motion and no
   script show them in place. */
.motion .intro-shot .corner .icon { opacity: 0; transform: translate(-38%, -38%); transition: opacity 450ms ease 250ms, transform 1100ms cubic-bezier(0.23, 1, 0.32, 1) 250ms; }
.motion .intro-shot.is-visible .corner .icon { opacity: 1; transform: none; }