/* Serallo domain template. Edit the design tokens below to change the visual theme. */
:root {
    --ink:#15213a;
    --muted:#667087;
    --blue:#2458ed;
    --blue-dark:#1745c8;
    --pink:#ed5597;
    --line:#e3e7ef;
    --surface:#fff;
    --canvas:#fafbfe;
    --soft-blue:#edf2ff;
    --green:#15836a;
    --soft-green:#eaf8f2;
    --radius:20px;
    --shadow:0 10px 40px -24px #293c7530;
    --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:30px
}

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

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

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

button,a {
    touch-action:manipulation
}

button {
    cursor:pointer
}

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

button {
    color:inherit
}

img,svg {
    vertical-align:middle
}

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

h1,h2,h3 {
    line-height:1.16;
    letter-spacing:-.035em
}

h1 {
    font-size:58px;
    font-weight:650
}

h2 {
    font-size:25px;
    font-weight:650
}

h3 {
    font-size:19px;
    font-weight:620
}

strong,b {
    font-weight:650
}

button {
    border:0;
    background:none
}

button:disabled {
    cursor:not-allowed;
    opacity:.42
}

button[aria-busy=true] {
    cursor:wait
}

button[aria-busy=true] .icon {
    animation:pulse .8s ease-in-out infinite
}

input,select,textarea {
    min-width:0
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
    outline:3px solid #6a91ff;
    outline-offset:3px
}

[hidden] {
    display:none!important
}

.wrap {
    width:min(1200px,calc(100% - 80px));
    margin-inline:auto
}

.icon {
    display:inline-block;
    width:21px;
    height:21px;
    flex:0 0 auto
}

.sr-only {
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important
}

.skip-link {
    position:fixed;
    top:-100px;
    left:15px;
    z-index:100;
    background:var(--ink);
    color:white;
    padding:12px 20px;
    border-radius:10px
}

.skip-link:focus {
    top:10px
}

.demo-banner {
    min-height:34px;
    padding:7px 18px;
    background:#14203b;
    color:#ccd5eb;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-size:11px;
    letter-spacing:.01em;
    line-height:1.4
}

.demo-banner strong {
    color:white;
    font-weight:550
}

.demo-dot {
    width:6px;
    height:6px;
    flex-shrink:0;
    background:#ffa3cf;
    border-radius:50%
}

.demo-divider {
    padding-inline:3px;
    color:#7890b9
}

.site-header {
    height:102px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:10px;
    letter-spacing:-1.4px;
    font-size:29px;
    font-weight:720;
    line-height:1
}

.brand-mark {
    flex-shrink:0
}

.brand-period {
    color:var(--pink)
}

.site-header nav {
    display:flex;
    align-items:center;
    gap:34px
}

.nav-link {
    font-size:13px;
    font-weight:550;
    color:#5d6780
}

.nav-link:hover {
    color:var(--blue)
}

.header-domain {
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:var(--muted);
    font-size:13px;
    overflow-wrap:anywhere
}

.header-domain .icon {
    width:17px;
    height:17px
}

.button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    min-height:52px;
    padding:13px 23px;
    border:1px solid transparent;
    border-radius:11px;
    line-height:1.25;
    font-size:14px;
    font-weight:600;
    letter-spacing:-.01em;
    text-align:center;
    transition:background .18s,border-color .18s,box-shadow .18s,transform .18s
}

.button .icon {
    width:19px;
    height:19px
}

.button:hover {
    transform:translateY(-1px)
}

.button:active {
    transform:translateY(0)
}

.button-primary {
    background:var(--blue);
    color:#fff;
    box-shadow:0 5px 12px -6px #2458ed66
}

.button-primary:hover {
    background:var(--blue-dark);
    box-shadow:0 8px 18px -9px #2458edaa
}

.button-outline {
    background:var(--surface);
    border-color:#b9c8f6;
    color:var(--blue)
}

.button-outline:hover {
    background:var(--soft-blue);
    border-color:var(--blue)
}

.button-ink {
    background:var(--ink);
    color:#fff
}

.button-ink:hover {
    background:#263558
}

.button-quiet {
    background:#eff2f8;
    color:var(--ink)
}

.button-quiet:hover {
    background:#e5eaf4
}

.button-small {
    font-size:12px;
    min-height:41px;
    padding:10px 16px;
    border-radius:9px
}

.button-full {
    width:100%
}

.button-row {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:25px
}

.circle-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:44px;
    height:44px;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--surface);
    transition:background .2s,border-color .2s
}

.circle-button:hover:not(:disabled) {
    background:var(--soft-blue);
    border-color:#bbcbfa
}

.text-link,.inline-link {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--blue);
    font-size:13px;
    font-weight:600;
    padding:0
}

.text-link:hover,.inline-link:hover {
    color:var(--blue-dark);
    text-decoration:underline;
    text-underline-offset:4px
}

.text-link .icon {
    width:18px;
    height:18px
}

.inline-link {
    display:inline;
    font-size:inherit;
    font-weight:inherit;
    text-decoration:underline;
    text-underline-offset:3px
}

.section-label {
    display:block;
    color:var(--muted);
    font-size:10px;
    font-weight:650;
    letter-spacing:.15em;
    line-height:1.6
}

.pill {
    display:inline-flex;
    align-items:center;
    border-radius:5px;
    padding:4px 8px;
    font-size:10px;
    font-weight:650;
    letter-spacing:.01em;
    white-space:nowrap;
    line-height:1.5
}

.pill-blue {
    background:var(--soft-blue);
    color:var(--blue)
}

.pill-pink {
    background:#fff0f6;
    color:#b93270
}

.home-hero {
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(0,.93fr);
    align-items:start;
    gap:80px;
    padding:47px 0 74px
}

.hero-copy {
    padding-top:14px;
    min-width:0
}

.availability {
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--green);
    font-size:12px;
    font-weight:600;
    margin-bottom:27px
}

.availability>span {
    height:7px;
    width:7px;
    border-radius:50%;
    background:#1a9c7e;
    box-shadow:0 0 0 4px #e7f6f0
}

.domain-heading {
    font-size:clamp(46px,5.5vw,78px);
    letter-spacing:-.065em;
    line-height:1.05;
    font-weight:670;
    margin-left:-4px;
    overflow-wrap:anywhere
}

.domain-heading>span {
    color:var(--blue);
    font-weight:510
}

.domain-heading.long-domain {
    font-size:clamp(36px,4vw,59px)
}

.hero-line {
    font-size:32px;
    max-width:420px;
    line-height:1.2;
    letter-spacing:-.045em;
    font-weight:550;
    margin-top:24px
}

.hero-description {
    max-width:435px;
    color:var(--muted);
    font-size:15px;
    line-height:1.85;
    margin-top:19px
}

.hero-assurances {
    margin-top:25px;
    display:flex;
    flex-wrap:wrap;
    gap:12px 20px;
    max-width:490px
}

.hero-assurances>div {
    display:flex;
    align-items:center;
    gap:7px;
    font-size:11px;
    color:#53617a
}

.hero-assurances .icon {
    width:16px;
    height:16px;
    color:var(--blue)
}

.domain-preview {
    border:1px solid #dce3f4;
    border-radius:15px;
    margin-top:42px;
    max-width:493px;
    background:#fff;
    box-shadow:0 18px 40px -28px #18366540;
    overflow:hidden;
    transform:rotate(-1deg)
}

.preview-chrome {
    height:37px;
    background:#f4f6fc;
    border-bottom:1px solid #e5e9f4;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-inline:15px;
    font-size:9px;
    color:#818da6
}

.preview-chrome>span {
    display:flex;
    align-items:center;
    gap:5px;
    background:#fff;
    border:1px solid #e9edf5;
    border-radius:5px;
    padding:2px 30px;
    max-width:80%;
    overflow-wrap:anywhere
}

.preview-chrome .icon {
    width:11px;
    height:11px
}

.window-dots {
    display:flex;
    gap:4px
}

.window-dots i {
    width:5px;
    height:5px;
    border-radius:50%;
    background:#d1d8e9
}

.window-dots i:first-child {
    background:#f0adc9
}

.preview-content {
    position:relative;
    padding:27px 30px 22px;
    background:radial-gradient(ellipse at 95% 60%,#f5eeff 0,transparent 60%),radial-gradient(ellipse at 0 0,#eff3ff,transparent 75%)
}

.preview-mark {
    position:absolute;
    right:28px;
    top:26px;
    background:var(--blue);
    border-radius:12px;
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    color:white;
    transform:rotate(9deg);
    box-shadow:7px 7px 0 #f5cce0
}

.preview-mark .icon {
    width:23px;
    height:23px
}

.preview-content>p {
    font-size:26px;
    line-height:1.2;
    letter-spacing:-.045em;
    font-weight:600;
    max-width:85%
}

.preview-content>p>span {
    font-size:20px;
    font-weight:400;
    color:#7c849a
}

.preview-address {
    display:flex;
    align-items:center;
    gap:26px;
    margin-top:24px;
    font-size:10px;
    color:var(--blue);
    font-weight:600;
    overflow-wrap:anywhere
}

.preview-address .icon {
    width:15px;
    height:15px
}

.seller-line {
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:31px;
    max-width:492px
}

.seller-avatar {
    width:39px;
    height:39px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    display:grid;
    place-items:center
}

.seller-avatar .brand-mark {
    width:27px;
    height:27px
}

.seller-line p {
    font-size:12px;
    line-height:1.6
}

.seller-line p>span {
    display:block;
    font-size:11px;
    color:var(--muted)
}

.seller-line>.text-link {
    margin-left:auto;
    padding:10px
}

.purchase-stack {
    display:grid;
    gap:15px
}

.purchase-card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:25px 27px;
    box-shadow:var(--shadow)
}

.buy-card {
    border-color:#c8d5fb;
    box-shadow:0 12px 28px -20px #2458ed4d
}

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

.card-heading h2 {
    font-size:19px;
    letter-spacing:-.03em
}

.card-heading>.icon {
    color:#8090ad;
    width:19px;
    height:19px
}

.cash-price {
    font-size:48px;
    font-weight:650;
    letter-spacing:-.055em;
    line-height:1.1;
    margin-top:17px;
    font-variant-numeric:tabular-nums
}

.cash-price>span {
    font-size:12px;
    letter-spacing:0;
    font-weight:500;
    color:var(--muted);
    margin-left:10px
}

.card-caption {
    font-size:12px;
    color:var(--muted);
    margin:6px 0 21px
}

.payment-logos {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
    margin-top:17px
}

.pay-logo {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:27px;
    background:#fff;
    border:1px solid #e3e7ef;
    border-radius:4px;
    font-size:10px;
    line-height:1;
    white-space:nowrap;
    flex-shrink:0
}

.pay-logo.visa {
    font-weight:850;
    font-size:14px;
    letter-spacing:-.8px;
    color:#142b88;
    font-style:italic
}

.pay-logo.amex {
    color:#fff;
    background:#2473a9;
    border-color:#2473a9;
    font-size:6.5px;
    font-weight:800;
    text-align:center;
    line-height:1.15;
    letter-spacing:-.2px
}

.paypal {
    color:#143b7c;
    font-weight:800;
    font-style:italic;
    letter-spacing:-.5px
}

.paypal>span {
    color:#168fce
}

.klarna {
    font-weight:750;
    color:#19161b;
    letter-spacing:-.5px
}

.pay-logo.klarna {
    background:#ffd9e8;
    border-color:#ffd9e8;
    font-size:10px
}

.pay-logo.wallet {
    color:#172238;
    font-size:11px;
    font-weight:550;
    gap:2px;
    letter-spacing:-.4px
}

.google-g {
    color:#4285f4;
    font-weight:800;
    font-size:15px;
    margin-right:1px
}

.secure-note {
    font-size:10px;
    color:#738098;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    margin-top:11px
}

.secure-note .icon {
    height:12px;
    width:12px
}

.secure-note>span {
    margin:0 2px
}

.lease-card {
    background:linear-gradient(115deg,#fff 52%,#fcf7fb);
    border-color:#e3ddea
}

.lease-from {
    font-size:11px;
    color:var(--muted);
    margin-top:17px
}

.lease-price {
    font-size:39px;
    font-weight:650;
    line-height:1.15;
    letter-spacing:-.05em;
    font-variant-numeric:tabular-nums
}

.lease-price>span {
    font-size:14px;
    letter-spacing:0;
    font-weight:400;
    color:var(--muted);
    margin-left:5px
}

.lease-value {
    font-size:12px;
    line-height:1.65;
    color:#626e85;
    margin:12px 0 18px
}

.lease-value strong {
    color:#394760;
    font-weight:600
}

.plan-disclosure {
    font-size:10px;
    line-height:1.6;
    color:#69758c;
    margin-top:13px
}

.offer-card {
    padding-top:21px;
    padding-bottom:21px;
    box-shadow:none
}

.offer-card h2 {
    font-size:16px
}

.offer-card>p {
    font-size:11px;
    color:var(--muted);
    margin-top:5px
}

.quick-offer {
    display:flex;
    gap:8px;
    margin-top:15px
}

.money-field {
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
    border:1px solid var(--line);
    background:#f9fafc;
    border-radius:9px;
    padding-left:12px
}

.money-field>span {
    color:#727d93;
    font-size:14px
}

.money-field input {
    width:100%;
    border:0;
    background:transparent;
    padding:12px 6px;
    font-size:12px;
    min-height:42px
}

.quick-offer .button {
    min-height:43px;
    font-size:11px;
    padding:10px 13px;
    border-radius:9px;
    gap:7px;
    white-space:nowrap
}

.quick-offer .button .icon {
    width:15px;
    height:15px
}

.price-note {
    text-align:center;
    color:var(--muted);
    font-size:10px
}

.section-intro {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;
    margin-bottom:37px
}

.section-intro h2 {
    font-size:32px;
    margin-top:11px
}

.section-intro>p {
    font-size:12px;
    line-height:1.8;
    color:var(--muted)
}

.how-section {
    border-top:1px solid var(--line);
    padding:51px 0 60px;
    scroll-margin-top:20px
}

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

.step-number {
    display:flex;
    align-items:center;
    gap:13px;
    color:var(--blue);
    font-size:13px;
    font-weight:600;
    margin-bottom:18px
}

.step-number>span {
    color:#b9c8ec
}

.how-grid h3 {
    font-size:17px;
    letter-spacing:-.025em;
    margin-bottom:12px
}

.how-grid p {
    font-size:12px;
    line-height:1.85;
    color:var(--muted);
    max-width:325px
}

.faq-section {
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:85px;
    padding:61px 0 62px
}

.faq-intro h2 {
    font-size:34px;
    margin-top:13px;
    line-height:1.16
}

.faq-intro p {
    font-size:12px;
    color:var(--muted);
    margin-top:25px
}

.faq-intro .text-link {
    margin-top:8px
}

.faq-list details {
    border-bottom:1px solid var(--line)
}

.faq-list details:first-child {
    border-top:1px solid var(--line)
}

summary {
    cursor:pointer;
    list-style:none
}

summary::-webkit-details-marker {
    display:none
}

.faq-list summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    font-size:13px;
    font-weight:570;
    padding:21px 0;
    line-height:1.5
}

.faq-list summary .icon {
    color:#7b87a0;
    width:17px;
    height:17px;
    transition:transform .2s
}

details[open]>summary>.icon {
    transform:rotate(45deg)
}

.faq-list details p {
    color:var(--muted);
    font-size:12px;
    line-height:1.9;
    padding:0 25px 22px 0
}

.contact-strip {
    background:#edf2fe;
    border:1px solid #e3eafb;
    border-radius:17px;
    padding:32px 36px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    margin-bottom:62px
}

.contact-strip h2 {
    font-size:23px;
    letter-spacing:-.04em
}

.contact-strip p {
    font-size:12px;
    color:#62738f;
    margin-top:9px
}

.contact-strip .button {
    font-size:12px;
    min-height:46px;
    white-space:nowrap
}

.site-footer {
    padding:31px 0 35px;
    border-top:1px solid var(--line);
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:30px
}

.footer-brand {
    font-size:22px;
    gap:8px;
    letter-spacing:-.9px
}

.footer-brand .brand-mark {
    width:26px;
    height:26px
}

.site-footer p {
    font-size:10px;
    color:#748098;
    margin-top:9px
}

.footer-right {
    text-align:right
}

.footer-links {
    display:flex;
    gap:22px
}

.footer-links button {
    font-size:11px;
    color:#60708a;
    padding:3px 0
}

.footer-links button:hover {
    color:var(--blue)
}

.footer-right>p {
    margin-top:15px
}

.flow-main {
    padding:22px 0 74px
}

.back-link {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:var(--muted);
    margin-bottom:33px
}

.back-link:hover {
    color:var(--blue)
}

.back-link .icon {
    width:15px;
    height:15px
}

.steps {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:50px;
    padding:0;
    margin:0 auto 42px;
    list-style:none;
    max-width:760px
}

.steps>li {
    display:flex;
    align-items:center;
    gap:10px;
    position:relative;
    color:#818a9b;
    font-size:11px
}

.steps>li>span {
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    border-radius:50%;
    background:#e8ecf5;
    font-size:10px;
    flex-shrink:0
}

.steps>li b {
    font-weight:500
}

.steps>li.current {
    color:var(--blue)
}

.steps>li.current>span {
    color:#fff;
    background:var(--blue);
    box-shadow:0 0 0 4px #edf2ff
}

.steps>li.current b {
    font-weight:650
}

.steps>li.done {
    color:#2c7966
}

.steps>li.done>span {
    background:#e1f4ec
}

.steps>li>span .icon {
    width:13px;
    height:13px
}

.steps>li:not(:last-child):after {
    content:"";
    height:1px;
    width:27px;
    background:#dce2ef;
    position:absolute;
    right:-38px;
    top:12px
}

.flow-heading {
    margin-bottom:33px
}

.flow-heading h1 {
    font-size:55px;
    margin-top:11px;
    line-height:1.07;
    letter-spacing:-.05em;
    font-weight:630
}

.flow-heading p {
    font-size:14px;
    color:var(--muted);
    margin-top:17px
}

.flow-grid {
    display:grid;
    grid-template-columns:minmax(0,1.52fr) minmax(0,1fr);
    gap:34px;
    align-items:start
}

.panel {
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--surface);
    box-shadow:var(--shadow)
}

.panel-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:25px
}

.panel-top h2 {
    font-size:19px;
    letter-spacing:-.025em
}

.panel-top>.icon {
    color:#8793ab
}

.sticky-panel {
    position:sticky;
    top:26px
}

.plan-picker {
    padding:30px 32px 23px
}

.term-control {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:63px;
    padding-top:8px
}

.term-control>div {
    text-align:center
}

.term-control strong {
    font-size:31px;
    line-height:1;
    letter-spacing:-.04em
}

.term-control>div>span {
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-top:4px
}

.term-control .circle-button {
    width:41px;
    height:41px
}

.plan-price {
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:8px;
    margin-top:23px;
    line-height:1
}

.plan-price strong {
    font-size:64px;
    font-weight:650;
    letter-spacing:-.065em;
    font-variant-numeric:tabular-nums
}

.plan-price>span {
    font-size:16px;
    color:#808a9e
}

.plan-price-note {
    text-align:center;
    font-size:12px;
    color:var(--muted);
    margin-top:12px
}

.plan-price-note strong {
    color:var(--ink)
}

.term-tabs {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:34px;
    padding:0 0 18px
}

.term-tab {
    flex:1;
    min-width:0;
    position:relative;
    padding:13px 5px;
    background:#f6f8fc;
    border:1px solid #f0f2f7;
    border-radius:11px;
    transition:background .18s,border-color .18s
}

.term-tab>span {
    display:block;
    font-size:17px;
    font-weight:630;
    line-height:1.3
}

.term-tab small {
    display:block;
    font-size:9px;
    color:var(--muted);
    margin-top:1px
}

.term-tab.selected {
    background:var(--soft-blue);
    border-color:#a6bdfd;
    color:var(--blue)
}

.term-tab:hover {
    border-color:#a6bdfd
}

.term-tab.selected small {
    color:var(--blue)
}

.term-tab.selected i {
    position:absolute;
    bottom:-13px;
    left:calc(50% - 2px);
    height:4px;
    width:4px;
    background:var(--blue);
    border-radius:50%
}

.plan-metrics {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--line);
    padding-top:23px;
    margin-top:9px;
    gap:14px
}

.plan-metrics>div>span {
    font-size:10px;
    color:#738198;
    display:block
}

.plan-metrics>div>strong {
    font-size:19px;
    letter-spacing:-.04em;
    display:block;
    margin-top:4px;
    font-variant-numeric:tabular-nums
}

.plan-metrics>div>small {
    font-size:9px;
    color:var(--muted);
    display:block;
    margin-top:3px
}

.plan-metrics>div:not(:first-child) {
    border-left:1px solid var(--line);
    padding-left:18px
}

.rounding-note {
    font-size:10px;
    text-align:center;
    color:var(--muted);
    margin-top:24px;
    line-height:1.7
}

.lease-benefits {
    margin-top:31px;
    display:grid;
    gap:22px;
    padding:0 7px
}

.lease-benefits>div {
    display:flex;
    gap:13px
}

.lease-benefits>div>.icon {
    color:var(--blue);
    width:21px;
    height:21px;
    margin-top:1px
}

.lease-benefits h3 {
    font-size:13px;
    font-weight:600;
    letter-spacing:-.01em
}

.lease-benefits p {
    font-size:11px;
    color:var(--muted);
    margin-top:4px;
    line-height:1.8
}

.order-summary {
    padding:28px
}

.summary-domain {
    display:flex;
    align-items:center;
    gap:13px;
    padding-bottom:24px;
    margin-bottom:24px;
    border-bottom:1px solid var(--line);
    min-width:0
}

.summary-domain>.icon {
    width:37px;
    height:37px;
    padding:8px;
    background:var(--soft-blue);
    border-radius:10px;
    color:var(--blue)
}

.summary-domain>div {
    min-width:0
}

.summary-domain>div>span {
    display:block;
    font-size:8px;
    color:var(--muted);
    font-weight:600;
    letter-spacing:.12em
}

.summary-domain>div>strong {
    display:block;
    font-size:22px;
    font-weight:600;
    line-height:1.25;
    letter-spacing:-.04em;
    margin-top:5px;
    overflow-wrap:anywhere
}

.order-summary h2 {
    font-size:20px
}

.summary-term {
    margin-top:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:11px;
    color:var(--muted)
}

.summary-term .text-link {
    font-size:9px;
    text-align:right
}

.price-breakdown {
    margin:24px 0 0;
    display:grid;
    gap:13px
}

.price-breakdown>div {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    font-size:11px
}

.price-breakdown dt {
    color:var(--muted);
    line-height:1.6
}

.price-breakdown dd {
    margin:0;
    white-space:nowrap;
    font-weight:550;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.015em
}

.price-breakdown .breakdown-total {
    padding-top:17px;
    margin-top:2px;
    border-top:1px solid var(--line);
    font-size:14px
}

.breakdown-total dt {
    color:var(--ink);
    font-weight:600
}

.breakdown-total dd {
    font-size:19px;
    font-weight:650;
    letter-spacing:-.04em
}

.due-today {
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:18px;
    background:#f5f7fe;
    border-radius:11px;
    margin:25px 0 18px
}

.due-today>span {
    font-size:10px;
    color:var(--muted)
}

.due-today>span:last-child {
    text-align:right
}

.due-today strong {
    display:block;
    font-size:22px;
    font-weight:620;
    letter-spacing:-.045em;
    color:var(--blue);
    line-height:1.3;
    margin-top:2px
}

.summary-small {
    font-size:10px;
    color:var(--muted);
    line-height:1.8;
    margin-top:14px
}

.ownership-note {
    display:flex;
    gap:10px;
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid var(--line);
    font-size:10px;
    color:#727d93;
    line-height:1.8
}

.ownership-note .icon {
    width:15px;
    height:15px;
    margin-top:3px
}

.cash-alternative {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:11px;
    font-weight:550;
    color:var(--blue);
    margin-top:20px
}

.cash-alternative .icon {
    width:15px;
    height:15px
}

.compare-details {
    margin-top:31px;
    padding:20px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}

.compare-details>summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:13px;
    font-weight:550;
    padding:5px
}

.compare-details>summary>.icon {
    width:17px;
    height:17px;
    color:var(--muted)
}

.table-scroll {
    overflow-x:auto;
    margin-top:20px
}

table {
    border-collapse:collapse;
    width:100%;
    font-size:11px;
    text-align:left;
    white-space:nowrap
}

th {
    font-weight:550;
    color:var(--muted)
}

td,th {
    padding:11px 12px;
    border-bottom:1px solid var(--line)
}

thead th {
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.06em
}

.table-term {
    font-size:11px;
    color:var(--ink);
    padding:0;
    text-align:left
}

.table-term:hover {
    color:var(--blue)
}

td {
    font-variant-numeric:tabular-nums
}

td small,.table-term small {
    display:block;
    font-size:8px;
    color:var(--muted)
}

tr.is-selected {
    background:var(--soft-blue)
}

tr.is-selected .table-term {
    color:var(--blue)
}

.compare-details>.microcopy {
    padding:6px 5px 0
}

.notice {
    padding:17px 20px;
    border:1px solid var(--line);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    font-size:12px;
    line-height:1.7;
    margin:0 0 25px
}

.notice>div {
    display:flex;
    align-items:flex-start;
    gap:10px
}

.notice>.icon,.notice>div>.icon {
    width:17px;
    height:17px;
    margin-top:2px
}

.notice p {
    max-width:760px
}

.notice strong {
    font-weight:600
}

.notice .button {
    white-space:nowrap;
    flex-shrink:0
}

.notice-demo {
    background:#f0f4ff;
    border-color:#dce5ff;
    color:#4b5f8b
}

.notice-success {
    background:#eef9f4;
    border-color:#c8eadd;
    color:#23694f
}

.notice-warning {
    background:#fff9ed;
    border-color:#f1dfbc;
    color:#816127
}

.notice-error {
    background:#fff1f2;
    border-color:#f5cdd2;
    color:#ad3346;
    margin-top:18px
}

.form-panel {
    padding:29px 31px;
    margin-bottom:22px
}

.form-section-heading {
    display:flex;
    gap:13px;
    align-items:flex-start;
    margin-bottom:26px
}

.section-counter {
    height:29px;
    width:29px;
    border:1px solid #dce4f9;
    border-radius:8px;
    color:var(--blue);
    font-size:10px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    background:#f6f8ff
}

.form-section-heading h2 {
    font-size:20px;
    letter-spacing:-.025em
}

.form-section-heading p {
    font-size:11px;
    color:var(--muted);
    margin-top:6px
}

.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:19px 16px
}

.full {
    grid-column:1/-1
}

.field {
    display:block;
    position:relative;
    font-size:11px;
    font-weight:550;
    color:#4d5b76;
    line-height:1.6
}

.field>input,.field>textarea,.field>select,.input-icon>input {
    display:block;
    appearance:none;
    width:100%;
    min-height:46px;
    background:#fff;
    border:1px solid #dce1eb;
    border-radius:8px;
    padding:12px 13px;
    margin-top:7px;
    color:var(--ink);
    font-size:13px;
    font-weight:400;
    line-height:1.5;
    transition:border-color .2s,box-shadow .2s
}

.field input:hover,.field textarea:hover,.field select:hover {
    border-color:#b5c3df
}

.field input:focus,.field textarea:focus,.field select:focus {
    border-color:#749afa;
    box-shadow:0 0 0 3px #2458ed0b
}

.field input::placeholder,.field textarea::placeholder {
    color:#929bad;
    font-weight:400
}

.field textarea {
    resize:vertical
}

.field select {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='m3 4 3 3 3-3' fill='none' stroke='%23667087' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 15px center;
    padding-right:34px
}

.optional,.field-helper {
    font-weight:400;
    font-size:10px;
    color:#8c96a9;
    margin-left:5px
}

.field-helper {
    float:right;
    margin-left:0
}

.input-icon {
    display:block;
    position:relative
}

.input-icon>input {
    padding-right:43px
}

.input-icon>.icon {
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    color:#8e99af
}

.payment-tabs {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:24px
}

.payment-tabs>button {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:49px;
    padding:10px;
    flex:1;
    border:1px solid var(--line);
    border-radius:8px;
    font-size:12px;
    background:#fff
}

.payment-tabs>button.selected {
    background:#f4f7ff;
    border-color:#8aaafa;
    color:var(--blue);
    box-shadow:0 0 0 1px #8aaafa33
}

.payment-tabs .icon {
    width:18px;
    height:18px
}

.microcopy {
    font-size:10px;
    line-height:1.85;
    color:#758097;
    margin-top:13px;
    overflow-wrap:anywhere
}

.microcopy strong {
    font-weight:550;
    color:#5b6b87
}

.microcopy a {
    text-decoration:underline;
    text-underline-offset:3px
}

.check-field {
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:11px;
    line-height:1.8;
    font-weight:400;
    color:#64728a;
    cursor:pointer
}

.check-field>input {
    appearance:auto;
    accent-color:var(--blue);
    width:16px;
    height:16px;
    flex-shrink:0;
    margin:3px 0 0
}

.check-field em {
    font-style:normal;
    color:#7b86a0
}

.check-field strong {
    font-weight:600;
    color:#475a7d
}

.consent {
    margin-top:24px;
    border-top:1px solid var(--line);
    padding-top:20px
}

.section-description {
    font-size:12px;
    color:var(--muted);
    margin:-6px 0 24px;
    line-height:1.85
}

.checkout-agreement {
    padding:0 9px;
    margin:27px 0 22px
}

.next-step-note {
    display:flex;
    gap:11px;
    background:#f0f4fc;
    border:1px solid #e3e9f5;
    border-radius:10px;
    padding:15px 17px;
    margin-bottom:24px;
    font-size:11px;
    color:#677a99;
    line-height:1.8
}

.next-step-note strong {
    font-weight:600;
    color:#3e5379
}

.next-step-note>.icon {
    color:#6688d7;
    width:20px;
    height:20px;
    flex-shrink:0;
    margin-top:2px
}

.checkout-submit {
    min-height:57px
}

.button-demo-tag {
    font-size:8px;
    letter-spacing:.06em;
    font-weight:600;
    background:#ffffff21;
    border:1px solid #ffffff2b;
    border-radius:4px;
    padding:3px 5px
}

.submission-note {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    margin-top:14px;
    font-size:10px;
    line-height:1.7;
    text-align:center;
    color:#7a869c
}

.submission-note>.icon {
    width:13px;
    height:13px
}

.order-type {
    font-size:11px;
    color:var(--muted);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:12px
}

.order-type>.text-link {
    font-size:10px
}

.checkout-due {
    padding:21px;
    margin-top:24px;
    background:#f2f5fe;
    border-radius:12px
}

.checkout-due>span {
    display:block;
    font-size:10px;
    color:#697999
}

.checkout-due>strong {
    font-size:39px;
    letter-spacing:-.055em;
    line-height:1.4;
    color:var(--blue)
}

.checkout-due>small {
    display:block;
    font-size:9px;
    line-height:1.6;
    color:#7484a1;
    margin-top:4px
}

.summary-support {
    display:flex;
    gap:11px;
    border-top:1px solid var(--line);
    padding-top:24px;
    margin-top:27px
}

.summary-support>.icon {
    width:21px;
    height:21px;
    color:#8096c2
}

.summary-support strong {
    font-size:12px;
    font-weight:550
}

.summary-support p {
    font-size:10px;
    color:var(--muted);
    margin-top:4px
}

.summary-support .text-link {
    font-size:10px;
    margin-top:7px
}

.checkout-payment-logos .payment-logos {
    justify-content:flex-start;
    margin-top:21px
}

.wallet-panel {
    text-align:center;
    padding:26px 20px 15px;
    border:1px dashed #c8d4f2;
    border-radius:12px;
    background:#f8faff
}

.wallet-symbol {
    font-size:26px;
    margin-bottom:18px
}

.wallet-panel h3 {
    font-size:17px;
    margin-bottom:12px
}

.wallet-panel>p {
    font-size:12px;
    color:var(--muted);
    line-height:1.85
}

.wallet-panel>.microcopy {
    font-size:10px
}

.paid-confirmation {
    display:flex;
    align-items:center;
    gap:9px;
    margin:0 0 23px;
    font-size:12px;
    color:#268069
}

.paid-confirmation>.icon {
    height:22px;
    width:22px;
    background:#e5f5ec;
    padding:4px;
    border-radius:50%
}

.id-options {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-bottom:26px
}

.id-option {
    display:flex;
    align-items:center;
    gap:11px;
    min-height:87px;
    padding:16px 13px;
    border:1px solid var(--line);
    border-radius:10px;
    text-align:left;
    background:#fff
}

.id-option>.icon {
    width:23px;
    height:23px;
    color:#798aa9
}

.id-option>span {
    min-width:0;
    flex:1
}

.id-option strong {
    display:block;
    font-size:12px;
    letter-spacing:-.02em;
    font-weight:550
}

.id-option small {
    display:block;
    font-size:9px;
    color:var(--muted);
    line-height:1.6;
    margin-top:5px
}

.id-option>i {
    width:14px;
    height:14px;
    border:1px solid #c8d2e7;
    border-radius:50%;
    flex-shrink:0;
    background:#fff
}

.id-option.selected {
    background:#f5f8ff;
    border-color:#91aff9;
    box-shadow:0 0 0 1px #91aff92a
}

.id-option.selected>.icon,.id-option.selected strong {
    color:var(--blue)
}

.id-option.selected>i {
    border:4px solid var(--blue)
}

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

.upload-group {
    min-width:0
}

.upload-label {
    font-size:11px;
    font-weight:550;
    margin-bottom:9px;
    display:block;
    color:#546580
}

.upload-tile {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    min-height:171px;
    border:1px dashed #bfcce7;
    border-radius:11px;
    background:#fbfcff;
    padding:20px 13px;
    cursor:pointer;
    text-align:center;
    transition:background .2s,border-color .2s
}

.upload-tile:hover,.upload-tile.drag-over {
    background:#eff4ff;
    border-color:#5584f4
}

.upload-tile>.icon {
    width:26px;
    height:26px;
    color:#6989d1;
    margin-bottom:12px
}

.upload-tile>strong {
    font-size:11px;
    line-height:1.5;
    color:var(--blue);
    font-weight:550
}

.upload-tile>span {
    display:block;
    font-size:9px;
    color:#8390a7;
    margin-top:4px;
    line-height:1.6
}

.upload-tile>input {
    position:absolute;
    opacity:0;
    inset:0;
    width:100%;
    height:100%;
    cursor:pointer
}

.upload-tile:focus-within {
    outline:3px solid #6a91ff;
    outline-offset:3px
}

.upload-tile.has-file {
    border:1px solid #b8e4d4;
    background:#f3fbf7
}

.upload-tile.has-file>.icon {
    color:var(--green)
}

.upload-tile.has-file>strong {
    color:#217c5f;
    font-size:10px;
    word-break:break-word;
    max-width:100%
}

.file-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5px;
    min-height:25px;
    font-size:9px;
    margin-top:6px
}

.file-actions>button {
    font-size:10px;
    padding:3px 0;
    color:#8b5467
}

.file-actions>.file-tag {
    color:#268167;
    font-size:9px
}

.proof-type-field {
    grid-column:1/-1;
    margin-top:0
}

.document-tips {
    display:flex;
    align-items:flex-start;
    gap:9px;
    padding:15px 16px;
    background:#f6f8fc;
    border-radius:9px;
    margin:23px 0;
    font-size:10px;
    line-height:1.8;
    color:#7a889f
}

.document-tips>.icon {
    width:15px;
    height:15px;
    margin-top:2px
}

.activation-description {
    font-size:13px;
    line-height:1.9;
    color:#65728a;
    margin-top:14px
}

.review-time {
    display:flex;
    align-items:center;
    gap:12px;
    background:#f1f5ff;
    border-radius:11px;
    padding:18px;
    margin-top:23px;
    color:#5a729e
}

.review-time>.icon {
    width:25px;
    height:25px;
    color:#5476bf
}

.review-time>span {
    font-size:10px
}

.review-time strong {
    display:block;
    color:var(--blue);
    font-size:19px;
    letter-spacing:-.03em;
    margin-top:3px;
    line-height:1.4
}

.activation-timeline {
    list-style:none;
    margin:27px 0 0;
    padding:0
}

.activation-timeline>li {
    display:flex;
    align-items:flex-start;
    gap:13px;
    position:relative;
    padding-bottom:27px
}

.activation-timeline>li:last-child {
    padding-bottom:0
}

.activation-timeline>li>span {
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    border-radius:50%;
    background:#f0f3f8;
    color:#8a98b1;
    font-size:10px;
    flex-shrink:0;
    z-index:1
}

.activation-timeline>li>span>.icon {
    width:12px;
    height:12px
}

.activation-timeline>li.done>span {
    background:#e3f6ec;
    color:#268765
}

.activation-timeline>li.current>span {
    background:var(--blue);
    color:white
}

.activation-timeline>li:not(:last-child):after {
    content:"";
    position:absolute;
    left:12px;
    top:27px;
    bottom:0;
    border-left:1px solid #dce4f1
}

.activation-timeline strong {
    font-size:11px;
    font-weight:600
}

.activation-timeline p {
    font-size:10px;
    color:var(--muted);
    margin-top:3px
}

.activation-summary>.text-link {
    font-size:11px;
    margin-top:23px
}

.empty-state {
    padding:65px 35px;
    text-align:center;
    max-width:700px;
    margin:25px auto
}

.empty-state h1 {
    font-size:33px;
    margin-top:20px
}

.empty-state p {
    font-size:13px;
    color:var(--muted);
    margin:17px auto 26px;
    max-width:400px
}

.state-icon {
    height:69px;
    width:69px;
    margin:0 auto 28px;
    display:grid;
    place-items:center;
    color:var(--blue);
    background:#edf2ff;
    border-radius:22px;
    box-shadow:0 0 0 8px #f6f8ff
}

.state-icon>.icon {
    width:32px;
    height:32px
}

.state-icon.success {
    background:#eaf8f0;
    color:#198363;
    box-shadow:0 0 0 8px #f6fcf9
}

.state-icon.warning {
    background:#fff1ed;
    color:#ca683f;
    box-shadow:0 0 0 8px #fffbf6
}

.completion-main {
    padding-top:44px;
    max-width:800px
}

.completion-card {
    padding:47px 55px 31px;
    text-align:center
}

.completion-card h1 {
    font-size:40px;
    letter-spacing:-.05em;
    margin-top:10px;
    line-height:1.13
}

.completion-description {
    font-size:14px;
    line-height:1.9;
    max-width:490px;
    color:var(--muted);
    margin:19px auto 26px
}

.completion-domain {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    color:var(--blue);
    border-radius:9px;
    background:#f1f5ff;
    padding:10px 18px;
    max-width:100%
}

.completion-domain strong {
    font-size:19px;
    letter-spacing:-.03em;
    overflow-wrap:anywhere;
    min-width:0
}

.completion-domain>.icon {
    width:20px;
    height:20px
}

.completion-status {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    font-size:10px;
    color:var(--muted);
    margin-top:18px
}

.completion-details {
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:21px 0;
    margin:27px auto;
    display:grid;
    gap:11px;
    max-width:440px;
    text-align:left
}

.completion-details:empty {
    display:none
}

.completion-details>div {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    font-size:11px
}

.completion-details dt {
    color:var(--muted)
}

.completion-details dd {
    margin:0;
    font-weight:550;
    font-variant-numeric:tabular-nums;
    text-align:right;
    word-break:break-word
}

.completion-actions {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:28px
}

.completion-actions .button {
    font-size:12px;
    min-height:45px;
    padding:12px 18px
}

.completion-disclaimer {
    margin-top:24px;
    font-size:9px
}

.demo-controls {
    margin-top:21px;
    padding:18px 24px;
    box-shadow:none
}

.demo-controls summary {
    font-size:11px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px
}

.demo-controls summary .icon {
    width:15px;
    height:15px;
    color:var(--muted)
}

.demo-controls p {
    font-size:11px;
    color:var(--muted);
    margin-top:15px
}

.demo-control-buttons {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:17px
}

.completion-help {
    text-align:center;
    font-size:12px;
    color:var(--muted);
    margin-top:30px
}

.completion-help .inline-link {
    font-weight:550
}

.modal {
    border:1px solid #dfe5f2;
    border-radius:23px;
    padding:0;
    max-width:560px;
    width:calc(100% - 32px);
    color:var(--ink);
    background:white;
    max-height:calc(100dvh - 48px);
    overflow:auto;
    box-shadow:0 25px 100px #17284935
}

.modal::backdrop {
    background:#17244270;
    backdrop-filter:blur(5px)
}

.modal-content {
    padding:35px;
    position:relative
}

.modal-close {
    position:absolute;
    top:17px;
    right:17px;
    width:32px;
    height:32px;
    border:0;
    background:#f2f4fa
}

.modal-close .icon {
    width:16px;
    height:16px
}

.modal-symbol {
    width:44px;
    height:44px;
    background:var(--soft-blue);
    color:var(--blue);
    border-radius:13px;
    display:grid;
    place-items:center;
    margin-bottom:23px
}

.modal-symbol>.icon {
    width:22px;
    height:22px
}

.modal h2 {
    font-size:33px;
    letter-spacing:-.05em;
    margin-top:9px
}

.modal p {
    font-size:12px;
    color:var(--muted);
    line-height:1.85;
    margin-top:14px;
    overflow-wrap:anywhere
}

.modal-form {
    display:grid;
    gap:17px;
    margin-top:27px
}

.modal-form>.microcopy {
    font-size:10px;
    margin:0
}

.modal-form>.check-field {
    font-size:10px
}

.modal-form .form-grid {
    gap:14px
}

.form-result {
    padding:32px 0 4px;
    text-align:center
}

.form-result>.icon {
    height:47px;
    width:47px;
    color:var(--green);
    background:#e6f8f0;
    padding:13px;
    border-radius:50%
}

.form-result h3 {
    font-size:24px;
    margin-top:21px
}

.form-result>.button {
    margin-top:23px
}

.form-result p {
    font-size:12px
}

.legal-modal {
    max-width:650px
}

.legal-modal .modal-content {
    padding-top:44px
}

.legal-modal h2 {
    margin-top:12px;
    font-size:29px
}

.legal-modal h3 {
    font-size:16px;
    line-height:1.5;
    margin-top:24px
}

.legal-modal .button {
    margin-top:26px
}

.legal-modal a {
    color:var(--blue);
    text-decoration:underline
}

.small-modal {
    max-width:460px
}

.small-modal h2 {
    margin-top:7px;
    font-size:29px
}

.small-modal .button-row {
    justify-content:flex-end
}

.toast {
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    background:#162745;
    color:#fff;
    border-radius:12px;
    box-shadow:0 8px 35px #10285225;
    max-width:min(470px,calc(100% - 36px));
    padding:13px 21px;
    font-size:12px;
    text-align:center;
    z-index:100
}

.amount-updated {
    animation:price-update .25s ease
}

.page-verify .flow-main {
    padding-top:35px
}

.page-verify .steps {
    margin-bottom:36px
}

.page-checkout .flow-heading {
    margin-bottom:30px
}

@keyframes price-update {
    0% {
        opacity:.45;
        transform:translateY(3px)
    }
    100% {
        opacity:1;
        transform:translateY(0)
    }
}

@keyframes pulse {
    50% {
        opacity:.4
    }
}

@media(min-width:1450px) {
    .home-hero {
        padding-top:64px;
        padding-bottom:86px;
        gap:100px
    }
    .domain-heading {
        font-size:82px
    }
    .domain-preview {
        margin-top:49px
    }
    .hero-assurances {
        margin-top:30px
    }
    .hero-copy {
        padding-top:24px
    }
    .purchase-card {
        padding:26px 29px
    }
    .offer-card {
        padding-top:21px;
        padding-bottom:21px
    }
}

@media(max-width:1100px) {
    .wrap {
        width:calc(100% - 56px)
    }
    .home-hero {
        gap:38px;
        grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)
    }
    .domain-heading {
        font-size:clamp(46px,5.6vw,68px)
    }
    .hero-line {
        font-size:29px
    }
    .hero-description {
        font-size:14px
    }
    .purchase-card {
        padding:24px
    }
    .pay-logo {
        width:38px;
        height:25px
    }
    .payment-logos {
        gap:5px
    }
    .flow-grid {
        gap:24px;
        grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)
    }
    .order-summary {
        padding:24px
    }
    .form-panel {
        padding:27px
    }
    .plan-picker {
        padding:27px
    }
    .plan-metrics>div>strong {
        font-size:17px
    }
    .plan-metrics>div:not(:first-child) {
        padding-left:13px
    }
    .plan-metrics {
        gap:10px
    }
    .summary-domain>div>strong {
        font-size:20px
    }
    .faq-section {
        gap:55px
    }
    .notice .button {
        font-size:11px
    }
    .id-options {
        gap:8px
    }
    .id-option {
        gap:7px;
        padding:13px 10px
    }
    .id-option>.icon {
        width:19px;
        height:19px
    }
    .id-option>i {
        width:12px;
        height:12px
    }
    .id-option strong {
        font-size:11px
    }
    .id-option small {
        font-size:8px
    }
}

@media(max-width:860px) {
    .wrap {
        width:calc(100% - 44px)
    }
    .site-header {
        height:87px
    }
    .site-header nav {
        gap:23px
    }
    .home-hero {
        grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        gap:27px;
        padding-top:31px
    }
    .hero-copy {
        padding-top:10px
    }
    .domain-heading {
        font-size:46px
    }
    .domain-heading.long-domain {
        font-size:37px
    }
    .hero-line {
        font-size:26px;
        margin-top:21px
    }
    .hero-description {
        font-size:13px
    }
    .hero-assurances {
        gap:12px;
        margin-top:22px
    }
    .hero-assurances>div {
        font-size:10px
    }
    .domain-preview {
        margin-top:33px
    }
    .preview-content {
        padding:27px 21px
    }
    .preview-content>p {
        font-size:23px
    }
    .preview-content>p>span {
        font-size:17px
    }
    .preview-mark {
        right:22px;
        top:63px;
        width:28px;
        height:28px;
        border-radius:8px;
        box-shadow:5px 5px 0 #f5cce0
    }
    .preview-mark>.icon {
        width:18px;
        height:18px
    }
    .preview-chrome>span {
        padding-inline:10px
    }
    .purchase-card {
        padding:22px 20px
    }
    .card-heading h2 {
        font-size:18px
    }
    .card-heading {
        gap:7px
    }
    .pill {
        font-size:9px;
        padding:4px 6px
    }
    .cash-price {
        font-size:42px
    }
    .lease-price {
        font-size:35px
    }
    .lease-price>span {
        font-size:12px
    }
    .pay-logo {
        width:36px;
        height:23px
    }
    .payment-logos {
        gap:4px
    }
    .pay-logo.wallet {
        font-size:9px
    }
    .pay-logo.klarna {
        font-size:9px
    }
    .quick-offer {
        flex-wrap:wrap
    }
    .quick-offer>.money-field {
        width:100%;
        flex-basis:100%
    }
    .quick-offer>.button {
        width:100%
    }
    .seller-line p {
        font-size:11px
    }
    .seller-line p>span {
        font-size:10px
    }
    .how-grid {
        gap:27px
    }
    .section-intro h2 {
        font-size:28px
    }
    .section-intro>p {
        font-size:11px
    }
    .faq-section {
        gap:35px
    }
    .faq-intro h2 {
        font-size:28px
    }
    .faq-list summary {
        font-size:12px
    }
    .contact-strip {
        padding:27px
    }
    .contact-strip h2 {
        font-size:21px
    }
    .flow-grid {
        grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
        gap:20px
    }
    .plan-picker {
        padding:24px 20px
    }
    .panel-top h2 {
        font-size:17px
    }
    .term-control {
        gap:37px
    }
    .plan-price strong {
        font-size:53px
    }
    .plan-price>span {
        font-size:13px
    }
    .term-tabs {
        gap:5px
    }
    .term-tab>span {
        font-size:16px
    }
    .plan-metrics {
        gap:8px
    }
    .plan-metrics>div>strong {
        font-size:16px
    }
    .plan-metrics>div>small {
        font-size:8px
    }
    .plan-metrics>div:not(:first-child) {
        padding-left:8px
    }
    .plan-metrics>div>span {
        font-size:9px
    }
    .order-summary {
        padding:22px 20px
    }
    .summary-domain {
        gap:9px
    }
    .summary-domain>div>strong {
        font-size:18px
    }
    .summary-domain>.icon {
        width:32px;
        height:32px;
        padding:7px
    }
    .summary-term {
        align-items:flex-start
    }
    .summary-term>.text-link {
        max-width:70px;
        line-height:1.6
    }
    .price-breakdown>div {
        font-size:10px;
        gap:10px
    }
    .due-today {
        padding:14px
    }
    .due-today strong {
        font-size:20px
    }
    .order-summary .button {
        font-size:12px;
        padding-inline:12px
    }
    .form-panel {
        padding:24px 21px
    }
    .form-grid {
        gap:17px 12px
    }
    .field>input,.field>select,.field>textarea,.input-icon>input {
        font-size:12px
    }
    .form-section-heading h2 {
        font-size:18px
    }
    .form-section-heading p {
        font-size:10px
    }
    .id-options {
        grid-template-columns:1fr
    }
    .id-option {
        padding:15px;
        min-height:70px
    }
    .id-option strong {
        font-size:12px
    }
    .id-option small {
        font-size:9px
    }
    .id-option>.icon {
        width:24px;
        height:24px
    }
    .id-option>i {
        width:14px;
        height:14px
    }
    .upload-grid {
        grid-template-columns:1fr
    }
    .upload-tile {
        min-height:145px
    }
    .activation-description {
        font-size:12px
    }
    .review-time {
        padding:15px;
        gap:9px
    }
    .review-time strong {
        font-size:17px
    }
    .notice {
        font-size:11px;
        padding:15px
    }
    .notice>.button {
        padding-inline:12px
    }
    .payment-tabs {
        gap:6px
    }
    .payment-tabs>button {
        font-size:11px;
        min-height:44px
    }
    .contact-strip p {
        font-size:11px
    }
    .steps {
        gap:45px
    }
    .steps>li {
        font-size:10px
    }
    .steps>li:not(:last-child):after {
        right:-34px;
        width:23px
    }
}

@media(max-width:700px) {
    .wrap {
        width:calc(100% - 40px)
    }
    .demo-banner {
        font-size:9px;
        gap:6px;
        padding:7px 12px;
        min-height:31px
    }
    .demo-banner>span:last-child {
        max-width:230px
    }
    .demo-divider {
        padding-inline:0
    }
    .brand {
        font-size:25px;
        letter-spacing:-1.2px;
        gap:8px
    }
    .brand>.brand-mark {
        width:31px;
        height:31px
    }
    .site-header {
        height:81px
    }
    .site-header nav {
        gap:15px
    }
    .nav-link {
        display:none
    }
    .site-header .button {
        font-size:11px;
        min-height:38px;
        padding:10px 13px
    }
    .header-domain {
        display:none
    }
    .home-hero {
        grid-template-columns:minmax(0,1fr);
        gap:34px;
        padding-top:25px;
        padding-bottom:42px
    }
    .hero-copy {
        padding-top:0
    }
    .availability {
        font-size:11px;
        margin-bottom:20px
    }
    .domain-heading {
        font-size:clamp(43px,10.6vw,70px);
        letter-spacing:-.065em;
        margin-left:-2px
    }
    .domain-heading.long-domain {
        font-size:clamp(34px,8vw,48px)
    }
    .hero-line {
        font-size:27px;
        max-width:350px;
        margin-top:19px
    }
    .hero-description {
        font-size:13px;
        line-height:1.85;
        max-width:440px;
        margin-top:16px
    }
    .hero-assurances {
        margin-top:20px;
        gap:9px 16px
    }
    .hero-assurances>div {
        font-size:10px
    }
    .hero-assurances>div:last-child {
        display:none
    }
    .domain-preview {
        display:none
    }
    .seller-line {
        margin-top:24px;
        padding-top:20px;
        border-top:1px solid var(--line);
        max-width:none
    }
    .seller-line p {
        font-size:11px
    }
    .seller-line p>span {
        font-size:10px
    }
    .seller-avatar {
        width:34px;
        height:34px;
        border-radius:10px
    }
    .seller-avatar>.brand-mark {
        width:24px;
        height:24px
    }
    .purchase-stack {
        gap:15px
    }
    .purchase-card {
        padding:25px 26px;
        border-radius:17px
    }
    .card-heading h2 {
        font-size:20px
    }
    .pill {
        font-size:10px;
        padding:4px 8px
    }
    .cash-price {
        font-size:46px;
        margin-top:18px
    }
    .card-caption {
        font-size:12px;
        margin-bottom:20px
    }
    .button {
        min-height:51px;
        font-size:14px
    }
    .payment-logos {
        gap:6px;
        margin-top:19px
    }
    .pay-logo {
        width:39px;
        height:25px
    }
    .secure-note {
        font-size:10px
    }
    .lease-price {
        font-size:40px
    }
    .lease-price>span {
        font-size:14px
    }
    .lease-from {
        font-size:11px
    }
    .lease-value {
        font-size:12px
    }
    .plan-disclosure {
        font-size:10px
    }
    .offer-card h2 {
        font-size:18px
    }
    .offer-card>p {
        font-size:12px
    }
    .quick-offer {
        flex-wrap:nowrap
    }
    .quick-offer>.money-field {
        flex-basis:0;
        width:auto
    }
    .quick-offer>.button {
        width:auto;
        font-size:11px
    }
    .quick-offer input {
        font-size:12px
    }
    .offer-card {
        padding-top:23px;
        padding-bottom:23px
    }
    .how-section {
        padding:35px 0 40px
    }
    .section-intro {
        display:block;
        margin-bottom:27px
    }
    .section-intro h2 {
        font-size:28px;
        max-width:300px
    }
    .section-intro>p {
        margin-top:14px;
        line-height:1.8;
        font-size:12px
    }
    .section-intro>p br {
        display:none
    }
    .section-label {
        font-size:9px
    }
    .how-grid {
        grid-template-columns:1fr;
        gap:26px
    }
    .how-grid article {
        padding-left:43px;
        position:relative
    }
    .step-number {
        position:absolute;
        left:0;
        top:2px;
        margin:0;
        font-size:12px
    }
    .step-number>span {
        display:none
    }
    .how-grid h3 {
        font-size:16px;
        margin-bottom:8px
    }
    .how-grid p {
        max-width:none;
        font-size:12px
    }
    .faq-section {
        grid-template-columns:1fr;
        padding:36px 0 39px;
        gap:28px
    }
    .faq-intro h2 {
        font-size:31px
    }
    .faq-intro p {
        margin-top:15px;
        font-size:12px
    }
    .faq-intro .text-link {
        font-size:12px
    }
    .faq-list summary {
        font-size:12px;
        padding:19px 0;
        gap:16px
    }
    .faq-list details p {
        font-size:12px
    }
    .contact-strip {
        padding:25px;
        display:block;
        margin-bottom:37px
    }
    .contact-strip h2 {
        font-size:24px;
        max-width:320px
    }
    .contact-strip p {
        font-size:12px;
        line-height:1.85;
        margin-top:12px
    }
    .contact-strip .button {
        margin-top:22px;
        font-size:12px;
        min-height:46px
    }
    .site-footer {
        display:block;
        padding:27px 0
    }
    .footer-right {
        text-align:left;
        margin-top:26px
    }
    .footer-links {
        gap:24px;
        flex-wrap:wrap
    }
    .footer-links button {
        font-size:11px
    }
    .site-footer p {
        font-size:10px
    }
    .footer-right>p {
        margin-top:13px
    }
    .footer-brand {
        font-size:22px
    }
    .flow-main {
        padding-top:11px;
        padding-bottom:45px
    }
    .back-link {
        margin-bottom:25px;
        font-size:11px
    }
    .steps {
        margin-bottom:31px;
        gap:12px;
        justify-content:space-between;
        align-items:flex-start
    }
    .steps>li {
        font-size:9px;
        gap:7px;
        flex:1;
        line-height:1.5;
        max-width:150px;
        align-items:center
    }
    .steps>li>span {
        width:22px;
        height:22px;
        flex-shrink:0
    }
    .steps>li>span .icon {
        width:12px;
        height:12px
    }
    .steps>li:not(:last-child):after {
        display:none
    }
    .steps>li b {
        font-size:9px
    }
    .flow-heading {
        margin-bottom:26px
    }
    .flow-heading h1 {
        font-size:43px;
        letter-spacing:-.05em;
        line-height:1.08;
        margin-top:10px
    }
    .flow-heading p {
        font-size:13px;
        margin-top:15px;
        line-height:1.8
    }
    .flow-grid {
        grid-template-columns:minmax(0,1fr);
        gap:24px
    }
    .sticky-panel {
        position:static
    }
    .plan-picker {
        padding:24px 23px
    }
    .panel-top h2 {
        font-size:18px
    }
    .term-control {
        gap:58px;
        padding-top:7px
    }
    .term-control>div>strong {
        font-size:29px
    }
    .term-control>div>span {
        font-size:11px
    }
    .plan-price {
        margin-top:24px
    }
    .plan-price strong {
        font-size:59px
    }
    .plan-price>span {
        font-size:14px
    }
    .plan-price-note {
        font-size:11px
    }
    .term-tabs {
        margin-top:27px;
        gap:6px
    }
    .term-tab {
        padding:12px 4px
    }
    .term-tab>span {
        font-size:17px
    }
    .term-tab>small {
        font-size:9px
    }
    .plan-metrics {
        padding-top:19px;
        gap:10px
    }
    .plan-metrics>div>span {
        font-size:9px
    }
    .plan-metrics>div>strong {
        font-size:18px
    }
    .plan-metrics>div>small {
        font-size:8px
    }
    .plan-metrics>div:not(:first-child) {
        padding-left:10px
    }
    .rounding-note {
        font-size:10px;
        line-height:1.9;
        margin-top:23px
    }
    .lease-benefits {
        margin-top:26px;
        gap:21px;
        padding:0 5px
    }
    .lease-benefits h3 {
        font-size:13px
    }
    .lease-benefits p {
        font-size:11px
    }
    .compare-details {
        margin-top:25px;
        padding:17px 0
    }
    .compare-details>summary {
        font-size:12px
    }
    .order-summary {
        padding:25px
    }
    .summary-domain>div>strong {
        font-size:24px
    }
    .summary-domain>div>span {
        font-size:8px
    }
    .summary-domain>.icon {
        width:38px;
        height:38px;
        padding:8px
    }
    .order-summary h2 {
        font-size:21px
    }
    .summary-term {
        font-size:11px;
        align-items:center
    }
    .summary-term>.text-link {
        max-width:none;
        font-size:9px
    }
    .price-breakdown>div {
        font-size:11px;
        gap:16px
    }
    .price-breakdown .breakdown-total {
        font-size:14px
    }
    .breakdown-total dd {
        font-size:20px
    }
    .due-today {
        padding:18px
    }
    .due-today strong {
        font-size:23px
    }
    .order-summary .button {
        min-height:51px;
        font-size:14px
    }
    .summary-small {
        font-size:10px
    }
    .ownership-note {
        font-size:10px
    }
    .cash-alternative {
        font-size:11px
    }
    .notice {
        flex-direction:column;
        align-items:stretch;
        gap:13px;
        padding:16px;
        font-size:11px;
        margin-bottom:22px
    }
    .notice .button {
        align-self:flex-start;
        font-size:11px;
        min-height:38px
    }
    .form-panel {
        padding:25px 23px;
        margin-bottom:19px
    }
    .form-section-heading {
        gap:11px;
        margin-bottom:24px
    }
    .form-section-heading h2 {
        font-size:20px
    }
    .form-section-heading p {
        font-size:11px;
        line-height:1.7
    }
    .form-grid {
        gap:17px 12px
    }
    .field {
        font-size:11px
    }
    .field input,.field select,.field textarea,.input-icon>input {
        font-size:16px;
        min-height:49px;
        padding:12px 11px
    }
    .field-helper {
        font-size:9px
    }
    .input-icon>input {
        padding-right:36px
    }
    .input-icon>.icon {
        right:11px;
        width:17px;
        height:17px
    }
    .optional {
        font-size:9px
    }
    .payment-tabs {
        gap:8px;
        margin-bottom:23px
    }
    .payment-tabs>button {
        font-size:12px;
        min-height:47px
    }
    .payment-tabs .paypal,.payment-tabs .klarna {
        font-size:13px
    }
    .microcopy {
        font-size:10px;
        line-height:1.85
    }
    .check-field {
        font-size:11px
    }
    .check-field>input {
        height:17px;
        width:17px;
        margin-top:3px
    }
    .consent {
        margin-top:22px;
        padding-top:19px
    }
    .section-description {
        font-size:12px;
        line-height:1.85
    }
    .checkout-agreement {
        padding:0 3px;
        margin-top:25px
    }
    .next-step-note {
        font-size:11px;
        padding:14px
    }
    .checkout-submit {
        min-height:56px;
        font-size:13px;
        gap:7px;
        padding-inline:12px
    }
    .checkout-submit>.icon {
        height:16px;
        width:16px
    }
    .submission-note {
        font-size:10px;
        line-height:1.8
    }
    .checkout-grid>.order-summary {
        order:-1
    }
    .checkout-grid>.order-summary .price-breakdown {
        margin-top:16px;
        gap:9px
    }
    .checkout-grid>.order-summary .summary-domain {
        padding-bottom:18px;
        margin-bottom:18px
    }
    .checkout-grid>.order-summary .summary-support {
        display:none
    }
    .checkout-grid>.order-summary .checkout-due {
        margin-top:20px;
        padding:17px
    }
    .checkout-grid>.order-summary .checkout-due>strong {
        font-size:34px
    }
    .checkout-grid>.order-summary .summary-small {
        font-size:9px
    }
    .checkout-grid>.order-summary .price-breakdown>div {
        font-size:10px
    }
    .checkout-grid>.order-summary .price-breakdown .breakdown-total {
        font-size:13px
    }
    .checkout-grid>.order-summary .breakdown-total dd {
        font-size:18px
    }
    .checkout-grid>.order-summary {
        padding:22px
    }
    .order-type {
        font-size:11px
    }
    .order-type>.text-link {
        font-size:10px
    }
    .page-verify .flow-main {
        padding-top:22px
    }
    .page-verify .steps {
        margin-bottom:29px
    }
    .paid-confirmation {
        font-size:10px;
        gap:7px;
        line-height:1.7;
        margin-bottom:21px
    }
    .paid-confirmation>.icon {
        width:19px;
        height:19px
    }
    .id-options {
        grid-template-columns:1fr 1fr;
        gap:10px
    }
    .id-option {
        padding:14px 12px;
        min-height:106px;
        flex-wrap:wrap;
        gap:9px;
        position:relative
    }
    .id-option>span {
        flex-basis:100%
    }
    .id-option>i {
        position:absolute;
        right:12px;
        top:17px
    }
    .id-option>.icon {
        height:23px;
        width:23px
    }
    .id-option strong {
        font-size:12px;
        line-height:1.6
    }
    .id-option small {
        font-size:9px;
        line-height:1.6;
        margin-top:3px
    }
    .upload-grid {
        grid-template-columns:1fr 1fr;
        gap:13px
    }
    .upload-tile {
        padding:19px 10px;
        min-height:171px
    }
    .upload-tile>.icon {
        height:25px;
        width:25px
    }
    .upload-tile>strong {
        font-size:10px
    }
    .upload-tile>span {
        font-size:8px
    }
    .upload-label {
        font-size:10px
    }
    .activation-summary .summary-domain>div>strong {
        font-size:22px
    }
    .activation-description {
        font-size:13px
    }
    .review-time {
        padding:19px
    }
    .review-time>span {
        font-size:10px
    }
    .review-time strong {
        font-size:21px
    }
    .activation-timeline strong {
        font-size:12px
    }
    .activation-timeline p {
        font-size:11px
    }
    .completion-main {
        padding-top:25px
    }
    .completion-card {
        padding:34px 24px 26px
    }
    .state-icon {
        height:59px;
        width:59px;
        border-radius:19px;
        margin-bottom:26px;
        box-shadow:0 0 0 6px #f6f8ff
    }
    .state-icon>.icon {
        height:28px;
        width:28px
    }
    .completion-card h1 {
        font-size:33px;
        line-height:1.13
    }
    .completion-description {
        font-size:12px;
        line-height:1.9;
        margin-top:17px
    }
    .completion-domain {
        padding:10px 15px
    }
    .completion-domain>strong {
        font-size:19px
    }
    .completion-status {
        font-size:9px;
        line-height:1.7
    }
    .completion-details {
        margin-top:24px;
        padding:19px 0
    }
    .completion-details>div {
        font-size:10px;
        gap:10px
    }
    .completion-actions {
        flex-direction:column;
        margin-top:23px
    }
    .completion-actions .button {
        width:100%;
        min-height:46px;
        font-size:12px
    }
    .completion-disclaimer {
        font-size:9px
    }
    .demo-controls {
        padding:18px;
        margin-top:19px
    }
    .demo-controls summary {
        font-size:10px
    }
    .demo-controls p {
        font-size:10px
    }
    .demo-control-buttons {
        display:grid;
        grid-template-columns:1fr;
        gap:9px
    }
    .demo-control-buttons>.button {
        min-height:42px;
        font-size:11px
    }
    .completion-help {
        font-size:11px;
        margin-top:23px
    }
    .modal {
        max-height:calc(100dvh - 28px);
        border-radius:19px;
        width:calc(100% - 26px)
    }
    .modal-content {
        padding:28px 24px
    }
    .modal-close {
        right:14px;
        top:14px
    }
    .modal-symbol {
        margin-bottom:21px
    }
    .modal h2 {
        font-size:31px
    }
    .modal p {
        font-size:12px
    }
    .modal-form {
        gap:17px;
        margin-top:23px
    }
    .modal-form .form-grid {
        grid-template-columns:1fr;
        gap:17px
    }
    .modal-form .field input,.modal-form .field textarea {
        font-size:16px
    }
    .legal-modal .modal-content {
        padding-top:40px
    }
    .legal-modal h2 {
        font-size:26px
    }
    .legal-modal .section-label {
        max-width:85%;
        font-size:8px
    }
    .small-modal h2 {
        font-size:27px
    }
    .small-modal .button-row>.button {
        font-size:12px;
        min-height:43px
    }
    .empty-state {
        padding:42px 22px;
        margin-top:15px
    }
    .empty-state h1 {
        font-size:29px
    }
    .empty-state p {
        font-size:12px
    }
    .toast {
        bottom:16px;
        font-size:11px;
        padding:12px 16px
    }
    .table-scroll {
        margin-left:-2px;
        margin-right:-2px
    }
    td,th {
        padding:10px 7px;
        font-size:10px
    }
}

@media(max-width:370px) {
    .wrap {
        width:calc(100% - 30px)
    }
    .demo-banner {
        font-size:8px
    }
    .demo-banner>span:last-child {
        max-width:181px
    }
    .purchase-card {
        padding:23px 21px
    }
    .domain-heading {
        font-size:42px
    }
    .hero-line {
        font-size:25px
    }
    .hero-assurances>div {
        font-size:9px;
        gap:5px
    }
    .hero-assurances {
        gap:12px
    }
    .payment-logos {
        gap:4px
    }
    .pay-logo {
        width:34px;
        height:23px
    }
    .quick-offer .button {
        font-size:10px;
        padding-inline:10px
    }
    .plan-picker {
        padding:23px 18px
    }
    .plan-price strong {
        font-size:52px
    }
    .plan-metrics {
        gap:7px
    }
    .plan-metrics>div>strong {
        font-size:16px
    }
    .plan-metrics>div:not(:first-child) {
        padding-left:7px
    }
    .form-panel {
        padding:23px 19px
    }
    .flow-heading h1 {
        font-size:39px
    }
    .field-helper {
        font-size:8px
    }
    .form-section-heading h2 {
        font-size:18px
    }
    .form-section-heading p {
        font-size:10px
    }
    .upload-grid {
        grid-template-columns:1fr
    }
    .upload-tile {
        min-height:146px
    }
    .id-option strong {
        font-size:11px
    }
    .id-option small {
        font-size:8px
    }
    .id-options {
        gap:8px
    }
    .id-option {
        padding:13px 10px
    }
    .checkout-submit {
        font-size:11px
    }
    .checkout-submit>.button-demo-tag {
        font-size:7px
    }
    .order-summary {
        padding:23px
    }
    .summary-term>.text-link {
        font-size:8px
    }
    .field input,.input-icon>input {
        padding-inline:10px
    }
    .input-icon>input {
        padding-right:31px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        animation:none!important;
        transition:none!important
    }
    .button:hover {
        transform:none
    }
}

@media print {
    .demo-banner,.site-header,.site-footer,.button,.back-link,.steps,.demo-controls,.completion-help,.notice,.modal,.toast {
        display:none!important
    }
    body {
        background:white
    }
    .wrap {
        width:100%;
        max-width:none
    }
    .flow-grid,.home-hero {
        display:block
    }
    .panel {
        box-shadow:none;
        break-inside:avoid
    }
    .sticky-panel {
        position:static
    }
    .domain-preview {
        display:none
    }
    .purchase-stack {
        margin-top:30px
    }
    .lease-benefits {
        margin-bottom:30px
    }
}

body:has(dialog[open]) {
    overflow:hidden
}

.instalment-row{padding:1rem 0;border-top:1px solid #e2e8f0}.instalment-row p{margin:.35rem 0}.instalment-row .button{max-width:100%;}