/**
 * Yessify platform chrome — the shell around the product.
 *
 * The eight proposal themes live in themes.js and own the recipient's page.
 * This file owns everything else: the builder, checkout, the dashboard, the
 * admin console, the legal pages. It exists for the same reason themes.js does
 * — the chrome had drifted to 44 distinct hex values, 30 of them off-palette,
 * because every page invented its own.
 *
 * Linked from each page before support.js. No build step.
 */

/* ── Tokens ──────────────────────────────────────────────────────────────────
   Light is the default and the only one currently used by the platform; pages
   are white. The dark set is here so the admin console stops inventing its own,
   and so a full dark mode has somewhere to plug in.

   The dark ground is neutral rather than warm: the light side is pure white, so
   a warm near-black would not read as its sibling.
   ────────────────────────────────────────────────────────────────────────── */
:root,
[data-ys="light"] {
  --ys-ground:    #FFFFFF;
  --ys-surface:   rgba(255,255,255,0.82);   /* cards, which sit on the ground */
  --ys-surface-2: #F7F4F0;                  /* sunk rows and inset panels */
  --ys-rule:      rgba(184,7,16,0.14);      /* hairlines carry a little brand warmth */

  --ys-ink:       #5A1E12;   /* Cocoa   — headings */
  --ys-body:      #5C4A3F;   /* Clay    — body copy */
  --ys-muted:     #726052;   /* Stone   — secondary and small print */

  --ys-accent:    #B80710;   /* Deep Crimson — red text, links, eyebrows */
  --ys-accent-lg: #F3050A;   /* Yessify Red — display type from 24px up */

  --ys-focus:    #B80710;   /* 6.83:1 on white */
  --ys-success:  #1C5B43;   /* Forest */
  --ys-warning:  #8A5A0B;
  --ys-danger:   #8C1D18;   /* deliberately not the brand red: state, not action */
  --ys-info:     #1F5F6B;

  /* Tinted fills for chips and tiles. Kept as rgba so they sit on any surface. */
  --ys-success-bg: rgba(28,91,67,0.10);
  --ys-warning-bg: rgba(138,90,11,0.12);
  --ys-danger-bg:  rgba(140,29,24,0.10);
  --ys-info-bg:    rgba(31,95,107,0.10);
}

/* The dark ground is neutral, not warm: the light side is pure white, and a
   warm near-black would not read as its sibling.

   Note what does NOT flip. Button fills stay brand red, the pay button stays
   Forest, the WhatsApp green stays WhatsApp green — those are surfaces carrying
   their own labels, and they look the same in both schemes. Only the colours
   that sit ON the page ground move. */
@media (prefers-color-scheme: dark) {
  :root:not([data-ys="light"]) {
    --ys-ground:    #141414;
    --ys-surface:   rgba(255,255,255,0.05);
    --ys-surface-2: #1E1E1E;
    --ys-rule:      rgba(255,255,255,0.13);

    --ys-ink:       #F5F3F0;
    --ys-body:      #D2CCC5;
    --ys-muted:     #9A928A;

    --ys-accent:    #FF6E71;
    --ys-accent-lg: #FF6E71;

    --ys-focus:     #FF6E71;
    --ys-success:   #7BD1A8;
    --ys-warning:   #E0B15C;
    --ys-danger:    #FF8A80;
    --ys-info:      #6FB6C4;

    --ys-success-bg: rgba(123,209,168,0.12);
    --ys-warning-bg: rgba(224,177,92,0.14);
    --ys-danger-bg:  rgba(255,138,128,0.12);
    --ys-info-bg:    rgba(111,182,196,0.12);
  }
}

/* Same set again for an explicit choice, so a toggle would win in either
   direction, and so the admin console can opt in regardless of the OS. */
[data-ys="dark"] {
  --ys-ground:    #141414;
  --ys-surface:   rgba(255,255,255,0.05);
  --ys-surface-2: #1E1E1E;
  --ys-rule:      rgba(255,255,255,0.13);

  --ys-ink:       #F5F3F0;
  --ys-body:      #D2CCC5;
  --ys-muted:     #9A928A;

  --ys-accent:    #FF6E71;
  --ys-accent-lg: #FF6E71;

  --ys-focus:    #FF6E71;
  --ys-success:  #7BD1A8;
  --ys-warning:  #E0B15C;
  --ys-danger:   #FF8A80;
  --ys-info:     #6FB6C4;

  --ys-success-bg: rgba(123,209,168,0.12);
  --ys-warning-bg: rgba(224,177,92,0.14);
  --ys-danger-bg:  rgba(255,138,128,0.12);
  --ys-info-bg:    rgba(111,182,196,0.12);
}

/* The browser's own widgets — form controls, scrollbars — need telling too. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-ys="light"]) { color-scheme: dark; } }
[data-ys="dark"] { color-scheme: dark; }

/* ── Keyboard focus ──────────────────────────────────────────────────────────
   There was none. Thirty-six buttons across five pages and not one focus style,
   so tabbing through checkout moved nothing on screen — a WCAG 2.4.7 failure,
   and the reason this file exists at all.

   :focus-visible rather than :focus, so a mouse click does not leave a ring
   behind but a keyboard or switch user always sees where they are.

   Inside a proposal page the ring borrows that theme's accent, which is already
   checked to clear 4.5:1 against its own ground. Everywhere else it falls back
   to the platform token.
   ────────────────────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--dc-accent, var(--ys-focus));
  outline-offset: 2px;
  /* Buttons here are pills with an inline border-radius; the ring follows it. */
  border-radius: inherit;
}

/* Elements that already carry a visible ring of their own don't need two. */
.dc-input:focus-visible {
  outline-offset: 0;
}

/* Some clickable surfaces in the builder and the proposal page are divs with an
   onClick and no tabindex. They cannot receive focus at all, which is a real
   gap — but adding tabindex to them is a behaviour change, not a style one, so
   it is deliberately left for its own pass rather than smuggled in here. */

/* ── Scheme toggle ───────────────────────────────────────────────────────────
   Injected by platform.js, so it exists once rather than in ten different bits
   of navigation. Bottom-left because bottom-right is taken on the builder by
   its floating preview button, and it lifts clear of the builder's fixed mobile
   nav below 900px. */
.yf-scheme-toggle {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 90;
  /* Was 38px, which is under our own tap floor. The layout check never caught
     it because it skips position:fixed elements — a fixed thing sits outside
     the flow and would otherwise report as overflow on every page. */
  width: var(--ys-tap);
  height: var(--ys-tap);
  border-radius: 50%;
  border: 1px solid var(--ys-rule);
  /* Opaque, not translucent. This floats over live content, and a see-through
     puck reads as a collision with whatever is behind it rather than as a
     control sitting above it. */
  background: var(--ys-ground);
  color: var(--ys-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.18), 0 10px 26px -10px rgba(0,0,0,.34);
  transition: color .15s, border-color .15s, transform .15s;
}

/* Reserve the space it occupies, so the last thing on a page is never parked
   permanently underneath it. Mid-scroll it still floats over content — that is
   what a fixed control does — but nothing ends up unreachable. */
body {
  padding-bottom: calc(var(--ys-tap) + 28px);
}
.yf-scheme-toggle:hover {
  color: var(--ys-accent);
  border-color: var(--ys-accent);
  transform: translateY(-1px);
}
/* Set by platform.js while the page is scrolling. pointer-events:none so a
   thumb travelling past it cannot catch a control that is on its way out. */
.yf-scheme-toggle.is-ducked {
  opacity: 0;
  transform: translateY(14px) scale(.9);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
/* No bottom-nav exception any more: the toggle is mounted on the landing page
   only, and the landing page has no fixed bottom bar to clear. */
@media print { .yf-scheme-toggle { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Sizing ────────────────────────────────────────────────────────────────
   Colour had tokens and a page documenting them; size had neither, and it
   showed. A row of admin tabs grew past 375px and dragged the whole document
   into horizontal scroll, and nothing anywhere said that was not allowed.

   Two floors and one guard, all of them things a phone in one hand needs.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* 44px is the figure Apple and Google independently landed on for a
     fingertip. Recipients open these outdoors, one-handed, on a bus. */
  --ys-tap: 44px;
  /* Below ~12px, text stops being small and starts being unreadable at arm's
     length. Eyebrow labels were sitting at 10px. */
  --ys-text-min: 12px;
  --ys-control-h: 44px;
}

/* Nothing may push the document sideways — a phone that scrolls horizontally
   feels broken in a way people do not report, they just leave.
   Enforced by `npm run layout:check`, deliberately NOT by overflow-x:hidden
   here. Clipping the document would hide the symptom while the broken element
   stayed broken, and it clamps scrollWidth, which is the exact measurement the
   check reads — the guard would have blinded the detector. */
html, body {
  max-width: 100%;
}

/* Interactive things get a fingertip. Applied by class rather than to every
   button, because the pages carry inline styles that would fight a blanket
   rule, and a nav link inside a sentence should stay inline. */
.ys-tap {
  min-height: var(--ys-tap);
  min-width: var(--ys-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* A standalone link in a nav or footer is a tap target, not running text.
   Padding rather than min-height so it does not disturb the line box. */
.ys-tap-link {
  display: inline-block;
  /* 15px each side. 14px cleared 44px against a 16px line box but landed at
     43px against a 12px one, which is the size most of these labels actually
     are — one pixel short is still short. Horizontal padding stays small so a
     row of footer links does not spread. */
  padding: 15px 4px;
}

/* A row of controls scrolls rather than escaping. min-width:0 is the load
   bearing declaration — a flex item defaults to min-width:auto and refuses to
   shrink below its content, so overflow-x on its own does nothing. */
.ys-row-scroll {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ys-row-scroll::-webkit-scrollbar { display: none; }
.ys-row-scroll > * { flex: 0 0 auto; }

/* ── Mobile ────────────────────────────────────────────────────────────────
   100vh is not the height of a phone screen. It is the height the screen
   would have if the browser's address bar were hidden, so a "full height"
   section is taller than what you can see and the page shifts as the toolbar
   slides away. dvh is the honest number. Declared as a token because the
   pages set heights in inline style objects, where a vh/dvh fallback pair
   cannot be written.
   ────────────────────────────────────────────────────────────────────────── */
:root { --ys-vh: 100vh; }
@supports (height: 100dvh) {
  :root { --ys-vh: 100dvh; }
}

html {
  /* Safari inflates text when a phone is rotated to landscape unless told not
     to. The sizes on this site are deliberate; leave them alone. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* Android paints a grey box over anything tapped. The site has its own
     pressed states and focus rings; this one is just noise. */
  -webkit-tap-highlight-color: transparent;
  /* Stop a scroll that reaches the end of the page from dragging the page
     behind it, and from triggering pull-to-refresh mid-gesture. */
  overscroll-behavior-y: contain;
}

/* Horizontal scrollers — the admin tab row, table wrappers — should carry
   momentum on iOS and not chain into the page behind them. */
.ys-row-scroll, [style*="overflow-x:auto"], [style*="overflow-x: auto"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ── Ambient hearts ────────────────────────────────────────────────────────
   Seven pages each carried their own copy of a `dc-float` keyframe and their
   own loop building a fixed array of emoji, with four slightly different sets
   of numbers between them. This is the one definition; hearts.js is the one
   spawner. See that file for why the hearts are finite rather than looping.

   The field is `fixed` and `pointer-events: none`, so it never participates in
   layout, never takes a tap, and cannot push the document sideways — which the
   layout check would fail it for. */
.ys-heart-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Its own layer. Without this every heart repaints the page behind it. */
  contain: strict;
}

.ys-heart {
  position: absolute;
  bottom: -8vh;
  display: block;
  will-change: transform, opacity;
  animation-name: ys-float-up;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-iteration-count: 1;
}

.ys-heart svg { display: block; width: 100%; height: 100%; }

/* Travels 118vh so it is fully clear of the top before it is removed, and
   fades in and out at the ends rather than popping. The drift and the tilt make
   two hearts of the same size read as different objects. */
@keyframes ys-float-up {
  0%   { transform: translate3d(0, 0, 0) rotate(-8deg); opacity: 0; }
  8%   { opacity: var(--ys-heart-peak, 0.55); }
  90%  { opacity: var(--ys-heart-peak, 0.55); }
  100% { transform: translate3d(var(--ys-heart-drift, 12px), -118vh, 0) rotate(14deg); opacity: 0; }
}

/* The global reduce rule above collapses every animation to 0.01ms, which would
   fire animationend on each heart immediately and spin the spawner. hearts.js
   declines to start at all under that preference; this is the belt to its
   braces, and covers a preference that changes mid-session. */
@media (prefers-reduced-motion: reduce) {
  .ys-heart-field { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Editorial platform redesign · September 2026

   The application predates a component build system and most layout values
   are emitted as inline styles by the frozen DC runtime.  These page-scoped
   rules are therefore intentionally authoritative: they provide one coherent
   visual system without touching support.js or any transactional behaviour.
   Recipient palettes remain owned by themes.js and are refined separately.
   ────────────────────────────────────────────────────────────────────────── */

:root,
[data-ys="light"] {
  --ys-ground: #FFFFFF;
  --ys-surface: #FFFCF7;
  --ys-surface-2: #EFE3D6;
  --ys-rule: #DCCDBF;
  --ys-ink: #35221A;
  --ys-body: #59483E;
  --ys-muted: #78665B;
  --ys-accent: #A70F20;
  --ys-accent-lg: #C71327;
  --ys-focus: #1C5B43;
  --ys-success: #1C5B43;
  --ys-warning: #85570F;
  --ys-danger: #8B261F;
  --ys-info: #245E6A;
  --ys-success-bg: #E7F0EA;
  --ys-warning-bg: #F6ECD8;
  --ys-danger-bg: #F8E7E3;
  --ys-info-bg: #E6EFF1;
  --ys-radius-sm: 10px;
  --ys-radius-md: 16px;
  --ys-radius-lg: 24px;
  --ys-radius-xl: 34px;
  --ys-shadow-sm: 0 8px 24px -18px rgba(53,34,26,.32);
  --ys-shadow-md: 0 24px 60px -36px rgba(53,34,26,.4);
  --ys-shadow-lg: 0 40px 90px -48px rgba(53,34,26,.48);
  --ys-page: 1180px;
  --ys-reading: 720px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-ys="light"]) {
    --ys-ground: #17110E;
    --ys-surface: #241B17;
    --ys-surface-2: #30241E;
    --ys-rule: #4B3930;
    --ys-ink: #FFF5E9;
    --ys-body: #DDCEC2;
    --ys-muted: #AD988A;
    --ys-accent: #FF8B94;
    --ys-accent-lg: #FF6673;
    --ys-focus: #7FD0AF;
    --ys-success: #7FD0AF;
    --ys-warning: #E4B96B;
    --ys-danger: #FF958D;
    --ys-info: #82C5D0;
    --ys-success-bg: #1E352C;
    --ys-warning-bg: #3A2C19;
    --ys-danger-bg: #3B211E;
    --ys-info-bg: #1C3034;
  }
}

[data-ys="dark"] {
  --ys-ground: #17110E;
  --ys-surface: #241B17;
  --ys-surface-2: #30241E;
  --ys-rule: #4B3930;
  --ys-ink: #FFF5E9;
  --ys-body: #DDCEC2;
  --ys-muted: #AD988A;
  --ys-accent: #FF8B94;
  --ys-accent-lg: #FF6673;
  --ys-focus: #7FD0AF;
  --ys-success: #7FD0AF;
  --ys-warning: #E4B96B;
  --ys-danger: #FF958D;
  --ys-info: #82C5D0;
  --ys-success-bg: #1E352C;
  --ys-warning-bg: #3A2C19;
  --ys-danger-bg: #3B211E;
  --ys-info-bg: #1C3034;
}

body:has(.ys-page) {
  margin: 0;
  background: var(--ys-ground);
  color: var(--ys-body);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

body:has(.ys-page) > .ys-heart-field { display: none !important; }

.ys-page {
  min-height: var(--ys-vh);
  background:
    radial-gradient(circle at 92% 3%, color-mix(in srgb, var(--ys-accent) 7%, transparent) 0, transparent 27rem),
    var(--ys-ground) !important;
  color: var(--ys-body) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

.ys-page h1,
.ys-page h2,
.ys-page h3 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  color: var(--ys-ink);
  text-wrap: balance;
}

.ys-page h1 { letter-spacing: -.035em !important; }
.ys-page h2 { letter-spacing: -.025em !important; }
.ys-page p { text-wrap: pretty; }
.ys-page button,
.ys-page input,
.ys-page textarea,
.ys-page select { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; }

.ys-page button,
.ys-page a { touch-action: manipulation; }

.ys-page button { min-height: 48px; }

.ys-page .ys-site-nav,
.ys-builder-bar,
.ys-checkout-bar {
  min-height: 72px;
  padding: 12px max(24px, calc((100vw - var(--ys-page)) / 2)) !important;
  background: color-mix(in srgb, var(--ys-surface) 94%, transparent) !important;
  border-bottom: 1px solid var(--ys-rule) !important;
  box-shadow: 0 8px 30px -28px rgba(53,34,26,.65);
  backdrop-filter: blur(18px) saturate(1.2) !important;
}

.ys-page .ys-site-nav img,
.ys-builder-bar img,
.ys-checkout-bar img { width: 38px !important; height: 38px !important; }

.ys-page .ys-site-nav a[href="/builder"],
.ys-page .ys-site-nav a[href^="mailto:"],
.ys-page--landing a[href="/builder"],
.ys-page--not-found a[href="/builder"] {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 13px 22px !important;
  border-radius: var(--ys-radius-sm) !important;
  background: var(--ys-accent) !important;
  color: #FFF8EF !important;
  box-shadow: none !important;
  animation: none !important;
  font-weight: 800 !important;
}

.ys-page a:hover,
.ys-page button:hover { filter: brightness(.97); }

/* Landing */
.ys-page--landing > div:first-child { display: none !important; }

.ys-landing-hero {
  width: min(100%, var(--ys-page));
  margin: 0 auto;
  padding: 88px 32px 80px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .7fr);
  grid-template-rows: repeat(5, auto);
  align-items: center !important;
  column-gap: clamp(48px, 7vw, 108px);
  text-align: left !important;
}

.ys-landing-hero > p,
.ys-landing-hero > h1,
.ys-landing-hero > div:not(:last-child) { grid-column: 1; }

.ys-landing-hero > p:first-child {
  margin: 0 0 18px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .2em !important;
  color: var(--ys-accent) !important;
}

.ys-landing-hero > h1 {
  max-width: 11ch !important;
  margin: 0 0 24px !important;
  font-size: clamp(3.7rem, 6.5vw, 6.6rem) !important;
  font-weight: 600 !important;
  line-height: .91 !important;
}

.ys-landing-hero > h1 em { color: var(--ys-accent) !important; }

.ys-landing-hero > h1 + p {
  max-width: 46ch !important;
  margin: 0 0 30px !important;
  font-size: 17px !important;
  line-height: 1.72 !important;
}

.ys-landing-hero > h1 + p + div {
  justify-content: flex-start !important;
  margin-bottom: 20px !important;
}

.ys-landing-hero > h1 + p + div > a {
  border-radius: var(--ys-radius-sm) !important;
  animation: none !important;
  box-shadow: none !important;
}

.ys-landing-hero > h1 + p + div > a[href^="#"] {
  border-color: var(--ys-rule) !important;
  color: var(--ys-ink) !important;
  background: var(--ys-surface) !important;
}

.ys-landing-hero > p:nth-of-type(3) {
  margin: 0 !important;
  font-size: 13px !important;
}

.ys-landing-hero > div:last-child {
  grid-column: 2;
  grid-row: 1 / -1;
  margin: 0 !important;
  filter: drop-shadow(0 38px 55px rgba(53,34,26,.22)) !important;
  transform: rotate(2deg);
}

.ys-trust-strip {
  padding: 26px max(24px, calc((100vw - var(--ys-page)) / 2)) !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px !important;
  background: var(--ys-surface) !important;
}

.ys-trust-strip > * {
  justify-content: center;
  min-height: 44px;
  padding: 10px 14px;
  border-right: 1px solid var(--ys-rule);
}
.ys-trust-strip > *:last-child { border-right: 0; }

.ys-section {
  width: min(100%, var(--ys-page)) !important;
  max-width: var(--ys-page) !important;
  margin: 0 auto !important;
  padding: 104px 32px !important;
}

.ys-section > p:first-child {
  font-size: 12px !important;
  letter-spacing: .2em !important;
  margin-bottom: 14px !important;
}

.ys-section > h2 {
  max-width: 16ch;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(2.6rem, 5vw, 4.6rem) !important;
  font-weight: 600 !important;
  line-height: .98 !important;
}

.ys-intents > div:last-child {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.ys-intents > div:last-child > div {
  margin: 0 !important;
  border: 1px solid var(--ys-rule) !important;
  border-radius: var(--ys-radius-lg) !important;
  background: var(--ys-surface) !important;
  box-shadow: var(--ys-shadow-sm) !important;
}

.ys-intents > div:last-child > div > div:last-child { padding: 16px 17px 18px !important; }
.ys-intents > div:last-child h3 { font-size: 15px !important; color: var(--ys-ink) !important; }
.ys-intents > div:last-child p { font-size: 13px !important; line-height: 1.5 !important; }

.ys-how {
  width: 100% !important;
  max-width: none !important;
  background: var(--ys-surface) !important;
  border-top: 1px solid var(--ys-rule);
  border-bottom: 1px solid var(--ys-rule);
}

.ys-how > * { max-width: var(--ys-page); margin-left: auto !important; margin-right: auto !important; }
.ys-how > div:last-child {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: var(--ys-page) !important;
  gap: 18px !important;
}
.ys-how > div:last-child > div {
  display: block !important;
  min-height: 250px;
  padding: 28px !important;
  border: 1px solid var(--ys-rule) !important;
  border-radius: var(--ys-radius-lg) !important;
  background: var(--ys-ground) !important;
  box-shadow: none !important;
  transform: none !important;
}
.ys-how > div:last-child > div > div:first-child { margin-bottom: 30px; }

.ys-themes > div:last-child {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
.ys-themes > div:last-child > div {
  min-height: 190px;
  display: flex !important;
  align-items: flex-end;
  border-radius: var(--ys-radius-lg) !important;
  box-shadow: var(--ys-shadow-md) !important;
}

.ys-pricing {
  width: 100% !important;
  max-width: none !important;
  background: #35221A !important;
}
.ys-pricing > p,
.ys-pricing > h2 { color: #FFF5E9 !important; }
.ys-pricing > div:last-child {
  background: #FFF9F1 !important;
  color: #59483E !important;
  border: 0 !important;
  border-radius: var(--ys-radius-lg) !important;
  box-shadow: none !important;
}
.ys-pricing > div:last-child a { border-radius: var(--ys-radius-sm) !important; }

.ys-faq { max-width: 760px !important; padding-bottom: 112px !important; }
.ys-faq > div:last-child > div {
  border-radius: var(--ys-radius-md) !important;
  border-color: var(--ys-rule) !important;
  background: var(--ys-surface) !important;
  box-shadow: none !important;
}

.ys-site-footer {
  padding: 64px 28px !important;
  background: var(--ys-surface) !important;
}
.ys-site-footer > img { width: 54px !important; height: 54px !important; }

/* Builder */
.ys-page--builder { background: var(--ys-ground) !important; }
.ys-builder-bar { box-shadow: none; }
.ys-builder-bar > div:first-child { max-width: var(--ys-page) !important; }
.ys-builder-bar > div:last-child {
  width: min(640px, calc(100% - 48px));
  height: 5px;
  margin: 8px auto 0 !important;
  gap: 0 !important;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ys-surface-2);
}
.ys-builder-bar > div:last-child > div { height: 100% !important; border-radius: 0 !important; }

.ys-builder-layout {
  width: min(100%, var(--ys-page));
  margin: 0 auto;
  gap: 0 !important;
}

.ys-page--builder .dc-form-col {
  width: 100%;
  max-width: 680px !important;
  padding: 56px 40px 120px !important;
}

.ys-page--builder .dc-form-col > div > p:first-child {
  display: inline-block;
  margin-bottom: 16px !important;
  color: var(--ys-muted) !important;
  font-size: 13px !important;
}
.ys-page--builder .dc-form-col > div > p:nth-child(2) {
  margin-bottom: 8px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ys-accent) !important;
}
.ys-page--builder .dc-form-col > div > h2 {
  margin-bottom: 36px !important;
  font-size: clamp(2.4rem, 5vw, 4.1rem) !important;
  font-weight: 600 !important;
  line-height: .98 !important;
}

.ys-page--builder .dc-input {
  min-height: 52px;
  padding: 15px 16px !important;
  border: 1px solid var(--ys-rule) !important;
  border-radius: var(--ys-radius-sm) !important;
  background: var(--ys-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.ys-page--builder .dc-input:focus {
  border-color: var(--ys-success) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ys-success) 16%, transparent) !important;
}

.ys-page--builder [data-ask] {
  border: 1px solid var(--ys-rule) !important;
  border-radius: var(--ys-radius-md) !important;
  background: var(--ys-surface) !important;
  box-shadow: none !important;
}
.ys-page--builder [data-ask]:hover { transform: translateY(-2px); box-shadow: var(--ys-shadow-sm) !important; }
.ys-page--builder button { border-radius: var(--ys-radius-sm) !important; }

.ys-page--builder .dc-form-col + div {
  border-left: 1px solid var(--ys-rule) !important;
  background: var(--ys-surface-2) !important;
}

/* Checkout */
.ys-page--checkout > div:not(.ys-checkout-bar) {
  position: relative;
}
.ys-page--checkout > .ys-checkout-bar + div,
.ys-page--checkout > .ys-checkout-bar ~ div:not([style*="position:fixed"]) {
  max-width: 680px !important;
}
.ys-page--checkout h2 {
  font-size: clamp(2.5rem, 7vw, 4rem) !important;
  font-weight: 600 !important;
  line-height: .98 !important;
}
.ys-page--checkout button,
.ys-page--checkout a { border-radius: var(--ys-radius-sm) !important; }
.ys-page--checkout [style*="border-radius:24px"],
.ys-page--checkout [style*="border-radius:28px"],
.ys-page--checkout [style*="border-radius:20px"] {
  border-radius: var(--ys-radius-lg) !important;
  border-color: var(--ys-rule) !important;
  box-shadow: var(--ys-shadow-sm) !important;
}

/* Dashboard */
.ys-page--dashboard { background: var(--ys-ground) !important; }
.ys-dashboard-header {
  padding: 22px max(24px, calc((100vw - 780px) / 2)) 30px !important;
  background: #35221A !important;
  color: #FFF5E9 !important;
  border-radius: 0 !important;
}
.ys-dashboard-header h1 { color: #FFF5E9 !important; font-weight: 600 !important; }
.ys-page--dashboard > div:last-child {
  max-width: 760px !important;
  padding: 34px 24px 96px !important;
  gap: 18px !important;
}
.ys-page--dashboard > div:last-child > div,
.ys-page--dashboard > div:last-child > form {
  border: 1px solid var(--ys-rule) !important;
  border-radius: var(--ys-radius-lg) !important;
  background: var(--ys-surface) !important;
  box-shadow: none !important;
}
.ys-page--dashboard button,
.ys-page--dashboard a { border-radius: var(--ys-radius-sm) !important; }
.ys-dashboard-status { order: 1; }
.ys-dashboard-library { order: 2; }
.ys-dashboard-timeline { order: 3; }
.ys-dashboard-stats { order: 4; }
.ys-dashboard-reactions { order: 5; }
.ys-dashboard-repair { order: 6; }
.ys-dashboard-logout { order: 20; margin-top: 10px; }
.ys-dashboard-status > div:first-child { opacity: .45; }
.ys-dashboard-status > div:nth-child(2) > div:nth-child(2) {
  font-size: 42px !important;
  animation: none !important;
}

/* Editorial information pages */
.ys-page--about > section:first-of-type,
.ys-page--business > section:first-of-type {
  max-width: 880px !important;
  padding: 112px 28px 72px !important;
}
.ys-page--about > section:first-of-type h1,
.ys-page--business > section:first-of-type h1 {
  max-width: 12ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(3.2rem, 8vw, 6rem) !important;
  font-weight: 600 !important;
  line-height: .92 !important;
}
.ys-page--about > section:nth-of-type(2) { max-width: 760px !important; }
.ys-page--about > section:nth-of-type(2) > div { gap: 18px !important; }
.ys-page--about > section:nth-of-type(2) > div > div {
  padding: 30px !important;
  border: 1px solid var(--ys-rule) !important;
  border-radius: var(--ys-radius-lg) !important;
  background: var(--ys-surface) !important;
  box-shadow: none !important;
}

.ys-page--business > section:not(:first-of-type) {
  max-width: var(--ys-page);
  margin: 0 auto;
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.ys-page--business > section a { border-radius: var(--ys-radius-sm) !important; animation: none !important; box-shadow: none !important; }
.ys-page--business > section:nth-of-type(2) > div,
.ys-page--business > section:nth-of-type(3) > div {
  gap: 18px !important;
}
.ys-page--business > section:nth-of-type(2) > div > div,
.ys-page--business > section:nth-of-type(3) > div > div {
  border: 1px solid var(--ys-rule) !important;
  border-radius: var(--ys-radius-lg) !important;
  background: var(--ys-surface) !important;
  box-shadow: none !important;
}

.ys-page--legal > div:nth-of-type(1) { padding-top: 88px !important; }
.ys-page--legal > div:nth-of-type(1) h1 {
  font-size: clamp(3rem, 7vw, 5rem) !important;
  font-weight: 600 !important;
}
.ys-page--legal > div:nth-of-type(2) { max-width: var(--ys-reading) !important; }
.ys-page--legal > div:nth-of-type(2) > div {
  padding: clamp(24px, 5vw, 52px) !important;
  border: 1px solid var(--ys-rule) !important;
  border-radius: var(--ys-radius-lg) !important;
  background: var(--ys-surface) !important;
  box-shadow: none !important;
}
.ys-page--legal .ys-prose { font-size: 16px !important; line-height: 1.78 !important; }
.ys-page--legal .ys-prose h2 { margin-top: 42px !important; font-size: 28px !important; }

.ys-page--not-found > div:nth-of-type(1) > div {
  padding: 58px 34px !important;
  border: 1px solid var(--ys-rule);
  border-radius: var(--ys-radius-xl);
  background: var(--ys-surface);
  box-shadow: var(--ys-shadow-md);
}
.ys-page--not-found h1 { font-size: clamp(3rem, 8vw, 5rem) !important; font-weight: 600 !important; }
.ys-page--not-found h1,
.ys-page--not-found h1 span {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
.ys-page--not-found a { border-radius: var(--ys-radius-sm) !important; animation: none !important; }

/* Reference and operator surfaces */
.ys-page--brand {
  padding: 72px 28px 100px !important;
  background: var(--ys-ground) !important;
  color: var(--ys-body) !important;
}
.ys-page--brand > div { max-width: var(--ys-page) !important; }

.ys-page--admin {
  background: #17110E !important;
  color: #DDCEC2 !important;
}
.ys-page--admin [style*="border-radius:24px"],
.ys-page--admin [style*="border-radius:18px"],
.ys-page--admin [style*="border-radius:16px"] {
  border-radius: var(--ys-radius-md) !important;
}
.ys-page--admin button { border-radius: var(--ys-radius-sm) !important; }
.ys-page--admin .yf-admin-bar {
  background: rgba(23,17,14,.96) !important;
  border-color: #4B3930 !important;
  min-height: 72px;
}

/* Recipient refinement: preserve each selected palette while making the
   reading surface calmer and the answer moment clearer. */
.ys-page--proposal { scroll-behavior: smooth; }
.ys-page--proposal section > div[data-reveal="true"] {
  width: min(100% - 32px, 720px) !important;
}
.ys-page--proposal [data-screen-label="Love Note"] > div > div,
.ys-page--proposal [data-screen-label="The Memory"] > div > div,
.ys-page--proposal [data-screen-label="The Question"] > div > div {
  border-radius: 20px !important;
}
.ys-page--proposal button { min-height: 48px; }

@media (max-width: 900px) {
  .ys-landing-hero {
    grid-template-columns: 1fr;
    text-align: center !important;
    padding: 64px 24px 70px !important;
  }
  .ys-landing-hero > p,
  .ys-landing-hero > h1,
  .ys-landing-hero > div:not(:last-child) { grid-column: 1; }
  .ys-landing-hero > h1 { margin-left: auto !important; margin-right: auto !important; }
  .ys-landing-hero > h1 + p { margin-left: auto !important; margin-right: auto !important; }
  .ys-landing-hero > h1 + p + div { justify-content: center !important; }
  .ys-landing-hero > div:last-child {
    grid-column: 1;
    grid-row: auto;
    margin-top: 52px !important;
    transform: none;
  }
  .ys-intents > div:last-child,
  .ys-themes > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ys-how > div:last-child { grid-template-columns: 1fr; max-width: 680px !important; }
  .ys-how > div:last-child > div { min-height: 0; }
}

@media (max-width: 620px) {
  .ys-page .ys-site-nav,
  .ys-builder-bar,
  .ys-checkout-bar { min-height: 64px; padding: 10px 16px !important; }
  .ys-page .ys-site-nav a[href="/builder"],
  .ys-page .ys-site-nav a[href^="mailto:"] { padding: 11px 14px !important; }
  .ys-landing-hero { padding-top: 52px !important; }
  .ys-landing-hero > h1 { font-size: clamp(3.25rem, 15vw, 4.8rem) !important; }
  .ys-landing-hero > h1 + p + div { width: 100%; }
  .ys-landing-hero > h1 + p + div > a { width: 100%; justify-content: center; }
  .ys-trust-strip { grid-template-columns: 1fr 1fr; padding: 20px 14px !important; }
  .ys-trust-strip > * { border-right: 0; justify-content: flex-start; }
  .ys-section { padding: 76px 18px !important; }
  .ys-section > h2 { font-size: clamp(2.5rem, 12vw, 3.5rem) !important; }
  .ys-intents > div:last-child,
  .ys-themes > div:last-child { gap: 12px !important; }
  .ys-intents > div:last-child h3 { font-size: 13px !important; }
  .ys-how > div:last-child > div { padding: 22px !important; }
  .ys-page--builder .dc-form-col { padding: 38px 18px 120px !important; }
  .ys-page--builder .dc-form-col > div > h2 { font-size: clamp(2.35rem, 12vw, 3.25rem) !important; }
  .ys-page--builder .dc-form-col + div { border-left: 0 !important; }
  .ys-dashboard-header { padding: 16px 18px 24px !important; }
  .ys-page--legal > div:nth-of-type(1) { padding-top: 58px !important; }
  .ys-page--legal > div:nth-of-type(2) { padding-left: 14px !important; padding-right: 14px !important; }
  .ys-page--legal > div:nth-of-type(2) > div { border-radius: var(--ys-radius-md) !important; }
}

/* ==========================================================================
   Yessify product system · V2
   A bolder, product-led layer: editorial scale, graphic contrast, fewer cards,
   and clearer working surfaces. Scoped to .ys-page so proposal themes remain
   authored by themes.js.
   ========================================================================== */

:root,
[data-ys="light"] {
  --ys-ground: #FFFFFF;
  --ys-surface: #FFFDF8;
  --ys-surface-2: #E8DED1;
  --ys-rule: #CFC2B4;
  --ys-ink: #17110E;
  --ys-body: #4C423B;
  --ys-muted: #786C64;
  --ys-accent: #E91636;
  --ys-accent-lg: #FF2F51;
  --ys-pop: #C8FF3D;
  /* Stage surfaces stay dark in both schemes; never derive them from ink. */
  --ys-stage: #17110E;
  --ys-on-stage: #FFF9F0;
  --ys-lilac: #A49AFF;
  --ys-focus: #146C4E;
  --ys-radius-sm: 12px;
  --ys-radius-md: 18px;
  --ys-radius-lg: 28px;
  --ys-radius-xl: 44px;
  --ys-shadow-sm: 0 10px 0 rgba(23,17,14,.08);
  --ys-shadow-md: 0 24px 70px -34px rgba(23,17,14,.38);
  --ys-shadow-lg: 0 45px 100px -42px rgba(23,17,14,.55);
  --ys-page: 1240px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-ys="light"]) {
    --ys-ground: #110E0C;
    --ys-surface: #1E1916;
    --ys-surface-2: #2B2420;
    --ys-rule: #493D36;
    --ys-ink: #FFF9F0;
    --ys-body: #D9CEC5;
    --ys-muted: #A99C92;
    --ys-accent: #FF4964;
    --ys-accent-lg: #FF6A7E;
    --ys-pop: #C8FF3D;
    --ys-stage: #1E1916;
    --ys-on-stage: #FFF9F0;
  }
}

.ys-page {
  background: var(--ys-ground) !important;
  background-image: none !important;
}

.ys-page h1,
.ys-page h2,
.ys-page h3 {
  color: var(--ys-ink);
  font-weight: 600 !important;
}

.ys-page :focus-visible {
  outline: 3px solid var(--ys-focus) !important;
  outline-offset: 4px;
}

.ys-page .ys-site-nav,
.ys-builder-bar,
.ys-checkout-bar {
  min-height: 82px;
  padding: 14px max(24px, calc((100vw - var(--ys-page)) / 2)) !important;
  background: color-mix(in srgb, var(--ys-ground) 93%, transparent) !important;
  border-color: color-mix(in srgb, var(--ys-ink) 16%, transparent) !important;
  box-shadow: none !important;
}

.ys-wordmark span,
.ys-builder-bar > div:first-child > span span,
.ys-checkout-bar > span span {
  font-size: 21px !important;
  font-weight: 700 !important;
}

.ys-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
}

.ys-nav-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ys-body);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.ys-wordmark { min-height: 44px; }

.ys-nav-links a:hover { color: var(--ys-accent); }

.ys-page .ys-site-nav a[href="/builder"],
.ys-page--landing a[href="/builder"],
.ys-page--not-found a[href="/builder"] {
  border: 1px solid var(--ys-ink) !important;
  border-radius: 999px !important;
  background: var(--ys-ink) !important;
  color: var(--ys-ground) !important;
  box-shadow: none !important;
  transition: transform .2s ease, background .2s ease;
}

.ys-page .ys-site-nav a[href="/builder"]:hover,
.ys-page--landing a[href="/builder"]:hover {
  transform: translateY(-2px);
  filter: none;
}

/* Landing: product stage */
.ys-landing-hero {
  width: min(100%, var(--ys-page));
  min-height: min(780px, calc(100vh - 82px));
  margin: 0 auto;
  padding: 38px 24px 58px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr) !important;
  gap: clamp(42px, 6vw, 88px) !important;
  align-items: center !important;
  text-align: left !important;
}

.ys-hero-copy { min-width: 0; }

.ys-hero-copy .ys-kicker {
  width: fit-content;
  margin: 0 0 26px !important;
  padding: 8px 12px;
  border: 1px solid var(--ys-ink);
  border-radius: 999px;
  color: var(--ys-ink) !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
}

.ys-hero-copy h1 {
  max-width: 8.5ch !important;
  margin: 0 0 30px !important;
  font-size: clamp(5rem, 8vw, 7.9rem) !important;
  font-weight: 600 !important;
  line-height: .82 !important;
  letter-spacing: -.06em !important;
}

.ys-hero-copy h1 em {
  display: block;
  color: var(--ys-accent) !important;
  font-weight: 500;
}

.ys-hero-copy .ys-hero-sub {
  max-width: 47ch !important;
  margin: 0 0 32px !important;
  color: var(--ys-body) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

.ys-hero-actions {
  justify-content: flex-start !important;
  margin: 0 0 20px !important;
}

.ys-hero-actions > a {
  min-height: 56px !important;
  border-radius: 999px !important;
}

.ys-hero-actions > a[href="/builder"] {
  padding: 16px 25px !important;
  background: var(--ys-accent) !important;
  border-color: var(--ys-accent) !important;
}

.ys-hero-actions > a[href^="#"] {
  padding: 15px 24px !important;
  border: 1px solid var(--ys-ink) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--ys-ink) !important;
}

.ys-hero-trust {
  margin: 0 !important;
  color: var(--ys-muted) !important;
  font-size: 12px !important;
}

.ys-hero-stage {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 44px 44px 12px 44px;
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.28) 0 4px, transparent 5px),
    radial-gradient(circle at 22% 74%, rgba(255,255,255,.22) 0 6px, transparent 7px),
    linear-gradient(145deg, #FF4964 0%, #E91636 65%, #B90A27 100%);
  box-shadow: var(--ys-shadow-lg);
  isolation: isolate;
}

.ys-hero-stage::before {
  content: "YES?";
  position: absolute;
  inset: auto auto 18px -7px;
  z-index: -1;
  color: rgba(255,255,255,.13);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(7rem, 13vw, 12rem);
  font-style: italic;
  font-weight: 700;
  line-height: .7;
  letter-spacing: -.08em;
}

.ys-stage-label {
  position: absolute;
  top: 28px;
  left: 30px;
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.ys-stage-note {
  position: absolute;
  z-index: 6;
  padding: 14px 16px;
  border: 1px solid var(--ys-ink);
  background: var(--ys-pop);
  color: #17110E;
  font-size: 12px;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 7px 7px 0 #17110E;
}

.ys-stage-note--top { top: 88px; right: 22px; transform: rotate(4deg); }
.ys-stage-note--bottom { left: 24px; bottom: 60px; transform: rotate(-5deg); background: #FFF9F0; }

.ys-demo-phone-wrap {
  margin: 18px 0 0 !important;
  filter: drop-shadow(0 38px 45px rgba(62,0,12,.42)) !important;
  transform: rotate(-3deg);
}

.ys-demo-phone {
  width: 268px !important;
  height: 582px !important;
  border-width: 8px !important;
}

.ys-trust-strip {
  padding: 0 max(24px, calc((100vw - var(--ys-page)) / 2)) !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  border: 0 !important;
  background: var(--ys-stage) !important;
}

.ys-trust-strip > * {
  min-height: 76px;
  justify-content: flex-start !important;
  padding: 18px 22px !important;
  border-right: 1px solid rgba(255,255,255,.18) !important;
  color: var(--ys-on-stage) !important;
  font-size: 12px !important;
  letter-spacing: .02em;
}

.ys-trust-strip > * > span { font-size: 18px; }

.ys-section {
  width: min(100%, var(--ys-page)) !important;
  max-width: var(--ys-page) !important;
  padding: 120px 24px !important;
}

.ys-section > p:first-child {
  margin: 0 0 20px !important;
  color: var(--ys-accent) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .2em !important;
  text-align: left !important;
}

.ys-section > h2 {
  max-width: 11ch !important;
  margin: 0 0 24px !important;
  font-size: clamp(4rem, 6.8vw, 6.3rem) !important;
  line-height: .88 !important;
  text-align: left !important;
  letter-spacing: -.045em !important;
}

.ys-section > h2 + p {
  max-width: 50ch !important;
  margin: 0 0 52px !important;
  text-align: left !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.ys-intent-grid {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 18px !important;
}

.ys-intent-grid > div {
  display: flex !important;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  margin: 0 !important;
  border: 1px solid var(--ys-ink) !important;
  border-radius: 18px !important;
  background: var(--ys-surface) !important;
  box-shadow: 6px 6px 0 var(--ys-ink) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}

.ys-intent-grid > div:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ys-accent) !important;
}

.ys-intent-grid > div > div:first-child {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  border-radius: 0 !important;
  background: var(--ys-surface-2) !important;
}

.ys-intent-grid > div > div:last-child {
  min-height: 132px;
  padding: 18px !important;
}

.ys-intent-grid > div > div:last-child > div:first-child { display: none; }
.ys-intent-grid h3 { margin-bottom: 8px !important; font-size: 22px !important; line-height: 1.05 !important; }
.ys-intent-grid p { color: var(--ys-muted) !important; font-size: 12px !important; line-height: 1.5 !important; }

.ys-catalogue-cta {
  width: fit-content;
  min-height: 54px;
  margin: 42px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 14px 21px;
  border: 1px solid var(--ys-ink);
  border-radius: 999px;
  background: transparent !important;
  color: var(--ys-ink) !important;
  font-weight: 800;
  text-decoration: none;
}

.ys-catalogue-cta span { font-size: 22px; line-height: 1; }

.ys-how {
  width: 100% !important;
  max-width: none !important;
  padding: 128px max(24px, calc((100vw - var(--ys-page)) / 2)) !important;
  border: 0 !important;
  background: var(--ys-stage) !important;
  color: #D8CCC3;
}

.ys-how > p:first-child { color: var(--ys-pop) !important; }
.ys-how > h2 { max-width: 10ch !important; color: var(--ys-on-stage) !important; }

.ys-step-grid {
  max-width: none !important;
  margin-top: 72px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 0 !important;
}

.ys-page--landing .ys-how > .ys-step-grid > div {
  min-height: 330px !important;
  display: flex !important;
  flex-direction: column;
  padding: 30px !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.45) !important;
  border-right: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.ys-page--landing .ys-how > .ys-step-grid > div:last-child { border-right: 0 !important; }
.ys-page--landing .ys-how > .ys-step-grid > div > div:first-child {
  width: 52px !important;
  height: 52px !important;
  margin: 0 0 auto !important;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50% !important;
  background: transparent !important;
  animation: none !important;
}
.ys-how > .ys-step-grid h3 { color: var(--ys-on-stage) !important; font-size: 32px !important; }
.ys-how > .ys-step-grid p { color: #CFC1B7 !important; }
.ys-how > .ys-step-grid p:first-child { color: var(--ys-pop) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }

.ys-themes {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  grid-template-rows: auto auto 1fr;
  gap: 0 72px;
}

.ys-themes > p:first-child,
.ys-themes > h2,
.ys-themes > h2 + p { grid-column: 1; }

.ys-theme-grid {
  grid-column: 2;
  grid-row: 1 / 4;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.ys-theme-grid > div {
  min-height: 190px !important;
  border: 1px solid var(--ys-ink) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

.ys-theme-grid > div:nth-child(3n+2) { transform: translateY(22px); }
.ys-theme-grid h3 { font-size: 23px !important; }

.ys-pricing {
  width: 100% !important;
  max-width: none !important;
  padding: 128px max(24px, calc((100vw - var(--ys-page)) / 2)) !important;
  display: grid;
  grid-template-columns: 1fr minmax(420px, .85fr);
  align-items: center;
  gap: 72px;
  background: var(--ys-accent) !important;
}

.ys-pricing > p,
.ys-pricing > h2 { grid-column: 1; color: var(--ys-on-stage) !important; }
.ys-pricing > p { align-self: end; color: var(--ys-on-stage) !important; }
.ys-pricing > h2 { margin-bottom: 0 !important; align-self: start; }

.ys-page--landing .ys-pricing > .ys-price-card {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 100%;
  max-width: 520px !important;
  margin: 0 !important;
  padding: 42px !important;
  border: 1px solid #17110E !important;
  border-radius: 28px !important;
  background: #17110E !important;
  color: var(--ys-on-stage) !important;
  box-shadow: 10px 10px 0 var(--ys-on-stage) !important;
}

.ys-page--landing .ys-pricing > .ys-price-card p,
.ys-page--landing .ys-pricing > .ys-price-card span { color: var(--ys-on-stage) !important; }
.ys-page--landing .ys-pricing > .ys-price-card > div:first-child { border-color: rgba(255,255,255,.2) !important; }
.ys-page--landing .ys-pricing > .ys-price-card > div:first-child > div span:last-child { font-size: 86px !important; }
.ys-page--landing .ys-pricing > .ys-price-card a[href="/builder"] {
  min-height: 58px !important;
  background: var(--ys-pop) !important;
  border-color: var(--ys-pop) !important;
  color: #17110E !important;
}

.ys-faq {
  max-width: var(--ys-page) !important;
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  grid-template-rows: auto 1fr;
  gap: 0 72px;
}

.ys-faq > p,
.ys-faq > h2 { grid-column: 1; }
.ys-faq-list { grid-column: 2; grid-row: 1 / 3; gap: 0 !important; }
.ys-faq-list > div {
  border: 0 !important;
  border-top: 1px solid var(--ys-ink) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.ys-faq-list > div:last-child { border-bottom: 1px solid var(--ys-ink) !important; }
.ys-faq-list > div > div { min-height: 74px; padding: 20px 4px !important; }
.ys-faq-list > div > p { padding: 0 36px 22px 4px !important; }

.ys-site-footer {
  padding: 82px 24px !important;
  border: 0 !important;
  background: var(--ys-stage) !important;
}
.ys-site-footer p,
.ys-site-footer a { color: var(--ys-on-stage) !important; }
.ys-site-footer > p:nth-of-type(1) { font-size: 42px !important; }
.ys-site-footer > p:nth-of-type(2) { color: var(--ys-pop) !important; }

/* Builder: a focused studio, not a decorated form */
.ys-page--builder { background: var(--ys-ground) !important; }
.ys-builder-bar {
  background: var(--ys-stage) !important;
  border: 0 !important;
  color: var(--ys-on-stage);
}
.ys-builder-bar a,
.ys-builder-bar span { color: var(--ys-on-stage) !important; }
.ys-builder-bar > div:last-child {
  position: absolute;
  inset: auto 0 0;
  width: 100% !important;
  height: 4px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #3A312C !important;
}
.ys-builder-bar > div:last-child > div { background: var(--ys-accent) !important; }

/* Keep workflow identities optically centered regardless of the width of the
   back action or status/action on either side. Flex space-between centered the
   leftover space, not the viewport, which shifted all three marks. */
.ys-builder-bar > div:first-child,
.ys-checkout-bar,
.ys-dashboard-header > div:first-child {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.ys-builder-bar > div:first-child > :first-child,
.ys-checkout-bar > :first-child,
.ys-dashboard-header > div:first-child > :first-child {
  min-width: 0;
  justify-self: start;
}
.ys-builder-bar > div:first-child > :nth-child(2),
.ys-checkout-bar > :nth-child(2),
.ys-dashboard-header > div:first-child > :nth-child(2) {
  justify-self: center;
}
.ys-builder-bar > div:first-child > :last-child,
.ys-checkout-bar > :last-child,
.ys-dashboard-header > div:first-child > :last-child {
  min-width: 0;
  justify-self: end;
  text-align: right;
}

.ys-builder-layout {
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - 82px);
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(400px, .82fr) !important;
  align-items: stretch !important;
}

.ys-page--builder .dc-form-col {
  width: 100%;
  max-width: none !important;
  padding: 70px clamp(34px, 6vw, 96px) 130px !important;
  background: var(--ys-ground);
}

.ys-builder-step { width: min(100%, 780px); margin: 0 auto; }
.ys-page--builder .dc-form-col .ys-builder-step > p:first-child {
  margin-bottom: 28px !important;
  padding-left: 15px;
  border-left: 3px solid var(--ys-accent);
  color: var(--ys-muted) !important;
  font-size: 13px !important;
}
.ys-page--builder .dc-form-col .ys-builder-step > p:nth-child(2) {
  width: fit-content;
  margin: 0 0 16px !important;
  padding: 7px 10px;
  border: 1px solid var(--ys-ink);
  border-radius: 999px;
  color: var(--ys-ink) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ys-page--builder .dc-form-col .ys-builder-step > h2 {
  max-width: 12ch;
  margin: 0 0 46px !important;
  font-size: clamp(3.7rem, 5.5vw, 5.8rem) !important;
  line-height: .88 !important;
  letter-spacing: -.045em !important;
}

.ys-builder-intent-grid {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 14px !important;
}
.ys-page--builder [data-ask] {
  overflow: hidden;
  border: 1px solid var(--ys-ink) !important;
  border-radius: 16px !important;
  background: var(--ys-surface) !important;
  box-shadow: 4px 4px 0 var(--ys-ink) !important;
}
.ys-page--builder [data-ask]:hover {
  transform: translate(-2px,-2px);
  box-shadow: 7px 7px 0 var(--ys-accent) !important;
}
.ys-page--builder [data-ask] > div:not([style*="position:absolute"]):first-of-type {
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  border-radius: 0 !important;
}
.ys-page--builder [data-ask] > div:last-child { padding: 14px !important; }
.ys-page--builder [data-ask] > div:last-child > div:first-child { display: none; }
.ys-page--builder [data-ask] p:first-of-type { font-size: 18px !important; }

.ys-page--builder .dc-input {
  min-height: 58px;
  padding: 16px 18px !important;
  border: 1px solid var(--ys-ink) !important;
  border-radius: 12px !important;
  background: var(--ys-surface) !important;
  box-shadow: none !important;
}

.ys-builder-actions { padding-top: 24px; border-top: 1px solid var(--ys-rule); }
.ys-builder-actions button { min-height: 56px !important; border-radius: 999px !important; }

.ys-builder-preview {
  border: 0 !important;
  border-left: 1px solid #332924 !important;
  background: var(--ys-stage) !important;
}
.ys-builder-preview-inner {
  color: var(--ys-on-stage);
  background: transparent !important;
}
.ys-builder-preview-inner > div:first-child p { color: #B8AAA0 !important; }
.ys-builder-preview-inner > div:nth-child(2) { background: #332924 !important; }

.ys-builder-preview-trigger {
  border: 1px solid var(--ys-on-stage) !important;
  border-radius: 999px !important;
  background: var(--ys-stage) !important;
  color: var(--ys-on-stage) !important;
  box-shadow: 5px 5px 0 var(--ys-accent) !important;
}
.ys-builder-mobile-nav { background: rgba(255,253,248,.96) !important; }

/* Checkout: high-trust completion surface */
.ys-page--checkout { background: var(--ys-ground) !important; }
.ys-checkout-bar {
  background: var(--ys-stage) !important;
  border: 0 !important;
}
.ys-checkout-bar a,
.ys-checkout-bar span { color: var(--ys-on-stage) !important; }

.ys-checkout-shell {
  width: min(100%, 820px) !important;
  max-width: 820px !important;
  min-height: calc(100vh - 82px);
  padding: 76px 24px 110px !important;
}
.ys-checkout-idle > p:first-child {
  width: fit-content;
  margin-bottom: 16px !important;
  padding: 7px 11px;
  border: 1px solid var(--ys-ink);
  border-radius: 999px;
  color: var(--ys-ink) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ys-checkout-idle > h2 {
  margin: 0 0 38px !important;
  font-size: clamp(4.2rem, 9vw, 7rem) !important;
  line-height: .85 !important;
  letter-spacing: -.05em !important;
}
.ys-page--checkout [style*="border-radius:22px"],
.ys-page--checkout [style*="border-radius:16px"],
.ys-page--checkout [style*="border-radius:20px"] {
  border-color: var(--ys-ink) !important;
  border-radius: 18px !important;
  box-shadow: 6px 6px 0 var(--ys-ink) !important;
}
.ys-page--checkout button {
  min-height: 48px !important;
  border-radius: 999px !important;
}

/* Dashboard: operational clarity */
.ys-dashboard-header {
  padding: 30px max(24px, calc((100vw - var(--ys-page)) / 2)) 54px !important;
  border-radius: 0 !important;
  background: var(--ys-stage) !important;
  color: var(--ys-on-stage) !important;
}
.ys-dashboard-header > div:first-child { margin-bottom: 44px !important; }
.ys-dashboard-header h1 {
  max-width: 14ch;
  color: var(--ys-on-stage) !important;
  font-size: clamp(4rem, 7vw, 6.7rem) !important;
  line-height: .82 !important;
  letter-spacing: -.05em !important;
}
.ys-dashboard-header > p:nth-of-type(1) {
  color: var(--ys-pop) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.ys-dashboard-shell {
  width: min(100%, var(--ys-page));
  max-width: var(--ys-page) !important;
  padding: 54px 24px 110px !important;
}

.ys-dashboard-recovery {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: clamp(30px, 6vw, 72px) !important;
  border: 1px solid var(--ys-ink) !important;
  border-radius: 28px !important;
  background: var(--ys-surface) !important;
  box-shadow: 9px 9px 0 var(--ys-accent) !important;
}
.ys-dashboard-recovery h2 {
  max-width: 10ch;
  margin: 0 0 18px;
  font-size: clamp(3rem, 6vw, 5.2rem) !important;
  line-height: .9;
}
.ys-dashboard-recovery p { max-width: 58ch; line-height: 1.65; }
.ys-dashboard-recovery label { margin-top: 32px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ys-dashboard-recovery input { min-height: 58px !important; padding: 14px 16px; border: 1px solid var(--ys-ink); background: var(--ys-ground); }
.ys-dashboard-recovery button { min-height: 54px !important; padding: 13px 26px !important; border-radius: 999px !important; background: var(--ys-stage) !important; color: var(--ys-on-stage) !important; border-color: var(--ys-on-stage) !important; }

.ys-dashboard-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 18px;
}
.ys-dashboard-grid > * { margin: 0 !important; }
.ys-dashboard-status { grid-column: 1 / -1; order: 1; min-height: 330px; }
.ys-dashboard-library { grid-column: span 7; order: 2; }
.ys-dashboard-timeline { grid-column: span 5; order: 3; }
.ys-dashboard-stats { grid-column: span 7; order: 4; }
.ys-dashboard-reactions { grid-column: span 5; order: 5; }
.ys-dashboard-repair { grid-column: 1 / -1; order: 6; }
.ys-dashboard-logout { grid-column: 1 / -1; order: 20; }

.ys-page--dashboard .ys-dashboard-grid > div,
.ys-page--dashboard .ys-dashboard-grid > section {
  border: 1px solid var(--ys-ink) !important;
  border-radius: 20px !important;
  background: var(--ys-surface) !important;
  box-shadow: 5px 5px 0 rgba(23,17,14,.12) !important;
}

/* Information and internal surfaces inherit the same graphic discipline. */
.ys-page--about > section:first-of-type h1,
.ys-page--business > section:first-of-type h1,
.ys-page--legal > div:nth-of-type(1) h1,
.ys-page--not-found h1 {
  font-size: clamp(4rem, 8vw, 7rem) !important;
  line-height: .84 !important;
  letter-spacing: -.05em !important;
}
.ys-page--about > section:nth-of-type(2) > div > div,
.ys-page--business > section:nth-of-type(2) > div > div,
.ys-page--business > section:nth-of-type(3) > div > div,
.ys-page--legal > div:nth-of-type(2) > div,
.ys-page--not-found > div:nth-of-type(1) > div {
  border-color: var(--ys-ink) !important;
  box-shadow: 6px 6px 0 rgba(23,17,14,.14) !important;
}

@media (max-width: 980px) {
  .ys-nav-links { display: none; }
  .ys-landing-hero {
    min-height: 0;
    grid-template-columns: 1fr !important;
    padding: 68px 24px 72px !important;
    text-align: left !important;
  }
  .ys-hero-copy { width: min(100%, 720px); }
  .ys-hero-stage { width: min(100%, 620px); min-height: 630px; }
  .ys-intent-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .ys-themes { display: block; }
  .ys-theme-grid { margin-top: 54px !important; }
  .ys-pricing { grid-template-columns: 1fr; gap: 50px; }
  .ys-pricing > p,
  .ys-pricing > h2 { grid-column: 1; grid-row: auto; }
  .ys-page--landing .ys-pricing > .ys-price-card { grid-column: 1; grid-row: auto; }
  .ys-faq { display: block; }
  .ys-faq-list { margin-top: 54px; }
  .ys-builder-layout { grid-template-columns: minmax(0,1fr) 400px !important; }
  .ys-builder-intent-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 760px) {
  .ys-page .ys-site-nav,
  .ys-builder-bar,
  .ys-checkout-bar { min-height: 68px; padding: 10px 16px !important; }
  .ys-page .ys-site-nav img,
  .ys-builder-bar img,
  .ys-checkout-bar img { width: 34px !important; height: 34px !important; }
  .ys-landing-hero { padding: 48px 18px 56px !important; gap: 48px !important; }
  .ys-hero-copy h1 { font-size: clamp(4rem, 19vw, 6.1rem) !important; }
  .ys-hero-copy .ys-hero-sub { font-size: 15px !important; }
  .ys-hero-actions { width: 100%; }
  .ys-hero-actions > a { width: 100%; justify-content: center; text-align: center; }
  .ys-hero-stage { min-height: 530px; border-radius: 30px 30px 8px 30px; }
  .ys-demo-phone { width: 218px !important; height: 473px !important; border-radius: 39px !important; }
  .ys-stage-note { padding: 10px 11px; font-size: 12px; box-shadow: 4px 4px 0 #17110E; }
  .ys-stage-note--top { top: 72px; right: 8px; }
  .ys-stage-note--bottom { left: 8px; bottom: 40px; }
  .ys-stage-label { top: 20px; left: 20px; }
  .ys-trust-strip { grid-template-columns: 1fr 1fr !important; }
  .ys-trust-strip > * { min-height: 64px; padding: 14px !important; border-bottom: 1px solid rgba(255,255,255,.18); }
  .ys-section { padding: 88px 18px !important; }
  .ys-section > h2 { font-size: clamp(3.5rem, 16vw, 5.3rem) !important; }
  .ys-intent-grid { gap: 12px !important; }
  .ys-intent-grid > div { box-shadow: 4px 4px 0 var(--ys-ink) !important; }
  .ys-intent-grid > div > div:last-child { min-height: 120px; padding: 14px !important; }
  .ys-intent-grid h3 { font-size: 17px !important; }
  .ys-how { padding: 92px 18px !important; }
  .ys-step-grid { grid-template-columns: 1fr !important; margin-top: 48px !important; }
  .ys-page--landing .ys-how > .ys-step-grid > div { min-height: 250px !important; border-right: 0 !important; }
  .ys-theme-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .ys-theme-grid > div { min-height: 150px !important; }
  .ys-theme-grid > div:nth-child(3n+2) { transform: translateY(10px); }
  .ys-pricing { padding: 92px 18px !important; }
  .ys-page--landing .ys-pricing > .ys-price-card { padding: 28px !important; box-shadow: 6px 6px 0 #FFF9F0 !important; }
  .ys-faq { padding-bottom: 100px !important; }
  .ys-site-footer { padding: 68px 18px !important; }

  .ys-builder-layout { display: block !important; min-height: calc(100vh - 68px); }
  .ys-page--builder .dc-form-col { padding: 48px 18px 132px !important; }
  .ys-page--builder .dc-form-col .ys-builder-step > h2 { font-size: clamp(3.3rem, 15vw, 4.8rem) !important; }
  .ys-builder-intent-grid { gap: 11px !important; }
  .ys-page--builder [data-ask] { box-shadow: 3px 3px 0 var(--ys-ink) !important; }
  .ys-builder-preview { border-left: 0 !important; }
  .ys-builder-mobile-nav { padding: 12px 16px max(18px, env(safe-area-inset-bottom)) !important; }

  .ys-checkout-shell { min-height: calc(100vh - 68px); padding: 52px 18px 90px !important; }
  .ys-checkout-idle > h2 { font-size: clamp(3.7rem, 18vw, 5.4rem) !important; }
  .ys-dashboard-header { padding: 18px 18px 38px !important; }
  .ys-dashboard-header > div:first-child { margin-bottom: 32px !important; }
  .ys-dashboard-header h1 { font-size: clamp(3.5rem, 17vw, 5.5rem) !important; }
  .ys-dashboard-shell { padding: 34px 14px 90px !important; }
  .ys-dashboard-recovery { padding: 30px 22px !important; box-shadow: 6px 6px 0 var(--ys-accent) !important; }
  .ys-dashboard-grid { display: flex !important; flex-direction: column; }
  .ys-dashboard-grid > * { width: 100%; }
}

@media (max-width: 420px) {
  .ys-wordmark span { display: none; }
  .ys-checkout-bar > span > span,
  .ys-dashboard-header > div:first-child > span > span:last-child { display: none; }
  .ys-intent-grid { grid-template-columns: 1fr 1fr !important; }
  .ys-intent-grid > div > div:last-child { min-height: 112px; }
  .ys-intent-grid p { display: none; }
  .ys-builder-intent-grid { grid-template-columns: 1fr 1fr !important; }
}

/* Keep interface copy above the project's 12px legibility floor, including
   status-bar text and legacy inline eyebrow values inside the two previews. */
.ys-page--builder [style*="font-size:10px"],
.ys-page--proposal [style*="font-size:10px"] {
  font-size: 12px !important;
}