:root {
  --gallery: #F6F5F1; --ink: #242622; --violet: #7958D6; --apricot: #E9A57A; --forest: #285C45; --lavender: #EAE5F3;
  --muted: #64645f; --rule: #858681; --faint-rule: #c8c7c2; --font: 'Urbanist', sans-serif; --mono: 'Space Mono', monospace;
  --display: clamp(48px, 5.7vw, 82px); --heading: clamp(42px, 5.15vw, 74px); --body: 20px;
  --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 64px; --space-2xl: 96px;
  --gutter: 44px; --radius: 4px; --max-width: 1600px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--gallery); color: var(--ink); font: 400 var(--body)/1.45 var(--font); -webkit-font-smoothing: antialiased; }
h1,h2,h3,p,figure { margin: 0; }
h1,h2,h3 { font-weight: 500; line-height: 1.08; letter-spacing: -.045em; }
h2 { font-size: var(--heading); }
h3 { font-size: 34px; }
a { color: inherit; text-decoration: none; }
a,button,summary { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button,summary,a { touch-action: manipulation; }
button { border-radius: var(--radius); }
img { display: block; max-width: 100%; height: auto; }
ul,ol { list-style: none; margin: 0; padding: 0; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline: 3px solid var(--forest); outline-offset: 5px; }
::selection { background: var(--lavender); color: var(--ink); }
.container { width: calc(100% - var(--gutter) * 2); max-width: var(--max-width); margin-inline: auto; }
.section-rule { border-bottom: 1px solid var(--rule); }
.eyebrow { display: flex; align-items: center; gap: 15px; font: 400 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .13em; }
.eyebrow::before { content: ''; width: 10px; height: 10px; flex: 0 0 10px; background: var(--violet); }
.button { min-height: 54px; padding: 13px 25px; border: 1px solid transparent; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1.2; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.button-dark { background: var(--ink); color: white; }
.button-dark:hover { background: var(--forest); }
.button-violet { background: var(--violet); color: white; }
.button-violet:hover { background: #6543c1; }
.button-outline { border-color: var(--ink); background: transparent; }
.button-outline:hover { background: var(--lavender); }
.actions { display: flex; gap: 20px; }
.actions .button { flex: 1; }
.text-link { text-decoration: underline; text-underline-offset: 4px; }
.text-link:hover { color: var(--violet); }
.wordmark { font-size: 36px; font-weight: 500; letter-spacing: -.055em; line-height: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; background: var(--ink); color: white; padding: 12px; }
.skip-link:not(:focus) { clip-path: inset(50%); opacity: 0; pointer-events: none; }
.skip-link:focus { top: 12px; }
/* Shared decorative mobile: each section sets its own size and position. */
.sculpture { position: relative; }
.sculpture .rod { position: absolute; height: 2px; background: var(--ink); transform-origin: left; }
.sculpture .rod::before,.sculpture .rod::after { content: ''; position: absolute; width: 9px; height: 9px; background: radial-gradient(circle at 30% 25%, #777, #161713 70%); border-radius: 50%; top: -4px; }
.sculpture .rod::after { right: -3px; }
.sculpture .rod-one { left: 25%; top: 20%; width: 48%; transform: rotate(8deg); }
.sculpture .rod-two { left: 72%; top: 40%; width: 23%; transform: rotate(-10deg); }
.sculpture .hanging { position: absolute; transform-origin: 50% -70px; animation: pendulum 9s ease-in-out infinite alternate; }
.sculpture .hanging::before { content: ''; position: absolute; bottom: 98%; left: 50%; width: 1px; height: var(--wire,70px); background: var(--ink); }
.sculpture .form-violet { left: 1%; top: 23%; width: 40%; --wire: 150px; }
.sculpture .form-apricot { left: 44%; top: 57%; width: 10%; --wire: 65px; animation-delay: -3s; }
.sculpture .form-forest { left: 59%; top: 56%; width: 28%; --wire: 60px; animation-delay: -5s; }
.sculpture .form-lavender { left: 88%; top: 47%; width: 12%; --wire: 140px; animation-delay: -2s; }
@keyframes pendulum { from { transform: rotate(-1deg); } to { transform: rotate(1deg); } }
@media (max-width: 700px) {
 :root { --gutter: 20px; --body: 18px; --heading: 42px; }
 .button { padding: 12px 15px; min-height: 48px; font-size: 17px; }
 .actions { gap: 11px; }
 .eyebrow { font-size: 11px; gap: 13px; letter-spacing: .16em; }
 h3 { font-size: 28px; }
 .wordmark { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } }

/* === section: header === */
.header { position: relative; z-index: 10; }
.header .header-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.header nav { display: flex; align-items: center; flex: 1; justify-content: space-between; margin-left: 22%; font-size: 16px; }
.header .nav-links { display: flex; gap: 38px; align-items: center; }
.header .nav-actions { display: flex; gap: 28px; align-items: center; }
.header .button { font-size: 16px; min-height: 44px; padding: 12px 24px; }
.header .dropdown { position: relative; }
.header summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.header summary::-webkit-details-marker { display: none; }
.header .chevron { width: 8px; height: 8px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg) translateY(-2px); }
.header details[open] .chevron { transform: rotate(225deg); }
.header .dropdown-panel { position: absolute; top: calc(100% + 18px); left: -20px; min-width: 210px; padding: 12px; background: var(--gallery); border: 1px solid var(--faint-rule); box-shadow: 0 12px 25px #24262212; }
.header .dropdown-panel::before { content: ''; position: absolute; height: 20px; width: 100%; bottom: 100%; left: 0; }
.header .dropdown-panel a { display: block; padding: 8px 10px; }
.header .dropdown-panel a:hover { background: var(--lavender); }
.header .nav-links > a:hover,.header .nav-actions > a:not(.button):hover { color: var(--violet); }
.header .mobile-login,.header .menu-toggle { display: none; }
@media (max-width: 1200px) and (min-width: 901px) { .header nav { margin-left: 5%; } .header .nav-links { gap: 24px; } }
@media (max-width: 900px) {
 .header .header-inner { height: 64px; gap: 26px; flex-wrap: wrap; }
 .header .mobile-login { display: block; margin-left: auto; font-size: 16px; }
 .header .menu-toggle { display: flex; flex-direction: column; justify-content: space-between; width: 25px; height: 23px; padding: 1px 0; background: transparent; border: 0; }
 .header .menu-toggle span { display: block; width: 24px; height: 2.5px; background: var(--ink); }
 .header nav { margin: 0; flex-basis: 100%; display: block; background: var(--gallery); border-bottom: 1px solid var(--rule); padding: 22px 0; }
 .header.nav-enhanced nav { position: absolute; top: 64px; left: 0; width: 100%; padding: 20px var(--gutter) 28px; box-shadow: 0 12px 20px #24262212; }
 .header.nav-enhanced nav:not(.is-open) { display: none; }
 .header .nav-links,.header .nav-actions { flex-direction: column; align-items: stretch; gap: 0; }
 .header .nav-links > a,.header summary,.header .nav-actions > a { padding: 12px 0; }
 .header summary { justify-content: space-between; }
 .header .dropdown-panel { position: static; box-shadow: none; border: 0; border-left: 1px solid var(--violet); margin: 0 0 10px 5px; padding: 0 10px; }
 .header .dropdown-panel::before { display: none; }
 .header .nav-actions { margin-top: 12px; }
 .header .nav-actions .button { margin-top: 10px; }
 .header:not(.nav-enhanced) .header-inner { height: auto; padding-top: 20px; }
 .header:not(.nav-enhanced) .menu-toggle { display: none; }
}

@media (min-width: 1201px) and (max-width: 1350px) {
 .header nav { margin-left: auto; }
 .header .nav-links { gap: 28px; }
}

/* === section: hero === */
.hero .hero-art { height: min(36vw, 570px); position: relative; }
.hero .hero-panorama { width: 100%; height: 100%; object-fit: fill; mix-blend-mode: multiply; filter: brightness(1.07); mask-image: linear-gradient(to bottom, transparent, black 10%, black 87%, transparent); }
.hero .hero-mobile { display: none; }
.hero .hero-content { padding-top: 12px; padding-bottom: 43px; border-bottom: 1px solid var(--rule); }
.hero .intro-grid { display: grid; grid-template-columns: 1.9fr 1fr; gap: 60px; margin-top: 58px; }
.hero h1 { font-size: clamp(48px,6.25vw,90px); line-height: 1.08; letter-spacing: -.049em; }
.hero h1 span { display: block; white-space: nowrap; }
.hero .intro-copy > p:first-child { font-size: 19px; line-height: 1.5; }
.hero .actions { margin-top: 35px; }
.hero .trial-note { font-size: 14px; color: var(--muted); margin-top: 18px; }
.hero .trial-note br { display: none; }
@media (min-width: 1600px) { .hero .intro-grid { grid-template-columns: 1.85fr 1fr; } .hero h1 { font-size: 94px; } }
@media (max-width: 1100px) and (min-width: 701px) { .hero .intro-grid { gap: 30px; grid-template-columns: 1.4fr 1fr; } .hero .actions { flex-wrap: wrap; } .hero h1 span { display: inline; white-space: normal; } }
@media (max-width: 700px) {
 .hero .hero-art { height: 222px; }
 .hero .hero-panorama { display: none; }
 .hero .hero-mobile { display: block; width: calc(100% - 32px); margin: auto; height: 210px; }
 .hero .hero-mobile .rod-one { top: 21%; left: 24%; }
 .hero .hero-mobile .rod-two { top: 47%; }
 .hero .hero-mobile .form-violet { top: 22%; left: 2%; width: 39%; }
 .hero .hero-mobile .form-violet::before { bottom: 72%; left: 58%; height: 156px; }
 .hero .hero-mobile .form-violet img { transform: rotate(-10deg); }
 .hero .hero-mobile .form-apricot { top: 54%; --wire: 55px; }
 .hero .hero-mobile .form-forest { top: 54%; --wire: 44px; }
 .hero .hero-mobile .form-lavender { top: 46%; width: 12%; --wire: 115px; }
 .hero .hero-content { padding-top: 18px; padding-bottom: 36px; }
 .hero .intro-grid { display: block; margin-top: 28px; }
 .hero h1 { font-size: 47px; line-height: 1.085; letter-spacing: -.05em; max-width: 380px; }
 .hero h1 span { display: inline; white-space: normal; }
 .hero .intro-copy { margin-top: 29px; }
 .hero .intro-copy > p:first-child { font-size: 18px; line-height: 1.46; }
 .hero .actions { margin-top: 27px; }
 .hero .trial-note { font-size: 14px; line-height: 1.5; max-width: 230px; margin-top: 16px; }
 .hero .trial-note br { display: block; }
}
@media (max-width: 375px) { .hero h1 { font-size: 43px; } }

/* Reserve the full height of the phone sculpture on wider small screens. */
@media (min-width: 451px) and (max-width: 700px) {
 .hero .hero-art { height: 350px; }
 .hero .hero-mobile { max-width: 520px; height: 300px; }
}

/* === section: features === */
.features .container { padding-top: 48px; padding-bottom: 50px; }
.features h2 { margin-top: 24px; font-size: clamp(42px,5.15vw,74px); }
.features .feature-grid { position: relative; display: grid; grid-template-columns: 24% 24% 21%; justify-content: space-between; row-gap: 113px; margin-top: 108px; padding-bottom: 64px; }
.features .feature-grid::before,.features .feature-grid::after { content: ''; position: absolute; left: 7%; width: 85%; height: 2px; background: var(--ink); transform: rotate(1.8deg); transform-origin: left; }
.features .feature-grid::before { top: -58px; }
.features .feature-grid::after { top: 277px; }
.features .feature { position: relative; z-index: 1; }
.features .item-number { font: 14px/1.5 var(--mono); }
.features h3 { margin-top: 7px; margin-bottom: 13px; font-size: 36px; }
.features .feature p { font-size: 20px; line-height: 1.42; }
.features .feature-2 { background: var(--lavender); border-radius: 6px; padding: 14px 24px; margin: -10px -24px 0; }
/* Each shape hangs from the tilted bar above it. A shape says where it sits (--l of the grid's width plus --dx,
   --t from the top, --aw wide) and which bar it hangs from (--bar, that bar's top); --drop is then the distance
   from the top of the shape up to the bar at the shape's middle, so the wire meets the bar at any width.
   --w is the grid's width (the container's) and .0314 the slope of a bar turned 1.8deg that starts at 7%. */
.features .feature-grid { --w: min(100vw - var(--gutter) * 2, var(--max-width)); }
.features .feature-art { position: absolute; z-index: 0; --dx: 0px; --tuck: 2%; left: calc(var(--l) * 100% + var(--dx)); top: var(--t); width: var(--aw);
  --drop: calc(var(--t) - var(--bar) - 1px - ((var(--l) - .07) * var(--w) + var(--dx) + var(--aw) / 2) * .0314); }
.features .feature-art::before { content: ''; position: absolute; width: 1px; background: var(--ink); bottom: calc(100% - var(--tuck)); height: calc(var(--drop) + var(--tuck)); left: 50%; }
.features .feature-art::after { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 30% 25%,#777,#171814 75%); bottom: calc(100% + var(--drop) - 4.5px); left: calc(50% - 4px); }
.features .feature-art img { animation: pendulum 9s ease-in-out infinite alternate; transform-origin: 50% calc(var(--drop) * -1); }
.features .feature-art-1 { --aw: 120px; --l: .26; --t: 25px; --bar: -58px; --tuck: 24%; }
.features .feature-art-2 { --aw: 100px; --l: .69; --t: 59px; --bar: -58px; }
.features .feature-art-3 { --aw: 180px; --l: .22; --t: 385px; --bar: 277px; }
.features .feature-art-4 { --aw: 115px; --l: .65; --t: 417px; --bar: 277px; --tuck: 24%; }
/* On a wide screen the first column's words reach further right: the bowl sits in the middle of the gap beside them. */
@media (min-width: 1441px) { .features .feature-art-3 { --l: .3175; --dx: -102px; } }
.features .draft { display: flex; align-items: center; gap: 16px; border: 1px solid var(--rule); border-radius: 5px; padding: 16px 20px; }
.features .draft-label { font: 14px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 15px 30px 15px 8px; border-right: 1px solid var(--faint-rule); flex-shrink: 0; }
.features .draft p { flex: 1; font-size: 18px; padding-left: 30px; }
.features .preview-button { min-width: 150px; text-align: center; border: 1px solid var(--rule); border-radius: var(--radius); padding: 15px 20px; font-size: 17px; }
.features .preview-approve { background: var(--violet); border-color: var(--violet); color: white; min-width: 185px; }
.features .draft-note { font: 12px/1.5 var(--mono); color: var(--muted); margin-top: 10px; }
@media (max-width: 1100px) and (min-width: 701px) { .features .feature-grid { grid-template-columns: repeat(3,1fr); column-gap: 40px; row-gap: 70px; } .features .feature-art { display: none; } .features .feature-grid::after { display: none; } .features .draft { display: grid; grid-template-columns: 150px 185px 1fr; }
 .features .draft-label { grid-column: 1; }
 .features .draft p { grid-column: 2 / -1; padding-left: 8px; }
 .features .preview-button { grid-column: 1; }
 .features .preview-approve { grid-column: 2; } }
@media (max-width: 700px) {
 .features .container { padding-block: 45px; }
 .features h2 { margin-top: 20px; }
 .features .feature-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 40px; padding-bottom: 35px; }
 .features .feature { width: 100%; padding: 23px 0 0; border-top: 1px solid var(--rule); }
 .features .feature-2 { margin: 0; padding: 22px; border-top: 0; }
 .features .feature p { font-size: 18px; }
 .features h3 { font-size: 30px; }
 .features .feature-art,.features .feature-grid::before,.features .feature-grid::after { display: none; }
 .features .draft { display: grid; grid-template-columns: 1fr 1fr; padding: 18px; gap: 14px; }
 .features .draft-label { border: 0; padding: 0; grid-column: 1/-1; }
 .features .draft p { grid-column: 1/-1; padding: 0; font-size: 17px; }
 .features .preview-button { min-width: 0; padding: 12px 8px; font-size: 14px; }
 .features .draft-note { font-size: 10px; }
}

@media (min-width: 701px) and (max-width: 900px) {
 .features .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; margin-top: 80px; }
 .features .feature { padding: 24px 0; }
 .features .feature-2 { margin: 0; padding: 24px; }
}

@media (min-width: 1101px) and (max-width: 1350px) {
 .features .feature-art-1 { --aw: 9vw; }
 .features .feature-art-2 { --aw: 7vw; }
 .features .feature-art-3 { --l: .27; --aw: 10vw; }
 .features .feature-art-4 { --aw: 8vw; }
}

/* === section: how-it-works === */
.how-it-works .container { position: relative; padding-top: 100px; padding-bottom: 75px; }
.how-it-works h2 { position: absolute; top: 105px; left: 0; font-size: var(--display); }
/* The numbers hang from a bar turned 4.5deg. --s is the width of the list, so the second and third number
   can drop by exactly what the bar has dropped above them (.0787 per pixel), at any width. */
.how-it-works .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 45px; margin-left: 23%; position: relative; --s: calc(min(100vw - var(--gutter) * 2, var(--max-width)) * .77); }
.how-it-works .steps::before { content: ''; position: absolute; left: 15%; right: calc(16.67% - 21px); height: 2px; top: 4px; background: var(--ink); transform: rotate(4.5deg); transform-origin: left; }
.how-it-works .step-number { display: flex; align-items: end; justify-content: center; height: 385px; position: relative; padding-bottom: 24px; font-size: 290px; font-weight: 800; line-height: 1; color: var(--violet); text-shadow: 2px 3px 0 #6142b4, 0 7px 12px #2426220c; }
.how-it-works .step-number::before { content: ''; position: absolute; top: 0; height: 120px; width: 1px; background: var(--ink); }
.how-it-works .step-number::after { content: ''; position: absolute; top: 0; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 30% 25%,#888,#181916 70%); }
.how-it-works .step:nth-child(2) .step-number { color: var(--apricot); text-shadow: 2px 3px 0 #ce9169; transform: translateY(calc(var(--s) * .02755)); }
.how-it-works .step:nth-child(3) .step-number { color: var(--forest); text-shadow: 2px 3px 0 #204a37; transform: translateY(calc(var(--s) * .05378 + 1.2px)); }
.how-it-works .step h3 { font-size: 29px; letter-spacing: -.035em; margin: 37px 0 15px; }
.how-it-works .step p { font-size: 22px; line-height: 1.45; }
@media (max-width: 1100px) and (min-width: 701px) { .how-it-works h2 { position: static; } .how-it-works .steps { margin: 45px 0 0; --s: calc(100vw - var(--gutter) * 2); } .how-it-works .step-number { height: 300px; font-size: 210px; } }
@media (max-width: 700px) {
 .how-it-works .container { padding-block: 45px; }
 .how-it-works h2 { position: static; font-size: 46px; }
 .how-it-works .steps { margin: 35px 0 0; display: block; }
 .how-it-works .steps::before { display: none; }
 .how-it-works .step { padding: 0 0 30px 80px; position: relative; min-height: 145px; }
 .how-it-works .step-number { position: absolute; left: 0; top: 0; font-size: 95px; height: 110px; padding: 0; width: 60px; transform: none !important; }
 .how-it-works .step-number::before,.how-it-works .step-number::after { display: none; }
 .how-it-works .step h3 { margin: 0 0 12px; font-size: 25px; }
 .how-it-works .step p { font-size: 18px; }
 .how-it-works .step:last-child { padding-bottom: 0; }
}

/* === section: integrations === */
.integrations { background: var(--lavender); }
.integrations .integrations-inner { display: grid; grid-template-columns: 41% 1fr; gap: 60px; padding-block: 61px 68px; }
.integrations h2 { font-size: 56px; line-height: 1.12; }
.integrations .text-link { display: inline-block; margin-top: 32px; font-size: 21px; }
.integrations .integration-list { display: grid; grid-template-columns: repeat(3,1fr); align-content: center; gap: 52px 24px; }
.integrations li { display: flex; gap: 22px; align-items: center; font-size: 20px; white-space: nowrap; }
.integrations .integration-icon { width: 45px; height: 45px; flex-shrink: 0; display: inline-block; background: var(--violet); }
.integrations .icon-1 { border-radius: 50%; }
.integrations .icon-2 { border-radius: 90% 4px 0 0; background: var(--forest); }
.integrations .icon-3 { background: #b59be6; clip-path: polygon(50% 0,100% 95%,0 95%); border-radius: 6px; }
.integrations .icon-4 { background: var(--apricot); transform: rotate(45deg) scale(.8); border-radius: 4px; }
.integrations .icon-5 { border-radius: 50%; position: relative; margin-right: 12px; }
.integrations .icon-5::after { content: ''; position: absolute; width: 45px; height: 45px; left: 25px; border-radius: 50%; background: #c7b8e7bf; }
.integrations .icon-6 { background: var(--forest); height: 30px; width: 55px; border-radius: 0 0 55px 55px; }
@media (max-width: 1100px) { .integrations .integrations-inner { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
 .integrations .integrations-inner { gap: 35px; padding-block: 42px; }
 .integrations h2 { font-size: 40px; }
 .integrations .text-link { margin-top: 22px; font-size: 18px; }
 .integrations .integration-list { grid-template-columns: 1fr 1fr; gap: 27px 18px; }
 .integrations li { font-size: 16px; gap: 14px; }
 .integrations .integration-icon { width: 29px; height: 29px; }
 .integrations .icon-5::after { width: 29px; height: 29px; left: 16px; }
 .integrations .icon-6 { height: 20px; width: 32px; }
}

/* === section: customers === */
.customers .container { padding-top: 52px; }
.customers h2 { text-align: center; font-size: 60px; }
.customers .customer-names { display: flex; justify-content: space-around; gap: 25px; margin-top: 35px; font-size: 20px; }
@media (max-width: 900px) { .customers .customer-names { display: grid; grid-template-columns: repeat(3,1fr); text-align: center; } }
@media (max-width: 700px) { .customers .container { padding-top: 45px; } .customers h2 { font-size: 38px; } .customers .customer-names { grid-template-columns: 1fr 1fr; font-size: 16px; gap: 20px; margin-top: 28px; } }

/* === section: testimonials === */
.testimonials .testimonials-inner { display: grid; grid-template-columns: 34% 1fr; gap: 50px; padding-top: 76px; padding-bottom: 72px; }
.testimonials .quote-sculpture { font: 900 690px/1 Arial, sans-serif; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 3px var(--violet); position: relative; transform: rotate(-1deg); height: 450px; }
/* The wire comes down to the tip of the first mark, which sits .1914em across and .166em down the letter's box. */
.testimonials .quote-sculpture::before { content: ''; position: absolute; width: 1px; height: calc(62px + .166em); top: -62px; left: .1914em; background: var(--ink); }
.testimonials .quote-sculpture::after { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #777, #161713 70%); left: calc(.1914em - 4px); top: calc(.166em - 4.5px); }
.testimonials .quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 62px; }
.testimonials .testimonial-1 { grid-column: 1/-1; }
.testimonials blockquote { margin: 0; font-size: 27px; line-height: 1.2; letter-spacing: -.035em; }
.testimonials .testimonial-1 blockquote { font-size: 49px; line-height: 1.08; letter-spacing: -.035em; }
.testimonials figcaption { font-size: 17px; margin-top: 20px; line-height: 1.45; }
.testimonials figcaption span { display: block; color: var(--muted); font-size: 16px; }
@media (max-width: 1000px) and (min-width: 701px) { .testimonials .testimonials-inner { grid-template-columns: 23% 1fr; gap: 35px; } .testimonials .quote-sculpture { font-size: 370px; } }
@media (max-width: 700px) {
 .testimonials .testimonials-inner { display: block; padding-block: 42px; }
 .testimonials .quote-sculpture { font-size: 160px; height: 92px; margin-bottom: 20px; -webkit-text-stroke-width: 2px; }
 .testimonials .quote-sculpture::before, .testimonials .quote-sculpture::after { display: none; }
 .testimonials .quotes { display: block; }
 .testimonials .testimonial { margin-top: 32px; }
 .testimonials .testimonial:first-child { margin-top: 0; }
 .testimonials .testimonial-1 blockquote { font-size: 32px; }
 .testimonials blockquote { font-size: 24px; }
 .testimonials figcaption { font-size: 16px; margin-top: 17px; }
 .testimonials figcaption span { font-size: 14px; }
}

@media (min-width: 701px) and (max-width: 900px) {
 .testimonials .testimonials-inner { grid-template-columns: 1fr; gap: 20px; padding-top: 45px; }
 .testimonials .quote-sculpture { font-size: 160px; height: 92px; -webkit-text-stroke-width: 2px; }
 .testimonials .quote-sculpture::before, .testimonials .quote-sculpture::after { display: none; }
 .testimonials .quotes { gap: 40px; }
 .testimonials .testimonial-1 blockquote { font-size: 44px; }
}

/* === section: numbers === */
.numbers .numbers-inner { position: relative; border-top: 1px solid var(--rule); padding-top: 36px; padding-bottom: 65px; }
.numbers .stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 75px; margin-top: 47px; }
.numbers .stat { position: relative; }
.numbers .stat-value { font-size: clamp(90px,9vw,132px); line-height: .95; font-weight: 500; letter-spacing: -.06em; color: var(--violet); margin-bottom: 10px; }
.numbers .stat-2 { padding-top: 25px; }
.numbers .stat-2 .stat-value { color: var(--forest); }
.numbers .stat-4 { padding-top: 25px; text-align: center; }
.numbers .stat-4 .stat-value { color: var(--ink); }
.numbers .stat p:not(.stat-value) { font-size: 20px; line-height: 1.3; }
/* A shape hangs from the rule at the top of the section: its wire is as long as the shape is far from it
   (--t down its own stat, and the stats start 104px under the rule). */
.numbers .stat-art { position: absolute; width: 65px; --t: 30px; top: var(--t); right: -55px; }
.numbers .stat-art::before { content: ''; width: 1px; background: var(--ink); height: calc(var(--t) + 104px); position: absolute; bottom: 100%; left: 50%; }
.numbers .stat-1 .stat-art { --t: 55px; }
.numbers .stat-2 .stat-art { width: 75px; --t: 25px; }
.numbers .stat-3 .stat-art { --t: 47px; right: -60px; }
.numbers .stat-3 .stat-art img { border-radius: 50%; height: 68px; width: 68px; object-fit: cover; }
@media (max-width: 900px) { .numbers .stats { gap: 35px; } .numbers .stat-art { display: none; } .numbers .stat-value { font-size: 90px; } }
@media (max-width: 700px) { .numbers .numbers-inner { padding-block: 30px 40px; } .numbers .stats { grid-template-columns: 1fr 1fr; gap: 35px 22px; margin-top: 30px; } .numbers .stat { padding: 0; text-align: left; } .numbers .stat-value { font-size: 74px; } .numbers .stat p:not(.stat-value) { font-size: 16px; } }

@media (min-width: 701px) and (max-width: 900px) {
 .numbers .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 60px; }
 .numbers .stat { padding-top: 0; text-align: left; }
}
@media (min-width: 901px) and (max-width: 1280px) {
 .numbers .stat-art, .numbers .stat-1 .stat-art, .numbers .stat-2 .stat-art, .numbers .stat-3 .stat-art { width: 48px; right: -62px; --t: 30px; }
 .numbers .stat-3 .stat-art img { width: 48px; height: 48px; }
}

/* === section: pricing === */
.pricing .container { padding-top: 44px; padding-bottom: 39px; }
.pricing .pricing-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 25px; }
.pricing h2 { font-size: var(--display); }
.pricing .billing { display: inline-flex; flex-shrink: 0; border: 1px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.pricing .billing button { border: 0; border-radius: 0; background: transparent; font-size: 20px; padding: 16px 32px; }
.pricing .billing button[aria-pressed="true"] { background: var(--ink); color: white; }
.pricing .billing button:focus-visible { outline-offset: -5px; }
.pricing .billing span { font: 12px var(--mono); color: #6845c0; margin-left: 15px; }
.pricing .billing button[aria-pressed="true"] span { color: #d6c8ff; }
.pricing .plan-list { position: relative; display: flex; flex-direction: column; gap: 24px; margin-top: 52px; }
.pricing .plan { display: grid; grid-template-columns: 290px 1fr 190px; gap: 30px; align-items: center; border: 1px solid var(--rule); border-radius: 7px; padding: 28px 29px 28px 33px; min-height: 203px; margin-left: 7%; margin-right: 4%; }
.pricing .plan-2 { background: var(--lavender); border-color: #cdbfea; margin-left: 3.5%; margin-right: 4.5%; }
.pricing .plan-3 { margin-left: 7.5%; margin-right: 1%; }
.pricing .plan-summary { border-right: 1px solid var(--faint-rule); padding-right: 22px; height: 100%; }
.pricing .plan h3 { font-size: 39px; display: flex; gap: 16px; align-items: center; }
.pricing .popular { background: var(--violet); color: white; border-radius: 4px; padding: 7px 12px; font: 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.pricing .plan-summary > p { font-size: 18px; margin-top: 5px; }
.pricing .plan-price { display: flex; align-items: baseline; gap: 14px; margin-top: 15px; }
.pricing .price { font-size: 56px; line-height: 1; letter-spacing: -.05em; font-weight: 500; }
.pricing .plan-price > span:last-child { font-size: 16px; }
.pricing .billing-note { display: block; font-size: 12px; }
.pricing .plan ul { display: grid; grid-template-rows: repeat(3,auto); grid-auto-flow: column; grid-template-columns: 1fr 1fr; gap: 17px 25px; font-size: 17px; }
.pricing .plan li { position: relative; padding-left: 33px; line-height: 1.3; }
.pricing .plan li::before { content: '✓'; position: absolute; left: 0; top: 0; border: 1.5px solid var(--ink); border-radius: 50%; width: 20px; height: 20px; text-align: center; font-size: 14px; line-height: 17px; }
.pricing .price-art { position: absolute; }
.pricing .price-art::before { content: ''; position: absolute; width: 1px; height: 130px; bottom: 100%; left: 50%; background: var(--ink); }
.pricing .price-art-1 { width: 105px; top: 62px; left: -5px; }
.pricing .price-art-2 { width: 87px; top: 270px; right: -23px; }
.pricing .price-art-2::before { height: 345px; }
.pricing .price-art-3 { width: 128px; top: 512px; left: -12px; }
.pricing .sales-note { text-align: center; margin-top: 35px; font-size: 18px; }
@media (max-width: 1250px) and (min-width: 701px) { .pricing .plan { grid-template-columns: 250px 1fr; } .pricing .plan > .button { grid-column: 2; justify-self: end; } .pricing .plan-summary { grid-row: 1/3; } .pricing .plan h3 { flex-wrap: wrap; } .pricing .plan ul { font-size: 16px; } .pricing .billing button { padding: 14px 20px; } }
@media (max-width: 850px) { .pricing .pricing-heading { flex-direction: column; align-items: flex-start; } }
@media (max-width: 700px) {
 .pricing .container { padding-block: 40px; }
 .pricing h2 { font-size: 44px; }
 .pricing .pricing-heading { margin-top: 20px; gap: 25px; }
 .pricing .billing { width: 100%; }
 .pricing .billing button { padding: 14px 18px; flex: 1; font-size: 18px; }
 .pricing .billing span { font-size: 10px; margin-left: 9px; }
 .pricing .plan-list { margin-top: 30px; gap: 20px; }
 .pricing .plan { display: flex; flex-direction: column; align-items: stretch; margin: 0; padding: 25px 23px; gap: 24px; }
 .pricing .plan-summary { border-right: 0; border-bottom: 1px solid var(--faint-rule); padding: 0 0 24px; }
 .pricing .plan h3 { font-size: 35px; }
 .pricing .popular { font-size: 10px; }
 .pricing .plan-price { margin-top: 20px; }
 .pricing .plan ul { display: flex; flex-direction: column; font-size: 17px; gap: 15px; }
 .pricing .price-art { display: none; }
 .pricing .sales-note { font-size: 16px; }
}

/* Artwork occupies its own grid track and follows each plan's actual height. */
@media (min-width: 701px) and (max-width: 1350px) {
 .pricing .plan-list { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 28px 24px; }
 .pricing .plan { grid-column: 1; margin: 0; padding: 28px; grid-template-columns: minmax(190px, .85fr) minmax(0, 1.2fr); gap: 24px; }
 .pricing .plan-1 { grid-row: 1; }
 .pricing .plan-2 { grid-row: 2; }
 .pricing .plan-3 { grid-row: 3; }
 .pricing .plan-summary { grid-row: 1 / 3; padding-right: 20px; }
 .pricing .plan h3 { flex-wrap: wrap; }
 .pricing .plan > .button { grid-column: 2; justify-self: end; }
 .pricing .plan ul { font-size: 17px; }
 .pricing .price-art { position: relative; grid-column: 2; align-self: center; justify-self: center; inset: auto; width: 80px; }
 .pricing .price-art::before { height: 70px; }
 .pricing .price-art-1 { grid-row: 1; }
 .pricing .price-art-2 { grid-row: 2; width: 68px; }
 .pricing .price-art-3 { grid-row: 3; width: 90px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
 .pricing .plan-list { grid-template-columns: minmax(0, 1fr) 64px; column-gap: 20px; }
 .pricing .plan { padding: 24px; grid-template-columns: minmax(180px, .9fr) minmax(0, 1fr); }
 .pricing .plan ul { display: flex; flex-direction: column; gap: 16px; }
 .pricing .plan > .button { justify-self: stretch; padding-inline: 12px; }
 .pricing .price-art { max-width: 64px; }
}

/* === section: security === */
.security .container { position: relative; padding-top: 48px; padding-bottom: 55px; }
.security h2 { font-size: var(--display); max-width: 720px; margin-top: 28px; }
.security ul { display: grid; grid-template-columns: 1fr 1.25fr 1fr 1.7fr; gap: 55px; margin-top: 65px; }
.security li { position: relative; padding-left: 36px; font-size: 21px; line-height: 1.4; }
.security li::before { content: ''; position: absolute; width: 11px; height: 11px; background: var(--violet); left: 0; top: 9px; }
.security .security-art { position: absolute; right: 1%; top: 57px; width: 36%; height: 200px; border-top: 2px solid var(--ink); transform: rotate(2deg); }
.security .security-art span { position: absolute; width: 170px; top: 75px; left: 8%; }
.security .security-art span::before { content: ''; position: absolute; width: 1px; height: 76px; bottom: 100%; left: 50%; background: var(--ink); }
.security .security-art span:last-child { width: 110px; left: auto; right: 6%; top: 115px; }
.security .security-art span:last-child::before { bottom: 76%; height: calc(116px + 24%); }
@media (max-width: 1100px) { .security h2 { max-width: 65%; font-size: 62px; } .security ul { gap: 30px; } .security .security-art span { width: 120px; } .security .security-art span:last-child { width: 80px; } }
@media (max-width: 700px) {
 .security .container { padding-block: 40px; }
 .security h2 { max-width: 100%; font-size: 44px; margin-top: 23px; }
 .security .security-art { position: relative; right: auto; top: auto; margin: 40px 0 0; width: 100%; height: 230px; }
 .security ul { grid-template-columns: 1fr 1fr; gap: 35px 23px; margin-top: 15px; }
 .security li { padding: 19px 0 0; font-size: 17px; }
 .security li::before { top: 0; width: 9px; height: 9px; }
}

@media (min-width: 701px) and (max-width: 1100px) {
 .security h2 { max-width: 60%; font-size: clamp(46px, 5.5vw, 60px); }
 .security ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 50px; margin-top: 100px; }
 .security li { padding: 0 0 0 28px; }
 .security li::before { top: 8px; }
}

@media (min-width: 1101px) and (max-width: 1350px) {
 .security ul { margin-top: 100px; }
}

/* === section: faq === */
.faq .faq-inner { display: grid; grid-template-columns: 24% 1fr; gap: 28px; padding-block: 32px 45px; }
.faq .faq-intro { border-right: 1px solid var(--faint-rule); padding-right: 25px; }
.faq h2 { font-size: 76px; margin-top: 22px; line-height: 1.05; }
.faq .faq-art { width: 96px; display: block; margin: 145px 0 0 12px; position: relative; }
.faq .faq-art::before { content: ''; position: absolute; width: 1px; height: 122px; bottom: 100%; left: 50%; background: var(--ink); }
.faq details { padding: 16px 24px 19px; border-bottom: 1px solid var(--rule); }
.faq details:first-child { padding-top: 6px; }
.faq details:last-child { border-bottom: 0; }
.faq summary { display: flex; align-items: start; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; font-size: 28px; font-weight: 500; letter-spacing: -.035em; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq .faq-indicator { width: 16px; height: 20px; flex: 0 0 16px; position: relative; margin-top: 6px; }
.faq .faq-indicator::before { content: ''; width: 16px; height: 1.5px; background: var(--ink); position: absolute; top: 7px; }
.faq .faq-indicator::after { content: ''; width: 1.5px; height: 16px; background: var(--ink); position: absolute; left: 7px; }
.faq details[open] .faq-indicator::after { display: none; }
.faq details p { font-size: 21px; line-height: 1.4; margin-top: 7px; }
@media (max-width: 1100px) and (min-width: 701px) { .faq h2 { font-size: 56px; } }
@media (max-width: 700px) {
 .faq .faq-inner { display: block; padding-block: 40px; }
 .faq .faq-intro { border: 0; padding: 0; }
 .faq h2 { font-size: 44px; max-width: 280px; }
 .faq .faq-art { display: none; }
 .faq .faq-list { margin-top: 30px; }
 .faq details,.faq details:first-child { padding: 20px 0; }
 .faq summary { font-size: 23px; }
 .faq details p { font-size: 17px; margin-top: 14px; }
}

@media (min-width: 901px) and (max-width: 1350px) {
 .faq .faq-inner { grid-template-columns: minmax(260px, 30%) minmax(0, 1fr); }
 .faq h2 { font-size: clamp(52px, 5.15vw, 70px); }
}
@media (min-width: 701px) and (max-width: 900px) {
 .faq .faq-inner { grid-template-columns: 1fr; gap: 40px; padding-block: 40px; }
 .faq .faq-intro { position: relative; border: 0; padding-right: 140px; }
 .faq h2 { font-size: 56px; max-width: 460px; }
 .faq .faq-art { position: absolute; width: 76px; right: 20px; top: 65px; margin: 0; }
 .faq .faq-art::before { height: 60px; }
 .faq details { padding-inline: 0; }
}

/* === section: cta === */
.cta { overflow-x: clip; }
.cta .container { position: relative; padding-top: 85px; padding-bottom: 95px; }
.cta .cta-copy { position: relative; z-index: 1; max-width: 62%; }
.cta h2 { font-size: var(--display); margin-top: 55px; line-height: 1.08; }
.cta .cta-dek { font-size: 28px; max-width: 690px; line-height: 1.35; margin-top: 30px; }
.cta .actions { margin-top: 35px; max-width: 500px; }
.cta .cta-art { position: absolute; width: 48%; height: 460px; right: 0; top: 0; }
.cta .cta-art .rod-one { top: 30%; left: 29%; width: 53%; }
.cta .cta-art .rod-two { left: 82%; top: 52%; width: 18%; transform: rotate(12deg); }
.cta .cta-art .form-violet { top: 50%; left: 9%; width: 38%; --wire: 240px; }
.cta .cta-art .form-violet img { transform: rotate(-35deg); }
.cta .cta-art .form-violet::before { bottom: 80%; }
.cta .cta-art .form-forest { top: 81%; left: 45%; width: 25%; --wire: 200px; }
.cta .cta-art .form-apricot { top: 65%; left: 75%; width: 14%; --wire: 110px; }
.cta .cta-art .form-lavender { top: 63%; left: 95%; width: 11%; --wire: 290px; }
.cta .cta-art .form-lavender::before { bottom: 76%; }
@media (max-width: 1100px) and (min-width: 701px) { .cta .cta-copy { max-width: 68%; } .cta h2 { font-size: 64px; } .cta .cta-art { width: 40%; } }
@media (max-width: 700px) {
 .cta .container { padding-block: 35px 42px; }
 .cta .cta-copy { max-width: 100%; }
 .cta h2 { font-size: 46px; margin-top: 27px; }
 .cta .cta-dek { font-size: 20px; margin-top: 24px; }
 .cta .actions { margin-top: 27px; }
 .cta .cta-art { position: relative; width: 90%; height: 255px; top: auto; margin-top: 25px; }
 .cta .cta-art .form-violet { top: 34%; --wire: 35px; }
 .cta .cta-art .form-forest { top: 63%; --wire: 70px; }
 .cta .cta-art .form-apricot { top: 63%; --wire: 49px; }
 .cta .cta-art .form-lavender { top: 55%; --wire: 38px; }
}

@media (min-width: 701px) and (max-width: 1350px) {
 .cta .cta-copy { max-width: 60%; }
 .cta h2 { font-size: clamp(54px, 5.7vw, 74px); }
 .cta .cta-art { width: 34%; }
 .cta .cta-dek { font-size: 26px; }
}
/* Beside the words the mobile keeps one shape at every width (its height follows its width), and every wire is
   measured in the shape's own height, so the joints hold: the first rod starts on the violet wire and ends on the
   apricot one, the forest wire stops at that rod, the second rod runs from the apricot wire to the lavender one. */
@media (min-width: 901px) {
 .cta .cta-art { height: auto; aspect-ratio: 649 / 460; max-width: 680px; }
 .cta .cta-art .rod::after { right: -4.5px; }
 .cta .cta-art .rod-one { left: calc(28% - 4px); width: calc(54.53% + 4px); }
 .cta .cta-art .rod-two { left: calc(82% - 4px); width: calc(18.91% + 4px); }
 .cta .cta-art .hanging { transform-origin: 50% calc(2% - var(--wire)); }
 .cta .cta-art .form-violet { --wire: 83.8%; transform-origin: 50% calc(20% - var(--wire)); }
 .cta .cta-art .form-forest { --wire: 230.5%; }
 .cta .cta-art .form-forest::after { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #777, #161713 70%); left: calc(50% - 4px); bottom: calc(98% + var(--wire) - 4.5px); }
 .cta .cta-art .form-apricot { --wire: 126.1%; }
 .cta .cta-art .form-lavender { --wire: 359%; transform-origin: 50% calc(24% - var(--wire)); }
}
@media (min-width: 451px) and (max-width: 900px) {
 .cta .cta-copy { max-width: 100%; }
 .cta .cta-art { position: relative; width: 90%; max-width: 460px; height: 340px; top: auto; margin: 35px 28px 0 auto; }
 .cta .cta-art .form-violet { top: 34%; --wire: 65px; }
 .cta .cta-art .form-forest { top: 63%; --wire: 100px; }
 .cta .cta-art .form-apricot { top: 63%; --wire: 79px; }
 .cta .cta-art .form-lavender { top: 55%; --wire: 68px; }
}

/* === section: footer === */
.footer .footer-main { display: grid; grid-template-columns: 1.35fr 1fr 1fr .9fr; gap: 90px; padding-block: 50px; }
.footer .wordmark { font-size: 49px; }
.footer .footer-about p { font-size: 20px; line-height: 1.45; margin-top: 28px; }
.footer .footer-about > a:last-child { display: inline-block; margin-top: 23px; }
.footer nav h2 { font: 12px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 23px; }
.footer nav a { display: block; font-size: 20px; margin-top: 9px; }
.footer a:hover { color: var(--violet); }
.footer .footer-legal { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--rule); padding-block: 18px 35px; font-size: 15px; }
.footer .footer-legal div { display: flex; gap: 15px; }
@media (max-width: 1100px) { .footer .footer-main { gap: 40px; } }
@media (max-width: 700px) {
 .footer .footer-main { grid-template-columns: 1fr 1fr; gap: 38px 25px; padding-block: 40px; }
 .footer .footer-about { grid-column: 1/-1; max-width: 290px; }
 .footer .wordmark { font-size: 40px; }
 .footer .footer-about p { margin-top: 20px; font-size: 18px; }
 .footer .footer-about > a:last-child { font-size: 18px; margin-top: 18px; }
 .footer nav a { font-size: 18px; }
 .footer nav h2 { margin-bottom: 17px; }
 .footer .footer-legal { align-items: flex-start; flex-direction: column; gap: 15px; font-size: 14px; }
}

@media (min-width: 701px) and (max-width: 900px) {
 .footer .footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
 .footer .footer-about { grid-column: 1 / -1; max-width: 420px; }
}