/* Component structure, surfaces, brand colors, and spacing. */
:root {
  --site-primary:#6B3FA0;
  --site-primary-hover:#5a3387;
  --site-primary-light:#EDE5F6;
  --ink:#211a2b;
  --site-muted:#6f6975;
  --paper:#faf9f5;
  --line:#dad6df;
  --site-accent:#EDE5F6;
  --font:'DM Sans',sans-serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:5.9375em;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
}

a {
  color:inherit;
}

button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent;
}

a,button {
  touch-action:manipulation;
}

button {
  cursor:pointer;
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:0.1875em solid var(--site-primary);
  outline-offset:0.3125em;
}

h1,h2,h3,p {
  margin:0;
}

p {
  color:var(--site-muted);
}

em {
  color:var(--site-primary);
}

svg {
  display:block;
  width:100%;
}

.container {
  max-width:80em;
  margin:auto;
  width:calc(100% - 7em);
}

.site-header {
  height:6em;
  border-bottom:0.0625em solid var(--line);
  position:relative;
  z-index:20;
  background:var(--paper);
}

.header-inner {
  display:flex;
  align-items:center;
  height:100%;
  gap:2.8125em;
}

.logo {
  display:inline-flex;
  align-items:center;
  gap:0.5625em;
}

.logo-dot {
  color:var(--site-primary);
}

.logo-mark,.logo-light {
  color:var(--site-primary);
}

.logo-mark {
  width:1.875em;
}

.main-nav {
  display:flex;
  margin:auto;
  gap:2.0625em;
}

.main-nav a:hover,.main-nav a[aria-current] {
  color:#5f3e87;
}

.main-nav .nav-account {
  display:none;
}

.main-nav span {
  margin-left:0.3125em;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1.75em;
  background:var(--site-primary);
  color:#fff;
  padding:1.0625em 1.4375em;
  border-radius:0.3125em;
  border:0.0625em solid var(--site-primary);
  transition:background .2s,transform .2s;
}

.button:hover {
  background:var(--site-primary-hover);
  transform:translateY(-0.125em);
}

.button-small {
  padding:0.75em 1.1875em;
}

.button-light {
  background:var(--site-accent);
  border-color:var(--site-accent);
  color:var(--ink);
}

.button-light:hover {
  background:#cfaef7;
}

.nav-toggle {
  display:none;
  border:0;
  background:none;
  color:var(--ink);
}

.eyebrow {
  color:var(--ink);
  margin-bottom:1.5em;
  display:flex;
  align-items:center;
  gap:0.5625em;
}

.status-dot {
  width:0.375em;
  height:0.375em;
  border-radius:50%;
  display:inline-block;
  background:#6c4c93;
  box-shadow:0 0 0 0.25em #6c4c9315;
}

.hero {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:2.75em;
  align-items:center;
  padding-top:4.25em;
  padding-bottom:4.125em;
}

.hero-description {
  margin:1.5625em 0 1.75em;
  max-width:31.875em;
}

.hero-actions {
  display:flex;
  gap:1.75em;
  align-items:center;
}

.text-link {
  color:var(--site-primary);
  display:inline-flex;
  align-items:center;
  gap:1.25em;
}

.text-link:hover {
  color:#7d813d;
}

.hero-footnote {
  color:var(--site-muted);
  margin-top:2.5em;
  display:flex;
  align-items:center;
  gap:0.5em;
}

.tiny-asterisk {
  color:#755e91;
}

.hero-art {
  height:30.625em;
  position:relative;
  background:#e5deed;
  border-radius:8.75em 0.75em 0.75em 0.75em;
  overflow:hidden;
}

.art-grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(#81759012 0.0625em,transparent 0.0625em),linear-gradient(90deg,#81759012 0.0625em,transparent 0.0625em);
  background-size:2.1875em 2.1875em;
}

.art-orbit {
  position:absolute;
  width:26.25em;
  height:26.25em;
  border:0.0625em solid #b7aac6;
  border-radius:50%;
  left:3.25em;
  top:1.75em;
}

.art-orbit:after {
  content:'';
  position:absolute;
  inset:2.3125em;
  border:0.0625em solid #b7aac6;
  border-radius:50%;
}

.art-heading {
  position:absolute;
  right:1.6875em;
  top:1.875em;
  color:#675979;
}

.hero-bank-card {
  position:absolute;
  left:11%;
  top:6.25em;
  width:75%;
  height:13em;
  background:var(--site-primary);
  color:#e6dfef;
  border-radius:0.8125em;
  padding:1.625em;
  transform:rotate(-11deg);
  box-shadow:0 1.5em 1.875em #31244025;
  background-image:radial-gradient(ellipse at 130% 0%,#726385,transparent 70%);
}

.hero-bank-card>span {
  display:flex;
  justify-content:space-between;
}

.card-star {
  color:#bd97eb;
}

.chip {
  color:#dacb93;
  margin:1.125em 0;
}

.hero-bank-card p {
  color:#e7e0f0;
  margin-bottom:1.0625em;
}

.hero-payment {
  position:absolute;
  right:5%;
  top:17.3125em;
  display:flex;
  align-items:center;
  gap:0.75em;
  padding:1.125em;
  background:#fff;
  border-radius:0.5625em;
  box-shadow:0 0.625em 1.875em #271b3516;
  width:79%;
  transform:rotate(3deg);
}

.hero-payment strong,.success-note strong {
  display:block;
}

.hero-payment small,.success-note small {
  display:block;
  color:#7a7581;
  margin-top:0.3125em;
}

.hero-payment>span:last-child {
  margin-left:auto;
}

.payment-check {
  display:grid;
  place-items:center;
  width:2.125em;
  height:2.125em;
  background:#e8dff3;
  border-radius:50%;
  color:#594770;
}

.hero-loop {
  position:absolute;
  left:6%;
  bottom:2.875em;
  display:flex;
  align-items:center;
  gap:0.875em;
  background:#eed3bb;
  padding:1.0625em;
  border-radius:0.5em;
  transform:rotate(-4deg);
  box-shadow:0 0.5em 1.125em #4a443912;
}

.loop-dots {
  color:#b47555;
  margin-left:1.25em;
}

.art-bottom {
  position:absolute;
  bottom:1em;
  left:1.5em;
  right:1.5em;
  display:flex;
  justify-content:space-between;
}

.audience-strip {
  border-top:0.0625em solid var(--line);
  border-bottom:0.0625em solid var(--line);
}

.audience-strip .container {
  min-height:5.9375em;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25em;
}

.audience-strip span {
  color:var(--site-muted);
}

.audience-strip p {
  color:#575060;
}

.audience-strip i {
  width:0.0625em;
  height:1.75em;
  background:var(--line);
}

.section {
  padding-top:5.9375em;
  padding-bottom:5.9375em;
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:3.75em;
  margin-bottom:2.75em;
}

.section-heading>div {
  max-width:38.75em;
}

.section-heading>p {
  max-width:20.625em;
  margin-bottom:0.25em;
}

.products-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.625em;
}

.product-card {
  min-width:0;
}

.product-copy {
  padding:1.5em 0 0;
}

.product-copy .eyebrow {
  margin-bottom:0.75em;
}

.product-copy .eyebrow span {
  color:#8c8594;
  margin-right:0.1875em;
}

.product-copy h3 {
  margin-bottom:0.625em;
}

.product-copy>p:not(.eyebrow) {
  margin-bottom:1.25em;
}

.product-visual {
  height:17.5em;
  position:relative;
  overflow:hidden;
  border-radius:0.5em;
  display:flex;
  align-items:center;
  justify-content:center;
}

.visual-link {
  display:block;
}

.visual-link .product-visual {
  transition:transform .25s;
}

.visual-link:hover .product-visual {
  transform:translateY(-0.25em);
}

.visual-payment-gateway {
  background:#e8e4ed;
}

.checkout {
  background:#fff;
  border:0.0625em solid #dfdae5;
  border-radius:0.5em;
  width:14.6875em;
  padding:1.0625em;
  box-shadow:0 0.75em 1.5625em #3d324a10;
  transform:rotate(-5deg);
}

.mini-brand {
  display:flex;
  align-items:center;
  gap:0.3125em;
}

.mini-icon {
  background:#36244b;
  color:#fff;
  padding:0.1875em;
  border-radius:0.1875em;
}

.preview-tag {
  margin-left:auto;
  color:#776e81;
}

.checkout-amount {
  margin:1.0625em 0 0.875em;
}

.checkout-amount small {
  display:block;
  color:#857c90;
}

.checkout-amount strong {
  display:block;
  margin-top:0.3125em;
}

.checkout-amount strong span {
  color:#857c91;
}

.payment-methods {
  display:flex;
  gap:0.3125em;
  margin-bottom:0.6875em;
}

.payment-methods span {
  border:0.0625em solid #ded9e5;
  border-radius:0.1875em;
  padding:0.3125em 0.5em;
}

.payment-methods .selected {
  background:#ece8f2;
  border-color:#806b9a;
}

.mock-field {
  color:#837990;
  border:0.0625em solid #e1dde5;
  padding:0.4375em;
  border-radius:0.1875em;
}

.mock-field b {
  display:block;
  color:#494053;
  margin-top:0.25em;
}

.mock-pay {
  margin-top:0.5625em;
  background:#332149;
  color:#fff;
  padding:0.5625em;
  border-radius:0.1875em;
}

.mock-pay span {
  float:right;
}

.powered {
  margin-top:0.5em;
}

.success-note {
  position:absolute;
  right:0.5625em;
  bottom:1.6875em;
  background:#fff;
  border:0.0625em solid #ece8f0;
  border-radius:0.375em;
  padding:0.625em 0.75em;
  display:flex;
  align-items:center;
  gap:0.5em;
  box-shadow:0 0.3125em 0.9375em #33254512;
}

.success-note>span {
  background:#ddceef;
  padding:0.3125em;
  border-radius:50%;
}

.visual-perso {
  background:#eddfd2;
}

.card-ring {
  position:absolute;
  width:19.375em;
  height:19.375em;
  border:0.0625em solid #cebfae;
  border-radius:50%;
}

.card-ring:after {
  content:'';
  position:absolute;
  inset:1.5em;
  border:0.0625em solid #cebfae;
  border-radius:50%;
}

.bank-card {
  width:16.25em;
  height:10.3125em;
  transform:rotate(-13deg);
  background:#644d3f;
  color:#f8ebdf;
  border-radius:0.625em;
  padding:1.25em;
  box-shadow:0 0.9375em 1.25em #5e4b3826;
  background-image:radial-gradient(ellipse at 100% 0,#a38668,transparent);
}

.bank-card>div:first-child {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.bank-card .chip {
  margin:0.875em 0;
}

.card-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:0.625em;
}

.perso-label {
  position:absolute;
  bottom:1.25em;
  display:flex;
  align-items:center;
  gap:0.5em;
}

.visual-closed-loop {
  background:#e8e9db;
}

.loop-orbit {
  position:absolute;
  width:11.5625em;
  height:11.5625em;
  border:0.0625em dashed #9e90ae;
  border-radius:50%;
}

.orbit-two {
  width:16.25em;
  height:16.25em;
  border-style:solid;
  border-color:#c7bed3;
}

.loop-center {
  width:4.6875em;
  height:4.6875em;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#bc98e7;
  border:0.375em solid #dbcded;
  border-radius:1.25em;
  transform:rotate(-10deg);
  box-shadow:0 0.5em 1em #5c467713;
}

.loop-center>span {
  color:#63438a;
}

.loop-node {
  position:absolute;
  display:flex;
  align-items:center;
  gap:0.375em;
  background:#fff;
  border:0.0625em solid #d9d1e2;
  box-shadow:0 0.3125em 0.625em #45335b10;
  padding:0.6875em 0.8125em;
  border-radius:0.4375em;
}

.node-top {
  top:1.75em;
  left:35%;
}

.node-right {
  top:6.875em;
  right:0.8125em;
}

.node-bottom {
  bottom:2.125em;
  left:39%;
}

.node-left {
  top:7.5625em;
  left:0.875em;
}

.loop-caption {
  position:absolute;
  bottom:0.75em;
}

.why-section {
  background:#ece8f0;
  padding:5em 0;
}

.why-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6.25em;
}

.why-grid .text-link {
  margin-top:1.875em;
}

.principles article {
  display:flex;
  gap:1.625em;
  padding:1.5625em 0;
  border-bottom:0.0625em solid #d1cad9;
}

.principles article:first-child {
  padding-top:0;
}

.principles article:last-child {
  border:0;
  padding-bottom:0;
}

.principles article>span {
  color:#877b96;
  padding-top:0.3125em;
}

.principles h3 {
  margin-bottom:0.625em;
}

.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5.625em;
  align-items:center;
}

.about-art {
  background:#edd7c4;
  height:21.25em;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:1.625em 1.875em;
  border-radius:0.5em;
  overflow:hidden;
}

.asterisk {
  align-self:center;
  color:#9e6346;
  transform:rotate(12deg);
}

.about-grid h2 {
  margin-bottom:1.5625em;
}

.about-grid p:not(.eyebrow) {
  margin-bottom:0.9375em;
}

.about-grid .text-link {
  margin-top:0.625em;
}

.cta-section {
  background:var(--site-primary);
  color:#f5f5df;
  padding:3.375em 3.75em;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-radius:0.625em;
  position:relative;
  overflow:hidden;
  margin-bottom:5.3125em;
  gap:1.875em;
}

.cta-section>div,.cta-section>a {
  position:relative;
  z-index:1;
}

.cta-section .eyebrow {
  color:#b79fd4;
  margin-bottom:1.0625em;
}

.cta-orbit {
  position:absolute;
  width:23.75em;
  height:23.75em;
  border:0.0625em solid #554963;
  border-radius:50%;
  right:5.625em;
  top:-11.25em;
}

.cta-orbit:after {
  content:'';
  position:absolute;
  inset:1.875em;
  border:0.0625em solid #554963;
  border-radius:50%;
}

.site-footer {
  border-top:0.0625em solid var(--line);
  padding-top:3.4375em;
}

.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1.2fr;
  gap:3.125em;
  padding-bottom:3.125em;
}

.footer-grid p {
  margin-top:1.125em;
}

.footer-grid h3 {
  margin-bottom:1.125em;
}

.footer-grid>div>a:not(.logo) {
  display:block;
  color:var(--site-muted);
  margin-bottom:0.75em;
}

.footer-grid a:hover {
  color:#7d813d;
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  padding:1.4375em 0;
  border-top:0.0625em solid var(--line);
  color:var(--site-muted);
  gap:1.25em;
}

.page-intro {
  padding-top:5.3125em;
  padding-bottom:4.0625em;
}

.page-intro>p:not(.eyebrow) {
  margin-top:1.5625em;
}

.page-intro .button {
  margin-top:1.875em;
}

.product-list {
  padding-bottom:4.375em;
}

.guidance {
  padding-top:1.875em;
  padding-bottom:5.3125em;
}

.guidance h2 {
  margin-bottom:1.875em;
}

.guidance>a {
  display:flex;
  justify-content:space-between;
  gap:1.25em;
  padding:1.5625em 0;
  border-bottom:0.0625em solid var(--line);
}

.guidance>a span {
  color:var(--site-muted);
}

.guidance>a:hover strong {
  color:#5f3e87;
}

.product-hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:4.375em;
  align-items:center;
  padding-top:1.25em;
  padding-bottom:4.0625em;
}

.breadcrumb {
  display:block;
  color:var(--site-muted);
  margin-bottom:2.5em;
}

.product-hero .eyebrow {
  margin-bottom:1.25em;
}

.product-hero .product-visual {
  height:27.5em;
}

.product-hero .checkout {
  scale:1.4;
}

.product-hero .success-note {
  scale:1.2;
  right:1.5625em;
  bottom:3.75em;
}

.product-hero .bank-card {
  scale:1.4;
}

.product-hero .perso-label {
  bottom:2.5em;
}

.product-hero .card-ring {
  width:24.375em;
  height:24.375em;
}

.product-hero .loop-orbit {
  width:16.875em;
  height:16.875em;
}

.product-hero .orbit-two {
  width:23.75em;
  height:23.75em;
}

.product-hero .node-top {
  top:3.75em;
}

.product-hero .node-bottom {
  bottom:3.75em;
}

.product-hero .node-left,.product-hero .node-right {
  top:12.5em;
}

.product-hero .loop-node {
  padding:0.9375em 1.25em;
}

.product-hero .loop-caption {
  bottom:1.875em;
}

.product-context {
  border-block:0.0625em solid var(--line);
  padding:1.5em 0;
}

.product-context>.container {
  display:flex;
  align-items:center;
  gap:2.1875em;
}

.product-context .eyebrow {
  margin:0;
  flex-shrink:0;
}

.features-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.1875em;
}

.features-grid article {
  border-top:0.0625em solid var(--line);
  padding-top:1.5625em;
}

.feature-symbol {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#e3daed;
  border-radius:0.5em;
  width:2.6875em;
  height:2.6875em;
  margin-bottom:1.375em;
}

.features-grid h3 {
  margin-bottom:0.9375em;
}

.process-section {
  background:#ece8f0;
  padding:4.0625em 0;
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3.125em;
  margin-top:2.8125em;
}

.steps span {
  display:block;
  color:#746684;
  border-bottom:0.0625em solid #cbc1d7;
  padding-bottom:0.9375em;
  margin-bottom:1.25em;
}

.related {
  padding-top:4.0625em;
  padding-bottom:4.0625em;
}

.related>div {
  display:flex;
  gap:1.5625em;
}

.related a {
  width:50%;
  border:0.0625em solid var(--line);
  padding:1.5em;
  display:flex;
  justify-content:space-between;
  border-radius:0.375em;
}

.related a:hover {
  background:#e9e3f0;
}

.contact-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5.625em;
  padding-top:4.6875em;
  padding-bottom:5.3125em;
}

.contact-email {
  display:block;
  margin-top:2.5em;
  margin-bottom:0.625em;
}

.contact-decoration {
  color:#a491bb;
}

.contact-form {
  padding:2.1875em;
  background:#ebe7f0;
  border:0.0625em solid #dcd6e4;
  border-radius:0.625em;
  display:flex;
  flex-direction:column;
  gap:1.375em;
}

.contact-form h2 {
  margin-bottom:0.3125em;
}

.contact-form label {
  display:flex;
  flex-direction:column;
  gap:0.5625em;
  min-width:0;
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.125em;
}

.contact-form input,.contact-form textarea,.contact-form select {
  border:0.0625em solid #d3ccdb;
  background:#f8f6fb;
  border-radius:0.25em;
  padding:0.75em;
  color:var(--ink);
  width:100%;
}

.contact-form textarea {
  resize:vertical;
}

.contact-form input::placeholder,.contact-form textarea::placeholder {
  color:#7d7685;
}

.skip-link {
  position:fixed;
  top:-6.25em;
  left:1.25em;
  z-index:100;
  background:var(--site-primary);
  color:#fff;
  padding:0.9375em;
}

.skip-link:focus {
  top:0.625em;
}

.about-pillars {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:3.75em;
  margin-top:3em;
}

.about-pillars article {
  border-top:0.0625em solid var(--line);
  padding-top:1.5625em;
}

.about-pillars h3 {
  color:var(--site-primary);
  margin-bottom:1.125em;
}

.product-hero-perso {
  grid-template-columns:1fr;
}

.product-hero-perso>div {
  max-width:53.125em;
}

.product-hero-perso .hero-description {
  max-width:40.625em;
}

.perso-film {
  background:#17131e;
  width:100%;
  height:100vh;
  height:100svh;
  overflow:hidden;
}

.perso-video {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:inherit;
}

.brand-logo {
  display:block;
  width:10.375em;
  height:auto;
  max-width:100%;
}

.site-header .brand-logo {
  width:4em;
}

:root {
  --site-primary: var(--dt-color-primary);
  --site-primary-hover: var(--dt-color-primary-900);
  --site-primary-light: #ede5f6;
  --ink: var(--primary-text-color);
  --site-muted: var(--tertiary-text-color);
  --paper: var(--dt-color-bw-background-light);
  --line: var(--dt-border-inline-primary);
  --site-accent: var(--site-primary-light);
  --font: var(--font-body);
}

em {
  color:var(--dt-color-primary);
}

.button {
  background:var(--button-primary-background);
  color:var(--button-primary-color);
  border-color:var(--button-primary-background);
  border-radius:var(--border-radius-button);
  box-shadow:var(--button-box-shadow);
  padding:var(--dt-spacing-button-large-top-bottom) var(--dt-spacing-button-large-left-right);
}

.button-small {
  padding:var(--dt-spacing-button-small-top-bottom) var(--dt-spacing-button-small-left-right);
}

.button:hover {
  background:var(--dt-color-primary-800);
  border-color:var(--dt-color-primary-800);
  box-shadow:var(--button-hover-box-shadow);
}

.button:active {
  box-shadow:var(--button-active-box-shadow);
}

.button:disabled {
  opacity:var(--opacity-button-disabled);
  cursor:not-allowed;
}

.button-light {
  background:var(--dt-color-bw-white);
  color:var(--dt-color-primary);
  border-color:var(--dt-color-bw-white);
}

.button-light:hover {
  background:var(--site-primary-light);
  color:var(--dt-color-primary);
  border-color:var(--site-primary-light);
}

.text-link,.logo-mark,.logo-light,.logo-dot,.about-pillars h3 {
  color:var(--dt-color-primary);
}

.main-nav a:hover,.main-nav a[aria-current],.text-link:hover,.footer-grid a:hover,.guidance>a:hover strong {
  color:var(--dt-color-primary-900);
}

.eyebrow {
  color:var(--dt-color-primary);
}

.cta-section {
  background:var(--dt-color-primary);
  border-radius:var(--border-radius-card);
}

.cta-section .eyebrow {
  color:var(--dt-color-bw-white);
}

.why-section,.process-section,.contact-form {
  background:var(--dt-background-container-subtle);
}

.contact-form {
  border-color:var(--dt-border-component-default);
  border-radius:var(--border-radius-card);
  gap:var(--form-gap);
}

.contact-form input,.contact-form textarea,.contact-form select {
  color:var(--input-color);
  background:var(--input-background);
  border-color:var(--input-border-color);
  border-radius:var(--dt-border-radius-sm);
  padding:var(--dimensions-input-vertical-padding) var(--dimensions-input-horizontal-padding);
}

.contact-form input:hover,.contact-form textarea:hover,.contact-form select:hover {
  border-color:var(--input-border-color-hover);
}

.contact-form input::placeholder,.contact-form textarea::placeholder {
  color:var(--helper-text-color);
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:0.1875em solid var(--dt-border-component-focus);
  outline-offset:0.25em;
}

.related a {
  border-radius:var(--dt-border-radius-md);
}

.related a:hover {
  background:var(--dt-color-gray-000);
}

.product-visual,.about-art {
  border-radius:var(--border-radius-card);
}

.hero-bank-card,.mini-icon,.mock-pay {
  background:var(--dt-color-primary);
}

.hero-bank-card {
  background-image:radial-gradient(ellipse at 130% 0%,var(--dt-color-primary-700),transparent 70%);
}

.status-dot {
  background:var(--dt-color-green-500);
  box-shadow:0 0 0 0.25em var(--dt-background-success);
}

.payment-check,.success-note>span {
  color:var(--dt-color-green-500);
  background:var(--dt-background-success);
}


.resource-list { padding-bottom:5em; }
.resource-cards .text-link { margin-top:1.5em; }
.resource-article { padding-block:4em; }
.resource-article>header,.resource-body { max-width:55em; }
.resource-body h2 { margin-top:1.5em; margin-bottom:.6em; }
.resource-body p,.resource-body ul { margin-bottom:1.5em; }
.resource-body ul { padding-left:1.5em; }
.resource-body li { margin-block:.6em; }
.resource-article>.button { margin-top:2em; }

.header-actions {display:flex;align-items:center;gap:1.5em;flex-shrink:0}
.login-link {white-space:nowrap;color:var(--ink)}
a.login-link:hover {color:var(--site-primary)}
.login-link[aria-disabled="true"] {color:var(--site-muted);cursor:default}

/* Product navigation and catalog share data/product_menu.json. */
.product-menu {position:static}
.product-menu>summary {cursor:pointer;list-style:none;color:var(--ink)}
.product-menu>summary::-webkit-details-marker {display:none}
.product-menu>summary:focus-visible {outline:.1875em solid var(--dt-border-component-focus);outline-offset:.3em}
.product-menu[open]>summary,.product-menu>summary:hover {color:var(--site-primary)}
.product-dropdown {position:absolute;top:100%;left:0;right:0;width:100%;padding:0;background:var(--paper);border-block:.0625em solid var(--line);box-shadow:0 1.25em 2em #211a2b14;max-height:calc(100svh - 6em);overflow-y:auto}
.product-dropdown-inner {padding-block:1.25em 1.5em}
.product-menu[open] .product-dropdown {animation:menu-expand .18s ease-out}
@keyframes menu-expand {from {opacity:0;transform:translateY(-.5em)} to {opacity:1;transform:translateY(0)}}
.product-menu-groups {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5em}
.product-menu-group h3 {margin-bottom:1em;color:var(--site-primary)}
.product-menu-group ul {list-style:none;padding:0;margin:0}
.product-menu-group li+li {margin-top:.5em}
.product-menu-group a {display:flex;align-items:flex-start;gap:.75em;padding:.75em;border-radius:.5em}
.product-menu-group a:hover,.product-menu-group a:focus-visible {background:var(--site-primary-light)}
.product-menu-group a span {margin:0}
.product-icon {display:block;width:1.5em;height:1.5em;flex-shrink:0;color:var(--site-primary)}
.product-menu-overview {display:block;border-top:.0625em solid var(--line);margin-top:1.5em;padding-top:1.25em;color:var(--site-primary)}
.product-catalog {padding-bottom:4em}
.catalog-group {padding-bottom:4em}
.catalog-items {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2em}
.catalog-item {border:.0625em solid var(--line);border-radius:.625em;padding:2em;scroll-margin-top:3em}
.catalog-icon {display:inline-flex;padding:.75em;background:var(--site-primary-light);border-radius:.5em;margin-bottom:1.25em}
.catalog-item h3 {margin-bottom:.75em}
.catalog-item p {margin-bottom:1.5em}

.product-menu-group h3>a {padding:0 0 1em;border-bottom:.0625em solid var(--line);border-radius:0}
.product-menu-group h3>a:hover {background:none}
.product-menu-group .menu-item-copy {display:flex;flex-direction:column;gap:.5em;min-width:0}
.product-menu-group .menu-item-description {color:var(--site-muted)}
.product-menu-group .menu-icon {display:grid;place-items:center;flex-shrink:0;background:var(--site-primary-light);border-radius:.5em;padding:.5em}
.product-menu-group .menu-icon .product-icon {width:1.25em;height:1.25em}
.product-menu-bottom {display:flex;align-items:center;gap:2em;border-top:.0625em solid var(--line);padding-top:1.5em;margin-top:2em;color:var(--site-primary)}
.product-menu-bottom a:last-child {margin-left:auto}
.product-menu-bottom a:hover {text-decoration:underline;text-underline-offset:.2em}

.use-case-menu-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1em 2em}
.product-menu-group .use-case-menu-grid li {margin:0}
.use-case-heading {margin-bottom:.75em}

/* Detail pages: product capabilities, use cases, about */
.visual-detail {background:#e8e4ed}
.visual-detail-ring {position:absolute;width:24em;height:24em;border:.0625em solid #d6cde2;border-radius:50%}
.visual-detail-ring::after {content:'';position:absolute;inset:2.5em;border:.0625em solid #d6cde2;border-radius:50%}
.visual-detail .checkout {position:relative}
.visual-detail .mini-icon {display:inline-grid;place-items:center;width:1.5em;height:1.5em;padding:0}
.visual-detail .mini-icon .product-icon {width:1.1em;height:1.1em;color:#fff}
.visual-detail .payment-methods span {white-space:nowrap}
.visual-detail .mock-field b {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detail-hero .hero-actions {margin-top:1.75em}
.detail-hero .hero-description {margin-bottom:0}
.steps p {margin-top:.75em}
.check-list {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3.75em}
.check-list li {display:flex;gap:1em;padding:1.125em 0;border-top:.0625em solid var(--line);color:var(--ink)}
.check-list li::before {content:"✓";color:var(--site-primary);flex-shrink:0}
.catalog-item .eyebrow {margin-bottom:.75em;color:var(--site-primary)}
.faq-list {--faq-inline:5rem;border-bottom:.0625em solid var(--line)}
.faq-list details {border-top:.0625em solid var(--line)}
.faq-list summary {display:flex;align-items:center;justify-content:space-between;gap:1.5em;padding:1em var(--faq-inline);cursor:pointer;list-style:none;color:var(--ink)}
.faq-list summary::-webkit-details-marker {display:none}
.faq-chevron {width:1.375em;height:1.375em;flex-shrink:0;color:var(--site-primary);transition:transform .2s ease}
.faq-list details[open] .faq-chevron {transform:rotate(180deg)}
.faq-list summary:hover {color:var(--site-primary)}
.faq-list details p {padding:0 var(--faq-inline) 5em}
.faq-section .section-heading {justify-content:center;align-items:center;text-align:center}
.related .related-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1em}
.related .related-grid a {width:auto}
.product-context>.stats-row {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2em;padding-block:1em}
.stats-row div {display:flex;flex-direction:column;gap:.25em}
.stats-row strong {color:var(--site-primary)}
.stats-row span {color:var(--site-muted)}
.principles-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.principles-grid article {border-color:#d1cad9}
.join-banner {display:flex;align-items:flex-end;justify-content:space-between;gap:3em}
.join-banner>div {max-width:38em}
.join-banner p:not(.eyebrow) {margin-top:1.25em}
.product-hero .breadcrumb:hover {color:var(--site-primary)}
.page-intro>p:not(.eyebrow) {max-width:40em}
.catalog-items.catalog-items-2 {grid-template-columns:repeat(2,minmax(0,1fr))}

/* Readable text needs predictable spacing and room within the previews. */
h1,h2 {max-width:24ch}
.hero h1 {max-width:22ch}
.hero-description,.section-heading>p,.about-grid p,.about-pillars p {max-width:60ch}
.eyebrow {margin-bottom:1.25em}
.hero-description {margin-block:1.25em 1.75em}
.section-heading {gap:2.5em}
.section-heading>p {max-width:38ch}
.product-copy>p:not(.eyebrow) {margin-bottom:1.25em}
.product-menu-groups {gap:1em}
.product-menu-group a {gap:.625em;padding:.625em}
.product-menu-group .menu-icon {padding:.375em}
.product-menu-group .menu-item-copy {gap:.375em}
.product-menu-group h3 {margin-bottom:1em}
.product-menu-group h3>a {padding-bottom:.75em}
.main-nav {align-items:center}
.product-visual {height:25em}
.product-hero .product-visual {height:28em}
.checkout {width:min(20em,calc(100% - 3em));padding:1.25em;transform:rotate(-3deg)}
.product-hero .checkout,.product-hero .bank-card {scale:1}
.checkout-amount {margin:1em 0}
.checkout-amount strong {margin-top:.25em}
.payment-methods {gap:.5em;flex-wrap:wrap;margin-bottom:1em}
.payment-methods span {padding:.5em .625em}
.mock-field {padding:.75em}
.mock-field b {margin-top:.5em;overflow-wrap:anywhere}
.mock-pay {padding:.75em;margin-top:1em}
.powered {margin-top:.75em}
.success-note {bottom:.75em;right:1em;padding:.75em;gap:.75em;max-width:calc(100% - 2em)}
.product-hero .success-note {scale:1;bottom:1em;right:1em}
.hero-bank-card .chip,.bank-card .chip {margin:.625em 0}
.hero-bank-card p {margin-bottom:.5em}
.hero-payment {padding:1em;gap:.75em}
.hero-payment small,.success-note small {margin-top:.25em}
.hero-loop {padding:.75em;gap:.75em;bottom:2.75em}
.bank-card {width:min(19em,calc(100% - 3em));height:12em;padding:1.5em}
.card-bottom {margin-top:1em}
.loop-center {width:1.65em;height:1.65em;border-width:.125em;border-radius:.4em}
.loop-node {padding:.625em .875em}
.product-hero .loop-node {padding:.75em}
.feature-symbol {width:2em;height:2em;margin-bottom:.75em}
.about-art {min-height:20em}
.footer-bottom {gap:1.5em}
.resource-article>header,.resource-body {max-width:65ch}
.resource-body h2 {max-width:none}
.product-hero .breadcrumb {margin-bottom:2em}

/* Browser and phone previews: real, reflowing text inspired by the supplied frame. */
.product-hero.experience-hero {grid-template-columns:1fr;padding-bottom:2.5em}
.experience-hero>div {max-width:54em}
.experience-hero h1 {max-width:25ch}
.experience-preview {margin-block:0 4em}
.experience-toolbar {display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:1em}
.experience-toolbar figcaption {display:flex;align-items:center;flex-wrap:wrap;gap:1em}
.experience-toolbar figcaption>span {color:var(--site-muted)}
.device-controls {display:flex;gap:.25em;padding:.25em;background:#efedf2;border-radius:.5em}
.device-controls button {border:0;background:transparent;color:var(--site-muted);padding:.625em 1em;border-radius:.375em;cursor:pointer}
.device-controls button[aria-pressed="true"] {background:#fff;color:var(--site-primary);box-shadow:0 .125em .375em #211a2b12}
.experience-stage {padding:2.5em;background:#eeeaf3;border:.0625em solid #e0d9e9;border-radius:1em}
.experience-frame {max-width:68em;margin:auto;overflow:hidden;border:.0625em solid #dedbe3;border-radius:.75em;background:#fff;box-shadow:0 1em 3em #33224c12;transition:max-width .25s ease}
.browser-chrome {display:flex;align-items:center;gap:1.5em;padding:.875em 1em;background:#f7f6f8;border-bottom:.0625em solid #e8e5ed}
.window-dots {display:flex;gap:.375em;width:5em;flex-shrink:0}
.window-dots i {width:.625em;height:.625em;background:#ed6a5f;border-radius:50%}
.window-dots i:nth-child(2) {background:#f5bf4f}
.window-dots i:nth-child(3) {background:#61c554}
.preview-address {background:#eeecf1;border:.0625em solid #e6e2ea;border-radius:.375em;padding:.375em 1em;max-width:36em;width:65%;margin:auto;text-align:center;color:#625d69}
.browser-chrome-end {width:5em;text-align:right}
.phone-chrome,.phone-home {display:none}
.experience-screen {color:#252525}
.screen-checkout {display:grid;grid-template-columns:1fr 1fr;min-height:35em}
.experience-order {display:flex;flex-direction:column;padding:3em;background:#fbfafc;border-right:.0625em solid #eeeaf3}
.experience-merchant {display:flex;align-items:center;gap:.75em;margin-bottom:2em}
.experience-app-icon {display:grid;place-items:center;width:2.5em;height:2.5em;background:#ede5f6;border-radius:.625em}
.experience-kicker {color:#625d69;margin-bottom:.5em}
.experience-value {color:#252525;margin-bottom:.5em}
.experience-summary {color:#625d69;margin-bottom:2em;max-width:38ch}
.experience-line-item {display:flex;flex-direction:column;gap:.375em;padding-block:1em;border-block:.0625em solid #e8e2ed}
.experience-order-summary {display:grid;gap:.375em;margin-bottom:1.25em;padding:.75em;border:.0625em solid #e8e2ed;border-radius:.5em;background:#fff}
.experience-order-title {margin-bottom:.25em;color:var(--ink)}
.experience-order-head {display:flex;justify-content:space-between;color:#625d69}
.experience-order-line {display:flex;justify-content:space-between;gap:1em;color:#3b3642}
.experience-order-total {display:flex;justify-content:space-between;padding-top:.375em;border-top:.0625em solid #ece8f0;color:var(--ink)}
.experience-order-note {display:flex;align-items:center;gap:.5em;margin-top:1em;color:#625d69}
.experience-status-dot {width:.5em;height:.5em;border-radius:50%;background:var(--site-primary)}
.experience-powered {display:flex;align-items:center;gap:.5em;margin-top:auto;padding-top:3em;color:#625d69}
.experience-powered img {width:4em;height:auto}
.experience-payment {padding:3em}
.experience-payment>p {margin-top:.5em;color:#625d69}
.experience-methods {display:flex;gap:.5em;margin-block:1.5em}
.experience-methods>span {flex:1;border:.0625em solid #ddd7e6;border-radius:.375em;padding:.625em;text-align:center}
.experience-methods .is-selected {border-color:var(--site-primary);background:#f4effa;color:var(--site-primary)}
.experience-field {margin-bottom:1em;min-width:0}
.experience-field>span {display:block;margin-bottom:.375em}
.experience-field>div {border:.0625em solid #ded8e6;border-radius:.375em;padding:.75em;color:#625d69;background:#fff;overflow-wrap:anywhere}
.experience-field-row {display:grid;grid-template-columns:1fr 1fr;gap:1em}
.experience-action {display:block;padding:.875em 1.25em;background:var(--site-primary);color:#fff;border-radius:.375em;text-align:center}
.experience-payment-note {text-align:center}
.screen-dashboard,.screen-card {display:grid;grid-template-columns:12em minmax(0,1fr)}
.experience-sidebar {display:flex;flex-direction:column;gap:.5em;padding:2em 1em;background:#faf9fc;border-right:.0625em solid #eeeaf3}
.experience-sidebar>img {width:5em;height:auto;margin:.25em .75em 2em}
.experience-workspace {padding:.75em;border:.0625em solid #e8e2ed;border-radius:.5em;margin-bottom:1.25em}
.experience-sidebar>span {padding:.625em .75em;color:#625d69;border-radius:.375em}
.experience-sidebar .is-current {color:var(--site-primary);background:#ede5f6}
.experience-sidebar .experience-sidebar-bottom {margin-top:auto}
.experience-dashboard {padding:2em;min-width:0}
.experience-dash-heading {display:flex;justify-content:space-between;align-items:center;gap:1em;margin-bottom:1.5em}
.experience-avatar {display:grid;place-items:center;width:2.75em;height:2.75em;background:#eee6f7;color:var(--site-primary);border-radius:50%;flex-shrink:0}
.experience-tabs {display:flex;gap:1.5em;border-bottom:.0625em solid #e8e2ed;margin-bottom:1.5em;flex-wrap:wrap}
.experience-tabs>span {padding-bottom:.75em;color:#625d69}
.experience-tabs .is-selected {color:var(--site-primary);border-bottom:.125em solid var(--site-primary)}
.experience-metrics {display:grid;grid-template-columns:1fr 1fr;gap:1em;margin-bottom:1.5em}
.experience-metric {display:flex;flex-direction:column;gap:.5em;padding:1.25em;border:.0625em solid #e8e2ed;border-radius:.5em;min-width:0}
.experience-metric>span {color:#625d69}
.experience-activity {border:.0625em solid #e8e2ed;border-radius:.5em;padding:1.25em;margin-bottom:1.5em}
.experience-chart {display:flex;align-items:flex-end;gap:1em;height:8em;border-bottom:.0625em solid #e8e2ed;margin-top:1em;background:repeating-linear-gradient(to top,transparent 0,transparent calc(2em - .0625em),#f0edf4 calc(2em - .0625em),#f0edf4 2em)}
.experience-chart>span {flex:1;height:var(--bar);background:#9c83bc;border-radius:.25em .25em 0 0;max-width:4em;margin-inline:auto}
.experience-chart>span:last-child {background:var(--site-primary)}
.experience-chart-labels {display:flex;justify-content:space-around;padding-top:.5em;color:#625d69}
.experience-event {display:flex;align-items:center;gap:.75em;padding:1em;border:.0625em solid #e8e2ed;border-radius:.5em}
.experience-event-check {color:#388707;background:#eef7e9;border-radius:50%;padding:.5em}
.experience-event>div {min-width:0;flex:1}
.experience-status {display:inline-block;padding:.375em .625em;background:#eef7e9;color:#306a0d;border-radius:.375em}
.experience-dash-footer {display:flex;justify-content:space-between;align-items:center;gap:1em;margin-top:1.5em}
.experience-dash-footer>span:first-child {color:#625d69}
.experience-card-panel {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:1.5em;padding:1.5em;background:#f8f5fb;border-radius:.5em;margin-bottom:1.5em}
.experience-sample-card {display:flex;flex-direction:column;gap:1em;padding:1.5em;border-radius:.75em;background:var(--site-primary);color:#fff}
.experience-card-chip {color:#e6d7a4}
.experience-card-panel h3 {margin-bottom:.5em}
.experience-card-panel p {margin-bottom:1em}
.experience-preview[data-device="mobile"] .experience-frame {max-width:25em;border:.375em solid #29242e;border-radius:2em}
.experience-preview[data-device="mobile"] .browser-chrome,.experience-preview[data-device="mobile"] .experience-sidebar {display:none}
.experience-preview[data-device="mobile"] .phone-chrome {display:flex;align-items:center;justify-content:space-between;padding:1em 1.5em;background:#fff}
.phone-camera {width:5em;height:1.25em;background:#29242e;border-radius:1em}
.experience-preview[data-device="mobile"] .phone-home {display:block;width:6em;height:.25em;border-radius:1em;background:#29242e;margin:1em auto}
.experience-preview[data-device="mobile"] .experience-screen {grid-template-columns:1fr}
.experience-preview[data-device="mobile"] .experience-order,.experience-preview[data-device="mobile"] .experience-payment,.experience-preview[data-device="mobile"] .experience-dashboard {padding:1.5em}
.experience-preview[data-device="mobile"] .experience-order {border-right:0;border-bottom:.0625em solid #eeeaf3}
.experience-preview[data-device="mobile"] .experience-metrics,.experience-preview[data-device="mobile"] .experience-card-panel {grid-template-columns:1fr}
.experience-preview[data-device="mobile"] .experience-dash-footer {align-items:stretch;flex-direction:column}

/* Layered device preview beside the hero copy. */
.product-hero.experience-hero {grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3em;align-items:center;padding-bottom:4em}
.product-hero.experience-hero.product-hero-perso {grid-template-columns:1fr}
.experience-hero>div {max-width:none;min-width:0}
.experience-preview.experience-composition {width:100%;min-width:0;margin:0}
.experience-composition-caption {margin-bottom:1em;color:var(--site-muted)}
.experience-composition .experience-stage {position:relative;isolation:isolate;padding:1.5em 0 5em 4em;border:0;background:transparent;border-radius:0}
.experience-composition .experience-frame {width:100%;max-width:none;margin:0;box-shadow:0 1em 3em #33224c18}
.experience-composition .browser-chrome {gap:.5em;padding:.75em}
.experience-composition .window-dots {width:auto}
.experience-composition .browser-chrome-end {display:none}
.experience-composition .preview-address {width:auto;flex:1;max-width:none;padding:.375em .625em}
.experience-composition .screen-checkout {grid-template-columns:1fr 1fr;min-height:0}
.experience-composition .experience-order,.experience-composition .experience-payment {padding:1.875em 1.75em}
.experience-composition .experience-field {margin-bottom:1.25em}
.experience-composition .experience-methods {margin-block:1.75em}
.experience-composition .experience-payment .experience-action {padding:.625em 1em;margin-top:.25em}
.experience-composition .experience-merchant {margin-bottom:.5em;flex-wrap:wrap}
.experience-composition .experience-summary {margin-bottom:1em}
.experience-composition .experience-payment>.experience-field-row {grid-template-columns:1fr;gap:0}
.experience-composition .experience-field-row>.experience-field:last-child {display:none}
.experience-composition .experience-powered {padding-top:1.5em}
.experience-composition .experience-sidebar {display:none}
.experience-composition .screen-dashboard,.experience-composition .screen-card {grid-template-columns:1fr}
.experience-composition .experience-dashboard {padding:1.25em}
.experience-composition .experience-metrics {grid-template-columns:1fr 1fr;gap:.75em}
.experience-composition .experience-metric {padding:1em}
.experience-composition .experience-event {flex-wrap:wrap}
.experience-composition .experience-dash-footer {flex-direction:column;align-items:flex-end}
.experience-composition .experience-card-panel {grid-template-columns:1fr;padding:1em}
.experience-composition .experience-card-panel>div:last-child {display:none}
.experience-phone-overlay {position:absolute;left:0;bottom:0;z-index:2;width:13em;border:.3em solid #29242e;border-radius:1.75em;background:#fff;box-shadow:0 .75em 2em #211a2b26;overflow:hidden;color:#252525}
.overlay-phone-status {display:flex;align-items:center;justify-content:space-between;padding:1em 1.25em .75em}
.overlay-phone-camera {width:3.5em;height:1em;border-radius:1em;background:#29242e}
.overlay-phone-content {padding:1.125em 1.125em}
.overlay-merchant {display:flex;align-items:center;gap:.5em;margin-bottom:1.5em}
.overlay-merchant .experience-app-icon {width:2em;height:2em;flex-shrink:0}
.overlay-merchant .product-icon {width:1.25em;height:1.25em}
.overlay-label {color:#625d69;margin-bottom:.5em}
.overlay-value {margin-bottom:.75em;color:#252525}
.overlay-chips {display:flex;gap:.4375em;flex-wrap:wrap;margin-bottom:1em}
.overlay-chips>span {padding:.375em .5em;border:.0625em solid #ded8e6;border-radius:.375em}
.overlay-chips .is-selected {color:var(--site-primary);border-color:var(--site-primary);background:#f4effa}
.overlay-field {display:flex;flex-direction:column;gap:.5em;margin-bottom:1em}
.overlay-field>span {color:#625d69}
.overlay-field strong {padding:1em .75em;border:.0625em solid #ded8e6;border-radius:.375em;overflow-wrap:anywhere}
.overlay-action {background:var(--site-primary);color:white;border-radius:.375em;padding:.875em .5em;text-align:center}
.overlay-footer {margin-top:1em;text-align:center;color:#625d69}
.overlay-home {width:4em;height:.2em;background:#29242e;border-radius:1em;margin:.25em auto .75em}
.overlay-update {display:flex;align-items:center;gap:.5em;padding:.75em;margin-block:1em;background:#eef7e9;color:#306a0d;border-radius:.375em}
.overlay-member-card {display:flex;flex-direction:column;gap:1em;padding:1em;background:var(--site-primary);color:white;border-radius:.625em;margin-bottom:1em}

/* Made for: audience cards under product and use-case heroes */
.product-context.made-for {padding-block:2.75em;background:rgb(31,34,37);border-block-color:rgb(31,34,37)}
.product-context.made-for>.container {display:grid;grid-template-columns:9em minmax(0,1fr);align-items:start;gap:2em}
.made-for .eyebrow {padding-top:.625em;color:#c9b6e4}
.made-for-list {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(14em,1fr));gap:2em}
.made-for-list li {display:flex;align-items:flex-start;gap:1em}
.made-for-icon {display:grid;place-items:center;flex-shrink:0;width:2.75em;height:2.75em;border-radius:.625em;background:rgba(237,229,246,.1);border:.0625em solid rgba(237,229,246,.14)}
.made-for-icon .product-icon {width:1.375em;height:1.375em;color:#d7c8ec}
.made-for-list strong {display:block;color:#fff;margin-bottom:.25em}
.made-for-list p {color:rgba(255,255,255,.68);margin:0}
.section+.faq-section {padding-top:0}
.features-grid article p+p {margin-top:.75em}
.site-footer .brand-logo {width:6.5em}

/* Feature scroller: centred heading, feature list with a sticky visual */
.feature-scroll-heading {justify-content:center;text-align:center}
.feature-scroll-heading>div {max-width:44em;margin-inline:auto}
.feature-scroll-heading .eyebrow {justify-content:center}
.feature-scroll-heading h2+p {max-width:36em;margin:1em auto 0}
.feature-scroll-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3em}
.feature-scroll-list {list-style:none;margin:0;padding:0}
.feature-scroll-item {min-height:32em;display:flex;flex-direction:column;justify-content:center;padding:2.5em 3em 2.5em 0;border-right:.125em solid var(--line);opacity:.4;transition:opacity .35s ease,border-color .35s ease}
.feature-scroll-item.is-active {opacity:1;border-right-color:var(--site-primary)}
.feature-scroll-item h3 {margin-bottom:.75em}
.feature-scroll-item p+p {margin-top:.75em}
.feature-scroll-inline {display:none}
.feature-scroll-sticky {position:sticky;top:calc(50vh - 14em);height:28em}
.feature-scroll-slide {position:absolute;inset:0;opacity:0;transform:translateY(1em);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.feature-scroll-slide.is-active {opacity:1;transform:none}
.feature-visual {position:relative;height:100%;display:grid;place-items:center;padding:2.5em;background:#eeeaf3;border:.0625em solid #e0d9e9;border-radius:1em;overflow:hidden}
.feature-visual-image {padding:1.25em;background:#fff;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
.feature-visual-image img,.feature-visual-image video {width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:.5em}
.feature-visual-card {width:100%;max-width:26em;background:#fff;border:.0625em solid #dedbe3;border-radius:.75em;box-shadow:0 1em 3em #33224c12;overflow:hidden}
.feature-visual-body {display:grid;gap:1.125em;padding:1.5em}
.feature-visual-head {display:flex;align-items:center;gap:.875em}
.feature-visual-head strong {display:block;color:var(--ink)}
.feature-visual-head .experience-kicker {margin-bottom:.125em}
.feature-visual-panel {display:grid;gap:.5em;padding:1.125em;border:.0625em solid #e8e2ed;border-radius:.5em}
.feature-visual-label {color:#625d69}
.feature-visual-value {color:var(--ink)}
.feature-visual-progress {height:.5em;margin-top:.375em;background:#f0edf4;border-radius:1em;overflow:hidden}
.feature-visual-progress span {display:block;width:72%;height:100%;background:var(--site-primary);border-radius:inherit}
.feature-visual-field {display:flex;justify-content:space-between;gap:1em;padding:.875em 1em;border:.0625em solid #e8e2ed;border-radius:.5em}
.feature-visual-field span {color:#625d69}
.feature-visual-field strong {color:var(--ink);text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feature-visual-options {display:flex;flex-wrap:wrap;gap:.5em}
.feature-visual-options span {padding:.5em .875em;border:.0625em solid #e3dde9;border-radius:.5em;color:#3b3642}
.feature-visual-options .is-selected {border-color:var(--site-primary);background:#f4effa;color:var(--site-primary)}
.feature-visual-action {padding:.875em;background:var(--site-primary);color:#fff;border-radius:.5em;text-align:center}
.feature-visual .experience-chart {height:6.5em;margin-top:0}
.feature-visual .experience-event p {margin:0;color:#625d69}
/* Simple footer: copyright with email and LinkedIn */
.site-footer {padding-top:0}
.footer-simple {display:flex;align-items:center;justify-content:space-between;gap:1.5em;padding-block:1.75em;color:var(--site-muted)}
.footer-links {display:flex;align-items:center;gap:.375em;margin-right:-.5em}
.footer-icon {display:grid;place-items:center;width:2.25em;height:2.25em;border-radius:.5em;color:var(--site-muted);transition:color .2s ease,background-color .2s ease}
.footer-icon svg {width:1.3125em;height:1.3125em}
.footer-icon:hover {color:var(--site-primary);background:var(--site-primary-light)}
/* Whole catalog card is clickable via its link */
.catalog-item {position:relative;transition:border-color .2s ease,background-color .2s ease}
.catalog-item:hover {border-color:var(--site-primary);background:var(--site-primary-light)}
.catalog-item .text-link::after {content:"";position:absolute;inset:0;border-radius:inherit}
.catalog-item:has(.text-link:focus-visible) {outline:.1875em solid var(--dt-border-component-focus,var(--site-primary));outline-offset:.25em}
.catalog-item .text-link:focus-visible {outline:none}

/* Home hero: centred copy over an animated backdrop that runs behind the header */
.is-home .site-header {background:transparent;border-bottom:.0625em solid transparent;transition:background-color .2s ease,border-color .2s ease}
.is-home .site-header:hover,.is-home .site-header:focus-within,.is-home .site-header:has(.product-menu[open]) {background:var(--paper);border-bottom-color:var(--line)}
.hero-home {position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;min-height:min(46em,calc(100svh - 2em));margin-top:-6em;padding:9em 0 5em}
.hero-home .hero-copy {position:relative;z-index:1;max-width:56em}
.hero-home h1 {max-width:none}
.hero-home .hero-actions {gap:1em}
.hero-home .hero-actions .button {min-width:12.5em}
.hero-home .hero-actions {justify-content:center}
.hero-home .hero-description {margin:1.5em auto 2.25em;max-width:36em}
.hero-backdrop {position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-backdrop::before {content:"";position:absolute;inset:-10%;background-image:linear-gradient(var(--line) .0625em,transparent .0625em),linear-gradient(90deg,var(--line) .0625em,transparent .0625em);background-size:4.5em 4.5em;opacity:.5;-webkit-mask-image:radial-gradient(ellipse at center,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 15%,transparent 75%);animation:hero-grid 24s linear infinite}
.hero-sheen {position:absolute;top:50%;left:50%;width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;background:conic-gradient(from 0deg,#d8c4f3,#f4d2b6,#bcd0f5,#e3cdf6,#d8c4f3);opacity:.45;filter:blur(6em);animation:hero-spin 34s linear infinite}
.hero-orb {position:absolute;border-radius:50%;filter:blur(3em);opacity:.78;will-change:transform}
.orb-one {width:34em;height:34em;top:-10em;left:-8em;background:radial-gradient(circle,#a173df,transparent 68%);animation:hero-drift-a 17s ease-in-out infinite}
.orb-two {width:28em;height:28em;bottom:-9em;right:-6em;background:radial-gradient(circle,#f0a86a,transparent 68%);animation:hero-drift-b 21s ease-in-out infinite}
.orb-three {width:24em;height:24em;top:28%;left:58%;background:radial-gradient(circle,#6f93ea,transparent 68%);animation:hero-drift-c 25s ease-in-out infinite}
.orb-four {width:20em;height:20em;bottom:8%;left:18%;background:radial-gradient(circle,#e07bc0,transparent 68%);animation:hero-drift-d 19s ease-in-out infinite}
.hero-rings {position:absolute;top:50%;left:50%;width:46em;height:46em;margin:-23em 0 0 -23em;border:.0625em solid #b9a7cf;border-radius:50%;opacity:.55;animation:hero-pulse 9s ease-in-out infinite}
.hero-rings::after {content:"";position:absolute;inset:5em;border:.0625em solid #b9a7cf;border-radius:50%}
@keyframes hero-drift-a {50% {transform:translate3d(10em,7em,0) scale(1.2)}}
@keyframes hero-drift-b {50% {transform:translate3d(-11em,-6em,0) scale(1.15)}}
@keyframes hero-drift-c {50% {transform:translate3d(-9em,8em,0) scale(.85)}}
@keyframes hero-drift-d {50% {transform:translate3d(8em,-7em,0) scale(1.18)}}
@keyframes hero-pulse {50% {transform:scale(1.1);opacity:.25}}
@keyframes hero-spin {to {transform:rotate(1turn)}}
@keyframes hero-grid {to {background-position:4.5em 4.5em,4.5em 4.5em}}
.button-secondary {background:var(--dt-color-bw-white);color:var(--site-primary);border:.0625em solid var(--line);box-shadow:none}
.button-secondary:hover {background:var(--dt-color-bw-white);border-color:var(--site-primary);color:var(--site-primary);box-shadow:var(--button-hover-box-shadow)}
.audience-strip p {display:inline-flex;align-items:center;gap:.625em}
.audience-icon {display:grid;place-items:center;flex:0 0 auto;width:2em;height:2em;border-radius:.375em;background:var(--site-primary-light)}
.audience-icon .product-icon {width:1.125em;height:1.125em}
/* FAQ page and "See more FAQs" link */
.faq-more {display:flex;justify-content:center;margin-top:2.25em}
.faq-group+.faq-group {padding-top:0}
.faq-help {padding-bottom:4em;text-align:center}
.faq-help p {color:var(--site-muted)}
.faq-help .text-link {display:inline}
/* Use-case "what matters" cards */
.challenge-grid article {border:.0625em solid var(--line);border-radius:.625em;padding:1.75em}
.challenge-icon {display:inline-flex;padding:.75em;background:var(--site-primary-light);border-radius:.5em;margin-bottom:1.25em}
.challenge-grid article h3 {margin-bottom:.75em}
.heading-center {justify-content:center;text-align:center}
.heading-center>div {margin-inline:auto}
.heading-center h2 {margin-inline:auto}
.heading-center .eyebrow {justify-content:center}
.page-intro-center {text-align:center}
.page-intro-center h1,.page-intro-center>p:not(.eyebrow) {margin-inline:auto}
.page-intro-center .eyebrow {justify-content:center}
/* FAQ search */
.faq-search {padding-bottom:1.5em}
.faq-search-field {display:flex;align-items:center;gap:.75em;max-width:44em;margin-inline:auto;padding:.875em 1.25em;background:var(--dt-color-bw-white);border:.125em solid #b3a6c6;border-radius:.625em;color:var(--site-muted)}
.faq-search-field:focus-within {border-color:var(--site-primary);box-shadow:0 0 0 .1875em var(--site-primary-light)}
.faq-search-field svg {width:1.25em;height:1.25em;flex-shrink:0}
.faq-search-field input {flex:1;min-width:0;border:0;background:none;color:var(--ink);outline:none}
.faq-search-status {max-width:44em;margin:.875em auto 0;text-align:center;color:var(--site-muted)}
.visually-hidden {position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.external-arrow {width:.875em;height:.875em;vertical-align:-.0625em;color:var(--site-primary)}
.product-menu-item.is-external:hover .external-arrow {color:var(--site-primary)}
.product-menu-item.is-external strong {display:inline-flex;align-items:center;gap:.375em}
.form-error {padding:.875em 1em;border:.0625em solid #d9b3b3;background:#fbf1f1;border-radius:.5em;color:#8c2f2f}

/* Join us: intro with a visual alongside */
.join-intro {display:grid;grid-template-columns:1.05fr .95fr;gap:4.5em;align-items:center}
.join-intro>div:first-child .button {margin-top:2em}
.join-visual {position:relative;overflow:hidden;display:flex;flex-direction:column;gap:1.5em;min-height:24em;padding:2.25em;border-radius:var(--border-radius-card);background:linear-gradient(150deg,#efe6fa 0%,#f6ece4 55%,#e9edfa 100%);border:.0625em solid var(--line)}
.join-visual-photo {margin:0;padding:0;min-height:0}
.join-visual-photo img {display:block;width:100%;height:100%;min-height:24em;object-fit:cover;border-radius:inherit}
.join-orb {position:absolute;right:-6em;bottom:-8em;width:22em;height:22em;border-radius:50%;background:radial-gradient(circle,#c9a9ee,transparent 70%);opacity:.55;filter:blur(2.5em)}
.join-visual-top {position:relative;display:flex;align-items:center;gap:.75em;color:var(--site-primary)}
.join-mark {display:grid;place-items:center;width:2em;height:2em;border-radius:.5em;background:var(--dt-color-bw-white)}
.join-visual-line {position:relative;margin-top:auto;color:var(--ink)}
.join-visual-tags {position:relative;list-style:none;display:flex;flex-wrap:wrap;gap:.5em;margin:0;padding:0}
.join-visual-tags li {padding:.5em .875em;border-radius:100px;background:rgba(255,255,255,.75);border:.0625em solid rgba(97,66,142,.15);color:#4b4256}
.join-visual-foot {position:relative;display:flex;justify-content:space-between;color:var(--site-muted)}

/* Join us: vacancies table */
.roles-section {padding-bottom:4.5em}
.table-scroll {overflow-x:auto}
.vacancy-table {width:100%;border-collapse:collapse;text-align:left}
.vacancy-table th,.vacancy-table td {padding:1.25em 1.5em;border-bottom:.0625em solid var(--line);vertical-align:middle}
.vacancy-table thead th {border-bottom:.125em solid var(--line);color:var(--site-muted);white-space:nowrap}
.vacancy-table tbody th {color:var(--ink);font-weight:600}
.vacancy-table tbody tr:hover {background:var(--site-primary-light)}
.vacancy-table .vacancy-action {text-align:right;white-space:nowrap}
.vacancy-empty td {padding:3.25em 1.5em;text-align:center;color:var(--site-muted)}
.vacancy-empty p {max-width:46em;margin-inline:auto}
.vacancy-empty:hover {background:none}
.roles-note {margin-top:2em;max-width:46em;color:var(--site-muted)}
.empty-icon {display:grid;place-items:center;width:4em;height:4em;margin:0 auto 1.25em;border-radius:1em;background:var(--site-primary-light);color:var(--site-primary)}
.empty-icon svg {width:2em;height:2em}
.faq-search-field {padding:.625em .625em .625em 1.375em}
.faq-search-field input {padding-block:.75em}
.faq-search-button {flex-shrink:0}
.page-intro-center h1 {white-space:nowrap}

/* Perso hero: stacked card designs */
.card-visual {display:grid;place-items:center;padding:2.5em;background:#eeeaf3;border:.0625em solid #e0d9e9;border-radius:1em}
.card-visual-stack {position:relative;width:min(100%,25em);display:grid}
.perso-card {position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr auto;gap:.5em;aspect-ratio:1.586;padding:1.5em;border-radius:.875em;box-shadow:0 1.25em 2.5em #2b1f3a26;color:#fff}
.perso-card+.perso-card {margin-top:-48%}
.perso-card+.perso-card .perso-chip,.perso-card+.perso-card .perso-wave,.perso-card+.perso-card .perso-card-brand {display:none}
.perso-card:nth-child(1) {z-index:4}
.perso-card:nth-child(2) {z-index:3}
.perso-card:nth-child(3) {z-index:2}
.perso-card:nth-child(4) {z-index:1}
.tone-teal {background:linear-gradient(145deg,#12596b,#0e4351)}
.tone-sand {background:linear-gradient(145deg,#e8bda4,#d9a88c);color:#4a3527}
.tone-olive {background:linear-gradient(145deg,#a3ab6b,#8d955b);color:#31341c}
.tone-violet {background:linear-gradient(145deg,#6b49a4,#563a86)}
.perso-card-brand {grid-column:3;grid-row:1;justify-self:end}
.perso-card-brand svg {display:block;width:5.25em;height:auto}
.perso-chip {grid-column:1;grid-row:2;align-self:center;display:grid;gap:.1875em;align-content:center;width:2.75em;height:2.125em;padding:.3125em;border-radius:.3125em;background:linear-gradient(145deg,#f4cf4a,#d9ad21)}
.perso-chip i {display:block;height:.0625em;background:#9a7a10;opacity:.75}
.perso-wave {grid-column:2;grid-row:2;align-self:center;justify-self:start;width:1.5em;height:1.5em;margin-left:.75em;opacity:.9}
.perso-scheme {grid-column:3;grid-row:3;align-self:end;justify-self:end;opacity:.95}
.perso-scheme-slot {position:absolute;right:1.5em;bottom:.875em;display:grid;place-items:center;width:3.5em;aspect-ratio:52 / 35;overflow:hidden;border-radius:.3125em}
.perso-scheme-logo {display:block;width:100%;height:100%;object-fit:contain}
.perso-scheme-slot.has-plate {background:#fff;padding:.3125em;box-sizing:border-box}
.perso-scheme-type {display:inline-flex;align-items:center;gap:.4375em}
.perso-scheme-type .product-icon {width:1em;height:1em;color:currentColor}

/* Closed-loop artwork supplied with the product film. */
/* Keep the hero illustration within the same footprint as other product previews. */
.experience-hero>.closed-loop-artwork {position:relative;display:grid;grid-template-rows:1fr auto;place-items:center;gap:1.5em;width:100%;min-height:32em;justify-self:stretch;min-width:0;overflow:hidden;background:#ece5f8;border:.0625em solid #d8cbe9;border-radius:1em;padding:2.5em}
.loop-hero-illustrations {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:1.25em;width:100%;padding-bottom:0}
.loop-hero-illustrations>img,.loop-hero-illustrations>.loop-hero-chiya {position:relative;z-index:1;display:block;width:100%;min-width:0;height:auto;border-radius:.75em;box-shadow:0 .75em 1.5em #33224c12}
.loop-hero-member {position:relative;z-index:3;display:flex;align-items:center;gap:1em;width:fit-content;max-width:100%;margin-inline:auto;text-align:center;justify-content:center;padding:1em 1.25em;background:#fff;border:.0625em solid #e1d7ee;border-radius:.75em;box-shadow:0 .5em 1.5em #33224c12}
.loop-hero-member .product-icon {width:2em;height:2em;color:var(--site-primary)}
.loop-hero-member p {margin:.25em 0 0;color:var(--site-muted)}
.loop-feature {gap:1.5em;align-content:center}
.loop-brand-card {display:grid;gap:1em;width:100%;max-width:22em;aspect-ratio:1.586;padding:1.5em;border-radius:1em;background:linear-gradient(135deg,var(--site-primary),#38234f);color:#fff;box-shadow:0 1em 2em #33224c26;transform:rotate(-5deg)}
.loop-brand-card .product-icon {width:2em;height:2em}
.feature-visual-image {background:#ece5f8}
.feature-visual-image img {display:block;width:100%;height:100%;max-height:32em;object-fit:contain;border-radius:inherit}

/* Product illustrations share the compact hero footprint. */
.product-hero-art {width:100%;justify-self:center;overflow:hidden;border:.0625em solid #e0d9e9;border-radius:1em;background:#eeeaf3;aspect-ratio:1.568}
.product-hero-art img {display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(.92) brightness(1.03)}

.payment-method-symbols {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5em;width:100%;max-width:28em;color:var(--site-primary)}
.payment-method-symbols figure {display:grid;justify-items:center;gap:1.25em;margin:0;min-width:0}
.payment-method-symbols svg {display:block;width:100%;max-width:6em;aspect-ratio:1}
.payment-method-symbols figcaption {font:var(--text-body-m-semibold);color:var(--ink)}

/* Network marks use equal frames and retain their original proportions. */
.scheme-logos-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1em;width:100%;max-width:26em}
.scheme-logo-tile {display:grid;justify-items:center;align-content:center;gap:1em;margin:0;padding:1.5em .75em;background:#fff;border:.0625em solid #e0d9e9;border-radius:.875em;min-width:0}
.scheme-logo-frame {display:grid;place-items:center;width:100%;max-width:6.5em;aspect-ratio:52 / 35;overflow:hidden;border-radius:.5em}
.scheme-logo-frame img {display:block;width:100%;height:100%;object-fit:contain}
.scheme-logo-frame.has-plate {padding:.625em;box-sizing:border-box}
.scheme-logo-tile figcaption {font:var(--text-body-medium);color:var(--ink)}

/* Flat configuration preview for modular card issuance. */
.security-config-card {box-shadow:none}
.security-config-heading {display:flex;align-items:center;gap:.75em;padding:1.25em;border-bottom:.0625em solid var(--line)}
.security-config-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1em;padding:1.25em}
.security-config-field {min-width:0}
.security-config-label {display:block;margin-bottom:.625em;font:var(--text-body-medium);color:var(--site-muted)}
.security-config-select {display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:.75em;border:.0625em solid var(--site-primary);border-radius:.5em;color:var(--site-primary);font:var(--text-body-medium);background:#f8f5fc}
.security-config-select svg {width:1.125em;height:1.125em;flex-shrink:0}
.security-config-options {display:grid;gap:.25em;margin-top:.375em;padding:.375em;border:.0625em solid #e0d9e9;border-radius:.5em}
.security-config-options>div {display:flex;align-items:center;gap:.5em;padding:.5em .25em;font:var(--text-body-medium)}
.security-config-check {display:grid;place-items:center;flex:0 0 1.25em;width:1.25em;height:1.25em;box-sizing:border-box;line-height:1;border:.0625em solid #d4ccdf;border-radius:50%;background:#fff;color:var(--site-primary)}
.security-config-check.is-selected {background:var(--site-primary);border-color:var(--site-primary);color:#fff}
.security-config-algorithms {padding:0 1.25em 1.25em}
.security-config-algorithms>div {display:flex;gap:.625em;flex-wrap:wrap}
.security-config-algorithms>div>span {display:inline-flex;align-items:center;justify-content:center;gap:.375em;padding:.5em 1em;border:.0625em solid #e0d9e9;border-radius:.5em;background:#f8f5fc;color:var(--site-primary);font:var(--text-body-medium)}

.security-config-algorithms>div>span.is-selected {background:var(--site-primary);border-color:var(--site-primary);color:#fff}

.security-config-tick {display:block;width:1em;height:1em;flex-shrink:0}
.security-config-check .security-config-tick {width:.875em;height:.875em}

.loop-brand-card.strawbucks-card {grid-template-rows:auto 1fr auto;gap:.5em;background:#006241;color:#fff9e9;transform:rotate(-5deg);box-shadow:0 .75em 1.5em #173e2920}
.strawbucks-wordmark {justify-self:center;letter-spacing:.2em;font-weight:700}
.strawbucks-logo {display:block;width:6em;max-width:40%;height:auto;align-self:center;justify-self:center}
.strawbucks-card-footer {display:flex;justify-content:space-between;align-items:center;gap:1em;font:var(--text-body-s-medium);letter-spacing:.12em}

.chiya-card {display:block;width:100%;height:auto;border-radius:.875em}
.loop-hero-illustrations>img {aspect-ratio:3 / 4;object-fit:contain;background:#fff}
.loop-hero-illustrations>.loop-hero-chiya {display:grid;place-items:center;aspect-ratio:3 / 4;background:#fff;padding:8%}
.loop-hero-chiya .chiya-card-vertical {width:84%;height:auto;max-width:100%;border-radius:.5em}
.loop-feature-brands {padding:1.5em}
.loop-brand-pair {display:grid;gap:1.25em;width:100%;max-width:25em}
.loop-brand-pair .strawbucks-card {width:82%;max-width:18em;padding:1em;gap:.375em;transform:rotate(-4deg);justify-self:start}
.loop-brand-pair .strawbucks-logo {width:4em}
.loop-feature-chiya {width:82%;max-width:18em;justify-self:end;transform:rotate(4deg);border-radius:.875em;box-shadow:0 .75em 1.5em #33224c18}

/* Mobile top-up confirmation illustration. */
.topup-phone {display:flex;flex-direction:column;align-items:center;width:100%;max-width:15em;padding:.75em 1em .5em;border:.25em solid #302c38;border-radius:1.75em;background:#fff;color:var(--ink);box-shadow:0 .75em 1.5em #33224c12}
.topup-phone-speaker {width:3em;height:.25em;border-radius:1em;background:#302c38;margin-bottom:1em}
.topup-app-header {display:flex;justify-content:space-between;align-items:center;width:100%;gap:.5em;font:var(--text-body-s-semibold);color:var(--site-primary)}
.topup-avatar {display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:#eeeaf3}
.topup-success {display:grid;place-items:center;width:3.5em;height:3.5em;margin:1em 0 .75em;border-radius:50%;background:#eaf4ee;color:#267047}
.topup-success svg {width:2em;height:2em}
.topup-title {font:var(--text-body-m-semibold)}
.topup-phone .topup-subtitle {margin:.375em 0 0;font:var(--text-body-s-regular);color:var(--site-muted);text-align:center}
.topup-amount {margin:.75em 0;font-size:1.375em;line-height:1.3;font-weight:600;color:var(--site-primary)}
.topup-receipt {display:grid;gap:.75em;width:100%;padding:.875em;background:#f8f6fa;border-radius:.625em}
.topup-receipt>div {display:flex;justify-content:space-between;align-items:center;gap:.5em;font:var(--text-body-s-regular)}
.topup-receipt strong {font-weight:600;text-align:right}
.topup-receipt span {color:var(--site-muted)}
.topup-balance {padding-top:.75em;border-top:.0625em solid #e0d9e9}
.topup-done {width:100%;padding:.75em;margin-top:1em;border-radius:.625em;background:var(--site-primary);color:#fff;text-align:center;font:var(--text-body-medium)}
.topup-home-indicator {width:4em;height:.1875em;margin-top:.75em;border-radius:1em;background:#302c38}

/* Matching web and mobile top-up confirmations. */
.loop-feature-topup {container-type:inline-size;padding:1.5em}
.topup-devices {display:grid;grid-template-columns:minmax(0,1fr) 10.8em;align-items:center;gap:1em;width:100%;max-width:38em}
.topup-phone-scaled {position:relative;width:10.8em;height:18em}
.topup-phone-scaled .topup-phone {position:absolute;top:0;left:0;width:15em;max-width:none;transform:scale(.72);transform-origin:top left}
.topup-web {min-width:0;border:.0625em solid #dedbe3;border-radius:.75em;overflow:hidden;background:#fff}
.topup-web .browser-chrome {padding:.625em;gap:.5em}
.topup-web .preview-address {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topup-web-body {display:grid;gap:1em;padding:1em}
.topup-web-heading {display:grid;gap:.375em}
.topup-web-heading>span,.topup-web-balance>span,.topup-web-activity {font:var(--text-body-s-regular);color:var(--site-muted)}
.topup-web-confirmation {display:grid;justify-items:center;gap:.5em;padding:.875em .5em;background:#f1f7f3;border-radius:.5em;text-align:center}
.topup-web-check {display:grid;place-items:center;width:2em;height:2em;background:#deeee3;color:#267047;border-radius:50%}
.topup-web-check svg {width:1.5em;height:1.5em}
.topup-web-confirmation strong {font:var(--text-body-medium)}
.topup-web-confirmation p {margin:0;font:var(--text-body-s-regular);color:var(--site-muted)}
.topup-web-balance {display:grid;gap:.375em}
.topup-web-balance strong {font-size:1.375em;color:var(--site-primary)}
.topup-web-activity {display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5em;padding-top:.875em;border-top:.0625em solid var(--line)}
.topup-web-activity strong {color:var(--ink)}
@container(max-width:22em) {
  .topup-devices {grid-template-columns:minmax(0,1fr) 8.7em;gap:.625em}
  .topup-phone-scaled {width:8.7em;height:14.5em}
  .topup-phone-scaled .topup-phone {transform:scale(.58)}
  .topup-web-body {padding:.625em;gap:.75em}
}
@container(max-width:18em) {
  .topup-devices {grid-template-columns:1fr}
  .topup-phone-scaled {justify-self:center}
}

/* In-person payments hero: accepted payment logos beside the Tulasa terminal */
.terminal-visual {display:flex;align-items:center;justify-content:center;gap:1.5em;padding:1.5em 1.75em;background:#eeeaf3;border:.0625em solid #e0d9e9;border-radius:1em;aspect-ratio:1.568}
.terminal-logos {list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75em;margin:0;padding:0;width:min(14em,38%);flex-shrink:0;align-content:center}
.terminal-logos li {display:grid;place-items:center;padding:.75em .5em;background:#fff;border:.0625em solid #e8e3ee;border-radius:.625em;box-shadow:0 .25em .75em #2b1f3a0f}
.terminal-logos img {display:block;height:1.625em;width:auto;max-width:100%;object-fit:contain}
.terminal-photo {display:block;flex:0 0 auto;width:auto;height:100%;max-width:55%;object-fit:contain}
.product-hero-art.is-contain {position:relative;background:#fff}
.product-hero-art.is-contain img {position:absolute;inset:.75em;width:calc(100% - 1.5em);height:calc(100% - 1.5em);object-fit:contain;filter:none}

/* Simplified integration illustration: systems feeding the Tulasa API */
.integration-visual {display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr);align-items:stretch;gap:.625em;padding:1.25em}
.integration-sources {display:grid;align-content:center;gap:.875em;padding:1.125em;background:#221f2b;border-radius:.875em}
.integration-source {display:flex;align-items:center;gap:.875em;padding:.875em 1em;background:#fff;border-radius:.625em;color:var(--ink)}
.integration-icon {display:grid;place-items:center;flex-shrink:0;width:2.375em;height:2.375em;border-radius:.5em;background:var(--site-primary)}
.integration-icon .product-icon {width:1.25em;height:1.25em;color:#fff}
.integration-link {display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.5em;color:var(--site-primary)}
.integration-dash {display:block;width:1.75em;height:0;border-top:.125em dotted currentColor;opacity:.55}
.integration-api {display:grid;align-content:center;gap:.875em;padding:1.25em;background:#fff;border:.0625em solid #e4dfec;border-radius:.875em;box-shadow:0 .75em 1.5em #2b1f3a12}
.integration-api-head {display:flex;align-items:center;gap:.5em;color:var(--ink)}
.integration-badge {padding:.1875em .5em;border-radius:.3125em;background:var(--site-primary-light);color:var(--site-primary)}
.integration-code {margin:0;padding:1.125em;background:#221f2b;border-radius:.5em;color:#d9d3e4;overflow:hidden}
.integration-code .tok-method {color:#b39ddb}
.integration-code .tok-path {color:#9fd0ff}
.integration-code .tok-key {color:#f0b882}
.integration-code .tok-str {color:#9ede9e}
.integration-code .tok-num {color:#8fd6ff}
.integration-status {display:flex;align-items:center;gap:.5em;color:#306a0d}
.integration-check {display:grid;place-items:center;flex:0 0 auto;width:1.375em;height:1.375em;aspect-ratio:1;border-radius:50%;background:#eef7e9}
.integration-visual .integration-sources,.integration-visual .integration-api {min-width:0}
.integration-sync {display:grid;place-items:center;flex:0 0 auto;width:2.25em;height:2.25em;aspect-ratio:1;border-radius:50%;background:#fff;border:.0625em solid #e4dfec;box-shadow:0 .25em .625em #2b1f3a12}
.integration-sync svg {width:1.125em;height:1.125em}

/* Omni-channel: payment methods enabled per region */
.methods-visual {display:grid;place-items:center;padding:.875em;overflow:hidden}
.methods-panel {width:100%;max-width:25em;padding:1em;background:#fff;border:.0625em solid #e4dfec;border-radius:.875em;box-shadow:0 .75em 1.5em #2b1f3a12}
.methods-head {display:flex;align-items:center;gap:.75em;padding-bottom:.5em;border-bottom:.0625em solid #ece8f0}
.methods-kicker {color:var(--site-muted);margin-bottom:.125em}
.methods-head strong {color:var(--ink)}
.methods-list {list-style:none;display:grid;gap:.1875em;margin:.4375em 0 0;padding:0}
.methods-list li {display:flex;align-items:center;gap:.5em;padding:.25em .5em;border:.0625em solid #eee9f2;border-radius:.5em}
.methods-list li.is-on {border-color:#e0d6ef;background:#fbf9fe}
.methods-list li.is-off {border-style:dashed;border-color:#d8cfe6}
.is-off .methods-logo,.is-off .methods-copy strong {opacity:.7}
.methods-logo {display:grid;place-items:center;flex:0 0 auto;width:2.375em;height:1.5em;background:#fff;border:.0625em solid #ece8f0;border-radius:.375em;overflow:hidden}
.methods-logo img {display:block;width:100%;height:100%;padding:.25em;object-fit:contain;object-position:center}
.methods-fallback {color:var(--site-primary)}
.methods-copy {display:grid;min-width:0}
.methods-copy strong {color:var(--ink)}
.methods-copy span {color:var(--site-muted)}
.methods-toggle {flex:0 0 auto;margin-left:auto;width:2.125em;height:1.1875em;padding:.125em;border-radius:100px;background:#d9d3e2;transition:background .2s}
.methods-toggle i {display:block;width:.9375em;height:.9375em;border-radius:50%;background:#fff;box-shadow:0 .0625em .125em #0000001f;transition:transform .2s}
.is-on .methods-toggle {background:var(--site-primary)}
.is-on .methods-toggle i {transform:translateX(.9375em)}
.methods-merchant {display:grid;place-items:center;flex:0 0 auto;width:2em;height:2em;aspect-ratio:1;border-radius:.5em;background:#0f6b4f}
.methods-merchant .product-icon {width:1.25em;height:1.25em;color:#fff}
.methods-merchant.is-muted {background:var(--site-primary-light)}
.methods-merchant.is-muted .product-icon {color:var(--site-primary)}
.methods-request-chip {flex:0 0 auto;margin-left:auto;padding:.3125em .625em;border-radius:100px;background:var(--site-primary);color:#fff;white-space:nowrap}

/* Connected with online: payments board with a live counter feed */
.payments-visual {position:relative;display:block;padding:1em;overflow:hidden}
.payments-channels {display:flex;gap:.5em;margin-bottom:.625em}
.payments-chip {display:inline-flex;align-items:center;gap:.375em;padding:.375em .625em;background:#fff;border:.0625em solid #e8e3ee;border-radius:.5em;color:var(--site-muted);box-shadow:0 .25em .625em #2b1f3a0d}
.payments-chip.is-active {color:var(--site-primary);border-color:#ddd2ee;background:#fbf9fe}
.payments-chip .product-icon {width:.875em;height:.875em;color:currentColor}
.payments-board {width:92%;padding:1.25em 1.375em;background:#fff;border:.0625em solid #e8e3ee;border-radius:.75em;box-shadow:0 .75em 1.5em #2b1f3a12}
.payments-tabs {display:flex;gap:1em;padding-bottom:.5em;border-bottom:.0625em solid #ece8f0}
.payments-tabs span {color:var(--site-muted);padding-bottom:.375em}
.payments-tabs .is-active {color:var(--ink);box-shadow:inset 0 -.125em 0 var(--site-primary)}
.payments-table {width:100%;border-collapse:collapse;text-align:left;margin-top:.5em}
.payments-table th {color:var(--site-muted);font-weight:500;padding:.5em .625em}
.payments-table td {padding:.6875em .625em;border-top:.0625em solid #f1eef6;color:var(--ink);white-space:nowrap}
.payments-mono {color:var(--site-muted)}
.payments-method {display:inline-flex;align-items:center;gap:.375em}
.payments-method img {width:1.75em;height:1.125em;object-fit:contain}
.payments-feed {position:absolute;right:.875em;top:3.5em;width:9em;display:flex;flex-direction:column;padding:.75em .75em .5em;background:#fff;border:.0625em solid #ded8e8;border-radius:1.125em;box-shadow:0 1.25em 2.5em #2b1f3a26}
.payments-feed-head {display:flex;align-items:center;justify-content:space-between;color:var(--ink)}
.payments-close {color:var(--site-muted)}
.payments-feed-day {margin:.375em -.75em .25em;padding:.25em .75em;background:#f6f4f9;color:var(--site-muted)}
.payments-feed ul {list-style:none;display:grid;align-content:start;gap:.5em;margin:.3125em 0 0;padding:0}
.payments-feed li {display:grid;grid-template-columns:1fr auto;gap:.125em .5em}
.payments-feed-time {grid-column:1;color:var(--site-muted)}
.payments-feed-amount {grid-column:1;grid-row:2;color:var(--ink)}
.payments-feed-status {grid-column:2;grid-row:1/3;align-self:center;padding:.1875em .4375em;border-radius:.3125em;background:#eef7e9;color:#306a0d}
.payments-feed .payments-method {grid-column:1;grid-row:3;color:var(--site-muted);gap:.25em}
.payments-feed .payments-method img {width:1.25em;height:.8125em}
.payments-feed-home {display:block;width:2.5em;height:.1875em;margin:.375em auto 0;border-radius:1em;background:#d7d1e0}
.experience-app-icon.is-mark {background:#1f6f5c;color:#fff;letter-spacing:-.02em}
.overlay-summary {display:grid;gap:.5em;margin-bottom:1.5em;padding:.875em;border:.0625em solid #ece8f0;border-radius:.5em;background:#fbfafd}
.overlay-summary-title {margin-bottom:1.125em;color:var(--ink)}
.overlay-summary-head {display:flex;justify-content:space-between;color:#625d69}
.overlay-summary-line {display:flex;justify-content:space-between;gap:.75em;color:#3b3642}
.overlay-summary-total {display:flex;justify-content:space-between;padding-top:.375em;border-top:.0625em solid #ece8f0;color:var(--ink)}

/* A checkout that fits: the hero checkout composition at feature-slide scale,
   themed by the merchant's two brand colours. */
.brand-visual {--brand-scale:.72;align-items:center;min-height:calc(37.5em*var(--brand-scale))}
.brand-scale {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--brand-scale))}
.brand-visual .brand-stage.experience-composition {position:relative;width:46.5em;padding-bottom:2em}
.brand-visual .experience-order {background:var(--brand-light);border-right-color:#00000012}
.brand-visual .experience-app-icon.is-mark {background:var(--brand-dark);color:#fff}
.brand-visual .experience-order-summary {border-color:#00000014;background:#ffffffb8}
.brand-visual .experience-order-total {color:var(--brand-dark)}
.brand-visual .experience-methods .is-selected {border-color:var(--brand-dark);background:var(--brand-light);color:var(--brand-dark)}
.brand-visual .experience-action {background:var(--brand-dark)}
.brand-settings {position:absolute;left:0;bottom:0;z-index:2;display:grid;gap:.625em;padding:.875em 1em;background:#fff;border:.0625em solid #e0dae7;border-radius:.75em;box-shadow:0 .75em 2em #2b1f3a26}
.brand-settings-title {color:#625d69}
.brand-swatch {display:flex;align-items:center;gap:.625em}
.brand-swatch strong {display:block;color:var(--ink)}
.brand-swatch span {color:#625d69}
.brand-dot {width:1.5em;height:1.5em;flex:0 0 auto;border-radius:.375em;border:.0625em solid #00000014}
.brand-dot.is-dark {background:var(--brand-dark)}
.brand-dot.is-light {background:var(--brand-light)}
/* The brand checkout is a picture of a desktop window, so it keeps the
   two-column layout at every width and shrinks via --brand-scale instead. */
.brand-visual .brand-stage.experience-composition {max-width:none}
.brand-visual .experience-composition .experience-frame {min-height:0}
.brand-visual .experience-composition .screen-checkout {grid-template-columns:1fr 1fr}
.brand-visual .experience-composition .experience-order {padding:1.875em 1.75em}
.brand-visual .experience-composition .experience-payment {border-top:0}
.brand-visual .experience-composition .experience-order .experience-summary {display:block}
.brand-visual .experience-composition .experience-powered {display:flex}

/* Share it anywhere: the payment-link dialog with a copyable link and QR code. */
.link-dialog {width:100%;max-width:44em;background:#fff;border:.0625em solid #e0dae7;border-radius:1em;box-shadow:0 1em 3em #33224c18;overflow:hidden}
.link-dialog-head {position:relative;padding:1.125em 2.75em;text-align:center;color:var(--ink)}
.link-close {position:absolute;top:50%;right:1.125em;transform:translateY(-50%);color:#625d69}
.link-dialog-body {display:grid;grid-template-columns:1fr auto;gap:1.5em;padding:.5em 1.5em 1.75em}
.link-share {display:grid;align-content:start;gap:1em;padding-right:1.5em;border-right:.0625em solid #ece8f0}
.link-share p {color:#625d69}
.link-row {display:flex;gap:.5em;min-width:0}
.link-input {flex:1;min-width:0;padding:.625em .75em;border:.0625em solid #ded8e6;border-radius:.5em;color:#625d69;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-copy,.link-download {display:inline-flex;align-items:center;gap:.4375em;padding:.625em .875em;border:.0625em solid #ded8e6;border-radius:.5em;color:var(--ink);white-space:nowrap}
.link-copy svg,.link-download svg {width:1.125em;height:1.125em;flex:0 0 auto}
.link-qr {display:grid;justify-items:center;gap:.875em}
.link-qr-card {display:grid;justify-items:center;gap:.625em;padding:.875em;background:#fff;border-radius:.75em;box-shadow:0 .5em 1.5em #2b1f3a1f}
.link-qr-brand {display:block;width:3.25em;color:var(--site-primary)}
.link-qr-brand svg {display:block;width:100%;height:auto}
.link-qr-card img {width:9.5em;height:auto}

/* No code needed: the create-payment-link form. */
.linkform {width:100%;max-width:44em;background:#fff;border:.0625em solid #e0dae7;border-radius:.875em;box-shadow:0 1em 3em #33224c14;overflow:hidden}
.linkform-head {padding:1em 1.25em .75em;border-bottom:.0625em solid #f0ecf4}
.linkform-crumbs {display:flex;gap:.4375em;color:#8b8593}
.linkform-head strong {display:block;margin-top:.1875em;color:var(--ink)}
.linkform-cols {display:grid;grid-template-columns:1fr 1fr;gap:1.125em;padding:1em 1.25em}
.linkform-col {display:grid;align-content:start;gap:.75em;min-width:0}
.linkform-field {display:grid;gap:.3125em;min-width:0}
.linkform-field>span:first-child {color:#3b3642}
.linkform-input {display:flex;align-items:center;gap:.4375em;padding:.5em .625em;border:.0625em solid #ded8e6;border-radius:.375em;color:#3b3642;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.linkform-input.is-placeholder {color:#9b95a3}
.linkform-input svg {width:1em;height:1em;flex:0 0 auto;color:#8b8593}
.linkform-area {position:relative;align-items:flex-start;min-height:2.75em}
.linkform-grip {position:absolute;right:.25em;bottom:.25em;width:.5em;height:.5em;border-right:.0625em solid #c8c1d1;border-bottom:.0625em solid #c8c1d1}
.linkform-select {justify-content:space-between;color:var(--ink)}
.linkform-chip {display:inline-flex;align-items:center;gap:.4375em;justify-self:start;padding:.5em .75em;border:.0625em solid #d5cee0;border-radius:.5em;color:var(--ink);box-shadow:0 .125em .375em #33224c0f}
.linkform-chip svg {width:1em;height:1em}
.linkform-empty {display:grid;justify-items:center;gap:.25em;padding:1em .75em;border:.0625em dashed #d9d3e1;border-radius:.5em;text-align:center}
.linkform-empty strong {color:#625d69}
.linkform-empty span {color:#9b95a3}
.linkform-method {display:flex;align-items:flex-start;gap:.5em;padding:.625em;border-radius:.5em;background:#f5f3f8}
.linkform-method strong {display:block;color:var(--ink)}
.linkform-method span {color:#726c7a}
.linkform-check {display:grid;place-items:center;width:1.375em;height:1.375em;flex:0 0 auto;border-radius:.25em;background:var(--site-primary);color:#fff}
.linkform-check svg {width:1em;height:1em;color:#fff}
.linkform-foot {display:flex;align-items:center;justify-content:flex-end;gap:.625em;padding:.875em 1.25em;border-top:.0625em solid #f0ecf4;background:#fbfafd}
.linkform-cancel {padding:.5em .875em;border:.0625em solid #ded8e6;border-radius:.375em;color:var(--ink)}
.linkform-submit {padding:.5em 1em;border-radius:.375em;background:var(--site-primary);color:#fff}

/* Customize and configure: per-link option toggles with the brand colour card. */
.options-stage {position:relative;width:100%;max-width:26em;padding-bottom:5.75em}
.options-list {display:grid;gap:.625em;margin:0;padding:0;list-style:none}
.options-list li {display:flex;align-items:center;gap:.875em;padding:.875em 1em;background:#fff;border:.0625em solid #e4dfea;border-radius:.625em;color:var(--ink)}
.options-toggle {position:relative;width:2.5em;height:1.375em;flex:0 0 auto;border-radius:1em;background:#e2dee6;transition:background .2s ease}
.options-toggle i {position:absolute;top:.1875em;left:.1875em;width:1em;height:1em;border-radius:50%;background:#fff;box-shadow:0 .0625em .1875em #00000026;transition:left .2s ease}
.options-list .is-on .options-toggle {background:var(--brand-dark)}
.options-list .is-on .options-toggle i {left:calc(100% - 1.1875em)}
.options-visual .brand-settings {left:auto;right:-1em;bottom:0}

/* Subscription creation: form with a floating success confirmation. */
.subscription-visual {width:100%;min-width:0;container-type:inline-size;overflow:hidden;border-radius:1em;border:.0625em solid #dfd5e9;background:radial-gradient(ellipse at 12% 8%,#d9b9c9 0,transparent 58%),radial-gradient(ellipse at 94% 92%,#7954ad 0,transparent 62%),linear-gradient(135deg,#c3a2d8,var(--site-primary))}
.subscription-scene {position:relative;aspect-ratio:1.35;font-size:clamp(.625rem,2.5cqw,1rem);padding-top:5em;overflow:hidden;color:#222438}
.subscription-form-art {display:grid;gap:2em;width:78%;margin-left:9%;padding:2.25em 2em 3em;border-radius:.875em .875em 0 0;background:#fff;box-shadow:0 1em 3em #36244412}
.subscription-form-title {font-size:1.375em;font-weight:600;line-height:1.25;margin-bottom:.125em}
.subscription-form-group {display:grid;gap:.75em}
.subscription-field-label {font-size:1em;font-weight:600;line-height:1.3}
.subscription-field {display:grid;gap:.375em;padding:1.25em;border:.0625em solid #dfe3ec;border-radius:.625em;font-size:.8125em;line-height:1.4}
.subscription-field strong {font-weight:600}
.subscription-field>span {color:#60677b}
.subscription-form-row {display:flex;align-items:center;gap:.625em;font-size:.9375em;font-weight:600;line-height:1.4}
.subscription-form-row svg {width:1.125em;height:1.125em;flex-shrink:0}
.subscription-created {position:absolute;top:3.5em;right:5%;width:49%;display:grid;justify-items:center;gap:.75em;padding:2em 1.5em;text-align:center;border-radius:.875em;background:#fff;box-shadow:0 1.5em 3em #35214c1f}
.subscription-created-check {display:grid;place-items:center;width:1.75em;height:1.75em;margin-bottom:.25em;border-radius:50%;background:var(--site-primary);color:#fff}
.subscription-created-check svg {width:1.375em;height:1.375em}
.subscription-created>strong {font-size:1.0625em;font-weight:600;line-height:1.3}
.subscription-created>p {margin:0;color:#60677b;font-size:.875em;line-height:1.45}

/* Usage billing hero: compact meters with usage and pricing overlays. */
.usage-billing-visual {width:100%;min-width:0;container-type:inline-size;overflow:hidden;border:.0625em solid #e5dfed;border-radius:1em;background:#f8f6fb}
.usage-billing-scene {position:relative;aspect-ratio:1.12;font-size:clamp(.4rem,2.2cqw,.875rem);line-height:1.4;color:#272733}
.usage-meters {position:absolute;top:5%;left:4%;width:90%;padding:1.25em;background:#fff;border:.0625em solid #e8e3ed;border-radius:.625em}
.usage-meters-heading {display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:1em}
.usage-meters-heading strong,.usage-panel-title {font-size:1.5em;font-weight:600;line-height:1.3}
.usage-meters-heading p {margin:.375em 0 0;color:#717281;font-size:1em}
.usage-create-meter {padding:.625em 1em;border-radius:.375em;background:var(--site-primary);color:#fff;font-size:.75em;white-space:nowrap}
.usage-meter-table {border:.0625em solid #e9e6ef;border-radius:.5em;overflow:hidden}
.usage-meter-filters {display:grid;grid-template-columns:1fr 24%;gap:1em;padding:1em;font-size:.75em;color:#717281}
.usage-meter-filters>span {padding:.625em .75em;background:#fcfbfd;border:.0625em solid #e9e6ef;border-radius:.375em}
.usage-meter-row {display:grid;grid-template-columns:1.55fr 1.65fr .85fr 1fr .5fr;gap:.75em;align-items:center;padding:1.125em 1em;border-bottom:.0625em solid #efedf3;font-size:.6875em}
.usage-meter-row>span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usage-meter-labels {font-size:.625em;font-weight:600;text-transform:uppercase}
.usage-meter-row code {font-size:1em;color:var(--site-primary);background:#f6f3fa;padding:.125em .25em;border-radius:.25em}
.usage-meter-active {justify-self:start;padding:.25em .5em;background:#dff4e8;color:#256443;border-radius:.25em;font-weight:600}
.usage-summary-card,.usage-pricing-card {position:absolute;background:#fff;border:.0625em solid #efedf3;border-radius:1em;box-shadow:0 .5em 2em #35214c12}
.usage-summary-card {left:7%;bottom:5%;width:40%;padding:1.75em 1.5em}
.usage-summary-row {display:grid;grid-template-columns:1.875em 1fr auto;align-items:center;gap:.75em;margin-top:2em;font-size:.875em}
.usage-summary-row strong {font-weight:600;white-space:nowrap}
.usage-meter-ring {display:block;width:1.875em;height:1.875em;border-radius:50%;background:conic-gradient(var(--site-primary) var(--usage-fill),#eeebf2 0);position:relative}
.usage-meter-ring::after {content:"";position:absolute;inset:.25em;border-radius:50%;background:#fff}
.usage-pricing-card {right:4%;bottom:5%;width:46%;padding:1.75em 1.5em}
.usage-pricing-subtitle {margin:.625em 0 2.5em;color:#717281;font-size:1em}
.usage-pricing-label {display:block;font-size:.9375em;font-weight:600}
.usage-product-details {display:grid;gap:1.25em;margin:1.5em 0 2em;font-size:.875em}
.usage-product-details>div {display:grid;grid-template-columns:38% 1fr;gap:.75em}
.usage-product-details dt {color:#717281}
.usage-product-details dd {margin:0;font-weight:600}
.usage-pricing-section {padding-top:1.5em;border-top:.0625em solid #e9e6ef}
.usage-price-table {margin-top:1.25em;border:.0625em solid #e5e1eb;border-radius:.5em;font-size:.8125em;overflow:hidden}
.usage-price-table>div {display:grid;grid-template-columns:1.35fr 1fr;gap:.75em;padding:1em}
.usage-price-table>div:first-child {border-bottom:.0625em solid #e5e1eb;font-weight:600;text-transform:uppercase;font-size:.875em}
.usage-price-table small {display:block;margin-top:.375em;font-size:1em;color:#717281}
.usage-pricing-actions {display:flex;justify-content:flex-end;gap:.625em;margin-top:2em;padding-top:1.25em;border-top:.0625em solid #e9e6ef;font-size:.875em;color:var(--site-primary)}
.usage-pricing-actions span {padding:.625em .875em;border:.0625em solid #e5e1eb;border-radius:.5em;font-weight:600}

.usage-meter-filters>span,.usage-pricing-actions>span {display:flex;align-items:center;gap:.625em}
.usage-meter-filters svg,.usage-pricing-actions svg {display:block;width:1.125em;height:1.125em;flex-shrink:0}

/* Consistent phone proportions across product and use-case heroes. */
.product-hero .experience-phone-overlay {display:flex;flex-direction:column;aspect-ratio:9 / 19.5}
.product-hero .overlay-phone-status,.product-hero .overlay-home {flex-shrink:0}
.product-hero .overlay-phone-content {display:flex;flex-direction:column;flex:1;min-height:0}
.product-hero .overlay-phone-content>.overlay-action {margin-top:auto}
.product-hero .experience-composition .experience-stage {min-height:30em}