:root {
  --ink: #000000;
  --accent: #fc1202;
  --accent-hover: #df1002;
  --accent-focus: #a40c01;
  --accent-soft: #fee7e6;
  --accent-surface: #fff8f7;
  --paper: #ffffff;
  --soft: rgb(0 0 0 / 3%);
  --line: rgb(0 0 0 / 16%);
  --content-width: 1000px;
  /* DIN handles Latin letters and numerals; Japanese retains Noto Sans JP. */
  --font-site: "din-2014", "Noto Sans JP", sans-serif;
  font-family: var(--font-site);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; font-size: 16px; line-height: 1.7; }
body:has(.mobile-menu[open]) { overflow: hidden; }
h1, h2, h3, p, figure { margin: 0; }
ul { padding: 0; margin: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; height: auto; }
button, input { accent-color: var(--ink); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
::selection { background: var(--ink); color: var(--paper); }
.container { width: min(var(--content-width), calc(100% - 64px)); margin-inline: auto; }
.svg-definitions { width: 0; height: 0; position: absolute; overflow: hidden; }
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; top: 8px; left: 16px; z-index: 200; padding: 12px 20px; background: var(--paper); border: 2px solid var(--ink); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.mobile-only { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The header and the two content sections share Paytner's 1000px rail. */
.site-header { height: 80px; position: sticky; top: 0; z-index: 50; background: var(--paper); box-shadow: 0 5px 10px rgb(0 0 0 / 5%); }
.header-inner { max-width: 1120px; height: 100%; padding-inline: 24px; margin-inline: auto; display: flex; align-items: center; gap: 20px; }
.header-brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand { flex: none; display: block; width: 156px; }
.brand img { width: 100%; }
.brand-tagline { font-size: 11px; font-weight: 500; line-height: 1.65; white-space: nowrap; }
.brand-tagline span { display: block; }
.dezamil-wordmark { display: inline-block; width: calc(1em * 1326 / 331); height: 1em; max-width: none; object-fit: contain; vertical-align: -.1em; }
.desktop-nav { display: flex; align-items: center; justify-content: flex-end; flex: 1; gap: 26px; font-size: 13px; font-weight: 700; letter-spacing: .035em; }
.desktop-nav a { padding-block: 14px; white-space: nowrap; }
.desktop-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.header-cta { display: flex; justify-content: center; align-items: center; min-height: 46px; padding: 12px 23px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 700; white-space: nowrap; transition: opacity .2s; }
.header-cta:hover { opacity: .72; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 9px; border: 0; background: none; }
.menu-toggle span { display: block; height: 2px; background: var(--ink); margin-block: 7px; }

/* Copy and proposal panel stay in normal flow; only the artwork floats. */
.hero { background: linear-gradient(118deg, var(--paper) 18%, rgb(0 0 0 / 5%) 100%); }
.hero-inner { position: relative; padding-top: 42px; padding-bottom: 0; display: grid; grid-template-columns: 470px 1fr; }
.hero-copy { position: relative; z-index: 2; }
.audience { display: flex; align-items: center; width: fit-content; gap: 12px; font-size: 14px; font-weight: 700; line-height: 1; }
.audience::before { content: ""; height: 14px; width: 3px; background: var(--ink); }
.audience span { font-size: 12px; font-weight: 500; padding-left: 12px; border-left: 1px solid var(--ink); }
h1 { margin-top: 26px; font-size: 52px; line-height: 1.36; letter-spacing: .045em; font-weight: 900; }
h1 > span { display: block; }
.headline-last { display: block; }
.hero-description { margin-top: 22px; font-size: 14px; line-height: 1.9; font-weight: 500; }
.hero-benefits { display: flex; align-items: center; gap: 24px; margin-top: 20px; font-size: 13px; }
.hero-benefits li { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.hero-benefits .icon { width: 18px; height: 18px; stroke-width: 2.6; }
.hero-benefits strong { font-weight: 700; }
.hero-visual { position: absolute; width: 610px; right: max(-106px, calc((1000px - 100vw) / 2 + 24px)); top: 12px; z-index: 1; }
.hero-mockups { width: 100%; max-width: none; }
.hero-visual figcaption { position: absolute; right: 30px; bottom: -4px; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: .04em; }
.visual-caption-line { width: 26px; height: 1px; background: var(--ink); }
.proposal-card { position: relative; z-index: 3; grid-column: 1; width: 470px; background: var(--paper); border-radius: 24px; padding: 22px 24px 20px; margin-top: 26px; margin-bottom: -48px; box-shadow: 4px 16px 40px rgb(0 0 0 / 10%); }
.proposal-heading { display: flex; flex-direction: column-reverse; align-items: center; gap: 10px; }
.proposal-heading > p { font-size: 16px; font-weight: 700; }
.availability { display: inline-flex; align-items: baseline; gap: 2px; font-size: 11px; line-height: 1; font-weight: 700; position: relative; }
.availability::before, .availability::after { content: ""; height: 16px; width: 1px; margin-inline: 10px; background: var(--ink); transform: rotate(-24deg); }
.availability::after { transform: rotate(24deg); }
.availability strong { font-size: 17px; }
.button { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 66px; padding: 18px 24px; border-radius: 999px; font-weight: 700; font-size: 17px; line-height: 1.5; text-align: center; transition: background .2s, color .2s; }
.button-primary { background: var(--ink); color: var(--paper); border: 2px solid var(--ink); }
.button-primary:hover { background: var(--paper); color: var(--ink); }
.proposal-card .button { margin-top: 14px; width: 100%; gap: 14px; font-size: 16px; }
.proposal-card .button .icon { width: 21px; height: 21px; }
.line-link { display: flex; gap: 7px; align-items: center; justify-content: center; margin-top: 14px; font-size: 12px; font-weight: 500; }
.line-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.line-link > .icon { width: 18px; height: 18px; }
.line-link > .small-arrow { width: 13px; height: 13px; }
.proposal-note { text-align: center; font-size: 10px; line-height: 1.7; margin-top: 10px; }

.clients { padding-top: 100px; padding-bottom: 46px; overflow: hidden; }
.clients-heading { display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 26px; }
.clients h2 { font-size: 13px; font-weight: 500; letter-spacing: .06em; }
.marquee-toggle { position: absolute; right: 0; display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 8px; background: none; border: 0; border-radius: 4px; font-size: 10px; }
.marquee-toggle:hover { background: var(--soft); }
.pause-icon { width: 9px; height: 10px; border-inline: 2px solid var(--ink); }
.marquee-toggle[aria-pressed="true"] .pause-icon { border: 0; width: 0; height: 0; border-block: 5px solid transparent; border-left: 8px solid var(--ink); }
.marquee { width: 100%; overflow-x: auto; }
.marquee.is-ready { overflow: hidden; mask-image: linear-gradient(90deg, transparent, var(--ink) 5%, var(--ink) 95%, transparent); }
.marquee-track { display: flex; width: max-content; }
.logo-list { display: flex; flex: none; align-items: center; gap: 64px; padding-right: 64px; }
.logo-list li { height: 72px; display: flex; align-items: center; justify-content: center; flex: none; }
.logo-list img { height: var(--logo-height); width: auto; max-width: 165px; object-fit: contain; }
.marquee.is-ready .marquee-track { animation: logos-scroll 75s linear infinite; }
.marquee.is-paused .marquee-track, .marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes logos-scroll { to { transform: translateX(-50%); } }

.problems { padding-block: 56px 64px; background: var(--soft); }
.problem-panel { background: var(--paper); border-radius: 16px; padding: 46px 48px 48px; text-align: center; }
.problem-intro { font-size: 13px; line-height: 1.7; font-weight: 500; margin-bottom: 9px; }
.problem-panel h2 { font-size: 31px; line-height: 1.6; font-weight: 700; letter-spacing: .035em; }
.problem-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.problem-list li { min-width: 0; }
.problem-list img { width: 210px; height: 144px; object-fit: contain; margin: 0 auto 20px; }
.problem-list h3 { font-size: 18px; line-height: 1.65; font-weight: 700; }
.problem-list p { font-size: 12px; line-height: 1.9; margin-top: 14px; }
.mobile-problem-copy { display: none; }
.problem-answer { display: flex; flex-direction: column; align-items: center; }
.answer-connector { width: 1px; height: 32px; background: var(--ink); display: block; margin-top: 32px; margin-bottom: 22px; position: relative; }
.answer-connector::after { content: ""; position: absolute; bottom: 0; left: -3px; width: 7px; height: 7px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); }
.problem-answer h3 { font-size: 31px; line-height: 1.75; font-weight: 900; letter-spacing: .035em; }
.problem-answer h3 span { border-bottom: 3px solid var(--ink); padding-bottom: 3px; }
.problem-answer > p { margin-top: 21px; font-size: 14px; line-height: 1.9; }
.problem-answer .button { width: 100%; max-width: 440px; margin-top: 26px; }
.problem-answer > .answer-note { font-size: 11px; margin-top: 14px; }
.site-footer { --footer-unit: calc(100vw / 1440); padding: calc(var(--footer-unit) * 76) 0 calc(var(--footer-unit) * 48); background: #000; color: #fff; }
.footer-inner { width: calc(var(--footer-unit) * 1024); margin-inline: auto; }
.footer-brand { display: block; width: calc(var(--footer-unit) * 260); }
.footer-brand img { width: 100%; height: auto; filter: invert(1); }
.footer-columns { display: grid; grid-template-columns: calc(var(--footer-unit) * 234) calc(var(--footer-unit) * 184) minmax(0,1fr); margin-top: calc(var(--footer-unit) * 36); }
.footer-columns h2 { margin: 0 0 calc(var(--footer-unit) * 14); color: #777; font-size: calc(var(--footer-unit) * 16); font-weight: 900; line-height: 1.5; letter-spacing: .1em; }
.footer-links ul { display: grid; gap: calc(var(--footer-unit) * 15); }
.footer-columns a { display: inline-flex; align-items: center; gap: calc(var(--footer-unit) * 5); font-size: calc(var(--footer-unit) * 18); font-weight: 400; line-height: 1.5; }
.footer-columns .footer-simulation { display: inline-block; }
.footer-simulation span { white-space: nowrap; }
.footer-service p { margin-top: calc(var(--footer-unit) * 2); color: #999; font-size: calc(var(--footer-unit) * 13); font-weight: 400; line-height: 1.7; }
.footer-external { flex: none; display: inline-block; width: calc(var(--footer-unit) * 14); height: calc(var(--footer-unit) * 14); background: currentColor; -webkit-mask: url("assets/footer-arrow-up-right.svg") center / contain no-repeat; mask: url("assets/footer-arrow-up-right.svg") center / contain no-repeat; }
.footer-bottom { margin-top: calc(var(--footer-unit) * 54); padding-top: calc(var(--footer-unit) * 46); border-top: 1px solid #555; }
.footer-legal { display: flex; flex-wrap: wrap; gap: calc(var(--footer-unit) * 14) calc(var(--footer-unit) * 32); color: #999; }
.footer-legal a { display: inline-flex; align-items: center; gap: calc(var(--footer-unit) * 4); font-size: calc(var(--footer-unit) * 13); font-weight: 400; line-height: calc(var(--footer-unit) * 22); }
.footer-copyright { display: block; margin-top: calc(var(--footer-unit) * 20); color: #999; font-size: calc(var(--footer-unit) * 12); font-weight: 400; line-height: calc(var(--footer-unit) * 20); }
.site-footer a:hover { color: #bdbdbd; text-decoration: underline; text-underline-offset: .2em; }
.site-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 5px; border-radius: 2px; }
.footer-brand:hover { opacity: .8; }

.mobile-menu { width: calc(100% - 32px); max-width: 420px; max-height: calc(100dvh - 32px); margin: auto; padding: 24px; border: 1px solid var(--ink); border-radius: 16px; background: var(--paper); color: var(--ink); }
.mobile-menu::backdrop { background: rgb(0 0 0 / 42%); }
.menu-head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 700; }
.menu-close { display: flex; align-items: center; gap: 8px; min-height: 44px; border: none; background: none; font-size: 12px; }
.menu-close span { font-size: 28px; font-weight: 400; line-height: 1; }
.mobile-menu nav { margin-top: 20px; border-top: 1px solid var(--line); }
.mobile-menu nav a { display: flex; justify-content: space-between; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.mobile-menu nav .icon { width: 17px; height: 17px; }
.mobile-menu .button { margin-top: 24px; font-size: 13px; min-height: 56px; padding: 14px 12px; gap: 8px; }
.mobile-menu .button .icon { width: 18px; height: 18px; }
.menu-line { display: block; text-align: center; font-size: 13px; margin-top: 18px; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1199px) {
  .hero-visual { width: 56vw; max-width: 610px; right: -16px; top: 40px; }
  .hero-inner { grid-template-columns: 45% 1fr; }
  h1 { font-size: 46px; }
  .proposal-card { width: 440px; }
  .hero-visual figcaption { right: 6px; }
  .desktop-nav { gap: 22px; }
}

@media (max-width: 959px) {
  .header-inner { gap: 16px; }
  .desktop-nav { display: none; }
  .header-cta { margin-left: auto; }
  .menu-toggle:not([hidden]) { display: block; }
  .hero-inner { grid-template-columns: 46% 1fr; padding-top: 38px; }
  h1 { font-size: 40px; }
  .hero-description { font-size: 12px; }
  .hero-benefits { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero-visual { top: 84px; right: -16px; width: 52vw; }
  .proposal-card { width: 400px; }
  .proposal-card .button { font-size: 14px; }
  .problem-panel { padding-inline: 32px; }
  .problem-panel h2 { font-size: 26px; }
  .problem-list { gap: 18px; }
  .problem-list p { font-size: 11px; }
  .problem-list p br { display: none; }
  .problem-list h3 { font-size: 17px; }
}

@media (max-width: 699px) {
  html { scroll-padding-top: 82px; }
  .container { width: calc(100% - 40px); }
  .mobile-only { display: block; }
  .desktop-only { display: none; }
  .site-header { height: 66px; }
  .header-inner { padding-inline: 12px; gap: 8px; }
  .header-brand { gap: 8px; }
  .brand { width: clamp(76px, 20vw, 112px); }
  .brand-tagline { font-size: 9px; line-height: 1.55; }
  .header-cta { font-size: 10px; min-height: 37px; padding: 10px 12px; }
  .menu-toggle { flex: none; width: 32px; padding-inline: 4px; }
  .hero { background: linear-gradient(160deg, var(--paper) 12%, rgb(0 0 0 / 5%) 80%); }
  .hero-inner { display: flex; flex-direction: column; align-items: center; padding-top: 31px; }
  .hero-copy { width: 100%; text-align: center; }
  .audience { margin-inline: auto; font-size: 13px; gap: 9px; }
  .audience span { font-size: 11px; padding-left: 9px; }
  .audience::before { height: 13px; }
  h1 { margin-top: 21px; font-size: clamp(29px, 7.7vw, 43px); line-height: 1.6; letter-spacing: .025em; }
  .headline-last { display: inline; }
  .hero-description { font-size: 12px; line-height: 1.85; margin-top: 13px; }
  .hero-benefits { flex-direction: row; justify-content: center; gap: 16px; margin-top: 14px; font-size: 11px; }
  .hero-benefits .icon { width: 15px; height: 15px; }
  .hero-benefits li { gap: 3px; }
  .hero-visual { position: relative; inset: auto; width: min(292px, 100%); margin-top: 9px; }
  .hero-visual figcaption { position: static; justify-content: center; margin-top: 0; font-size: 9px; gap: 7px; }
  .visual-caption-line { width: 18px; }
  .proposal-card { width: 100%; max-width: 410px; padding: 22px 18px 19px; margin-top: 21px; margin-bottom: -37px; border-radius: 20px; }
  .proposal-heading { gap: 11px; }
  .proposal-heading > p { font-size: 13px; }
  .availability { font-size: 10px; }
  .availability strong { font-size: 16px; }
  .proposal-card .button { min-height: 59px; padding: 15px 12px; font-size: 13px; gap: 10px; }
  .proposal-card .button .icon { width: 18px; height: 18px; }
  .line-link { margin-top: 13px; font-size: 11px; gap: 6px; }
  .proposal-note { font-size: 9px; line-height: 1.8; margin-top: 12px; }
  .clients { padding-top: 74px; padding-bottom: 28px; }
  .clients-heading { margin-bottom: 19px; flex-direction: column; gap: 5px; }
  .clients h2 { font-size: 10px; letter-spacing: .025em; }
  .marquee-toggle { position: static; font-size: 9px; min-height: 26px; }
  .logo-list { gap: 34px; padding-right: 34px; }
  .logo-list li { height: 48px; }
  .logo-list img { height: calc(var(--logo-height) * .7); max-width: 120px; }
  .problems { padding-block: 28px 32px; }
  .problem-panel { width: calc(100% - 28px); padding: 29px 16px 28px; }
  .problem-intro { font-size: 10px; margin-bottom: 10px; }
  .problem-panel h2 { font-size: 22px; line-height: 1.6; letter-spacing: .015em; }
  .problem-list { gap: 8px; margin-top: 24px; }
  .problem-list img { width: 100%; height: 80px; margin-bottom: 11px; }
  .problem-list h3 { font-size: 12px; line-height: 1.7; letter-spacing: -.02em; }
  .problem-list p { display: none; }
  .mobile-problem-copy { display: block; margin-top: 22px; font-size: 11px; line-height: 1.9; }
  .answer-connector { height: 24px; margin-top: 22px; margin-bottom: 13px; }
  .problem-answer h3 { font-size: 23px; line-height: 1.8; letter-spacing: .015em; }
  .problem-answer h3 span { border-bottom-width: 2px; }
  .problem-answer > p { margin-top: 20px; font-size: 11px; line-height: 1.95; }
  .problem-answer .button { margin-top: 21px; min-height: 60px; font-size: 12px; padding-inline: 10px; gap: 10px; }
  .problem-answer .button .icon { width: 18px; height: 18px; }
  .problem-answer > .answer-note { font-size: 9px; margin-top: 12px; }
  .site-footer { --footer-unit: 1px; padding: 46px 0 32px; }
  .footer-inner { width: calc(100% - 40px); }
  .footer-brand { width: 190px; }
  .footer-columns { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 24px; margin-top: 36px; }
  .footer-columns h2 { margin-bottom: 14px; font-size: 13px; }
  .footer-links ul { gap: 12px; }
  .footer-columns a { min-height: 30px; font-size: 14px; line-height: 1.7; }
  .footer-service { grid-column: 1 / -1; }
  .footer-service p { margin-top: 2px; font-size: 12px; }
  .footer-bottom { margin-top: 36px; padding-top: 28px; }
  .footer-legal { gap: 10px 24px; }
  .footer-legal a { min-height: 30px; font-size: 12px; line-height: 1.8; }
  .footer-copyright { margin-top: 22px; font-size: 11px; line-height: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .marquee.is-ready { mask-image: none; }
  .marquee-track { width: 100%; }
  .logo-list { width: 100%; flex-wrap: wrap; justify-content: center; padding: 0 24px; gap: 24px 36px; }
  .logo-list[aria-hidden="true"] { display: none; }
  .marquee-toggle { display: none !important; }
}

@media (max-width: 359px) {
  .header-inner { padding-inline: 10px; gap: 6px; }
  .header-brand { gap: 6px; }
  .brand { width: 68px; }
  .brand-tagline { font-size: 8.5px; }
  .header-cta { font-size: 9px; padding-inline: 10px; }
  .menu-toggle { width: 28px; }
}

/* Individual supplied assets share the original 2092 by 752 composition. */
.hero-placeholder { position: relative; container-type: inline-size; --fv-copy-unit: calc(100cqw / 2092); background: var(--paper); }
.hero-placeholder .hero-placeholder-image { width: 100%; height: auto; aspect-ratio: 2092 / 752; filter: none; }
.fv-artwork { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 2092 / 752; overflow: hidden; pointer-events: none; }
.fv-artwork img { position: absolute; height: auto; max-width: none; }
.fv-artwork [data-fv-set][hidden] { display: none; }
.fv-artwork-pc { z-index: 0; }
.fv-artwork-sp { z-index: 1; }
.fv-artwork-bear { z-index: 2; }
.fv-artwork-pc { filter: drop-shadow(calc(var(--fv-copy-unit) * 10) calc(var(--fv-copy-unit) * 18) calc(var(--fv-copy-unit) * 18) rgb(0 0 0 / 20%)); left: calc(var(--fv-copy-unit) * 938); top: calc(var(--fv-copy-unit) * -3); width: calc(var(--fv-copy-unit) * 960); }
.fv-artwork-sp { filter: drop-shadow(calc(var(--fv-copy-unit) * 8) calc(var(--fv-copy-unit) * 12) calc(var(--fv-copy-unit) * 12) rgb(0 0 0 / 24%)); left: calc(var(--fv-copy-unit) * 1718); top: calc(var(--fv-copy-unit) * 238); width: calc(var(--fv-copy-unit) * 242); }
.fv-artwork-bear { filter: drop-shadow(calc(var(--fv-copy-unit) * 5) calc(var(--fv-copy-unit) * 9) calc(var(--fv-copy-unit) * 8) rgb(0 0 0 / 22%)); left: calc(var(--fv-copy-unit) * 1460); top: calc(var(--fv-copy-unit) * 338); width: calc(var(--fv-copy-unit) * 288); }
.fv-benefits-image { position: absolute; top: calc(var(--fv-copy-unit) * 293); left: calc(var(--fv-copy-unit) * 373); width: calc(var(--fv-copy-unit) * 480); height: auto; aspect-ratio: 2061 / 474; }
.fv-audience-label { position: absolute; top: calc(var(--fv-copy-unit) * 20); left: calc(var(--fv-copy-unit) * 435); display: flex; justify-content: center; align-items: center; width: calc(var(--fv-copy-unit) * 360); height: calc(var(--fv-copy-unit) * 54); background: #989898; color: #ffffff; font-family: var(--font-site); font-size: calc(var(--fv-copy-unit) * 27); font-weight: 700; line-height: 1.3; letter-spacing: .015em; white-space: nowrap; }
.fv-headline { position: absolute; top: 0; left: 0; width: 100%; height: calc(var(--fv-copy-unit) * 265); margin: 0; color: #000000; font-family: var(--font-site); font-size: calc(var(--fv-copy-unit) * 58); font-weight: 900; line-height: 1.3; letter-spacing: 0; }
.fv-headline-first { position: absolute; top: calc(var(--fv-copy-unit) * 86); left: calc(var(--fv-copy-unit) * 615); transform: translateX(-50%); white-space: nowrap; }
.fv-headline-second { position: absolute; top: calc(var(--fv-copy-unit) * 168); left: calc(var(--fv-copy-unit) * 615); transform: translateX(-50%); white-space: nowrap; }
.fv-headline strong { font-size: 1.25em; font-weight: 900; }
.fv-service-label { position: absolute; top: calc(var(--fv-copy-unit) * 101); left: calc(var(--fv-copy-unit) * 805); display: flex; align-items: center; justify-content: center; width: calc(var(--fv-copy-unit) * 224); height: calc(var(--fv-copy-unit) * 80); color: #000000; font-family: var(--font-site); font-size: calc(var(--fv-copy-unit) * 30); font-weight: 700; line-height: 1.3; white-space: nowrap; }
.fv-service-label::before, .fv-service-label::after { content: ""; position: absolute; left: 0; width: 100%; height: calc(var(--fv-copy-unit) * 2); background: #000000; }
.fv-service-label::before { top: calc(var(--fv-copy-unit) * 9); transform: rotate(-5deg); }
.fv-service-label::after { bottom: calc(var(--fv-copy-unit) * 9); transform: rotate(5deg); }
/* The two-action card follows the reference's rounded white panel and pill buttons. */
.fv-cta-card { --fv-unit: var(--fv-copy-unit); position: relative; width: 23.52%; margin-top: calc(var(--fv-unit) * -320); margin-left: 17.45%; padding: max(8px, calc(var(--fv-unit) * 18)) calc(var(--fv-unit) * 36); border-radius: calc(var(--fv-unit) * 38); background: #ffffff; box-shadow: 0 calc(var(--fv-unit) * 18) calc(var(--fv-unit) * 56) rgb(0 0 0 / 9%); }
.fv-cta-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: max(30px, calc(var(--fv-unit) * 58)); padding: 5px 8px; border: 1px solid transparent; border-radius: 999px; font-family: var(--font-site); font-size: max(12px, calc(var(--fv-unit) * 26)); font-weight: 700; line-height: 1.4; white-space: nowrap; text-align: center; }
.fv-cta-primary { background: var(--accent); color: #ffffff; transition: background .2s; }
.fv-cta-primary:hover { background: var(--accent-hover); }
.fv-cta-divider { display: flex; align-items: center; gap: calc(var(--fv-unit) * 14); height: max(16px, calc(var(--fv-unit) * 32)); color: #000000; font-size: max(11px, calc(var(--fv-unit) * 23)); line-height: 1; }
.fv-cta-divider::before, .fv-cta-divider::after { content: ""; flex: 1; height: 1px; background: #999999; }
.fv-cta-secondary { background: #ffffff; border-color: #000000; color: #000000; opacity: 1; cursor: pointer; }
.fv-material { margin-top: max(6px, calc(var(--fv-unit) * 12)); text-align: center; }
.fv-material-carousel { position: relative; width: 75%; margin: max(8px, calc(var(--fv-unit) * 16)) auto 0; }
.fv-material-preview { position: relative; display: block; width: 100%; padding: 0; border: 1px solid #eeeeee; border-radius: 5px; background: #ffffff; box-shadow: 0 4px 16px rgb(0 0 0 / 10%); cursor: zoom-in; isolation: isolate; }
.fv-material-preview::before { content: ""; position: absolute; z-index: -1; inset: -5px 5px 5px; border: 1px solid #dddddd; border-radius: 5px; background: #f3f3f3; transform: rotate(-3deg); }
.fv-material-preview img { position: relative; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 4px; background: #ffffff; }
.fv-material-expand { position: absolute; right: 5px; bottom: 5px; display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 4px; background: rgb(0 0 0 / 82%); color: #ffffff; font-size: max(9px, calc(var(--fv-unit) * 15)); line-height: 1.3; }
.fv-material-expand svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.fv-material-controls { position: absolute; inset: 0; pointer-events: none; }
.material-arrow { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; padding: 7px; border: 1px solid #dddddd; border-radius: 50%; background: #ffffff; color: #000000; transition: background .15s, border-color .15s; }
.material-arrow:hover { border-color: #000000; background: #f2f2f2; }
.material-arrow svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fv-material-controls .material-arrow { position: absolute; top: 50%; width: clamp(24px, 3vw, 34px); height: clamp(24px, 3vw, 34px); padding: 5px; pointer-events: auto; box-shadow: 0 2px 8px rgb(0 0 0 / 12%); }
.fv-material-controls [data-material-prev] { left: 0; transform: translate(-50%, -50%); }
.fv-material-controls [data-material-next] { right: 0; transform: translate(50%, -50%); }
body:has(.material-dialog[open]) { overflow: hidden; }
.material-dialog { width: min(1200px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 40px); margin: auto; padding: 20px; border: 0; border-radius: 16px; background: #ffffff; color: #000000; box-shadow: 0 24px 90px rgb(0 0 0 / 25%); }
.material-dialog::backdrop { background: rgb(0 0 0 / 70%); }
.material-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.material-dialog-header h2 { font-size: 17px; font-weight: 700; }
.material-dialog-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 9px; border: 1px solid #dddddd; border-radius: 50%; background: #ffffff; }
.material-dialog-close svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.material-dialog-image { width: 100%; height: auto; max-height: calc(100dvh - 220px); aspect-ratio: 16 / 9; object-fit: contain; background: #f5f5f5; }
.material-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.material-dialog-footer .material-arrow { width: 44px; height: 44px; padding: 11px; }
.material-dialog-caption { text-align: center; font-size: 15px; font-weight: 700; line-height: 1.6; }
.material-dialog-caption > span { color: #777777; font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
@media (max-width: 699px) {
  .fv-cta-card { position: relative; top: auto; left: auto; width: calc(100% - 40px); max-width: 360px; margin: 18px auto 0; padding: 18px 20px; border-radius: 26px; box-shadow: 0 10px 32px rgb(0 0 0 / 9%); }
  .fv-cta-button { min-height: 48px; padding: 10px 14px; font-size: 16px; }
  .fv-cta-divider { height: 30px; gap: 14px; font-size: 14px; }
  .fv-material { margin-top: 12px; }
  .fv-material-carousel { width: 84%; max-width: 260px; margin-top: 12px; }
  .fv-material-expand { font-size: 10px; }
  .fv-material-controls .material-arrow { width: 40px; height: 40px; padding: 10px; }
  .material-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 14px; border-radius: 12px; }
  .material-dialog-header { margin-bottom: 12px; }
  .material-dialog-header h2 { font-size: 15px; }
  .material-dialog-footer { margin-top: 12px; gap: 8px; }
  .material-dialog-caption { font-size: 12px; }
}
.service-features { padding-block: 64px 8px; background: var(--paper); }
.service-features > .container { width: calc(100vw * 611 / 1072); }
.service-features-visual { position: relative; }
.service-features-image { width: 100%; height: auto; aspect-ratio: 2171 / 724; }
/* Composite only the edited arrows so the original bears, type and CSM logo stay intact. */
.service-features-visual::before,
.service-features-visual::after { content: ""; position: absolute; inset: 0; clip-path: inset(37% 30% 49.5% 29.5%); pointer-events: none; }
.service-features-visual::before { background: #fff; }
.service-features-visual::after { background: #fc1202; -webkit-mask: url("assets/service-features-red-arrows-v1.png") center / 100% 100% no-repeat; mask: url("assets/service-features-red-arrows-v1.png") center / 100% 100% no-repeat; }
.service-features-wordmark { position: absolute; left: 74.15%; top: 78.75%; width: 22.6%; height: auto; }
.consideration-name > img { filter: url("#wordmark-accent-red"); }
.service-features-description { margin: 24px 20px 0; text-align: center; font-family: var(--font-site); font-size: max(14px, calc(100vw * 24 / 1072)); font-weight: 700; line-height: 1.8; }
.hero-placeholder + .clients,
.service-features + .clients { padding-top: 44px; }
@media (max-width: 699px) {
  .service-features { padding-block: 32px 0; }
  .hero-placeholder + .clients,
  .service-features + .clients { padding-top: 28px; }
}

/* Keep the 60px body line advance at 1072px while centering the large name. */
.consideration { --message-unit: calc(100vw / 1072); margin-top: 64px; padding: calc(var(--message-unit) * 64) 24px calc(var(--message-unit) * 67); background: #ffffff; color: #0d1a22; text-align: center; }
.consideration-inner { display: grid; width: max-content; max-width: 100%; margin-inline: auto; }
/* Let the copy determine the shared width instead of the headline. */
.consideration h2 { contain: inline-size; width: 100%; min-width: 0; max-width: 100%; margin-inline: auto; padding: calc(var(--message-unit) * 12) calc(var(--message-unit) * 8); border-radius: calc(var(--message-unit) * 6); background: #000000; color: #ffffff; font-size: calc(var(--message-unit) * 52); line-height: 1.5; font-weight: 900; letter-spacing: 0; }
.consideration h2 > span { display: inline-block; }
.consideration-copy { width: max-content; max-width: 100%; margin-top: calc(var(--message-unit) * 24); font-size: calc(var(--message-unit) * 32); line-height: 1.875; font-weight: 900; letter-spacing: 0; }
.consideration-line { display: block; }
.consideration-line--brand { display: flex; justify-content: center; align-items: center; height: 1.875em; }
.consideration-name { display: block; flex: none; width: calc(1em * 1326 / 331); height: 1em; margin-left: .12em; font-size: 2em; line-height: 0; }
.consideration-name img { display: block; width: 100%; height: auto; }
.consideration-plea { display: inline-flex; align-items: center; gap: .2em; margin-left: .2em; font-size: .7em; line-height: 1; letter-spacing: 0; white-space: nowrap; }
/* Display the bear's visible bounds without changing the supplied PNG. */
.consideration-plea-bear { position: relative; display: block; flex: none; width: calc(1.5em * 1140 / 746); height: 1.5em; overflow: hidden; }
.consideration-plea-bear img { position: absolute; top: calc(-100% * 315 / 746); left: calc(-100% * 58 / 1140); width: calc(100% * 1254 / 1140); max-width: none; height: auto; }
@media (max-width: 699px) {
  .consideration { margin-top: 36px; padding: 40px 20px 42px; }
  .consideration h2 { width: 100%; padding: 10px 4px; border-radius: 6px; font-size: clamp(26px, 6.8vw, 36px); line-height: 1.5; }
  .consideration h2 > span { display: block; }
  .consideration-copy { margin-top: 20px; font-size: clamp(14px, 4.1vw, 20px); line-height: 1.875; }
  .consideration-line--brand { display: block; height: auto; }
  .consideration-name { display: block; height: auto; margin: 8px auto; font-size: 2em; line-height: 0; }
  .consideration-plea { display: flex; justify-content: center; margin: 0; font-size: .7em; line-height: 1.875; }
}

/* Reference screenshot proportions: 1000px white panel at a 1440px viewport. */
.problem-reframe { --problem-unit: calc(100vw / 1440); padding-block: calc(var(--problem-unit) * 56) calc(var(--problem-unit) * 12); background: #f7f7f7; }
.problem-reframe .problem-panel { width: calc(var(--problem-unit) * 1000); padding: calc(var(--problem-unit) * 48) calc(var(--problem-unit) * 84); border-radius: calc(var(--problem-unit) * 16); }
.problem-reframe .problem-panel h2 { font-size: calc(var(--problem-unit) * 32); line-height: 1.5; letter-spacing: .035em; font-weight: 900; }
.problem-reframe .problem-list { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin-top: calc(var(--problem-unit) * 24); }
.problem-reframe .problem-illustration { display: block; position: relative; width: calc(var(--problem-unit) * 204); height: calc(var(--problem-unit) * 204); overflow: hidden; margin-inline: auto; }
.problem-reframe .problem-list img { display: block; width: 100%; height: 100%; object-fit: contain; margin: 0; }
.problem-reframe .problem-list h3 { margin-top: calc(var(--problem-unit) * 4); font-size: calc(var(--problem-unit) * 16); font-weight: 700; line-height: 1.5; letter-spacing: 0; }
.problem-resolution { margin-top: calc(var(--problem-unit) * 50); }
.problem-resolution h3 { font-size: calc(var(--problem-unit) * 32); font-weight: 900; line-height: 1.5; color: var(--accent); letter-spacing: 0; }
.problem-resolution h3 span { background: linear-gradient(transparent 68%, var(--accent-soft) 68%); }
.problem-cta { display: flex; justify-content: center; align-items: center; gap: calc(var(--problem-unit) * 16); width: calc(var(--problem-unit) * 440); min-height: calc(var(--problem-unit) * 66); margin: calc(var(--problem-unit) * 24) auto 0; padding: calc(var(--problem-unit) * 16) calc(var(--problem-unit) * 24); border-radius: 999px; background: var(--accent); color: #ffffff; font-size: calc(var(--problem-unit) * 18); font-weight: 700; line-height: 1.5; }
.problem-cta svg { flex: none; width: calc(var(--problem-unit) * 10); height: calc(var(--problem-unit) * 16); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.problem-cta:hover { background: var(--accent-hover); }
.problem-cta:focus-visible { outline: 3px solid var(--accent-focus); outline-offset: 4px; }
@media (max-width: 699px) {
  .problem-reframe { padding-block: 36px 16px; }
  .problem-reframe .problem-panel { width: calc(100% - 32px); padding: 28px 20px 30px; border-radius: 16px; }
  .problem-reframe .problem-panel h2 { font-size: clamp(17px, 4.8vw, 24px); line-height: 1.6; letter-spacing: 0; }
  .problem-reframe .problem-list { grid-template-columns: 1fr; margin-top: 24px; gap: 14px; }
  .problem-reframe .problem-list li { display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: center; gap: 10px; }
  .problem-reframe .problem-illustration { width: 100px; height: 100px; }
  .problem-reframe .problem-list h3 { margin-top: 0; font-size: clamp(11px, 3.4vw, 16px); line-height: 1.7; text-align: left; }
  .problem-resolution { margin-top: 30px; }
  .problem-resolution h3 { font-size: clamp(17px, 4.6vw, 23px); line-height: 1.7; }
  .problem-cta { width: 100%; min-height: 56px; margin-top: 24px; padding: 15px 12px; gap: 10px; font-size: clamp(11px, 3.35vw, 15px); }
  .problem-cta svg { width: 9px; height: 14px; }
}

/* Service overview follows the reference's white panel, black banner and loop diagram. */
.service-overview { --overview-unit: calc(100vw / 1440); padding: calc(var(--overview-unit) * 40) 0 calc(var(--overview-unit) * 48); background: #f7f7f7; color: #000000; text-align: center; }
.service-overview-panel { width: calc(var(--overview-unit) * 1000); margin-inline: auto; padding: calc(var(--overview-unit) * 36) calc(var(--overview-unit) * 80); border-radius: calc(var(--overview-unit) * 16); background: #ffffff; }
.service-overview h2 { font-size: calc(var(--overview-unit) * 32); font-weight: 700; line-height: 1.5; letter-spacing: .035em; }
.service-overview-summary { width: calc(var(--overview-unit) * 540); min-height: calc(var(--overview-unit) * 46); margin: calc(var(--overview-unit) * 28) auto 0; padding: calc(var(--overview-unit) * 8) calc(var(--overview-unit) * 20); border-radius: calc(var(--overview-unit) * 8); background: #000000; color: #ffffff; font-size: calc(var(--overview-unit) * 20); font-weight: 700; line-height: 1.5; }
.service-flow { position: relative; width: calc(var(--overview-unit) * 660); height: calc(var(--overview-unit) * 190); margin: calc(var(--overview-unit) * 48) auto 0; }
.service-flow-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.service-flow-arrows > path { fill: none; stroke: #000000; stroke-width: 2.8; stroke-linecap: round; }
.service-flow-person { position: absolute; top: 0; left: 0; width: 25.758%; height: 100%; object-fit: contain; }
.service-flow-brand { position: absolute; right: 0; top: 11.579%; width: 27.273%; }
.service-flow-brand img { width: 53.334%; height: auto; margin-inline: auto; }
.service-flow-brand .dezamil-wordmark { width: calc(1em * 1326 / 331); height: 1em; max-width: 100%; }
.service-flow-brand span { display: block; margin-top: calc(var(--overview-unit) * 5); font-size: calc(var(--overview-unit) * 32); line-height: 1.5; font-weight: 900; }
.service-flow-label { position: absolute; left: 49.4%; display: flex; align-items: center; gap: calc(var(--overview-unit) * 8); width: max-content; padding-inline: calc(var(--overview-unit) * 10); background: #ffffff; transform: translateX(-50%); font-size: calc(var(--overview-unit) * 24); line-height: 1.5; font-weight: 900; white-space: nowrap; }
.service-flow-label svg { flex: none; width: calc(var(--overview-unit) * 24); height: calc(var(--overview-unit) * 32); fill: none; stroke: #000000; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.service-flow-send { top: 0; }
.service-flow-return { bottom: 0; font-size: calc(var(--overview-unit) * 22); }
.service-flow-return svg { width: calc(var(--overview-unit) * 30); height: calc(var(--overview-unit) * 26); }
.service-overview-description { margin-top: calc(var(--overview-unit) * 48); font-size: calc(var(--overview-unit) * 16); font-weight: 700; line-height: 1.5; letter-spacing: -.02em; }
@media (max-width: 699px) {
  .service-overview { padding: 20px 0 24px; }
  .service-overview-panel { width: calc(100% - 32px); padding: 24px 20px; border-radius: 16px; }
  .service-overview h2 { font-size: 21px; line-height: 1.6; }
  .service-overview-summary { width: 100%; min-height: 0; margin-top: 18px; padding: 10px 12px; border-radius: 6px; font-size: 13px; line-height: 1.7; }
  .service-flow { width: 100%; height: auto; aspect-ratio: 660 / 190; margin-top: 24px; }
  .service-flow-brand span { margin-top: 2px; font-size: clamp(11px, 3.6vw, 20px); }
  .service-flow-label { gap: 3px; padding-inline: 4px; font-size: clamp(10px, 3vw, 16px); }
  .service-flow-label svg { width: 12px; height: 16px; stroke-width: 3; }
  .service-flow-return { font-size: clamp(9px, 2.5vw, 14px); }
  .service-flow-return svg { width: 15px; height: 13px; }
  .service-overview-description { margin-top: 20px; font-size: 12px; line-height: 1.9; letter-spacing: 0; }
  .service-overview-description > span { display: block; }
}

/* Three benefit cards: dimensions follow the supplied reference at a 1440px viewport. */
.service-points { --points-unit: calc(100vw / 1440); --points-accent: var(--accent); padding-block: calc(var(--points-unit) * 50); background: var(--accent-surface); color: #000; }
.service-points-panel { width: calc(var(--points-unit) * 1024); margin-inline: auto; padding: calc(var(--points-unit) * 48) calc(var(--points-unit) * 50) calc(var(--points-unit) * 40); border-radius: calc(var(--points-unit) * 17); background: #fff; }
.service-points h2 { display: flex; align-items: center; justify-content: center; min-height: calc(var(--points-unit) * 70); font-size: calc(var(--points-unit) * 32); line-height: 1.5; font-weight: 900; white-space: nowrap; }
.points-heading-brand, .points-heading-count { display: inline-flex; align-items: center; }
.points-heading-brand .dezamil-wordmark { margin-right: .06em; }
.points-heading-count strong { margin-inline: .05em; color: var(--points-accent); font-size: 2em; font-weight: 900; line-height: 1; }
.service-points-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--points-unit) * 18); margin-top: calc(var(--points-unit) * 30); }
.point-card { min-width: 0; min-height: calc(var(--points-unit) * 414); padding: calc(var(--points-unit) * 48) calc(var(--points-unit) * 24) calc(var(--points-unit) * 34); border: max(1px, calc(var(--points-unit) * 2)) solid #000; border-radius: calc(var(--points-unit) * 10); }
.point-callout { position: relative; z-index: 1; width: max-content; max-width: 100%; margin-inline: auto; padding: calc(var(--points-unit) * 8) calc(var(--points-unit) * 16); border-radius: 999px; background: var(--points-accent); color: #fff; font-size: calc(var(--points-unit) * 21); font-weight: 700; line-height: 1.4; text-align: center; white-space: nowrap; }
.point-callout::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--points-unit) * -14); width: calc(var(--points-unit) * 24); height: calc(var(--points-unit) * 24); transform: translateX(-50%); background: url("assets/point-callout-tail.svg") center / contain no-repeat; }
.point-illustration { filter: url("#brand-accent-red"); width: calc(var(--points-unit) * 180); height: calc(var(--points-unit) * 180); margin: calc(var(--points-unit) * -32) auto calc(var(--points-unit) * -18); object-fit: contain; }
.point-details { display: grid; gap: calc(var(--points-unit) * 12); margin-top: calc(var(--points-unit) * 20); font-size: calc(var(--points-unit) * 15); line-height: 1.55; }
.point-details li { display: flex; align-items: flex-start; gap: calc(var(--points-unit) * 5); }
.point-details .icon { width: calc(var(--points-unit) * 22); height: calc(var(--points-unit) * 23); stroke-width: 2.5; stroke-linecap: square; }
.point-details strong { color: var(--points-accent); font-weight: 700; }
.point-note { margin-top: calc(var(--points-unit) * 22); color: #6a6a6a; font-size: calc(var(--points-unit) * 12); line-height: 1.45; }
.point-note a { text-decoration: underline; text-underline-offset: .16em; }
.point-note a:hover { color: #000; }
@media (max-width: 699px) {
  .service-points { --points-unit: 1px; padding-block: 28px; }
  .service-points-panel { width: calc(100% - 32px); padding: 28px 16px; border-radius: 16px; }
  .service-points h2 { flex-wrap: wrap; min-height: 0; column-gap: 4px; font-size: clamp(18px, 5.1vw, 24px); line-height: 1.6; }
  .service-points-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 26px; }
  .point-card { min-height: 0; padding: 30px 20px; border: 2px solid #000; border-radius: 10px; }
  .point-callout { padding: 8px 16px; font-size: 19px; }
  .point-illustration { width: 180px; height: 180px; margin: -26px auto -14px; }
  .point-details { margin-top: 18px; gap: 10px; font-size: 14px; }
  .point-details .icon { width: 20px; height: 22px; }
  .point-note { margin-top: 18px; font-size: 12px; line-height: 1.6; }
}

/* Price simulation guide: scale the supplied desktop layout from a 1440px canvas. */
.simulation-guide { --simulation-unit: calc(100vw / 1440); --simulation-accent: var(--accent); padding-bottom: calc(var(--simulation-unit) * 28); background: var(--accent-surface); color: #000; }
.simulation-guide-heading { position: relative; width: calc(var(--simulation-unit) * 1024); height: calc(var(--simulation-unit) * 190); margin-inline: auto; padding-top: calc(var(--simulation-unit) * 68); text-align: center; }
.simulation-guide-person { position: absolute; z-index: 1; top: calc(var(--simulation-unit) * 59); left: calc(var(--simulation-unit) * 129); width: calc(var(--simulation-unit) * 166); height: calc(var(--simulation-unit) * 166); object-fit: contain; transform: scaleX(-1); pointer-events: none; }
.simulation-guide-eyebrow { color: var(--simulation-accent); font-size: calc(var(--simulation-unit) * 20); font-weight: 700; line-height: 1.5; }
.simulation-guide h2 { margin-top: calc(var(--simulation-unit) * 14); font-size: calc(var(--simulation-unit) * 32); font-weight: 900; line-height: 1.5; letter-spacing: .025em; }
.simulation-guide-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--simulation-unit) * 32); width: calc(var(--simulation-unit) * 1024); margin: 0 auto; padding: calc(var(--simulation-unit) * 24) calc(var(--simulation-unit) * 40); border-radius: calc(var(--simulation-unit) * 9); background: #fff; }
.simulation-guide-options div { min-width: 0; }
.simulation-guide-options dt { font-size: calc(var(--simulation-unit) * 16); font-weight: 700; line-height: 1.5; }
.simulation-guide-options dd { display: flex; align-items: center; min-height: max(44px, calc(var(--simulation-unit) * 60)); margin: calc(var(--simulation-unit) * 8) 0 0; padding: calc(var(--simulation-unit) * 12) calc(var(--simulation-unit) * 16); border: 1px solid #d5d5d5; border-radius: calc(var(--simulation-unit) * 8); font-size: calc(var(--simulation-unit) * 15); line-height: 1.5; }
.simulation-guide-options .simulation-guide-select { padding: 0; }
.simulation-guide-select select { display: block; width: 100%; min-width: 0; min-height: max(42px, calc(var(--simulation-unit) * 60 - 2px)); padding: calc(var(--simulation-unit) * 12) calc(var(--simulation-unit) * 42) calc(var(--simulation-unit) * 12) calc(var(--simulation-unit) * 16); border: 0; border-radius: inherit; background: #fff url("assets/simulation-chevron.svg") right calc(var(--simulation-unit) * 16) center / calc(var(--simulation-unit) * 14) auto no-repeat; color: inherit; font: inherit; appearance: none; cursor: pointer; }
.simulation-guide-select select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.simulation-guide-cta { display: flex; align-items: center; justify-content: center; gap: calc(var(--simulation-unit) * 9); width: calc(var(--simulation-unit) * 450); min-height: max(48px, calc(var(--simulation-unit) * 72)); margin: calc(var(--simulation-unit) * 48) auto 0; padding: calc(var(--simulation-unit) * 14) calc(var(--simulation-unit) * 22); border: max(1.5px, calc(var(--simulation-unit) * 2)) solid var(--simulation-accent); border-radius: 999px; background: #fff; color: var(--simulation-accent); font-size: calc(var(--simulation-unit) * 19); font-weight: 700; line-height: 1.5; transition: color .2s, background-color .2s; }
.simulation-guide-cta:hover { background: var(--simulation-accent); color: #fff; }
.simulation-guide-cta:focus-visible { outline: 3px solid #000; outline-offset: 5px; }
.simulation-guide-chevron { width: .7em; height: .7em; flex: none; background: currentColor; mask: url("assets/simulation-chevron.svg") center / contain no-repeat; transform: rotate(-90deg); }
@media (max-width: 699px) {
  .simulation-guide { --simulation-unit: 1px; padding: 34px 20px 36px; }
  .simulation-guide-heading { width: 100%; height: auto; padding: 0 0 28px; }
  .simulation-guide-person { position: static; width: 126px; height: 126px; margin: 0 auto 14px; }
  .simulation-guide-eyebrow { font-size: 13px; }
  .simulation-guide h2 { margin-top: 10px; font-size: clamp(18px, 5vw, 25px); letter-spacing: 0; }
  .simulation-guide-options { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px; border-radius: 10px; }
  .simulation-guide-options dt { font-size: 14px; }
  .simulation-guide-options dd { min-height: 52px; margin-top: 7px; padding: 12px 14px; border-radius: 8px; font-size: 15px; }
  .simulation-guide-select select { min-height: 50px; padding: 12px 40px 12px 14px; background-position: right 14px center; background-size: 14px auto; font-size: 16px; }
  .simulation-guide-cta { width: 100%; max-width: 450px; min-height: 58px; margin-top: 26px; padding: 14px 12px; font-size: 16px; gap: 8px; }
}

/* Comparison: reference proportions at a 1440px viewport, with a readable mobile table. */
.service-comparison { --comparison-unit: calc(100vw / 1440); --comparison-accent: var(--accent); padding-block: calc(var(--comparison-unit) * 56); background: #f7f7f7; color: #000; text-align: center; }
.comparison-panel { width: calc(var(--comparison-unit) * 1024); margin-inline: auto; padding: calc(var(--comparison-unit) * 42) calc(var(--comparison-unit) * 78) calc(var(--comparison-unit) * 42); border-radius: calc(var(--comparison-unit) * 14); background: #fff; }
.service-comparison h2 { font-size: calc(var(--comparison-unit) * 28); font-weight: 900; line-height: 1.5; }
.comparison-intro { margin-top: calc(var(--comparison-unit) * 44); font-size: calc(var(--comparison-unit) * 14); font-weight: 700; line-height: 1.7; white-space: nowrap; }
.comparison-intro strong { color: var(--comparison-accent); background: linear-gradient(transparent 72%, var(--accent-soft) 72%); font-weight: 700; }
.comparison-scroll-hint { display: none; }
.comparison-scroll { margin-top: calc(var(--comparison-unit) * 35); }
.comparison-scroll:focus-visible { outline: 2px solid var(--comparison-accent); outline-offset: 5px; }
.comparison-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: calc(var(--comparison-unit) * 7) calc(var(--comparison-unit) * 3); font-size: calc(var(--comparison-unit) * 16); line-height: 1.5; }
.comparison-label-column { width: 23.3%; }
.comparison-table th, .comparison-table td { padding: calc(var(--comparison-unit) * 8); vertical-align: middle; }
.comparison-table thead th { height: calc(var(--comparison-unit) * 50); border-radius: calc(var(--comparison-unit) * 7) calc(var(--comparison-unit) * 7) 0 0; background: #000; color: #fff; font-size: calc(var(--comparison-unit) * 18); font-weight: 700; }
.comparison-table thead .comparison-featured { background: var(--comparison-accent); }
.comparison-table thead img { width: calc(var(--comparison-unit) * 116); height: auto; margin-inline: auto; filter: invert(1); }
.comparison-table tbody th, .comparison-table tbody td { height: calc(var(--comparison-unit) * 90); background: #f5f5f5; }
.comparison-table tbody th { font-size: calc(var(--comparison-unit) * 14); font-weight: 700; }
.comparison-table tbody td { box-shadow: calc(var(--comparison-unit) * 12) calc(var(--comparison-unit) * 20) calc(var(--comparison-unit) * 26) rgb(0 0 0 / 6%); }
.comparison-table tbody .comparison-featured { background: #fff; color: var(--comparison-accent); font-size: calc(var(--comparison-unit) * 18); font-weight: 700; }
.comparison-table sup { font-size: .6em; vertical-align: super; line-height: 0; }
.comparison-mark { display: block; width: calc(var(--comparison-unit) * 28); height: calc(var(--comparison-unit) * 28); margin: 0 auto calc(var(--comparison-unit) * 6); background: currentColor; -webkit-mask: var(--comparison-mark) center / contain no-repeat; mask: var(--comparison-mark) center / contain no-repeat; }
.comparison-mark--yes { --comparison-mark: url("assets/comparison-double-circle.svg"); }
.comparison-mark--conditional { --comparison-mark: url("assets/comparison-triangle.svg"); }
.comparison-mark--self { --comparison-mark: url("assets/comparison-x.svg"); }
.comparison-notes { margin-top: calc(var(--comparison-unit) * 42); color: #777; font-size: calc(var(--comparison-unit) * 12); line-height: 1.6; }
@media (max-width: 699px) {
  .service-comparison { --comparison-unit: 1px; padding-block: 36px; }
  .comparison-panel { width: calc(100% - 32px); padding: 28px 16px; border-radius: 16px; }
  .service-comparison h2 { font-size: 22px; }
  .comparison-intro { margin-top: 24px; font-size: 13px; line-height: 1.9; white-space: normal; }
  .comparison-scroll-hint { display: block; margin-top: 24px; color: #777; font-size: 11px; }
  .comparison-scroll { overflow-x: auto; margin-top: 10px; padding-bottom: 16px; scrollbar-color: #bbb #f5f5f5; scrollbar-width: thin; }
  .comparison-table { width: 640px; border-spacing: 5px 3px; font-size: 14px; }
  .comparison-label-column { width: 21%; }
  .comparison-table th, .comparison-table td { padding: 8px; }
  .comparison-table thead th { height: 50px; border-radius: 7px 7px 0 0; font-size: 16px; }
  .comparison-table thead img { width: 110px; }
  .comparison-table .comparison-empty { position: sticky; left: 0; z-index: 2; background: #fff; }
  .comparison-table tbody th, .comparison-table tbody td { height: 94px; }
  .comparison-table tbody th { position: sticky; left: 0; z-index: 1; font-size: 12px; box-shadow: 3px 0 0 #fff; }
  .comparison-table tbody .comparison-featured { font-size: 16px; }
  .comparison-mark { width: 28px; height: 28px; margin-bottom: 6px; }
  .comparison-notes { margin-top: 24px; font-size: 11px; line-height: 1.7; text-align: left; }
  .comparison-notes p + p { margin-top: 6px; }
}

/* Three-step process: reference layout scaled to the shared 1024px content panel. */
.service-process { --process-unit: calc(100vw / 1440); padding-bottom: calc(var(--process-unit) * 40); background: #f7f7f7; color: #000; }
.process-panel { width: calc(var(--process-unit) * 1024); margin-inline: auto; padding: calc(var(--process-unit) * 44) calc(var(--process-unit) * 102) calc(var(--process-unit) * 44); border-radius: calc(var(--process-unit) * 16); background: #fff; }
.process-eyebrow { text-align: center; font-size: calc(var(--process-unit) * 16); line-height: 1.5; font-weight: 700; }
.service-process h2 { display: flex; align-items: center; justify-content: center; gap: .12em; margin-top: calc(var(--process-unit) * 20); font-size: calc(var(--process-unit) * 32); line-height: 1.5; font-weight: 700; }
.process-steps { display: grid; gap: calc(var(--process-unit) * 24); margin: calc(var(--process-unit) * 48) 0 0; padding: 0; list-style: none; }
.process-step { position: relative; display: grid; grid-template-columns: calc(var(--process-unit) * 110) minmax(0,1fr); align-items: center; gap: calc(var(--process-unit) * 12); min-height: calc(var(--process-unit) * 172); padding: calc(var(--process-unit) * 24) calc(var(--process-unit) * 46) calc(var(--process-unit) * 24) calc(var(--process-unit) * 70); border: max(1px, calc(var(--process-unit) * 2)) solid #000; border-radius: calc(var(--process-unit) * 16); }
.process-step-number { position: absolute; top: -1px; left: -1px; display: flex; align-items: center; justify-content: center; width: calc(var(--process-unit) * 47); height: calc(var(--process-unit) * 44); border-top-left-radius: calc(var(--process-unit) * 15); background: #000; color: #fff; font-size: calc(var(--process-unit) * 20); line-height: 1; font-weight: 700; }
.process-step-visual { display: flex; align-items: center; justify-content: center; width: calc(var(--process-unit) * 110); height: calc(var(--process-unit) * 110); }
.process-request-icon { width: calc(var(--process-unit) * 78); height: calc(var(--process-unit) * 78); }
.process-review-image { width: 100%; height: 100%; object-fit: contain; }
.process-step-brand { width: calc(var(--process-unit) * 100); height: auto; }
.process-step h3 { font-size: calc(var(--process-unit) * 20); font-weight: 700; line-height: 1.5; }
.process-step-copy p { margin-top: calc(var(--process-unit) * 8); font-size: calc(var(--process-unit) * 14); font-weight: 500; line-height: 1.7; }
.process-action { margin-top: calc(var(--process-unit) * 48); text-align: center; }
.process-action > p { font-size: calc(var(--process-unit) * 20); font-weight: 700; line-height: 1.5; }
.process-cta { display: flex; align-items: center; justify-content: center; gap: calc(var(--process-unit) * 18); width: calc(var(--process-unit) * 450); min-height: calc(var(--process-unit) * 68); margin: calc(var(--process-unit) * 18) auto 0; padding: calc(var(--process-unit) * 16) calc(var(--process-unit) * 24); border-radius: 999px; background: var(--accent); color: #fff; font-size: calc(var(--process-unit) * 18); font-weight: 700; line-height: 1.5; }
.process-cta .simulation-guide-chevron { width: calc(var(--process-unit) * 12); height: calc(var(--process-unit) * 12); }
.process-cta:hover { background: var(--accent-hover); }
.process-cta:focus-visible { outline: 3px solid var(--accent-focus); outline-offset: 4px; }
@media (max-width: 699px) {
  .service-process { --process-unit: 1px; padding-bottom: 28px; }
  .process-panel { width: calc(100% - 32px); padding: 28px 16px; border-radius: 16px; }
  .process-eyebrow { font-size: 11px; line-height: 1.8; }
  .service-process h2 { margin-top: 12px; gap: .12em; font-size: clamp(18px, 5vw, 24px); white-space: nowrap; }
  .process-steps { gap: 18px; margin-top: 28px; }
  .process-step { grid-template-columns: minmax(0,1fr); gap: 8px; min-height: 0; padding: 28px 20px 24px; border: 1.5px solid #000; border-radius: 14px; }
  .process-step-number { width: 34px; height: 34px; border-top-left-radius: 13px; font-size: 17px; }
  .process-step-visual { width: 88px; height: 88px; margin-inline: auto; }
  .process-request-icon { width: 60px; height: 60px; }
  .process-step-brand { width: 88px; }
  .process-step h3 { font-size: 17px; text-align: center; }
  .process-step-copy p { margin-top: 10px; font-size: 13px; line-height: 1.8; }
  .process-action { margin-top: 28px; }
  .process-action > p { font-size: 14px; line-height: 1.8; }
  .process-cta { width: 100%; min-height: 56px; margin-top: 16px; padding: 14px 12px; gap: 8px; font-size: clamp(12px, 3.45vw, 16px); }
  .process-cta .simulation-guide-chevron { width: 10px; height: 10px; }
}

/* Customer voices: original quotes and portraits within the shared content width. */
.service-voices { --voices-unit: calc(100vw / 1440); padding-bottom: calc(var(--voices-unit) * 44); background: #f7f7f7; color: #000; }
.voices-panel { width: calc(var(--voices-unit) * 1024); margin-inline: auto; padding: calc(var(--voices-unit) * 50) calc(var(--voices-unit) * 49) calc(var(--voices-unit) * 56); border-radius: calc(var(--voices-unit) * 17); background: #fff; }
.service-voices h2 { text-align: center; font-size: calc(var(--voices-unit) * 34); font-weight: 900; line-height: 1.5; }
.voices-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: calc(var(--voices-unit) * 24); margin-top: calc(var(--voices-unit) * 36); }
.voice-card { display: flex; flex-direction: column; min-width: 0; padding: calc(var(--voices-unit) * 24); border: max(1px, calc(var(--voices-unit) * 1.2)) solid #d9d9d9; border-radius: calc(var(--voices-unit) * 8); }
.voice-copy { margin: 0; font-size: clamp(14px, calc(var(--voices-unit) * 15), 20px); font-weight: 400; line-height: 1.9; overflow-wrap: anywhere; }
.voice-copy p + p { margin-top: .6em; }
.voice-copy strong { font-weight: 700; }
.voice-profile { display: flex; align-items: center; gap: max(12px, calc(var(--voices-unit) * 18)); margin-top: auto; padding-top: calc(var(--voices-unit) * 24); }
.voice-portrait { display: block; flex: none; width: clamp(64px, calc(var(--voices-unit) * 80), 112px); height: auto; aspect-ratio: 1; overflow: hidden; border-radius: 50%; }
.voice-profile > div { min-width: 0; }
.voice-name { font-size: clamp(14px, calc(var(--voices-unit) * 17), 22px); font-weight: 700; line-height: 1.6; }
.voice-name span { font-size: .75em; font-weight: 400; }
.voice-affiliation { margin-top: 4px; color: #555; font-size: clamp(11px, calc(var(--voices-unit) * 12), 16px); line-height: 1.65; overflow-wrap: anywhere; }
.voice-industry { width: fit-content; margin-top: 8px; padding: calc(var(--voices-unit) * 4) calc(var(--voices-unit) * 8); border-radius: calc(var(--voices-unit) * 4); background: #f5f5f7; font-size: clamp(11px, calc(var(--voices-unit) * 12), 16px); font-weight: 400; line-height: 1.5; }
.voices-more { display: block; width: fit-content; margin: calc(var(--voices-unit) * 56) auto 0; color: var(--accent); font-size: calc(var(--voices-unit) * 20); font-weight: 700; line-height: 1.5; text-decoration: underline; text-underline-offset: .12em; }
.voices-more:hover { color: var(--accent-hover); }
.voices-more:focus-visible { outline: 3px solid var(--accent-focus); outline-offset: 5px; }
@media (max-width: 699px) {
  .service-voices { --voices-unit: 1px; padding-bottom: 28px; }
  .voices-panel { width: calc(100% - 32px); padding: 28px 16px; border-radius: 16px; }
  .service-voices h2 { font-size: 24px; }
  .voices-grid { grid-template-columns: minmax(0,1fr); gap: 18px; margin-top: 24px; }
  .voice-card { min-height: 0; padding: 20px; border: 1px solid #d9d9d9; border-radius: 8px; }
  .voice-copy { min-height: 0; font-size: 14px; line-height: 1.8; }
  .voice-profile { gap: 12px; padding-top: 20px; }
  .voice-portrait { width: 64px; }
  .voice-name { font-size: 16px; }
  .voice-affiliation { font-size: 12px; }
  .voice-industry { padding: 4px 8px; font-size: 11px; }
  .voices-more { margin-top: 30px; font-size: 17px; }
}

/* Client logos: full-width single row from the reference, reusing original assets. */
.client-partners { --partners-unit: calc(100vw / 1440); position: relative; overflow: hidden; padding: calc(var(--partners-unit) * 48) 0 calc(var(--partners-unit) * 56); background: #fff; color: #000; }
.partners-heading { width: calc(var(--partners-unit) * 1024); margin: 0 auto calc(var(--partners-unit) * 32); text-align: center; }
.client-partners h2 { font-size: calc(var(--partners-unit) * 26); line-height: 1.5; font-weight: 700; letter-spacing: .04em; }
.client-partners .marquee.is-ready { mask-image: none; }
.client-partners .logo-list { gap: calc(var(--partners-unit) * 42); padding-right: calc(var(--partners-unit) * 42); }
.client-partners .logo-list li { width: calc(var(--partners-unit) * 128); height: calc(var(--partners-unit) * 64); }
.client-partners .logo-list img { max-width: calc(var(--partners-unit) * 120); max-height: calc(var(--partners-unit) * 56); filter: none; }
.client-partners .marquee.is-ready .marquee-track { animation-duration: 90s; }
.client-partners .marquee:focus-within .marquee-track { animation-play-state: paused; }
.client-partners .marquee:focus-visible { outline: 2px solid #777; outline-offset: -2px; }
.client-partners .marquee-toggle { position: absolute; right: 20px; bottom: 8px; min-height: 32px; padding: 4px 8px; color: #777; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 699px) {
  .client-partners { --partners-unit: 1px; padding: 36px 0 48px; }
  .partners-heading { width: calc(100% - 32px); margin-bottom: 28px; }
  .client-partners h2 { max-width: 18em; margin-inline: auto; font-size: 18px; line-height: 1.8; letter-spacing: .025em; text-wrap: balance; }
  .client-partners .logo-list { gap: 36px; padding-right: 36px; }
  .client-partners .logo-list li { width: 120px; height: 64px; }
  .client-partners .logo-list img { max-width: 112px; max-height: 56px; }
  .client-partners .marquee-toggle { right: 12px; bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .client-partners .marquee { overflow-x: auto; }
  .client-partners .marquee-track { width: max-content; }
  .client-partners .logo-list { width: max-content; flex-wrap: nowrap; justify-content: flex-start; padding-left: 20px; }
}

/* FAQ: always-visible answers, matching the reference and shared content width. */
.service-faq { --faq-unit: calc(100vw / 1440); padding-block: calc(var(--faq-unit) * 56); background: var(--accent-surface); color: #000; }
.faq-panel { width: calc(var(--faq-unit) * 1024); margin-inline: auto; padding: calc(var(--faq-unit) * 50) calc(var(--faq-unit) * 49) calc(var(--faq-unit) * 56); border-radius: calc(var(--faq-unit) * 18); background: #fff; }
.service-faq h2 { text-align: center; font-size: calc(var(--faq-unit) * 34); font-weight: 900; line-height: 1.5; letter-spacing: .04em; }
.faq-list { display: grid; gap: calc(var(--faq-unit) * 44); margin: calc(var(--faq-unit) * 46) 0 0; }
.faq-item { display: grid; gap: calc(var(--faq-unit) * 18); }
.faq-item dt, .faq-item dd { display: grid; grid-template-columns: calc(var(--faq-unit) * 50) minmax(0,1fr); align-items: center; column-gap: calc(var(--faq-unit) * 18); margin: 0; }
.faq-item dt { font-size: calc(var(--faq-unit) * 19); font-weight: 700; line-height: 1.6; }
.faq-item dd { column-gap: calc(var(--faq-unit) * 26); font-size: calc(var(--faq-unit) * 17); font-weight: 400; line-height: 1.55; }
.faq-label { display: flex; align-items: center; justify-content: center; width: calc(var(--faq-unit) * 50); height: calc(var(--faq-unit) * 50); border-radius: 50%; color: #fff; font-size: calc(var(--faq-unit) * 19); font-weight: 900; line-height: 1; }
.faq-label-question { background: var(--accent); }
.faq-label-answer { background: #000; }
.faq-more { display: block; width: fit-content; margin: calc(var(--faq-unit) * 58) auto 0; color: var(--accent); font-size: calc(var(--faq-unit) * 22); font-weight: 700; line-height: 1.5; text-decoration: underline; text-underline-offset: .1em; }
.faq-more:hover { color: var(--accent-hover); }
.faq-more:focus-visible { outline: 3px solid var(--accent-focus); outline-offset: 5px; }
@media (max-width: 699px) {
  .service-faq { --faq-unit: 1px; padding-block: 36px; }
  .faq-panel { width: calc(100% - 32px); padding: 30px 20px 36px; border-radius: 16px; }
  .service-faq h2 { font-size: 24px; }
  .faq-list { gap: 30px; margin-top: 30px; }
  .faq-item { gap: 14px; }
  .faq-item dt, .faq-item dd { grid-template-columns: 36px minmax(0,1fr); align-items: start; column-gap: 12px; }
  .faq-item dt { font-size: 16px; line-height: 1.7; }
  .faq-item dt > span:last-child { padding-top: 3px; }
  .faq-item dd { font-size: 14px; line-height: 1.8; }
  .faq-item dd > p { padding-top: 3px; }
  .faq-label { width: 36px; height: 36px; font-size: 16px; }
  .faq-more { margin-top: 32px; padding-block: 6px; font-size: 18px; }
}

/* A small guide peeks around the CTA card beside the document preview. */
.fv-material-guide { position: absolute; z-index: 2; left: calc(100% - var(--fv-unit) * 14); bottom: calc(var(--fv-unit) * 12); width: calc(var(--fv-unit) * 152); pointer-events: none; }
.fv-peeking-bear { width: 100%; height: auto; }
.fv-bear-bubble { position: relative; z-index: 1; width: max-content; margin: 0 0 calc(var(--fv-unit) * -8) calc(var(--fv-unit) * 10); padding: calc(var(--fv-unit) * 8); border: max(1px, calc(var(--fv-unit) * 2)) solid #29130c; border-radius: calc(var(--fv-unit) * 18); background: #fff; color: #29130c; font-size: max(9px, calc(var(--fv-unit) * 15)); font-weight: 700; line-height: 1.5; text-align: center; white-space: nowrap; transform: rotate(4deg); }
.fv-bear-bubble::after { content: ""; position: absolute; right: 36%; bottom: calc(var(--fv-unit) * -6); width: calc(var(--fv-unit) * 9); height: calc(var(--fv-unit) * 9); border-right: max(1px, calc(var(--fv-unit) * 2)) solid #29130c; border-bottom: max(1px, calc(var(--fv-unit) * 2)) solid #29130c; background: #fff; transform: skew(-12deg) rotate(45deg); }
@media (max-width: 699px) {
  .fv-material-guide { left: auto; right: 46px; bottom: 14px; width: 60px; }
  .fv-bear-bubble { position: absolute; left: 16px; right: auto; top: -36px; bottom: auto; width: max-content; margin: 0; padding: 5px 3px; border-width: 1px; border-radius: 12px; font-size: 9px; transform: rotate(4deg); }
  .fv-bear-bubble::after { left: 16%; right: auto; bottom: -5px; width: 8px; height: 8px; border-width: 1px; }
  .fv-material-carousel { width: calc(100% - 76px); max-width: 222px; margin: 24px auto 0 6px; }
  .fv-material-controls { z-index: 3; }
}