:root {
     --ink: #172b29;
     --minty2:#81dbaa;
     --forest: #102d2b;
     --forest2: #1d4841;
     --mint: #c8f36a;
     --mintsoft: #e9f6d6;
     --paper: #f7f8f4;
     --white: #fff;
     --muted: #68766f;
     --line: #dfe6dc;
     --display: Manrope, "DM Sans", Arial, sans-serif;
     --sans: "DM Sans", Arial, sans-serif;
     --container: 1160px
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     margin: 0;
     background: var(--paper);
     color: var(--ink);
     font: 15px/1.65 var(--sans);
     -webkit-font-smoothing: antialiased
 }

 a {
     color: inherit;
     text-decoration: none
 }

 button,
 input,
 select,
 textarea {
     font: inherit
 }

 a:focus-visible,
 button:focus-visible,
 input:focus-visible,
 select:focus-visible,
 textarea:focus-visible {
     outline: 3px solid #9ecb63;
     outline-offset: 3px
 }

 .container {
     width: min(var(--container), calc(100% - 48px));
     margin: auto
 }

 .section {
     padding: 100px 0
 }

 .announcement {
     min-height: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     padding: 7px 15px;
     background: var(--forest);
     color: #e8f3e5;
     text-align: center;
     text-transform: uppercase;
     font-size: 9px;
     letter-spacing: .09em
 }

 .announcement i,
 .eyebrow i {
     width: 21px;
     height: 2px;
     background: #a4c960;
     display: inline-block;
     flex: none
 }

 .announcement i {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     box-shadow: 0 0 0 4px #c8f36a1c
 }

 .site-header {
     position: relative;
     z-index: 10;
     border-bottom: 1px solid #e7ece4;
     background: #f9faf6
 }

 .nav-wrap {
     min-height: 82px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 25px
 }

 .brand {
     display: inline-flex;
     align-items: center;
     gap: 11px;
     flex-shrink: 0;
     font: 800 20px/1 var(--display);
     letter-spacing: -.07em
 }

 .brand-muted {
     color: #7d8880;
     font-weight: 500
 }

 .brand-mark {
     width: 28px;
     height: 28px;
     display: flex;
     align-items: end;
     justify-content: center;
     gap: 3px;
     padding: 5px 4px;
     border-radius: 8px 8px 8px 3px;
     background: var(--mint);
     transform: rotate(-4deg)
 }

 .brand-mark b {
     width: 4px;
     border-radius: 3px;
     background: var(--forest);
     transform: skew(-12deg)
 }

 .brand-mark b:nth-child(1) {
     height: 9px
 }

 .brand-mark b:nth-child(2) {
     height: 15px
 }

 .brand-mark b:nth-child(3) {
     height: 11px
 }

 .nav-links {
     display: flex;
     align-items: center;
     gap: 29px
 }

 .nav-links>a:not(.nav-cta) {
     position: relative;
     padding: 8px 0;
     color: #596760;
     font-size: 12px;
     font-weight: 600
 }

 .nav-links>a:not(.nav-cta):hover,
 .nav-links>a.active {
     color: var(--forest)
 }

 .nav-links>a.active:after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: #9dc34d
 }

 .nav-cta {
     display: inline-flex;
     align-items: center;
     gap: 14px;
     padding: 12px 15px;
     border-radius: 4px;
     background: var(--forest);
     color: white;
     font-size: 11px;
     font-weight: 700
 }

 .nav-cta span {
     color: var(--mint);
     font-size: 15px
 }

 .menu-toggle {
     display: none
 }

 .hero {
     padding: 83px 0 88px;
     overflow: hidden;
     background: radial-gradient(ellipse at 79% 45%, #e4eedb 0, transparent 38%), var(--paper)
 }

 .hero-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     gap: 40px
 }

 .eyebrow {
     display: flex;
     align-items: center;
     gap: 10px;
     color: #69766f;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: .14em;
     line-height: 1.5;
     text-transform: uppercase
 }

 .hero h1,
 .page-hero h1 {
     margin: 24px 0 22px;
     font: 700 clamp(48px, 5.2vw, 72px)/1.06 var(--display);
     letter-spacing: -.075em
 }

 .hero h1 em,
 .page-hero h1 em,
 h2 em {
     font: 400 1em/1 var(--serif, Georgia, serif);
     color: #64834d;
     letter-spacing: -.065em
 }

 .lead {
     max-width: 495px;
     margin: 0;
     color: #68766f;
     font-size: 15px;
     line-height: 1.85
 }

 .actions {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 26px;
     margin-top: 30px
 }

 .button {
     min-height: 49px;
     padding: 13px 19px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
     border: 0;
     border-radius: 4px;
     font-size: 12px;
     font-weight: 700;
     cursor: pointer;
     transition: transform .2s, background .2s
 }

 .button span {
     font-size: 16px
 }

 .dark {
     background: var(--forest);
     color: white
 }

 .dark:hover {
     background: #24504a;
     transform: translateY(-1px)
 }

 .light-button {
     background: var(--mint);
     color: var(--forest)
 }

 .light-button:hover {
     background: #d8fa8e;
     transform: translateY(-1px)
 }

 .text-link {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 12px;
     font-weight: 700
 }

 .text-link span {
     color: #64834d;
     font-size: 17px
 }

 .hero-note {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-top: 40px;
     color: #78837c;
     font-size: 11px
 }

 .mini-badges {
     display: flex;
     padding-left: 3px
 }

 .mini-badges b {
     display: grid;
     place-items: center;
     width: 24px;
     height: 24px;
     margin-left: -3px;
     border: 2px solid var(--paper);
     border-radius: 50%;
     background: #d8e7c7;
     font-size: 9px
 }

 .mini-badges b:nth-child(2) {
     background: #d7e5df
 }

 .mini-badges b:nth-child(3) {
     background: var(--mint)
 }

 .hero-art {
     position: relative;
     min-height: 420px;
     display: grid;
     place-items: center;
     isolation: isolate
 }

 .hero-art:before {
     position: absolute;
     content: "";
     z-index: -2;
     width: 355px;
     height: 355px;
     border-radius: 50%;
     background: #e6efdc
 }

 .orbit {
     position: absolute;
     z-index: -1;
     border: 1px solid #bdcfb6;
     border-radius: 50%;
     transform: rotate(-24deg)
 }

 .orbit-a {
     width: 465px;
     height: 238px
 }

 .orbit-b {
     width: 420px;
     height: 325px;
     transform: rotate(40deg);
     border-color: #d0dbc9
 }

 .domain-window {
     position: relative;
     width: min(410px, 84%);
     overflow: hidden;
     border: 1px solid #ffffffb5;
     border-radius: 9px;
     background: white;
     box-shadow: 0 28px 70px #1b40351f, 0 5px 15px #1b403510;
     transform: rotate(-2deg)
 }

 .window-bar {
     height: 39px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 14px;
     border-bottom: 1px solid #eef1eb;
     color: #a2aca4;
     font-size: 7px;
     font-weight: 700;
     letter-spacing: .13em
 }

 .window-content {
     padding: 31px 34px 23px
 }

 .symbol {
     display: flex;
     align-items: end;
     gap: 4px;
     height: 23px;
     margin-bottom: 22px
 }

 .symbol b {
     width: 7px;
     border-radius: 4px;
     background: #b6d975;
     transform: skew(-10deg)
 }

 .symbol b:nth-child(1) {
     height: 11px
 }

 .symbol b:nth-child(2) {
     height: 21px;
     background: var(--forest)
 }

 .symbol b:nth-child(3) {
     height: 15px
 }

 .window-content small {
     color: #89948c;
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .16em
 }

 .brand-visual {
     font: 800 clamp(36px, 4vw, 51px)/1.2 var(--display);
     letter-spacing: -.08em;
     white-space: nowrap
 }

 .brand-visual span {
     color: #719350
 }

 .brand-visual>b {
     color: #b7d76d
 }

 .visual-rule {
     height: 5px;
     margin-top: 17px;
     border-radius: 5px;
     background: linear-gradient(90deg, var(--forest) 0 35%, #dce8d4 35%)
 }

 .visual-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 19px;
     color: #87928b;
     font-size: 9px
 }

 .visual-bottom span {
     display: grid;
     place-items: center;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background: var(--mint);
     color: var(--forest);
     font-size: 16px
 }

 .float-chip {
     position: absolute;
     z-index: 2;
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 14px;
     border: 1px solid #e9eee6;
     border-radius: 5px;
     background: white;
     box-shadow: 0 12px 30px #233d3210
 }

 .chip-one {
     top: 49px;
     right: -4px
 }

 .chip-two {
     bottom: 42px;
     left: -4px
 }

 .float-chip>i {
     display: grid;
     place-items: center;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background: var(--mintsoft);
     color: #557742;
     font-style: normal
 }

 .chip-two>i {
     background: var(--forest);
     color: var(--mint)
 }

 .float-chip b,
 .float-chip small {
     display: block
 }

 .float-chip b {
     font-size: 10px;
     line-height: 1.5
 }

 .float-chip small {
     margin-top: 2px;
     color: #89928c;
     font-size: 9px
 }

 .art-caption {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     display: flex;
     justify-content: space-between;
     color: #8b968b;
     font-size: 8px;
     font-weight: 700;
     letter-spacing: .14em
 }

 .trust-strip {
     border-top: 1px solid #e3e9df;
     border-bottom: 1px solid #e3e9df;
     background: #fbfcf8
 }

 .trust-inner {
     min-height: 80px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px
 }

 .trust-inner span {
     color: #52615a;
     font-size: 11px;
     font-weight: 600
 }

 .trust-inner .muted {
     color: #87918a;
     font-size: 10px;
     font-weight: 400
 }

 .section-head {
     margin-bottom: 40px
 }

 .split {
     display: flex;
     align-items: end;
     justify-content: space-between;
     gap: 35px
 }

 .section h2,
 .process-grid h2,
 .seller-panel h2,
 .story-grid h2,
 .contact-grid h2,
 .bottom-cta h2 {
     margin: 16px 0 0;
     font: 700 clamp(35px, 4vw, 48px)/1.15 var(--display);
     letter-spacing: -.07em
 }

 .head-side {
     max-width: 340px;
     padding-bottom: 5px
 }

 .head-side p {
     margin: 0 0 15px;
     color: var(--muted);
     font-size: 13px;
     line-height: 1.8
 }

 .domain-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 17px
 }

 .domain-card {
     min-width: 0;
     padding: 17px;
     border: 1px solid #e5e9e1;
     border-radius: 6px;
     background: white;
     transition: transform .2s, box-shadow .2s, border-color .2s
 }

 .domain-card:hover {
     transform: translateY(-3px);
     border-color: #cbd8c2;
     box-shadow: 0 16px 34px #183c2c0c
 }

 .card-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px
 }

 .card-top span {
     max-width: calc(100% - 20px);
     overflow: hidden;
     padding: 5px 8px;
     border-radius: 3px;
     background: #f0f5e9;
     color: #667a58;
     font-size: 9px;
     font-weight: 700;
     white-space: nowrap;
     text-overflow: ellipsis
 }

 .card-top b {
     color: #8a9a86;
     font-size: 16px
 }

 .domain-art {
     position: relative;
     height: 177px;
     display: grid;
     place-items: center;
     overflow: hidden;
     margin: 16px 0;
     border-radius: 4px;
     background: #edf2e8
 }

 .robot-art {
     background: radial-gradient(circle at 50% 40%, #e1efce, #d2e1c7)
 }

 .robot {
     position: relative;
     width: 94px;
     height: 76px;
     margin-top: -15px;
     border: 2px solid #244841;
     border-radius: 21px 21px 27px 27px;
     background: #f7faf2;
     box-shadow: inset 0 -8px #d8e7ce;
     transform: rotate(-7deg)
 }

 .robot:before,
 .robot:after {
     position: absolute;
     content: "";
     top: 25px;
     width: 8px;
     height: 16px;
     border-radius: 4px;
     background: #b4d76b
 }

 .robot:before {
     left: -8px
 }

 .robot:after {
     right: -8px
 }

 .robot i {
     position: absolute;
     top: 26px;
     left: 21px;
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: #1d4740;
     box-shadow: 31px 0 #1d4740
 }

 .robot b {
     position: absolute;
     bottom: 15px;
     left: 31px;
     width: 21px;
     height: 3px;
     border-radius: 3px;
     background: #9cbe61
 }

 .robot span {
     position: absolute;
     top: -12px;
     left: 44px;
     width: 3px;
     height: 12px;
     background: #254941
 }

 .art-base {
     position: absolute;
     bottom: 27px;
     width: 138px;
     height: 8px;
     border-radius: 50%;
     background: #b5c9a9
 }

 .machine-art {
     background: #e9eee7
 }

 .machine {
     position: absolute;
     border: 2px solid #264c43;
     background: #c2d4b2;
     transform: skewY(-13deg)
 }

 .m-one {
     width: 88px;
     height: 67px;
     left: 26%;
     top: 36px;
     border-radius: 6px;
     box-shadow: 10px 10px #a7bea0
 }

 .m-two {
     width: 58px;
     height: 48px;
     right: 18%;
     bottom: 39px;
     background: #eff4e8;
     border-radius: 5px
 }

 .wheel {
     position: absolute;
     bottom: 31px;
     left: 35%;
     width: 36px;
     height: 36px;
     border: 7px solid #244941;
     border-radius: 50%;
     background: #b8d67a
 }

 .web-art {
     background: #e7ece8
 }

 .browser-art {
     position: relative;
     z-index: 2;
     width: 155px;
     height: 105px;
     padding: 11px;
     border: 2px solid #244941;
     border-radius: 7px;
     background: #f7f9f2;
     transform: rotate(5deg);
     box-shadow: 9px 9px #c5d5bd
 }

 .browser-art i {
     display: inline-block;
     width: 5px;
     height: 5px;
     margin-right: 4px;
     border-radius: 50%;
     background: #a9c878
 }

 .browser-art b {
     display: grid;
     place-items: center;
     height: 60px;
     color: #244941;
     font: 800 31px var(--display);
     letter-spacing: -.08em
 }

 .web-orb {
     position: absolute;
     width: 140px;
     height: 140px;
     right: -20px;
     bottom: -68px;
     border: 1px solid #a9c0a0;
     border-radius: 50%
 }

 .domain-card h3 {
     margin: 0 0 6px;
     font: 800 17px/1.35 var(--display);
     letter-spacing: -.045em
 }

 .domain-card>p {
     min-height: 39px;
     margin: 0;
     color: #7a8580;
     font-size: 11px;
     line-height: 1.7
 }

 .card-link {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     margin-top: 17px;
     padding-top: 13px;
     border-top: 1px solid #edf0e9;
     color: #5b7748;
     font-size: 10px;
     font-weight: 700
 }

 .card-link span {
     font-size: 15px
 }

 .note {
     margin: 20px 0 0;
     color: #8a948e;
     font-size: 10px;
     line-height: 1.7
 }

 .process-section {
     position: relative;
     overflow: hidden;
     padding: 100px 0;
     background: var(--forest);
     color: white
 }

 .process-section:before {
     position: absolute;
     content: "";
     top: -250px;
     right: -180px;
     width: 570px;
     height: 570px;
     border: 1px solid #ffffff13;
     border-radius: 50%;
     box-shadow: 0 0 0 55px #ffffff06, 0 0 0 110px #ffffff04
 }

 .process-grid {
     position: relative;
     display: grid;
     grid-template-columns: .9fr 1.1fr;
     gap: 80px;
     align-items: center
 }

 .eyebrow.light {
     color: #b4c8b7
 }

 .eyebrow.light i {
     background: var(--mint)
 }

 .process-grid h2 {
     margin-top: 20px;
     color: white;
     font-size: clamp(37px, 4vw, 50px)
 }

 .process-grid h2 em {
     color: var(--mint)
 }

 .light-copy {
     max-width: 360px;
     margin: 20px 0 28px;
     color: #b9c9c1;
     font-size: 13px;
     line-height: 1.85
 }

 .steps {
     border-top: 1px solid #ffffff26
 }

 .steps article {
     display: grid;
     grid-template-columns: 35px 1fr 28px;
     gap: 15px;
     padding: 24px 0;
     border-bottom: 1px solid #ffffff26
 }

 .steps article>span {
     padding-top: 3px;
     color: var(--mint);
     font-size: 10px;
     font-weight: 700
 }

 .steps h3 {
     margin: 0 0 7px;
     font: 700 16px var(--display)
 }

 .steps p {
     max-width: 390px;
     margin: 0;
     color: #b9c9c1;
     font-size: 11px;
     line-height: 1.8
 }

 .steps article>b {
     display: grid;
     place-items: center;
     width: 28px;
     height: 28px;
     border: 1px solid #ffffff36;
     border-radius: 50%;
     color: var(--mint)
 }

 .seller-section {
     padding-top: 76px;
     padding-bottom: 76px
 }

 .seller-panel {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 35px;
     overflow: hidden;
     padding: 46px 50px;
     border: 1px solid #e0e8da;
     border-radius: 7px;
     background: #eff4e9
 }

 .seller-panel>div:nth-child(2) {
     position: relative;
     z-index: 1
 }

 .seller-panel h2 {
     font-size: 37px
 }

 .seller-panel p {
     max-width: 530px;
     margin: 14px 0 0;
     color: #6f7b73;
     font-size: 12px;
     line-height: 1.85
 }

 .seller-panel>.button {
     position: relative;
     z-index: 1;
     flex-shrink: 0
 }

 .seller-orb {
     position: absolute;
     top: -66px;
     right: 24%;
     display: grid;
     place-items: center;
     width: 230px;
     height: 230px;
     border: 1px solid #d3e0ca;
     border-radius: 50%;
     color: #d0dfc4;
     font: 800 48px var(--display);
     letter-spacing: -.1em;
     transform: rotate(-12deg)
 }

 .seller-orb span {
     position: absolute;
     right: 29px;
     bottom: 47px;
     color: #a3c76a;
     font-size: 24px
 }

 .site-footer {
     padding-top: 56px;
     background: #102723;
     color: white
 }

 .footer-main {
     display: grid;
     grid-template-columns: 1.5fr .7fr .7fr;
     gap: 60px;
     padding-bottom: 45px
 }

 .brand-footer {
     color: white
 }

 .brand-footer .brand-muted {
     color: #aebeb4
 }

 .footer-brand>p {
     max-width: 290px;
     margin: 19px 0 0;
     color: #9eafa5;
     font-size: 11px;
     line-height: 1.9
 }

 .footer-links {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 12px
 }

 .footer-links>b {
     margin-bottom: 3px;
     color: #d7e3d8;
     font-size: 10px;
     letter-spacing: .1em;
     text-transform: uppercase
 }

 .footer-links a,
 .footer-links small {
     color: #9eafa5;
     font-size: 11px
 }

 .footer-links small {
     margin-top: 4px;
     color: #71867b;
     font-size: 9px
 }

 .footer-links a:hover {
     color: var(--mint)
 }

 .footer-bottom {
     min-height: 56px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     border-top: 1px solid #ffffff1c;
     color: #71867b;
     font-size: 9px
 }

 .page-hero {
     position: relative;
     min-height: 350px;
     display: flex;
     align-items: center;
     overflow: hidden;
     padding: 72px 0;
     background: radial-gradient(ellipse at 85% 40%, #e3ecd9 0, transparent 37%), var(--paper)
 }

 .page-hero .container {
     position: relative;
     z-index: 2
 }

 .page-hero h1 {
     font-size: clamp(46px, 5.3vw, 66px);
     margin: 22px 0 16px
 }

 .page-hero p {
     max-width: 575px;
     margin: 0;
     color: #6d7972;
     font-size: 14px;
     line-height: 1.85
 }

 .page-decoration {
     position: absolute;
     top: 50%;
     right: max(calc((100vw - var(--container))/2), 30px);
     width: 275px;
     height: 275px;
     border: 1px solid #d0ddc8;
     border-radius: 50%;
     transform: translateY(-50%)
 }

 .page-decoration:before,
 .page-decoration:after {
     position: absolute;
     content: "";
     inset: 24px;
     border: 1px solid #d0ddc8;
     border-radius: 50%
 }

 .page-decoration:after {
     inset: 49px
 }

 .page-decoration span {
     position: absolute;
     top: 50%;
     left: 50%;
     z-index: 2;
     color: var(--forest);
     font: 800 49px var(--display);
     letter-spacing: -.1em;
     transform: translate(-50%, -50%) rotate(-8deg)
 }

 .page-decoration:before {
     box-shadow: 0 0 0 1px transparent
 }

 .page-decoration.envelope span {
     display: grid;
     place-items: center;
     width: 95px;
     height: 95px;
     border-radius: 25px 25px 25px 6px;
     background: var(--mint);
     font: 400 46px var(--sans);
     letter-spacing: 0;
     transform: translate(-50%, -50%) rotate(-7deg)
 }

 .explore-section {
     padding-top: 68px
 }

 .explore-toolbar {
     display: flex;
     align-items: end;
     justify-content: space-between;
     gap: 25px
 }

 .explore-toolbar p {
     margin: 8px 0 0;
     color: #7b8780;
     font-size: 11px
 }

 .explore-toolbar p b {
     color: var(--forest)
 }

 .search {
     display: flex;
     align-items: center;
     gap: 9px;
     width: min(310px, 100%);
     padding: 0 13px;
     border: 1px solid #dce4d8;
     border-radius: 4px;
     background: white;
     color: #819080
 }

 .search>span {
     font-size: 22px
 }

 .search input {
     width: 100%;
     min-height: 44px;
     border: 0;
     outline: 0;
     background: transparent;
     font-size: 11px
 }

 .filters {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin: 25px 0
 }

 .filters button {
     padding: 9px 14px;
     border: 1px solid #dfe6dc;
     border-radius: 3px;
     background: white;
     color: #68766e;
     font-size: 10px;
     font-weight: 700;
     cursor: pointer
 }

 .filters button:hover,
 .filters button.active {
     border-color: var(--forest);
     background: var(--forest);
     color: white
 }

 .explore-grid {
     row-gap: 20px
 }

 .explore-grid .domain-art {
     height: 190px
 }

 .domain-card[hidden] {
     display: none !important
 }

 .empty-state {
     padding: 60px 20px;
     text-align: center
 }

 .empty-state h3 {
     font: 700 24px var(--display)
 }

 .empty-state p {
     color: var(--muted);
     font-size: 12px
 }

 .availability-banner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 30px;
     margin-top: 58px;
     padding: 35px 38px;
     border: 1px solid #e2e9dd;
     border-radius: 6px;
     background: #eff4e9
 }

 .availability-banner h2 {
     margin: 11px 0 8px;
     font: 700 29px var(--display);
     letter-spacing: -.06em
 }

 .availability-banner p {
     max-width: 570px;
     margin: 0;
     color: #778179;
     font-size: 11px;
     line-height: 1.8
 }

 .availability-banner .button {
     flex-shrink: 0
 }

 .story-section {
     background: white
 }

 .story-grid {
     display: grid;
     grid-template-columns: .9fr 1.1fr;
     gap: 90px
 }

 .story-grid h2 {
     font-size: 41px
 }

 .story-grid p {
     color: #6d7972;
     font-size: 13px;
     line-height: 1.9
 }

 .story-grid .story-lead {
     margin-top: 0;
     color: #354a42;
     font: 600 20px/1.6 var(--display);
     letter-spacing: -.035em
 }

 .values-section {
     background: #f1f4ed
 }

 .values-section h2 {
     margin-bottom: 35px
 }

 .values-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px
 }

 .values-grid article {
     position: relative;
     min-height: 220px;
     padding: 25px;
     border: 1px solid #e0e7db;
     border-radius: 5px;
     background: #fbfcf8
 }

 .values-grid article>span {
     position: absolute;
     top: 24px;
     right: 24px;
     color: #a0ad9d;
     font-size: 10px;
     font-weight: 700
 }

 .value-icon {
     display: grid;
     place-items: center;
     width: 39px;
     height: 39px;
     border-radius: 5px;
     background: var(--mint);
     color: var(--forest);
     font-size: 20px
 }

 .values-grid h3 {
     margin: 20px 0 8px;
     font: 700 17px var(--display)
 }

 .values-grid p {
     margin: 0;
     color: #78847b;
     font-size: 11px;
     line-height: 1.8
 }

 .disclaimer-section {
     padding-top: 60px;
     padding-bottom: 55px
 }

 .disclaimer {
     display: flex;
     gap: 18px;
     padding: 25px;
     border: 1px solid #e2e8de;
     border-radius: 5px;
     background: white
 }

 .disclaimer>b {
     display: grid;
     place-items: center;
     width: 29px;
     height: 29px;
     flex: 0 0 29px;
     border-radius: 50%;
     background: var(--mintsoft);
     color: #5b7a46;
     font: italic 18px Georgia
 }

 .disclaimer h3 {
     margin: 0 0 6px;
     font: 700 15px var(--display)
 }

 .disclaimer p {
     margin: 0;
     color: #78847c;
     font-size: 11px;
     line-height: 1.85
 }

 .bottom-cta {
     padding-top: 20px;
     padding-bottom: 85px;
     display: flex;
     align-items: center
 }

 .bottom-cta .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 25px
 }

 .bottom-cta h2 {
     font-size: 35px;
     margin-top: 10px
 }

 .contact-section {
     padding-top: 70px
 }

 .contact-grid {
     display: grid;
     grid-template-columns: .75fr 1.25fr;
     gap: 68px;
     align-items: start
 }

 .contact-grid aside {
     padding-top: 12px
 }

 .contact-grid h2 {
     font-size: 37px
 }

 .contact-grid aside>p {
     margin: 17px 0 27px;
     color: #77837b;
     font-size: 12px;
     line-height: 1.9
 }

 .contact-point {
     display: flex;
     gap: 13px;
     padding: 17px 0;
     border-top: 1px solid #e1e7dd
 }

 .contact-point>b {
     display: grid;
     place-items: center;
     width: 31px;
     height: 31px;
     flex: 0 0 31px;
     border-radius: 4px;
     background: var(--mintsoft);
     color: #5c7b49;
     font-size: 16px
 }

 .contact-point strong {
     font: 700 12px var(--display)
 }

 .contact-point p {
     margin: 4px 0 0;
     color: #7a857d;
     font-size: 10px;
     line-height: 1.8
 }

 .smallprint {
     margin-top: 17px;
     padding: 13px 14px;
     border-left: 2px solid #b4d47b;
     background: #f0f4ea;
     color: #78837a;
     font-size: 10px;
     line-height: 1.8
 }

 .form-panel {
     padding: 28px 31px 25px;
     border: 1px solid #e2e8de;
     border-radius: 6px;
     background: white;
     box-shadow: 0 15px 40px #233d3206
 }

 .form-head {
     display: flex;
     justify-content: space-between;
     padding-bottom: 17px;
     border-bottom: 1px solid #e8ede5;
     color: #5d6b63;
     font-size: 9px;
     font-weight: 700;
     letter-spacing: .12em
 }

 .form-head span {
     color: #a3afa3
 }

 .form-panel form {
     padding-top: 18px
 }

 .form-panel label:not(.consent) {
     display: block;
     margin: 0 0 7px;
     color: #33483f;
     font-size: 11px;
     font-weight: 700
 }

 .form-panel label em {
     color: #7c9e50;
     font-style: normal
 }

 .form-panel label small {
     color: #a0aaa1;
     font-size: 10px;
     font-weight: 500
 }

 .form-panel input:not([type=checkbox]),
 .form-panel textarea,
 .form-panel select {
     width: 100%;
     min-height: 43px;
     margin-bottom: 16px;
     padding: 10px 12px;
     border: 1px solid #dfe6dc;
     border-radius: 3px;
     outline: none;
     background: #fbfcf9;
     color: var(--ink);
     font-size: 11px
 }

 .form-panel textarea {
     min-height: 115px;
     resize: vertical
 }

 .form-panel input::placeholder,
 .form-panel textarea::placeholder {
     color: #a3aca4
 }

 .form-panel input:focus,
 .form-panel textarea:focus,
 .form-panel select:focus {
     border-color: #9dbc6b;
     background: white;
     outline: 2px solid #b8d89455
 }

 .consent {
     display: flex;
     align-items: start;
     gap: 9px;
     margin: 3px 0 19px;
     color: #7a857d;
     font-size: 10px;
     line-height: 1.7
 }

 .consent input {
     width: 14px;
     height: 14px;
     flex: 0 0 14px;
     margin: 2px 0 0;
     accent-color: var(--forest)
 }

 .consent a {
     color: #567743;
     text-decoration: underline;
     text-underline-offset: 2px
 }

 .submit-button {
     width: 100%;
     justify-content: space-between
 }

 .form-footnote {
     margin: 11px 0 0;
     color: #909b92;
     font-size: 9px;
     line-height: 1.7
 }

 .form-feedback {
     margin: 10px 0 0;
     color: #53783c;
     font-size: 11px
 }

 .form-feedback.error {
     color: #a34a3c
 }

 .legal {
     padding-top: 55px
 }

 .legal-inner {
     max-width: 790px
 }

 .legal-inner h2 {
     margin: 28px 0 8px;
     font: 700 19px var(--display);
     letter-spacing: -.035em
 }

 .legal-inner p {
     color: #66736c;
     font-size: 13px;
     line-height: 1.9
 }

 .lyrics-art {
     background: #e8efe5
 }

 .lyrics-art>span {
     position: absolute;
     top: 23px;
     left: 30%;
     color: #678e51;
     font-size: 48px
 }

 .lyrics-art>span:nth-child(2) {
     top: auto;
     right: 28%;
     bottom: 30px;
     left: auto;
     font-size: 36px
 }

 .sound-wave {
     display: flex;
     align-items: center;
     gap: 5px;
     height: 65px
 }

 .sound-wave i {
     width: 5px;
     border-radius: 5px;
     background: #345c4d
 }

 .sound-wave i:nth-child(3n+1) {
     height: 25px
 }

 .sound-wave i:nth-child(3n+2) {
     height: 48px
 }

 .sound-wave i:nth-child(3n) {
     height: 36px
 }

 .episode-art {
     background: #e9eee7
 }

 .episode-art>div {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     width: 165px;
     height: 108px;
     border: 2px solid #244941;
     border-radius: 7px;
     background: #f7f9f2;
     box-shadow: 9px 9px #c5d5bd;
     transform: rotate(-5deg)
 }

 .episode-art small {
     position: absolute;
     top: 12px;
     left: 14px;
     color: #678e51;
     font-size: 9px;
     font-weight: 800;
     letter-spacing: .12em
 }

 .episode-art b {
     font: 800 35px var(--display);
     letter-spacing: -.09em
 }

 .episode-art i {
     align-self: flex-end;
     margin-bottom: 16px;
     color: #799b5d;
     font-size: 12px;
     font-style: normal
 }

 .page-decoration.envelope span {
     display: grid;
     place-items: center;
     width: 95px;
     height: 95px;
     border-radius: 25px 25px 25px 6px;
     background: var(--mint);
     font: 400 46px var(--sans);
     letter-spacing: 0;
     transform: translate(-50%, -50%) rotate(-7deg)
 }

 @media(max-width:980px) {
     .nav-links {
         gap: 17px
     }

     .nav-cta {
         gap: 8px;
         padding: 11px
     }

     .hero-grid {
         gap: 18px
     }

     .hero-art {
         min-height: 380px
     }

     .float-chip {
         padding: 10px
     }

     .trust-inner {
         flex-wrap: wrap;
         justify-content: flex-start;
         padding: 20px 0
     }

     .trust-inner .muted {
         width: 100%
     }

     .process-grid {
         gap: 45px
     }

     .footer-main {
         gap: 35px
     }

     .contact-grid {
         gap: 38px
     }

     .page-decoration {
         right: 25px;
         transform: translateY(-50%) scale(.85)
     }
 }

 @media(max-width:760px) {
     .container {
         width: calc(100% - 36px)
     }

     .section {
         padding: 73px 0
     }

     .nav-wrap {
         min-height: 72px
     }

     .menu-toggle {
         display: flex;
         width: 42px;
         height: 42px;
         align-items: center;
         justify-content: center;
         flex-direction: column;
         gap: 5px;
         border: 1px solid var(--line);
         border-radius: 4px;
         background: transparent
     }

     .menu-toggle b {
         width: 17px;
         height: 2px;
         background: var(--forest)
     }

     .nav-links {
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         display: none;
         align-items: stretch;
         flex-direction: column;
         gap: 0;
         padding: 10px 18px 18px;
         border-bottom: 1px solid #e1e8de;
         background: var(--paper);
         box-shadow: 0 15px 20px #20392b0a
     }

     .nav-links.open {
         display: flex
     }

     .nav-links>a:not(.nav-cta) {
         padding: 13px 4px;
         border-bottom: 1px solid #e9eee6
     }

     .nav-links>a.active:after {
         display: none
     }

     .nav-cta {
         justify-content: space-between;
         margin-top: 12px
     }

     .hero {
         padding: 62px 0
     }

     .hero-grid {
         grid-template-columns: 1fr;
         gap: 25px
     }

     .hero h1 {
         font-size: clamp(47px, 11vw, 64px)
     }

     .lead {
         font-size: 14px
     }

     .hero-note {
         margin-top: 27px
     }

     .hero-art {
         min-height: 345px;
         margin: 0 3px
     }

     .hero-art:before {
         width: 270px;
         height: 270px
     }

     .domain-window {
         width: min(390px, 86%)
     }

     .window-content {
         padding: 24px 25px 19px
     }

     .brand-visual {
         font-size: clamp(34px, 9vw, 45px)
     }

     .orbit-a {
         width: 390px;
         height: 200px
     }

     .orbit-b {
         width: 350px;
         height: 275px
     }

     .chip-one {
         top: 20px;
         right: -4px
     }

     .chip-two {
         bottom: 25px;
         left: -3px
     }

     .float-chip b {
         font-size: 9px
     }

     .float-chip small {
         font-size: 8px
     }

     .trust-inner {
         gap: 14px 20px
     }

     .trust-inner span {
         font-size: 10px
     }

     .split {
         align-items: start;
         flex-direction: column;
         gap: 18px
     }

     .section h2 {
         font-size: 39px
     }

     .head-side {
         max-width: 440px
     }

     .domain-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 13px
     }

     .domain-art {
         height: 145px
     }

     .domain-card h3 {
         font-size: 15px
     }

     .domain-card>p {
         font-size: 10px
     }

     .process-grid {
         grid-template-columns: 1fr;
         gap: 37px
     }

     .process-grid h2 {
         font-size: 42px
     }

     .seller-panel {
         align-items: flex-start;
         flex-direction: column;
         padding: 31px 25px;
         gap: 25px
     }

     .seller-panel h2 {
         font-size: 34px
     }

     .seller-orb {
         right: -60px;
         opacity: .6
     }

     .footer-main {
         grid-template-columns: 1fr 1fr;
         gap: 32px 24px
     }

     .footer-brand {
         grid-column: 1/-1
     }

     .footer-bottom {
         align-items: flex-start;
         flex-direction: column;
         justify-content: center;
         gap: 4px;
         padding: 15px 0
     }

     .page-hero {
         min-height: 320px;
         padding: 65px 0
     }

     .page-hero h1 {
         font-size: clamp(43px, 10vw, 59px)
     }

     .page-hero p {
         font-size: 13px
     }

     .page-decoration {
         right: -90px;
         opacity: .35;
         transform: translateY(-50%) scale(.8)
     }

     .explore-toolbar {
         align-items: stretch;
         flex-direction: column
     }

     .search {
         width: 100%
     }

     .filters {
         gap: 6px
     }

     .filters button {
         padding: 8px 10px;
         font-size: 9px
     }

     .explore-grid .domain-art {
         height: 150px
     }

     .availability-banner {
         align-items: flex-start;
         flex-direction: column;
         padding: 27px 23px
     }

     .availability-banner h2 {
         font-size: 27px
     }

     .story-grid {
         grid-template-columns: 1fr;
         gap: 22px
     }

     .story-grid h2 {
         font-size: 37px
     }

     .story-grid .story-lead {
         font-size: 18px
     }

     .values-grid {
         grid-template-columns: 1fr
     }

     .values-grid article {
         min-height: auto
     }

     .values-grid h3 {
         margin-top: 17px
     }

     .disclaimer {
         padding: 20px
     }

     .bottom-cta .container {
         align-items: flex-start;
         flex-direction: column
     }

     .bottom-cta h2 {
         font-size: 31px
     }

     .contact-grid {
         grid-template-columns: 1fr;
         gap: 32px
     }

     .contact-grid h2 {
         font-size: 34px
     }

     .form-panel {
         padding: 23px 20px
     }
 }

 @media(max-width:460px) {
     .container {
         width: calc(100% - 30px)
     }

     .brand {
         font-size: 19px
     }

     .actions {
         align-items: flex-start;
         flex-direction: column;
         gap: 17px
     }

     .hero-art {
         min-height: 310px
     }

     .domain-window {
         width: 89%
     }

     .window-content {
         padding: 21px 20px 16px
     }

     .brand-visual {
         font-size: 33px
     }

     .float-chip {
         max-width: 205px
     }

     .float-chip>i {
         width: 23px;
         height: 23px;
         flex: 0 0 23px
     }

     .art-caption {
         font-size: 7px
     }

     .domain-grid {
         grid-template-columns: 1fr
     }

     .domain-art,
     .explore-grid .domain-art {
         height: 170px
     }

     .domain-card h3 {
         font-size: 16px
     }

     .domain-card>p {
         font-size: 11px
     }

     .trust-inner span {
         width: calc(50% - 10px)
     }

     .seller-panel>.button,
     .availability-banner .button {
         width: 100%
     }

     .footer-main {
         grid-template-columns: 1fr 1fr
     }

     .footer-links {
         gap: 10px
     }

     .page-decoration {
         opacity: .2
     }

     .page-hero h1 {
         font-size: 43px
     }

     .filters button {
         flex-grow: 1
     }

     .form-panel {
         padding: 21px 16px
     }
 }

 @media(prefers-reduced-motion:reduce) {
     html {
         scroll-behavior: auto
     }

     *,
     *:before,
     *:after {
         transition-duration: .01ms !important
     }
 }

 

/* =========================================
   FINAL FIX — DT LOGO SPACING
   Identical in every navbar and footer
   ========================================= */

.brand-mark.brand-monogram,
.brand-footer .brand-mark.brand-monogram {
    position: relative !important;
    display: inline-block !important;
    flex: 0 0 39px !important;
    width: 39px !important;
    min-width: 39px !important;
    max-width: 39px !important;
    height: 39px !important;
    min-height: 39px !important;
    max-height: 39px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 4px !important;
    background: var(--mint) !important;
    color: var(--forest) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    transform: rotate(4deg) !important;
    box-shadow: none !important;
}

/* Remove any original logo contents */
.brand-mark.brand-monogram > *,
.brand-footer .brand-mark.brand-monogram > * {
    display: none !important;
}

/* Place D and T independently to prevent flex spacing */
.brand-mark.brand-monogram::before,
.brand-mark.brand-monogram::after,
.brand-footer .brand-mark.brand-monogram::before,
.brand-footer .brand-mark.brand-monogram::after {
    position: absolute !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
    font-style: italic !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* D — higher */
.brand-mark.brand-monogram::before,
.brand-footer .brand-mark.brand-monogram::before {
    content: "D" !important;
    top: 4px !important;
    left: 2.9px !important;
    font-size: 22px !important;
    letter-spacing: -0.08em !important;
}

/* T — lower and closer to D */
.brand-mark.brand-monogram::after,
.brand-footer .brand-mark.brand-monogram::after {
    content: "T" !important;
    top: 12px !important;
    left: 21px !important;
    font-size: 20px !important;
    letter-spacing: -0.08em !important;
}

/* Keep wordmark typography consistent */
.brand-wordmark,
.brand-name,
.brand-footer .brand-wordmark,
.brand-footer .brand-name {
    display: inline-block !important;
    font-family: var(--display) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
    white-space: nowrap !important;
}

.brand-wordmark .brand-muted,
.brand-name .brand-muted {
    font-weight: 500 !important;
}

/* Mobile sizing */
@media (max-width: 460px) {
    .brand-mark.brand-monogram,
    .brand-footer .brand-mark.brand-monogram {
        flex-basis: 39px !important;
        width: 39px !important;
        min-width: 39px !important;
        height: 39px !important;
    }

    .brand-wordmark,
    .brand-name,
    .brand-footer .brand-wordmark,
    .brand-footer .brand-name {
        font-size: 17px !important;
    }
}


/* ==========================================
   DOMAIN THUMBNAILS — RESTORE ORIGINAL LAYOUT
   ========================================== */

.domain-thumbnail {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.domain-thumbnail-image {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
    transition: transform 0.35s ease;
}

.domain-card:hover .domain-thumbnail-image {
    transform: scale(1.025);
}


/* ==========================================
   STICKY NAVBAR — TRANSLUCENT GLASS EFFECT
   ========================================== */


/* STICKY NAVBAR — SUBTLE TRANSLUCENT GLASS */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;

    background: rgba(249, 250, 246, 0.62);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);

    border-bottom: 1px solid rgba(223, 230, 220, 0.45);

    transition:
        background 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

/* Mobile navigation positioning */
@media (max-width: 760px) {
    .site-header {
        position: sticky;
        top: 0;
    }

    .nav-wrap {
        position: relative;
    }
}

::selection {
    background: #BFE8D8;
    color: #102D2B;
}

::-moz-selection {
    background: #BFE8D8;
    color: #102D2B;
}