Navy and gold

{
  "id": "001",
  "name": "Navy and gold",
  "version": "2026-10-23",
  "status": "standard",
  "page": "https://fedm8.com/design/001/",
  "catalog": "https://fedm8.com/design/catalog.json",
  "use_for": [
    "FedM8 brand identity: shield, wordmark, navy and gold",
    "Public marketing pages that load assets/theme.css",
    "Walkthrough videos on the navy stage",
    "YouTube thumbnails and social cards",
    "Print, including the capability one-pager",
    "Chat previews and comments that sit on these pages"
  ],
  "not_for": [
    "The signed-in app rooms, which use the paper and olive look (design 002, DESIGN.md)"
  ],
  "precedence": "If this file and DESIGN_DNA.md disagree, DESIGN_DNA.md wins and this file needs a fix.",
  "source_files": [
    "DESIGN_DNA.md",
    "DESIGN.md",
    "assets/theme.css",
    "assets/index.css",
    "assets/index-calm.css",
    "assets/landing.css",
    "assets/page-plans.css",
    "assets/os-walkthrough.css",
    "assets/site-nav.js",
    "assets/page-capability-statement.css",
    "assets/talk-preview.css",
    "assets/talk-doors.css",
    "assets/chat-words.js",
    "assets/sdvosb-status.js",
    "HUMAN_FRAMEWORK.md",
    "TEXTBOOK_TEACHER.md",
    "skill: fedm8-walkthrough-style (references/style-guide.md)"
  ],
  "colors": {
    "--b-navy": { "value": "#060d18", "name": "Navy", "use": "Top bar, hero ground, bands" },
    "--b-navy-2": { "value": "#0c1626", "name": "Navy 2", "use": "Hover on navy buttons, raised navy" },
    "--b-navy-3": { "value": "#162438", "name": "Navy 3", "use": "Cards on navy, gradients" },
    "--b-gold": { "value": "#c4a35a", "name": "Gold", "use": "Brand line, deadlines, gold button on navy. Never text on light (2.40:1 on white)" },
    "--b-gold-light": { "value": "#e0c57a", "name": "Light gold", "use": "M8 in the wordmark, links and hover on navy" },
    "--b-gold-deep": { "value": "#9a7a32", "name": "Deep gold", "use": "Lines and large marks on light. 4.04:1 on white, so not small text" },
    "--b-page": { "value": "#f5f6f8", "name": "Canvas", "use": "Page ground for the quiet interface (older tool pages use #eef3f8 from theme.css)" },
    "--b-surface": { "value": "#ffffff", "name": "Surface", "use": "Panels, cards, inputs" },
    "--b-ink": { "value": "#192536", "name": "Ink", "use": "Body text (index-calm.css)" },
    "--b-muted": { "value": "#526071", "name": "Muted", "use": "Second lines and help text, 5.94:1 on canvas" },
    "--b-line": { "value": "#e1e6ed", "name": "Line", "use": "Panel borders and dividers" },
    "--b-navy-ui": { "value": "#193b5d", "name": "Button navy", "use": "Filled primary button, Helpful mark, new-replies pill" },
    "--b-soft": { "value": "#e8edf5", "name": "Pale blue", "use": "The current section or tab" },
    "--b-soft-ink": { "value": "#183b61", "name": "Pale blue ink", "use": "Text on pale blue" },
    "--b-gold-ink": { "value": "#7e6940", "name": "Gold text", "use": "Eyebrows and gold words on light, 4.88:1 on canvas" },
    "--b-gold-tint": { "value": "#f5efe1", "name": "Gold tint", "use": "Deadline and gold chips" },
    "--b-gold-line": { "value": "#e8dbbb", "name": "Gold edge", "use": "Border on gold chips" },
    "--b-stage": { "value": "#0b1626", "name": "Stage navy", "use": "Video backdrop and thumbnails" },
    "--b-stage-gold": { "value": "#d6b56c", "name": "Stage gold", "use": "M8 on the stage, WHY IT HELPS label, closing word, end card" },
    "--b-stage-line": { "value": "#3a5070", "name": "Stage line", "use": "Dashed sample pill edge" },
    "--b-stage-text": { "value": "#f2f5f9", "name": "Stage text", "use": "Captions and titles on the stage" },
    "--b-stage-muted": { "value": "#b9c6d6", "name": "Stage muted", "use": "Sample label, end URL, thumbnail second line" },
    "--b-flow-blue": { "value": "#1f6fb5", "name": "Step blue", "use": "Finished chevrons and the picked tile edge (white text 5.25:1)" },
    "--b-flow-blue-dark": { "value": "#164e86", "name": "Current blue", "use": "The current chevron" },
    "--b-continue": { "value": "#1f7a3a", "name": "Continue green", "use": "Continue button (white text 5.38:1)" },
    "--b-flow-stage": { "value": "#e9f0f8", "name": "Stage tint", "use": "Guided-flow step card ground" },
    "--b-flow-stage-line": { "value": "#cbd8e7", "name": "Stage edge", "use": "Guided-flow card border" },
    "--b-flow-tile-line": { "value": "#aebfd3", "name": "Tile edge", "use": "Answer tile border" },
    "--b-flow-tile-on": { "value": "#d6e6f8", "name": "Picked tile", "use": "Chosen answer tile" },
    "--b-flow-todo": { "value": "#c6d3e2", "name": "Later step", "use": "Chevrons not reached yet" },
    "--b-flow-ink": { "value": "#12263f", "name": "Flow ink", "use": "Question text inside the guided-flow stage" },
    "--b-ok": { "value": "#1f7a3a", "name": "Yes green", "use": "Done, saved, yes. Always with a word" },
    "--b-ok-soft": { "value": "#e6f3ea", "name": "Yes tint", "use": "Chip ground for yes" },
    "--b-bad": { "value": "#b42318", "name": "Problem red", "use": "Errors, no. Always with a word" },
    "--b-bad-soft": { "value": "#fdecea", "name": "Problem tint", "use": "Chip and message ground for errors" },
    "--b-warn": { "value": "#8a5a00", "name": "Check brown", "use": "Caution, not sent yet. Always with a word" },
    "--b-warn-soft": { "value": "#fdf3d8", "name": "Check tint", "use": "Chip ground for caution" },
    "--b-focus": { "value": "#2b6cb0", "name": "Focus", "use": "Keyboard focus ring on light, 3px, offset 2px. On navy use --b-gold-light" },
    "--b-shield-blue": { "value": "#417daf", "name": "Shield blue", "use": "Sampled from logo.png. Reference only, not for UI" }
  },
  "plan_tile_vars": {
    "--plan-b-ink": "#1a3a68",
    "--plan-b-bg": "transparent",
    "--plan-b-line": "#c9d3e0",
    "--plan-p-ink": "#7a5f22",
    "--plan-p-bg": "#f7f0dd",
    "--plan-p-line": "#e2cf9c"
  },
  "contrast": [
    { "fg": "#192536", "bg": "#f5f6f8", "ratio": 14.29, "pass": "AA", "use": "Body on canvas" },
    { "fg": "#192536", "bg": "#ffffff", "ratio": 15.45, "pass": "AA", "use": "Body on surface" },
    { "fg": "#526071", "bg": "#f5f6f8", "ratio": 5.94, "pass": "AA", "use": "Muted on canvas" },
    { "fg": "#526071", "bg": "#ffffff", "ratio": 6.42, "pass": "AA", "use": "Muted on surface" },
    { "fg": "#ffffff", "bg": "#193b5d", "ratio": 11.51, "pass": "AA", "use": "Primary button" },
    { "fg": "#ffffff", "bg": "#060d18", "ratio": 19.47, "pass": "AA", "use": "Top bar" },
    { "fg": "#060d18", "bg": "#c4a35a", "ratio": 8.10, "pass": "AA", "use": "Gold button label" },
    { "fg": "#e0c57a", "bg": "#060d18", "ratio": 11.53, "pass": "AA", "use": "Light gold on navy" },
    { "fg": "#c4a35a", "bg": "#060d18", "ratio": 8.10, "pass": "AA", "use": "Gold on navy" },
    { "fg": "#c4a35a", "bg": "#ffffff", "ratio": 2.40, "pass": "fail", "use": "Never gold text on white" },
    { "fg": "#9a7a32", "bg": "#ffffff", "ratio": 4.04, "pass": "large-only", "use": "Large marks and lines only" },
    { "fg": "#7e6940", "bg": "#f5f6f8", "ratio": 4.88, "pass": "AA", "use": "Eyebrow on canvas" },
    { "fg": "#183b61", "bg": "#e8edf5", "ratio": 9.72, "pass": "AA", "use": "Current section" },
    { "fg": "#ffffff", "bg": "#1f7a3a", "ratio": 5.38, "pass": "AA", "use": "Continue" },
    { "fg": "#ffffff", "bg": "#1f6fb5", "ratio": 5.25, "pass": "AA", "use": "Finished chevron" },
    { "fg": "#ffffff", "bg": "#164e86", "ratio": 8.51, "pass": "AA", "use": "Current chevron" },
    { "fg": "#f2f5f9", "bg": "#0b1626", "ratio": 16.60, "pass": "AA", "use": "Captions" },
    { "fg": "#b9c6d6", "bg": "#0b1626", "ratio": 10.47, "pass": "AA", "use": "Sample label" },
    { "fg": "#d6b56c", "bg": "#0b1626", "ratio": 9.24, "pass": "AA", "use": "Stage gold" },
    { "fg": "#7a5f22", "bg": "#f7f0dd", "ratio": 5.29, "pass": "AA", "use": "Pro plan tile" },
    { "fg": "#1f7a3a", "bg": "#e6f3ea", "ratio": 4.71, "pass": "AA", "use": "Yes chip" },
    { "fg": "#b42318", "bg": "#fdecea", "ratio": 5.75, "pass": "AA", "use": "Problem chip" },
    { "fg": "#8a5a00", "bg": "#fdf3d8", "ratio": 5.36, "pass": "AA", "use": "Check chip" },
    { "fg": "#2b6cb0", "bg": "#ffffff", "ratio": 5.42, "pass": "AA", "use": "Focus ring" },
    { "fg": "#848d9c", "bg": "#eef3f8", "ratio": 3.00, "pass": "fail", "use": "Retired muted from theme.css. Do not use" }
  ],
  "fonts": {
    "sans": { "family": "DM Sans", "stack": "\"DM Sans\",system-ui,sans-serif", "weights": [400, 450, 500, 650, 750], "use": "Body, buttons, labels, captions, working headings" },
    "serif": { "family": "Source Serif 4", "stack": "\"Source Serif 4\",Georgia,serif", "weights": [600, 650, 700], "use": "Public page and section headings, card titles, video closing lines and tagline" },
    "wordmark": { "family": "Cormorant Garamond", "weights": [600, 700], "use": "Web wordmark only (top bar lockup)" },
    "script": { "family": "Allura", "weights": [400], "use": "Cursive \"Your mate in\" in the lockup only" },
    "google_fonts_url": "https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,450;9..40,500;9..40,650;9..40,750&family=Source+Serif+4:opsz,wght@8..60,600;8..60,650;8..60,700&display=swap"
  },
  "type_scale": [
    { "name": "hero title", "family": "serif", "weight": 650, "size": "clamp(1.9rem, 4vw, 2.6rem)", "line_height": 1.15, "tracking": "-0.03em", "color": "--b-navy", "source": "assets/page-plans.css .hero h1" },
    { "name": "section title", "family": "serif", "weight": 650, "size": "clamp(1.75rem, 3.2vw, 2.35rem)", "line_height": 1.15, "tracking": "-0.03em", "color": "--b-navy", "source": "assets/index.css h2" },
    { "name": "card title", "family": "serif", "weight": 600, "size": "1.45rem", "line_height": 1.2, "tracking": "-0.02em", "color": "--b-navy", "source": "assets/index.css .school h3" },
    { "name": "working heading", "family": "sans", "weight": 600, "size": "23px", "line_height": 1.3, "tracking": "-0.02em", "color": "--b-ink", "source": "assets/index-calm.css" },
    { "name": "body", "family": "sans", "weight": 450, "size": "16px", "line_height": 1.55, "color": "--b-ink" },
    { "name": "small", "family": "sans", "weight": 450, "size": "13.5px", "line_height": 1.5, "color": "--b-muted" },
    { "name": "eyebrow", "family": "sans", "weight": 750, "size": "11.5px", "tracking": "0.14em", "transform": "uppercase", "color": "--b-gold-ink", "source": "assets/index.css .sec-label" },
    { "name": "button", "family": "sans", "weight": 600, "size": "14px", "min_height": "46px", "radius": "9px", "source": "assets/index-calm.css" },
    { "name": "nav link", "family": "sans", "weight": 500, "size": "13px", "tracking": "0.04em", "source": "assets/theme.css" },
    { "name": "wordmark (web)", "family": "wordmark", "weight": 600, "size": "26px", "tracking": "0.06em", "source": "assets/theme.css .site-top .brand .word" },
    { "name": "video caption", "family": "sans", "weight": 500, "size": "34px", "line_height": 1.28, "color": "--b-stage-text" },
    { "name": "video tagline", "family": "serif", "weight": 600, "size": "52px", "line_height": 1.15, "color": "--b-stage-text" }
  ],
  "radius": {
    "panel": "12px",
    "button": "9px",
    "button_older_pages": "1px",
    "plan_card": "16px",
    "input": "10px",
    "pill": "999px"
  },
  "spacing": {
    "panel_padding": "24px",
    "grid_gap": ["12px", "14px", "18px", "20px"],
    "tile_gap": "6px",
    "page_gutter": "20px",
    "section_padding": { "calm": "56px", "older_pages": "72px" },
    "touch_target_min": "44px"
  },
  "layout": {
    "page_width": "1080px to 1120px, centered",
    "top_bar_min_height": { "wide": "76px", "under_1140px": "68px" },
    "page_order": ["top bar (navy)", "hero (navy)", "light sections", "band (navy)", "footer (dark)"],
    "phone_breakpoint": "760px, one column",
    "canvas": "light gray",
    "surface": "white",
    "current_section": "pale blue",
    "gold_is_for": "brand and deadline accents only"
  },
  "logo": {
    "files": {
      "/logo.png": "532x532 master",
      "/logo-112.png": "112x112",
      "/logo-56.png": "56x56",
      "/logo-28.png": "28x28, smallest shipped",
      "/icon-192.png": "192x192",
      "/icon-512.png": "512x512",
      "/apple-touch-icon.png": "180x180",
      "/favicon.ico": "16, 32 and 48",
      "/favicon-32.png": "32x32",
      "/favicon-16.png": "16x16",
      "/og-ai.png": "1200x630 social card (older words)",
      "/og-scan.png": "1200x630 social card (older words)"
    },
    "colors_in_file": "Blue (about #417daf), red and white flag shield. Use as shipped.",
    "min_size_px": 28,
    "top_bar_size_px": 40,
    "clear_space": "half the shield width on every side (proposed, not in source)",
    "wordmark": {
      "write": "FedM8",
      "say": "Fed Mate",
      "web_on_navy": { "font": "Cormorant Garamond 600 26px, tracking 0.06em", "fed": "#ffffff", "m8": "--b-gold-light", "mate": "Allura 17px, --b-gold-light", "small": "DM Sans 10px, tracking 0.2em, uppercase, Federal Contracting" },
      "web_on_light": { "fed": "#192c43", "m8": "#94702d", "mate": "#836933", "small": "#64758a" },
      "video": { "font": "DM Sans 700, tracking -0.04em", "fed": "#f2f5f9 on dark, navy on light", "m8": "--b-stage-gold" }
    },
    "dont": ["recolor or glow", "stretch or tilt", "add AI to the name", "busy or striped ground", "olive camo ground"]
  },
  "video": {
    "stage": "#0b1626",
    "stage_glows": ["radial #183252 at top left", "radial #1b2b20 at bottom right"],
    "frame_px": [1920, 1080],
    "fps": 30,
    "browser_window_px": [1660, 868],
    "browser_window_offset_px": [130, 84],
    "browser_window_radius_px": 18,
    "app_palette": {
      "page": "#f5f6f8", "card": "#ffffff", "text": "#182231", "text_2": "#526071", "border": "#e4e8ee",
      "navy": "#193b5d", "gold": "#c4a35a", "gold_text": "#8b6c28", "gold_tint": "#f5efe1",
      "blue_tint": "#e8edf5", "blue_tint_text": "#183b61", "green": "#1f7a3a", "green_tint": "#e6f3ea", "red": "#b42318", "red_tint": "#fdecea"
    },
    "caption_px": 34,
    "caption_max_lines": 2,
    "caption_font": "DM Sans 500, white, centered below the window, top 956px",
    "why_it_helps": { "label": "WHY IT HELPS", "label_px": 15, "line_px": 32, "line_weight": 600, "card": "gold tint on stage with thin gold edge, divider after the label" },
    "preview_pill": { "text": "Upcoming FedM8 update · Preview", "style": "gold outline with gold dot", "height_px": 42, "position": "top left", "when": "every demo frame of a feature that is not out yet; dropped once the feature is out" },
    "sample_pill": { "text": "Sample conversations · Names and activity are illustrative", "style": "dashed gray", "position": "top right", "when": "the whole demo" },
    "video_standard": "https://fedm8.com/design/v/001/tokens.json",
    "sample_listing_chip": "Sample listing on every contract and grant",
    "cursor": { "shape": "white arrow, dark outline #142033", "size_px": [34, 40], "move_seconds": [0.5, 0.9] },
    "ripple": { "size_px": 64, "ring_px": 3, "ring": "rgba(196,163,90,.95)", "fill": "rgba(196,163,90,.18)" },
    "ring_highlight": "thin gold ring with soft glow",
    "zoom": 1.16,
    "dip_seconds": 0.45,
    "page_fade_seconds": 0.3,
    "scene_seconds": [18, 23],
    "narration_share": "about half the runtime",
    "voice": "Kokoro af_heart",
    "voice_model": "Kokoro TTS v1.0 (kokoro-onnx), en-us",
    "voice_speed": 0.94,
    "voice_spelling": { "FedM8": "Fed Mate", "NAICS": "nakes", "scope": "voice text only; captions keep the real spelling" },
    "music": "D-major piano",
    "music_detail": "quiet piano arpeggio over a warm pad, about 76 BPM, chords D Bm7 Gmaj7 A then Em7 Gmaj7 D/F# Asus, ducked 7 to 8 dB under the voice",
    "loudness_lufs": -16,
    "true_peak_db": -1.5,
    "audio_codec": "AAC 192k, 48 kHz",
    "files": ["MP4 1080p30 H.264", "SRT", "VTT"],
    "end_card": { "wordmark_px": 150, "tagline": "Federal work. Connected people.", "tagline_font": "Source Serif 4 600 52px", "address": "fedm8.com" },
    "closing_lines": "Three short parallel lines, last word in gold #d6b56c",
    "thumbnail": {
      "status": "proposed from the stage look; the skill lists no thumbnail sizes",
      "size_px": [1280, 720],
      "safe_margin_px": 90,
      "ground": "#0b1626",
      "title": "Source Serif 4 700, #f2f5f9, last word #d6b56c",
      "rule": "gold rule under the title",
      "second_line": "DM Sans 500, #b9c6d6",
      "mark": "shield on a white rounded tile, wordmark bottom left",
      "social_card_px": [1200, 630]
    }
  },
  "print": {
    "source": "assets/page-capability-statement.css",
    "page_width_px": 850,
    "band": "navy #060d18, white wordmark with gold M8",
    "status_bar": "gold #c4a35a with navy text, veteran-led small business",
    "headings": "13 to 15px uppercase, tracking 1.4px, 2px gold underline",
    "bullets": "gold squares",
    "footer": "2px navy rule above",
    "on_print": "white page, no shadow, hide screen buttons"
  },
  "components": {
    "button_primary": { "bg": "--b-navy-ui", "text": "#ffffff", "radius": "9px", "min_height": "46px", "rule": "one filled navy button per view" },
    "button_on_navy": { "primary": "gold fill --b-gold with --b-navy text", "secondary": "outline rgba(224,197,122,.45) with white text" },
    "card": { "bg": "--b-surface", "border": "--b-line", "radius": "12px", "padding": "24px" },
    "chip": { "radius": "999px", "rule": "every status color carries a word", "variants": ["blue", "gold", "ok", "bad", "warn", "ai", "sample"] },
    "sample_chip": "dashed gray outline reading Sample listing",
    "guided_flow": {
      "chevron_done": "--b-flow-blue with a white check",
      "chevron_current": "--b-flow-blue-dark",
      "chevron_todo": "--b-flow-todo",
      "stage": "--b-flow-stage with --b-flow-stage-line border",
      "tile": "white with --b-flow-tile-line edge and soft shadow, picked tile --b-flow-tile-on with --b-flow-blue edge",
      "continue": "--b-continue, white text",
      "back": "white with blue outline"
    },
    "plan_tile": {
      "markup_link": "<a class=\"plan-tile\" data-plan=\"basic\" href=\"/plans#basic\" aria-label=\"Basic plan feature. See plans\" data-tip=\"Basic plan\">B</a>",
      "markup_in_button": "<button type=\"button\" aria-label=\"Save this search (Basic plan)\">Save this search<span class=\"plan-tile\" data-plan=\"basic\" aria-hidden=\"true\">B</span></button>",
      "word_variant": "<span class=\"plan-tile plan-tile--word\" data-plan=\"pro\">Pro</span>",
      "rules": ["one tile per tool, right after the name", "6px gap", "quiet, never a banner", "Free features get no tile", "See plans is the only upgrade link"],
      "assignments": { "Notices": "none", "Grants": "none", "Chat": "none", "Match-M8 matches with reasons": "B", "Saved searches and alerts": "B", "Bid Coach": "B", "Win Kit": "P", "Award Intel": "P" }
    },
    "chat": {
      "room_tabs": ["This contract", "NAICS code", "Live All (read only)"],
      "pinned_note": "FedM8 AI · not a member",
      "rules_line": "Public · Keep prices, bids and nonpublic information out.",
      "post_actions": ["Helpful · M8 N", "Reply", "Follow", "⋯ menu: Report, Hide this person, Remove mine"],
      "nesting_levels": 8,
      "new_replies_pill": "N new replies · Show",
      "action_word": "Post",
      "signed_out": "Sign in to post.",
      "draft_kept": "Not sent yet (kept in this tab)",
      "retry": "Try again",
      "door_chip": "Talk · N",
      "every_page_has": "chat or comments"
    }
  },
  "words": {
    "voice": [
      "Talk to one person who is tired and has real work to do",
      "Short sentences; start an action with a verb",
      "Schoolbook words; a hard word wears its definition on a dotted underline",
      "Pair each feature with a plain benefit",
      "No hype, no exclamation marks, no em dashes in video copy",
      "Never promise a win; members share experience, SBA decides eligibility",
      "No defensive teaching and no bragging about honesty",
      "Errors say what failed, what to do, and keep the person's words"
    ],
    "sdvosb": {
      "source": "assets/sdvosb-status.js STATUS",
      "status": "not_claimed",
      "say": "Veteran-led small business",
      "never": "any SDVOSB status claim for FedM8 (in process or SBA-certified) until the constant flips"
    },
    "samples": "Fictional and labeled: Example Help Desk LLC, Dana R., Marcus T. No real people, emails or phone numbers."
  },
  "naming": {
    "matching_ai": "Match-M8",
    "matching_ai_rule": "Match-M8 is the product name of the matching AI. Never show an engine or vendor name.",
    "room_host": "FedM8 AI",
    "chat_public": "Contract Chat",
    "chat_app": "Chat",
    "conversation": "room",
    "action_word": "Post",
    "helpful_mark": "Helpful · M8 N",
    "company": "FedM8"
  },
  "accessibility": {
    "text_contrast_min": 4.5,
    "large_text_and_lines_contrast_min": 3,
    "touch_target_min_px": 44,
    "focus_ring": "3px --b-focus, offset 2px; on navy --b-gold-light",
    "headings": "one h1, then in order",
    "images": "alt text on meaningful images, empty alt on decoration",
    "status": "color always with a word",
    "video": "burned-in captions plus SRT and VTT",
    "motion": "respect prefers-reduced-motion"
  },
  "rules": [
    "Read DESIGN_DNA.md and this file before drawing. DESIGN_DNA.md wins on conflict.",
    "Use the --b- variables. Do not invent a hex or a font.",
    "Navy is the ground, gold is the line. Gold text on light fails contrast; use --b-gold-ink.",
    "Public headings are Source Serif 4; everything else is DM Sans. Cormorant Garamond and Allura are for the wordmark only.",
    "Working screens: gray canvas, white panels, 12px corners, 24px padding, one filled navy button, pale blue for the current section.",
    "Use the shield files as shipped. Never recolor, stretch, tilt or add AI to the name.",
    "Every page has chat or comments. Use the chat words and the word Post.",
    "Name the matching AI Match-M8 and the chat host FedM8 AI. Never show an engine or vendor name.",
    "One plan tile per tool, right after its name. No banners. See plans is the only upgrade link.",
    "Video: stage #0b1626, window 1660x868, captions 34px and 2 lines at most, gold Upcoming FedM8 update · Preview pill on every frame of an unreleased feature, zoom 1.16, dips 0.45s, -16 LUFS. Samples use Example Base; the end card says fedm8.com. Full standard: /design/v/001/.",
    "Samples are fictional and labeled.",
    "Say Veteran-led small business for FedM8 and claim no SDVOSB status.",
    "Meet the accessibility list: contrast, 44px targets, focus ring, one h1, alt text."
  ],
  "unconfirmed": [
    "Logo clear space (half the shield width) is proposed, not in source.",
    "Thumbnail size and layout are proposed from the stage look."
  ]
}

body[data-design="001"] {
  --b-navy:#060d18; --b-navy-2:#0c1626; --b-navy-3:#162438;
  --b-gold:#c4a35a; --b-gold-light:#e0c57a; --b-gold-deep:#9a7a32;
  --b-page:#f5f6f8; --b-surface:#ffffff; --b-ink:#192536; --b-muted:#526071; --b-line:#e1e6ed;
  --b-navy-ui:#193b5d; --b-soft:#e8edf5; --b-soft-ink:#183b61;
  --b-gold-ink:#7e6940; --b-gold-tint:#f5efe1; --b-gold-line:#e8dbbb;
  --b-stage:#0b1626; --b-stage-gold:#d6b56c; --b-stage-line:#3a5070; --b-stage-text:#f2f5f9; --b-stage-muted:#b9c6d6;
  --b-flow-blue:#1f6fb5; --b-flow-blue-dark:#164e86; --b-continue:#1f7a3a; --b-flow-stage:#e9f0f8;
  --b-flow-stage-line:#cbd8e7; --b-flow-tile-line:#aebfd3; --b-flow-tile-on:#d6e6f8; --b-flow-todo:#c6d3e2; --b-flow-ink:#12263f;
  --b-ok:#1f7a3a; --b-ok-soft:#e6f3ea; --b-bad:#b42318; --b-bad-soft:#fdecea; --b-warn:#8a5a00; --b-warn-soft:#fdf3d8;
  --b-shield-blue:#417daf; --b-focus:#2b6cb0;
  --b-radius:12px; --b-radius-btn:9px; --b-pad:24px;
  --b-shadow-card:0 1px 2px rgba(15,40,80,.08),0 2px 8px rgba(15,40,80,.05);

  --ds-bg:var(--b-page); --ds-surface:var(--b-surface); --ds-ink:var(--b-ink); --ds-muted:var(--b-muted); --ds-line:var(--b-line);
  --ds-accent:var(--b-navy); --ds-accent-ink:#fff; --ds-soft:var(--b-soft); --ds-focus:var(--b-focus);
  --ds-font-sans:"DM Sans",system-ui,sans-serif; --ds-font-serif:"Source Serif 4",Georgia,serif; --ds-radius:12px;
  --plan-b-ink:#1a3a68; --plan-b-bg:transparent; --plan-b-line:#c9d3e0; --plan-p-ink:#7a5f22; --plan-p-bg:#f7f0dd; --plan-p-line:#e2cf9c;
  --pc-surface:var(--b-surface); --pc-ink:var(--b-ink); --pc-muted:var(--b-muted); --pc-line:var(--b-line); --pc-accent:var(--b-navy); --pc-accent-ink:#fff;
  --pc-soft:var(--b-soft); --pc-radius:12px; --pc-font:"DM Sans",system-ui,sans-serif;
  --pc-act-ink:var(--b-navy-ui); --pc-line-strong:#cfd7e2;
  --plan-lock-ink:var(--b-muted); --plan-lock-link:var(--b-navy-ui);
  --plan-view-line:var(--b-line); --plan-view-bg:var(--b-soft); --plan-view-ink:var(--b-muted); --plan-view-on:var(--b-surface); --plan-view-ink-on:var(--b-ink);
}

/* ---------- shared bits ---------- */
body[data-design="001"] :is(.y1-btn,.y1-input,.y1-link,.y1-act,.y1-door,.y1-tab,.y1-more,.y1-menu button):focus-visible {
  outline:3px solid var(--b-focus); outline-offset:2px;
}
.y1-dark :is(.y1-btn,.y1-link,.y1-nav a):focus-visible { outline-color:var(--b-gold-light); }
.y1-serif { font-family:var(--ds-font-serif); }
.y1-mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.92em; }
.y1-cols { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); align-items:start; }
.y1-small { font-size:13.5px; color:var(--b-muted); margin:6px 0 0; }
.y1-stack-s { display:flex; flex-direction:column; gap:10px; }
.y1-wrap-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* ---------- logo and brand ---------- */
.y1-logo-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); }
.y1-logo-tile { margin:0; border:1px solid var(--b-line); border-radius:var(--b-radius); background:var(--b-surface); overflow:hidden; }
.y1-logo-stage { display:flex; align-items:center; justify-content:center; min-height:150px; padding:20px; }
.y1-logo-stage--navy { background:var(--b-navy); }
.y1-logo-stage--white { background:#fff; }
.y1-logo-stage--page { background:var(--b-page); }
.y1-logo-stage--tile { background:var(--b-navy); }
.y1-logo-tile figcaption { padding:12px 14px; font-size:13.5px; line-height:1.4; color:var(--b-muted); border-top:1px solid var(--b-line); }
.y1-logo-tile figcaption b { display:block; color:var(--b-ink); font-weight:650; font-size:14px; }
.y1-logo-tile code { font-size:12.5px; }
.y1-white-tile { display:grid; place-items:center; background:#fff; border-radius:18px; padding:14px; }
.y1-clear { position:relative; display:inline-block; padding:40px; border:1px dashed var(--b-gold-deep); background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(196,163,90,.08) 6px 12px); }
.y1-clear img { display:block; background:#fff; outline:1px solid var(--b-line); }
.y1-clear span { position:absolute; font-size:12px; font-weight:650; color:var(--b-gold-ink); }
.y1-clear .y1-cs-t { top:10px; left:50%; transform:translateX(-50%); }
.y1-clear .y1-cs-b { bottom:10px; left:50%; transform:translateX(-50%); }
.y1-clear .y1-cs-l { left:8px; top:50%; transform:translateY(-50%); }
.y1-clear .y1-cs-r { right:8px; top:50%; transform:translateY(-50%); }
.y1-sizes { display:flex; align-items:flex-end; gap:22px; flex-wrap:wrap; }
.y1-sizes figure { margin:0; text-align:center; font-size:12.5px; color:var(--b-muted); }
.y1-sizes img { display:block; margin:0 auto 6px; }

.y1-lockup { display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:#fff; }
.y1-lockup img { width:40px; height:40px; display:block; object-fit:contain; flex:none; }
.y1-lockup-text { display:flex; flex-direction:column; justify-content:center; line-height:1; }
.y1-lockup .y1-word { font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif; font-size:26px; font-weight:600; color:#fff; letter-spacing:.06em; line-height:1; }
.y1-lockup .y1-word span { color:var(--b-gold-light); }
.y1-lockup .y1-mate { display:block; font-family:"Allura",cursive; font-size:17px; line-height:.8; color:var(--b-gold-light); letter-spacing:.03em; margin:3px 0 2px; transform:rotate(-3deg); transform-origin:left center; }
.y1-lockup small { display:block; font-size:10px; font-weight:500; letter-spacing:.2em; color:rgba(232,234,238,.55); text-transform:uppercase; margin-top:1px; }
.y1-lockup--calm .y1-word { color:#192c43; }
.y1-lockup--calm .y1-word span { color:#94702d; }
.y1-lockup--calm .y1-mate { color:#836933; }
.y1-lockup--calm small { color:#64758a; }
.y1-wm { font:700 44px/1 var(--ds-font-sans); letter-spacing:-.04em; color:var(--b-stage-text); }
.y1-wm b { color:var(--b-stage-gold); font-weight:700; }
.y1-wm--light { color:var(--b-navy-ui); }
.y1-wm--light b { color:var(--b-gold-ink); }
.y1-brandbox { border-radius:var(--b-radius); padding:26px; display:flex; flex-direction:column; gap:8px; min-height:132px; justify-content:center; }
.y1-brandbox--navy { background:var(--b-navy); }
.y1-brandbox--white { background:#fff; border:1px solid var(--b-line); }
.y1-brandbox--stage { background:var(--b-stage); }
.y1-brandbox p { margin:0; font-size:12.5px; color:var(--b-muted); }
.y1-brandbox--navy p, .y1-brandbox--stage p { color:var(--b-stage-muted); }
.y1-bad-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr)); }
.y1-bad { margin:0; border:1px solid #f3c3bd; border-radius:var(--b-radius); background:var(--b-surface); overflow:hidden; }
.y1-bad > div { display:grid; place-items:center; min-height:112px; background:var(--b-page); overflow:hidden; }
.y1-bad figcaption { padding:10px 12px; font-size:13px; color:var(--b-muted); border-top:1px solid #f3c3bd; }
.y1-bad figcaption b { color:var(--b-bad); font-weight:650; }
.y1-bad-stretch { width:92px; height:44px; object-fit:fill; }
.y1-bad-tint { filter:grayscale(1) sepia(1) hue-rotate(5deg) saturate(3); }
.y1-bad-busy { background:repeating-linear-gradient(135deg,#c4a35a 0 10px,#0c1626 10px 20px); padding:10px; }
.y1-bad-ai { display:flex; align-items:center; gap:6px; }
.y1-bad-ai span { font:700 22px/1 var(--ds-font-sans); color:var(--b-navy-ui); }
.y1-bad-tilt { transform:rotate(-18deg); }

/* ---------- colors ---------- */
.y1-pair { display:inline-flex; align-items:center; justify-content:center; min-width:74px; padding:6px 10px; border-radius:8px; font-weight:650; font-size:15px; line-height:1.2; border:1px solid rgba(6,13,24,.12); }
.y1-bg-page { background:var(--b-page); } .y1-bg-surface { background:#fff; } .y1-bg-navy { background:var(--b-navy); }
.y1-bg-navy-ui { background:var(--b-navy-ui); } .y1-bg-soft { background:var(--b-soft); } .y1-bg-gold { background:var(--b-gold); }
.y1-bg-stage { background:var(--b-stage); } .y1-bg-continue { background:var(--b-continue); } .y1-bg-flow { background:var(--b-flow-blue); }
.y1-bg-flow-dark { background:var(--b-flow-blue-dark); } .y1-bg-plan-p { background:#f7f0dd; } .y1-bg-ok-soft { background:var(--b-ok-soft); }
.y1-bg-bad-soft { background:var(--b-bad-soft); } .y1-bg-warn-soft { background:var(--b-warn-soft); } .y1-bg-old { background:#eef3f8; }
.y1-fg-ink { color:var(--b-ink); } .y1-fg-muted { color:var(--b-muted); } .y1-fg-white { color:#fff; } .y1-fg-navy { color:var(--b-navy); }
.y1-fg-gold { color:var(--b-gold); } .y1-fg-gold-light { color:var(--b-gold-light); } .y1-fg-gold-deep { color:var(--b-gold-deep); }
.y1-fg-gold-ink { color:var(--b-gold-ink); } .y1-fg-soft-ink { color:var(--b-soft-ink); } .y1-fg-stage-text { color:var(--b-stage-text); }
.y1-fg-stage-muted { color:var(--b-stage-muted); } .y1-fg-stage-gold { color:var(--b-stage-gold); } .y1-fg-plan-p { color:#7a5f22; }
.y1-fg-focus { color:var(--b-focus); } .y1-fg-ok { color:var(--b-ok); } .y1-fg-bad { color:var(--b-bad); } .y1-fg-warn { color:var(--b-warn); }
.y1-fg-old { color:#848d9c; }
.y1-verdict { font-weight:650; white-space:nowrap; }
.y1-verdict--pass { color:var(--b-ok); }
.y1-verdict--fail { color:var(--b-bad); }
.y1-verdict--large { color:var(--b-warn); }

/* ---------- type ---------- */
.y1-t-hero { font:650 clamp(1.9rem,4vw,2.6rem)/1.15 var(--ds-font-serif); letter-spacing:-.03em; color:var(--b-navy); margin:0; }
.y1-t-section { font:650 clamp(1.75rem,3.2vw,2.35rem)/1.15 var(--ds-font-serif); letter-spacing:-.03em; color:var(--b-navy); margin:0; }
.y1-t-card { font:600 1.45rem/1.2 var(--ds-font-serif); letter-spacing:-.02em; color:var(--b-navy); margin:0; }
.y1-t-work { font:600 23px/1.3 var(--ds-font-sans); letter-spacing:-.02em; color:var(--b-ink); margin:0; }
.y1-t-body { font:450 16px/1.55 var(--ds-font-sans); color:var(--b-ink); margin:0; max-width:46ch; }
.y1-t-small { font:450 13.5px/1.5 var(--ds-font-sans); color:var(--b-muted); margin:0; }
.y1-t-eyebrow { font:750 11.5px/1.3 var(--ds-font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--b-gold-ink); margin:0; }
.y1-t-button { display:inline-flex; align-items:center; min-height:46px; padding:0 20px; border-radius:var(--b-radius-btn); background:var(--b-navy-ui); color:#fff; font:600 14px/1 var(--ds-font-sans); }
.y1-t-nav { font:500 13px/1 var(--ds-font-sans); letter-spacing:.04em; color:#fff; background:var(--b-navy); padding:14px 16px; border-radius:8px; display:inline-block; }
.y1-t-word { font:600 26px/1 "Cormorant Garamond",Georgia,serif; letter-spacing:.06em; color:#fff; background:var(--b-navy); padding:14px 18px; border-radius:8px; display:inline-block; }
.y1-t-word span { color:var(--b-gold-light); }
.y1-t-cap { font:500 34px/1.28 var(--ds-font-sans); color:var(--b-stage-text); background:var(--b-stage); padding:14px 20px; border-radius:10px; display:inline-block; max-width:100%; }
.y1-t-end { font:600 52px/1.15 var(--ds-font-serif); letter-spacing:-.01em; color:var(--b-stage-text); background:var(--b-stage); padding:14px 20px; border-radius:10px; display:inline-block; max-width:100%; }
.y1-fonts { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.y1-font { background:var(--b-surface); border:1px solid var(--b-line); border-radius:var(--b-radius); padding:20px; }
.y1-font .y1-aa { font-size:56px; line-height:1; margin:0 0 8px; color:var(--b-navy); }
.y1-font .y1-aa--sans { font-family:var(--ds-font-sans); font-weight:650; }
.y1-font .y1-aa--serif { font-family:var(--ds-font-serif); font-weight:650; }
.y1-font .y1-aa--corm { font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; letter-spacing:.04em; }
.y1-font .y1-aa--allura { font-family:"Allura",cursive; font-weight:400; color:var(--b-gold-ink); }
.y1-font h3 { margin:0 0 4px; font-size:16px; }
.y1-font p { margin:0; font-size:14px; color:var(--b-muted); line-height:1.5; }

/* ---------- quiet interface ---------- */
.y1-app { display:grid; grid-template-columns:200px minmax(0,1fr); gap:0; background:var(--b-page); border:1px solid var(--b-line); border-radius:var(--b-radius); overflow:hidden; min-height:340px; container-type:inline-size; }
.y1-rail { background:#fcfcfd; border-right:1px solid var(--b-line); padding:14px 10px; display:flex; flex-direction:column; gap:2px; }
.y1-rail .y1-brand-s { font-weight:700; font-size:16px; letter-spacing:-.01em; padding:2px 10px 12px; color:#152337; }
.y1-rail .y1-brand-s b { color:var(--b-gold-ink); }
.y1-rail a { display:flex; align-items:center; min-height:44px; padding:0 12px; border-radius:8px; color:var(--b-muted); font-size:14px; text-decoration:none; }
.y1-rail a[aria-current="page"] { background:var(--b-soft); color:var(--b-soft-ink); font-weight:650; }
.y1-rail a:hover { background:#f0f3f7; color:var(--b-ink); }
.y1-rail a[aria-current="page"]:hover { background:var(--b-soft); color:var(--b-soft-ink); }
.y1-work { padding:20px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.y1-panel { background:var(--b-surface); border:1px solid var(--b-line); border-radius:var(--b-radius); padding:var(--b-pad); min-width:0; }
.y1-panel h3 { margin:0 0 6px; font:650 20px/1.25 var(--ds-font-sans); letter-spacing:-.02em; color:var(--b-ink); }
.y1-panel p { margin:0 0 12px; font-size:15px; color:var(--b-muted); }
.y1-panel .y1-wrap-row { margin-top:4px; }
@container (max-width:560px) {
  .y1-app { grid-template-columns:1fr; }
  .y1-rail { flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--b-line); }
  .y1-rail .y1-brand-s { width:100%; padding-bottom:4px; }
}
.y1-rules { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); margin:0; padding:0; list-style:none; }
.y1-rules li { background:var(--b-surface); border:1px solid var(--b-line); border-radius:var(--b-radius); padding:16px 18px; font-size:15px; line-height:1.45; }
.y1-rules li b { display:block; font-weight:650; margin-bottom:2px; }
.y1-rules .y1-dot { display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:8px; vertical-align:-1px; border:1px solid rgba(6,13,24,.18); }
.y1-dot--page { background:var(--b-page); } .y1-dot--white { background:#fff; } .y1-dot--navy { background:var(--b-navy-ui); }
.y1-dot--soft { background:var(--b-soft); } .y1-dot--gold { background:var(--b-gold); } .y1-dot--radius { border-radius:50%; background:var(--b-soft); }

/* ---------- buttons, chips, cards ---------- */
.y1-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; min-width:44px; padding:0 20px; border-radius:var(--b-radius-btn); border:1px solid transparent; font:600 14px/1 var(--ds-font-sans); cursor:pointer; text-decoration:none; background:var(--b-soft); color:var(--b-navy-ui); }
.y1-btn--primary { background:var(--b-navy-ui); border-color:var(--b-navy-ui); color:#fff; }
.y1-btn--primary:hover { background:var(--b-navy-2); border-color:var(--b-navy-2); }
.y1-btn--soft { background:var(--b-soft); border-color:#dce4ed; color:#224867; }
.y1-btn--outline { background:#fff; border-color:#c9d3e0; color:var(--b-navy-ui); }
.y1-btn--ghost { background:transparent; border-color:transparent; color:#37516d; padding:0 8px; text-decoration:underline; text-underline-offset:3px; }
.y1-btn--gold { background:var(--b-gold); border-color:var(--b-gold); color:var(--b-navy); letter-spacing:.02em; }
.y1-btn--gold:hover { background:var(--b-gold-light); border-color:var(--b-gold-light); }
.y1-btn--dark-ghost { background:transparent; border-color:rgba(224,197,122,.45); color:#fff; }
.y1-btn--dark-ghost:hover { border-color:var(--b-gold-light); color:var(--b-gold-light); }
.y1-btn:disabled { opacity:.5; cursor:not-allowed; }
.y1-btn--sharp { border-radius:1px; letter-spacing:.06em; }
.y1-chip { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; line-height:1.3; padding:3px 10px; border-radius:999px; background:#f0f2f5; border:1px solid #dce2ea; color:#4a5668; font-weight:500; white-space:nowrap; }
.y1-chip::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.9; }
.y1-chip--plain::before { display:none; }
.y1-chip--blue { background:var(--b-soft); border-color:#cbd8e7; color:var(--b-soft-ink); }
.y1-chip--gold { background:var(--b-gold-tint); border-color:var(--b-gold-line); color:#725820; }
.y1-chip--ok { background:var(--b-ok-soft); border-color:#bfe0c9; color:var(--b-ok); }
.y1-chip--bad { background:var(--b-bad-soft); border-color:#f3c3bd; color:var(--b-bad); }
.y1-chip--warn { background:var(--b-warn-soft); border-color:#ecd8a0; color:var(--b-warn); }
.y1-chip--ai { background:var(--b-navy-ui); border-color:var(--b-navy-ui); color:#fff; }
.y1-chip--ai::before { display:none; }
.y1-chip--sample { background:transparent; border-style:dashed; border-color:#b4bfcc; color:#4a5668; }
.y1-chip--sample::before { display:none; }
.y1-card { background:var(--b-surface); border:1px solid var(--b-line); border-radius:var(--b-radius); padding:var(--b-pad); display:flex; flex-direction:column; gap:8px; min-width:0; }
.y1-card h3 { margin:0; font:600 1.3rem/1.2 var(--ds-font-serif); letter-spacing:-.02em; color:var(--b-navy); }
.y1-card p { margin:0; font-size:15px; color:var(--b-muted); line-height:1.5; }
.y1-card .y1-eyebrow { font:750 11.5px/1.3 var(--ds-font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--b-gold-ink); }
.y1-card--dark { background:var(--b-navy); border-color:var(--b-navy); color:#c5d2e0; }
.y1-card--dark h3 { color:#fff; }
.y1-card--dark p { color:#a8b8c9; }
.y1-card--dark .y1-eyebrow { color:var(--b-gold-light); }
.y1-card--gold { border-color:rgba(196,163,90,.55); box-shadow:0 10px 28px rgba(14,20,27,.08); }
.y1-plan-name { font:750 11.5px/1 var(--ds-font-sans); letter-spacing:.12em; text-transform:uppercase; color:var(--b-muted); }
.y1-card--dark .y1-plan-name { color:var(--b-gold-light); }
.y1-checks { list-style:none; margin:4px 0 0; padding:0; font-size:14.5px; }
.y1-checks li { padding:6px 0 6px 20px; position:relative; color:var(--b-ink); border-bottom:1px solid rgba(14,20,27,.06); }
.y1-checks li:last-child { border-bottom:0; }
.y1-checks li::before { content:""; position:absolute; left:0; top:14px; width:6px; height:6px; border-radius:50%; background:var(--b-ok); }
.y1-card--dark .y1-checks li { color:#d5deea; border-bottom-color:rgba(255,255,255,.08); }
.y1-card--dark .y1-checks li::before { background:var(--b-gold-light); }
.y1-link { color:var(--b-flow-blue-dark); font-weight:600; text-underline-offset:3px; }

/* ---------- guided flow ---------- */
.y1-flow { background:var(--b-flow-stage); border:1px solid var(--b-flow-stage-line); border-radius:var(--b-radius); padding:22px; color:var(--b-flow-ink); }
.y1-chev { list-style:none; margin:0 0 6px; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; }
.y1-chev li { display:flex; flex-direction:column; gap:6px; align-items:stretch; }
.y1-chev .y1-seg { position:relative; height:34px; display:grid; place-items:center; background:var(--b-flow-todo); color:var(--b-ink); font-weight:700; font-size:15px;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%); }
.y1-chev li:first-child .y1-seg { clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%); }
.y1-chev .is-done .y1-seg { background:var(--b-flow-blue); color:#fff; }
.y1-chev .is-current .y1-seg { background:var(--b-flow-blue-dark); color:#fff; }
.y1-chev .y1-seg-label { font-size:12.5px; text-align:center; color:#344458; }
.y1-chev .is-done .y1-seg-label { color:var(--b-flow-blue-dark); }
.y1-chev .is-current .y1-seg-label { color:var(--b-flow-blue-dark); font-weight:700; }
.y1-ask { font:650 24px/1.2 var(--ds-font-sans); text-align:center; color:var(--b-flow-ink); margin:20px 0 6px; letter-spacing:-.01em; }
.y1-ask-help { text-align:center; font-size:15px; color:var(--b-muted); margin:0 0 16px; }
.y1-tiles { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:16px; }
.y1-tile { min-height:68px; padding:12px; border:1.5px solid var(--b-flow-tile-line); border-radius:8px; background:#fff; box-shadow:var(--b-shadow-card); color:var(--b-flow-ink); font:600 16px/1.3 var(--ds-font-sans); text-align:center; cursor:pointer; }
.y1-tile[aria-pressed="true"] { background:var(--b-flow-tile-on); border-color:var(--b-flow-blue); box-shadow:inset 0 0 0 1px var(--b-flow-blue); color:var(--b-flow-blue-dark); }
.y1-flow-foot { display:flex; gap:12px; }
.y1-back { min-height:48px; padding:0 22px; border-radius:8px; background:#fff; border:1.5px solid var(--b-flow-blue); color:var(--b-flow-blue); font:700 15px/1 var(--ds-font-sans); cursor:pointer; }
.y1-next { flex:1; min-height:48px; border-radius:8px; background:var(--b-continue); border:1px solid var(--b-continue); color:#fff; font:700 15px/1 var(--ds-font-sans); cursor:pointer; }
.y1-next:hover { background:#17602d; }
.y1-back:focus-visible, .y1-next:focus-visible, .y1-tile:focus-visible { outline:3px solid var(--b-focus); outline-offset:2px; }
@media (max-width:560px) { .y1-chev { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:10px; } .y1-tiles { grid-template-columns:1fr; } }

/* ---------- forms ---------- */
.y1-field { display:flex; flex-direction:column; gap:6px; }
.y1-field label { font-size:14px; font-weight:650; color:var(--b-ink); }
.y1-field .y1-help { font-size:13.5px; color:var(--b-muted); }
.y1-input { min-height:46px; padding:8px 12px; border:1px solid #b8c3d1; border-radius:10px; background:#fff; color:var(--b-ink); font:450 16px/1.3 var(--ds-font-sans); width:100%; }
.y1-input:focus-visible { border-color:var(--b-flow-blue-dark); box-shadow:0 0 0 3px rgba(31,111,181,.18); outline-offset:0; }
.y1-input--err { border-color:var(--b-bad); box-shadow:0 0 0 3px rgba(180,35,24,.08); }
.y1-err { display:flex; gap:8px; align-items:flex-start; background:var(--b-bad-soft); border:1px solid #f3c3bd; color:#7a1d15; border-radius:9px; padding:8px 11px; font-size:14px; }
.y1-form { display:grid; gap:14px; max-width:440px; }

/* ---------- layout sample (marketing page) ---------- */
.y1-site { container-type:inline-size; background:var(--b-page); font-size:14px; color:var(--b-ink); }
.y1-nav { background:var(--b-navy); border-bottom:1px solid rgba(224,197,122,.12); display:flex; align-items:center; gap:14px; padding:10px 18px; min-height:68px; }
.y1-nav .y1-lockup img { width:34px; height:34px; }
.y1-nav .y1-lockup .y1-word { font-size:22px; }
.y1-nav .y1-lockup .y1-mate { font-size:14px; }
.y1-nav .y1-lockup small { font-size:8.5px; }
.y1-nav nav { margin-left:auto; display:flex; gap:2px; align-items:center; }
.y1-nav nav a { color:rgba(250,251,252,.82); font-size:12.5px; letter-spacing:.04em; padding:0 9px; min-height:44px; display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap; }
.y1-nav nav a:hover { color:var(--b-gold-light); }
.y1-hero-s { position:relative; color:#fff; padding:34px 22px 40px; background:radial-gradient(ellipse 90% 70% at 78% 18%,rgba(196,163,90,.22),transparent 52%),radial-gradient(ellipse 50% 40% at 12% 80%,rgba(22,36,56,.9),transparent 60%),linear-gradient(165deg,#0a1526 0%,#101f36 38%,#0a1422 72%,#060d18 100%); overflow:hidden; }
.y1-hero-s h4 { font:650 clamp(22px,4.6cqw,32px)/1.15 var(--ds-font-serif); letter-spacing:-.02em; margin:0 0 10px; max-width:17em; color:#fff; }
.y1-hero-s p { margin:0 0 16px; max-width:34em; color:rgba(232,234,238,.78); font-size:14.5px; line-height:1.6; }
.y1-hero-rule { width:120px; height:1px; background:linear-gradient(90deg,var(--b-gold-light),rgba(224,197,122,.15)); margin:0 0 14px; }
.y1-hero-s .y1-eyebrow-d { font:500 11px/1.3 var(--ds-font-sans); letter-spacing:.28em; text-transform:uppercase; color:rgba(232,234,238,.7); margin:0 0 8px; }
.y1-sec-s { padding:26px 22px; }
.y1-sec-s h4 { font:650 clamp(18px,3.6cqw,24px)/1.2 var(--ds-font-serif); letter-spacing:-.03em; color:var(--b-navy); margin:0 0 6px; }
.y1-sec-s > p { margin:0 0 14px; color:var(--b-muted); font-size:14px; }
.y1-trio { display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.y1-trio .y1-card { padding:16px; }
.y1-trio .y1-card h3 { font-size:1.05rem; }
.y1-band-s { background:var(--b-navy); color:#c5d2e0; text-align:center; padding:26px 22px; }
.y1-band-s h4 { font:650 clamp(18px,3.6cqw,24px)/1.2 var(--ds-font-serif); letter-spacing:-.03em; color:#fff; margin:0 0 8px; }
.y1-band-s p { margin:0 auto 14px; max-width:30em; color:#a8b8c9; font-size:14px; }
.y1-foot-s { background:#061018; color:#8fa3b8; font-size:12.5px; padding:16px 22px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.y1-foot-s b { color:#fff; font-weight:650; }
.y1-foot-s a { color:#c5d2e0; min-height:24px; display:inline-flex; align-items:center; }
@container (max-width:520px) {
  .y1-nav nav a:not(:last-child) { display:none; }
  .y1-trio { grid-template-columns:1fr; }
  .y1-hero-s { padding:24px 16px 28px; }
  .y1-sec-s, .y1-band-s { padding:20px 16px; }
}
.y1-phone-wrap { display:flex; flex-wrap:wrap; gap:28px; align-items:flex-start; justify-content:center; }
.y1-phone-screen { width:100%; background:var(--b-page); }
.y1-sp-table td:first-child code { white-space:nowrap; }
.y1-sp { display:inline-block; height:14px; background:var(--b-gold); border-radius:3px; vertical-align:middle; }
.y1-sp-4 { width:4px; } .y1-sp-8 { width:8px; } .y1-sp-12 { width:12px; } .y1-sp-14 { width:14px; } .y1-sp-16 { width:16px; }
.y1-sp-20 { width:20px; } .y1-sp-24 { width:24px; } .y1-sp-32 { width:32px; } .y1-sp-56 { width:56px; } .y1-sp-72 { width:72px; }
.y1-rad { display:inline-block; width:40px; height:28px; background:var(--b-soft); border:1.5px solid var(--b-navy-ui); vertical-align:middle; }
.y1-rad-1 { border-radius:1px; } .y1-rad-8 { border-radius:8px; } .y1-rad-9 { border-radius:9px; } .y1-rad-12 { border-radius:12px; } .y1-rad-16 { border-radius:16px; } .y1-rad-pill { border-radius:999px; }

/* ---------- print one-pager ---------- */
.y1-paper { background:#fff; max-width:560px; margin:0 auto; box-shadow:0 8px 30px rgba(6,13,24,.14); color:#1c2733; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; padding-bottom:20px; }
.y1-paper-band { background:var(--b-navy); color:#fff; padding:18px 26px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.y1-paper-band .y1-pw { font-size:24px; font-weight:800; letter-spacing:.5px; }
.y1-paper-band .y1-pw span { color:var(--b-gold); }
.y1-paper-band small { display:block; font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase; color:#c9d4e2; margin-top:2px; }
.y1-paper-band .y1-pr { text-align:right; font-size:11px; color:#c9d4e2; }
.y1-paper-status { background:var(--b-gold); color:var(--b-navy); font-weight:700; font-size:11px; letter-spacing:.6px; text-transform:uppercase; padding:6px 26px; }
.y1-paper-in { padding:6px 26px 0; }
.y1-paper h4 { font-size:12.5px; color:var(--b-navy); text-transform:uppercase; letter-spacing:1.4px; border-bottom:2px solid var(--b-gold); padding-bottom:5px; margin:18px 0 10px; }
.y1-paper p { font-size:12.5px; margin:0; }
.y1-paper ul { list-style:none; margin:0; padding:0; font-size:12px; }
.y1-paper li { padding:3px 0 3px 16px; position:relative; }
.y1-paper li::before { content:""; position:absolute; left:0; top:8px; width:6px; height:6px; background:var(--b-gold); border-radius:2px; }
.y1-paper table { width:100%; border-collapse:collapse; font-size:11.5px; margin-top:4px; }
.y1-paper th, .y1-paper td { text-align:left; padding:6px 9px; border:1px solid #dde4ec; }
.y1-paper th { background:#f4f6f9; color:var(--b-navy); width:40%; }
.y1-paper-foot { margin:18px 26px 0; padding-top:12px; border-top:2px solid var(--b-navy); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:11px; color:#5a6b7d; }
.y1-paper-foot b { color:var(--b-navy); }

/* ---------- chat ---------- */
.y1-chat { display:grid; gap:14px; background:var(--b-surface); border:1px solid var(--b-line); border-radius:var(--b-radius); padding:var(--b-pad); max-width:760px; margin:0 auto; }
.y1-chat-head { display:flex; flex-direction:column; gap:8px; }
.y1-chat-head .y1-eyebrow { font:750 11.5px/1.3 var(--ds-font-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--b-gold-ink); margin:0; }
.y1-chat-head h3 { margin:0; font:650 21px/1.25 var(--ds-font-sans); letter-spacing:-.02em; color:var(--b-ink); }
.y1-tabs { display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--b-line); padding-bottom:8px; }
.y1-tab { min-height:44px; padding:0 14px; border-radius:8px; border:0; background:transparent; color:var(--b-muted); font:500 14px/1 var(--ds-font-sans); cursor:pointer; }
.y1-tab[aria-pressed="true"] { background:var(--b-soft); color:var(--b-soft-ink); font-weight:650; }
.y1-ainote { background:#fbf8f0; border:1px solid #eadfc4; border-left:3px solid var(--b-navy-ui); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:6px; }
.y1-ainote .y1-wrap-row { gap:8px; }
.y1-ainote p { margin:0; font-size:15px; color:var(--b-ink); }
.y1-ainote .y1-meta { font-size:13px; color:var(--b-muted); }
.y1-rulesline { margin:0; font-size:13.5px; color:var(--b-muted); border-left:3px solid var(--b-gold); padding:2px 0 2px 10px; }
.y1-post { display:grid; grid-template-columns:36px minmax(0,1fr); gap:10px; }
.y1-avatar { width:36px; height:36px; border-radius:50%; background:var(--b-navy); color:var(--b-gold-light); display:grid; place-items:center; font:700 13px/1 var(--ds-font-sans); letter-spacing:.02em; }
.y1-post-body { min-width:0; }
.y1-post-meta { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; font-size:13px; color:var(--b-muted); }
.y1-post-meta b { font-size:15px; color:var(--b-ink); font-weight:650; }
.y1-post-text { margin:4px 0 6px; font-size:15.5px; line-height:1.5; color:var(--b-ink); }
.y1-acts { display:flex; flex-wrap:wrap; gap:2px 6px; align-items:center; position:relative; }
.y1-act { min-height:44px; min-width:44px; padding:0 10px; border-radius:8px; border:0; background:transparent; color:var(--b-muted); font:600 13.5px/1 var(--ds-font-sans); cursor:pointer; }
.y1-act:hover { background:var(--b-page); color:var(--b-ink); }
.y1-act[aria-pressed="true"] { color:var(--b-gold-ink); background:var(--b-gold-tint); }
.y1-more { font-size:18px; }
.y1-menu { position:absolute; top:46px; left:0; z-index:2; background:#fff; border:1px solid var(--b-line); border-radius:10px; box-shadow:0 10px 28px rgba(16,24,40,.16); padding:5px; min-width:190px; display:flex; flex-direction:column; }
.y1-menu button { min-height:44px; text-align:left; padding:0 12px; border:0; background:transparent; border-radius:7px; font:450 14.5px/1 var(--ds-font-sans); color:var(--b-ink); cursor:pointer; }
.y1-menu button:hover { background:#f0f3f7; }
.y1-menu-space { height:150px; }
.y1-nest { margin-left:22px; padding-left:14px; border-left:2px solid var(--b-line); display:grid; gap:10px; }
.y1-newpill { justify-self:start; min-height:44px; display:inline-flex; align-items:center; gap:6px; background:var(--b-navy-ui); color:#fff; border:0; border-radius:999px; padding:0 18px; font:650 13.5px/1 var(--ds-font-sans); cursor:pointer; box-shadow:0 6px 16px rgba(25,59,93,.3); }
.y1-newpill:focus-visible { outline:3px solid var(--b-focus); outline-offset:2px; }
.y1-composer { display:grid; gap:8px; }
.y1-composer label { font-size:14px; font-weight:650; }
.y1-composer textarea { min-height:84px; resize:vertical; }
.y1-composer-row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.y1-state { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; font-size:14px; color:var(--b-ink); background:var(--b-warn-soft); border:1px solid #ecd8a0; border-radius:10px; padding:8px 12px; }
.y1-state--info { background:var(--b-soft); border-color:#cbd8e7; color:var(--b-soft-ink); }
.y1-empty { text-align:center; padding:22px 14px; border:1px dashed #b4bfcc; border-radius:var(--b-radius); background:var(--b-page); color:var(--b-muted); font-size:15px; }
.y1-door { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border:1px solid var(--b-navy-ui); border-radius:999px; background:transparent; color:var(--b-navy-ui); font:600 13.5px/1.2 var(--ds-font-sans); text-decoration:none; white-space:nowrap; }
.y1-door:hover { background:var(--b-soft); }
.y1-door--primary { background:var(--b-navy-ui); color:#fff; }
.y1-door--primary:hover { background:var(--b-navy-2); }
.y1-door b { font-weight:650; font-variant-numeric:tabular-nums; }
.y1-pub { background:var(--b-surface); border:1px solid var(--b-line); border-radius:var(--b-radius); padding:20px; max-width:760px; margin:0 auto; }
.y1-pub-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; }
.y1-pub-head h3 { margin:0; font:600 22px/1.25 var(--ds-font-serif); color:var(--b-navy); }
.y1-pub-head p { margin:0; font-size:13.5px; color:var(--b-muted); }
.y1-pub-list { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); margin-top:14px; }
.y1-pub-card { display:flex; flex-direction:column; gap:6px; padding:14px; border:1px solid var(--b-line); border-radius:10px; background:#fff; min-width:0; }
.y1-pub-card--ai { background:var(--b-page); }
.y1-pub-card p { margin:0; }
.y1-pub-where { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12.5px; color:var(--b-muted); }
.y1-pub-title { font-size:15px; font-weight:650; line-height:1.35; }
.y1-pub-body { font-size:14.5px; line-height:1.5; }
.y1-pub-card .y1-door { align-self:flex-start; margin-top:auto; }
.y1-pub-privacy { margin:12px 0 0; font-size:13px; color:var(--b-muted); }

/* ---------- walkthrough video (scaled with container query units; 1 video px = 100cqw / 1920) ---------- */
.y1-vframe { container-type:inline-size; position:relative; width:100%; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:radial-gradient(60.4cqw 64.8cqw at 18% 0%,#183252 0%,rgba(24,50,82,0) 70%),radial-gradient(47cqw 55.5cqw at 100% 100%,#1b2b20 0%,rgba(27,43,32,0) 60%),var(--b-stage); }
.y1-vf { --u:calc(100cqw / 1920); position:absolute; inset:0; font-family:var(--ds-font-sans); }
.y1-vf * { box-sizing:border-box; }
.y1-vf-win { position:absolute; left:calc(130*var(--u)); top:calc(84*var(--u)); width:calc(1660*var(--u)); height:calc(868*var(--u)); border-radius:calc(18*var(--u)); background:#f5f6f8; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.08),0 calc(30*var(--u)) calc(80*var(--u)) rgba(0,0,0,.45); display:flex; flex-direction:column; }
.y1-vf-bar { height:calc(42*var(--u)); flex:none; display:flex; align-items:center; gap:calc(8.4*var(--u)); padding:0 calc(17*var(--u)); background:#eef1f5; border-bottom:1px solid #e4e8ee; }
.y1-vf-bar i { width:calc(12.6*var(--u)); height:calc(12.6*var(--u)); border-radius:50%; background:#cfd5dd; display:block; flex:none; }
.y1-vf-url { margin-left:calc(14*var(--u)); width:calc(588*var(--u)); font-size:calc(15.4*var(--u)); color:#626f80; background:#fff; border:1px solid #e4e8ee; border-radius:calc(8.4*var(--u)); padding:calc(3*var(--u)) calc(14*var(--u)); white-space:nowrap; overflow:hidden; }
.y1-vf-body { flex:1; display:flex; min-height:0; }
.y1-vf-rail { width:calc(249*var(--u)); flex:none; background:#fcfcfd; border-right:1px solid #e4e8ee; padding:calc(17*var(--u)) calc(11*var(--u)); display:flex; flex-direction:column; gap:calc(2*var(--u)); }
.y1-vf-brand { font-weight:700; font-size:calc(22*var(--u)); padding:calc(3*var(--u)) calc(14*var(--u)) calc(17*var(--u)); color:#152337; letter-spacing:-.01em; }
.y1-vf-brand b { color:#8b6c28; }
.y1-vf-ri { padding:calc(9*var(--u)) calc(14*var(--u)); border-radius:calc(11*var(--u)); font-size:calc(18*var(--u)); color:#526071; }
.y1-vf-ri.on { background:#e8edf5; color:#183b61; font-weight:650; }
.y1-vf-main { flex:1; min-width:0; padding:calc(22*var(--u)) calc(25*var(--u)); display:flex; flex-direction:column; gap:calc(15*var(--u)); position:relative; }
.y1-vf-eb { font-size:calc(14.7*var(--u)); letter-spacing:.12em; text-transform:uppercase; color:#8b6c28; font-weight:700; }
.y1-vf-h1 { font-weight:650; font-size:calc(28*var(--u)); letter-spacing:-.02em; color:#182231; line-height:1.2; }
.y1-vf-row { display:flex; gap:calc(10*var(--u)); align-items:center; flex-wrap:wrap; }
.y1-vf-chip { font-size:calc(15.4*var(--u)); padding:calc(2.8*var(--u)) calc(12.6*var(--u)); border-radius:999px; background:#f0f2f5; border:1px solid #dce2ea; color:#526071; white-space:nowrap; font-weight:500; }
.y1-vf-chip--gold { background:#f5efe1; border-color:#e8dbbb; color:#725820; }
.y1-vf-chip--blue { background:#e8edf5; border-color:#cbd8e7; color:#183b61; }
.y1-vf-tabs { display:flex; gap:calc(8*var(--u)); border-bottom:1px solid #e4e8ee; padding-bottom:calc(10*var(--u)); }
.y1-vf-tab { font-size:calc(17.5*var(--u)); padding:calc(7*var(--u)) calc(14*var(--u)); border-radius:calc(11*var(--u)); color:#607083; }
.y1-vf-tab.on { background:#e8edf5; color:#183b61; font-weight:650; }
.y1-vf-ai { background:#fbf8f0; border:1px solid #eadfc4; border-left:calc(4*var(--u)) solid #193b5d; border-radius:calc(14*var(--u)); padding:calc(15*var(--u)) calc(18*var(--u)); display:flex; flex-direction:column; gap:calc(8*var(--u)); font-size:calc(19*var(--u)); color:#182231; }
.y1-vf-ai small { font-size:calc(15.4*var(--u)); color:#626f80; }
.y1-vf-msg { display:flex; gap:calc(14*var(--u)); align-items:flex-start; background:#fff; border:1px solid #e4e8ee; border-radius:calc(17*var(--u)); padding:calc(15*var(--u)) calc(18*var(--u)); font-size:calc(19*var(--u)); color:#182231; }
.y1-vf-av { width:calc(42*var(--u)); height:calc(42*var(--u)); border-radius:50%; background:#193b5d; color:#fff; display:grid; place-items:center; font-weight:700; font-size:calc(15*var(--u)); flex:none; }
.y1-vf-msg small { display:block; color:#626f80; font-size:calc(15.4*var(--u)); margin-top:calc(4*var(--u)); }
.y1-vf-ring { position:absolute; border:calc(2.8*var(--u)) solid var(--b-gold); border-radius:calc(14*var(--u)); box-shadow:0 0 0 calc(5.6*var(--u)) rgba(196,163,90,.22); pointer-events:none; }
.y1-vf-ripple { position:absolute; width:calc(64*var(--u)); height:calc(64*var(--u)); margin:calc(-32*var(--u)) 0 0 calc(-32*var(--u)); border-radius:50%; border:calc(3*var(--u)) solid rgba(196,163,90,.95); background:rgba(196,163,90,.18); pointer-events:none; }
.y1-vf-cursor { position:absolute; width:calc(34*var(--u)); height:calc(40*var(--u)); pointer-events:none; }
.y1-vf-cursor svg { width:100%; height:100%; display:block; filter:drop-shadow(0 calc(2*var(--u)) calc(3*var(--u)) rgba(0,0,0,.35)); }
.y1-vf-pill { position:absolute; top:calc(22*var(--u)); height:calc(42*var(--u)); display:flex; align-items:center; gap:calc(10*var(--u)); border-radius:999px; padding:0 calc(18*var(--u)); font-size:calc(19*var(--u)); white-space:nowrap; color:#f2f5f9; }
.y1-vf-pill--preview { left:calc(130*var(--u)); background:rgba(196,163,90,.14); border:1px solid rgba(214,181,108,.55); font-weight:600; letter-spacing:.01em; }
.y1-vf-pill--preview i { width:calc(10*var(--u)); height:calc(10*var(--u)); border-radius:50%; background:#d6b56c; display:block; box-shadow:0 0 0 calc(4*var(--u)) rgba(214,181,108,.22); }
.y1-vf-pill--sample { right:calc(130*var(--u)); border:1px dashed #3a5070; color:#b9c6d6; font-weight:500; }
.y1-vf-cap { position:absolute; left:calc(160*var(--u)); right:calc(160*var(--u)); top:calc(956*var(--u)); height:calc(124*var(--u)); display:flex; align-items:center; justify-content:center; text-align:center; }
.y1-vf-cap p { margin:0; font-size:calc(34*var(--u)); line-height:1.28; font-weight:500; color:#f2f5f9; letter-spacing:-.003em; max-width:calc(1500*var(--u)); text-shadow:0 1px 2px rgba(0,0,0,.4); }
.y1-vf-plans { position:absolute; left:calc(150*var(--u)); bottom:calc(10*var(--u)); display:flex; gap:calc(10*var(--u)); }

.y1-vd { --k:.6; display:grid; gap:14px; justify-items:start; }
.y1-vd-why { display:flex; align-items:center; gap:calc(18px*var(--k)); background:rgba(196,163,90,.12); border:1px solid rgba(214,181,108,.45); border-radius:calc(16px*var(--k)); padding:calc(12px*var(--k)) calc(26px*var(--k)); max-width:calc(1560px*var(--k)); }
.y1-vd-why b { font-size:calc(15px*var(--k)); letter-spacing:.16em; text-transform:uppercase; color:#d6b56c; font-weight:700; white-space:nowrap; padding-right:calc(18px*var(--k)); border-right:1px solid rgba(214,181,108,.4); }
.y1-vd-why span { font-size:calc(32px*var(--k)); line-height:1.25; font-weight:600; color:#fff; }
.y1-vd-cap { font-size:calc(34px*var(--k)); line-height:1.28; font-weight:500; color:#f2f5f9; max-width:calc(1500px*var(--k)); margin:0; text-align:center; }
.y1-vd-pillrow { display:flex; flex-wrap:wrap; gap:calc(14px*var(--k)); }
.y1-vd-pillrow .y1-vf-pill { gap:8px; position:static; font-size:calc(19px*var(--k)*1.4); height:calc(42px*var(--k)*1.4); padding:0 calc(18px*var(--k)*1.4); }
.y1-vd-pillrow .y1-vf-pill--preview i { width:calc(10px*var(--k)*1.4); height:calc(10px*var(--k)*1.4); }
.y1-vchip { display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:4px 14px 4px 8px; border-radius:999px; background:var(--b-page); border:1px solid rgba(255,255,255,.25); color:var(--b-ink); font:600 14px/1 var(--ds-font-sans); }
.y1-vchip--on { border-color:var(--b-stage-gold); box-shadow:0 0 0 3px rgba(214,181,108,.25); }
.y1-vchip-name { color:var(--b-ink); }
.y1-vf-end { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(22*var(--u)); color:#f2f5f9; }
.y1-vf-wm { font:700 calc(150*var(--u))/1 var(--ds-font-sans); letter-spacing:-.04em; color:#f2f5f9; }
.y1-vf-wm b { color:#d6b56c; }
.y1-vf-tag { font:600 calc(52*var(--u))/1.15 var(--ds-font-serif); letter-spacing:-.01em; }
.y1-vf-endurl { font:500 calc(30*var(--u)) var(--ds-font-sans); color:#b9c6d6; letter-spacing:.02em; margin-top:calc(10*var(--u)); padding:calc(10*var(--u)) calc(26*var(--u)); border:1px solid #2b3d55; border-radius:999px; }
.y1-vf-close { position:absolute; left:calc(150*var(--u)); top:calc(300*var(--u)); display:flex; flex-direction:column; gap:calc(30*var(--u)); }
.y1-vf-close div { font:600 calc(62*var(--u))/1.1 var(--ds-font-serif); color:#f2f5f9; letter-spacing:-.015em; }
.y1-vf-close b { color:#d6b56c; font-weight:600; }
.y1-vf-sig { position:absolute; right:calc(150*var(--u)); top:calc(180*var(--u)); }
.y1-vf-thumb { position:absolute; inset:0; padding:calc(90*var(--u)) calc(100*var(--u)); display:flex; flex-direction:column; justify-content:center; gap:calc(26*var(--u)); }
.y1-vf-thumb .y1-th-title { font:700 calc(124*var(--u))/1.04 var(--ds-font-serif); letter-spacing:-.02em; color:#f2f5f9; max-width:calc(800*var(--u)); }
.y1-vf-thumb .y1-th-title b { color:#d6b56c; font-weight:700; }
.y1-vf-thumb .y1-th-rule { width:calc(180*var(--u)); height:calc(5*var(--u)); background:#d6b56c; }
.y1-vf-thumb .y1-th-sub { font:500 calc(36*var(--u))/1.2 var(--ds-font-sans); color:#b9c6d6; }
.y1-vf-thumb .y1-th-mark { position:absolute; right:calc(90*var(--u)); top:50%; transform:translateY(-50%); width:calc(300*var(--u)); height:calc(300*var(--u)); display:grid; place-items:center; background:#fff; border-radius:calc(48*var(--u)); }
.y1-vf-thumb .y1-th-mark img { width:76%; height:76%; display:block; }
.y1-vf-thumb .y1-th-brand { position:absolute; left:calc(100*var(--u)); bottom:calc(60*var(--u)); font:700 calc(46*var(--u))/1 var(--ds-font-sans); letter-spacing:-.04em; color:#f2f5f9; }
.y1-vf-thumb .y1-th-brand b { color:#d6b56c; }

/* ---------- plan tiles demo ---------- */
.y1-feat { list-style:none; margin:0; padding:0; display:grid; }
.y1-feat li { display:flex; align-items:center; gap:6px; min-height:44px; padding:0 4px; border-bottom:1px solid var(--b-line); font-size:16px; color:var(--b-ink); }
.y1-feat li:last-child { border-bottom:0; }
.y1-feat .plan-tile { margin:0; }
.y1-feat-note { margin-left:auto; font-size:13.5px; color:var(--b-muted); }
.y1-head-tile { display:flex; align-items:center; gap:6px; margin:0 0 6px; font:650 1.45rem/1.2 var(--ds-font-serif); letter-spacing:-.02em; color:var(--b-navy); }
.y1-head-tile .plan-tile { margin:0; }
.y1-btn .plan-tile { margin:0; }
.y1-tiles-demo { display:grid; gap:20px; }
.y1-vchip .plan-tile { margin:0; }

/* ---------- words and misc ---------- */
.y1-say { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); }
.y1-say-c { background:var(--b-surface); border:1px solid var(--b-line); border-radius:var(--b-radius); padding:16px 18px; }
.y1-say-c h3 { margin:0 0 6px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
.y1-say-c--yes h3 { color:var(--b-ok); }
.y1-say-c--no h3 { color:var(--b-bad); }
.y1-say-c p { margin:0 0 6px; font-size:15.5px; line-height:1.45; }
.y1-say-c p:last-child { margin-bottom:0; }
.y1-names { width:100%; }
.y1-checklist { margin:0; padding-left:1.4em; display:grid; gap:8px; max-width:70ch; line-height:1.5; }
.y1-checklist li::marker { color:var(--b-gold-ink); font-weight:700; }

@media (max-width:640px) {
  .y1-clear { padding:28px; }
  .y1-chat, .y1-pub { padding:16px; }
  .y1-flow { padding:16px; }
  .y1-vd { --k:.5; }
  .y1-feat li { flex-wrap:wrap; padding:6px 4px; }
  .y1-feat-note { margin-left:0; width:100%; }
}
@media (prefers-reduced-motion:reduce) { .y1-btn, .y1-door, .y1-act { transition:none; } }
@media print {
  .y1-menu { position:static; }
}

/* ---------- video frame positions (video px) ---------- */
.y1-vf-ring--tab { left:calc(402*var(--u)); top:calc(282*var(--u)); width:calc(156*var(--u)); height:calc(50*var(--u)); }
.y1-vf-ripple--tab { left:calc(548*var(--u)); top:calc(322*var(--u)); }
.y1-vf-cursor--tab { left:calc(545*var(--u)); top:calc(320*var(--u)); }
.y1-vf-thumb-box { --u:calc(100cqw / 1280); }
.y1-on-stage { color:var(--b-stage-muted); }

/* ---------- link-shaped samples must beat the shell's body.ds a color ---------- */
body.ds a.y1-btn { color:var(--b-navy-ui); text-decoration:none; }
body.ds a.y1-btn--primary { color:#fff; }
body.ds a.y1-btn--soft { color:#224867; }
body.ds a.y1-btn--gold { color:var(--b-navy); }
body.ds a.y1-btn--dark-ghost { color:#fff; }
body.ds a.y1-btn--dark-ghost:hover { color:var(--b-gold-light); }
body.ds a.y1-door { color:var(--b-navy-ui); text-decoration:none; }
body.ds a.y1-door--primary { color:#fff; }
body.ds a.y1-link { color:var(--b-flow-blue-dark); }
body.ds .y1-foot-s a { color:#c5d2e0; }
body.ds .y1-foot-s a:hover { color:#fff; }
body.ds a.y1-lockup { color:#fff; text-decoration:none; }
body.ds .y1-ainote a.y1-link { text-decoration:underline; }
.ds-type-meta b { display:block; font-family:var(--ds-font-sans); font-size:13px; font-weight:650; color:var(--ds-ink); margin-bottom:2px; }
.y1-phone-screen { min-height:100%; display:flex; flex-direction:column; }
.y1-phone-screen .y1-sec-s { flex:1; }