/* Clarity Web Manager - the Six Pieces skin (v0.31.0).

   Loaded only on a site whose theme setting is 'six'. The tokens - every
   colour, both type families, the one easing and the three durations - are
   the site's six_* settings, rendered by base_public.html into :root AFTER
   this file, so nothing below names a colour, a family or a curve: it names
   tokens. Built from the Website Builder reference template
   (0000-Software/Website Builder), after the guide "How To Make A Website
   Look Expensive - The Six Pieces".

   Rules this file keeps: tokens only; one --ease; nothing inline. The
   console's own chrome (header, menu, footer, buttons, every other block)
   reads the same tokens, so a site built this way is still a Clarity Web
   Manager site with its menu, forms, blog and analytics - in this skin. */

:root {
  /* derived from the tokens; never set by hand */
  --line:  color-mix(in srgb, var(--ink) 14%, transparent);
  --scrim: color-mix(in srgb, var(--bg) 72%, transparent);
  --sweep: color-mix(in srgb, var(--ink) 10%, transparent);
  --gutter:   16px;
  --max:      1180px;
  --measure:  60ch;
  --radius:   2px;
  --header-h: 80px;
  /* the console's chrome reads these */
  --paper:   var(--bg);
  --ground:  var(--bg);
  --wash:    var(--bg-2);
  --display: var(--font-display);
  --text:    var(--font-text);
  --r-pill: var(--radius); --r-card: var(--radius); --r-md: var(--radius); --r-sm: var(--radius);
  --shadow-card: none;
  --shadow-lift: none;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body.theme-six {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.theme-six a { color: var(--ink); }
.theme-six h1, .theme-six h2, .theme-six h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.theme-six h1 { font-size: clamp(38px, 7vw, 84px); }
.theme-six h2 { font-size: clamp(28px, 4.2vw, 48px); font-weight: 500; }
.theme-six .wrap { max-width: var(--max); padding: 0 var(--gutter); }
.theme-six img, .theme-six video { display: block; max-width: 100%; }
.six-accent { color: var(--accent); font-style: normal; }

/* --------------------------------------------------------------------------
   The console's chrome in this skin. The header is a quiet bar laid over
   the top of the page: main pads for it, and a Six Pieces hero that opens
   the page pulls itself up underneath it. Not sticky: the page is the point.
   -------------------------------------------------------------------------- */
.theme-six .site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  background: transparent; border-bottom: 0; color: var(--ink);
}
.theme-six .header-inner { min-height: var(--header-h); max-width: var(--max); padding: 12px var(--gutter); }
.theme-six .site-brand { color: var(--ink); }
.theme-six .site-wordmark { font-family: var(--font-display); font-weight: 500; }
.theme-six .site-nav a, .theme-six .nav-group-label {
  color: var(--ink); font-family: var(--font-text); font-weight: 500;
  border-radius: var(--radius);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.theme-six .site-nav a:hover, .theme-six .site-nav a.active,
.theme-six .nav-group-label:hover, .theme-six .nav-group.open .nav-group-label,
.theme-six .nav-group.active .nav-group-label { background: var(--line); color: var(--ink); }
/* The last menu item reads as the header's call to action - but not when it is
   the only item (a one-page site would otherwise shout "Home" in the accent). */
.theme-six .site-nav > a:last-child:not(:only-child) { background: var(--accent); color: var(--bg); }
.theme-six .site-nav > a:last-child:not(:only-child):hover, .theme-six .site-nav > a:last-child:not(:only-child).active { background: var(--ink); color: var(--bg); }
.theme-six .nav-menu { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.theme-six .nav-toggle { color: var(--ink); background: var(--bg-2); border-color: var(--line); border-radius: var(--radius); }
.theme-six .nav-toggle[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
@media (max-width: 860px) {
  .theme-six .site-nav.open { background: var(--bg-2); border-radius: var(--radius); padding: 8px; }
  .theme-six .nav-menu { border-left-color: var(--accent); }
}
.theme-six main { padding-top: var(--header-h); }
.theme-six main > .six-hero:first-child { margin-top: calc(-1 * var(--header-h)); }

.theme-six .btn {
  font-family: var(--font-text); font-weight: 600; font-size: 15px; letter-spacing: 0.04em;
  color: var(--bg); background: var(--accent); border: 2px solid var(--accent);
  border-radius: var(--radius); padding: 16px 28px; box-shadow: none; filter: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.theme-six .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); transform: translateY(-2px); box-shadow: none; }
.theme-six .btn:active { transform: translateY(0); opacity: 0.9; }
.theme-six .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.theme-six .btn-outline, .theme-six .btn-outline:hover { background: transparent; color: var(--ink); border-color: var(--line); }

.theme-six .site-footer, .theme-six .site-footer.anything {
  position: static; background: var(--bg); color: var(--muted);
  border-top: 1px solid var(--line); box-shadow: none;
  padding: 40px 0 56px; font-size: 13px; text-align: center;
}
.theme-six .site-footer .wrap { display: block; }
.theme-six .site-footer a, .theme-six .footer-links a, .theme-six .footer-strap, .theme-six .footer-legal { color: var(--muted); font-weight: 400; }
.theme-six .footer-links { justify-content: center; border-top: 0; padding: 0; margin: 0 0 10px; }
.theme-six .footer-links a:hover { color: var(--ink); }
.theme-six .footer-social { justify-content: center; }
.theme-six .footer-social a { color: var(--muted); }
.theme-six .footer-social a:hover { color: var(--ink); }
.theme-six .site-footer .footer-strap { display: block; margin: 0 0 10px; }

/* Blocks that are not Six Pieces blocks still read the tokens; a few of
   their shapes are squared off so the page keeps one character. */
.theme-six .block-rich_text { padding: clamp(48px, 10vh, 100px) var(--gutter); }
.theme-six .block-rich_text h3 { border-top-color: var(--line); color: var(--ink); }
.theme-six .cta-panel { background: var(--bg-2); color: var(--ink); border-radius: var(--radius); }
.theme-six .block-form input, .theme-six .block-form textarea, .theme-six .block-form select {
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   Hero (block six_hero). Shared parts, then one block per scroll style.
   -------------------------------------------------------------------------- */
.six-hero { position: relative; color: var(--ink); }
.six-stage { position: relative; min-height: 100svh; display: grid; align-items: end; }
.six-media { position: absolute; inset: 0; overflow: hidden; background: var(--bg-2); }
.six-media > img, .six-media > video { width: 100%; height: 100%; object-fit: cover; }
.six-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, var(--scrim) 0%, transparent 60%);
}
.six-stage::before {              /* legibility for the header laid over the top */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: calc(var(--header-h) * 1.6);
  z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, var(--scrim) 0%, transparent 100%);
}
.six-copy {
  position: relative; z-index: 1;
  width: min(100%, var(--max)); margin-inline: auto;
  padding: 0 var(--gutter) clamp(32px, 8vh, 96px);
}
.six-headline { max-width: 16ch; }
.six-sub { margin: 16px 0 0; max-width: 44ch; color: var(--muted); font-size: 18px; }

/* Looping video: the stage is the viewport; the video just plays. */
.six-hero-loop .six-stage { min-height: 100svh; }

/* Scroll to play: a tall hero, a sticky stage, the video scrubs with scroll.
   Captions show by progress (data-from / data-to), one at a time. */
.six-hero-scrub { height: 300vh; }
.six-hero-scrub .six-stage { position: sticky; top: 0; height: 100svh; }
.six-caption {
  position: absolute; z-index: 1; margin: 0;
  left: var(--gutter); right: var(--gutter); bottom: clamp(140px, 26vh, 260px);
  font-family: var(--font-display); font-size: clamp(22px, 3.2vw, 36px); line-height: 1.15;
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.six-caption.on { opacity: 1; transform: none; }

/* Exploded view: a tall hero, a sticky stage, layered PNG parts that drift
   apart as --p rises 0 to 1 (six.js sets it); dx/dy/rot per part. */
.six-hero-exploded { height: 250vh; --p: 0; }
.six-hero-exploded .six-stage { position: sticky; top: 0; height: 100svh; }
.six-hero-exploded .six-media { display: grid; place-items: center; }
.six-hero-exploded .six-media::after { display: none; }
.six-part {
  grid-area: 1 / 1;
  width: auto; height: auto; max-width: 84vw; max-height: 80vh;
  object-fit: contain;
  transform:
    translate(calc(var(--dx, 0) * var(--p) * 1vw), calc(var(--dy, 0) * var(--p) * 1vh))
    rotate(calc(var(--rot, 0) * var(--p) * 1deg));
  will-change: transform;
}

/* Static hero with a slow move: one image, a slow push, one light sweep. */
.six-hero-static .six-media > img { animation: six-push var(--dur-hero) var(--ease) both; }
.six-hero-static .six-media::before {
  content: ""; position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, var(--sweep) 50%, transparent 58%);
  animation: six-sweep var(--dur-hero) var(--ease) var(--dur) both;
}
@keyframes six-push  { from { transform: scale(1); }         to { transform: scale(1.06); } }
@keyframes six-sweep { from { transform: translateX(-70%); } to { transform: translateX(70%); } }

/* --------------------------------------------------------------------------
   Body blocks: thesis, feature, clip, ask.
   -------------------------------------------------------------------------- */
.six-thesis, .six-feature, .six-clip, .six-ask { padding: clamp(64px, 12vh, 140px) var(--gutter); }
.six-alt { background: var(--bg-2); }

.six-thesis { text-align: center; }
.six-thesis-line {
  margin: 0; font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 40px); line-height: 1.25;
  max-width: 28ch; margin-inline: auto;
}

.six-feature-inner { display: grid; gap: 32px; align-items: center; width: min(100%, var(--max)); margin-inline: auto; }
.six-feature-media img, .six-feature-media video { width: 100%; height: auto; border-radius: var(--radius); }
.six-feature-copy h2 { max-width: 14ch; }
.six-proof { margin: 16px 0 0; max-width: var(--measure); color: var(--muted); font-size: 18px; }
.six-figure {
  display: block; font-family: var(--font-display); line-height: 1;
  font-size: clamp(40px, 6vw, 72px); color: var(--ink);
}
.six-figure-label {
  display: block; margin: 6px 0 14px;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
@media (min-width: 800px) {
  .six-feature-inner { grid-template-columns: 7fr 5fr; gap: 64px; }
  .six-flip .six-feature-media { order: 2; }
}

.six-clip-figure { margin: 0; width: min(100%, var(--max)); margin-inline: auto; }
.six-clip video, .six-clip img { width: 100%; height: auto; border-radius: var(--radius); }
.six-clip figcaption {
  margin-top: 12px; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}

.six-ask { position: relative; overflow: hidden; text-align: center; padding-block: clamp(96px, 20vh, 220px); }
.six-ask-media { position: absolute; inset: 0; z-index: 0; }
.six-ask-media img { width: 100%; height: 100%; object-fit: cover; }
.six-ask-media::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.six-ask-inner { position: relative; z-index: 1; }
.six-ask-line { max-width: 18ch; margin-inline: auto; }
.six-ask p { margin: 32px 0 0; }

/* --------------------------------------------------------------------------
   Reveal: one movement, one speed, for everything that enters on scroll.
   -------------------------------------------------------------------------- */
.theme-six [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.theme-six [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .theme-six [data-reveal] { opacity: 1; transform: none; transition: none; }
  .six-hero-static .six-media > img, .six-hero-static .six-media::before { animation: none; }
  .six-hero-scrub, .six-hero-exploded { height: auto; }
  .six-caption { position: static; opacity: 1; transform: none; padding: 16px var(--gutter); }
  .six-part { transform: none; }
}

/* --------------------------------------------------------------------------
   v0.56.0 - pieces any six site may use: an eyebrow and buttons in the hero,
   a short hero (a page header), a two-column statement, numbered rows and a
   steps band.
   -------------------------------------------------------------------------- */
.six-eyebrow {
  margin: 0 0 14px; font-family: var(--font-text); font-weight: 600; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}
.six-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.six-hero-short .six-stage, .six-hero-loop.six-hero-short .six-stage { min-height: clamp(440px, 62svh, 580px); }
.six-hero-short .six-copy { padding-top: calc(var(--header-h) + 40px); }
.six-hero-short .six-headline { font-size: clamp(36px, 6vw, 72px); }

.six-statement { text-align: left; }
.six-statement-inner { display: grid; gap: 24px; width: min(100%, var(--max)); margin-inline: auto; }
.six-statement .six-thesis-line { margin: 0; max-width: none; font-family: var(--font-text); font-size: clamp(18px, 1.9vw, 22px); line-height: 1.55; color: var(--muted); }
@media (min-width: 860px) { .six-statement-inner { grid-template-columns: 1fr 1.35fr; gap: 64px; } }

.six-rows { padding: clamp(32px, 6vh, 64px) var(--gutter) clamp(64px, 12vh, 120px); }
.six-rows-inner { width: min(100%, var(--max)); margin-inline: auto; }
.six-rows-heading { margin: 0 0 24px; }
.six-row { display: grid; gap: 8px 32px; padding: 36px 0; border-top: 1px solid var(--line); }
.six-row-n { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4vw, 44px); line-height: 1; color: var(--accent); }
.six-row h3 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; }
.six-row-body p { margin: 0 0 14px; color: var(--muted); }
.six-row-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 24px; font-size: 15px; }
.six-row-body li { position: relative; padding-left: 22px; }
.six-row-body li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; background: var(--accent); }
@media (min-width: 860px) {
  .six-row { grid-template-columns: 90px 1fr 1.5fr; align-items: start; }
  .six-row-body ul { grid-template-columns: 1fr 1fr; }
}

.six-steps { background: var(--ink); color: var(--bg); padding: clamp(72px, 14vh, 120px) var(--gutter); }
.six-steps-inner { width: min(100%, var(--max)); margin-inline: auto; }
.six-steps h2 { color: var(--bg); margin: 0 0 48px; }
.six-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.six-steps li { border-top: 3px solid color-mix(in srgb, var(--bg) 22%, transparent); padding: 22px 16px 0 0; font-size: 15px; color: color-mix(in srgb, var(--bg) 70%, transparent); }
.six-steps li:first-child { border-top-color: var(--accent); }
.six-steps li b { display: block; margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.1; color: var(--bg); }
.six-step-n { display: block; margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: color-mix(in srgb, var(--accent) 70%, var(--bg)); }
@media (min-width: 900px) { .six-steps ol { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; } }

/* --------------------------------------------------------------------------
   v0.56.0 - the BOLD layout (six_layout = 'bold'; body.six-bold). Every page
   opens on a dark picture: a full-screen hero on the home page, a short one
   (a page header) on the rest. So the header is light-on-dark everywhere and
   the logo is the site's reversed one. Ink bands, a dark footer. Tokens only.
   -------------------------------------------------------------------------- */
.six-bold { --hi: color-mix(in srgb, var(--accent) 70%, var(--bg)); --on-ink: color-mix(in srgb, var(--bg) 78%, transparent); }
.six-bold h1, .six-bold h2, .six-bold h3 { font-weight: 700; letter-spacing: 0.002em; }

/* header over the dark hero */
.six-bold .site-nav a, .six-bold .nav-group-label { color: var(--bg); }
.six-bold .site-nav a:hover, .six-bold .site-nav a.active { background: color-mix(in srgb, var(--bg) 16%, transparent); color: var(--bg); }
.six-bold .nav-toggle { color: var(--bg); background: color-mix(in srgb, var(--ink) 60%, transparent); border-color: color-mix(in srgb, var(--bg) 30%, transparent); }
.six-bold .six-stage::before { background: linear-gradient(to bottom, color-mix(in srgb, var(--ink) 70%, transparent) 0%, transparent 100%); }
@media (max-width: 860px) {
  .six-bold .site-nav.open { background: var(--ink); }
  .six-bold .nav-menu { background: var(--ink); }
}

/* hero: the picture under an ink scrim, light type */
.six-bold .six-hero { color: var(--bg); }
.six-bold .six-media { background: var(--ink); }
.six-bold .six-media::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 88%, transparent) 0%, color-mix(in srgb, var(--ink) 55%, transparent) 50%, color-mix(in srgb, var(--ink) 10%, transparent) 100%),
    linear-gradient(to top, color-mix(in srgb, var(--ink) 55%, transparent) 0%, transparent 45%);
}
.six-bold .six-headline { color: var(--bg); max-width: 11ch; }
.six-bold .six-hero-short .six-headline { max-width: 18ch; }
.six-bold .six-sub { color: var(--on-ink); font-size: clamp(17px, 1.6vw, 20px); max-width: 46ch; }
.six-bold .six-hero .six-eyebrow, .six-bold .six-steps .six-eyebrow { color: var(--hi); }
.six-bold .six-btn-ghost, .six-bold .six-btn-ghost:hover { background: transparent; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 45%, transparent); }

/* the credentials strip right under the hero */
.six-bold .block-trust_strip { background: color-mix(in srgb, var(--ink) 92%, var(--accent)); color: var(--on-ink); padding-block: 0; }
.six-bold .block-trust_strip * { color: inherit; background: transparent; box-shadow: none; border-color: color-mix(in srgb, var(--bg) 14%, transparent); }
.six-bold .block-trust_strip strong, .six-bold .block-trust_strip b { color: var(--bg); font-family: var(--font-display); font-size: 20px; letter-spacing: 0.02em; }
.six-bold .block-trust_strip svg { color: var(--hi); }

/* bands */
.six-bold .six-thesis.six-statement { padding-block: clamp(80px, 14vh, 130px); }
.six-bold .six-feature-copy h2 { max-width: 16ch; }
.six-bold .six-feature-media img, .six-bold .six-feature-media video, .six-bold .six-clip video { border-radius: var(--radius); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--ink) 55%, transparent); }
.six-bold .six-clip { background: var(--ink); }
.six-bold .six-clip figcaption { color: var(--on-ink); }
.six-bold .six-clip .six-accent { color: var(--hi); } /* v0.56.02 contrast: the accent word on the ink band */
.six-bold .six-ask { color: var(--bg); text-align: left; }
.six-bold .six-ask-media::after { background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 90%, transparent) 0%, color-mix(in srgb, var(--ink) 55%, transparent) 60%, color-mix(in srgb, var(--ink) 25%, transparent) 100%); }
.six-bold .six-ask-inner { width: min(100%, var(--max)); margin-inline: auto; }
.six-bold .six-ask-line { color: var(--bg); margin-inline: 0; max-width: 14ch; font-size: clamp(40px, 6vw, 72px); }

/* the console's ordinary blocks on a bold page */
.six-bold .block-rich_text { max-width: var(--max); margin-inline: auto; }
.six-bold .block-rich_text h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 1.4em 0 0.4em; }
.six-bold .block-rich_text ul, .six-bold .block-rich_text ol { padding-left: 0; list-style: none; }
.six-bold .block-rich_text ul li { position: relative; padding-left: 24px; margin: 0 0 8px; }
.six-bold .block-rich_text ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 10px; height: 10px; background: var(--accent); }
.six-bold .block-rich_text ol { counter-reset: n; }
.six-bold .block-rich_text ol li { counter-increment: n; position: relative; padding-left: 52px; margin: 0 0 18px; }
.six-bold .block-rich_text ol li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: -2px; font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--accent); }
.six-bold .block-feature_grid { background: var(--bg-2); }
.six-bold .feature-card { background: var(--bg); border: 0; border-top: 3px solid var(--accent); border-radius: var(--radius); }
.six-bold .block-cta { padding: 0; }
.six-bold .block-cta .wrap { max-width: none; padding: 0; }
.six-bold .cta-panel {
  background: var(--accent); color: var(--bg); border-radius: 0; max-width: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(56px, 10vh, 88px) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
}
.six-bold .cta-panel h2 { color: var(--bg); margin: 0; font-size: clamp(32px, 4.6vw, 56px); }
.six-bold .cta-panel .btn { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* the dark footer */
.six-bold .site-footer { background: var(--ink); color: var(--on-ink); border-top: 0; text-align: left; padding: 56px 0 40px; }
.six-bold .site-footer .wrap { max-width: var(--max); }
.six-bold .site-footer a, .six-bold .footer-links a, .six-bold .footer-strap, .six-bold .footer-legal { color: var(--on-ink); }
.six-bold .footer-links { justify-content: flex-start; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 22px; }
.six-bold .footer-links a:hover { color: var(--bg); }
.six-bold .site-footer .footer-strap { font-family: var(--font-display); font-size: 22px; color: var(--bg); margin: 0 0 18px; }
.six-bold .footer-legal { border-top: 1px solid color-mix(in srgb, var(--bg) 14%, transparent); padding-top: 20px; font-size: 13px; }