/* Framework: our own brand (branding/README.md), not an instalanding.ai look. Midnight header, hero,
   pricing slab and footer around Paper sections; teal on dark, deep teal on Paper (teal is never text
   on Paper); Montserrat for headings, Inter for the body. The corner device is the mark's: a teal
   corner top-left and a violet one bottom-right on every card and picture. */

:root[data-theme="framework"] {
  --midnight: #130e24;
  --deep: #0b0816;
  --paper: #f4f2f8;
  --teal: #2fd3cf;
  --azure: #4a86c8;
  --violet: #6a2a92;
  --mist: #b4aecb;
  --deep-teal: #0e7c7a;
  --corner-a: #0f8f8c; /* the corner device on Paper */
  --corner-b: #5b2185;

  --bg: var(--paper);
  --bg-soft: #ebe8f3;
  --surface: #ffffff;
  --ink: #1a1530;
  --ink-2: #3b3557;
  --muted: #595374;
  --line: #dcd7ea;
  --accent: var(--deep-teal);
  --accent-soft: rgb(14 124 122 / 0.14);
  --primary: var(--midnight);
  --primary-ink: var(--paper);
  --glass: rgb(255 255 255 / 0.6);
  --glass-border: var(--line);

  --font-display: "Montserrat", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-mono: "Inter", Arial, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --display-leading: 1.08;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgb(19 14 36 / 0.06), 0 10px 28px rgb(19 14 36 / 0.07);
  --card-border: 1px solid var(--line);

  --slab-bg: var(--midnight);
  --slab-ink: var(--paper);
  --footer-bg: var(--midnight);
  --footer-ink: var(--mist);

  --ph-1: linear-gradient(135deg, #ebe8f3, #d9d3ea);
  --ph-2: linear-gradient(135deg, #dcefee, #bfe0e0);
  --ph-3: linear-gradient(135deg, #e3e6f3, #ccd3ea);
  --ph-4: linear-gradient(135deg, #2a2145, #130e24);
  --ph-5: linear-gradient(135deg, #f1eef7, #e0daee);
  --ph-6: linear-gradient(135deg, #e7dcef, #d2c2e2);

  & body { background: var(--bg); color: var(--ink); font-family: var(--font-body); }
  & h1, & h2, & h3 { font-family: var(--font-display); }
  & h1 { font-weight: 700; letter-spacing: -0.03em; }
  & h2 { font-weight: 700; font-size: clamp(28px, 3.6vw, 46px); }

  /* section labels: small capitals in deep teal on Paper */
  & .eyebrow {
    font: 600 12px/1.4 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  }
  & a { text-underline-offset: 3px; }

  /* the corner device */
  & .card, & .hero-media, & .about-media, & .tab-panel, & .slide, & .plan {
    position: relative;
  }
  & .card::before, & .hero-media::before, & .tab-panel::before, & .slide::before, & .bento .tile-story::before,
  & .card::after, & .hero-media::after, & .tab-panel::after, & .slide::after, & .bento .tile-story::after {
    content: ""; position: absolute; width: 40px; height: 40px; pointer-events: none; z-index: 2;
  }
  & .card::before, & .hero-media::before, & .tab-panel::before, & .slide::before, & .bento .tile-story::before {
    top: -1px; left: -1px; border-top: 3px solid var(--corner-a); border-left: 3px solid var(--corner-a); border-top-left-radius: inherit;
  }
  & .card::after, & .hero-media::after, & .tab-panel::after, & .slide::after, & .bento .tile-story::after {
    right: -1px; bottom: -1px; border-right: 3px solid var(--corner-b); border-bottom: 3px solid var(--corner-b); border-bottom-right-radius: inherit;
  }

  /* buttons: teal on Midnight, Midnight on Paper */
  & .btn { font: 600 15px/1 var(--font-display); letter-spacing: 0; }
  & .btn-primary { background: var(--midnight); color: var(--paper); border: 1px solid var(--midnight); }
  & .btn-primary:hover { background: #231a41; }
  & .btn-ghost { color: inherit; }
  & .pill { background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-2); }

  /* nav: Midnight, with the logo */
  & .nav { background: var(--midnight); border-bottom: 1px solid rgb(180 174 203 / 0.16); }
  & .brand-logo { display: block; height: 44px; width: auto; }
  & .nav-links a, & .nav-phone { color: var(--mist); }
  & .nav-links a:hover, & .nav-phone:hover { color: #ffffff; }
  & .nav .btn-primary { background: var(--teal); border-color: var(--teal); color: var(--deep); }
  & .nav .btn-primary:hover { background: #5fe3df; }
  & .nav-menu summary { border-color: rgb(180 174 203 / 0.35); background: transparent; color: var(--paper); }
  & .nav-menu ul { background: var(--midnight); border: 1px solid rgb(180 174 203 / 0.25); box-shadow: 0 18px 40px rgb(0 0 0 / 0.4); }
  & .nav-menu a { color: var(--paper); }
  & .nav-menu a:hover { background: #231a41; }

  /* hero: Midnight, lit from the corners the way the mark is */
  & .hero {
    color: var(--paper);
    background:
      radial-gradient(60% 70% at 0% 0%, rgb(47 211 207 / 0.16), transparent 70%),
      radial-gradient(60% 70% at 100% 100%, rgb(106 42 146 / 0.38), transparent 70%),
      var(--midnight);
  }
  & .hero .eyebrow { color: var(--teal); }
  & .hero h1 { color: #ffffff; }
  & .hero .lead { color: var(--mist); }
  & .hero .btn-primary { background: var(--teal); border-color: var(--teal); color: var(--deep); }
  & .hero .btn-primary:hover { background: #5fe3df; }
  & .hero .btn-ghost { border-color: rgb(180 174 203 / 0.45); color: var(--paper); }
  & .hero-media {
    border-radius: var(--radius-lg); border: 1px solid rgb(180 174 203 / 0.2);
    background:
      radial-gradient(70% 60% at 20% 15%, rgb(47 211 207 / 0.22), transparent 70%),
      radial-gradient(70% 60% at 85% 90%, rgb(106 42 146 / 0.55), transparent 70%),
      var(--deep);
  }
  & .hero-media .ph-label { background: rgb(19 14 36 / 0.8); color: var(--paper); border: 1px solid rgb(180 174 203 / 0.25); }
  & .hero-media::before { border-color: var(--teal); }
  & .hero-media::after { border-color: #9a5cc4; }

  /* the marquee of highlights */
  & .highlights { background: var(--deep); color: var(--mist); border: 0; }
  & .marquee-track li { opacity: 1; color: var(--mist); }
  & .marquee-track li::after { color: var(--teal); }

  /* sections on Paper, alternating with white */
  & main > .section:nth-of-type(even) { background: var(--surface); }
  & main > .section:nth-of-type(odd) { --tile: var(--bg-soft); }
  & main > .section:nth-of-type(even) { --tile: var(--bg); }
  & .card { border-radius: var(--radius); background: var(--tile, var(--surface)); }
  & .group-title { font-family: var(--font-display); font-weight: 600; }
  & .service-name { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
  & .price { font-family: var(--font-display); font-weight: 600; }
  & .stars { color: var(--accent); }

  /* services "tabs" */
  & .tab { background: var(--tile, var(--bg-soft)); border: 1px solid var(--line); color: var(--ink-2); font-family: var(--font-display); font-weight: 600; }
  & .tab[aria-selected="true"], & .tab[aria-pressed="true"] { background: var(--midnight); border-color: var(--midnight); color: var(--paper); }
  & .tab-panel { border: 1px solid var(--line); background: var(--tile, var(--bg-soft)); border-radius: var(--radius-lg); }
  & .tab-name { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }

  /* about "bento": the first figure on Midnight */
  & .bento .tile-story { background: var(--tile, var(--bg-soft)); border: 1px solid var(--line); border-radius: var(--radius-lg); position: relative; }
  & .bento .stat { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--tile, var(--bg-soft)); }
  & .bento .stat:first-child { background: var(--midnight); border-color: var(--midnight); color: var(--paper); }
  & .bento .stat:first-child dt { color: var(--mist); }
  & .bento .stat:first-child dd { color: var(--teal); }
  & .stat dd { font-family: var(--font-display); }

  /* reviews "carousel" */
  & .slide { border: 1px solid var(--line); background: var(--tile, var(--bg-soft)); border-radius: var(--radius-lg); }
  & .slide blockquote p { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
  & .carousel-btn { border: 1px solid var(--line); background: var(--tile, var(--bg-soft)); color: var(--ink); }
  & .carousel-dot[aria-current="true"]::after { background: var(--accent); }

  /* pricing: the Midnight slab, teal ticks */
  & .pricing-slab {
    border-radius: var(--radius-lg);
    background:
      radial-gradient(55% 80% at 0% 0%, rgb(47 211 207 / 0.14), transparent 70%),
      radial-gradient(55% 80% at 100% 100%, rgb(106 42 146 / 0.4), transparent 70%),
      var(--midnight);
  }
  & .pricing-slab .eyebrow { color: var(--teal); opacity: 1; }
  & .pricing-slab .lead { color: var(--mist); opacity: 1; }
  & .plan { background: rgb(255 255 255 / 0.04); border-color: rgb(180 174 203 / 0.25); }
  & .plan.featured { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  & .plan:not(.featured) .btn-primary { background: var(--teal); border-color: var(--teal); color: var(--deep); }
  & .plan-features li::before { color: var(--teal); }
  & .plan.featured .plan-features li::before { color: var(--deep-teal); }
  & .plan-price .mono { font-family: var(--font-display); font-weight: 700; }

  /* showcase: each screen a card with the corner device (.card), its label a deep-teal pill */
  & .showcase-shot { padding: 10px; border-radius: var(--radius-lg); background: var(--surface); }
  & .showcase-shot .media { border-radius: var(--radius); border: 1px solid var(--line); }
  & .showcase-no { font-family: var(--font-display); font-weight: 700; color: var(--accent); letter-spacing: 0.14em; }
  & .showcase-tier { background: var(--accent-soft); border-color: transparent; color: #0a5c5a; font: 600 12px/1.3 var(--font-display); letter-spacing: 0.06em; }
  & .showcase-copy h3 { font-weight: 700; letter-spacing: -0.02em; }

  /* faq, forms, map */
  & .faq-item summary { font-family: var(--font-display); font-weight: 600; }
  & .field input, & .field textarea { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); }
  & .field input:focus-visible, & .field textarea:focus-visible, & a:focus-visible, & button:focus-visible, & summary:focus-visible {
    outline: 3px solid var(--azure); outline-offset: 2px;
  }
  & .hero a:focus-visible, & .nav a:focus-visible, & .footer a:focus-visible, & .pricing-slab a:focus-visible { outline-color: var(--teal); }
  & .map { border-radius: var(--radius-lg); border: 1px solid var(--line); }

  /* footer: Midnight to the page's foot */
  & .footer { background: var(--midnight); padding-block: 0; }
  & .footer-card { background: none; padding-inline: 0; padding-block: clamp(40px, 6vw, 72px) 32px; color: var(--mist); }
  & .footer-name { color: #ffffff; font-family: var(--font-display); }
  & .footer-title { color: var(--teal); opacity: 1; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.14em; }
  & .footer a { color: var(--paper); }
  & .footer-base { border-top-color: rgb(180 174 203 / 0.2); opacity: 1; color: var(--mist); }

  & .footer .btn-primary { background: var(--teal); border-color: var(--teal); color: var(--deep); }
  & .footer .btn-primary:hover { background: #5fe3df; }

  /* the privacy notice: its title on a Midnight band like the hero, then the reading column */
  & .doc { padding-top: 0; }
  & .doc header {
    position: relative; margin-bottom: clamp(32px, 4vw, 56px); padding-block: clamp(48px, 7vw, 88px) clamp(36px, 5vw, 64px);
    isolation: isolate; color: var(--paper);
  }
  /* the band runs the page's full width (body clips the overflow) */
  & .doc header::before {
    content: ""; position: absolute; z-index: -1; inset: 0 auto; left: 50%; width: 100vw; translate: -50% 0;
    background:
      radial-gradient(50% 120% at 0% 0%, rgb(47 211 207 / 0.16), transparent 70%),
      radial-gradient(50% 120% at 100% 100%, rgb(106 42 146 / 0.38), transparent 70%),
      var(--midnight);
  }
  & .doc header .eyebrow { color: var(--teal); }
  & .doc h1 { color: #ffffff; }
  & .doc header .note { color: var(--mist); }
  & .doc h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; }
  & .doc section + section { border-top: 1px solid var(--line); margin-top: clamp(28px, 3.4vw, 44px); }
  & .doc section a { color: var(--deep-teal); }
  /* a page's intro and buttons on that band, the buttons as in the footer */
  & .doc header .lead { color: var(--mist); }
  & .doc header .btn-primary { background: var(--teal); border-color: var(--teal); color: var(--deep); }
  & .doc header .btn-primary:hover { background: #5fe3df; }
  & .doc header .btn-ghost { color: var(--paper); border-color: rgb(244 242 248 / 0.4); }
  & .doc section li::marker { color: var(--deep-teal); }
  /* a page that repeats home sections: the article's foot meets them without a double gap */
  & .page:has(+ .section) { padding-bottom: 0; }

  /* the Pages section: deep-teal arrows, the label in the display face */
  & .page-card h3 { font-weight: 700; letter-spacing: -0.02em; }
  & .page-card-go { color: var(--deep-teal); }

  & .callbar { background: var(--midnight); color: var(--paper); border-top: 1px solid rgb(180 174 203 / 0.2); }
  & .callbar .btn-primary { background: var(--teal); border-color: var(--teal); color: var(--deep); }
}