/* Moretti Dev — the studio front door and the 404.
   ---------------------------------------------------------------------------
   Standalone: the root pages used to load a shared stylesheet plus this one,
   which meant two files had opinions about the same elements and the cascade
   decided which won. Each section of the site now owns exactly one stylesheet.

   The root is deliberately quieter than either product page. Its job is to hand
   somebody off to the right product, so the products supply the colour and this
   page supplies the composure. */

:root {
  --ground: #f4f6fa;
  --raise: #ffffff;
  --sink: #e8edf5;
  --line: #e2e6ee;

  --ink: #0b0d12;
  --ink-2: #3e4757;
  --muted: #7a8496;

  --accent: #14306f;
  --accent-ink: #ffffff;
  --deep: #14306f;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-2: 0 1px 2px rgba(16, 24, 40, .05), 0 20px 44px -26px rgba(20, 45, 85, .35);
  --shadow-3: 0 30px 62px -28px rgba(20, 45, 85, .55);

  --radius: 20px;
  --radius-lg: 24px;
  --free: #1c8a4e;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0b0d12;
    --raise: #12151d;
    --sink: #171b25;
    --line: #222836;
    --ink: #edeff3;
    --ink-2: #c3cad6;
    --muted: #98a1b2;
    --accent: #6fa6e4;
    --accent-ink: #0b0d12;
    --deep: #6fa6e4;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, .5), 0 22px 48px -26px rgba(0, 0, 0, .85);
    --shadow-3: 0 32px 70px -30px rgba(0, 0, 0, .9);
    --free: #4ec984;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground: #0b0d12;
  --raise: #12151d;
  --sink: #171b25;
  --line: #222836;
  --ink: #edeff3;
  --ink-2: #c3cad6;
  --muted: #98a1b2;
  --accent: #6fa6e4;
  --accent-ink: #0b0d12;
  --deep: #6fa6e4;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .5), 0 22px 48px -26px rgba(0, 0, 0, .85);
  --shadow-3: 0 32px 70px -30px rgba(0, 0, 0, .9);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.62 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 22px; }

a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, .cta:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink);
  padding: 12px 18px; border-radius: 0 0 12px 0; font-weight: 640; z-index: 10;
}
.skip:focus { left: 0; }

/* Masthead ---------------------------------------------------------------- */
.mark {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; font-size: 16.5px; letter-spacing: -0.012em;
}
.mark svg { display: block; border-radius: 9px; }
.mark strong { font-weight: 700; }
.mark { white-space: nowrap; flex: none; }
/* The nav used to be hidden below 560px, leaving a phone with no way out of the
   page at all. Letting it wrap was worse in a different way: it dropped to a
   second row still left-aligned, reading as something spilled rather than part
   of the masthead. On a narrow screen it becomes what it actually is — a nav
   strip under the mark, ruled off, its items spread across the full width. */

/* Type -------------------------------------------------------------------- */
h1 {
  font-size: clamp(34px, 5.6vw, 56px); line-height: 1.02; letter-spacing: -0.037em;
  font-weight: 800; margin: 0 0 16px; text-wrap: balance;
}
.lede {
  font-size: clamp(18px, 2.1vw, 21px); line-height: 1.48; color: var(--ink-2);
  max-width: 36em; margin: 0;
}
.quiet { color: var(--muted); }
p { margin: 0 0 13px; }
p:last-child { margin-bottom: 0; }

.hero { padding: 60px 0 46px; }

.pills { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.pill {
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px; padding: 5px 13px;
}
.pill.plain {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border-color: var(--line);
}

.cta {
  display: inline-block; margin-top: 4px;
  background: var(--deep); color: #fff; text-decoration: none;
  font-weight: 680; font-size: 16.5px; padding: 13px 24px; border-radius: 13px;
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--deep) 85%, transparent);
  transition: transform .15s ease, filter .15s ease;
}
.cta:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Product cards ------------------------------------------------------------
   Copy on the left, a real screen on the right. The card is the only raised
   surface on the page, so the two products read as the page's whole content. */
.prod {
  display: grid; grid-template-columns: 1fr 292px; gap: 34px; align-items: center;
  background: var(--raise); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 32px; margin: 0 0 20px;
  box-shadow: var(--shadow-2);
}
.prod-main { min-width: 0; }
.prod-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.prod-head svg, .prod-head img { display: block; width: 42px; height: 42px; border-radius: 11px; flex: none; }
.prod-head .nm { font-size: 22px; font-weight: 720; letter-spacing: -0.022em; }
.prod-visual { min-width: 0; }

/* A real screenshot in a compact phone frame — a peek at the top of the screen. */
.shot {
  justify-self: center; width: 100%; max-width: 236px; padding: 8px 8px 0;
  background: color-mix(in srgb, var(--ink) 88%, #000);
  border-radius: 36px 36px 9px 9px;
  box-shadow: var(--shadow-3);
  border: 1px solid rgba(255, 255, 255, .07);
  margin: 0 auto;
}
.shot img {
  display: block; width: 100%; height: 400px;
  object-fit: cover; object-position: top center;
  border-radius: 28px 28px 0 0; background: var(--sink);
}

/* Why these exist — the studio's one piece of first-person writing, so it sits
   flat on the ground rather than in a card competing with the products. */
.why {
  border-top: 1px solid var(--line);
  margin-top: 34px; padding: 34px 0 4px;
  max-width: 62ch;
}
.why h2 {
  font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px;
}
.why p { color: var(--ink-2); }

/* Footer -------------------------------------------------------------------
   The site map first, the studio underneath it. The identity block used to sit
   in the left column beside the links, which put "who made this" above "where
   can I go" — the wrong way round for a footer, which is read when somebody is
   looking for a way onward. */
.foot {
  border-top: 1px solid var(--line); margin-top: 34px; padding: 40px 0 56px;
  display: flex; flex-direction: column; gap: 34px;
}
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.foot .foot-h {
  margin: 0 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.foot a { text-decoration: none; font-size: 15px; color: var(--ink-2); }
.foot a:hover { color: var(--accent); }

.foot-base {
  border-top: 1px solid var(--line); padding-top: 26px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  color: var(--muted); font-size: 14.5px; max-width: 46em;
}
.foot-base .mark { margin-bottom: 2px; }
.foot-base p { margin: 0; }
.foot-links a { font-size: 14.5px; }
.copyright { color: var(--muted); font-size: 13.5px; margin-top: 4px; }

@media (max-width: 700px) {
  .foot-cols { grid-template-columns: 1fr 1fr; }
}

/* The 404 shares this sheet. */
nav { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 20px; }
nav a { font-weight: 640; text-decoration: none; font-size: 15.5px; }

@media (max-width: 760px) {
  .prod { grid-template-columns: 1fr; gap: 24px; padding: 26px; }
  .prod-visual { order: 3; }
  .shot { max-width: 220px; }
}

@media print {
  body { background: #fff; color: #000; padding: 0; }
  .shot, .cta, .topnav, .skip { display: none; }
}

/* "Free" reads as a benefit, so it gets its own tint rather than sitting in the
   same grey as the platform pill. */
.pill.free {
  color: var(--free);
  background: color-mix(in srgb, var(--free) 13%, transparent);
  border-color: color-mix(in srgb, var(--free) 30%, transparent);
}

.foot-links { margin-top: 8px; }
.foot-links a { font-size: 14.5px; }

/* --------------------------------------------------------------------------
   Sections
   ---------------------------------------------------------------------------
   The root was a hero and two cards while the product page carried a whole
   argument. These are the pieces that let it hold one: ruled sections, an
   eyebrow above each, and product rows that say what a thing replaces rather
   than only what it is called. The card layout above is kept — Ten Thousand's
   real icon is wired through .prod-head. */

section { padding: 52px 0; }
section + section { border-top: 1px solid var(--line); }
.sec-head {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 26px; max-width: 42em;
}
.label {
  display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
}
h2 {
  font-size: clamp(24px, 3.6vw, 33px); line-height: 1.12; letter-spacing: -0.025em;
  font-weight: 760; margin: 0 0 12px; text-wrap: balance;
}
h3 { font-size: 18px; letter-spacing: -0.012em; font-weight: 700; margin: 0 0 6px; }
.small { font-size: 15px; }

/* A product, given a row of its own rather than a card among cards. */
.feature {
  display: grid; grid-template-columns: 236px 1fr; gap: 46px; align-items: center;
  padding: 30px 0;
}
.feature + .feature { border-top: 1px solid var(--line); }
.feature.flip { grid-template-columns: 1fr 236px; }
.feature.flip .shot { order: 2; }
.feature .body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.feature .body p { color: var(--ink-2); }
.feature .shot { align-self: start; }
.feature .shot img { height: 430px; }

/* What it replaces, in the words somebody would use for the chore. */
.does { list-style: none; margin: 6px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.does li { display: flex; gap: 10px; align-items: baseline; color: var(--ink-2); font-size: 15.5px; }
.does li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--accent); transform: translateY(-2px);
}

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card {
  background: var(--raise); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 6px;
}
.card p { color: var(--muted); font-size: 15.5px; line-height: 1.5; margin: 0; }
.card .label { margin-bottom: 4px; }

.finale {
  background: var(--raise); border: 1px solid var(--line);
  border-radius: var(--radius-lg, 24px); padding: 38px; box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.cta.ghost {
  background: transparent; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: none;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* The reason section is now a section like any other, so it stops carrying its
   own rule and heading treatment. */
.why { border-top: 0; margin-top: 0; padding: 0; }
.why h2 {
  font-size: clamp(24px, 3.6vw, 33px); font-weight: 760; letter-spacing: -0.025em;
  text-transform: none; color: var(--ink); margin: 0 0 12px;
}

@media (max-width: 760px) {
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 24px; }
  .feature .shot, .feature.flip .shot { order: 0; max-width: 224px; justify-self: start; margin: 0; }
  .grid { grid-template-columns: 1fr; }
  .finale { padding: 28px; }
}

/* --------------------------------------------------------------------------
   The header bar
   ---------------------------------------------------------------------------
   It used to be a row inside the content column, so it began and ended with the
   text and read as the first paragraph rather than as chrome. It is now a bar
   in its own right: full width, ruled off, and stuck to the top so the way out
   of a page is reachable from anywhere in it — which on a long product page is
   most of the time. */

.bar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.bar-in {
  max-width: 1000px; margin: 0 auto; padding: 11px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.bar .topnav { display: flex; gap: 20px; }
.bar .topnav a { font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--muted); }
.bar .topnav a:hover { color: var(--ink); }

/* On a phone the bar stays one row. Stacking the nav under the mark made the
   header a fifth of the screen and read as two separate things; dropping the
   in-page anchors — links to a section of the page you are already reading —
   leaves only the destinations, which is what a header is for, and they fit. */
@media (max-width: 620px) {
  .bar-in { padding: 9px 22px; gap: 12px; }
  .bar .topnav { gap: 16px; }
  .bar .topnav a { font-size: 14px; }
  .bar .topnav .sec-link { display: none; }
  .mark { font-size: 15.5px; gap: 9px; }
  .mark svg, .mark img { width: 26px; height: 26px; }
}

/* Nothing inside the bar draws a rule of its own — the bar's own bottom edge is
   the only line the header gets. */
.bar .topnav, .bar .topnav a, .bar .mark { border: 0; }
.bar-in { align-items: center; }