/* Generated by scripts/site/build-site.mjs from design/website-2026-10-11/production/site.css (scoped under .us-site). Do not edit by hand. */
/* Unstudio marketing site: production stylesheet (generated by production/clean_css.py from the prototype's site.css).
   The page's <html> carries: data-scheme="ember" (or "midnight" in dark mode) data-tint="ember" data-bg="feed" data-hero="review" data-layout="center".
   Light is always ember; dark is midnight with the ember tint. */
/* Unstudio website rebuild, Oct 11 2026 (round 2).
   Three colour schemes on one token set, switched with <html data-scheme>:
     evergreen (default): white page, one deep evergreen block, green only for ready/approved/posted.
     white: white page, one near-black block, no brand colour at all; the posts carry it.
     midnight: the whole site dark, posts glow.
   No orange anywhere. Logo in ink.
   Type: Schibsted Grotesk = Unstudio's voice. Source Serif 4 italic = the businesses' voices. */

.us-site {
  --bg: #ffffff;
  --bg-2: #f4f7f5;
  --card: #ffffff;
  --ink: #0d1210;
  --ink-2: #4a524d;
  --ink-3: #8b938e;
  --line: #e5e9e6;
  --btn: #0d1210;
  --btn-ink: #ffffff;
  --btn-hover: #24302a;
  --field: #0e2a20;
  --field-2: #143528;
  --field-line: #24483a;
  --on-field: #eef4f0;
  --on-field-2: #a7beb2;
  --on-field-3: #6f8c7e;
  --accent: #2f9461;
  --accent-soft: #e1f2e8;
  --accent-bright: #62d394;
  --glow-1: rgba(98, 211, 148, .20);
  --glow-2: rgba(150, 215, 190, .16);
  --shadow-card: 0 1px 0 rgba(13, 18, 16, .03), 0 24px 48px -24px rgba(13, 18, 16, .22), 0 2px 8px -2px rgba(13, 18, 16, .06);
  --shadow-post: 0 1px 2px rgba(13, 18, 16, .08), 0 12px 26px -14px rgba(13, 18, 16, .28);
  --eye: #ffffff;
  color-scheme: light;
}

.us-site[data-scheme="midnight"] {
  --bg: #0a0c0f;
  --bg-2: #111419;
  --card: #14171c;
  --ink: #f3f5f7;
  --ink-2: #b2b8c1;
  --ink-3: #7b828c;
  --line: #22262d;
  --btn: #f3f5f7;
  --btn-ink: #0a0c0f;
  --btn-hover: #ffffff;
  --field: #111419;
  --field-2: #171b21;
  --field-line: #262b33;
  --on-field: #f3f5f7;
  --on-field-2: #b2b8c1;
  --on-field-3: #7b828c;
  --accent: #4cc488;
  --accent-soft: rgba(76, 196, 136, .14);
  --accent-bright: #62d394;
  --glow-1: rgba(76, 196, 136, .16);
  --glow-2: rgba(220, 230, 255, .06);
  --shadow-card: 0 0 0 1px #22262d, 0 30px 60px -30px rgba(0, 0, 0, .8);
  --shadow-post: 0 0 0 1px rgba(255, 255, 255, .04), 0 16px 30px -16px rgba(0, 0, 0, .9);
  --eye: #0a0c0f;
  color-scheme: dark;
}

.us-site {
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --section: clamp(84px, 10vw, 136px);
  --radius-post: 12px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

.us-site * { box-sizing: border-box; }
.us-site { -webkit-text-size-adjust: 100%; }
.us-site {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.us-site img { display: block; max-width: 100%; }
.us-site a { color: inherit; text-decoration: none; }
.us-site button, .us-site input { font: inherit; color: inherit; }
.us-site h1, .us-site h2, .us-site h3, .us-site h4, .us-site p, .us-site figure { margin: 0; }
.us-site h1, .us-site h2, .us-site h3 { text-wrap: balance; }
.us-site :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.us-site .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- section anatomy: label, one-line headline, short sub ---------- */
.us-site .label { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--sans); color: var(--ink-2); }
.us-site .label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.us-site .h2 { font: 600 clamp(34px, 4.6vw, 54px)/1.04 var(--sans); letter-spacing: -.035em; }
.us-site .sub { font-size: clamp(16.5px, 1.4vw, 18.5px); line-height: 1.55; color: var(--ink-2); max-width: 40em; }
.us-site .head { display: grid; gap: 16px; max-width: 980px; }

/* ---------- buttons ---------- */
.us-site .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--btn); color: var(--btn-ink); font: 600 15px/1 var(--sans);
  transition: transform .2s var(--ease), background .2s var(--ease); white-space: nowrap;
}
.us-site .btn:hover { background: var(--btn-hover); }
.us-site .btn:active { transform: scale(.98); }
.us-site .btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.us-site .btn.ghost:hover { background: var(--bg-2); }
.us-site .btn .arr { transition: transform .2s var(--ease); }
.us-site .btn:hover .arr { transform: translateX(2px); }

/* ---------- nav ---------- */
.us-site .nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.us-site .nav.scrolled { border-bottom-color: var(--line); }
.us-site .nav .wrap { display: flex; align-items: center; height: 68px; gap: 28px; }
.us-site .logo { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); }
.us-site .logo svg { width: 25px; height: 27px; }
.us-site .logo svg .eyes { fill: var(--eye); }
.us-site .logo span { font: 800 22px/1 var(--sans); letter-spacing: -.045em; }
.us-site .nav-links { display: flex; gap: 26px; margin-left: auto; font: 500 15px/1 var(--sans); color: var(--ink-2); }
.us-site .nav-links a:hover { color: var(--ink); }
.us-site .nav-cta { display: flex; align-items: center; gap: 18px; }
.us-site .nav-cta .login { font: 500 15px/1 var(--sans); color: var(--ink-2); }
.us-site .nav-cta .login:hover { color: var(--ink); }

/* ---------- hero ---------- */
.us-site .us-hero { position: relative; isolation: isolate; padding-block: clamp(44px, 6.5vw, 84px) clamp(56px, 7vw, 92px); overflow: hidden; overflow: clip; }
.us-site .us-hero::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 46%; width: min(1500px, 140vw); height: 70%;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(45% 55% at 32% 50%, var(--glow-1), transparent 70%), radial-gradient(40% 50% at 70% 55%, var(--glow-2), transparent 70%);
  filter: blur(10px);
}
.us-site .us-hero-copy { display: grid; gap: 22px; justify-items: center; text-align: center; }
.us-site .pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: var(--card); box-shadow: 0 0 0 1px var(--line); font: 500 14px/1.2 var(--sans); color: var(--ink-2);
}
.us-site .pill b { font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 4px 9px; border-radius: 999px; font-size: 12.5px; }
.us-site .h1 { font: 650 clamp(42px, 5.6vw, 76px)/1 var(--sans); letter-spacing: -.042em; max-width: 15em; }
.us-site .h1 .soft { display: block; color: var(--ink-3); }

.us-site .us-hero .sub { max-width: 34em; }
.us-site .site-field {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 540px; margin-top: 6px;
  height: 66px; padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--card);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-card); transition: box-shadow .2s var(--ease);
}
.us-site .site-field:focus-within { box-shadow: 0 0 0 2px var(--ink), var(--shadow-card); }
.us-site .site-field svg { flex: none; width: 20px; height: 20px; color: var(--ink-3); }
.us-site .site-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 500 18px/1 var(--sans); letter-spacing: -.01em; }
.us-site .site-field input::placeholder { color: var(--ink-3); }
.us-site .site-field .btn { height: 50px; padding: 0 22px; font-size: 16px; }
.us-site .tick { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='%234cc488' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; }
.us-site .fine { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font: 500 14px/1.3 var(--sans); color: var(--ink-3); }
.us-site .fine span { display: inline-flex; align-items: center; gap: 6px; }

/* hero visuals: shared card shell */
.us-site .stage { margin-top: clamp(48px, 6vw, 72px); }
.us-site .stage-card { background: var(--card); border-radius: 24px; box-shadow: var(--shadow-card), 0 0 0 1px var(--line); overflow: hidden; }
.us-site .stage-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 18px; border-bottom: 1px solid var(--line); }
.us-site .fav { width: 28px; height: 28px; border-radius: 8px; background: var(--bg-2); display: grid; place-items: center; overflow: hidden; flex: none; color: var(--ink); }
.us-site .fav img { width: 78%; height: auto; }
.us-site[data-scheme="midnight"] .fav img { filter: invert(1); }
.us-site .fav span { font: 700 14px/1 var(--serif); }
.us-site .url { font: 500 15px/1 var(--sans); letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-site .chip-status { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; flex: none; font: 600 13px/1 var(--sans); color: var(--accent); background: var(--accent-soft); padding: 7px 11px; border-radius: 999px; }
.us-site .chip-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.us-site .chip-mode { flex: none; font: 500 13px/1 var(--sans); color: var(--ink-2); padding: 7px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.us-site .post { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-post); overflow: hidden; background: var(--bg-2); box-shadow: var(--shadow-post); }
.us-site .post img { width: 100%; height: 100%; object-fit: cover; }
.us-site .post .tag { position: absolute; left: 8px; bottom: 8px; padding: 5px 9px; border-radius: 999px; font: 600 11.5px/1 var(--sans); color: #fff; background: rgba(10, 12, 15, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.us-site .pi { display: inline-block; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; flex: none; }
.us-site .pi.ig { --i: url(/site/img/icons/instagram.svg); } .us-site .pi.fb { --i: url(/site/img/icons/facebook.svg); } .us-site .pi.li { --i: url(/site/img/icons/linkedin.svg); }
.us-site .pi.tt { --i: url(/site/img/icons/tiktok.svg); } .us-site .pi.x { --i: url(/site/img/icons/x.svg); } .us-site .pi.th { --i: url(/site/img/icons/threads.svg); }
.us-site .pi.pin { --i: url(/site/img/icons/pinterest.svg); } .us-site .pi.yt { --i: url(/site/img/icons/youtube.svg); } .us-site .pi.bs { --i: url(/site/img/icons/bluesky.svg); }
.us-site .plats { display: flex; gap: 8px; color: var(--ink-2); }

.us-site .who { font: italic 400 18px/1.35 var(--serif); color: var(--ink-2); }
.us-site .who b { font: 600 15px/1 var(--sans); font-style: normal; color: var(--ink); margin-right: 6px; }
.us-site .dots { display: flex; gap: 6px; }
.us-site .dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--line); cursor: pointer; transition: width .3s var(--ease), background .3s; }
.us-site .dots button[aria-current="true"] { width: 22px; background: var(--ink); }

/* hero A: the week */

  

/* hero B: review, edit, approve */
.us-site .review-wrap { position: relative; }
.us-site .review-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.us-site .focus { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; padding: 22px; border-right: 1px solid var(--line); position: relative; }
.us-site .focus .post, .us-site .copy { transition: opacity .35s var(--ease), transform .45s var(--ease); }
.us-site .focus.out .post, .us-site .focus.out .copy { opacity: 0; transform: translateY(8px); }
.us-site .copy { display: grid; gap: 14px; align-content: start; }
.us-site .copy .meta { display: flex; align-items: center; gap: 10px; font: 500 13.5px/1 var(--sans); color: var(--ink-2); }
.us-site .copy .meta .plats { gap: 6px; }
.us-site .caption { font: 400 16px/1.5 var(--sans); color: var(--ink); min-height: 4.5em; }
.us-site .caption mark { background: var(--accent-soft); color: inherit; border-radius: 4px; padding: 1px 2px; }
.us-site .why { font: italic 400 15px/1.45 var(--serif); color: var(--ink-2); padding-left: 12px; border-left: 2px solid var(--line); }
.us-site .why b { font: 600 12.5px/1 var(--sans); font-style: normal; color: var(--ink-3); display: block; margin-bottom: 4px; }
.us-site .actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.us-site .actions .btn { height: 40px; padding: 0 16px; font-size: 14.5px; }
.us-site .ask { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px 0 14px; border-radius: 999px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font: 500 14.5px/1 var(--sans); color: var(--ink); opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.us-site .ask.show { opacity: 1; transform: none; }
.us-site .ask .typed { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.us-site .ask .typed::after { content: ""; display: inline-block; width: 1.5px; height: 1em; background: var(--ink); margin-left: 1px; vertical-align: -2px; animation: us-blink 1s steps(2) infinite; }
@keyframes us-blink { 50% { opacity: 0; } }
.us-site .ask .send { width: 32px; height: 32px; border-radius: 50%; background: var(--btn); color: var(--btn-ink); display: grid; place-items: center; flex: none; font-size: 15px; }
.us-site .stamp { position: absolute; left: 34px; top: 34px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--accent); color: #fff; font: 600 14px/1 var(--sans); opacity: 0; transform: scale(.9); transition: opacity .25s var(--ease), transform .35s var(--ease); }
.us-site .stamp.show { opacity: 1; transform: none; }
.us-site .stamp.skip { background: var(--btn); color: var(--btn-ink); }
.us-site .thisweek { padding: 18px 18px 20px; display: grid; gap: 0; align-content: start; }
.us-site .thisweek h4 { margin-bottom: 8px; font: 600 13px/1 var(--sans); color: var(--ink-3); letter-spacing: .03em; text-transform: uppercase; }
.us-site .day { display: grid; grid-template-columns: 34px 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 52px; border-bottom: 1px solid var(--line); }
.us-site .day:last-child { border-bottom: 0; }
.us-site .day .d { font: 600 13.5px/1 var(--sans); color: var(--ink-2); }
.us-site .day .th { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.us-site .day .th img { width: 100%; height: 100%; object-fit: cover; }
.us-site .day .t { font: 500 13.5px/1.2 var(--sans); color: var(--ink-3); }
.us-site .day.filled .t { color: var(--ink); }
.us-site .day .plats { color: var(--ink-3); gap: 5px; }
.us-site .day .plats .pi { width: 13px; height: 13px; }
.us-site .day.pop .th { animation: us-pop .5s var(--ease); }
@keyframes us-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } 100% { transform: none; opacity: 1; } }
.us-site .cursor { position: absolute; z-index: 5; left: 0; top: 0; width: 22px; height: 22px; pointer-events: none; transition: transform .8s cubic-bezier(.5, 0, .2, 1); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.us-site .cursor.click svg { animation: us-click .3s var(--ease); }
@keyframes us-click { 50% { transform: scale(.82); } }
.us-site .stage > div[class^="hero-"] { display: none; }
.us-site[data-hero="review"] .stage > .hero-review { display: block; }

/* ---------- used by: one moving strip ---------- */
.us-site .used { padding-block: clamp(8px, 2vw, 20px) 0; }
.us-site .used .title { text-align: center; font: 500 17px/1.3 var(--sans); color: var(--ink-2); margin-bottom: 26px; padding-inline: var(--gutter); }
.us-site .strip { position: relative; overflow: hidden; overflow: clip; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.us-site .strip-track { display: flex; align-items: center; width: max-content; animation: us-drift 46s linear infinite; padding-block: 4px; }
.us-site .strip-track > * { margin-right: clamp(44px, 6vw, 80px); }
.us-site .strip:hover .strip-track { animation-play-state: paused; }
.us-site .strip img { height: 26px; width: auto; filter: brightness(0); opacity: .55; flex: none; }
.us-site[data-scheme="midnight"] .strip img { filter: brightness(0) invert(1); opacity: .6; }
.us-site .strip img.tall { height: 34px; }
.us-site .strip .wm { color: var(--ink); opacity: .55; white-space: nowrap; flex: none; }
.us-site .wm.merrion { font: 600 15px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.us-site .wm.earl { font: 500 15px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; }
.us-site .wm.nanas { font: 800 20px/1 var(--serif); letter-spacing: -.01em; }
.us-site .wm.ivy { font: 400 17px/1 var(--serif); letter-spacing: .2em; text-transform: uppercase; }
.us-site .wm.tony { font: italic 900 18px/1 var(--sans); letter-spacing: -.02em; text-transform: uppercase; }
@keyframes us-drift { to { transform: translateX(-50%); } }

/* ---------- made with ---------- */
.us-site .made { padding-block: var(--section) 0; overflow: hidden; overflow: clip; }
.us-site .made .head { margin-bottom: clamp(32px, 4vw, 48px); }
.us-site .marquee { position: relative; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.us-site .track { display: flex; width: max-content; padding-block: 6px 12px; animation: us-drift 110s linear infinite; }
.us-site .track > * { margin-right: 14px; }
.us-site .marquee:hover .track { animation-play-state: paused; }
.us-site .made-item { width: clamp(210px, 19vw, 260px); display: grid; gap: 10px; flex: none; }
.us-site .made-item figcaption { font: italic 400 16.5px/1.3 var(--serif); color: var(--ink-2); padding-inline: 2px; }
.us-site .made-close { padding-top: clamp(40px, 5vw, 64px); display: grid; gap: 26px; }
.us-site .made-close .line { font: 500 clamp(21px, 2.4vw, 30px)/1.3 var(--sans); letter-spacing: -.02em; color: var(--ink-3); max-width: 30em; }
.us-site .made-close .line em { font-style: normal; color: var(--ink); }
.us-site .forlist { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.us-site .forlist > span:first-child { font: 500 14px/1 var(--sans); color: var(--ink-3); margin-right: 6px; }
.us-site .chip { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--line); font: 500 15px/1 var(--sans); color: var(--ink); }

/* ---------- in your style: the one coloured block ---------- */
.us-site .style { margin-top: var(--section); padding-block: var(--section); background: var(--field); color: var(--on-field); }
.us-site[data-scheme="midnight"] .style { box-shadow: inset 0 1px 0 var(--field-line), inset 0 -1px 0 var(--field-line); }
.us-site .style .label { color: var(--on-field-2); }
.us-site .style .label::before { background: var(--accent-bright); }
.us-site .style .sub { color: var(--on-field-2); }
.us-site .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-block: clamp(32px, 4vw, 44px) 20px; }
.us-site .tab { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 8px; border-radius: 999px; border: 0; cursor: pointer; background: transparent; box-shadow: inset 0 0 0 1px var(--field-line); color: var(--on-field-2); font: 500 15px/1 var(--sans); transition: background .25s var(--ease), color .25s; }
.us-site .tab i { width: 30px; height: 30px; border-radius: 50%; background: #fff center/70% no-repeat; flex: none; display: grid; place-items: center; font: 700 13px/1 var(--serif); font-style: normal; color: #111; }
.us-site .tab:hover { color: var(--on-field); }
.us-site .tab[aria-selected="true"] { background: var(--on-field); color: var(--field); box-shadow: none; }

.us-site .style-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); border-radius: 24px; background: var(--field-2); box-shadow: inset 0 0 0 1px var(--field-line); }
.us-site .style-stage > * { min-width: 0; }
.us-site .pane { padding: clamp(18px, 2.2vw, 28px); display: grid; gap: 18px; align-content: start; position: relative; }
.us-site .pane + .pane { border-left: 1px solid var(--field-line); }
.us-site .pane + .pane::before { content: ""; position: absolute; left: -14px; top: 26px; width: 27px; height: 27px; border-radius: 50%; z-index: 1; background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8M9 5l3 3-3 3' fill='none' stroke='%2362d394' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; box-shadow: inset 0 0 0 1px var(--field-line); }
.us-site .pane-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 600 13px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; color: var(--on-field-2); }
.us-site .pane-title small { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; color: var(--on-field-3); }
.us-site .sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.us-site .source { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--field-line); }
.us-site .source b { font: 600 14.5px/1.2 var(--sans); color: var(--on-field); display: flex; align-items: center; gap: 7px; }
.us-site .source b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); }
.us-site .source span { font: 500 13.5px/1.3 var(--sans); color: var(--on-field-2); }
.us-site .learned-head { display: flex; align-items: baseline; gap: 12px; }
.us-site .learned-head b { font: 650 44px/1 var(--sans); letter-spacing: -.04em; color: var(--on-field); }
.us-site .learned-head span { font: 500 15px/1.3 var(--sans); color: var(--on-field-2); }
.us-site .facts-window { height: 262px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 12%, #000 80%, transparent); mask: linear-gradient(transparent, #000 12%, #000 80%, transparent); }
.us-site .facts-list { list-style: none; margin: 0; padding: 0; animation: us-rise 42s linear infinite; }
.us-site .facts-window:hover .facts-list { animation-play-state: paused; }
@keyframes us-rise { to { transform: translateY(-50%); } }
.us-site .facts-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--field-line); }
.us-site .facts-list li i { font: 600 11.5px/1.2 var(--sans); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--on-field-3); }
.us-site .facts-list li span { font: 500 15px/1.35 var(--sans); color: var(--on-field); }
.us-site .made-for { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.us-site .pane.posts { display: flex; flex-direction: column; }
.us-site .pane.posts .brandrow { margin-top: auto; }
.us-site .made-for figure { display: grid; gap: 10px; align-content: start; }
.us-site .made-for .post { box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
.us-site .made-for figcaption { display: grid; gap: 4px; }
.us-site .made-for figcaption b { font: 600 12.5px/1.2 var(--sans); color: var(--accent-bright); }
.us-site .made-for figcaption span { font: italic 400 14.5px/1.35 var(--serif); color: var(--on-field-2); }
.us-site .brandrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-top: 16px; border-top: 1px solid var(--field-line); font: 500 13.5px/1.3 var(--sans); color: var(--on-field-2); }

.us-site .brandrow .voice { font: italic 400 15px/1.35 var(--serif); color: var(--on-field); }
.us-site .swap-fade { transition: opacity .35s var(--ease); }
.us-site .swapping .swap-fade { opacity: 0; }
.us-site .style-foot { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 26px; font: 500 14.5px/1.4 var(--sans); color: var(--on-field-2); }
.us-site .style-foot span { display: inline-flex; gap: 8px; align-items: center; }
.us-site .style-foot span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); }

/* ---------- work-in-progress marker ---------- */
.us-site .next { padding-block: 72px 140px; }
.us-site .next p { font: 500 14px/1.5 var(--sans); color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 18px; }

/* ---------- preview controls (prototype only) ---------- */

/* ---------- reveal (content visible without JS) ---------- */
.us-site.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.us-site.js .rv.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .us-site .nav-links { display: none; }
  .us-site .nav-cta { margin-left: auto; }
  
  .us-site .review-body { grid-template-columns: minmax(0, 1fr); }
  .us-site .focus { border-right: 0; border-bottom: 1px solid var(--line); }
  .us-site .style-stage { grid-template-columns: minmax(0, 1fr); }
  .us-site .pane + .pane { border-left: 0; border-top: 1px solid var(--field-line); }
  .us-site .pane + .pane::before { left: 50%; top: -14px; transform: translateX(-50%) rotate(90deg); }
}
@media (max-width: 640px) {
  .us-site { font-size: 16px; }
  .us-site .nav .wrap { height: 60px; }
  .us-site .nav-cta .login { display: none; }
  .us-site .site-field { height: auto; flex-wrap: wrap; padding: 8px; border-radius: 22px; }
  .us-site .site-field svg { margin-left: 10px; }
  .us-site .site-field input { height: 48px; flex-basis: calc(100% - 44px); font-size: 17px; }
  .us-site .site-field .btn { width: 100%; height: 52px; }
  
  .us-site .focus { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .us-site .focus .post { max-width: 240px; }
  .us-site .stamp { left: 24px; top: 24px; }
  .us-site .used .title { font-size: 16px; margin-bottom: 20px; }
  .us-site .strip img { height: 22px; } .us-site .strip img.tall { height: 28px; }
  .us-site .facts-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .us-site .made-for { gap: 8px; }
  .us-site .made-for figcaption span { display: none; }
  
  
  
  .us-site .chip-mode { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .us-site .track, .us-site .strip-track, .us-site .facts-list { animation: none; }
  .us-site .marquee, .us-site .strip { overflow-x: auto; }
  .us-site.js .rv { opacity: 1; transform: none; transition: none; }
   .us-site .swap-fade, .us-site .focus .post, .us-site .copy { transition: none; }
}

/* =====================================================================
   Round 3: sections 05 to 07, footer, light/dark switch
   ===================================================================== */
.us-site .makes, .us-site .where, .us-site .results { padding-top: var(--section); }
.us-site .makes .head, .us-site .where .head, .us-site .results .head { margin-bottom: clamp(30px, 4vw, 44px); }

/* three footnotes under a big visual (Screen Studio habit) */
.us-site .foot3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px clamp(20px, 3vw, 40px); margin-top: 26px; }
.us-site .foot3 p { font: 400 15.5px/1.5 var(--sans); color: var(--ink-2); }
.us-site .foot3 b { font-weight: 600; color: var(--ink); }

/* ---------- 05 what it makes ---------- */
.us-site .mk-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.us-site .mk-tabs button {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bg-2); color: var(--ink-2); font: 500 15px/1 var(--sans); transition: background .25s, color .25s;
}
.us-site .mk-tabs button:hover { color: var(--ink); }
.us-site .mk-tabs button em { font-style: normal; font: 600 11px/1 var(--sans); letter-spacing: .02em; padding: 4px 7px; border-radius: 999px; background: var(--card); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.us-site .mk-tabs button[aria-selected="true"] { background: var(--btn); color: var(--btn-ink); }
.us-site .mk-tabs button[aria-selected="true"] em { background: transparent; color: inherit; opacity: .7; box-shadow: inset 0 0 0 1px currentColor; }
.us-site .mk-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent-bright); }
.us-site .mk-tabs.auto button[aria-selected="true"]::after { animation: us-fillbar 7s linear forwards; }
.us-site .mk-tabs.paused button[aria-selected="true"]::after { animation-play-state: paused; }
@keyframes us-fillbar { to { width: 100%; } }

.us-site .mk-stage { position: relative; height: clamp(420px, 44vw, 560px); border-radius: 24px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.us-site .mk-panel { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(18px, 3vw, 44px); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.us-site .mk-panel.on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.us-site .mk-panel .post { box-shadow: var(--shadow-post); }

.us-site .mk-posts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); align-items: end; width: 100%; }
.us-site .mk-posts figure { display: grid; gap: 10px; }
.us-site .mk-posts figure.lift { transform: translateY(-18px); }
.us-site .mk-posts figcaption { font: 600 12.5px/1.2 var(--sans); color: var(--accent); text-align: center; }
.us-site .mk-panel.on .mk-posts figure { animation: us-rise-in .6s var(--ease) both; }
.us-site .mk-panel.on .mk-posts figure:nth-child(2) { animation-delay: .06s; } .us-site .mk-panel.on .mk-posts figure:nth-child(3) { animation-delay: .12s; }
.us-site .mk-panel.on .mk-posts figure:nth-child(4) { animation-delay: .18s; } .us-site .mk-panel.on .mk-posts figure:nth-child(5) { animation-delay: .24s; }
@keyframes us-rise-in { from { opacity: 0; transform: translateY(14px); } }
.us-site .mk-posts figure.lift { animation-name: us-rise-in-lift !important; }
@keyframes us-rise-in-lift { from { opacity: 0; transform: translateY(-4px); } to { transform: translateY(-18px); } }

.us-site .mk-carousel { display: grid; gap: 22px; justify-items: center; width: 100%; }
.us-site .slides { display: flex; gap: 0; justify-content: center; }
.us-site .slide { display: grid; gap: 10px; justify-items: center; width: clamp(150px, 19vw, 240px); margin-left: -18px; transition: transform .5s var(--ease); }
.us-site .slide:first-child { margin-left: 0; }
.us-site .slide .post { width: 100%; box-shadow: var(--shadow-post), 0 0 0 4px var(--bg-2); }
.us-site .slide span { font: 600 12.5px/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.us-site .mk-panel.on .slide { animation: us-slide-in .7s var(--ease) both; }
.us-site .mk-panel.on .slide:nth-child(2) { animation-delay: .08s; } .us-site .mk-panel.on .slide:nth-child(3) { animation-delay: .16s; } .us-site .mk-panel.on .slide:nth-child(4) { animation-delay: .24s; }
@keyframes us-slide-in { from { opacity: 0; transform: translateX(-30px); } }
.us-site .carousel-note { display: grid; gap: 4px; text-align: center; max-width: 34em; }
.us-site .carousel-note b { font: 600 16px/1.3 var(--sans); }
.us-site .carousel-note span { font: italic 400 15.5px/1.45 var(--serif); color: var(--ink-2); }

.us-site .mk-captions { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(18px, 3vw, 40px); align-items: center; width: 100%; max-width: 900px; }
.us-site .mk-captions > .post { width: 100%; }
.us-site .cap-list { display: grid; gap: 10px; }
.us-site .cap { padding: 14px 16px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line); display: grid; gap: 6px; }
.us-site .cap-h { display: flex; align-items: center; gap: 8px; font: 600 13px/1 var(--sans); color: var(--ink-2); }
.us-site .cap p { font: 400 15px/1.5 var(--sans); color: var(--ink); }
.us-site .mk-panel.on .cap { animation: us-rise-in .5s var(--ease) both; }
.us-site .mk-panel.on .cap:nth-child(2) { animation-delay: .07s; } .us-site .mk-panel.on .cap:nth-child(3) { animation-delay: .14s; } .us-site .mk-panel.on .cap:nth-child(4) { animation-delay: .21s; }

.us-site .mk-replies { display: grid; gap: 12px; width: 100%; max-width: 760px; }
.us-site .thread { border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--line); padding: 16px; display: grid; gap: 12px; }
.us-site .thread.small { opacity: .55; }
.us-site .msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.us-site .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #141414; font: 700 14px/1 var(--sans); flex: none; }
.us-site .who-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 500 13.5px/1.2 var(--sans); color: var(--ink-3); }
.us-site .who-line b { color: var(--ink); font-weight: 600; }
.us-site .who-line .pi { width: 13px; height: 13px; color: var(--ink-3); }
.us-site .msg p { margin-top: 4px; font: 400 15.5px/1.45 var(--sans); }
.us-site .draft { margin-left: 46px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); display: grid; gap: 8px; }
.us-site .draft-h { font: 600 12px/1 var(--sans); color: var(--accent); letter-spacing: .02em; }
.us-site .draft p { font: 400 15px/1.45 var(--sans); }
.us-site .draft-a { display: flex; gap: 6px; justify-content: flex-end; }
.us-site .draft-a .btn { height: 34px; padding: 0 14px; font-size: 13.5px; }
.us-site .mk-panel.on .thread { animation: us-rise-in .5s var(--ease) both; }
.us-site .mk-panel.on .thread:nth-child(2) { animation-delay: .1s; } .us-site .mk-panel.on .thread:nth-child(3) { animation-delay: .2s; }

.us-site .mk-soon { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 820px; }
.us-site .soon-art { position: relative; width: clamp(160px, 18vw, 230px); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-post); }
.us-site .soon-art.ad { aspect-ratio: 4 / 5; }
.us-site .soon-art .post { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; box-shadow: none; }
.us-site .soon-art .post img { filter: saturate(.85); }
.us-site .soon-art .play { position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .9); color: #111; font-size: 18px; padding-left: 4px; right: 0; margin-inline: auto; bottom: 0; margin-block: auto; }
.us-site .ad-chip { position: absolute; left: 10px; top: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #111; font: 600 11.5px/1 var(--sans); }
.us-site .soon-copy { display: grid; gap: 12px; justify-items: start; }
.us-site .soon-pill { font: 600 12px/1 var(--sans); padding: 6px 10px; border-radius: 999px; background: var(--card); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.us-site .soon-copy b { font: 600 clamp(22px, 2.4vw, 30px)/1.15 var(--sans); letter-spacing: -.02em; }
.us-site .soon-copy p { font-size: 17px; color: var(--ink-2); max-width: 30em; }

/* ---------- 06 where it posts: the second dark block ---------- */
.us-site .where { margin-top: var(--section); padding-block: var(--section); background: var(--field); color: var(--on-field); }
.us-site[data-scheme="midnight"] .where { box-shadow: inset 0 1px 0 var(--field-line), inset 0 -1px 0 var(--field-line); }
.us-site .where .label { color: var(--on-field-2); }
.us-site .where .label::before { background: var(--accent-bright); }
.us-site .where .sub, .us-site .where .foot3 p { color: var(--on-field-2); }
.us-site .where .foot3 b { color: var(--on-field); }
.us-site .dock-stage { position: relative; display: grid; justify-items: center; gap: clamp(56px, 6vw, 84px); padding: clamp(28px, 4vw, 48px) clamp(12px, 3vw, 40px) clamp(28px, 3vw, 40px); border-radius: 26px; background: var(--field-2); box-shadow: inset 0 0 0 1px var(--field-line); overflow: hidden; }
.us-site .beams { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.us-site .beams path { fill: none; stroke: var(--field-line); stroke-width: 1.5; }
.us-site .beams path.live { stroke: var(--accent-bright); stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw .55s var(--ease) forwards; }

.us-site .beams circle { fill: var(--accent-bright); }
.us-site .dsrc { position: relative; z-index: 1; width: clamp(180px, 16vw, 214px); padding: 10px; border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55); display: grid; gap: 10px; }
.us-site .src-h { display: flex; align-items: center; gap: 8px; padding: 2px 4px 0; font: 500 13px/1 var(--sans); color: var(--ink-3); }
.us-site .src-h b { font-weight: 600; color: var(--ink); margin-right: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-site .src-h > span:last-child { white-space: nowrap; font-size: 12px; }
.us-site .src-h .fav { width: 24px; height: 24px; border-radius: 7px; }
.us-site .dsrc .post img { transition: opacity .35s var(--ease); }
.us-site .dsrc.swap .post img { opacity: 0; }
.us-site .src-status { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 8px; border-radius: 10px; background: var(--bg-2); font: 600 13.5px/1 var(--sans); color: var(--ink-2); }
.us-site .src-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.us-site .src-status.busy::before { background: var(--accent); animation: us-pulse 1s ease-in-out infinite; }
.us-site .src-status.done { background: var(--accent-soft); color: var(--accent); }
.us-site .src-status.done::before { background: var(--accent); }
@keyframes us-pulse { 50% { opacity: .3; } }
.us-site .dock { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 22px); width: 100%; max-width: 1040px; }
.us-site .app { display: grid; justify-items: center; gap: 6px; text-align: center; }
.us-site .app b { margin-top: 6px; font: 600 14.5px/1.2 var(--sans); color: var(--on-field); }
.us-site .app > span:last-child { font: 500 12.5px/1.25 var(--sans); color: var(--on-field-3); }
.us-site .ico { position: relative; width: clamp(56px, 6.4vw, 80px); aspect-ratio: 1; border-radius: 26%; display: grid; place-items: center; color: #fff; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .12); transition: transform .35s var(--ease); }
.us-site .ico .pi { width: 46%; height: 46%; }
.us-site .ico.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.us-site .ico.fb { background: #1877f2; } .us-site .ico.li { background: #0a66c2; } .us-site .ico.tt { background: #010101; }
.us-site .ico.x { background: #000; } .us-site .ico.th { background: #000; } .us-site .ico.pin { background: #e60023; } .us-site .ico.bs { background: #1185fe; }
.us-site .ico::after { content: ""; position: absolute; right: -7px; top: -7px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-bright) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='%230b2a1d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; box-shadow: 0 0 0 3px var(--field-2); transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.us-site .app.hit .ico { transform: translateY(-6px); }
.us-site .app.done .ico::after { transform: scale(1); }

/* ---------- 07 results and reviews ---------- */
.us-site .res-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
.us-site .res-main, .us-site .res-card, .us-site .review { border-radius: 22px; background: var(--card); box-shadow: 0 0 0 1px var(--line); padding: clamp(18px, 2.4vw, 28px); }
.us-site .res-main { display: grid; gap: 18px; align-content: start; }
.us-site .res-who { display: flex; align-items: center; gap: 12px; }
.us-site .res-who b { display: block; font: 600 15.5px/1.2 var(--sans); }
.us-site .res-who span:not(.av) { font: 500 13.5px/1.3 var(--sans); color: var(--ink-3); }
.us-site .res-stat { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.us-site .res-stat b { font: 650 clamp(52px, 6vw, 76px)/.9 var(--sans); letter-spacing: -.04em; color: var(--ink); }
.us-site .res-stat span { font: 500 16px/1.35 var(--sans); color: var(--ink-2); max-width: 18em; }
.us-site .chart { width: 100%; }
.us-site .chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.us-site .chart .bar { transform-box: fill-box; transform-origin: bottom; transition: transform .9s var(--ease); }
.us-site .chart:not(.grown) .bar { transform: scaleY(.02); }
.us-site .res-legend { display: flex; gap: 18px; font: 500 13.5px/1 var(--sans); color: var(--ink-2); }
.us-site .res-legend .k { display: inline-flex; align-items: center; gap: 7px; }
.us-site .res-legend .k::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.us-site .res-legend .before::before { background: var(--line); box-shadow: inset 0 0 0 1px var(--ink-3); }
.us-site .res-legend .after::before { background: var(--accent); }
.us-site .src { font: 500 12.5px/1.4 var(--sans); color: var(--ink-3); }
.us-site .res-side { display: grid; gap: 14px; }
.us-site .res-card { display: grid; gap: 10px; align-content: start; }
.us-site .res-card .big { font: 650 clamp(44px, 4.6vw, 60px)/.95 var(--sans); letter-spacing: -.045em; }
.us-site .res-card p:not(.src) { font: 400 16px/1.45 var(--sans); color: var(--ink-2); }
.us-site .reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.us-site .review { display: grid; gap: 22px; align-content: space-between; }
.us-site .review blockquote { margin: 0; font: italic 400 clamp(18px, 1.6vw, 21px)/1.45 var(--serif); color: var(--ink); }
.us-site .review blockquote::before { content: "“"; display: block; font: 600 44px/0.6 var(--serif); color: var(--accent); margin-bottom: 14px; font-style: normal; }
.us-site .review figcaption { display: flex; align-items: center; gap: 12px; font: 500 13.5px/1.35 var(--sans); color: var(--ink-3); }
.us-site .review figcaption b { display: block; font: 600 15px/1.2 var(--sans); color: var(--ink); }

/* ---------- footer and light/dark ---------- */
.us-site .footer { margin-top: var(--section); padding-block: 0 96px; background: var(--field); color: var(--on-field); overflow: hidden; overflow: clip; }
.us-site[data-scheme="midnight"] .footer { box-shadow: inset 0 1px 0 var(--field-line); }
.us-site .foot-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; }
.us-site .foot-brand { display: grid; gap: 12px; align-content: start; }
.us-site .foot-brand p { font: italic 400 17px/1.4 var(--serif); color: var(--ink-2); }
.us-site .foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.us-site .foot-cols div { display: grid; gap: 10px; align-content: start; font: 500 15px/1.2 var(--sans); }
.us-site .foot-cols b { font: 600 13px/1 var(--sans); color: var(--ink-3); letter-spacing: .03em; text-transform: uppercase; margin-bottom: 4px; }
.us-site .foot-cols a { color: var(--ink-2); }
.us-site .foot-cols a:hover { color: var(--ink); }
.us-site .foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font: 500 14px/1 var(--sans); color: var(--ink-3); flex-wrap: wrap; }
.us-site .theme-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; background: transparent; color: var(--ink-2); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.us-site .theme-btn:hover { color: var(--ink); }
.us-site .theme-btn svg { width: 16px; height: 16px; }
.us-site .theme-btn .sun { display: none; }
.us-site[data-scheme="midnight"] .theme-btn .sun { display: block; }
.us-site[data-scheme="midnight"] .theme-btn .moon { display: none; }

@media (max-width: 980px) {
  .us-site .mk-stage { height: auto; min-height: 0; }
  .us-site .mk-panel { position: relative; inset: auto; display: none; }
  .us-site .mk-panel.on { display: grid; }
  .us-site .mk-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .us-site .mk-posts figure:nth-child(n+4) { display: none; }
  .us-site .mk-posts figure.lift { transform: none; animation-name: us-rise-in !important; }
  .us-site .dock { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 26px; max-width: 560px; }
  .us-site .beams { display: none; }
  .us-site .dock-stage { gap: 44px; }
  .us-site .res-grid { grid-template-columns: minmax(0, 1fr); }
  .us-site .res-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .us-site .reviews { grid-template-columns: minmax(0, 1fr); }
  .us-site .foot-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .us-site .foot3 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .us-site .mk-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
  .us-site .mk-tabs::-webkit-scrollbar { display: none; }
  .us-site .mk-tabs::after { content: ""; flex: none; width: 24px; }
  .us-site .mk-tabs button { flex: none; }
  .us-site .mk-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .us-site .mk-posts figure:nth-child(n+3) { display: none; }
  .us-site .slide { width: 44vw; margin-left: -22vw; }
  .us-site .slide:nth-child(n+4) { display: none; }
  .us-site .mk-captions { grid-template-columns: minmax(0, 1fr); }
  .us-site .mk-captions > .post { max-width: 200px; justify-self: center; }
  .us-site .cap:nth-child(n+3) { display: none; }
  .us-site .draft { margin-left: 0; }
  .us-site .mk-soon { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .us-site .soon-copy { justify-items: center; }
  .us-site .res-side { grid-template-columns: minmax(0, 1fr); }
  .us-site .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .us-site .mk-panel.on * { animation: none !important; }
  .us-site .beams path.live { animation: none; stroke-dashoffset: 0; }
  .us-site .mk-tabs.auto button[aria-selected="true"]::after { animation: none; }
  .us-site .chart .bar { transition: none; }
}
.us-site .chart text { font: 500 11.5px var(--sans); fill: var(--ink-3); }
.us-site .chart .grid { stroke: var(--line); stroke-width: 1; }
.us-site .chart .mark { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 3 4; }
.us-site .chart .mark-label { fill: var(--ink); font-weight: 600; }
.us-site .chart .b0 { fill: var(--ink-3); opacity: .32; }
.us-site .chart .b1 { fill: var(--accent); }
.us-site .chart .val { fill: var(--ink); font-weight: 600; }

/* ---------- 05 additions: product shots, memes, make your own ---------- */
.us-site .mk-products { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2.4vw, 32px); width: 100%; max-width: 980px; }
.us-site .raw { display: grid; gap: 10px; justify-items: center; }
.us-site .raw p { font: 600 12.5px/1 var(--sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.us-site .raw-pair { display: grid; gap: 10px; }
.us-site .raw-img { width: clamp(84px, 9vw, 120px); aspect-ratio: 1; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; display: grid; place-items: center; }
.us-site .raw-img img { width: 86%; height: 86%; object-fit: contain; }
.us-site .mk-products .arrow, .us-site .mk-create .arrow { font: 500 26px/1 var(--sans); color: var(--ink-3); }
.us-site .hero-shot { display: grid; gap: 10px; justify-items: center; max-width: 300px; justify-self: center; width: 100%; }
.us-site .hero-shot figcaption, .us-site .more-shots figcaption { font: 600 12.5px/1.2 var(--sans); color: var(--accent); text-align: center; }
.us-site .more-shots { display: grid; gap: 14px; width: clamp(120px, 13vw, 170px); }
.us-site .more-shots figure { display: grid; gap: 8px; }
.us-site .mk-panel.on .mk-products > * { animation: us-rise-in .55s var(--ease) both; }
.us-site .mk-panel.on .mk-products > *:nth-child(2) { animation-delay: .08s; } .us-site .mk-panel.on .mk-products > *:nth-child(3) { animation-delay: .16s; } .us-site .mk-panel.on .mk-products > *:nth-child(4) { animation-delay: .24s; }

.us-site .mk-memes { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; gap: clamp(14px, 2.4vw, 30px); align-items: end; width: 100%; }
.us-site .mk-memes figure { display: grid; gap: 10px; }
.us-site .mk-memes figure.lift { transform: translateY(-16px); }
.us-site .mk-memes figcaption { font: 600 12.5px/1.2 var(--sans); color: var(--ink-3); text-align: center; }
.us-site .meme { aspect-ratio: 4 / 5; border-radius: var(--radius-post); overflow: hidden; background: #fff; color: #111; box-shadow: var(--shadow-post); display: flex; flex-direction: column; }
.us-site .meme img { width: 100%; flex: 1; min-height: 0; object-fit: cover; }
.us-site .meme.top p { padding: 14px 14px 12px; font: 500 15.5px/1.3 var(--sans); letter-spacing: -.01em; }
.us-site .meme.tweet { padding: 18px; gap: 14px; justify-content: center; background: #fff; }
.us-site .tw-h { display: flex; align-items: center; gap: 10px; }
.us-site .tw-h .av { width: 38px; height: 38px; }
.us-site .tw-h span:last-child { display: grid; font: 400 13px/1.25 var(--sans); color: #6b6f73; }
.us-site .tw-h b { font: 700 14.5px/1.25 var(--sans); color: #111; }
.us-site .meme.tweet p { font: 400 19px/1.35 var(--sans); letter-spacing: -.01em; }
.us-site .tw-f { font: 400 12.5px/1 var(--sans); color: #8a8e92; }
.us-site .meme.pov { position: relative; }
.us-site .meme.pov p { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 14px; font: 700 18px/1.2 var(--sans); color: #fff; letter-spacing: -.01em; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.us-site .mk-panel.on .mk-memes figure { animation: us-rise-in .55s var(--ease) both; }
.us-site .mk-panel.on .mk-memes figure:nth-child(2) { animation-delay: .08s; } .us-site .mk-panel.on .mk-memes figure:nth-child(3) { animation-delay: .16s; }
.us-site .mk-panel.on .mk-memes figure.lift { animation-name: us-rise-in-lift2 !important; }
@keyframes us-rise-in-lift2 { from { opacity: 0; transform: translateY(-2px); } to { transform: translateY(-16px); } }

.us-site .mk-create { display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, .75fr); align-items: center; gap: clamp(16px, 2.6vw, 34px); width: 100%; max-width: 900px; }
.us-site .composer { border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow-card); padding: 18px; display: grid; gap: 14px; }
.us-site .comp-h { display: flex; align-items: center; justify-content: space-between; font: 500 13px/1 var(--sans); color: var(--ink-3); }
.us-site .comp-h b { font: 650 18px/1 var(--sans); color: var(--ink); letter-spacing: -.02em; }
.us-site .comp-h span { padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.us-site .prompt { min-height: 96px; padding: 14px 16px; border-radius: 14px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font: 400 17px/1.45 var(--sans); color: var(--ink); }
.us-site .prompt span::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; background: var(--ink); margin-left: 1px; vertical-align: -3px; animation: us-blink 1s steps(2) infinite; }
.us-site .attach { display: flex; align-items: center; gap: 10px; }
.us-site .file { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 10px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font: 500 13.5px/1 var(--sans); color: var(--ink-2); }
.us-site .file img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.us-site .attach .hint { font: 500 13px/1 var(--sans); color: var(--ink-3); }
.us-site .opts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.us-site .opt { height: 34px; padding: 0 13px; display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font: 500 14px/1 var(--sans); color: var(--ink-2); }
.us-site .opt.on { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.us-site .opts .btn { margin-left: auto; height: 38px; font-size: 14.5px; }
.us-site .result { display: grid; gap: 10px; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.us-site .result.wait { opacity: 0; transform: translateY(10px) scale(.98); }
.us-site .result figcaption { display: grid; gap: 3px; text-align: center; }
.us-site .result figcaption b { font: 600 13px/1.2 var(--sans); color: var(--accent); }
.us-site .result figcaption span { font: italic 400 14.5px/1.35 var(--serif); color: var(--ink-2); }

@media (max-width: 980px) {
  .us-site .mk-products { grid-template-columns: auto auto minmax(0, 1fr); }
  .us-site .more-shots { display: none; }
  .us-site .mk-create { grid-template-columns: minmax(0, 1fr); }
  .us-site .mk-create .arrow { display: none; }
  .us-site .result { max-width: 220px; justify-self: center; }
}
@media (max-width: 640px) {
  .us-site .mk-products { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .us-site .mk-products .arrow { transform: rotate(90deg); }
  .us-site .raw-pair { grid-template-columns: 1fr 1fr; }
  .us-site .mk-memes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .us-site .mk-memes figure:nth-child(3) { display: none; }
  .us-site .mk-memes figure.lift { transform: none; animation-name: us-rise-in !important; }
  .us-site .meme.tweet p { font-size: 16px; }
}

/* ---------- 08 pricing ---------- */
.us-site .pricing { padding-top: var(--section); }
.us-site .pricing .head { margin-bottom: clamp(30px, 4vw, 44px); }
.us-site .pricing .h2 { max-width: 16em; }
.us-site .cost-card { border-radius: 22px; background: var(--card); box-shadow: 0 0 0 1px var(--line); padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 4px; }
.us-site .cost-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.us-site .cost-h b { font: 600 17px/1.2 var(--sans); }
.us-site .cost-h span { font: 500 13.5px/1 var(--sans); color: var(--ink-3); }
.us-site .crow { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 280px); gap: 18px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.us-site .cname { font: 600 15.5px/1.2 var(--sans); }
.us-site .crow.us .cname { color: var(--accent); }
.us-site .cbar { display: flex; align-items: center; gap: 12px; min-width: 0; }
.us-site .cbar i { display: block; height: 28px; width: max(var(--w), 8px); border-radius: 8px; background: var(--ink); transform-origin: left; transition: transform 1.1s var(--ease); }
.us-site .crow:nth-child(3) .cbar i { background: var(--ink-3); }
.us-site .crow.us .cbar i { background: var(--accent); }
.us-site .cost:not(.grown) .cbar i, .us-site #cost:not(.grown) .cbar i { transform: scaleX(0); }
.us-site .cbar b { font: 650 22px/1 var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.us-site .cbar b small { font: 500 13px/1 var(--sans); color: var(--ink-3); margin-left: 2px; letter-spacing: 0; }
.us-site .crow.us .cbar b { color: var(--accent); }
.us-site .cnote { font: 400 14.5px/1.35 var(--sans); color: var(--ink-2); }
.us-site .crow.diy { border-top-style: dashed; }
.us-site .hours { display: block; height: 28px; width: 75%; border-radius: 8px; background: repeating-linear-gradient(90deg, var(--line) 0 calc(100% / 30 - 3px), transparent calc(100% / 30 - 3px) calc(100% / 30)); box-shadow: inset 0 0 0 1px var(--line); transform-origin: left; transition: transform 1.1s var(--ease); }
.us-site #cost:not(.grown) .hours { transform: scaleX(0); }
.us-site .crow:nth-child(2) .cbar i { transition-delay: 0s; } .us-site .crow:nth-child(3) .cbar i { transition-delay: .12s; } .us-site .crow:nth-child(4) .cbar i { transition-delay: .24s; } .us-site .crow:nth-child(5) .cbar i { transition-delay: .32s; } .us-site .crow:nth-child(6) .hours { transition-delay: .4s; }
.us-site .cost-card .src { margin-top: 10px; }

.us-site .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.us-site .plan { position: relative; border-radius: 22px; background: var(--card); box-shadow: 0 0 0 1px var(--line); padding: clamp(20px, 2.6vw, 32px); display: grid; gap: 16px; align-content: start; }
.us-site .plan.pro { box-shadow: 0 0 0 2px var(--ink), var(--shadow-card); }
.us-site .plan-h { display: grid; gap: 6px; }
.us-site .plan-h b { font: 650 22px/1 var(--sans); letter-spacing: -.02em; }
.us-site .plan-h span { font: italic 400 16px/1.35 var(--serif); color: var(--ink-2); }
.us-site .plan-h em { position: absolute; right: 20px; top: 20px; font: 600 12px/1 var(--sans); font-style: normal; padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.us-site .price { display: flex; align-items: baseline; gap: 6px; }
.us-site .price b { font: 650 clamp(48px, 5vw, 64px)/.9 var(--sans); letter-spacing: -.045em; }
.us-site .price span { font: 500 16px/1 var(--sans); color: var(--ink-3); }
.us-site .first { font: 600 14px/1 var(--sans); color: var(--accent); margin-top: -6px; }
.us-site .plan ul { list-style: none; margin: 4px 0 6px; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.us-site .plan li { display: flex; align-items: center; gap: 10px; font: 400 15.5px/1.35 var(--sans); }
.us-site .plan li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='%234cc488' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.us-site .plan .btn { height: 50px; font-size: 16px; }
.us-site .plans-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 22px; font: 500 14.5px/1.3 var(--sans); color: var(--ink-2); }
.us-site .plans-note span { display: inline-flex; align-items: center; gap: 7px; }

@media (max-width: 980px) {
  .us-site .crow { grid-template-columns: 140px minmax(0, 1fr); }
  .us-site .cnote { grid-column: 2; margin-top: -6px; }
}
@media (max-width: 640px) {
  .us-site .crow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .us-site .cnote { grid-column: auto; margin-top: 0; }
  .us-site .plans { grid-template-columns: minmax(0, 1fr); }
  .us-site .plans-note { justify-content: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .us-site .cbar i, .us-site .hours { transition: none; } }

/* =====================================================================
   Round 6: brand kit (section 4), it keeps learning, why not ChatGPT
   ===================================================================== */
/* ---------- 04 brand kit ---------- */
.us-site .kit { display: grid; gap: 0; }
.us-site .kit-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--field-line); }
.us-site .kit-row:first-child { border-top: 0; padding-top: 4px; }
.us-site .kit-row .k { font: 600 12px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--on-field-3); }
.us-site .kit-logo { height: 44px; display: flex; align-items: center; }
.us-site .kit-logo img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.us-site .kit-logo .wm { color: var(--on-field); opacity: 1; }
.us-site .kit-sw { display: flex; gap: 8px; flex-wrap: wrap; }
.us-site .kit-sw span { display: grid; gap: 5px; justify-items: start; font: 500 11.5px/1 var(--sans); color: var(--on-field-2); font-variant-numeric: tabular-nums; }
.us-site .kit-sw span i { width: 46px; height: 34px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.us-site .kit-type { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.us-site .kit-type b { font-size: 34px; line-height: 1; color: #fff; }
.us-site .kit-type span { font: 500 14px/1.35 var(--sans); color: var(--on-field-2); }
.us-site .kit-photos { display: flex; gap: 6px; }
.us-site .kit-photos img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.us-site .kit-photos .none { font: italic 400 14.5px/1.4 var(--serif); color: var(--on-field-2); }
.us-site .kit-voice { display: grid; gap: 8px; }
.us-site .kit-voice .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.us-site .kit-voice .chips span, .us-site .kit-avoid span { padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--field-line); font: 500 13px/1.1 var(--sans); color: var(--on-field); }
.us-site .kit-voice p { font: italic 400 16px/1.4 var(--serif); color: var(--on-field); }
.us-site .kit-avoid { display: flex; gap: 6px; flex-wrap: wrap; }
.us-site .kit-avoid span { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .35); color: var(--on-field-2); }
.us-site .kit-note { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--field-line); font: 500 14px/1.4 var(--sans); color: var(--on-field-2); }

/* ---------- 05 it keeps learning ---------- */
.us-site .learn { padding-top: var(--section); }
.us-site .learn .head { margin-bottom: clamp(30px, 4vw, 44px); }
.us-site .learn-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 26px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.us-site .lcard { border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--line); padding: clamp(16px, 2vw, 24px); display: grid; gap: 14px; align-content: start; }
.us-site .lcard-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.us-site .lcard-h b { font: 600 16px/1.2 var(--sans); }
.us-site .lcard-h span { font: 500 13px/1.2 var(--sans); color: var(--ink-3); }
.us-site .watch { list-style: none; margin: 0; padding: 0; display: grid; }
.us-site .watch li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 8px; margin-inline: -8px; border-radius: 12px; border-top: 1px solid var(--line); transition: background .5s var(--ease); }
.us-site .watch li:first-child { border-top-color: transparent; }
.us-site .watch li.ping { background: var(--accent-soft); border-top-color: transparent; }
.us-site .watch li.ping + li { border-top-color: transparent; }
.us-site .wi { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-2); color: var(--ink-2); }
.us-site .wi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.us-site .wi svg circle[r="1.2"] { fill: currentColor; }
.us-site .watch b { display: block; font: 600 15px/1.25 var(--sans); }
.us-site .watch div span { font: 400 13.5px/1.35 var(--sans); color: var(--ink-2); }
.us-site .watch em { font: 600 12px/1 var(--sans); font-style: normal; padding: 6px 9px; border-radius: 999px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.us-site .watch em.hot { color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.us-site .watch li.ping em { color: var(--accent); background: var(--card); box-shadow: none; }

.us-site .qa { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: var(--bg-2); min-height: 196px; align-content: start; }
.us-site .q-msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.us-site .u-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--btn); color: var(--btn-ink); }
.us-site .u-av svg { width: 15px; height: 17px; }
.us-site .u-av svg .eyes { fill: var(--btn); }
.us-site .q-msg p { padding: 11px 14px; border-radius: 4px 16px 16px 16px; background: var(--card); box-shadow: 0 0 0 1px var(--line); font: 500 16px/1.4 var(--sans); }
.us-site .q-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 44px; transition: opacity .3s var(--ease); }
.us-site .q-chips span { height: 34px; padding: 0 13px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 500 14px/1 var(--sans); color: var(--ink); transition: background .25s, color .25s, box-shadow .25s; }
.us-site .q-chips span.pick { background: var(--btn); color: var(--btn-ink); box-shadow: none; }
.us-site .q-reply { margin-left: 44px; font: italic 400 15.5px/1.4 var(--serif); color: var(--ink-2); min-height: 1.4em; opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.us-site .q-reply.show { opacity: 1; transform: none; }
.us-site .q-reply::before { content: "✓  "; font-style: normal; color: var(--accent); font-weight: 700; }
.us-site .qa.out .q-msg, .us-site .qa.out .q-chips, .us-site .qa.out .q-reply { opacity: 0; }
.us-site .knows { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.us-site .knows-n { position: relative; display: inline-flex; align-items: baseline; }
.us-site .knows-n b { font: 650 46px/1 var(--sans); letter-spacing: -.04em; }
.us-site .knows-n em { position: absolute; right: -30px; top: -6px; font: 700 14px/1 var(--sans); font-style: normal; color: var(--accent); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .4s var(--ease); }
.us-site .knows-n em.show { opacity: 1; transform: none; }
.us-site .knows > span { font: 500 15px/1.3 var(--sans); color: var(--ink-2); margin-left: 22px; }
.us-site .growth svg { display: block; width: 100%; height: auto; overflow: visible; }
.us-site .growth .gl { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.us-site .growth .ga { fill: var(--accent-soft); }
.us-site .growth .gd { fill: var(--card); stroke: var(--accent); stroke-width: 2; }
.us-site .growth .gd.now { fill: var(--accent); }
.us-site .growth text { font: 500 11.5px var(--sans); fill: var(--ink-3); }
.us-site .growth text.v { fill: var(--ink); font-weight: 600; }
.us-site .growth .base { stroke: var(--line); }

/* ---------- 08 why not ChatGPT and Canva ---------- */
.us-site .diy { padding-top: var(--section); }
.us-site .diy .head { margin-bottom: clamp(30px, 4vw, 44px); }
.us-site .diy-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.us-site .diy-card { border-radius: 22px; padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 16px; align-content: start; }
.us-site .diy-card.slow { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.us-site .diy-card.fast { background: var(--card); box-shadow: 0 0 0 2px var(--accent), var(--shadow-card); }
.us-site .diy-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.us-site .diy-h b { display: block; font: 600 17px/1.25 var(--sans); }
.us-site .diy-h div span { font: italic 400 15px/1.35 var(--serif); color: var(--ink-2); }
.us-site .clock { font: 650 clamp(34px, 3.6vw, 46px)/1 var(--sans); letter-spacing: -.03em; color: var(--ink); min-width: 2.6em; text-align: right; }
.us-site .clock.done { color: var(--accent); }
.us-site .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.us-site .steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); font: 400 15px/1.4 var(--sans); color: var(--ink); transition: opacity .35s var(--ease); }
.us-site .steps li i { font: 500 13px/1.4 var(--sans); font-style: normal; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.us-site.js .steps:not(.played) li { opacity: .25; }
.us-site.js .steps li.on { opacity: 1; }
.us-site .diy-end { font: 600 15px/1.35 var(--sans); color: var(--ink-2); }
.us-site .diy-end.good { color: var(--accent); }
.us-site .report { display: grid; gap: 14px; padding: 16px; border-radius: 16px; background: var(--bg-2); }
.us-site .rep-h { display: flex; align-items: center; gap: 10px; }
.us-site .rep-h b { display: block; font: 600 16px/1.2 var(--sans); }
.us-site .rep-h div span { font: 500 13px/1.2 var(--sans); color: var(--ink-3); }
.us-site .rep-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.us-site .rep-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 500 15px/1.35 var(--sans); }
.us-site .rep-list .tick { width: 18px; height: 18px; background-size: 13px; }
.us-site .rep-thumbs { display: flex; gap: 4px; margin-left: 28px; flex-basis: 100%; }
.us-site .rep-thumbs img { width: 44px; height: 55px; border-radius: 7px; object-fit: cover; box-shadow: var(--shadow-post); }
.us-site .qmark { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--btn); color: var(--btn-ink); font: 700 11px/1 var(--sans); font-style: normal; flex: none; }
.us-site .ask-row span { color: var(--ink-2); }
.us-site .report .btn { justify-self: start; height: 42px; }
.us-site .diy-line { margin-top: clamp(28px, 4vw, 44px); text-align: center; font: 600 clamp(24px, 3vw, 36px)/1.2 var(--sans); letter-spacing: -.025em; color: var(--ink-3); }
.us-site .diy-line b { color: var(--ink); font-weight: 650; }
.us-site .src.center { text-align: center; margin-top: 8px; }

@media (max-width: 980px) {
  .us-site .learn-stage, .us-site .diy-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .us-site .learn-stage { padding: 8px; }
  .us-site .kit-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .us-site .q-chips, .us-site .q-reply { padding-left: 0; margin-left: 0; }
  .us-site .knows > span { margin-left: 0; flex-basis: 100%; }
  .us-site .steps li { grid-template-columns: 44px minmax(0, 1fr); font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .us-site.js .steps:not(.played) li { opacity: 1; }
}

/* =====================================================================
   Round 7: hero options (research, feed, split, grow), FAQ, footer CTA
   ===================================================================== */
/* ---------- split layout ---------- */

/* ---------- grow on scroll ---------- */
.us-site .stage { transform-origin: 50% 0; will-change: transform; }

/* ---------- hero: research ---------- */
.us-site .chip-status.busy { color: var(--ink-2); background: var(--bg-2); }
.us-site .chip-status.busy::before { background: var(--accent); animation: us-pulse 1s ease-in-out infinite; }

@keyframes us-scan { to { top: calc(100% - 10px); } }
.us-site .sm { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; color: #151515; font-family: var(--sans); transition: opacity .35s var(--ease); }

.us-site #rs-facts { display: grid; gap: 7px; }
.us-site .fact { display: grid; gap: 3px; padding: 9px 12px; border-radius: 11px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); opacity: 0; transform: translateX(-12px); transition: opacity .4s var(--ease), transform .45s var(--ease); }
.us-site .fact.on { opacity: 1; transform: none; }
.us-site .fact i { font: 600 11px/1 var(--sans); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.us-site .fact span { font: 500 14px/1.3 var(--sans); }

/* ---------- hero: feed ---------- */

.us-site .phone { width: clamp(250px, 24vw, 300px); border-radius: 36px; padding: 16px 12px 12px; background: #fff; color: #111; box-shadow: 0 0 0 9px #111, 0 0 0 10px #333, 0 34px 60px -24px rgba(0, 0, 0, .5); }

@keyframes us-drop { from { opacity: 0; transform: scale(.6); } }

@media (max-width: 980px) {
  
  
  .us-site #rs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  
}
@media (max-width: 640px) {
  
  
  .us-site #rs-facts { grid-template-columns: minmax(0, 1fr); }
  
}

/* ---------- 11 FAQ ---------- */
.us-site .faq { padding-top: var(--section); }
.us-site .faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.us-site .faq-side { display: grid; gap: 16px; justify-items: start; position: sticky; top: 100px; }
.us-site .faq-side .btn { margin-top: 6px; }
.us-site .faq-list { border-top: 1px solid var(--line); }
.us-site .faq-list details { border-bottom: 1px solid var(--line); }
.us-site .faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 2px; font: 600 clamp(17px, 1.5vw, 19px)/1.35 var(--sans); letter-spacing: -.01em; }
.us-site .faq-list summary::-webkit-details-marker { display: none; }
.us-site .faq-list summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' fill='none' stroke='%238b938e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; transition: transform .3s var(--ease), background-color .3s; }
.us-site .faq-list details[open] summary::after { transform: rotate(45deg); }
.us-site .faq-list summary:hover::after { background-color: var(--line); }
.us-site .faq-list details p { padding: 0 48px 22px 2px; font: 400 16.5px/1.6 var(--sans); color: var(--ink-2); max-width: 40em; }
.us-site .faq-list details p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.us-site .faq-list details[open] p { animation: us-rise-in .35s var(--ease); }

/* ---------- footer with the final call ---------- */
.us-site .final { display: grid; justify-items: center; text-align: center; gap: 20px; padding-top: clamp(80px, 10vw, 128px); position: relative; }
.us-site .final-h { font: 650 clamp(36px, 5.2vw, 66px)/1.02 var(--sans); letter-spacing: -.04em; max-width: 13em; }
.us-site .final-sub { font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.55; color: var(--on-field-2); max-width: 32em; }
.us-site .footer .site-field { margin-top: 8px; background: #fff; color: #111; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55); }
.us-site .footer .site-field input::placeholder { color: #8b938e; }
.us-site .footer .site-field .btn { background: var(--field); color: #fff; }
.us-site[data-scheme="midnight"] .footer .site-field .btn { background: #0a0c0f; }
.us-site .footer .fine { color: var(--on-field-2); }
.us-site .final-posts { display: flex; justify-content: center; gap: 14px; margin-top: clamp(36px, 5vw, 56px); margin-inline: calc(var(--gutter) * -1 - 40px); height: clamp(150px, 16vw, 220px); overflow: hidden; -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }
.us-site .final-posts .post { width: clamp(120px, 12vw, 170px); flex: none; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .7); }
.us-site .foot-main { padding-top: 8px; }
.us-site .footer .foot-top { padding-top: 40px; border-top: 1px solid var(--field-line); }
.us-site .footer .logo { color: var(--on-field); }
.us-site .footer .logo svg .eyes { fill: var(--field); }
.us-site .footer .foot-brand p { color: var(--on-field-2); }
.us-site .footer .foot-cols b { color: var(--on-field-3); }
.us-site .footer .foot-cols a { color: var(--on-field-2); }
.us-site .footer .foot-cols a:hover { color: var(--on-field); }
.us-site .footer .foot-bottom { border-top-color: var(--field-line); color: var(--on-field-3); }
.us-site .footer .seg { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--field-line); }
.us-site .footer .seg button { color: var(--on-field-2); }
.us-site .footer .seg button[aria-checked="true"] { background: var(--on-field); color: var(--field); }

@media (max-width: 860px) {
  .us-site .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .us-site .faq-side { position: static; }
}
@media (max-width: 640px) {
  .us-site .faq-list details p { padding-right: 8px; }
  .us-site .final-posts .post:nth-child(n+5) { display: none; }
}

/* =====================================================================
   Round 8: review hero, rebuilt (deck of posts, real design edits)
   ===================================================================== */
.us-site .rv-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.us-site .deck { position: relative; display: grid; place-items: center; padding: 30px 20px 34px; background: var(--bg-2); border-right: 1px solid var(--line); overflow: hidden; overflow: clip; }

/* a composed post: photo + brand panel, so edits change the design itself */
.us-site .cp-logo { position: absolute; right: 7cqw; top: 6cqw; width: 18cqw; filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0, 0, 0, .35)); z-index: 2; }
.us-site .cp-panel { position: absolute; left: 0; right: 0; bottom: 0; padding: 6cqw 7cqw 7cqw; background: #efede8; display: grid; gap: 1.6cqw; z-index: 2; transition: background-color .9s var(--ease); }
.us-site .cp-panel b { font: 800 14.5cqw/.92 var(--sans); letter-spacing: -.045em; }
.us-site .cp-panel span { font: 600 4.6cqw/1.2 var(--sans); }

.us-site .rv-panel { display: grid; gap: 16px; align-content: center; padding: clamp(20px, 3vw, 36px); min-width: 0; }
.us-site .rv-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 500 13.5px/1 var(--sans); color: var(--ink-2); }
.us-site .rv-meta .plats { gap: 6px; }
.us-site .prov { margin-left: auto; padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 12px/1 var(--sans); transition: opacity .3s; }
.us-site .rv-cap { font: 400 17px/1.5 var(--sans); color: var(--ink); max-width: 34em; transition: opacity .3s; }
.us-site .rv-panel .why { max-width: 34em; transition: opacity .3s; }
.us-site .rv-edit-area { display: grid; gap: 8px; min-height: 104px; align-content: start; }
.us-site .rv-edit-area .ask { display: none; }
.us-site .rv-edit-area .ask.show { display: flex; }
.us-site .chat { display: grid; gap: 8px; align-content: start; }
.us-site .bub { max-width: 88%; padding: 10px 13px; border-radius: 16px; font: 500 14.5px/1.4 var(--sans); animation: us-rise-in .35s var(--ease) both; }
.us-site .bub.me { justify-self: end; background: var(--btn); color: var(--btn-ink); border-bottom-right-radius: 5px; }
.us-site .bub.u { justify-self: start; display: flex; gap: 8px; align-items: flex-start; background: var(--card); box-shadow: 0 0 0 1px var(--line); border-bottom-left-radius: 5px; }
.us-site .bub.u .u-av { width: 20px; height: 20px; flex: none; }
.us-site .bub.u .u-av svg { width: 9px; height: 10px; }
.us-site .bub.u.work span { color: var(--ink-3); }
.us-site .rv-panel .actions { margin-top: 2px; }

@media (max-width: 980px) {
  .us-site .rv-body { grid-template-columns: minmax(0, 1fr); }
  .us-site .deck { border-right: 0; border-bottom: 1px solid var(--line); padding: 26px 16px 30px; }
  .us-site .rv-panel { padding: 18px 16px; gap: 12px; }
  .us-site .rv-cap { font-size: 15.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .us-site .rv-edit-area { min-height: 92px; }
}
@media (max-width: 640px) {
  .us-site .rv-panel .why { display: none; }
  .us-site .rv-panel .actions .btn { flex: 1; }
  .us-site .cursor { display: none; }
}

/* review hero, round 9: mixed businesses, image swaps on full posts */
.us-site .queue-title { font: 600 15px/1 var(--sans); letter-spacing: -.01em; }
.us-site .rv-meta .biz { padding: 6px 10px; border-radius: 999px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font: 600 12.5px/1 var(--sans); color: var(--ink); }
.us-site .rv-panel .why span { display: block; }

/* review hero: product photo moved into a real setting */
.us-site .cp-white { position: absolute; inset: 0; background: #f3f1ec; display: grid; place-items: center; padding-bottom: 30%; }
.us-site .cp-white .pack { width: 78%; height: auto; mix-blend-mode: multiply; }
.us-site .cp-panel.serif { background: #fbfaf7; }
.us-site .cp-panel.serif b { font: 500 10cqw/1 var(--serif); letter-spacing: -.02em; }
.us-site .ly .cp-white { padding-bottom: 22%; }
.us-site .cp-panel.serif span { font: 500 4.4cqw/1.2 var(--sans); color: #5a5a55; }

/* nav: current page */
.us-site .nav-links a[aria-current="page"] { color: var(--ink); }
.us-site .foot-bottom span:last-child { font: italic 400 15px/1.3 var(--serif); color: var(--on-field-3); }

/* =====================================================================
   Inner pages: manifesto, pricing, blog, article
   ===================================================================== */
.us-site .inner { padding-bottom: 8px; }
.us-site .page-hero { display: grid; gap: 18px; padding-block: clamp(48px, 7vw, 96px) clamp(32px, 4vw, 56px); }
.us-site .pr-title { font: 650 clamp(40px, 5.6vw, 72px)/1.02 var(--sans); letter-spacing: -.042em; max-width: 16em; }
.us-site .pr-title .soft { color: var(--ink-3); }
.us-site .pr-block { padding-top: clamp(72px, 9vw, 120px); }
.us-site .pr-block .head { margin-bottom: clamp(26px, 3vw, 40px); }
.us-site a.inline { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- manifesto ---------- */
.us-site .mf-hero { max-width: 900px; }
.us-site .mf-title { font: 650 clamp(48px, 7vw, 96px)/.98 var(--sans); letter-spacing: -.05em; }
.us-site .mf-desc { font: italic 400 clamp(20px, 2vw, 26px)/1.45 var(--serif); color: var(--ink-2); max-width: 32em; }
.us-site .mf-by { font: 500 14px/1 var(--sans); color: var(--ink-3); }
.us-site .mf-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 7vw, 96px); padding-block: clamp(24px, 4vw, 48px) clamp(56px, 7vw, 96px); }
.us-site .mf-move { display: grid; gap: 26px; width: 100%; max-width: 760px; min-width: 0; }
.us-site .mf-move:nth-child(4n+3) { margin-left: auto; }
.us-site .mf-lead { font: 650 clamp(30px, 3.6vw, 46px)/1.12 var(--sans); letter-spacing: -.03em; }
.us-site .mf-prose { font: 400 clamp(19px, 1.6vw, 22px)/1.6 var(--serif); color: var(--ink-2); max-width: 36em; }
.us-site .mf-stanza { display: grid; gap: 6px; font: 600 clamp(22px, 2.3vw, 30px)/1.25 var(--sans); letter-spacing: -.02em; padding-left: 22px; border-left: 2px solid var(--accent); }
.us-site .mf-stanza span:nth-child(n+2) { color: var(--ink-2); }
.us-site .mf-quote { margin: 0; display: grid; gap: 8px; font: italic 400 clamp(26px, 3vw, 40px)/1.25 var(--serif); color: var(--ink); }
.us-site .mf-statement { font: 700 clamp(30px, 3.6vw, 48px)/1.1 var(--sans); letter-spacing: -.035em; color: var(--accent); }
.us-site .mf-strip { display: flex; gap: 12px; overflow: hidden; overflow: clip; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.us-site .mf-strip .post { width: clamp(120px, 14vw, 180px); flex: none; }
.us-site .mf-strip .post:nth-child(odd) { transform: translateY(14px); }
.us-site .mf-close { border-radius: 28px; background: var(--field); color: var(--on-field); padding: clamp(32px, 5vw, 64px); display: grid; gap: 18px; }
.us-site .mf-close p { font: 500 16px/1.4 var(--sans); color: var(--on-field-2); }
.us-site .mf-close h2 { font: 600 clamp(28px, 3.4vw, 44px)/1.15 var(--sans); letter-spacing: -.03em; max-width: 22em; }
.us-site .mf-close-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.us-site .mf-close .btn { background: var(--on-field); color: var(--field); }
.us-site .mf-close .btn.ghost { background: transparent; color: var(--on-field); box-shadow: inset 0 0 0 1px var(--field-line); }

/* ---------- pricing page ---------- */
.us-site .plans.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.us-site .plan.custom { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.us-site .plan.custom .price b { font-size: clamp(36px, 3.6vw, 46px); }
.us-site .plan.custom .first { color: var(--ink-2); }
.us-site .wk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.us-site .wk-group { border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--line); padding: 22px; display: grid; gap: 14px; align-content: start; }
.us-site .wk-group h3 { font: 600 13px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.us-site .wk-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.us-site .wk-group li { font: 400 15px/1.45 var(--sans); color: var(--ink-2); }
.us-site .wk-group li b { font-weight: 600; color: var(--ink); }
.us-site .cmp-wrap { overflow-x: auto; border-radius: 20px; box-shadow: 0 0 0 1px var(--line); background: var(--card); }
.us-site .cmp { width: 100%; border-collapse: collapse; min-width: 520px; font: 400 15.5px/1.4 var(--sans); }
.us-site .cmp th, .us-site .cmp td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.us-site .cmp tbody tr:last-child th, .us-site .cmp tbody tr:last-child td { border-bottom: 0; }
.us-site .cmp thead th { font: 650 18px/1.1 var(--sans); vertical-align: bottom; }
.us-site .cmp thead th small { display: block; margin-top: 4px; font: 500 13px/1 var(--sans); color: var(--ink-3); }
.us-site .cmp thead th.hl, .us-site .cmp td:last-child { background: var(--bg-2); }
.us-site .cmp tbody th { font-weight: 500; color: var(--ink-2); }
.us-site .cmp td { font-weight: 600; }
.us-site .cmp .dash { color: var(--ink-3); font-weight: 400; }

/* ---------- blog ---------- */
.us-site .bl-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.us-site .bl-filters button { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; background: var(--bg-2); color: var(--ink-2); font: 500 14.5px/1 var(--sans); }
.us-site .bl-filters button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
.us-site .bl-feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: 14px; border-radius: 26px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.us-site .bl-feature h2 { font: 650 clamp(28px, 3.2vw, 42px)/1.08 var(--sans); letter-spacing: -.035em; margin: 12px 0; }
.us-site .bl-feature p { font-size: 17px; color: var(--ink-2); }
.us-site .bl-feature b { display: inline-block; margin-top: 18px; font: 600 15px/1 var(--sans); color: var(--accent); }
.us-site .bl-feature > div:last-child { padding-right: 20px; }
.us-site .bl-cover { aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: var(--bg-2); }
.us-site .bl-cover img { width: 100%; height: 100%; object-fit: cover; }
.us-site .bl-poster { display: grid; align-content: space-between; padding: 22px; background: var(--field); color: var(--on-field); }
.us-site .bl-poster small { font: 600 11.5px/1 var(--sans); letter-spacing: .06em; color: var(--on-field-2); }
.us-site .bl-poster strong { font: 650 clamp(22px, 2.4vw, 30px)/1.1 var(--sans); letter-spacing: -.03em; }
.us-site .bl-poster i { font: italic 400 15px/1 var(--serif); color: var(--accent-bright); }
.us-site .bl-meta { font: 600 12.5px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.us-site .bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; margin-top: 40px; }
.us-site .bl-card { display: grid; gap: 12px; align-content: start; }
.us-site .bl-card h3 { font: 600 20px/1.25 var(--sans); letter-spacing: -.02em; }
.us-site .bl-card p { font-size: 15.5px; color: var(--ink-2); }
.us-site .bl-card:hover h3, .us-site .bl-feature:hover h2 { color: var(--accent); }
.us-site .bl-card .bl-cover img, .us-site .bl-feature .bl-cover img { transition: transform .6s var(--ease); }
.us-site .bl-card:hover .bl-cover img, .us-site .bl-feature:hover .bl-cover img { transform: scale(1.03); }
.us-site .bl-signup { margin-top: clamp(72px, 9vw, 120px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(24px, 4vw, 44px); border-radius: 26px; background: var(--bg-2); }
.us-site .bl-signup h2 { margin-top: 10px; font: 650 clamp(26px, 3vw, 36px)/1.1 var(--sans); letter-spacing: -.03em; }
.us-site .bl-form { display: flex; gap: 8px; flex: 1; max-width: 460px; }
.us-site .bl-form input { flex: 1; min-width: 0; height: 50px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--card); box-shadow: 0 0 0 1px var(--line); font: 500 16px/1 var(--sans); outline: 0; }
.us-site .bl-form input:focus { box-shadow: 0 0 0 2px var(--ink); }
.us-site .bl-form .btn { height: 50px; }

/* ---------- article ---------- */
.us-site .ar-head { max-width: 900px; }
.us-site .ar-back { font: 600 14px/1 var(--sans); color: var(--ink-2); justify-self: start; }
.us-site .ar-back:hover { color: var(--ink); }
.us-site .ar-cover img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 22px; }
.us-site .ar-layout { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: clamp(32px, 6vw, 96px); padding-top: clamp(40px, 5vw, 64px); }
.us-site .ar-toc { position: sticky; top: 96px; align-self: start; display: grid; gap: 12px; font: 500 14px/1.4 var(--sans); }
.us-site .ar-toc b { font: 600 12.5px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.us-site .ar-toc ol { margin: 0; padding-left: 18px; display: grid; gap: 10px; color: var(--ink-3); }
.us-site .ar-toc a { color: var(--ink-2); }
.us-site .ar-toc a:hover { color: var(--accent); }
.us-site .ar-body { font: 400 19px/1.7 var(--serif); color: var(--ink); }
.us-site .ar-body > * + * { margin-top: 1.1em; }
.us-site .ar-body .ar-lead { font: 500 clamp(21px, 2vw, 25px)/1.5 var(--sans); letter-spacing: -.01em; }
.us-site .ar-body h2 { margin-top: 2.2em; font: 650 clamp(26px, 2.6vw, 32px)/1.15 var(--sans); letter-spacing: -.03em; scroll-margin-top: 90px; }
.us-site .ar-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.us-site .ar-fig { margin: 2em 0; }
.us-site .ar-fig img { width: 100%; border-radius: 16px; }
.us-site .ar-fig figcaption { margin-top: 10px; font: 400 14px/1.45 var(--sans); color: var(--ink-3); }
.us-site .ar-caption { margin: 1.6em 0; padding: 20px 24px; border-radius: 16px; background: var(--bg-2); border-left: 3px solid var(--accent); font: italic 400 20px/1.55 var(--serif); }
.us-site .ar-caption p { margin: 0; }
.us-site .ar-note { padding-top: 20px; border-top: 1px solid var(--line); font: 400 14px/1.5 var(--sans) !important; color: var(--ink-3); }
.us-site .ar-body .ar-cta-link { display: inline-flex; padding: 14px 20px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); text-decoration: none; font: 600 16px/1 var(--sans); }
.us-site .ar-more { padding-top: clamp(72px, 9vw, 120px); }
.us-site .bl-grid.three { margin-top: 0; }

@media (max-width: 980px) {
  .us-site .plans.three, .us-site .wk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .us-site .bl-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .us-site .bl-feature { grid-template-columns: minmax(0, 1fr); }
  .us-site .bl-feature > div:last-child { padding: 0 10px 14px; }
  .us-site .ar-layout { grid-template-columns: minmax(0, 1fr); }
  .us-site .ar-toc { position: static; padding: 18px; border-radius: 16px; background: var(--bg-2); }
  .us-site .mf-move:nth-child(4n+3) { margin-left: 0; }
}
@media (max-width: 640px) {
  .us-site .plans.three, .us-site .wk, .us-site .bl-grid { grid-template-columns: minmax(0, 1fr); }
  .us-site .ar-body { font-size: 18px; }
  .us-site .ar-cover img { aspect-ratio: 3 / 2; }
  .us-site .mf-strip .post:nth-child(n+5) { display: none; }
}

@keyframes us-shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* =====================================================================
   Round 12: "What it makes" becomes the dark block, "In your style" goes light
   (both done by re-pointing tokens inside the section)
   ===================================================================== */
.us-site { --field-3: #1c4536; }

.us-site[data-scheme="midnight"] { --field-3: #1c2027; }

.us-site .makes {
  margin-top: var(--section); padding-block: var(--section); background: var(--field); color: var(--on-field);
  --bg-2: var(--field-2); --card: var(--field-3); --line: var(--field-line);
  --ink: var(--on-field); --ink-2: var(--on-field-2); --ink-3: var(--on-field-3);
  --btn: var(--on-field); --btn-ink: var(--field); --btn-hover: #ffffff;
  --accent: var(--accent-bright); --accent-soft: rgba(98, 211, 148, .14);
  --shadow-post: 0 14px 30px -14px rgba(0, 0, 0, .6);
  --shadow-card: 0 24px 48px -24px rgba(0, 0, 0, .55);
}
.us-site[data-scheme="midnight"] .makes { box-shadow: inset 0 1px 0 var(--field-line), inset 0 -1px 0 var(--field-line); }
.us-site .makes .label::before { background: var(--accent-bright); }
.us-site .makes .raw-img { box-shadow: none; }

.us-site .style {
  margin-top: 0; padding-block: var(--section) 0; background: var(--bg); color: var(--ink); box-shadow: none !important;
  --field: var(--bg); --field-2: var(--bg-2); --field-line: var(--line);
  --on-field: var(--ink); --on-field-2: var(--ink-2); --on-field-3: var(--ink-3);
  --accent-bright: var(--accent);
}
.us-site .style .kit-type b { color: var(--ink); }
.us-site .style .kit-logo img { filter: brightness(0); }
.us-site[data-scheme="midnight"] .style .kit-logo img { filter: brightness(0) invert(1); }
.us-site .style .kit-voice .chips span, .us-site .style .kit-avoid span { background: var(--card); }
.us-site .style .kit-avoid span { text-decoration-color: var(--ink-3); }
.us-site .style .kit-sw span i { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.us-site .style .tab i { box-shadow: 0 0 0 1px var(--line); }
.us-site .style .tab[aria-selected="true"] i { box-shadow: none; }
.us-site .style .made-for .post { box-shadow: var(--shadow-post); }

/* where it posts: keep the post card's contents inside the card at small widths, even out the icon labels */
.us-site .dsrc { grid-template-columns: minmax(0, 1fr); width: clamp(210px, 18vw, 230px); }
.us-site .dsrc > * { min-width: 0; }
.us-site .app { align-content: start; }
@media (max-width: 640px) {
  .us-site .dsrc { width: min(240px, 72%); }
  .us-site .app > span:last-child { display: none; }
  .us-site .app b { font-size: 13.5px; }
  .us-site .dock { row-gap: 22px; }
}

/* =====================================================================
   What it makes, small screens: one fixed-size stage for every tab
   (all panels share one grid cell, so the box is as tall as the tallest
   tab and never jumps), and post rows you can swipe instead of trimming.
   ===================================================================== */
@media (max-width: 980px) {
  .us-site .mk-stage { display: grid; height: auto; min-height: 0; }
  .us-site .mk-panel { position: relative; inset: auto; grid-area: 1 / 1; display: grid !important; padding: 22px 16px; }
  .us-site .mk-posts, .us-site .mk-memes {
    display: flex !important; justify-self: stretch; width: calc(100% + 32px); margin-inline: -16px; padding: 6px 16px 12px;
    gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; align-items: flex-start;
    -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent);
  }
  .us-site .mk-posts::-webkit-scrollbar, .us-site .mk-memes::-webkit-scrollbar, .us-site .cap-list::-webkit-scrollbar { display: none; }
  .us-site .mk-posts figure, .us-site .mk-memes figure { display: grid !important; flex: none; width: clamp(150px, 38vw, 210px); scroll-snap-align: start; }
  .us-site .mk-posts figure.lift, .us-site .mk-memes figure.lift { transform: none; }
  .us-site .mk-panel.on .mk-posts figure.lift, .us-site .mk-panel.on .mk-memes figure.lift { animation-name: us-rise-in !important; }
  .us-site .mk-posts::after, .us-site .mk-memes::after { content: ""; flex: none; width: 4px; }
}
@media (max-width: 640px) {
  .us-site .mk-products { gap: 12px; }
  .us-site .raw-img { width: 64px; }
  .us-site .hero-shot { max-width: 200px; }
  .us-site .mk-captions { gap: 14px; }
  .us-site .mk-captions > .post { max-width: 150px; }
  .us-site .cap-list { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .us-site .cap { display: grid !important; flex: none; width: 78%; scroll-snap-align: start; }
  .us-site .thread.small { display: none; }
  .us-site .msg p, .us-site .draft p { font-size: 14.5px; }
  .us-site .mk-create { gap: 14px; }
  .us-site .result { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 14px; max-width: none; justify-self: stretch; }
  .us-site .result figcaption { text-align: left; }
  .us-site .soon-art { width: 120px; }
  .us-site .soon-copy b { font-size: 22px; }
  .us-site .mk-memes .meme.tweet p { font-size: 15px; }
}
@media (max-width: 640px) {
  .us-site .mk-replies .thread:nth-child(2) { display: none; }
  .us-site .prompt { min-height: 72px; font-size: 15.5px; }
  .us-site .composer { padding: 14px; gap: 10px; }
  .us-site .result { grid-template-columns: 92px minmax(0, 1fr); }
  .us-site .mk-captions > .post { max-width: 120px; }
  .us-site .hero-shot { max-width: 170px; }
  .us-site .soon-art, .us-site .soon-art.ad { width: 110px; aspect-ratio: 4 / 5; }
  .us-site .soon-copy p { font-size: 15.5px; }
  .us-site .mk-posts figure, .us-site .mk-memes figure { width: clamp(160px, 46vw, 220px); }
}

/* ---------- phone menu ---------- */
.us-site .menu-btn { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); place-items: center; align-content: center; gap: 5px; padding: 0; }
.us-site .menu-btn span { display: block; width: 18px; height: 1.8px; border-radius: 2px; background: var(--ink); transition: transform .25s var(--ease); }
.us-site .nav.menu-open .menu-btn span:first-child { transform: translateY(3.4px) rotate(45deg); }
.us-site .nav.menu-open .menu-btn span:last-child { transform: translateY(-3.4px) rotate(-45deg); }
.us-site .m-menu { border-top: 1px solid var(--line); background: var(--bg); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .3); }
.us-site .m-menu nav { display: grid; padding-block: 8px 18px; }
.us-site .m-menu a { padding: 15px 2px; border-bottom: 1px solid var(--line); font: 600 19px/1.2 var(--sans); letter-spacing: -.01em; }
.us-site .m-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 2px 2px; font: 500 15px/1 var(--sans); color: var(--ink-2); }
.us-site .nav.menu-open { border-bottom-color: var(--line); }
@media (max-width: 980px) {
  .us-site .menu-btn { display: grid; }
  .us-site .nav-cta .theme-btn, .us-site .nav-cta .login { display: none; }
  .us-site .nav-cta { gap: 10px; }
}

/* ---------- book a demo ---------- */
.us-site .demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 6vw, 96px); align-items: start; padding-block: clamp(48px, 7vw, 96px) 0; }
.us-site .demo-copy { display: grid; gap: 20px; align-content: start; }
.us-site .demo-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.us-site .demo-list li { display: grid; gap: 4px; padding: 16px 0 16px 34px; border-bottom: 1px solid var(--line); position: relative; }
.us-site .demo-list li::before { content: ""; position: absolute; left: 0; top: 18px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='%232f9461' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.us-site .demo-list b { font: 600 17px/1.3 var(--sans); }
.us-site .demo-list span { font: 400 15.5px/1.45 var(--sans); color: var(--ink-2); }
.us-site .demo-note { font: italic 400 17px/1.45 var(--serif); color: var(--ink-2); }
.us-site .demo-card { position: sticky; top: 96px; border-radius: 26px; background: var(--card); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); padding: clamp(22px, 3vw, 32px); display: grid; gap: 18px; }
.us-site .demo-step { display: grid; gap: 14px; }
.us-site .demo-step[hidden] { display: none; }
.us-site .demo-card h2 { font: 650 26px/1.1 var(--sans); letter-spacing: -.03em; }
.us-site .demo-sub { font: 500 15px/1.4 var(--sans); color: var(--ink-3); margin-top: -6px; }
.us-site .demo-card label { display: grid; gap: 7px; font: 600 14px/1.2 var(--sans); }
.us-site .demo-card label small { font-weight: 500; color: var(--ink-3); margin-left: 6px; }
.us-site .demo-card input, .us-site .demo-card textarea { width: 100%; padding: 13px 14px; border: 0; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font: 500 16px/1.3 var(--sans); color: var(--ink); outline: 0; resize: vertical; }
.us-site .demo-card input:focus, .us-site .demo-card textarea:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.us-site .demo-card .btn { height: 52px; font-size: 16px; margin-top: 4px; }
.us-site .demo-card .btn:disabled { opacity: .35; cursor: default; }
.us-site .demo-back { justify-self: start; border: 0; background: transparent; padding: 0; font: 600 14px/1 var(--sans); color: var(--ink-2); cursor: pointer; }
.us-site .demo-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.us-site .demo-days button, .us-site .demo-slots button { border: 0; cursor: pointer; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 500 14px/1.2 var(--sans); }
.us-site .demo-days button { display: grid; gap: 3px; padding: 10px 4px; }
.us-site .demo-days button span { font-size: 12.5px; color: var(--ink-3); }
.us-site .demo-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-height: 92px; align-content: start; }
.us-site .demo-slots button { height: 42px; font-weight: 600; }
.us-site .demo-days button[aria-pressed="true"], .us-site .demo-slots button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); box-shadow: none; }
.us-site .demo-days button[aria-pressed="true"] span { color: inherit; opacity: .7; }
.us-site .demo-hint { grid-column: 1 / -1; font: italic 400 15px/1.4 var(--serif); color: var(--ink-3); }
.us-site .demo-done { justify-items: start; }
.us-site .demo-done p:not(.demo-sub) { font-size: 16px; color: var(--ink-2); }
.us-site .demo-tick { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='%232f9461' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat; }
.us-site .demo-foot { padding-top: 14px; border-top: 1px solid var(--line); font: italic 400 15px/1.3 var(--serif); color: var(--ink-3); text-align: center; }
@media (max-width: 860px) {
  .us-site .demo { grid-template-columns: minmax(0, 1fr); }
  .us-site .demo-card { position: static; }
}
.us-site .nav .m-menu .wrap { display: grid; height: auto; gap: 0; align-items: stretch; }
.us-site .menu-btn { position: relative; display: none; }
.us-site .menu-btn span { position: absolute; left: 13px; width: 18px; }
.us-site .menu-btn span:first-child { top: 18px; } .us-site .menu-btn span:last-child { top: 24px; }
.us-site .nav.menu-open .menu-btn span:first-child { transform: translateY(3px) rotate(45deg); }
.us-site .nav.menu-open .menu-btn span:last-child { transform: translateY(-3px) rotate(-45deg); }
@media (max-width: 980px) { .us-site .menu-btn { display: block; } }
@media (max-width: 860px) {
  .us-site .demo { gap: 18px; }
  .us-site .demo-copy { display: contents; }
  .us-site .demo-copy > .label { order: 1; } .us-site .demo-copy > h1 { order: 2; } .us-site .demo-copy > .sub { order: 3; }
  .us-site .demo-card { order: 4; margin-block: 10px 24px; }
  .us-site .demo-list { order: 5; } .us-site .demo-note { order: 6; }
}
/* segmented control (menu appearance switch) */
.us-site .seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.us-site .seg button { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 14px/1 var(--sans); cursor: pointer; transition: background .2s, color .2s; }
.us-site .seg button[aria-checked="true"] { background: var(--btn); color: var(--btn-ink); }

/* =====================================================================
   "Ember" preview scheme: the same system as Evergreen, in a deep burnt
   orange, with the logo in its original brand orange (this scheme only).
   ===================================================================== */
.us-site[data-scheme="ember"] {
  --bg: #ffffff;
  --bg-2: #fbf5f1;
  --card: #ffffff;
  --ink: #18110d;
  --ink-2: #574a43;
  --ink-3: #998b83;
  --line: #efe4dd;
  --btn: #18110d;
  --btn-ink: #ffffff;
  --btn-hover: #35261e;
  --field: #43190b;
  --field-2: #521f0f;
  --field-3: #5e2614;
  --field-line: #713522;
  --on-field: #fff3ec;
  --on-field-2: #f0c6b2;
  --on-field-3: #c4917a;
  --accent: #d9481c;
  --accent-soft: #fde8de;
  --accent-bright: #ff8a5c;
  --glow-1: rgba(237, 81, 40, .16);
  --glow-2: rgba(255, 176, 128, .16);
  --shadow-card: 0 1px 0 rgba(24, 17, 13, .03), 0 24px 48px -24px rgba(24, 17, 13, .22), 0 2px 8px -2px rgba(24, 17, 13, .06);
  --shadow-post: 0 1px 2px rgba(24, 17, 13, .08), 0 12px 26px -14px rgba(24, 17, 13, .28);
  --eye: #ffffff;
  --logo: #ed5128;
  color-scheme: light;
}
.us-site[data-scheme="ember"] .makes { --accent-soft: rgba(255, 138, 92, .16); }
.us-site[data-scheme="ember"] .logo svg, .us-site[data-scheme="ember"] .footer .logo svg { color: var(--logo); }
.us-site[data-scheme="ember"] .logo svg .eyes, .us-site[data-scheme="ember"] .footer .logo svg .eyes { fill: #ffffff; }
.us-site[data-scheme="ember"] .u-av { background: var(--logo); color: #fff; }
.us-site[data-scheme="ember"] .u-av svg .eyes { fill: var(--logo); }
.us-site[data-scheme="ember"] .footer .site-field .btn { background: var(--field); }
/* ticks and arrows drawn as images: recolour them for this scheme */
.us-site[data-scheme="ember"] .tick, .us-site[data-scheme="ember"] .plan li::before, .us-site[data-scheme="ember"] .demo-list li::before, .us-site[data-scheme="ember"] .pages li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='%23d9481c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.us-site[data-scheme="ember"] .demo-tick { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='%23d9481c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.us-site[data-scheme="ember"] .ico::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='%232b0f06' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.us-site[data-scheme="ember"] .pane + .pane::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8M9 5l3 3-3 3' fill='none' stroke='%23d9481c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* =====================================================================
   Round 15: review hero posts in their Instagram frame; a faster, mixed week
   ===================================================================== */
.us-site .deck { padding: 26px 20px 30px; }
.us-site .deck > .ig { grid-area: 1 / 1; width: min(288px, 76%); background: #fff; color: #0f1419; border-radius: 14px; overflow: hidden; font-family: var(--sans);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 22px 44px -20px rgba(0, 0, 0, .38); transition: transform .65s cubic-bezier(.2, .8, .2, 1), opacity .45s var(--ease); }
.us-site .ig.p0 { z-index: 3; }
/* cards waiting underneath stay blank frames, so no slice of the next post peeks out; it shows as it moves up */
.us-site .ig .ig-m > .ly { transition: filter .4s var(--ease), opacity .45s var(--ease) .15s; }
.us-site .ig.p1 .ig-m > .ly, .us-site .ig.p2 .ig-m > .ly, .us-site .ig.enter .ig-m > .ly { opacity: 0; transition: none; }
.us-site .ig.p1 { z-index: 2; transform: translate(16px, 10px) rotate(3.5deg) scale(.95); }
.us-site .ig.p2 { z-index: 1; transform: translate(-16px, 14px) rotate(-4deg) scale(.9); }
.us-site .ig.out-r { z-index: 4; transform: translate(125%, -4%) rotate(12deg); opacity: 0; }
.us-site .ig.out-l { z-index: 4; transform: translate(-125%, -4%) rotate(-12deg); opacity: 0; }
.us-site .ig.enter { transition: none; opacity: 0; transform: translate(-16px, 14px) rotate(-4deg) scale(.84); }
.us-site .ig-h { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.us-site .ig-av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--c); color: #fff; font: 700 11.5px/1 var(--sans); box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.6px #d6d6d6; }
.us-site .ig-id { display: grid; gap: 2px; min-width: 0; }
.us-site .ig-id b { font: 650 12.5px/1.1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-site .ig-id small { font: 400 11px/1.1 var(--sans); color: #6a6e74; }
.us-site .ig-more { margin-left: auto; display: flex; gap: 2.5px; padding: 4px; }
.us-site .ig-more i { width: 3px; height: 3px; border-radius: 50%; background: #0f1419; }
.us-site .ig-m { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #ece9e3; container-type: inline-size; }
.us-site .ly { position: absolute; inset: 0; transition: filter .4s var(--ease); }
.us-site .ly .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.us-site .ly .ph.low { object-position: 50% 100%; }
.us-site .ly.next { opacity: 0; filter: blur(14px) saturate(.85); transform: scale(1.03); transition: none; }
.us-site .ly.next.in { opacity: 1; filter: none; transform: none; transition: opacity .7s var(--ease), filter .9s var(--ease), transform 1s var(--ease); }
.us-site .ig.busy .ly:first-child { filter: blur(3px) saturate(.75) brightness(1.04); }
.us-site .ig-m::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .42) 50%, transparent 65%) 0 0 / 260% 100% no-repeat; }
.us-site .ig.busy .ig-m::after { opacity: 1; animation: us-shimmer 1.3s linear infinite; }
@keyframes us-shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.us-site .ig-edit { position: absolute; left: 0; top: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: rgba(10, 12, 15, .78); color: #fff; font: 600 12px/1 var(--sans); opacity: 0; transition: opacity .25s; right: 0; margin-inline: auto; width: max-content; }
.us-site .ig-edit::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); animation: us-pulse 1s ease-in-out infinite; }
.us-site .ig.busy .ig-edit { opacity: 1; }
.us-site .ig-track { display: flex; height: 100%; transition: transform .45s cubic-bezier(.3, .7, .2, 1); }
.us-site .ig-track img { flex: none; width: 100%; height: 100%; object-fit: cover; }
.us-site .ig-count { position: absolute; right: 9px; top: 9px; z-index: 4; padding: 4px 8px; border-radius: 999px; background: rgba(15, 20, 25, .72); color: #fff; font: 600 11px/1 var(--sans); opacity: 0; transition: opacity .3s; }
.us-site .ig.multi .ig-count { opacity: 1; }
.us-site .stk { position: absolute; right: 7cqw; bottom: 8cqw; z-index: 2; width: 25cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; background: #f6c42f; color: #7d1d12;
  font: 800 8.4cqw/.9 var(--sans); letter-spacing: -.03em; transform: rotate(-10deg) scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45); }
.us-site .stk small { font: 700 4.2cqw/1 var(--sans); letter-spacing: 0; }
.us-site .ly.on .stk { transform: rotate(-10deg) scale(1); }
.us-site .ig-stamp { position: absolute; left: 0; bottom: 12px; z-index: 5; width: max-content; max-width: 90%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--accent); color: #fff; font: 600 12.5px/1.2 var(--sans); text-align: center; opacity: 0; transform: scale(.9); transition: opacity .25s var(--ease), transform .35s var(--ease); right: 0; margin-inline: auto; }
.us-site .ig-stamp svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.us-site .ig.stamped .ig-stamp { opacity: 1; transform: none; }
.us-site .ig.skipped .ig-stamp { background: #0f1419; }
.us-site .ig-a { position: relative; display: flex; align-items: center; gap: 13px; padding: 9px 11px 11px; }
.us-site .ig-a svg { width: 20px; height: 20px; fill: none; stroke: #0f1419; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.us-site .ig-save { margin-left: auto; display: flex; }
.us-site .ig-dots { position: absolute; left: 0; display: none; gap: 4px; right: 0; margin-inline: auto; width: max-content; }
.us-site .ig-dots i { width: 5px; height: 5px; border-radius: 50%; background: #c9c9c9; transition: background-color .2s; }
.us-site .ig-dots i.on { background: #0095f6; }
.us-site .ig.multi .ig-dots { display: flex; }
.us-site .rv-panel .rv-meta, .us-site .rv-panel .rv-cap, .us-site .rv-panel .why { transition: opacity .25s var(--ease); }
.us-site .rv-panel.fade .rv-meta, .us-site .rv-panel.fade .rv-cap, .us-site .rv-panel.fade .why { opacity: 0; }
.us-site .actions .btn svg { width: 15px; height: 15px; margin-left: -3px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 980px) { .us-site .deck > .ig { width: min(250px, 66%); } }
@media (max-width: 640px) { .us-site .deck > .ig { width: min(226px, 66%); } .us-site .ig-stamp { font-size: 11.5px; padding: 7px 10px; } }
@media (prefers-reduced-motion: reduce) { .us-site .deck > .ig, .us-site .ly, .us-site .stk, .us-site .ig-track { transition: none !important; } }

/* Round 17: Greenr's kit keeps its own logo colours */
.us-site .style .kit-logo img.keep { filter: none; height: 40px; }
.us-site[data-scheme="midnight"] .style .kit-logo img.keep { filter: none; background: #e8eed8; padding: 5px 9px; border-radius: 8px; box-sizing: content-box; }

/* review hero: the florist post, designed in code so an edit can swap just the photo in the arch */
.us-site .flp { position: absolute; inset: 0; background: #f2eadf; display: grid; justify-items: center; align-content: start; gap: 2.6cqw; padding: 8cqw 10cqw 0; text-align: center; color: #5e1a26; }
.us-site .flp b { font: 500 11.5cqw/1 var(--serif); letter-spacing: -.025em; }
.us-site .flp .arch { width: 70cqw; aspect-ratio: 1 / 1.2; border-radius: 35cqw 35cqw 1.6cqw 1.6cqw; overflow: hidden; }
.us-site .flp .arch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.us-site .flp span { font: 500 3.5cqw/1.3 var(--sans); color: #4a3a33; }
.us-site .flp small { font: 700 2.7cqw/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8d6f62; }

/* =====================================================================
   Round 20: Integrations menu in the nav; pricing shows the first-month deal first
   ===================================================================== */
.us-site .pi.gads { --i: url(/site/img/icons/googleads.svg); } .us-site .pi.shop { --i: url(/site/img/icons/shopify.svg); } .us-site .pi.wa { --i: url(/site/img/icons/whatsapp.svg); }
.us-site .pi.imsg { --i: url(/site/img/icons/imessage.svg); } .us-site .pi.msgr { --i: url(/site/img/icons/messenger.svg); } .us-site .pi.snap { --i: url(/site/img/icons/snapchat.svg); } .us-site .pi.goog { --i: url(/site/img/icons/google.svg); }
.us-site .dd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.us-site .dd-btn:hover, .us-site .dd-btn[aria-expanded="true"] { color: var(--ink); }
.us-site .dd-btn svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.us-site .dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.us-site .mega { position: absolute; left: 0; right: 0; top: 100%; padding: 8px 16px 0; }
.us-site .mega-in { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: hidden; border-radius: 22px;
  background: color-mix(in srgb, var(--card) 96%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(30px); backdrop-filter: saturate(1.6) blur(30px);
  box-shadow: 0 0 0 1px var(--line), 0 30px 70px -30px rgba(0, 0, 0, .35); animation: us-mega-in .22s var(--ease) both; }
@keyframes us-mega-in { from { opacity: 0; transform: translateY(-6px) scale(.99); } }
.us-site .mlive { display: grid; gap: 14px; align-content: start; padding: 24px 26px 22px; }
.us-site .msoon { display: grid; gap: 14px; align-content: start; padding: 24px 24px 22px; background: color-mix(in srgb, var(--bg-2) 80%, transparent); box-shadow: inset 1px 0 0 var(--line); }
.us-site .mk { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--sans); color: var(--ink-2); }
.us-site .mk i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.us-site .mk.soon i { background: var(--ink-3); box-shadow: 0 0 0 4px var(--line); }
.us-site .mh { font: 650 19px/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.us-site .mtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; }
.us-site .mt { display: grid; justify-items: center; gap: 7px; padding: 6px 0; border-radius: 14px; font: 500 12.5px/1 var(--sans); color: var(--ink-2); transition: background .2s; }
.us-site .mt:hover { background: var(--bg-2); color: var(--ink); }
.us-site .mt .ico { width: 46px; border-radius: 13px; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.us-site .mt .ico::after { display: none; }
.us-site .mt:hover .ico { transform: translateY(-2px); }
.us-site .minbox { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); font: 500 13.5px/1.35 var(--sans); color: var(--ink-2); }
.us-site .minbox b { color: var(--ink); font-weight: 650; margin-right: 4px; }
.us-site .minbox .mi3 { display: inline-flex; gap: 5px; color: var(--ink-2); flex: none; } .us-site .minbox .mi3 .pi { width: 15px; height: 15px; }
.us-site .minbox .arr { margin-left: auto; color: var(--ink-3); transition: transform .2s var(--ease); } .us-site .minbox:hover .arr { transform: translateX(3px); color: var(--ink); }
.us-site .mchips { display: flex; flex-wrap: wrap; gap: 8px; }
.us-site .mchip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font: 500 13px/1 var(--sans); color: var(--ink-2); }
.us-site .mchip .pi { width: 14px; height: 14px; color: var(--ink-3); }
.us-site .mnote { margin-top: auto; font: 500 13px/1.4 var(--sans); color: var(--ink-3); }
.us-site .mnote a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 980px) { .us-site .mega { display: none; } }

.us-site .deal { display: flex; align-items: center; gap: 10px; margin-bottom: -4px; }
.us-site .deal s { font: 600 22px/1 var(--sans); letter-spacing: -.02em; color: var(--ink-3); text-decoration-thickness: 2px; text-decoration-color: currentColor; }
.us-site .deal span { padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 650 12.5px/1 var(--sans); }
.us-site .plan .price span { font: 500 16px/1 var(--sans); color: var(--ink-2); }
.us-site .then { font: 500 14px/1.35 var(--sans); color: var(--ink-3); margin-top: -6px; }
.us-site .plan li b { font-weight: 650; }
.us-site .plan li { display: block; position: relative; padding-left: 26px; }
.us-site .plan li::before { position: absolute; left: 0; top: .1em; }
.us-site .mini-pl { display: inline-flex; gap: 5px; margin-left: 2px; color: var(--ink-3); }
.us-site .mini-pl .pi { width: 13px; height: 13px; }

/* =====================================================================
   Round 21: glassier nav, safe-area cover on phones, orange as the default, dark mode keeps the tint
   ===================================================================== */
.us-site .nav { background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); transition: background-color .3s, box-shadow .3s, border-color .3s; }
.us-site .nav.scrolled { background: color-mix(in srgb, var(--bg) 56%, transparent); border-bottom-color: transparent;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent), 0 12px 32px -20px rgba(0, 0, 0, .28); }
/* the nav starts at the very top of the screen and reaches up through the safe area (notch, or an app's own header
   floating over the page), with its contents kept below it, so nothing can scroll through above the bar */
.us-site { --sat: env(safe-area-inset-top, 0px); }
.us-site .nav { top: 0; padding-top: var(--sat); margin-top: calc(-1 * var(--sat)); }
.us-site .m-theme .seg button { display: inline-grid; place-items: center; min-width: 52px; }
.us-site .m-theme .seg svg { width: 16px; height: 16px; }
.us-site[data-scheme="midnight"][data-tint="ember"] { --accent: #ff8a5c; --accent-soft: rgba(255, 138, 92, .14); --accent-bright: #ff9b70; --glow-1: rgba(237, 81, 40, .18); --logo: #ed5128; }
.us-site[data-scheme="midnight"][data-tint="ember"] .logo svg { color: var(--logo); }
.us-site[data-scheme="midnight"][data-tint="ember"] .logo svg .eyes { fill: #ffffff; }
.us-site[data-scheme="midnight"][data-tint="ember"] .u-av { background: var(--logo); color: #fff; }
.us-site[data-scheme="midnight"][data-tint="ember"] .u-av svg .eyes { fill: var(--logo); }
.us-site[data-scheme="midnight"][data-tint="ember"] .tick, .us-site[data-scheme="midnight"][data-tint="ember"] .plan li::before, .us-site[data-scheme="midnight"][data-tint="ember"] .demo-list li::before, .us-site[data-scheme="midnight"][data-tint="ember"] .pages li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='%23ff8a5c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.us-site[data-scheme="midnight"][data-tint="ember"] .ico::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='%232b0f06' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* blog sign-up: the form takes its own full row on phones so it never pushes the page sideways */
.us-site .bl-signup > div { min-width: 0; }
@media (max-width: 640px) { .us-site .bl-form { flex: 1 1 100%; max-width: 100%; } .us-site .bl-form .btn { padding: 0 16px; } }
.us-site .wm.belief { font: italic 500 21px/1 var(--serif); letter-spacing: .01em; }

/* =====================================================================
   Round 22: hero background. A faint grid that fills in: post tiles (Feed) or calendar dots (Calendar).
   The centre stays clear behind the headline; it fades out towards the stage.
   ===================================================================== */
.us-site .hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: none; --ox: 0px; --grid: color-mix(in srgb, var(--ink) 8%, transparent);
  -webkit-mask: radial-gradient(ellipse 54% 46% at 50% 34%, transparent 56%, #000 92%), linear-gradient(#000 52%, transparent 92%); -webkit-mask-composite: source-in;
  mask: radial-gradient(ellipse 54% 46% at 50% 34%, transparent 56%, #000 92%) intersect, linear-gradient(#000 52%, transparent 92%); }
.us-site[data-bg="feed"] .hero-bg { display: block; }
.us-site .hero-bg::before { content: ""; position: absolute; inset: 0; background: var(--grid); }
.us-site[data-bg="feed"] .hero-bg::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='106' height='130'%3E%3Crect x='5' y='5' width='96' height='120' rx='11' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") var(--ox) 0 / var(--cw, 106px) var(--ch, 130px) repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='106' height='130'%3E%3Crect x='5' y='5' width='96' height='120' rx='11' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") var(--ox) 0 / var(--cw, 106px) var(--ch, 130px) repeat; }

.us-site .hb-tile { position: absolute; width: 96px; height: 120px; margin: 5px; border-radius: 11px; animation: us-hb-tile 6.8s var(--ease) both; }
.us-site .hb-tile.peach { background: #fbd6c4; } .us-site .hb-tile.sage { background: #d6e3ca; } .us-site .hb-tile.butter { background: #f7e6a9; }
.us-site .hb-tile.blush { background: #f3cad7; } .us-site .hb-tile.sky { background: #cfe0f3; }
.us-site .hb-tile.post { background: center / cover no-repeat var(--img); }
.us-site .hb-tile.post { animation-name: us-hb-post; }
@keyframes us-hb-post { 0% { opacity: 0; transform: scale(.94); } 18% { opacity: .42; transform: none; } 72% { opacity: .42; } 100% { opacity: 0; } } .us-site .hb-tile.accent { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }
@keyframes us-hb-tile { 0% { opacity: 0; transform: scale(.94); } 18% { opacity: .9; transform: none; } 72% { opacity: .9; } 100% { opacity: 0; } }

.us-site .hb-tile.still { animation: none; opacity: .7; }
.us-site[data-scheme="midnight"] .hb-tile { opacity: .9; }
.us-site[data-scheme="midnight"] .hb-tile.peach { background: rgba(255, 138, 92, .10); } .us-site[data-scheme="midnight"] .hb-tile.sage { background: rgba(150, 190, 140, .09); }
.us-site[data-scheme="midnight"] .hb-tile.butter { background: rgba(240, 210, 120, .08); } .us-site[data-scheme="midnight"] .hb-tile.blush { background: rgba(240, 150, 180, .09); }
.us-site[data-scheme="midnight"] .hb-tile.sky { background: rgba(130, 170, 230, .09); }
/* phones: the headline spans the width, so the grid lines run faint behind the words (tiles keep their own soft strength) */
@media (max-width: 640px) {
  .us-site .hero-bg { -webkit-mask: linear-gradient(#000 calc(var(--cb, 400px) + 20px), transparent calc(var(--cb, 400px) + 220px)); mask: linear-gradient(#000 calc(var(--cb, 400px) + 20px), transparent calc(var(--cb, 400px) + 220px)); }
  .us-site .hero-bg::before { --band: linear-gradient(#000, #000 calc(var(--ct, 40px) - 14px), rgba(0, 0, 0, .3) var(--ct, 40px), rgba(0, 0, 0, .3) var(--cb, 400px), #000 calc(var(--cb, 400px) + 20px)); }
  .us-site[data-bg="feed"] .hero-bg::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='106' height='130'%3E%3Crect x='5' y='5' width='96' height='120' rx='11' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") var(--ox) 0 / var(--cw, 106px) var(--ch, 130px) repeat, var(--band); -webkit-mask-composite: source-in;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='106' height='130'%3E%3Crect x='5' y='5' width='96' height='120' rx='11' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") var(--ox) 0 / var(--cw, 106px) var(--ch, 130px) repeat intersect, var(--band); }
  
  .us-site .hb-tile { border-radius: 9px; }
}

/* footer: Unstudio's own accounts */
.us-site .foot-social { display: flex; gap: 8px; margin-top: 16px; }
.us-site .foot-social a { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--on-field); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-field) 22%, transparent); transition: color .2s, background-color .2s; }
.us-site .foot-social a:hover { color: var(--on-field); background: var(--field-2); }
.us-site .foot-social .pi { width: 16px; height: 16px; }
.us-site .hb-tile.soft { animation-name: us-hb-soft; }
@keyframes us-hb-soft { 0% { opacity: 0; transform: scale(.94); } 18% { opacity: .4; transform: none; } 72% { opacity: .4; } 100% { opacity: 0; } }

/* plan lists: what a plan doesn't include gets a muted cross */
.us-site .plan li.no { color: var(--ink-3); }
.us-site[data-scheme] .plan li.no::before, .us-site[data-scheme][data-tint] .plan li.no::before { background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 4l4 4M8 4 4 8' fill='none' stroke='%23a39890' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.us-site .hb-tile.post.soft { animation-name: us-hb-post-soft; }
@keyframes us-hb-post-soft { 0% { opacity: 0; transform: scale(.94); } 18% { opacity: .2; transform: none; } 72% { opacity: .2; } 100% { opacity: 0; } }

/* hero background options: Swatches and Notes (no grid, no centre mask) */

/* manifesto: plain text (Aseem, 12 Oct) */
.us-site .mf-plain { max-width: 680px; padding-block: clamp(48px, 7vw, 96px) clamp(72px, 9vw, 120px); }
.us-site .mf-plain-h { margin-bottom: clamp(36px, 5vw, 56px); }
.us-site .mf-plain h1 { font: 650 clamp(34px, 4.4vw, 48px)/1.08 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
.us-site .mf-plain .mf-by { margin-top: 12px; font: 500 14.5px/1.4 var(--sans); color: var(--ink-3); }
.us-site .mf-sec { display: grid; gap: 1.05em; font: 400 clamp(17.5px, 1.5vw, 19px)/1.7 var(--sans); color: var(--ink); }
.us-site .mf-sec + .mf-sec { margin-top: 2.2em; }
.us-site .mf-end { margin-top: 2.6em; font: 600 16px/1.4 var(--sans); }
.us-site .mf-end a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.us-site .mf-end a:hover { color: var(--accent); }

/* =====================================================================
   Sign-in page: sign in on the left, the story of what happens next on the right
   ===================================================================== */
.us-site .si { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 68px); min-height: calc(100dvh - 68px); }
.us-site .si-auth { display: grid; place-items: center; padding: clamp(36px, 6vw, 72px) 24px; }
.us-site .si-auth-in { width: min(400px, 100%); display: grid; gap: 14px; }
.us-site .si-h { font: 650 clamp(40px, 4.4vw, 58px)/1 var(--sans); letter-spacing: -.045em; }
.us-site .si-sub { font: 400 17px/1.5 var(--sans); color: var(--ink-2); margin-bottom: 18px; }
.us-site .si-step { display: grid; gap: 14px; }
.us-site .si-step[hidden], .us-site .si-err[hidden] { display: none; }
.us-site .si-google { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border-radius: 13px; border: 1px solid #dadce0; background: #fff; color: #1f1f1f;
  font: 600 15px/1 var(--sans); cursor: pointer; transition: background-color .2s, box-shadow .2s; }
.us-site .si-google:hover { background: #f8f9fa; box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .2); }
.us-site .si-google .g { width: 18px; height: 18px; }
.us-site .si-or { display: flex; align-items: center; gap: 12px; font: 500 12.5px/1 var(--sans); color: var(--ink-3); }
.us-site .si-or::before, .us-site .si-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.us-site .si-form { display: grid; gap: 8px; }
.us-site .si-form label { font: 600 13.5px/1 var(--sans); color: var(--ink); }
.us-site .si-form input { height: 50px; padding: 0 16px; border-radius: 13px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 500 16px/1 var(--sans); outline: 0; transition: border-color .2s, box-shadow .2s; }
.us-site .si-form input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.us-site .si-err { font: 500 13px/1.3 var(--sans); color: var(--accent); }
.us-site .si-go { width: 100%; height: 50px; border-radius: 13px; margin-top: 6px; font-size: 15.5px; }
.us-site .si-sent { display: flex; align-items: center; gap: 12px; font: 400 15.5px/1.45 var(--sans); color: var(--ink-2); }
.us-site .si-sent b { color: var(--ink); font-weight: 600; word-break: break-all; }
.us-site .si-mailicon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.us-site .si-mailicon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.us-site .si-boxes { position: relative; display: block; cursor: text; }
.us-site .si-boxes input { position: absolute; inset: 0; width: 100%; opacity: 0; font-size: 16px; }
.us-site .si-box-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.us-site .si-box-row i { height: 58px; border-radius: 13px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; font: 650 24px/1 var(--sans); font-style: normal; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.us-site .si-box-row i.on { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.us-site .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.us-site .si-links { display: flex; justify-content: center; gap: 8px; font: 500 13.5px/1 var(--sans); color: var(--ink-3); }
.us-site .si-links button { border: 0; background: none; padding: 4px 0; color: var(--ink-2); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.us-site .si-terms { margin-top: 6px; font: 400 12.5px/1.5 var(--sans); color: var(--ink-3); }
.us-site .si-terms a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.us-site .si-new { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font: 500 14.5px/1.4 var(--sans); color: var(--ink-2); }
.us-site .si-new a { color: var(--ink); font-weight: 600; }
.us-site .si-new a:hover { color: var(--accent); }

.us-site .si-show { position: relative; overflow: hidden; display: grid; place-items: center; padding: 48px 32px; background: var(--bg-2); }
.us-site .si-grid { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 7%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='106' height='130'%3E%3Crect x='5' y='5' width='96' height='120' rx='11' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") center / 106px 130px repeat, radial-gradient(ellipse 60% 55% at 50% 50%, transparent 45%, #000 90%); -webkit-mask-composite: source-in;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='106' height='130'%3E%3Crect x='5' y='5' width='96' height='120' rx='11' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") center / 106px 130px repeat intersect, radial-gradient(ellipse 60% 55% at 50% 50%, transparent 45%, #000 90%); }
.us-site .si-show::after { content: ""; position: absolute; left: 50%; bottom: -30%; width: 120%; height: 70%; transform: translateX(-50%); background: radial-gradient(closest-side, var(--glow-1), transparent); pointer-events: none; }
.us-site .si-show-in { position: relative; z-index: 1; width: min(400px, 100%); display: grid; gap: 18px; }
.us-site .si-bars { display: flex; gap: 5px; }
.us-site .si-bars button { flex: 1; height: 4px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; cursor: pointer; }
.us-site .si-bars i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ink); }
.us-site .si-bars .done i { width: 100%; }
.us-site .si-bars .now i { animation: us-si-fill 4.8s linear forwards; }
@keyframes us-si-fill { to { width: 100%; } }
.us-site .si-claim { font: 650 clamp(26px, 2.4vw, 32px)/1.12 var(--sans); letter-spacing: -.035em; min-height: 2.3em; transition: opacity .26s, transform .26s; }
.us-site .si-claim em { font-style: normal; color: var(--accent); }
.us-site .si-stage { min-height: 560px; transition: opacity .26s, transform .26s; }
.us-site .si-claim.out, .us-site .si-stage.out { opacity: 0; transform: translateY(8px); }
.us-site .si-card { background: var(--card); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-card); display: grid; gap: 14px; animation: us-rise-in .5s var(--ease) both; }
.us-site .si-card-h { display: flex; justify-content: space-between; align-items: baseline; }
.us-site .si-card-h b { font: 650 18px/1.2 var(--sans); }
.us-site .si-card-h span { font: 500 13px/1 var(--sans); color: var(--ink-3); }
.us-site .si-note { font: italic 400 15px/1.4 var(--serif); color: var(--ink-2); }
.us-site .si-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.us-site .si-facts li { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 10px; font: 500 14.5px/1.35 var(--sans); padding: 10px 12px; border-radius: 12px; background: var(--bg-2); animation: us-rise-in .45s var(--ease) both; }
.us-site .si-facts li:nth-child(2) { animation-delay: .25s; } .us-site .si-facts li:nth-child(3) { animation-delay: .5s; } .us-site .si-facts li:nth-child(4) { animation-delay: .75s; }
.us-site .si-facts i { font: 600 11.5px/1 var(--sans); font-style: normal; color: var(--accent); }
.us-site .si-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.us-site .si-plan li { display: grid; grid-template-columns: 34px 48px 1fr; align-items: center; gap: 12px; animation: us-rise-in .45s var(--ease) both; }
.us-site .si-plan li:nth-child(2) { animation-delay: .25s; } .us-site .si-plan li:nth-child(3) { animation-delay: .5s; }
.us-site .si-plan small { font: 600 12.5px/1 var(--sans); color: var(--ink-3); }
.us-site .si-plan img { width: 48px; height: 60px; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow-post); }
.us-site .si-plan p { display: grid; gap: 3px; font: 600 14.5px/1.3 var(--sans); }
.us-site .si-plan em { font: italic 400 13.5px/1.3 var(--serif); color: var(--ink-2); }
.us-site .si-ig { width: min(330px, 100%); margin-inline: auto; background: #fff; color: #0f1419; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 26px 50px -24px rgba(0, 0, 0, .4); animation: us-rise-in .5s var(--ease) both; }
.us-site .si-ig-h { display: flex; align-items: center; gap: 8px; padding: 9px 11px; }
.us-site .si-ig-h .av, .us-site .si-msg .av { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--c); color: #fff; font: 700 12px/1 var(--sans); }
.us-site .si-ig-h b { display: block; font: 650 13px/1.1 var(--sans); } .us-site .si-ig-h small { font: 400 11px/1.1 var(--sans); color: #6a6e74; }
.us-site .si-ig-h i { margin-left: auto; font-style: normal; letter-spacing: 1px; }
.us-site .si-ig-m { aspect-ratio: 4 / 5; overflow: hidden; background: #ece9e3; position: relative; }
.us-site .si-ig-m > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.us-site .si-track { display: flex; height: 100%; transition: transform .45s cubic-bezier(.3, .7, .2, 1); }
.us-site .si-track img { flex: none; width: 100%; height: 100%; object-fit: cover; }
.us-site .si-count { position: absolute; right: 10px; top: 10px; padding: 4px 8px; border-radius: 999px; background: rgba(15, 20, 25, .72); color: #fff; font: 600 11px/1 var(--sans); }
.us-site .si-ig-a { display: flex; align-items: center; gap: 13px; padding: 9px 12px 4px; }
.us-site .si-ig-a svg { width: 21px; height: 21px; fill: none; stroke: #0f1419; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.us-site .si-ig-a span { margin-left: auto; display: flex; }
.us-site .si-ig-a-wrap { position: relative; }
.us-site .si-dots { position: absolute; left: 0; top: 18px; display: flex; gap: 4px; right: 0; margin-inline: auto; width: max-content; }
.us-site .si-dots i { width: 5px; height: 5px; border-radius: 50%; background: #c9c9c9; } .us-site .si-dots i.on { background: #0095f6; }
.us-site .si-ig-cap { padding: 4px 12px 13px; font: 400 13px/1.4 var(--sans); }
.us-site .si-ig-cap b { font-weight: 650; margin-right: 4px; }
.us-site .si-dm { gap: 16px; }
.us-site .si-msg { display: flex; gap: 10px; align-items: flex-start; }
.us-site .si-msg b { font: 650 13px/1 var(--sans); }
.us-site .si-msg p { margin-top: 6px; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--bg-2); font: 500 15px/1.4 var(--sans); }
.us-site .si-draft { padding: 16px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent-soft) 60%, var(--card)); display: grid; gap: 8px; animation: us-rise-in .5s var(--ease) .5s both; }
.us-site .si-draft small { font: 650 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.us-site .si-draft p { font: 500 15px/1.45 var(--sans); }
.us-site .si-draft-a { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.us-site .si-draft-a .btn { height: 36px; padding: 0 14px; font-size: 13.5px; }
.us-site .si-close { gap: 16px; padding: 26px 24px; }
.us-site .si-close p { display: flex; align-items: center; gap: 12px; font: 600 16.5px/1.3 var(--sans); animation: us-rise-in .45s var(--ease) both; }
.us-site .si-close p:nth-child(2) { animation-delay: .2s; } .us-site .si-close p:nth-child(3) { animation-delay: .4s; } .us-site .si-close p:nth-child(4) { animation-delay: .6s; }
.us-site .si-close i { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='%23d9481c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; }
@media (max-width: 960px) {
  .us-site .si { grid-template-columns: minmax(0, 1fr); }
  .us-site .si-show { display: none; }
  .us-site .si-auth { align-items: start; padding-top: clamp(40px, 10vw, 72px); }
}
@media (prefers-reduced-motion: reduce) { .us-site .si-bars .now i { animation: none; width: 100%; } .us-site .si-card, .us-site .si-ig, .us-site .si-facts li, .us-site .si-plan li, .us-site .si-draft, .us-site .si-close p { animation: none; } }

/* =====================================================================
   How it works: a page of its own. Six steps, each text + a picture of it done for Greenr, then the extras.
   ===================================================================== */
.us-site .hiw-hero { text-align: left; }
.us-site .hiw-hero h1 { font: 650 clamp(40px, 5.4vw, 72px)/1.02 var(--sans); letter-spacing: -.045em; margin-top: 14px; }
.us-site .hiw-hero .sub { margin-top: 18px; max-width: 40em; }
.us-site .hiw-nav { position: sticky; top: calc(68px + var(--sat, 0px)); z-index: 20; margin-top: clamp(28px, 4vw, 44px); background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px); box-shadow: 0 1px 0 var(--line), 0 -1px 0 var(--line); }
.us-site .hiw-nav .wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 10px; }
.us-site .hiw-nav .wrap::-webkit-scrollbar { display: none; }
.us-site .hiw-nav a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; font: 500 14px/1 var(--sans); color: var(--ink-2); transition: background-color .2s, color .2s; }
.us-site .hiw-nav a b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); font: 650 12px/1 var(--sans); color: var(--ink-2); transition: background-color .2s, color .2s; }
.us-site .hiw-nav a:hover { color: var(--ink); }
.us-site .hiw-nav a.on { background: var(--bg-2); color: var(--ink); }
.us-site .hiw-nav a.on b { background: var(--accent); color: #fff; }
.us-site .hiw-steps { display: grid; gap: clamp(72px, 10vw, 140px); padding-block: clamp(64px, 8vw, 110px) clamp(40px, 6vw, 80px); }
.us-site .hiw-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: center; scroll-margin-top: 140px; }
.us-site .hiw-step.flip .hiw-text { order: 2; }
.us-site .hiw-text { display: grid; gap: 16px; align-content: start; }
.us-site .hiw-num { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--sans); color: var(--accent); }
.us-site .hiw-num b { font-weight: 600; color: var(--ink-3); }
.us-site .hiw-num b::before { content: "·"; margin-right: 10px; color: var(--ink-3); }
.us-site .hiw-text h2 { font: 650 clamp(30px, 3.4vw, 44px)/1.08 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.us-site .hiw-text > p { font: 400 17.5px/1.6 var(--sans); color: var(--ink-2); max-width: 34em; }
.us-site .hiw-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.us-site .hiw-list li { position: relative; padding-left: 28px; font: 500 15.5px/1.4 var(--sans); }
.us-site .hiw-list li::before { content: ""; position: absolute; left: 0; top: .1em; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='%23d9481c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.us-site .hiw-vis { position: relative; display: grid; place-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 28px; background: var(--bg-2); min-height: 420px; }
.us-site .hiw-card { width: min(460px, 100%); background: var(--card); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-card); display: grid; gap: 14px; }
.us-site .hiw-card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.us-site .hiw-card-h b { font: 650 18px/1.2 var(--sans); }
.us-site .hiw-card-h span { font: 500 13px/1 var(--sans); color: var(--ink-3); }
.us-site .hiw-logo { height: 18px; width: auto; }
.us-site[data-scheme="midnight"] .hiw-logo { filter: brightness(0) invert(1); }
.us-site .hiw-dl { margin: 0; display: grid; gap: 0; }
.us-site .hiw-dl > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font: 500 14px/1.4 var(--sans); }
.us-site .hiw-dl dt { color: var(--ink-3); font-weight: 500; }
.us-site .hiw-dl dd { margin: 0; }
.us-site .hiw-dl q { font: italic 400 15px/1.3 var(--serif); color: var(--ink-2); margin-right: 6px; }
.us-site .hiw-sw { display: flex; align-items: center; gap: 5px; }
.us-site .hiw-sw i { width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.us-site .hiw-sw span { margin-left: 6px; color: var(--ink-2); }
.us-site .hiw-src, .us-site .hiw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.us-site .hiw-src span, .us-site .hiw-chips span { padding: 6px 10px; border-radius: 999px; background: var(--bg-2); font: 600 12px/1 var(--sans); color: var(--ink-2); }
.us-site .hiw-src span { background: var(--accent-soft); color: var(--accent); }
.us-site .hiw-k { font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }
.us-site .hiw-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.us-site .hiw-rows li { display: flex; gap: 10px; align-items: center; }
.us-site .hiw-rows .av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--c); color: #fff; font: 700 13px/1 var(--sans); }
.us-site .hiw-rows b { display: block; font: 600 14px/1.25 var(--sans); }
.us-site .hiw-rows small { font: 400 13px/1.3 var(--sans); color: var(--ink-2); }
.us-site .hiw-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.us-site .hiw-dates span { display: grid; gap: 3px; padding: 10px; border-radius: 12px; background: var(--bg-2); font: 500 13px/1.25 var(--sans); }
.us-site .hiw-dates b { font: 650 15px/1 var(--sans); color: var(--accent); }
.us-site .hiw-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.us-site .hiw-cal .dow { font: 600 11px/1 var(--sans); color: var(--ink-3); text-align: center; padding-bottom: 4px; }
.us-site .hiw-cal .hiw-day { min-height: 44px; border-radius: 9px; padding: 6px; background: var(--bg-2); display: grid; align-content: space-between; justify-items: start; }
.us-site .hiw-cal .hiw-day b { font: 600 11px/1 var(--sans); color: var(--ink-3); }
.us-site .hiw-cal .hiw-day i { width: 100%; height: 5px; border-radius: 999px; background: var(--k); }
.us-site .hiw-cal .has b { color: var(--ink); }
.us-site .hiw-cal .use, .us-site .hiw-legend .use { --k: #4f8f6b; } .us-site .hiw-cal .fun, .us-site .hiw-legend .fun { --k: #e0a32e; } .us-site .hiw-cal .com, .us-site .hiw-legend .com { --k: #5b7ec9; } .us-site .hiw-cal .pro, .us-site .hiw-legend .pro { --k: var(--accent); }
.us-site .hiw-cal .sel { background: var(--card); box-shadow: 0 0 0 2px var(--ink); }
.us-site .hiw-legend { display: flex; flex-wrap: wrap; gap: 12px; font: 500 12.5px/1 var(--sans); color: var(--ink-2); }
.us-site .hiw-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--k); }
.us-site .hiw-why { padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); display: grid; gap: 4px; }
.us-site .hiw-why b { font: 650 14px/1.2 var(--sans); }
.us-site .hiw-why p { font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.us-site .hiw-fan { display: flex; justify-content: center; align-items: center; width: 100%; }
.us-site .hiw-fan figure { width: clamp(130px, 14vw, 180px); display: grid; gap: 10px; margin: 0 -14px; }
.us-site .hiw-fan figure:nth-child(1) { transform: rotate(-6deg) translateY(14px); } .us-site .hiw-fan figure:nth-child(2) { position: relative; z-index: 2; transform: scale(1.08); } .us-site .hiw-fan figure:nth-child(3) { transform: rotate(6deg) translateY(14px); }
.us-site .hiw-fan figcaption { display: none; }
.us-site .hiw-vis:has(.hiw-fan) { grid-template-rows: 1fr auto; gap: 26px; }
.us-site .hiw-fan-note { text-align: center; }
.us-site .hiw-approve { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.us-site .hiw-approve img { width: 96px; height: 120px; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow-post); }
.us-site .hiw-approve b { font: 650 17px/1.2 var(--sans); } .us-site .hiw-approve small { display: block; margin-top: 4px; font: 500 13px/1.2 var(--sans); color: var(--ink-3); }
.us-site .hiw-btns { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; } .us-site .hiw-btns .btn { height: 34px; padding: 0 12px; font-size: 13px; }
.us-site .hiw-apps { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.us-site .hiw-apps .ico { width: 100%; border-radius: 26%; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .5); }
.us-site .hiw-apps .ico::after { display: none; }
.us-site .hiw-note { font: italic 400 15px/1.4 var(--serif); color: var(--ink-2); }
.us-site .hiw-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding-top: 8px; border-bottom: 1px solid var(--line); }
.us-site .hiw-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--accent) 30%, var(--bg-2)); }
.us-site .hiw-bars i:nth-last-child(-n+3) { background: var(--accent); }
.us-site .hiw-learned { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.us-site .hiw-learned li { font: 500 14.5px/1.35 var(--sans); padding-left: 16px; position: relative; }
.us-site .hiw-learned li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.us-site .hiw-applied { justify-self: start; padding: 6px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 650 12.5px/1 var(--sans); }
.us-site .hiw-applied::before { content: "✓ "; }
.us-site .hiw-loop { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font: 600 14px/1 var(--sans); color: var(--ink-2); }
.us-site .hiw-loop span { padding: 9px 14px; border-radius: 999px; background: var(--bg-2); }
.us-site .hiw-loop span:not(:last-of-type)::after { content: "→"; margin-left: 12px; color: var(--ink-3); }
.us-site .hiw-loop em { flex-basis: 100%; text-align: center; margin-top: 8px; font: italic 400 17px/1.3 var(--serif); color: var(--ink-2); }
.us-site .hiw-more { padding-block: clamp(40px, 6vw, 80px) clamp(80px, 10vw, 140px); }
.us-site .hiw-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(24px, 3vw, 40px); }
.us-site .hiw-mcard { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 22px; background: var(--bg-2); }
.us-site .hiw-mcard > b { font: 650 19px/1.2 var(--sans); }
.us-site .hiw-mcard > p { font: 400 15px/1.55 var(--sans); color: var(--ink-2); }
.us-site .hiw-mini { margin-top: 8px; padding: 12px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-card); }
.us-site .hiw-compose { display: flex; align-items: center; gap: 10px; font: 500 13.5px/1.35 var(--sans); }
.us-site .hiw-compose .btn { height: 32px; padding: 0 12px; font-size: 13px; font-style: normal; flex: none; }
.us-site .hiw-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; font: 600 13.5px/1 var(--sans); text-align: center; }
.us-site .hiw-toggle span { padding: 10px; border-radius: 999px; color: var(--ink-2); }
.us-site .hiw-toggle .on { background: var(--btn); color: var(--btn-ink); }
.us-site .hiw-dm { display: grid; gap: 8px; }
.us-site .hiw-dm p { justify-self: start; max-width: 85%; padding: 9px 12px; border-radius: 4px 14px 14px 14px; background: var(--bg-2); font: 500 13.5px/1.4 var(--sans); }
.us-site .hiw-dm p.me { justify-self: end; border-radius: 14px 4px 14px 14px; background: var(--accent-soft); outline: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
@media (max-width: 900px) {
  .us-site .hiw-step { grid-template-columns: minmax(0, 1fr); }
  .us-site .hiw-step.flip .hiw-text { order: 0; }
  .us-site .hiw-vis { min-height: 0; }
  .us-site .hiw-more-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .us-site .hiw-cal .hiw-day { min-height: 36px; padding: 4px; }
  .us-site .hiw-apps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .us-site .hiw-dl > div { grid-template-columns: 78px 1fr; }
  .us-site .hiw-fan figure { width: 32vw; }
}

/* how it works: it asks, like a real marketer (one of the defining features) */
.us-site .hiw-ask { background: var(--field); color: var(--on-field); padding-block: clamp(72px, 9vw, 130px); --ink: var(--on-field); --ink-2: var(--on-field-2); --ink-3: var(--on-field-3); }
.us-site .hiw-ask .label { color: var(--on-field-2); }
.us-site .hiw-ask .label::before { background: var(--accent-bright); }
.us-site .hiw-ask .sub { color: var(--on-field-2); }
.us-site .hiw-ask .hiw-list li { color: var(--on-field); }
.us-site .hiw-ask .hiw-list li::before { background-color: rgba(255, 255, 255, .1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='%23ff8a5c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.us-site .hiw-ask-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.us-site .hiw-ask-text { display: grid; gap: 18px; align-content: start; }
.us-site .hiw-ask-vis { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 14px; align-items: start; }
.us-site .hiw-qs { display: grid; gap: 12px; }
.us-site .hiw-q { padding: 16px; border-radius: 18px; background: var(--field-2); box-shadow: inset 0 0 0 1px var(--field-line); display: grid; gap: 10px; }
.us-site .hiw-q .q { font: 500 15px/1.4 var(--sans); color: var(--on-field); }
.us-site .hiw-qc { display: flex; flex-wrap: wrap; gap: 6px; }
.us-site .hiw-qc span { padding: 7px 11px; border-radius: 999px; font: 600 12.5px/1 var(--sans); color: var(--on-field-2); box-shadow: inset 0 0 0 1px var(--field-line); }
.us-site .hiw-qc .pick { background: var(--accent-bright); color: #2b0f06; box-shadow: none; }
.us-site .hiw-qc .typed { background: #fff; color: #18110d; }
.us-site .hiw-q .a { font: italic 400 14.5px/1.4 var(--serif); color: var(--on-field-2); }
.us-site .hiw-q .a::before { content: "✓ "; font-style: normal; color: var(--accent-bright); }
.us-site .hiw-tell { position: sticky; top: 140px; padding: 18px; border-radius: 20px; background: var(--card); color: var(--ink-on-card, #18110d); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); display: grid; gap: 10px; }
.us-site .hiw-tell b { font: 650 16px/1.2 var(--sans); color: #18110d; }
.us-site[data-scheme="midnight"] .hiw-tell b { color: #f3f5f7; }
.us-site .hiw-tell p { max-width: 92%; padding: 10px 13px; font: 500 14px/1.4 var(--sans); }
.us-site .hiw-tell .me { justify-self: end; border-radius: 16px 4px 16px 16px; background: #18110d; color: #fff; }
.us-site .hiw-tell .u { justify-self: start; border-radius: 4px 16px 16px 16px; background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: inherit; }
.us-site[data-scheme="midnight"] .hiw-tell .me { background: #f3f5f7; color: #0a0c0f; }
.us-site .hiw-tell-in { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 6px 6px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font: 500 13.5px/1 var(--sans); color: var(--ink-3); }
.us-site .hiw-tell-in i { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--btn); color: var(--btn-ink); font-style: normal; }
@media (max-width: 1100px) { .us-site .hiw-ask-vis { grid-template-columns: minmax(0, 1fr); } .us-site .hiw-tell { position: static; } }
@media (max-width: 900px) { .us-site .hiw-ask-in { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   Onboarding offer ("Start your month"): their posts next to one clear plan choice, then what happens next
   ===================================================================== */
.us-site .of-body { background: var(--bg); }
.us-site .of-top { position: sticky; top: 0; z-index: 30; padding-top: var(--sat, 0px); margin-top: calc(-1 * var(--sat, 0px)); background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); box-shadow: 0 1px 0 var(--line); }
.us-site .of-top .wrap { display: flex; align-items: center; gap: 24px; height: 64px; }
.us-site .of-back { font: 500 14.5px/1 var(--sans); color: var(--ink-2); }
.us-site .of-back:hover, .us-site .of-talk:hover { color: var(--ink); }
.us-site .of-talk { margin-left: auto; font: 500 14.5px/1 var(--sans); color: var(--ink-2); }
.us-site .of-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-block: clamp(40px, 6vw, 72px) clamp(56px, 7vw, 96px); }
.us-site .of-lead { display: grid; gap: 18px; }
.us-site .of-ready { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 13px/1 var(--sans); }
.us-site .of-ready i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: us-pulse 1.6s ease-in-out infinite; }
.us-site .of-lead h1 { font: 650 clamp(40px, 5vw, 66px)/1.02 var(--sans); letter-spacing: -.045em; }
.us-site .of-sub { font: 400 18px/1.55 var(--sans); color: var(--ink-2); max-width: 34em; }
.us-site .of-posts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
.us-site .of-post { display: grid; gap: 9px; animation: us-rise-in .6s var(--ease) both; }
.us-site .of-post:nth-child(2) { animation-delay: .08s; } .us-site .of-post:nth-child(3) { animation-delay: .16s; } .us-site .of-post:nth-child(4) { animation-delay: .24s; }
.us-site .of-post .post { position: relative; }
.us-site .of-ok { position: absolute; right: 8px; top: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .3); }
.us-site .of-ok svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.us-site .of-post figcaption { display: grid; gap: 2px; font: 500 12.5px/1.25 var(--sans); color: var(--ink-3); }
.us-site .of-post figcaption b { font-weight: 650; color: var(--ink); }
.us-site .of-plats { display: flex; align-items: center; gap: 10px; font: 500 13.5px/1 var(--sans); color: var(--ink-3); }
.us-site .of-plats .pi { width: 17px; height: 17px; color: var(--ink-2); }
.us-site .of-buy { position: sticky; top: calc(84px + var(--sat, 0px)); }
.us-site .of-buy-in { padding: 22px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); display: grid; gap: 14px; }
.us-site .of-buy-h { font: 650 17px/1.2 var(--sans); }
.us-site .of-plans { display: grid; gap: 10px; }
.us-site .of-plan { position: relative; display: grid; gap: 4px; padding: 16px; border-radius: 16px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, background-color .2s; }
.us-site .of-plan input { position: absolute; opacity: 0; pointer-events: none; }
.us-site .of-plan[data-on] { box-shadow: inset 0 0 0 2px var(--ink); background: color-mix(in srgb, var(--accent-soft) 35%, var(--card)); }
.us-site .of-plan:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.us-site .of-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.us-site .of-plan-top b { font: 650 18px/1 var(--sans); }
.us-site .of-plan-top b::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 9px; vertical-align: -2px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.us-site .of-plan[data-on] .of-plan-top b::before { box-shadow: inset 0 0 0 5px var(--ink); }
.us-site .of-deal { display: inline-flex; align-items: center; gap: 7px; }
.us-site .of-deal s { font: 600 15px/1 var(--sans); color: var(--ink-3); text-decoration-thickness: 1.5px; }
.us-site .of-deal em { padding: 4px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 650 11.5px/1 var(--sans); font-style: normal; }
.us-site .of-price { margin-top: 6px; font: 500 14px/1 var(--sans); color: var(--ink-2); }
.us-site .of-price b { font: 650 32px/1 var(--sans); letter-spacing: -.04em; color: var(--ink); margin-right: 4px; }
.us-site .of-then { font: 500 13px/1.3 var(--sans); color: var(--ink-3); }
.us-site .of-plan ul { list-style: none; margin: 8px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); display: grid; gap: 7px; }
.us-site .of-plan li { display: flex; align-items: center; gap: 8px; font: 500 14px/1.3 var(--sans); }
.us-site .of-plan li svg { width: 16px; height: 16px; flex: none; padding: 2px; border-radius: 50%; background: var(--accent-soft); fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.us-site .of-plan li.no { color: var(--ink-3); }
.us-site .of-plan li.no svg { background: var(--bg-2); stroke: var(--ink-3); }
.us-site .of-plan:not([data-on]) ul { display: none; }
.us-site .of-go { width: 100%; height: 54px; border-radius: 15px; font-size: 16.5px; }
.us-site .of-terms { font: 400 13px/1.5 var(--sans); color: var(--ink-3); text-align: center; }
.us-site .of-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; font: 500 12.5px/1 var(--sans); color: var(--ink-3); }
.us-site .of-trust span { display: inline-flex; align-items: center; gap: 6px; }
.us-site .of-trust svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.us-site .of-next, .us-site .of-month, .us-site .of-gets, .us-site .of-quote, .us-site .of-final { padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); }
.us-site .of h2 { font: 650 clamp(28px, 3.2vw, 40px)/1.1 var(--sans); letter-spacing: -.035em; }
.us-site .of-can { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(24px, 3vw, 36px); }
.us-site .of-can article { display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: 14px 14px 22px; border-radius: 22px; background: var(--bg-2); }
.us-site .of-can b { margin-top: 8px; padding-inline: 6px; font: 650 17.5px/1.25 var(--sans); letter-spacing: -.01em; }
.us-site .of-can article > p { padding-inline: 6px; font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); }
.us-site .of-vis { position: relative; height: 150px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line); overflow: hidden; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 16px; }
.us-site .of-vis svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.us-site .of-v-posts { display: block; padding: 0; }
.us-site .of-v-posts img { position: absolute; left: 0; top: 0; height: 118px; width: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .35); right: 0; margin-inline: auto; bottom: 0; margin-block: auto; }
.us-site .of-v-posts img:nth-child(1) { translate: calc(-50% - 74px) -46%; rotate: -7deg; } .us-site .of-v-posts img:nth-child(2) { z-index: 1; } .us-site .of-v-posts img:nth-child(3) { translate: calc(-50% + 74px) -46%; rotate: 7deg; }
.us-site .of-v-btns { display: flex; gap: 10px; }
.us-site .of-v-btns span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: 400 20px/1 var(--sans); }
.us-site .of-v-btns svg { width: 16px; height: 16px; }
.us-site .of-v-btns .on { background: var(--ink); color: var(--bg); box-shadow: none; }
.us-site .of-v-btns .on svg { width: 18px; height: 18px; stroke-width: 1.8; }
.us-site .of-v-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 12.5px/1 var(--sans); white-space: nowrap; }
.us-site .of-v-pill svg { width: 13px; height: 13px; stroke-width: 1.9; }
.us-site .of-v-pill .pi { width: 12px; height: 12px; color: var(--accent); }
.us-site .of-v-pill .pi.ig { margin-left: 2px; }
.us-site .of-v-plan { place-content: center stretch; gap: 6px; padding-inline: 18px; }
.us-site .of-v-plan p { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); font: 600 13px/1 var(--sans); white-space: nowrap; }
.us-site .of-v-plan small { width: 30px; font: 600 11.5px/1 var(--sans); color: var(--ink-3); }
.us-site .of-v-plan .moved { position: relative; translate: 10px 0; background: var(--card); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .25), 0 0 0 1.5px var(--accent); }
.us-site .of-v-plan .moved svg { width: 14px; height: 14px; margin-left: auto; color: var(--accent); }
.us-site .of-v-learn { gap: 10px; }
.us-site .of-v-bars { display: flex; align-items: end; gap: 8px; height: 70px; }
.us-site .of-v-bars i { width: 22px; height: var(--h); border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--ink-3) 30%, transparent); }
.us-site .of-v-bars i.hi { background: var(--accent); }
.us-site .of-v-learn p { max-width: 22em; text-align: center; text-wrap: balance; font: 500 12.5px/1.35 var(--sans); color: var(--ink-2); }
.us-site .of-v-ask { gap: 10px; padding-inline: 18px; }
.us-site .of-v-ask .q { padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--bg-2); font: 500 13.5px/1.35 var(--sans); }
.us-site .of-v-ask div { display: flex; gap: 6px; justify-self: start; }
.us-site .of-v-ask span { padding: 7px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font: 600 12.5px/1 var(--sans); color: var(--ink-2); white-space: nowrap; }
.us-site .of-v-ask .pick { background: var(--ink); color: var(--bg); box-shadow: none; }
.us-site .of-v-seg { display: flex; padding: 4px; border-radius: 999px; background: var(--bg-2); }
.us-site .of-v-seg span { padding: 9px 14px; border-radius: 999px; font: 600 13px/1 var(--sans); color: var(--ink-3); white-space: nowrap; }
.us-site .of-v-seg .on { background: var(--ink); color: var(--bg); }
.us-site .of-v-auto p { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1 var(--sans); color: var(--ink-2); }
.us-site .of-v-auto p i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: us-pulse 1.6s ease-in-out infinite; }
.us-site .of-month { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.us-site .of-month-text { display: grid; gap: 14px; }
.us-site .of-month-text p { font: 400 17px/1.55 var(--sans); color: var(--ink-2); }
.us-site .of-moments { display: flex; flex-wrap: wrap; gap: 8px; }
.us-site .of-moments span { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); font: 500 13px/1.2 var(--sans); }
.us-site .of-moments b { font: 650 13px/1 var(--sans); color: var(--accent); }
.us-site .of-cal { width: min(540px, 100%); justify-self: end; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 18px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); }
.us-site .of-dow { font: 600 11.5px/1 var(--sans); color: var(--ink-3); text-align: center; padding-bottom: 4px; }
.us-site .of-day { position: relative; aspect-ratio: 1; border-radius: 10px; background: var(--bg-2); padding: 6px; overflow: hidden; }
.us-site .of-day b { position: relative; z-index: 1; font: 600 11.5px/1 var(--sans); color: var(--ink-3); }
.us-site .of-day.made img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.us-site .of-day.made b { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.us-site .of-day.plan i { position: absolute; left: 0; bottom: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); right: 0; margin-inline: auto; }
.us-site .of-gets-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(24px, 3vw, 36px); }
.us-site .of-gets-grid article { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
.us-site .of-gets-grid b { font: 650 16.5px/1.25 var(--sans); }
.us-site .of-gets-grid b::before { content: ""; display: block; width: 26px; height: 26px; margin-bottom: 10px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8l4-4.2' fill='none' stroke='%23d9481c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; }
.us-site .of-gets-grid p { font: 400 14.5px/1.5 var(--sans); color: var(--ink-2); }
.us-site .of-quote { display: grid; gap: 16px; justify-items: center; text-align: center; }
.us-site .of-quote blockquote { margin: 0; max-width: 30em; font: italic 400 clamp(22px, 2.4vw, 30px)/1.35 var(--serif); }
.us-site .of-quote p { display: inline-flex; align-items: center; gap: 8px; font: 500 14.5px/1 var(--sans); color: var(--ink-3); }
.us-site .of-quote p b { color: var(--ink); font-weight: 650; }
.us-site .of-quote .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; font: 700 12px/1 var(--sans); }
.us-site .of-final { display: grid; gap: 14px; justify-items: center; text-align: center; padding-bottom: clamp(96px, 12vw, 140px); }
.us-site .of-final .of-go { width: min(380px, 100%); }
.us-site .of-talk2 { font: 500 14.5px/1.4 var(--sans); color: var(--ink-2); }
.us-site .of-talk2 a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.us-site .of-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px); box-shadow: 0 -1px 0 var(--line); transform: translateY(110%); transition: transform .3s var(--ease); }
.us-site .of-bar.on { transform: none; }
.us-site .of-bar > div { display: grid; gap: 3px; } .us-site .of-bar b { font: 650 15px/1 var(--sans); } .us-site .of-bar span { font: 500 13px/1 var(--sans); color: var(--ink-2); }
.us-site .of-bar .btn { margin-left: auto; height: 46px; }
@media (max-width: 900px) {
  .us-site .of-hero, .us-site .of-month { grid-template-columns: minmax(0, 1fr); }
  .us-site .of-buy { position: static; }
  .us-site .of-can { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .us-site .of-gets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .us-site .of-bar { display: flex; }
  .us-site .of-talk { display: none; }
}
@media (max-width: 560px) {
  .us-site .of-posts { grid-template-columns: repeat(4, 62vw); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .us-site .of-posts::-webkit-scrollbar { display: none; }
  .us-site .of-post { scroll-snap-align: start; }
  .us-site .of-can, .us-site .of-gets-grid { grid-template-columns: minmax(0, 1fr); }
  .us-site .of-back { font-size: 13.5px; }
}

/* Website frame rules (hand-written). After editing, run: node scripts/site/publish-css.mjs (the site loads the published copy). */
/* The frame around the generated site markup (hand-written; site.css is generated). */
.us-site-part { display: contents; }
.us-site { min-height: 100vh; }
.us-site .site-field-error { margin: 10px auto 0; max-width: 520px; color: #b4321a; font-size: 14px; font-weight: 600; text-align: center; }
.us-site[data-scheme="midnight"] .site-field-error { color: #ff9b7a; }

/* ---------- Book a demo: the real flow (details, then Calendly) in the prototype's card ---------- */
.us-site .demo-card h2:focus { outline: none; }
/* an older global rule styles .demo-copy > p; the prototype's own sizes win here */
.us-site .demo-copy > p.sub { margin: 0; font-size: clamp(16.5px, 1.4vw, 18.5px); color: var(--ink-2); }
.us-site .demo-copy > p.demo-note { margin: 0; font-size: 17px; color: var(--ink-2); }
.us-site .demo-card .btn { width: 100%; }
/* Choosing a time: Calendly needs the room, so the card spans the page and the copy steps aside (as the old page did). */
.us-site .demo:has(.demo-calendar) { grid-template-columns: minmax(0, 1fr); }
.us-site .demo:has(.demo-calendar) .demo-copy { display: none; }
.us-site .demo:has(.demo-calendar) .demo-card { position: static; max-width: 1040px; width: 100%; margin-inline: auto; }
.us-site .demo-calendar { display: grid; gap: 14px; }
.us-site .calendar-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.us-site .calendar-heading h2 { margin: 0; }
.us-site .calendar-embed { height: 760px; min-width: 280px; border-radius: 14px; overflow: hidden; }
.us-site .calendar-embed iframe { width: 100%; height: 100%; border: 0; }
.us-site .demo-calendar [role="alert"] { color: #b4321a; font: 600 14px/1.4 var(--sans); }
@media (max-width: 640px) { .us-site .calendar-embed { height: 1000px; } .us-site .demo:has(.demo-calendar) .demo-card { padding: 16px 8px; } .us-site .calendar-heading { padding-inline: 10px; } }

/* Booked: the optional questions after Calendly */
.us-site .demo-confirmed .demo-copy > .demo-tick { order: 0; }
.us-site .demo-choices { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.us-site .demo-choices legend { padding: 0; margin-bottom: 10px; font: 600 14px/1.3 var(--sans); }
.us-site .demo-choices legend small { font-weight: 500; color: var(--ink-3); margin-left: 6px; }
.us-site .demo-choices .choices { display: flex; flex-wrap: wrap; gap: 6px; }
.us-site .demo-choices .choices button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 500 14px/1.2 var(--sans); }
.us-site .demo-choices .choices button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); box-shadow: none; }
.us-site .demo-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.us-site .demo-actions .btn { margin-top: 0; }
.us-site .demo-error { color: #b4321a; font: 600 14px/1.4 var(--sans); }
.us-site[data-scheme="midnight"] .demo-error, .us-site[data-scheme="midnight"] .demo-calendar [role="alert"] { color: #ff9b7a; }
.us-site .demo-done .btn { width: auto; }

/* ---------- Blog index: the category filters are links (?category=), styled as the prototype's buttons ---------- */
.us-site .bl-filters a { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font: 500 14.5px/1 var(--sans); }
.us-site .bl-filters a:hover { color: var(--ink); }
.us-site .bl-filters a[aria-current="page"] { background: var(--btn); color: var(--btn-ink); }
.us-site .bl-grid:first-child { margin-top: 0; }
.us-site .bl-cover img { display: block; }

/* ---------- Blog article: cover, contents and "More from the blog" (from the prototype's blog-articles.css) ---------- */
.us-site .ar-cover figcaption { margin-top: 12px; max-width: 46em; font: 400 14px/1.45 var(--sans); color: var(--ink-3); }
.us-site .ar-cover img { display: block; height: auto; }
.us-site .ar-cover .ar-stage { display: grid; place-items: center; padding: clamp(14px, 4vw, 48px); border-radius: 22px; background: var(--bg-2); }
.us-site .ar-cover.ar-cover-stage img { width: 100%; max-width: 896px; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 14px; box-shadow: var(--shadow-post); }
.us-site .ar-more .head { margin-bottom: 22px; }
.us-site .ar-toc:empty { visibility: hidden; }
.us-site .ar-toc ol { list-style: decimal; }
.us-site .ar-toc li { padding-left: 2px; }

/* ---------- Blog article bodies ----------
   The bodies are the existing article components (app/blog/articles), whose own stylesheets are scoped to
   .wv2-article > article. Their figures, tables, demos and diagrams keep those styles; the reading type, colours and
   rhythm below follow the new website (Source Serif body, Schibsted headings, the site's tokens in light and dark). */
.us-site .ar-body.wv2-article > article { max-width: none; margin: 0; padding: 0; font: 400 19px/1.7 var(--serif); color: var(--ink); }
.us-site .ar-body.wv2-article > article > * { margin-top: 0; margin-bottom: 0; }
.us-site .ar-body.wv2-article > article > * + * { margin-top: 1.1em; }
.us-site .ar-body.wv2-article > article p { color: inherit; }
.us-site .ar-body.wv2-article > article > .mf-sec + .mf-sec { margin-top: 2.2em; }
.us-site .ar-body.wv2-article > article .lead { font: 500 clamp(21px, 2vw, 25px)/1.5 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.us-site .ar-body.wv2-article > article h2 { margin: 2.2em 0 0; font: 650 clamp(26px, 2.6vw, 32px)/1.15 var(--sans); letter-spacing: -.03em; color: var(--ink); scroll-margin-top: 90px; }
.us-site .ar-body.wv2-article > article > h3, .us-site .ar-body.wv2-article > article > section > h3 { font: 650 clamp(20px, 2vw, 23px)/1.25 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.us-site .ar-body.wv2-article > article a { color: var(--accent); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
.us-site .ar-body.wv2-article > article strong { font-weight: 650; }
/* lists and figures stay low-specificity (:where) so each article's own components (slides, carousel demo) keep their styles */
.us-site .ar-body > article > :where(ul) { list-style: disc; padding-left: 1.3em; }
.us-site .ar-body > article > :where(ol) { list-style: decimal; padding-left: 1.3em; }
.us-site .ar-body > article > :where(ul, ol) > li + li { margin-top: .4em; }
.us-site .ar-body.wv2-article > article > figure { margin-block: 2em; }
.us-site .ar-body > article > figure > :where(img, video, a > img, picture img) { border-radius: 16px; }
.us-site .ar-body.wv2-article > article figcaption, .us-site .ar-body.wv2-article > article .media-link,
.us-site .ar-body.wv2-article > article .note, .us-site .ar-body.wv2-article > article .wv2-editorial-note { font: 400 14px/1.5 var(--sans); color: var(--ink-3); }
.us-site .ar-body.wv2-article > article .wv2-editorial-note, .us-site .ar-body.wv2-article > article > .note { margin-top: 2.4em; padding-top: 20px; border-top: 1px solid var(--line); }
.us-site .ar-body.wv2-article > article blockquote { margin-block: 1.6em; padding: 20px 24px; border: 0; border-left: 3px solid var(--accent); border-radius: 16px; background: var(--bg-2); font: italic 400 20px/1.55 var(--serif); color: var(--ink); }
.us-site .ar-body.wv2-article > article blockquote p { margin: 0; }
.us-site .ar-body.wv2-article > article table { font: 400 15.5px/1.5 var(--sans); color: var(--ink-2); }
.us-site .ar-body.wv2-article > article caption { font: 400 14px/1.45 var(--sans); color: var(--ink-3); text-align: left; margin-bottom: 12px; }
.us-site .ar-body.wv2-article > article th, .us-site .ar-body.wv2-article > article td { border-bottom: 1px solid var(--line); color: var(--ink-2); }
.us-site .ar-body.wv2-article > article th { color: var(--ink); font-weight: 600; }
.us-site .ar-body.wv2-article > article thead { background: none; }
.us-site .ar-body.wv2-article > article thead th { font: 600 12.5px/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: var(--bg-2); border-bottom: 0; }
.us-site .ar-body.wv2-article > article .wv2-editorial-code, .us-site .ar-body.wv2-article > article pre { padding: 20px 22px; border-radius: 16px; background: var(--bg-2); color: var(--ink); font: 400 14.5px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.us-site .ar-body.wv2-article > article .wv2-editorial-ladder ol { list-style: none; padding-left: 26px; border-left: 2px solid var(--line); display: grid; gap: 22px; }
.us-site .ar-body.wv2-article > article .wv2-editorial-ladder li { position: relative; margin: 0; }
.us-site .ar-body.wv2-article > article .wv2-editorial-ladder li::before { content: ""; position: absolute; left: -33px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.us-site .ar-body.wv2-article > article .wv2-editorial-ladder figcaption { margin: 0 0 20px; }
.us-site .ar-body.wv2-article > article .wv2-editorial-ladder li > span { font: 600 20px/1.3 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.us-site .ar-body.wv2-article > article .wv2-editorial-ladder li > p { font: 400 16px/1.55 var(--sans); color: var(--ink-2); }
.us-site .ar-body.wv2-article > article .slide-label, .us-site .ar-body.wv2-article > article .visual-note { color: var(--ink-3); }
@media (max-width: 640px) {
  .us-site .ar-body.wv2-article > article { font-size: 18px; }
  .us-site .ar-body.wv2-article > article table { font-size: 14px; }
}

/* ---------- Shell-only pages (platforms, changelog, privacy, terms): their old content inside the new frame ---------- */
.us-site .us-legacy { padding-top: clamp(24px, 4vw, 48px); }
/* The site's base rules (.us-site p, h1-h4, figure { margin: 0 } and .us-site a { color: inherit }) tie with these pages'
   own rules in website-v2.css and win by load order, so the margins and link colours those pages set are restated here. */
.us-site .us-legacy .wv2-hero h1 { margin: 0; }
.us-site .us-legacy .wv2-hero p { margin: 22px auto 0; }
.us-site .us-legacy .wv2-directory h2 { margin: 10px 0 0; }
.us-site .us-legacy .wv2-coming h2 { margin: 10px 0 0; }
.us-site .us-legacy .wv2-fit > h2 { margin: 10px 0 0; }
.us-site .us-legacy .wv2-rules > h2 { margin: 10px 0 0; }
.us-site .us-legacy .wv2-examples > h2 { margin: 10px 0 0; }
.us-site .us-legacy .wv2-platform-tile > p { margin: 10px 0 0; }
.us-site .us-legacy .wv2-inline-cta h2 { margin: 0 auto; }
.us-site .us-legacy .wv2-inline-cta a { color: #fff; }
.us-site .us-legacy .wv2-detail-hero > a { color: #fff; }
.us-site .us-legacy .wv2-detail-hero h1 { margin: 28px auto 0; }
.us-site .us-legacy .wv2-detail-hero > p { margin: 25px auto 0; }
.us-site .us-legacy .wv2-stats a { color: var(--wv2-blue); }
.us-site .us-legacy .wv2-fit h3 { margin: 32px 0 0; }
.us-site .us-legacy .wv2-rules h3 { margin: 0; }
.us-site .us-legacy .wv2-rules aside p { margin-bottom: 0; }
.us-site .us-legacy .wv2-examples h3 { margin: auto 0; }
.us-site .us-legacy .wv2-platform-pending h1 { margin: 20px 0 0; }
.us-site .us-legacy .wv2-platform-pending a { text-decoration: underline; }
.us-site .us-legacy .wv2-legal-hero > p { margin: 0 0 22px; }
.us-site .us-legacy .wv2-legal-hero h1 { margin: 0; }
.us-site .us-legacy .wv2-legal-document h2 { margin: 0 0 17px; }
.us-site .us-legacy .wv2-legal-document h3 { margin: 24px 0 8px; }
.us-site .us-legacy .wv2-legal-document p { margin: 0; }
.us-site .us-legacy .wv2-legal-document p + p { margin-top: 15px; }
.us-site .us-legacy .wv2-legal-document a { color: #171715; text-decoration: underline; text-decoration-color: rgba(255,79,31,.5); }
.us-site .us-legacy .wv2-legal-contact p { margin: 0 0 5px; }
.us-site .us-legacy .wv2-legal-contact h2 { margin: 0; }
.us-site .us-legacy .wv2-legal-contact a { color: #fff; }
.us-site .us-legacy .wv2-legal-switch a:hover { color: #171715; }


/* The approved mockup has no doctype, so browsers gave its footer form the old 1em bottom margin; kept so the footer matches it. */
.us-site .footer .final .site-field { margin-bottom: 17px; }

/* Hero review deck: the caption sits in the post, under the picture, as on Instagram (Aseem, 12 Oct), not in the panel. */
.us-site #rv .rv-cap { display: none; }
.us-site .ig .ig-a { padding-bottom: 5px; }
.us-site .ig-c { margin: 0 0 12px; padding: 0 11px; font: 400 12.5px/1.4 var(--sans); color: #0f1419; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.us-site .ig-c b { font-weight: 600; }

/* Hero review panel: a request being typed on one line must never widen the panel (Aseem, 12 Oct, phone: the buttons
   slid off screen while "Show it somewhere real, like a sunny café terrace" was typed). Columns never grow past the panel. */
.us-site .rv-panel, .us-site .rv-edit-area { grid-template-columns: minmax(0, 1fr); }
.us-site .rv-edit-area, .us-site .rv-edit-area .ask { min-width: 0; }

/* Hero review deck on phones: the picture-source label ("Designed for you") sits centred under the post instead of
   wrapping onto its own line above the buttons (Aseem, 12 Oct). Desktop keeps it at the end of the platforms row. */
.us-site .rv-prov-m { display: none; }
@media (max-width: 640px) {
  .us-site #rv .rv-meta .prov { display: none; }
  .us-site #rv .deck { padding-bottom: 54px; }
  .us-site .rv-prov-m { display: block; position: absolute; z-index: 5; left: 0; right: 0; bottom: 16px; margin-inline: auto; width: max-content; max-width: calc(100% - 32px);
    padding: 6px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 12px/1 var(--sans); transition: opacity .25s var(--ease); }
  .us-site .rv-prov-m.fade { opacity: 0; }
}

/* Sign-in page: a status line (e.g. "Check your email") under the email field, beside the design's error line. */
.us-site .si-msg { font: 500 13px/1.3 var(--sans); color: var(--ink-2); }
/* The mockup renders without a doctype, which gives the email form 17px of space below it; keep that rhythm. */
.us-site .si-form { margin-bottom: 17px; }

/* Footer Contact: a short note that the email address was copied. */
.us-site .contact-note { position: fixed; left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); margin-inline: auto; width: max-content; max-width: calc(100% - 32px); z-index: 90;
  padding: 11px 16px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font: 500 14px/1.3 var(--sans); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .4);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .25s, transform .25s; }
.us-site .contact-note.show { opacity: 1; transform: none; }

/* How it works: the mockup renders without a doctype, where a row's second line takes its own small line height; match it. */
.us-site .hiw-rows small { display: block; }
.us-site .hiw-approve > div > b { display: block; }

/* Offer page (onboarding): the note and a checkout error, in the design's type. */
.us-site .of-note { margin: 0; font: 500 14px/1.45 var(--sans); color: var(--ink-2); }
.us-site .of-err { margin: 8px 0 0; font: 600 14px/1.4 var(--sans); color: #b4321a; }
.us-site[data-scheme="midnight"] .of-err { color: #ff9b7a; }
.us-site .of-bar .of-err { position: absolute; left: 16px; right: 16px; bottom: calc(100% + 6px); background: var(--card); padding: 8px 12px; border-radius: 10px; box-shadow: var(--shadow-card); }

/* Solid buttons in light mode: the dark brown of the dark sections (Aseem, 12 Oct), not black. Only real links and
   buttons; the pretend product screens' buttons (span/i) stay black like the product's. Outline buttons, dark mode and
   the dark "What it makes" section (light buttons on brown) keep theirs. */
.us-site[data-scheme="ember"] :is(a, button).btn:not(.ghost) { background: #43190b; }
.us-site[data-scheme="ember"] :is(a, button).btn:not(.ghost):hover { background: #5e2614; }
.us-site[data-scheme="ember"] .makes :is(a, button).btn:not(.ghost) { background: var(--btn); }
.us-site[data-scheme="ember"] .makes :is(a, button).btn:not(.ghost):hover { background: var(--btn-hover); }