/* ===== GRND — Design tokens ===== */
:root {
    --ink: #1A1A1A;
    --ink-soft: #5A5A5A;
    --muted: #8E8E93;
    --hair: #EEEEEE;
    --border: #CACACA;
    --bg: #FAFAFA;
    --surface: #FFFFFF;
    --gold: #FFD700;
    --gold-deep: #C9A800;
    --green: #22C55E;
    --green-deep: #1B7A3D;
    --success: #10B981;

    --wood: #8B5E3C;    --wood-light: #F5EDE6;
    --stone: #7A8A99;   --stone-light: #EDF0F3;
    --iron: #4A6572;    --iron-light: #E8EEF1;
    --gold-rank: #C9A800; --gold-rank-light: #FFF9E0;
    --diamond: #2196F3; --diamond-light: #E3F2FD;
    --beast: #D32F2F;   --beast-light: #FFEBEE;

    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --shadow-card: 0 10px 40px rgba(0,0,0,0.08);
    --shadow-phone: 0 20px 60px rgba(0,0,0,0.25);
}

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

.ic-svg { display: inline-flex; width: 100%; height: 100%; line-height: 0; }
.ic-svg svg { width: 100%; height: 100%; display: block; }
[data-icon] svg, .st-pill-ic svg, .ic svg { width: 100%; height: 100%; display: block; }

/* IBM Plex Sans Arabic — the same TTFs the app loads in utils/fontLoader.js.
   The app ships nothing heavier than Bold, so 700 is the ceiling here too. */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/assets/fonts/IBMPlexSansArabic-Light.ttf') format('truetype');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/assets/fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/assets/fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/assets/fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/assets/fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap;
}
/* 800 maps to the Bold file rather than letting the browser synthesise a
   heavier face the app never shows. */
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('/assets/fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
    font-weight: 800; font-style: normal; font-display: swap;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--ink);
    overflow-x: hidden;
}

/* Form controls don't inherit font-family by default — without this, every
   button/input in the demos falls back to the browser's UI font while the
   headings around them render in IBM Plex. */
button, input, select, textarea, optgroup {
    font-family: inherit;
}

img { max-width: 100%; display: block; }

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== Top nav ===== */
.topnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250,250,250,0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hair);
}

.topnav-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
}
.brand img {
    height: 22px;
    width: auto;
    display: block;
}

.nav-links {
    display: none;
    gap: 32px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-soft);
}

.nav-links a { color: inherit; text-decoration: none; transition: color .15s; }
.nav-links a:hover { color: var(--ink); }

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ink);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 999px;
    text-decoration: none;
    transition: opacity .15s, transform .15s;
}
.nav-cta:active { transform: scale(0.96); }
.nav-cta svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ===== Download button + store popover (nav & dockbar) ===== */
.dl { position: relative; flex-shrink: 0; }
.dl-trigger { cursor: pointer; font-family: inherit; border: none; }
/* Both platform marks, side by side. */
.dl-icons { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.dl-icons svg { display: block; }
.dl-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 168px;
    background: #fff;
    border: 1px solid var(--hair);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 70;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.dl.open .dl-pop { opacity: 1; visibility: visible; transform: translateY(0); }
/* Dockbar sits at the bottom — its popover opens upward. */
.dl-up .dl-pop { top: auto; bottom: calc(100% + 8px); transform: translateY(6px); }
.dl-up.open .dl-pop { transform: translateY(0); }
.dl-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background .13s;
}
.dl-opt:hover { background: var(--bg); }
.dl-opt svg { width: 17px; height: 17px; flex-shrink: 0; }

@media (min-width: 900px) {
    .nav-links { display: flex; }
}

/* ===== Hero ===== */
.hero {
    padding: 64px 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--hair);
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-soft);
    box-shadow: var(--shadow-card);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,0.15); }

.hero h1 {
    font-size: clamp(40px, 7.5vw, 72px);
    font-weight: 800;
    line-height: 1.15;
    max-width: 900px;
}

.hero p.sub {
    font-size: clamp(17px, 2.4vw, 22px);
    color: #3D3D3D;
    font-weight: 500;
    max-width: 600px;
    line-height: 1.75;
}

.store-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .15s, transform .15s;
}
.store-btn:active { transform: scale(0.97); opacity: 0.85; }
.store-btn.apple { background: var(--ink); color: #fff; }
.store-btn.google { background: var(--surface); color: var(--ink); border: 1px solid var(--hair); }
.store-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.hero-visual {
    margin-top: 12px;
    position: relative;
}

/* ===== Hero carousel =====
   Slides are 1260x2736 App Store images that already include a phone render,
   so they're shown flat — no extra frame. Cross-fade rather than slide, so the
   phone in each image appears to stay put. */
/* Slides sit in a row you scroll/swipe across — neighbours stay partly visible
   so it reads as a strip, and each one snaps to centre. */
.hs {
    display: flex;
    /* The page is RTL, which would start the strip at the right and run it
       leftward — the slides read left-to-right, so force LTR here. */
    direction: ltr;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Full-bleed past .wrap's padding, with the first/last slide centred.
       Physical left/right rather than the logical *-inline properties: those
       resolve against this element's own direction (ltr) while the page is
       rtl, so the bleed would compute from the wrong edge. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 160px);
    padding-right: calc(50vw - 160px);
    scroll-padding-left: calc(50vw - 160px);
    scroll-padding-right: calc(50vw - 160px);
}
.hs::-webkit-scrollbar { display: none; }
.hs-slide {
    flex: 0 0 320px;
    width: 320px; height: auto;
    display: block;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    scroll-snap-align: center;
    /* Neighbours dim slightly so the centred slide reads as the focus, and
       click to bring one to the middle. */
    opacity: 0.45;
    cursor: pointer;
    transition: opacity .35s ease, transform .35s ease;
}
.hs-slide:not(.is-active):hover { opacity: 0.75; }
.hs-slide.is-active { opacity: 1; cursor: default; }

@media (max-width: 520px) {
    .hs {
        padding-left: 11vw; padding-right: 11vw;
        scroll-padding-left: 11vw; scroll-padding-right: 11vw;
        gap: 14px;
    }
    .hs-slide { flex-basis: 78vw; width: 78vw; }
}

/* Match the strip's direction so dot order tracks slide order. */
.hs-dots { display: flex; direction: ltr; justify-content: center; gap: 6px; margin-top: 18px; }
.hs-dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: var(--border); border: none; padding: 0;
    cursor: pointer; transition: width .25s, background .25s;
}
.hs-dot.active { width: 18px; background: var(--ink); }

/* ===== Phone mockup ===== */
.phone {
    width: 280px;
    aspect-ratio: 9 / 19.5;
    background: #000;
    border-radius: 46px;
    padding: 5px;
    box-shadow: var(--shadow-phone);
    position: relative;
    flex-shrink: 0;
}
.phone.small { width: 240px; }
.phone-notch {
    position: absolute;
    top: 5px; left: 50%;
    transform: translateX(-50%);
    width: 42%;
    height: 22px;
    background: #000;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    z-index: 5;
}
.phone-screen {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 40px;
    overflow: hidden;
    position: relative;
    direction: rtl;
}
.phone-screen img.fill {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* ===== Sections ===== */
.section {
    padding: 88px 0;
}
.section-alt { background: var(--surface); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }

.feature-row {
    display: flex;
    flex-direction: column;
    gap: 48px;
    align-items: center;
}

@media (min-width: 960px) {
    .feature-row {
        flex-direction: row;
        align-items: center;
        gap: 72px;
    }
    .feature-row.reverse { flex-direction: row-reverse; }
    .feature-text { flex: 0 0 42%; }
    .feature-demo { flex: 1; display: flex; justify-content: center; }

    /* The demo card is a fixed height, so centring is stable — but keep the
       columns top-aligned so the heading sits level with the card. */
    #workout.section .feature-row { align-items: flex-start; }
}

.feature-text { text-align: center; }
@media (min-width: 960px) { .feature-text { text-align: right; } }


.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.tag.tag-black { background: var(--ink); color: #fff; }
.tag.tag-gold { background: var(--gold); color: var(--ink); }
.tag.tag-green { background: #E7F8ED; color: var(--green-deep); }
.tag.tag-blue { background: var(--diamond-light); color: var(--diamond); }

.feature-text h2 {
    font-size: clamp(32px, 5vw, 47px);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 14px;
}

.feature-text p {
    font-size: 18px;
    color: var(--ink-soft);
    line-height: 1.75;
    max-width: 500px;
    margin: 0 auto;
}
@media (min-width: 960px) { .feature-text p { margin: 0; margin-right: 0; } }

.feature-text .hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--hair);
    padding: 8px 14px;
    border-radius: 999px;
}
.hint .pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold-deep);
    animation: pulse 1.6s infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,0,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(201,168,0,0); }
}

/* ===== Section header (centered, non-split sections) ===== */
.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}
.section-head h2 { font-size: clamp(32px, 5vw, 47px); font-weight: 800; line-height: 1.25; margin-bottom: 12px; }
.section-head p { color: var(--ink-soft); font-size: 18px; line-height: 1.7; }

/* ===== Shared bottom tab bar (present on every phone demo) ===== */
.app-tabbar {
    display: flex;
    border-top: 1px solid var(--hair);
    background: #fff;
    padding: 6px 4px 8px;
    flex-shrink: 0;
}
.app-tabbar .tb-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 8.5px; color: var(--muted); font-weight: 500;
}
.app-tabbar .tb-item .tb-ic { width: 17px; height: 17px; display: block; }
.app-tabbar .tb-item.active { color: var(--ink); font-weight: 700; }
.app-tabbar .tb-item.active .tb-ic-wrap {
    background: var(--hair);
    border-radius: 10px;
    padding: 3px 10px;
}

/* ===================================================== */
/* WORKOUT BUILDER DEMO                                   */
/* ===================================================== */
/* Standalone (no phone frame) — the builder rendered as a real page element. */
.wb-live {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.09);
    overflow: hidden;
    position: relative;
    direction: rtl;
}
.wb-live .wb-body { padding: 18px; gap: 18px; }
.wb-live .wb-score { padding: 16px; border-radius: 16px; }
.wb-live .wb-score-title { font-size: 16px; }
.wb-live .wb-score-sub { font-size: 11px; }
.wb-live .wb-check { width: 24px; height: 24px; }
.wb-live .wb-chevron { width: 18px; height: 18px; }
.wb-live .wb-grid span { font-size: 12px; gap: 5px; }
.wb-live .wb-grid-mark { font-size: 13px; }
.wb-live .wb-suggested-heading,
.wb-live .wb-days-head > span { font-size: 16px; }
.wb-live .wb-suggested-label { font-size: 11px; }
.wb-live .wb-suggested-val { font-size: 13px; }
.wb-live .wb-suggested-ic { width: 40px; height: 40px; }
.wb-live .wb-suggested-ic .ic { width: 20px; height: 20px; }
.wb-live .wb-add-day { font-size: 12px; padding: 8px 14px; }
.wb-live .wb-day { padding: 10px 12px; border-radius: 12px; }
.wb-live .wb-day-label { font-size: 15px; }
.wb-live .wb-day-img { width: 54px; height: 54px; }
.wb-live .wb-add-btn { width: 20px; height: 20px; padding: 4px; border-radius: 6px; }
.wb-live .wb-ex-gif { width: 56px; height: 56px; }
.wb-live .wb-ex-name { font-size: 12.5px; }
.wb-live .wb-ex-empty { font-size: 11.5px; }
.wb-live .wb-day-lock { width: 17px; height: 17px; }
.wb-live .wb-lock-note { font-size: 12.5px; padding: 12px 14px; }
.wb-live .wb-tiles { grid-template-columns: repeat(3, 1fr); }
.wb-live .wb-tile-name { font-size: 11px; }
.wb-live .wb-tile-muscle { font-size: 9.5px; }
.wb-live .wb-chip { font-size: 11px; padding: 7px 14px; }
.wb-live .wb-search input { font-size: 12.5px; }
.wb-live .wb-sheet-title-row > span { font-size: 15px; }
@media (max-width: 700px) {
    /* Never taller than the viewport, so the card can't outgrow the screen.
       Floored at 560px so short phones don't squeeze the contents. */
    .wb-live { max-width: 100%; height: clamp(560px, 88vh, 680px); }
    .wb-live .wb-tiles { grid-template-columns: repeat(2, 1fr); }
}

.wb-screen { display: flex; flex-direction: column; height: 100%; background: #fff; }
.wb-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
}
.wb-header-title { font-weight: 700; font-size: 14px; unicode-bidi: plaintext; }
.wb-header-ic {
    width: 24px; height: 24px; flex-shrink: 0; color: var(--ink);
    display: flex; align-items: center; justify-content: center;
}
.wb-header-ic .ic { width: 15px; height: 15px; display: block; }
.wb-header-ic:first-child { background: var(--bg); border-radius: 8px; }
.wb-body { padding: 12px; display: flex; flex-direction: column; gap: 14px; }

.wb-score {
    border: 1.5px solid var(--success);
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
    background: #fff;
}
.wb-score-top { display: flex; align-items: center; gap: 8px; }
.wb-score-text { flex: 1; text-align: center; }
.wb-score-title { font-size: 13px; font-weight: 700; color: var(--success); }
.wb-score-sub { font-size: 9px; color: var(--muted); margin-top: 1px; }
.wb-check { width: 20px; height: 20px; color: var(--success); flex-shrink: 0; }
.wb-chevron { color: var(--ink-soft); width: 16px; height: 16px; flex-shrink: 0; }

.wb-grid-label { display: none; text-align: center; font-size: 12px; font-weight: 700; margin-top: 12px; }
.wb-grid {
    display: none;
    flex-wrap: wrap;
    flex-direction: row;
    row-gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.wb-grid.open { display: flex; }
.wb-grid-label.open { display: block; }
.wb-grid span {
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    width: 33.33%;
    color: var(--ink);
    display: flex; align-items: center; justify-content: center; gap: 4px;
}
.wb-grid span .ic-svg { width: 11px; height: 11px; color: var(--success); }
.wb-grid-mark { font-size: 11px; line-height: 1; }

.wb-suggested {
    display: flex; align-items: stretch;
    border: 1px solid var(--border); border-radius: 12px;
    background: #fff;
}
.wb-suggested-heading { font-size: 14px; font-weight: 800; margin-top: 4px; }
/* Icon badge then text, same order in both cells — mirrors the stat card in
   WorkoutBuilderScreen (40px round #F5F5F5 badge, black glyph). */
.wb-suggested-cell {
    flex: 1; min-width: 0;
    display: flex; align-items: center; justify-content: flex-start;
    padding: 12px; gap: 10px;
}
.wb-suggested-text { display: flex; flex-direction: column; text-align: start; min-width: 0; }
.wb-suggested-label { font-size: 9px; color: var(--ink-soft); display: block; }
.wb-suggested-val {
    font-size: 11px; font-weight: 700; color: var(--ink); display: block; margin-top: 2px;
    unicode-bidi: plaintext;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-suggested-ic {
    width: 34px; height: 34px; border-radius: 50%;
    background: #F5F5F5; color: #000;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.wb-suggested-ic .ic { width: 17px; height: 17px; display: block; }
.wb-suggested-div { width: 1px; background: var(--hair); margin: 10px 0; }

.wb-days-head { display: flex; align-items: center; justify-content: space-between; }
.wb-days-head > span { font-size: 14px; font-weight: 800; }
.wb-add-day {
    display: flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 600; color: var(--ink);
    background: var(--bg); border: none; border-radius: 8px;
    padding: 7px 12px; cursor: pointer; font-family: inherit;
}
.wb-add-day-ic { width: 14px; height: 14px; }

.wb-days { display: flex; flex-direction: column; gap: 8px; }
.wb-day {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wb-day-top { display: flex; align-items: center; gap: 10px; }
.wb-trash { width: 17px; height: 17px; color: #EF4444; flex-shrink: 0; }
.wb-add-btn {
    width: 18px; height: 18px; border-radius: 6px;
    background: var(--ink); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: none; flex-shrink: 0; padding: 4px;
    transition: transform .12s;
}
.wb-add-btn:active { transform: scale(0.85); }
/* Name sits beside the image (start edge), like the day card in the app. */
.wb-day-info { flex: 1; display: flex; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; }
.wb-day-label { font-size: 13px; font-weight: 700; }
.wb-day-img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }

/* Lists stay in the DOM and are shown/hidden by class, so toggling a day never
   re-decodes the GIFs. */
.wb-ex-list { display: none; flex-direction: column; gap: 6px; margin-top: 2px; }
.wb-day.open > .wb-ex-list { display: flex; }
.wb-ex-card {
    display: flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid var(--hair); border-radius: 8px; padding: 7px 9px;
    font-size: 11px; font-weight: 700; color: var(--ink);
}
@keyframes chipIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.wb-ex-gif {
    width: 42px; height: 42px; border-radius: 7px; flex-shrink: 0;
    object-fit: cover; background: #F2F2F2;
    transition: filter .2s, opacity .2s;
}
/* Disabled day — greyed out in place, its exercises stop counting. */
.wb-day.off { background: var(--bg); border-style: dashed; }
.wb-day.off .wb-day-img { filter: grayscale(1); opacity: 0.45; }
.wb-day.off .wb-day-label { color: var(--muted); text-decoration: line-through; }

/* Removed exercise — stays in place, greyed out, click + to bring it back. */
.wb-ex-card.off { background: var(--bg); border-style: dashed; }
.wb-ex-card.off .wb-ex-gif { filter: grayscale(1); opacity: 0.45; }
.wb-ex-card.off .wb-ex-name { color: var(--muted); text-decoration: line-through; }
.wb-ex-card.off .wb-ex-remove { color: var(--ink); }
.wb-ex-card.off .wb-ex-remove:hover { background: rgba(0,0,0,0.06); }
.wb-ex-meta { flex: 1; display: flex; align-items: center; min-width: 0; text-align: start; }
/* Now the only text in the row, so let long names use a second line rather
   than truncating them. */
.wb-ex-name {
    font-size: 10.5px; font-weight: 700; line-height: 1.35;
    unicode-bidi: plaintext;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.wb-ex-remove {
    width: 20px; height: 20px; flex-shrink: 0; padding: 3px;
    border: none; background: transparent; color: #EF4444;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: background .15s;
}
.wb-ex-remove:hover { background: rgba(239,68,68,0.1); }
.wb-ex-empty {
    font-size: 9.5px; color: var(--muted); text-align: center;
    padding: 12px 8px; border: 1px dashed var(--border); border-radius: 8px;
}
.wb-day-caret { width: 13px; height: 13px; color: var(--muted); flex-shrink: 0; }
.wb-day-top { cursor: pointer; }
.wb-tiles-empty { grid-column: 1 / -1; text-align: center; font-size: 11px; color: var(--muted); padding: 30px 0; }
.wb-tiles-more {
    grid-column: 1 / -1;
    background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
    padding: 11px; font-family: inherit; font-size: 11px; font-weight: 700;
    color: var(--ink); cursor: pointer; margin-top: 2px;
}
.wb-tiles-more:hover { background: #EFEFEF; }

/* Locked days — visible but not editable on the site; they point to the app.
   Deliberately distinct from the removed-tray grey: dashed border and a muted
   (not struck-through) row, so it reads as "not yet" rather than "deleted". */
.wb-day.locked {
    border-style: dashed;
    background: var(--bg);
    cursor: pointer;
}
.wb-day.locked .wb-day-top { cursor: pointer; }
.wb-day.locked .wb-day-img { filter: grayscale(1); opacity: 0.5; }
.wb-day.locked .wb-day-label { color: var(--muted); }
.wb-day-lock { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.wb-day.shake { animation: wbShake .34s ease; }
@keyframes wbShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Toast pinned to the top of the card, sliding down over the content so it
   doesn't shift anything below it. */
.wb-lock-note {
    position: absolute; top: 10px; left: 10px; right: 10px;
    display: flex; align-items: center; gap: 8px;
    background: var(--ink); color: #fff;
    border-radius: 10px; padding: 11px 13px;
    font-size: 11px; font-weight: 700; text-decoration: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
    z-index: 40;
    opacity: 0; visibility: hidden;
    transform: translateY(-14px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.wb-lock-note.open { opacity: 1; visibility: visible; transform: translateY(0); }
.wb-lock-note-ic { width: 16px; height: 16px; flex-shrink: 0; color: var(--gold); }
.wb-lock-note-ic .ic { width: 100%; height: 100%; display: block; }


/* Bottom sheet modal */
/* Fixed to the viewport, not the card. The card has no set height — it grows as
   days expand — so anchoring the sheet to it made the two interfere. */
.wb-sheet-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0);
    pointer-events: none;
    transition: background .25s;
    z-index: 1000;
}
.wb-sheet-backdrop.open { background: rgba(0,0,0,0.5); pointer-events: auto; }

.wb-sheet {
    position: fixed; bottom: 0;
    left: 0; right: 0; margin: 0 auto;
    width: min(460px, 100vw);
    transform: translateY(100%);
    background: #fff;
    border-radius: 20px 20px 0 0;
    height: min(78vh, 620px);
    transition: transform .32s cubic-bezier(.32,.72,0,1);
    display: flex; flex-direction: column;
    overflow: hidden;
    z-index: 1001; /* above the backdrop */
    box-shadow: 0 -10px 30px rgba(0,0,0,0.18);
}
.wb-sheet.open { transform: translateY(0); }
.wb-sheet-handle { width: 34px; height: 4px; background: var(--hair); border-radius: 3px; margin: 8px auto; }
.wb-sheet-title-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 14px 10px; border-bottom: 1px solid var(--hair);
}
.wb-sheet-title-row > span { font-weight: 800; font-size: 14px; }
.wb-sheet-custom {
    background: var(--ink); color: #fff; border: none; border-radius: 999px;
    font-size: 9px; font-weight: 600; padding: 6px 10px; cursor: pointer; font-family: inherit;
}
.wb-search {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 14px; padding: 9px 12px;
    background: var(--bg); border: 1px solid var(--hair); border-radius: 10px;
}
.wb-search-ic { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.wb-search input { border: none; background: transparent; font-size: 11px; font-family: inherit; color: var(--ink); flex: 1; outline: none; }
.wb-chips { display: flex; gap: 5px; overflow-x: auto; padding: 0 10px 10px; }
.wb-chips::-webkit-scrollbar { display: none; }
.wb-chip {
    flex-shrink: 0; font-size: 9.5px; font-weight: 700;
    padding: 6px 12px; border-radius: 999px; background: #fff;
    border: 1px solid var(--border); color: var(--ink);
    cursor: pointer; transition: all .15s;
}
.wb-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.wb-tiles {
    flex: 1; min-height: 0; overflow-y: auto;
    display: grid; grid-template-columns: repeat(2, 1fr);
    /* Rows size to the tallest tile in each row, so nothing overlaps. */
    grid-auto-rows: 1fr;
    gap: 10px; padding: 4px 10px 16px;
    align-content: start;
}
.wb-tile {
    position: relative;
    border-radius: 12px;
    min-height: 168px;
    background: #fff;
    border: 1px solid var(--hair);
    display: flex; flex-direction: column;
    cursor: pointer;
    overflow: hidden;
    transition: transform .12s;
}
.wb-tile:active { transform: scale(0.95); }
.wb-tile-illustration {
    flex: 1;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    padding: 4px;
    overflow: hidden;
}
.wb-tile-body { width: 100%; height: 100%; }
.wb-tile-gif { width: 100%; height: 100%; object-fit: contain; }
.wb-tile-footer {
    background: #2A2A2A;
    padding: 7px 9px;
    display: flex; flex-direction: column; gap: 1px;
}
/* Exercise names are English inside an RTL container — plaintext keeps their
   own direction so trailing brackets/numbers don't jump to the wrong side. */
.wb-tile-name { color: #fff; font-size: 10px; font-weight: 700; line-height: 1.25; unicode-bidi: plaintext; text-align: start; }
.wb-tile-muscle { color: #B0B0B0; font-size: 8.5px; text-align: start; }
.wb-tile-bookmark {
    position: absolute; top: 6px; inset-inline-start: 6px;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255,255,255,0.85);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink); z-index: 2;
}
.wb-tile-bookmark .ic-svg { width: 12px; height: 12px; }
.wb-tile.added::after {
    content: '✓ أُضيف';
    position: absolute; inset: 0;
    background: rgba(16,185,129,0.92);
    color: #fff; font-weight: 700; font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    animation: chipIn .2s ease;
}

/* Coach mark tutorial */
.wb-coach-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 30;
    opacity: 0; pointer-events: none;
    transition: opacity .3s;
}
.wb-coach-backdrop.open { opacity: 1; pointer-events: auto; }
.wb-coach-hole {
    position: absolute;
    border: 2px solid var(--gold);
    border-radius: 14px;
    box-shadow: 0 0 0 2000px rgba(0,0,0,0.75);
    transition: all .4s cubic-bezier(.4,0,.2,1);
}
.wb-coach-card {
    position: absolute;
    left: 12px; right: 12px;
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: all .4s cubic-bezier(.4,0,.2,1);
}
.wb-coach-card h4 { font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.wb-coach-card p { font-size: 11px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 10px; }
.wb-coach-foot { display: flex; align-items: center; justify-content: space-between; }
.wb-coach-dots { display: flex; gap: 4px; }
.wb-coach-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--hair); }
.wb-coach-dots span.active { background: var(--gold-deep); width: 14px; border-radius: 3px; }
.wb-coach-next {
    background: var(--ink); color: #fff; border: none;
    font-size: 11px; font-weight: 700; padding: 7px 16px; border-radius: 999px;
    cursor: pointer;
}
.wb-coach-finale {
    position: absolute; inset: 0; background: rgba(0,0,0,0.9);
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 28px; flex-direction: column; gap: 14px;
    opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 31;
}
.wb-coach-finale.open { opacity: 1; pointer-events: auto; }
.wb-coach-finale h4 { color: #fff; font-size: 16px; font-weight: 800; line-height: 1.4; }
.wb-coach-finale p { color: rgba(255,255,255,0.75); font-size: 12px; line-height: 1.6; }
.wb-coach-finale button {
    background: var(--gold); color: var(--ink); border: none;
    font-size: 13px; font-weight: 800; padding: 10px 22px; border-radius: 999px;
    cursor: pointer;
}
.wb-restart {
    margin-top: 16px;
    font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
    background: none; border: 1px dashed var(--hair);
    padding: 8px 16px; border-radius: 999px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}



/* ===================================================== */
/* STATS / CHART DEMO                                      */
/* ===================================================== */
/* Standalone card (no phone frame) — the chart as a real page element. */
.st-live {
    width: 100%; max-width: 460px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.09);
    overflow: hidden;
    position: relative;
    direction: rtl;
}
.st-live .st-screen { height: auto; }
.st-live .st-scroll { overflow: visible; padding: 22px 22px 24px; }
.st-live .st-title { font-size: 18px; margin-bottom: 16px; }
.st-live .st-range button { font-size: 12px; padding: 9px 0; }
.st-live .st-metric-num { font-size: 32px; }
.st-live .st-metric-label { font-size: 12.5px; }
/* The SVG stretches to the card width (preserveAspectRatio="none"), so give it
   more height here or the bars read as squashed on the wider card. */
.st-live #stChart { height: 190px; }
.st-live .st-pill { font-size: 12px; padding: 8px 14px; }
.st-live .st-pill-ic { width: 14px; height: 14px; }
.st-live .wb-lock-note { font-size: 12.5px; padding: 12px 14px; }
@media (max-width: 700px) { .st-live { max-width: 100%; } }

.st-screen { display: flex; flex-direction: column; height: 100%; background: #fff; }
.st-scroll { flex: 1; overflow-y: auto; padding: 14px 14px 0; display: flex; flex-direction: column; }
.st-title { font-size: 15px; font-weight: 700; text-align: center; margin-bottom: 12px; }
.st-range { display: flex; background: #F5F5F5; border-radius: 10px; padding: 3px; gap: 0; margin-bottom: 14px; }
.st-range button {
    flex: 1; border: none; background: transparent; padding: 7px 0;
    font-size: 9.5px; font-weight: 500; color: var(--muted);
    border-radius: 8px; cursor: pointer; transition: all .15s;
    font-family: inherit;
}
.st-range button.active { background: #fff; color: var(--ink); font-weight: 600; }
/* App-only ranges — muted, with a padlock, like the locked days in the builder. */
.st-range button.locked { color: var(--muted); opacity: 0.7; }
.st-range button.locked::after { content: ' 🔒'; font-size: 0.85em; }
.st-range button.shake { animation: wbShake .34s ease; }

.st-metric-num { font-size: 26px; font-weight: 700; color: #000; }
.st-metric-label { font-size: 10.5px; color: var(--muted); margin-bottom: 12px; }

.st-chart-wrap { flex: 1; position: relative; }
.st-tooltip {
    position: absolute; background: #1C1C1E; color: #fff;
    font-size: 10px; font-weight: 700; padding: 5px 9px; border-radius: 7px;
    transform: translate(-50%, -120%); opacity: 0; transition: opacity .15s;
    pointer-events: none; white-space: nowrap; z-index: 5;
}
.st-tooltip.show { opacity: 1; }

.st-pills { display: flex; gap: 8px; padding: 14px 0; }
.st-pill {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
    font-size: 9.5px; font-weight: 600;
    padding: 8px 4px; border-radius: 999px;
    background: transparent; border: 1.3px solid #E0E0E0; color: var(--muted);
    cursor: pointer; transition: all .15s;
}
.st-pill-ic { width: 12px; height: 12px; display: inline-block; }
.st-pill.active { background: #F5F5F5; color: #000; border-color: #000; }

/* ===================================================== */
/* DIET DEMO                                                */
/* ===================================================== */
/* Standalone card (no phone frame) — the diet screen as a real page element. */
.dt-live {
    width: 100%; max-width: 460px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.09);
    overflow: hidden;
    position: relative;
    direction: rtl;
}
.dt-live .dt-screen { height: auto; }
.dt-live .dt-scroll { overflow: visible; padding: 22px; gap: 18px; }
.dt-live .dt-method b { font-size: 14px; }
.dt-live .dt-method span:not(.dt-method-ic):not(.ic) { font-size: 11px; }
.dt-live .dt-method-ic { width: 48px; height: 48px; }
.dt-live .dt-method-ic .ic { width: 23px; height: 23px; }
.dt-live .dt-methods-title { font-size: 16px; }
.dt-live .dt-manual-top { font-size: 14px; }
.dt-live .dt-manual-sub { font-size: 11px; }
.dt-live .wb-lock-note { font-size: 12.5px; padding: 12px 14px; }
/* Options are display-only here — clicking shakes them and prompts the app. */
.dt-method.shake, .dt-manual.shake { animation: wbShake .34s ease; }
@media (max-width: 700px) { .dt-live { max-width: 100%; } }

.dt-screen { display: flex; flex-direction: column; height: 100%; background: #fff; }
.dt-scroll { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }

/* ===== Meal logging methods — the add-meal options from DietScreen ===== */
.dt-methods { display: flex; flex-direction: column; }
.dt-methods-title {
    font-size: 14px; font-weight: 800; color: var(--ink);
    text-align: right; margin: 20px 0 12px;
}

.dt-method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.dt-method {
    background: var(--bg); border: 1px solid #E0E0E0; border-radius: 14px;
    padding: 16px 8px; text-align: center; cursor: pointer;
    display: flex; flex-direction: column; align-items: center;
    transition: transform .12s, border-color .15s;
}
.dt-method:hover { border-color: var(--ink); }
.dt-method:active { transform: scale(0.96); }
.dt-method-ic {
    width: 44px; height: 44px; border-radius: 50%;
    background: #000; color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 9px; flex-shrink: 0;
}
.dt-method-ic .ic { width: 21px; height: 21px; display: block; }
.dt-method b { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.dt-method span:not(.dt-method-ic):not(.ic) { font-size: 10px; color: var(--ink-soft); margin-top: 3px; line-height: 1.45; }

.dt-manual {
    display: flex; flex-direction: column; align-items: center;
    background: #000; color: #fff; border: none; border-radius: 12px;
    padding: 12px 24px; margin: 14px auto 0; cursor: pointer;
    font-family: inherit; transition: transform .12s;
}
.dt-manual:active { transform: scale(0.97); }
.dt-manual-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.dt-manual-ic { width: 16px; height: 16px; display: block; }
.dt-manual-ic .ic { width: 100%; height: 100%; display: block; }
.dt-manual-sub { font-size: 10px; color: #CCCCCC; margin-top: 4px; }


/* ===================================================== */
/* SOCIAL TEASER                                            */
/* ===================================================== */
/* Feed preview — mirrors AdFeatureScreen's post (itself a copy of
   SocialFeedScreen.renderPost): composer, category tabs, then the post. */
/* Two posts side by side on desktop, stacked on narrow screens. */
/* Two posts side by side on desktop. On phones they become a swipeable
   carousel — one card per screen, snapping as you drag. */
.sc-wrap {
    display: flex; flex-wrap: wrap; justify-content: center;
    align-items: flex-start; gap: 24px;
}
.sc-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.sc-dot {
    width: 7px; height: 7px; border-radius: 999px;
    background: var(--border); border: none; padding: 0;
    cursor: pointer; transition: width .25s, background .25s;
}
.sc-dot.active { width: 22px; background: var(--ink); }

@media (max-width: 900px) {
    /* One card at a time — the inactive card is hidden outright rather than
       scrolled past, so there's never a sliver of the next one showing.
       The dots switch which is visible. */
    .sc-wrap {
        display: block;
        margin: 0;
        padding: 0;
    }
    .sc-live { display: none; max-width: 100%; margin: 0 auto; }
    .sc-live.is-active { display: block; animation: scFade .25s ease; }
}
@keyframes scFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.sc-live {
    width: 100%; max-width: 460px;
    /* Colors.background — the feed sits on off-white, not pure surface. */
    background: #FAFAFA;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.09);
    overflow: hidden;
    position: relative;
    direction: rtl;
    padding: 20px 0;
}

/* composerBar: surface bg, 16px padding, radius 8, 1.5px #A0A0A0 border */
.sc-composer {
    display: flex; align-items: center; justify-content: space-between;
    background: #FFFFFF; border: 1.5px solid #A0A0A0;
    border-radius: 8px; padding: 16px;
    margin: 0 20px 8px;
}
.sc-composer-placeholder {
    font-size: 14px; color: #5A5A5A; flex: 1;
    margin-left: 24px; text-align: right;
}
/* composerAvatar 40px / avatar 32px — Colors.primary circle, white person
   glyph (an emoji here would render in its own colours, not white). */
.sc-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: #1A1A1A; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.sc-avatar .sc-ic { width: 20px; height: 20px; color: #FFFFFF; }
.sc-avatar.sm { width: 40px; height: 40px; }
.sc-avatar.sm .sc-ic { width: 14px; height: 14px; }

/* categoryTabs: 3 bordered boxes, radius 4, active gets a #2B2B2B border */
.sc-tabs { display: flex; gap: 8px; margin: 8px 20px; }
.sc-tab {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 12px;
    background: #FFFFFF; border: 1px solid #A0A0A0; border-radius: 4px;
    font-size: 12px; font-weight: 600; color: #5A5A5A;
}
.sc-tab .sc-ic { width: 18px; height: 18px; color: currentColor; }
.sc-tab.active { border-color: #2B2B2B; color: #2B2B2B; font-weight: 700; }

/* postCard: Colors.background (#FAFAFA), 8px vertical padding */
.sc-post { background: #FAFAFA; padding: 8px 0; }
/* Avatar and name block grouped together at the left edge. */
.sc-post-head {
    display: flex; align-items: center;
    justify-content: flex-end; gap: 8px; padding: 8px 24px;
}
.sc-post-head .sc-avatar { order: 2; }
.sc-post-head .sc-user { order: 1; }
/* Text hugs the avatar side (left) rather than the block's start edge. */
.sc-user { display: flex; flex-direction: column; align-items: flex-end; }
.sc-user-top { display: flex; align-items: center; gap: 6px; }
.sc-username { font-size: 14px; font-weight: 700; color: #2B2B2B; }
/* Badge styling copied from the app's components: VerificationBadge (#1DA1F2),
   LevelBadge (Lv.N on #1A1A1A20), StreakBadge (flame on rgba(255,107,53,.12)),
   StrengthRankBadge compact (rank image + name, tinted by rank colour). */
.sc-level {
    background: rgba(26,26,26,0.125); color: #1A1A1A;
    border: 1px solid rgba(26,26,26,0.25);
    font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
    unicode-bidi: plaintext;
}
.sc-user-badges { display: flex; gap: 4px; margin-top: 4px; }
.sc-badge {
    display: flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px;
    unicode-bidi: plaintext;
}
.sc-badge.streak { background: rgba(255,107,53,0.12); color: #FF6B35; }
.sc-flame { font-size: 9px; line-height: 1; }
.sc-badge.rank { background: rgba(33,150,243,0.125); color: var(--diamond); font-weight: 700; }
.sc-badge.rank img { width: 14px; height: 14px; object-fit: contain; }

/* postContent: 24px h-padding, 4px v-padding; postText 20px line-height */
.sc-caption {
    font-size: 14px; color: #2B2B2B; line-height: 20px;
    padding: 4px 24px; margin-bottom: 8px; text-align: right;
}

/* mealCardContainer: 8px vertical, 24px horizontal, on #FAFAFA */
.sc-meal-wrap { padding: 8px 24px; background: #FAFAFA; }
/* SharedMealCard container: surface, radius 4, 16px padding, 1px #A0A0A0 */
.sc-meal {
    display: flex; flex-direction: row-reverse; align-items: flex-start;
    background: #FFFFFF; border: 1px solid #A0A0A0;
    border-radius: 4px; padding: 16px; width: 100%;
}
.sc-meal-photo { width: 60px; height: 60px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.sc-meal-body { flex: 1; min-width: 0; padding: 0 16px 0 8px; }
.sc-meal-name { font-size: 16px; font-weight: 700; color: #2B2B2B; display: block; margin-bottom: 2px; }
.sc-macros { display: flex; justify-content: flex-start; gap: 10px; margin-top: 9px; }
.sc-macro {
    display: flex; align-items: center; gap: 4px;
    font-size: 14px; font-weight: 600; color: #2B2B2B;
    unicode-bidi: plaintext;
}
.sc-macro img { width: 16px; height: 16px; flex-shrink: 0; }
/* Shared workout plan card — SocialFeedScreen's workout_data block:
   surface bg, radius 8, 16px padding, 50px icon tile at Colors.primary20. */
.sc-workout {
    display: flex; align-items: center; gap: 16px;
    background: #FFFFFF; border: 1px solid #A0A0A0;
    border-radius: 8px; padding: 16px; width: 100%;
}
.sc-workout-ic {
    width: 50px; height: 50px; border-radius: 8px;
    background: rgba(26,26,26,0.125); color: #1A1A1A;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sc-workout-ic .ic { width: 28px; height: 28px; display: block; }
.sc-workout-info { flex: 1; min-width: 0; }
.sc-workout-title { font-size: 16px; font-weight: 700; color: #2B2B2B; display: block; margin-bottom: 4px; }
.sc-workout-sub { font-size: 12px; color: #5A5A5A; unicode-bidi: plaintext; }

/* Ionicons add-circle at 28px in Colors.primary, same as SharedMealCard. */
.sc-meal-add {
    width: 28px; height: 28px; flex-shrink: 0; padding: 0;
    border: none; background: transparent; color: #1A1A1A;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.sc-meal-add .sc-ic { width: 28px; height: 28px; color: inherit; }

/* postActions: space-around, 24px h-padding, 6px v-padding */
.sc-actions { display: flex; flex-direction: row-reverse; justify-content: space-around; padding: 6px 24px; }
.sc-action {
    display: flex; flex-direction: row-reverse; align-items: center; gap: 4px;
    border: none; background: transparent; cursor: pointer;
    font-family: inherit; font-size: 11px; color: #5A5A5A; font-weight: 400;
    padding: 4px; border-radius: 6px;
}
.sc-heart { color: #EF5350; font-size: 16px; line-height: 1; }
.sc-ic { width: 16px; height: 16px; display: block; color: #5A5A5A; }
.sc-ic .ic { width: 100%; height: 100%; display: block; }
/* Everything interactive in the feed is a teaser — clicking prompts the app. */
.sc-live [data-lock] { cursor: pointer; }
.sc-live [data-lock].shake { animation: wbShake .34s ease; }
.sc-composer[data-lock]:hover { border-color: #2B2B2B; }
.sc-tab[data-lock]:hover { border-color: #2B2B2B; color: #2B2B2B; }
.sc-action:hover { background: rgba(0,0,0,0.04); }

/* ===== Footer ===== */
/* ===== Sticky download bar =====
   Pinned to the bottom of the viewport. Hidden until the visitor scrolls past
   the hero (its own store buttons are right there), and again over the footer
   so it doesn't sit on top of the same call to action. */
.dockbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--hair);
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    transform: translateY(110%);
    transition: transform .3s ease;
}
.dockbar.show { transform: translateY(0); }

.dockbar-inner {
    max-width: 1180px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.dockbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dockbar-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: 22.37%; /* iOS-style squircle ratio */
    object-fit: contain;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.14), 0 0 0 0.5px rgba(0,0,0,0.06);
}
.dockbar-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.dockbar-text b { font-size: 15px; font-weight: 800; letter-spacing: 0.4px; }
.dockbar-wordmark { height: 14px; width: auto; flex-shrink: 0; display: block; margin-bottom: 3px; }
.dockbar-text span {
    font-size: 11.5px; color: var(--ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dockbar-cta {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    background: var(--ink); color: #fff;
    font-size: 14px; font-weight: 700;
    padding: 11px 20px; border-radius: 999px;
    text-decoration: none;
    transition: transform .15s;
}
.dockbar-cta:active { transform: scale(0.97); }
.dockbar-cta svg { width: 17px; height: 17px; flex-shrink: 0; }

@media (max-width: 520px) {
    .dockbar-inner { padding: 0 16px; gap: 12px; }
    .dockbar-text span { font-size: 11px; }
    .dockbar-cta { padding: 10px 14px; font-size: 13px; }
}

/* ===== Contact form ===== */
.cform {
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cform-row { display: flex; gap: 16px; }
.cform-row .cform-field { flex: 1; min-width: 0; }
.cform-field { display: flex; flex-direction: column; gap: 7px; }
.cform-field > span {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
}
.cform-field input,
.cform-field select,
.cform-field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--hair);
    border-radius: 12px;
    padding: 13px 15px;
    transition: border-color .15s, box-shadow .15s;
}
.cform-field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.cform-field input::placeholder,
.cform-field textarea::placeholder { color: var(--muted); }
.cform-field input:focus,
.cform-field select:focus,
.cform-field textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.cform-field input.invalid,
.cform-field textarea.invalid { border-color: #DC2626; }
.cform-submit {
    align-self: center;
    background: var(--ink);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 40px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: opacity .15s, transform .15s;
}
.cform-submit:hover { opacity: 0.9; }
.cform-submit:active { transform: scale(0.97); }
.cform-note {
    text-align: center;
    font-size: 13.5px;
    color: var(--ink-soft);
    min-height: 20px;
}
@media (max-width: 620px) {
    .cform-row { flex-direction: column; }
}

.footer {
    background: var(--ink);
    color: #fff;
    padding: 56px 0 28px;
    text-align: center;
}
.footer h3 { font-size: clamp(27px,3.7vw,37px); font-weight: 800; line-height: 1.25; margin-bottom: 10px; }
.footer p { color: rgba(255,255,255,0.6); font-size: 16px; margin-bottom: 26px; }
/* Keep the pair on one line, as in the nav/dockbar CTA. */
.footer .store-row { margin-bottom: 30px; flex-wrap: nowrap; }
.footer .store-btn { white-space: nowrap; }
.footer .store-btn.apple { background: #fff; color: var(--ink); }
.footer .store-btn.google { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.footer-links { display: flex; gap: 18px; justify-content: center; font-size: 12.5px; margin-bottom: 18px; }
.footer-links a { color: rgba(255,255,255,0.55); text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-copy { color: rgba(255,255,255,0.35); font-size: 11.5px; }

/* ===== Reveal-on-scroll ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}