/* Zimam landing page. Every value comes from Code/App/Theme/ZimamTheme.swift or the design rules;
   this is the page's final, still state. Motion (Tasks 6–7) only adds transforms and fades on top. */

/* The brand's font (Alan Sans, Arabic and Latin in one family), served by the site itself. */
@font-face { font-family: "Alan Sans"; src: url("/fonts/AlanSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alan Sans"; src: url("/fonts/AlanSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alan Sans"; src: url("/fonts/AlanSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

/* ZimamTheme colours, defined once. */
:root {
  --ink: #16151F;
  --secondary: rgba(22, 21, 31, 0.68);
  --bg: #F2F2F7;
  --white: #FFFFFF;
  --line: rgba(22, 21, 31, 0.12);
  --tasks: #333EEB;
  --events: #C41452;
  --habits: #F4580C;
  --goals: #00AB45;
  --tasks-face: #CCEDFE;
  --events-face: #FCE9FF;
  --habits-face: #FFE44C;
  --goals-face: #F7FFE0;
  --habits-deep: #E64A00;
  --goals-deep: #009832;
  --done: #248A3D;
  --done-text: #207936; /* ZColor.systemGreenText: success words (5.46:1 on white); --done is for fills */
  --ochre: #A97C00;
  --imp-high: #D70015;
  --imp-medium: #E06C00;

  /* Cards: radius-card 24, the brand border and shadow (a CSS blur is twice a SwiftUI radius). */
  --radius-card: 24px;
  --shadow-card: 0 1px 3px rgba(22, 21, 31, 0.06);

  /* The 4/8 spacing grid. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --tap: 44px;
  --button: 50px; /* ZSize.onboardingContinue and appleButton: the large main button. */

  --gutter: var(--s4);
  --bar-h: calc(var(--tap) + 2 * var(--s3));
  --section: calc(2 * var(--s8));

  /* The iPhone 17 frame: a 402 × 874 screen. Bezel, screen corner and island are measured from the
     approved store image 07 (Design/App-Store-Screenshots), so the frame matches the store's. */
  --screen-w: 402px;
  --screen-h: 874px;
  --bezel: 15px;
  --screen-radius: 65px;
  --island-w: 124px;
  --island-h: 35px;
  --island-top: 14px;
  --phone-w: calc(var(--screen-w) + 2 * var(--bezel));
  --phone-h: calc(var(--screen-h) + 2 * var(--bezel));
  /* Phones are scaled as one piece (never stretched): one number per screen size. */
  --phone-scale: 0.62;
}
/* Below 300 px (an iPhone zoomed to 200%), the phone shrinks to fit inside the gutters. */
@media (max-width: 299px) { :root { --phone-scale: 0.38; } }
@media (min-width: 375px) { :root { --phone-scale: 0.74; } }
@media (min-width: 402px) { :root { --phone-scale: 0.8; } }
@media (min-width: 768px) { :root { --gutter: var(--s8); --phone-scale: 0.8; } }
@media (min-width: 768px) and (max-height: 860px) { :root { --phone-scale: 0.72; } }
@media (min-width: 1200px) and (min-height: 1000px) { :root { --phone-scale: 0.9; } }

/* Paired line heights: Arabic needs taller lines than English at the same size. */
html:lang(ar) { --lh-large: 45px; --lh-title3: 29px; --lh-headline: 26px; --lh-body: 26px; --lh-sub: 24px; --lh-foot: 20px; }
html:lang(en) { --lh-large: 41px; --lh-title3: 25px; --lh-headline: 22px; --lh-body: 22px; --lh-sub: 20px; --lh-foot: 18px; }

/* Type: ZimamTheme's styles. The display sizes are the onboarding welcome headline's three steps. */
.t-display { font-size: 48px; line-height: 56px; font-weight: 600; }
@media (min-width: 768px) { .t-display { font-size: 56px; line-height: 64px; } }
@media (min-width: 1200px) { .t-display { font-size: 64px; line-height: 72px; } }
.t-large { font-size: 34px; line-height: var(--lh-large); font-weight: 600; }
.t-lede { font-size: 20px; line-height: var(--lh-title3); font-weight: 400; max-inline-size: 60ch; } /* title3Count; 60 characters a line keeps long text readable */
.t-headline { font-size: 17px; line-height: var(--lh-headline); font-weight: 600; }
.t-sub { font-size: 15px; line-height: var(--lh-sub); font-weight: 400; }
.t-foot { font-size: 13px; line-height: var(--lh-foot); font-weight: 400; }
.secondary { color: var(--secondary); }

/* Page. `clip` (not `hidden`) stops sideways scrolling without breaking the sticky top bar. */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { background: var(--bg); color-scheme: light; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar-h); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Alan Sans", system-ui, sans-serif; font-size: 17px; line-height: var(--lh-body); }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: var(--s1); }
.container { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }

/* Top bar: the mark and name, the language switch and the pinned download button. */
.top-bar { position: sticky; top: 0; z-index: 10; background: var(--bg); border-block-end: 1px solid var(--line); }
.top-bar .container { display: flex; align-items: center; gap: var(--s3); min-block-size: var(--bar-h); }
.brand { display: inline-flex; align-items: center; gap: var(--s2); min-inline-size: var(--tap); min-block-size: var(--tap); margin-inline-end: auto; }
.brand img { inline-size: var(--s8); block-size: var(--s8); }
/* Under 375 the bar holds only the mark, the switch and the button; the name stays for screen readers. */
@media (max-width: 374px) { .brand span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
.lang-switch { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--tap); min-block-size: var(--tap); }

/* The main action: a blue capsule (blue is for the main action and Tasks only). */
.button { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--tap); padding-inline: var(--s4); border-radius: 999px; background: var(--tasks); color: var(--white); white-space: nowrap; }
/* Apple's App Store badge, kept at its own proportions and at least 40 px tall. Apple asks for clear
   space of a quarter of its height on every side; the gaps around it give that (16 and 24). */
.badge { display: inline-flex; border-radius: var(--s2); }
.badge img { block-size: var(--button); inline-size: auto; }
.badge--large img { block-size: calc(2 * var(--s8)); }

/* Hero and the goal story share one phone: it sits beside the hero and stays pinned
   (CSS sticky) while the three beats scroll past, so it works before any script runs. */
.goal-scene { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s8); grid-template-areas: "hero" "stage" "story"; padding-block-start: var(--s8); }
.hero { grid-area: hero; display: flex; flex-direction: column; gap: var(--s4); }
.hero .cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); padding-block-start: var(--s2); }
.goal-stage { grid-area: stage; justify-self: center; }
.story { grid-area: story; display: flex; flex-direction: column; }
.beat { display: flex; flex-direction: column; gap: var(--s2); padding-block: var(--s6); border-block-start: 1px solid var(--line); }
.beat:first-child { border-block-start: 0; }
.completed { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--s2); min-block-size: var(--tap); padding-inline: var(--s4); margin-block-start: var(--s3); border-radius: 999px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-card); color: var(--done-text); }
.completed::before { content: ""; inline-size: var(--s2); block-size: var(--s2); border-radius: 50%; background: var(--done); }
@media (min-width: 768px) {
  .goal-scene { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "hero stage" "story stage"; column-gap: var(--s8); row-gap: 0; padding-block-start: 0; }
  .hero { justify-content: center; min-block-size: calc(100svh - var(--bar-h)); padding-block: var(--s8); }
  .goal-stage .phone-slot { position: sticky; top: calc(var(--bar-h) + var(--s6)); }
  .goal-stage { padding-block: var(--s6); }
  .beat { justify-content: center; min-block-size: 70svh; border-block-start: 0; padding-block: var(--s8); }
}

/* The iPhone frame, scaled from its true size as one piece. The negative margins shrink its
   layout box to the scaled size, so neighbours sit where the scaled phone is. */
.phone-slot { display: block; }
.phone {
  position: relative;
  inline-size: var(--phone-w);
  block-size: var(--phone-h);
  padding: var(--bezel);
  border-radius: calc(var(--screen-radius) + var(--bezel));
  background: var(--ink);
  transform: scale(var(--phone-scale));
  transform-origin: top center;
  margin-inline: calc(var(--phone-w) * (var(--phone-scale) - 1) / 2);
  margin-block-end: calc(var(--phone-h) * (var(--phone-scale) - 1));
}
.phone-screen { position: relative; inline-size: var(--screen-w); block-size: var(--screen-h); border-radius: var(--screen-radius); overflow: hidden; background: var(--bg); }
.phone-screen > img { inline-size: var(--screen-w); block-size: var(--screen-h); }
.island { position: absolute; inset-block-start: calc(var(--bezel) + var(--island-top)); inset-inline: 0; margin-inline: auto; inline-size: var(--island-w); block-size: var(--island-h); border-radius: 999px; background: var(--ink); }

/* The live goal phone (goal-phone.js). The capture underneath is the real app; each part below
   covers only what changes, at the place it has in the capture (in points, measured from the
   capture: Arabic rows sit a little lower than English ones). Sizes and type are ZimamTheme's:
   stat 44/52, statSmall 22/32, headline 17/26, footnote 13/20, the 24 checkbox, the 8 goal bar. */
.gp {
  --gp-target-top: 124px; --gp-target-start: 17.33px;
  --gp-summary-top: 189.17px; --gp-percent-top: 206.67px; --gp-completed-top: 210px;
  --gp-count-start: 32px; --gp-percent-end: 32.17px; --gp-done-end: 54.83px;
  --gp-streak-end-1: 32.17px; --gp-streak-end-2: 32.17px;
  --gp-bar-top: 253px;
  --gp-row-1: 340px; --gp-row-2: 401px; --gp-row-3: 462px;
  --gp-done-top: 572.5px;
  --gp-streak-1: 665.17px; --gp-streak-2: 714.17px;
  --gp-banner-bottom: 96px;
  --gp-start: 32.67px; /* card content: the card's 16.67 edge plus its s4 padding */
  --gp-track: color-mix(in srgb, var(--ochre) 12%, transparent); /* ZOpacity.tint */
  --gp-mark: var(--ochre);
  --gp-ease: cubic-bezier(0.16, 1, 0.3, 1); /* ZBrand.Motion.arrive */
  position: absolute; inset: 0; pointer-events: none; color: var(--ink);
}
html:lang(ar) .gp {
  --gp-target-top: 125.67px; --gp-target-start: 17.67px;
  --gp-summary-top: 193.5px; --gp-percent-top: 211.17px; --gp-completed-top: 214px;
  --gp-count-start: 32px; --gp-percent-end: 31.83px; --gp-done-end: 54.67px;
  --gp-streak-end-1: 32.17px; --gp-streak-end-2: 32px;
  --gp-bar-top: 258px;
  --gp-row-1: 348px; --gp-row-2: 411px; --gp-row-3: 474px;
  --gp-done-top: 585.33px;
  --gp-streak-1: 680.33px; --gp-streak-2: 729.5px;
}
.gp > * { position: absolute; }
.gp.is-complete { --gp-track: color-mix(in srgb, var(--done) 12%, transparent); --gp-mark: var(--done); }

/* The target turns done green: the page colour hides the ochre one, and the capture's own
   target shape (target-mask.png) is filled green over it. */
.gp-target { inset-block-start: var(--gp-target-top); inset-inline-start: var(--gp-target-start); inline-size: 26.67px; block-size: 26.67px; background: var(--bg); opacity: 0; }
.gp-target::after { content: ""; position: absolute; inset: 0; background: var(--done); -webkit-mask: url("/landing/img/target-mask.png") center / 100% 100%; mask: url("/landing/img/target-mask.png") center / 100% 100%; }
.gp.is-complete .gp-target { opacity: 1; }

/* Text on white covers the capture's text; the white ring hides its soft edges. */
.gp-count, .gp-percent, .gp-done-count, .gp-streak { background: var(--white); box-shadow: 0 0 0 2px var(--white); white-space: nowrap; }
.gp-count { inset-block-start: var(--gp-summary-top); inset-inline-start: var(--gp-count-start); font-size: 44px; line-height: 52px; font-weight: 600; }
.gp-percent { inset-block-start: var(--gp-percent-top); inset-inline-end: var(--gp-percent-end); font-size: 22px; line-height: 32px; font-weight: 600; unicode-bidi: isolate; }
/* «منجز» is narrower than the capture's "50%": the cover keeps that width (44.33 measured, plus
   its 2 px ring) so no part of the percent shows, and the word sits at the end as in the app. */
.gp.is-complete .gp-percent { inset-block-start: var(--gp-completed-top); min-inline-size: 46px; text-align: end; font-size: 17px; line-height: 26px; }

.gp-track { inset-block-start: var(--gp-bar-top); inset-inline-start: 32px; inline-size: 338px; block-size: 8px; border-radius: 999px; overflow: hidden; background: linear-gradient(var(--gp-track), var(--gp-track)), var(--white); box-shadow: 0 0 0 1px var(--white); }
/* The fill grows from the inline start: the left edge in English, the right edge in Arabic
   (transform-origin has no logical keyword). */
.gp-fill { position: absolute; inset: 0; border-radius: 999px; background: var(--gp-mark); transform-origin: 0 50%; transform: scaleX(1); transition: transform 0.6s var(--gp-ease), background-color 0.3s ease-out; }
html[dir="rtl"] .gp-fill { transform-origin: 100% 50%; }

/* ZTaskCheckbox done: the green check grows from 60% as it fades in. */
.gp-tick { inset-inline-start: 32px; inline-size: 24px; block-size: 24px; opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease-out, transform 0.3s ease-out; }
.gp-tick img { display: block; inline-size: 24px; block-size: 24px; }
.gp-tick.is-on { opacity: 1; transform: none; }
.gp-tick[data-tick="0"] { inset-block-start: var(--gp-row-1); }
.gp-tick[data-tick="1"] { inset-block-start: var(--gp-row-2); }
.gp-tick[data-tick="2"] { inset-block-start: var(--gp-row-3); }

.gp-done-count { inset-block-start: var(--gp-done-top); inset-inline-end: var(--gp-done-end); font-size: 17px; line-height: 26px; color: var(--secondary); }
/* English writes the count in brackets, Arabic as a plain grey number (12, new brand). */
html:lang(en) .gp-done-count::before { content: "("; }
html:lang(en) .gp-done-count::after { content: ")"; }
.gp-streak { font-size: 13px; line-height: 20px; }
.gp-streak b { font-weight: 600; }
.gp-streak[data-streak="0"] { inset-block-start: var(--gp-streak-1); inset-inline-end: var(--gp-streak-end-1); }
.gp-streak[data-streak="1"] { inset-block-start: var(--gp-streak-2); inset-inline-end: var(--gp-streak-end-2); }

/* The «أنجزت الهدف» undo banner: 16 from each side, white card, the goal character at 32 in a
   36 slot, filterAction 15/24 600, ZShadow.undo. It rises 8 with a fade in 0.2 s. */
.gp-banner {
  inset-inline: var(--s4); inset-block-end: var(--gp-banner-bottom);
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(22, 21, 31, 0.07);
  font-size: 15px; line-height: 24px; font-weight: 600;
  opacity: 0; transform: translateY(8px); transition: opacity 0.2s var(--gp-ease), transform 0.2s var(--gp-ease);
}
.gp-banner img { inline-size: 32px; block-size: 32px; margin: 2px; }
.gp-banner.is-on { opacity: 1; transform: none; }
.gp.is-instant, .gp.is-instant * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .gp-banner { transform: none; } .gp-tick { transform: none; } }

/* Motion (landing.js). `html.motion` is set before these styles load, and only when motion will
   run: without script, or with reduced motion (`html.reduce`), the page keeps its final state. */
html.motion .reveal, html.motion .goal-stage { opacity: 0; }
html.motion .sticky-cta { opacity: 0; visibility: hidden; }
@media (max-width: 299px) { .sticky-cta { display: none; } }
/* Each beat fills the space under the top bar, so one beat at a time sits beside the pinned phone. */
@media (min-width: 768px) { html.motion .beat { min-block-size: calc(100svh - var(--bar-h)); } }
/* On phones the goal phone pins under the top bar, smaller, and the beats pass through the space
   below it. landing.js measures that scale and space (--phone-scale, --story-window) per width. */
@media (max-width: 767px) {
  html.motion .goal-stage { position: sticky; top: var(--bar-h); z-index: 1; justify-self: stretch; display: flex; justify-content: center; margin-inline: calc(-1 * var(--gutter)); padding-block: var(--s4); background: var(--bg); }
  html.motion .beat { min-block-size: var(--story-window, auto); justify-content: center; border-block-start: 0; }
  html.motion.unpinned .goal-stage { position: static; }
}
/* Reduced motion: nothing pins, and the beats are only as tall as their words. */
@media (prefers-reduced-motion: reduce) { .goal-stage .phone-slot { position: static; } .beat { min-block-size: auto; } }
html.reduce .goal-stage .phone-slot { position: static; }
html.reduce .beat { min-block-size: auto; }

/* Two columns from 768: words and phone. `--flip` puts the phone first. */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s8); align-items: center; }
.split-copy { display: flex; flex-direction: column; gap: var(--s3); }
.split-stage { justify-self: center; }
@media (min-width: 768px) {
  .split { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s8); }
  .split--flip { grid-template-columns: auto minmax(0, 1fr); }
  .split--flip .split-stage { order: -1; }
}

/* Today: the four parts lift out of the phone as cards. */
.today-stage { display: flex; flex-direction: column; align-items: center; gap: var(--s6); }
.lifts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); inline-size: 100%; }
/* On phones the cards span the text column (on the page margins), not just the phone's width. */
@media (max-width: 767px) { .today-stage { justify-self: stretch; } }
.lift { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.lift img { inline-size: var(--s8); block-size: var(--s8); flex: none; }
@media (min-width: 1024px) {
  .today-stage { position: relative; }
  .lifts { display: contents; }
  .lift { position: absolute; inline-size: max-content; }
  .lift[data-lift="tasks"] { inset-block-start: 14%; inset-inline-start: calc(-4 * var(--s8)); }
  .lift[data-lift="events"] { inset-block-start: 38%; inset-inline-end: calc(-4 * var(--s8)); }
  .lift[data-lift="habits"] { inset-block-start: 58%; inset-inline-start: calc(-4 * var(--s8)); }
  .lift[data-lift="goals"] { inset-block-start: 78%; inset-inline-end: calc(-4 * var(--s8)); }
}

/* The four characters: each one is a button that shows its part's screen. */
.characters-head { text-align: center; }
.character-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); padding-block: var(--s6); }
@media (min-width: 375px) { .character-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 768px) { .character-row { grid-template-columns: repeat(4, max-content); justify-content: center; gap: var(--s6); } .character { padding-inline: var(--s4); } }
.character { display: flex; flex-direction: column; align-items: center; gap: var(--s2); min-block-size: var(--tap); padding: var(--s3) var(--s1); border: 1px solid transparent; border-radius: var(--radius-card); background: none; color: var(--ink); font: inherit; text-align: center; cursor: pointer; }
.character-art { inline-size: 56px; block-size: 56px; overflow: visible; } /* ZSize.alertCharacter; the face may look 3 px past the edge */
/* The next screen fades in over the current one, then takes its place (landing.js). */
.phone-screen > .character-next { position: absolute; inset-block-start: 0; inset-inline-start: 0; }
.character[aria-pressed="true"] { background: var(--white); border-color: var(--line); box-shadow: var(--shadow-card); }
.character-stage { display: flex; justify-content: center; }

/* Trust row. */
.trust-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.trust-list li { display: flex; align-items: center; justify-content: center; min-block-size: calc(2 * var(--s8)); padding: var(--s3) var(--s4); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); text-align: center; }
@media (min-width: 768px) { .trust-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Final call: the mark signs off. */
.download { display: flex; flex-direction: column; align-items: center; gap: var(--s6); text-align: center; }
/* The QR code shows only on computers, where the visitor is not already on an iPhone. */
.qr { display: none; }
@media (min-width: 1024px) { .qr { display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin: 0; } .qr img { inline-size: calc(4 * var(--s8)); block-size: calc(4 * var(--s8)); } }
.download .mark { inline-size: calc(2 * var(--s8)); block-size: calc(2 * var(--s8)); }

/* Footer. */
.footer { border-block-start: 1px solid var(--line); }
.footer .container { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--s6); padding-block: var(--s4); }
.footer a { display: inline-flex; align-items: center; min-block-size: var(--tap); }