/* 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 66s 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; }
}

/* =====================================================================
   Store integration pages (17 Oct 2026): Shopify, WooCommerce, Google Merchant Center
   ===================================================================== */
.us-site .pi.woo { --i: url(/site/img/icons/woocommerce.svg); }
.us-site .ico.shop { background: #95bf47; } .us-site .ico.woo { background: #7f54b3; } .us-site .ico.goog { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.us-site .ico.goog .pi { background: none; -webkit-mask: none; mask: none; background: url(/site/img/icons/google-color.svg) center / contain no-repeat; }
.us-site .intg-hero { justify-items: center; text-align: center; padding-bottom: clamp(16px, 2vw, 28px); }
.us-site .intg-hero .pr-title { max-width: 14em; }
.us-site .intg-hero .sub { max-width: 36em; }
.us-site .intg-badge { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--sans); color: var(--ink); }
.us-site .intg-badge .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.us-site .intg-badge .ico .pi { width: 60%; height: 60%; }
.us-site .intg-steps { padding-block: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 56px); }
.us-site .intg-card { gap: 12px; }
.us-site .intg-src { display: inline-flex; align-items: center; gap: 6px; }
.us-site .intg-src .pi { width: 14px; height: 14px; color: var(--ink-3); }
.us-site .intg-products { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.us-site .intg-products li { display: flex; align-items: center; gap: 12px; }
.us-site .intg-thumb { width: 44px; height: 44px; border-radius: 10px; flex: none; background-color: var(--bg-2); background-size: 420% auto; background-repeat: no-repeat; }
.us-site .intg-products b { display: block; font: 600 14px/1.25 var(--sans); }
.us-site .intg-products small { font: 500 13px/1.3 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.us-site .intg-becomes { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font: 600 12.5px/1 var(--sans); color: var(--ink-3); }
.us-site .intg-becomes::before, .us-site .intg-becomes::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.us-site .intg-post { justify-self: center; width: min(240px, 72%); aspect-ratio: 4 / 5; border-radius: var(--radius-post, 14px); overflow: hidden; box-shadow: var(--shadow-post, var(--shadow-card)); }
.us-site .intg-post img { width: 100%; height: 100%; object-fit: cover; display: block; }
.us-site .intg-unlocks { padding-block: clamp(32px, 5vw, 72px) clamp(64px, 8vw, 110px); }
.us-site .intg-unlocks .head { margin-bottom: clamp(26px, 3vw, 40px); }
.us-site .intg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.us-site .intg-unlock { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 20px; background: var(--bg-2); }
.us-site .intg-unlock b { font: 650 18px/1.25 var(--sans); letter-spacing: -.015em; }
.us-site .intg-unlock p { font: 400 15.5px/1.55 var(--sans); color: var(--ink-2); }
.us-site .intg-more { margin-top: 22px; font: 500 15px/1.5 var(--sans); color: var(--ink-2); max-width: 40em; }
.us-site .mstores { display: grid; gap: 12px; padding-top: 2px; }
.us-site .mstores .mk2 { font: 600 12.5px/1 var(--sans); color: var(--ink-2); }
.us-site .mstores .mtiles { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
.us-site .mstores .mt { align-content: start; text-align: center; }
.us-site .mt .ico.goog { box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--line); }
.us-site .mt .ico.woo .pi { width: 62%; height: 62%; }
.us-site .pi.reddit { --i: url(/site/img/icons/reddit.svg); }
.us-site .mtiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.us-site .mt { text-align: center; line-height: 1.2; }
.us-site .mt .ico.story { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px #e1306c, 0 8px 16px -10px rgba(0, 0, 0, .6); }
.us-site .mt .ico.story.fb { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px #1877f2, 0 8px 16px -10px rgba(0, 0, 0, .6); }
.us-site .intg-src .pi.woo { width: 17px; height: 17px; color: #7f54b3; }
.us-site .intg-badge .ico.woo .pi { width: 70%; height: 70%; }
@media (max-width: 860px) { .us-site .intg-grid { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   Integrations menu, two columns (18 Oct 2026): colour = live, dark + Soon = not yet
   ===================================================================== */
.us-site .mcol { display: grid; gap: 16px; align-content: start; padding: 24px 26px 22px; }
.us-site .mright { background: color-mix(in srgb, var(--bg-2) 80%, transparent); box-shadow: inset 1px 0 0 var(--line); }
.us-site .mright .mtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.us-site .mcol .mtiles { align-items: start; column-gap: 12px; row-gap: 16px; }
.us-site .mcol .mt { align-content: start; text-align: center; line-height: 1.2; }
.us-site .mt.is-soon { cursor: default; }
.us-site .mt.is-soon:hover { background: none; color: var(--ink-2); }
.us-site .mt.is-soon:hover .ico { transform: none; }
.us-site .mt.is-soon .ico { background: #2c2c30; box-shadow: none; }
.us-site .mt.is-soon .ico .pi { color: rgba(255, 255, 255, .5); }
.us-site .mt.is-soon > span:nth-of-type(2) { color: var(--ink-3); }
.us-site .mt.is-soon em { font: 650 9.5px/1 var(--sans); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 3px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); margin-top: -2px; }
.us-site[data-scheme="midnight"] .mt.is-soon .ico { background: #2a2e35; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.us-site[data-scheme="midnight"] .mt.is-soon .ico .pi { color: rgba(255, 255, 255, .38); }

/* Wix and Squarespace stores (18 Oct 2026): products read from their public store pages. White tiles, their marks in black. */
.us-site .pi.wix { --i: url(/site/img/icons/wix.svg); } .us-site .pi.sqsp { --i: url(/site/img/icons/squarespace.svg); }
.us-site .ico.wix, .us-site .ico.sqsp { background: #fff; color: #111; box-shadow: inset 0 0 0 1px var(--line); }
.us-site .mt .ico.wix, .us-site .mt .ico.sqsp { box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--line); }
.us-site .mt .ico.wix .pi { width: 74%; height: 74%; }
.us-site .mt .ico.sqsp .pi { width: 56%; height: 56%; }

/* 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); }

/* Hero deck: the cap post after its edit (13 Oct): the brand's wordmark and a price tag in its own colours. */
.us-site .wear-wm { position: absolute; left: 7cqw; top: 6.5cqw; z-index: 2; font: 800 5.2cqw/1 var(--sans); letter-spacing: .18em; color: #efe6d2; }
.us-site .stk.wear { background: #efe6d2; color: #1f3d2b; font: 800 8.5cqw/1 var(--sans); letter-spacing: -.03em; }
.us-site .cp-panel b { text-wrap: balance; }
.us-site .ly.in .stk.wear, .us-site .ly:not(.next) .stk.wear { transform: rotate(-10deg) scale(1); transition-delay: .35s; }
.us-site .ckl { position: absolute; inset: 0; background: #1d3557; color: #f4efe4; display: flex; flex-direction: column; gap: 5cqw; padding: 9cqw 8cqw; }
.us-site .ckl-top { display: flex; align-items: center; gap: 4cqw; }
.us-site .ckl-cal { width: 17cqw; border-radius: 2.4cqw; overflow: hidden; background: #f4efe4; color: #1d3557; text-align: center; display: grid; }
.us-site .ckl-cal i { font: 800 3.2cqw/1 var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; background: #e4572e; color: #fff; padding: 1.4cqw 0; }
.us-site .ckl-cal b { font: 800 9cqw/1.1 var(--sans); letter-spacing: -.04em; padding: .6cqw 0 1cqw; }
.us-site .ckl-top small { font: 700 3.6cqw/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #f2c14e; }
.us-site .ckl-h { font: 800 12cqw/.95 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.us-site .ckl ol { list-style: none; margin: 0; padding: 0; display: grid; }
.us-site .ckl li { display: flex; align-items: center; gap: 3.6cqw; font: 600 5.4cqw/1.2 var(--sans); padding: 3.2cqw 0; border-top: 1px solid rgba(244, 239, 228, .2); }
.us-site .ckl li span { width: 8cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #f2c14e; color: #1d3557; font: 800 4cqw/1 var(--sans); flex: none; }
.us-site .ckl em { margin-top: auto; font: 500 7cqw/1 var(--serif); font-style: italic; color: #f2c14e; }
/* Headline test d / e / f (13 Oct 2026; f = e in dark mode): html[data-hero] is set before paint by heroVariantScript (lib/hero-variants.ts). */
.us-site .us-hero-copy [data-v="e"] { display: none; }
:is(html[data-hero="e"], html[data-hero="f"]) .us-site .us-hero-copy [data-v="d"] { display: none; }
:is(html[data-hero="e"], html[data-hero="f"]) .us-site .us-hero-copy [data-v="e"] { display: inline; }
.us-site .us-hero-copy .nw { white-space: nowrap; }
.us-site .us-hero-copy .br-m { display: none; }
@media (max-width: 600px) { .us-site .us-hero-copy .br-m { display: inline; } }