/* FileGnome public site, daytime version (index.html, options.html).
   Shares the dashboard's blue, Nunito, pill buttons, bouncy easing and die-cut stickers,
   but with a full blue sky where the dashboard has warm paper. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; background: var(--sky-low); }
:root {
    --sky-top: #8ed1ff;
    --sky-mid: #c9ebff;
    --sky-low: #f1faff;
    --sun: #ffd23f;
    --paper: #ffffff;
    --line: #e4e8ef;
    --ink: #18202e;
    --text: #33415c;
    --muted: #5f6878;
    --blue: #2563eb;
    --blue-deep: #1d4ed8;
    --bounce: cubic-bezier(0.34, 1.45, 0.64, 1);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --pc-w: 500px; /* the computer's width; the cloud bank is measured from it */
}
body {
    /* isolation: the clouds sit at a negative z-index and must stay above this background */
    position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow-x: hidden;
    background: linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-mid) 48%, var(--sky-low) 100%);
    font-family: 'Nunito', sans-serif; font-size: 1.125rem; color: var(--ink);
}
[hidden] { display: none !important; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.clouds {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 44vh; min-height: 240px; pointer-events: none;
    background: url('clouds.webp') center bottom / cover no-repeat;
    filter: brightness(1.1) saturate(1.15);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 62%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 62%);
}

/* === TOP BAR === */
.top { display: flex; justify-content: center; margin: 1.25rem auto 0; padding: 0 1rem; }
.capsule {
    display: flex; align-items: center; gap: 2px; padding: 5px;
    background: rgba(255,255,255,0.72); border: 1px solid rgba(255,255,255,0.95); border-radius: 999px;
    backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 8px 26px rgba(30,80,140,0.14);
}
.capsule-link {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.95rem; border-radius: 999px; font-size: 0.95rem; font-weight: 800; color: var(--ink); text-decoration: none; white-space: nowrap;
    transition: background 0.15s;
}
.capsule-link img { flex: none; width: 18px; height: 18px; }
/* The pencil is diagonal, so its left side looks emptier than the other icons: this evens out the gap */
.capsule-link img[src$="icon-pageworks.png"] { margin-left: -3px; }
.capsule-link:hover { background: rgba(37,99,235,0.09); }
/* Current page: a blue icon rather than a highlight, which would make the gaps either side look uneven.
   The icons are black PNGs, and this filter turns black into the site's blue (--blue). */
.capsule-link[aria-current] img { filter: brightness(0) saturate(100%) invert(30%) sepia(87%) saturate(3700%) hue-rotate(218deg) brightness(95%) contrast(94%); }
.capsule-login { background: var(--blue); color: white; font-weight: 900; }
.capsule-login:hover { background: var(--blue-deep); }
.capsule-login img { filter: brightness(0) invert(1); } /* the black key, in white */
.lang { display: flex; margin-left: auto; padding: 3px; background: rgba(255,255,255,0.65); border-radius: 999px; }
.lang button {
    padding: 0.2rem 0.6rem; background: none; border: none; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.05em; color: var(--muted);
    transition: background 0.15s, color 0.15s;
}
.lang button.on { background: white; color: var(--blue); box-shadow: 0 1px 4px rgba(24,32,46,0.12); }

/* === BUTTONS === */
.pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1.8rem;
    background: var(--blue); border: 2px solid var(--blue); border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 1.2rem; font-weight: 900; color: white; text-decoration: none; white-space: nowrap;
    transition: transform 0.3s var(--bounce), background 0.15s, border-color 0.15s, color 0.15s;
}
.pill:hover { transform: translateY(-3px); background: var(--blue-deep); border-color: var(--blue-deep); }
.pill svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--ease); }
.pill:hover svg { transform: translateX(4px); }
.pill-ghost { background: none; border-color: var(--line); color: var(--ink); }
.pill-ghost:hover { background: none; border-color: var(--blue); color: var(--blue); }

/* === HOME === */
/* One centred column: title, buttons, then the computer, sat on the clouds. Sizes don't depend
   on the screen height; a short screen simply scrolls. */
.home {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
    width: 100%; padding: calc(clamp(3.5rem, 10vh, 6.5rem) + var(--title-drop)) 1rem 0; text-align: center;
    /* While the Explore options link is hidden, its space goes above and below the headline, so
       the computer stays put. If the link comes back, set both of these to 0. */
    --title-drop: 58px; --title-rest: 19px;
}
@media (max-width: 480px) { .home { --title-drop: 55px; --title-rest: 16px; } }
/* The cloud bank overlaps the lower part of the computer, by an amount tied to the computer's
   own size, so it sits on the clouds at every screen size. It runs on down behind the footer. */
.bank {
    position: relative; flex: 1; display: flex; flex-direction: column;
    margin-top: calc(var(--pc-w) * -0.2); padding-top: calc(var(--pc-w) * 0.2 + 1rem);
}
.bank::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url('clouds.webp') center top / max(100%, 1400px) auto no-repeat;
    filter: brightness(1.1) saturate(1.15);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black calc(var(--pc-w) * 0.36));
            mask-image: linear-gradient(to bottom, transparent 0, black calc(var(--pc-w) * 0.36));
}
.bank .foot { margin-top: auto; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.home h1 { position: relative; z-index: 2; font-weight: 900; font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; animation: rise 0.9s var(--ease) both; }
/* Cloud lettering: site.js adds the filter to any page with this class. The puffs need air, so the letters sit further apart. */
.home h1.cloud-title, .options h1.cloud-title, .step h1 .cloud-title { filter: url(#cloud-text); font-weight: 800; letter-spacing: 0.02em; }
@media (max-width: 720px) { .home h1.cloud-title, .options h1.cloud-title, .step h1 .cloud-title { filter: url(#cloud-text-small); } }
/* In sign-up headings with a blue part, only the words are clouds: the filter would turn the rest white */
.step h1 .cloud-title { display: inline-block; }
.step h1 .cloud-title:empty { display: none; }
.actions { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.25rem; margin-top: 1rem; animation: rise 0.9s var(--ease) 0.2s both; }
/* Just text and an arrow, so the cloud headline leads and the link follows */
.actions .pill { background: none; border-color: transparent; color: var(--ink); font-size: 1.05rem; font-weight: 800; padding: 0.7rem 1.4rem; box-shadow: none; }
/* Holds the row at its old height, so the smaller button doesn't pull the computer up */
.actions { align-items: flex-start; min-height: 61px; }
@media (max-width: 480px) { .actions { min-height: 55px; } }
.actions .pill svg { width: 19px; height: 19px; }
.actions .pill:hover { background: none; border-color: transparent; color: var(--blue-deep); }

/* Die-cut sticker. On the home page it doubles as the sun. */
.sticker {
    position: relative; flex: none; width: 112px; height: 112px; display: block; transform: rotate(-9deg); text-decoration: none;
    filter: drop-shadow(0 8px 14px rgba(30,80,140,0.28));
    transition: transform 0.4s var(--bounce);
}
.sticker:hover { transform: rotate(8deg) scale(1.08); }
.sticker svg { display: block; width: 100%; height: 100%; }
.sticker span { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.4rem; text-align: center; font-size: 0.95rem; font-weight: 900; line-height: 1.08; color: var(--ink); }
/* The Free! badge is stuck over the monitor's top-left corner, centred on it, so it scales and
   hops with the computer. Margins in % are relative to the computer's width, like the size. */
.pc .sticker { --s: clamp(76px, 22%, 112px); position: absolute; left: 24.5%; top: 1%; width: var(--s); height: auto; aspect-ratio: 1; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); }
.pc .sticker span { padding: 0.5rem; font-size: clamp(1rem, 4.4vw, 1.35rem); letter-spacing: -0.02em; }

/* === THE COMPUTER ===
   pc.webp and mailbox.webp come from the 3500px renders and share one canvas. The computer's
   printed face is painted out and rebuilt here, in percentages of that canvas, so it can
   blink and look at the cursor. */
.pc-wrap { position: relative; width: var(--pc-w); margin-top: calc(clamp(4.5rem, 14vh, 10rem) + var(--title-rest)); }
.pc { position: relative; aspect-ratio: 581 / 428; }
/* Soft contact shadow, so the computer rests on the clouds rather than hovering */
.pc::before { content: ''; position: absolute; left: 0; right: 0; top: 66%; height: 30%; background: radial-gradient(closest-side, rgba(30,80,140,0.34), rgba(30,80,140,0.14) 62%, transparent); }
.pc > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.face { position: absolute; inset: 0; pointer-events: none; transform: translate(calc(var(--lx, 0) * 1px), calc(var(--ly, 0) * 1px)); transition: transform 0.25s var(--ease); filter: drop-shadow(0 0 5px rgba(90,170,255,0.55)); }
.eye, .mouth {
    position: absolute; transform: translate(-50%, -50%) rotate(1deg);
    background: repeating-linear-gradient(to bottom, #8cc8ff 0 2px, #4a97ee 2px 3.5px);
    transition: height 0.2s var(--ease), border-radius 0.2s var(--ease), width 0.2s var(--ease);
}
.eye { width: 4.4%; height: 6.6%; border-radius: 50%; animation: blink 5.5s infinite; transform-origin: 50% 50%; }
.eye-l { left: 35.3%; top: 28.9%; }
.eye-r { left: 50.5%; top: 29.9%; width: 4.8%; }
.mouth { left: 42.6%; top: 30.6%; width: 4.9%; height: 3.6%; border-radius: 12% 12% 50% 50% / 12% 12% 90% 90%; }
@keyframes blink { 0%, 94%, 100% { transform: translate(-50%, -50%) rotate(1deg) scaleY(1); } 97% { transform: translate(-50%, -50%) rotate(1deg) scaleY(0.08); } }
/* Delighted: domes for eyes, a bigger smile */
.pc.yay .eye { height: 4.2%; border-radius: 50% 50% 8% 8% / 90% 90% 8% 8%; animation: none; }
.pc.yay .mouth { width: 6.4%; height: 5.4%; }
.pc.hop { animation: hop 0.5s var(--bounce); }
@keyframes hop { 0%, 100% { transform: none; } 40% { transform: translateY(-3.5%) rotate(-1.2deg); } }
/* The mailbox has a layer of its own: it rocks on its base, just after the computer hops */
.pc > .mailbox { transform-origin: 85% 79%; }
.pc.hop > .mailbox { animation: rock 0.9s ease-in-out 0.12s; }
@keyframes rock { 0%, 100% { transform: none; } 25% { transform: rotate(5deg); } 55% { transform: rotate(-3.5deg); } 80% { transform: rotate(1.5deg); } }
.pc-hit { position: absolute; left: 4%; top: 0; width: 72%; height: 84%; background: none; border: none; border-radius: 30px; cursor: pointer; }

/* === FOOTER === */
.foot {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 1.5rem;
    width: 100%; max-width: 1240px; margin: 0 auto; padding: 0.75rem 1.5rem 1rem;
    font-size: 0.85rem; font-weight: 700; color: var(--text);
}
.foot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.foot a { text-decoration: none; transition: color 0.14s; }
.foot a:hover { color: var(--blue); }
/* Options page: the language switcher sits right above the price note, both on the right */
.foot-end { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; margin-left: auto; text-align: right; }

/* === OPTIONS === */
.options { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 3.25rem 1.5rem 3rem; }
.options-head { text-align: center; margin-bottom: 3.5rem; animation: rise 0.8s var(--ease) both; }
.options h1 { font-weight: 900; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.05; letter-spacing: -0.04em; text-wrap: balance; }
.options-head p { margin-top: 0.7rem; font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 700; color: var(--text); }

/* Plan cards: slips of paper, slightly askew like the dashboard's site stack */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; margin-bottom: 4.5rem; }
.plan {
    position: relative; display: flex; flex-direction: column; padding: 1.8rem 1.8rem 1.9rem;
    background: var(--paper); color: var(--ink); border-radius: 30px;
    box-shadow: 0 22px 50px rgba(30,80,140,0.18), 0 2px 6px rgba(30,80,140,0.08);
    transform: rotate(calc(var(--tilt) * var(--tilt-k, 1))); transition: transform 0.45s var(--bounce);
    animation: rise 0.8s var(--ease) var(--delay) backwards;
}
.plan:nth-child(1) { --tilt: -1.4deg; --delay: 0.05s; }
.plan:nth-child(2) { --tilt: 0.9deg;  --delay: 0.15s; }
.plan:nth-child(3) { --tilt: -0.7deg; --delay: 0.25s; }
.plan:hover { transform: rotate(0deg) translateY(-6px); }
.plan-art { width: 96px; height: 96px; object-fit: contain; margin-bottom: 0.6rem; transition: transform 0.45s var(--bounce); }
.plan:hover .plan-art { transform: rotate(-7deg) scale(1.08); }
.plan h2 { font-weight: 900; font-size: 2rem; line-height: 1.1; letter-spacing: -0.03em; }
.plan-tag { margin-top: 0.15rem; font-size: 1rem; font-weight: 700; color: var(--muted); }
.plan-price { margin: 1.1rem 0; font-size: 2.7rem; font-weight: 900; letter-spacing: -0.035em; line-height: 1; }
.plan-price small { font-size: 1.05rem; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.plan ul { flex: 1; margin-bottom: 1.6rem; list-style: none; border-top: 2px solid var(--line); padding-top: 0.8rem; }
.plan li { display: flex; align-items: center; gap: 0.6rem; padding: 0.32rem 0; font-size: 1.03rem; font-weight: 700; }
.plan li::before {
    content: ''; flex: none; width: 9px; height: 15px; margin: -3px 5px 0 4px; border: solid var(--blue); border-width: 0 3px 3px 0; transform: rotate(42deg);
}
.plan .pill { width: 100%; font-size: 1.1rem; padding: 0.8rem 1.2rem; }
.plans-note { max-width: 46rem; margin: -2.75rem auto 3.5rem; text-align: center; font-size: 0.92rem; font-weight: 700; line-height: 1.5; color: var(--text); }
.plan .sticker { position: absolute; top: -18px; right: -14px; width: 84px; height: 84px; transform: rotate(10deg); }
.plan .sticker:hover { transform: rotate(-6deg) scale(1.08); }
.plan .sticker span { padding: 0.8rem; font-size: 1.02rem; }

/* Domains */
.domains { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 4rem; padding: 2.4rem 2.75rem; background: var(--blue); color: white; border-radius: 48px; box-shadow: 0 22px 50px rgba(30,80,140,0.2); }
.domains h2 { font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.domains p { margin-top: 0.4rem; font-size: 1.1rem; font-weight: 700; color: rgba(255,255,255,0.88); }
.domains-copy { flex: 1 1 300px; }
.domain-search { flex: 1 1 340px; min-width: 0; max-width: 100%; display: flex; padding: 5px; background: white; border-radius: 999px; }
.domain-search input { flex: 1; width: 100%; min-width: 0; padding: 0.6rem 1.2rem; background: none; border: none; outline: none; font-family: inherit; font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.domain-search input::placeholder { color: #8d95a3; }
.domain-search:focus-within { outline: 3px solid var(--sun); outline-offset: 3px; }
.domain-search button { flex: none; padding: 0.65rem 1.4rem; background: var(--ink); border: none; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 900; color: white; transition: transform 0.3s var(--bounce); }
.domain-search button:hover { transform: scale(1.05); }

/* Domain page: a plain search bar, with the results card and notes below it */
.dc-search { display: flex; max-width: 860px; margin: 0 auto 2rem; padding: 7px; background: white; border-radius: 999px; box-shadow: 0 22px 50px rgba(30,80,140,0.18), 0 2px 6px rgba(30,80,140,0.08); }
.dc-search:focus-within { outline: 3px solid var(--blue); outline-offset: 3px; }
.dc-search input { flex: 1; width: 100%; min-width: 0; padding: 0.8rem 1.5rem; background: none; border: none; outline: none; font-family: inherit; font-size: 1.3rem; font-weight: 800; color: var(--ink); }
.dc-search input::placeholder { color: #8d95a3; font-weight: 700; }
.dc-search button { flex: none; padding: 0.8rem 2rem; background: var(--blue); border: none; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 1.15rem; font-weight: 900; color: white; transition: background 0.15s; }
.dc-search button:hover { background: var(--blue-deep); }
.dc-error { max-width: 860px; margin: 0 auto 2rem; padding: 0.9rem 1.4rem; background: #fecaca; color: #7f1d1d; border-radius: 18px; font-size: 1rem; font-weight: 800; line-height: 1.4; }
.dc-results { max-width: 860px; margin: 0 auto 2.5rem; padding: 0.6rem 1.75rem; background: var(--paper); border-radius: 30px; box-shadow: 0 22px 50px rgba(30,80,140,0.18), 0 2px 6px rgba(30,80,140,0.08); }
.dc-row { display: flex; align-items: center; gap: 1rem; min-height: 4rem; padding: 0.7rem 0; border-bottom: 2px solid var(--line); }
.dc-row:last-child { border-bottom: none; }
.dc-name { flex: 1 1 40%; min-width: 0; font-size: 1.2rem; font-weight: 900; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.dc-status { flex: 0 0 8rem; }
.dc-price { flex: 0 0 8.5rem; font-size: 1rem; font-weight: 800; color: var(--text); text-align: right; white-space: nowrap; }
.dc-action { flex: 0 0 8rem; text-align: right; }
.dc-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; font-weight: 900; white-space: nowrap; background: #eef1f6; color: var(--muted); }
.dc-row.available .dc-badge { background: #bbf7d0; color: #14532d; }
.dc-row.taken .dc-badge { background: #fecaca; color: #7f1d1d; }
.dc-row.checking .dc-badge { background: rgba(37,99,235,0.1); color: var(--blue-deep); }
.dc-spinner { width: 11px; height: 11px; flex: none; border: 2px solid rgba(37,99,235,0.25); border-top-color: var(--blue); border-radius: 50%; animation: dcSpin 0.75s linear infinite; }
@keyframes dcSpin { to { transform: rotate(360deg); } }
.dc-btn { display: inline-block; padding: 0.5rem 1.1rem; background: var(--blue); border: 2px solid var(--blue); border-radius: 999px; font-size: 0.95rem; font-weight: 900; color: white; text-decoration: none; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.dc-btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.dc-btn-ghost { background: none; border-color: var(--line); color: var(--ink); }
.dc-btn-ghost:hover { background: none; border-color: var(--blue); color: var(--blue); }
.dc-notes { max-width: 46rem; margin: 0 auto 2rem; text-align: center; font-size: 1.05rem; font-weight: 800; }
.dc-notes a { color: var(--ink); text-decoration-color: var(--blue); text-underline-offset: 3px; }
.dc-notes a:hover { color: var(--blue); }
.dc-small { margin-top: 0.8rem; font-size: 0.85rem; font-weight: 700; line-height: 1.5; color: var(--text); }
@media (max-width: 640px) {
    .dc-search { padding: 5px; }
    .dc-search input { padding: 0.65rem 1.1rem; font-size: 1.1rem; }
    .dc-search button { padding: 0.65rem 1.2rem; font-size: 1rem; }
    .dc-results { padding: 0.4rem 1.25rem; border-radius: 26px; }
    .dc-row { flex-wrap: wrap; gap: 0.45rem 0.75rem; padding: 0.85rem 0; }
    .dc-name { flex: 1 1 100%; }
    .dc-status, .wizard .dc-status { flex: 0 0 auto; }
    .dc-price, .wizard .dc-price { flex: 1 1 auto; text-align: left; }
    .dc-action, .wizard .dc-action { flex: 0 0 auto; }
}

/* === SHARED: imprint, help, sign-up === */
.narrow { max-width: 860px; }
.card { padding: 1.75rem 2rem; background: var(--paper); border-radius: 30px; box-shadow: 0 22px 50px rgba(30,80,140,0.14), 0 2px 6px rgba(30,80,140,0.07); }
.card h2 { font-size: 1.45rem; font-weight: 900; line-height: 1.2; letter-spacing: -0.025em; }
.card-label { margin-bottom: 0.3rem; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.card p, .card address { margin-top: 0.6rem; font-size: 1.05rem; font-style: normal; font-weight: 700; line-height: 1.6; color: var(--text); }
.card p a, .card address a, .text-link { color: var(--blue); font-weight: 800; }
.cards { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 2rem; }
.cards-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.link-card { display: block; color: inherit; text-decoration: none; border: 2px solid transparent; transition: transform 0.3s var(--bounce), border-color 0.15s; }
.link-card:hover { transform: translateY(-3px); border-color: var(--blue); }
.doc-links { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.7rem; }
.doc-links a { font-size: 1.05rem; font-weight: 800; color: var(--blue); text-decoration: none; }
.doc-links a:hover { text-decoration: underline; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.25rem; text-align: left; }
.field label { font-size: 1.05rem; font-weight: 900; letter-spacing: -0.01em; }
.field input, .field select, .field textarea {
    width: 100%; padding: 0.85rem 1.1rem; background: #f1f5fa; border: 2px solid transparent; border-radius: 18px; outline: none;
    font-family: inherit; font-size: 1.05rem; font-weight: 700; color: var(--ink); transition: border-color 0.15s, background 0.15s;
}
.field input::placeholder, .field textarea::placeholder { color: #8d95a3; }
.field textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.field select {
    appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235f6878' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1.1rem center;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); background-color: white; }
.field .bad { border-color: #dc2626; }
.field-hint { font-size: 0.92rem; font-weight: 700; color: var(--muted); }
.field-error { font-size: 0.95rem; font-weight: 800; color: #b91c1c; }
.form-error { margin-bottom: 1.1rem; padding: 0.8rem 1.1rem; background: #fecaca; color: #7f1d1d; border-radius: 16px; font-size: 1rem; font-weight: 800; line-height: 1.4; }
.pill-wide { width: 100%; }
.pill:disabled { opacity: 0.6; cursor: progress; transform: none; }

/* === HELP === */
.help-search { position: relative; max-width: 860px; margin: 0 auto 3rem; }
.help-search .dc-search { margin: 0; }
.help-search input[type="search"] { -webkit-appearance: none; appearance: none; }
.help-results { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 10; padding: 0.5rem; background: white; border-radius: 24px; box-shadow: 0 22px 50px rgba(30,80,140,0.24); }
.help-result { display: block; width: 100%; padding: 0.7rem 1rem; background: none; border: none; border-radius: 16px; cursor: pointer; font-family: inherit; text-align: left; color: var(--ink); }
.help-result:hover, .help-result:focus-visible { background: #eef5ff; }
.help-result b { display: block; font-size: 1.05rem; font-weight: 800; }
.help-result span { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.help-none { padding: 0.8rem 1rem; font-size: 1rem; font-weight: 800; color: var(--muted); }
.faq-group { margin-bottom: 2.25rem; }
.faq-group h2 { margin: 0 0 0.75rem 0.25rem; font-size: 1.35rem; font-weight: 900; letter-spacing: -0.02em; }
.faq-list { display: flex; flex-direction: column; gap: 0.65rem; }
.faq { background: var(--paper); border-radius: 22px; box-shadow: 0 8px 24px rgba(30,80,140,0.08), 0 1px 3px rgba(30,80,140,0.06); scroll-margin-top: 1rem; }
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.5rem; cursor: pointer; list-style: none; border-radius: 22px;
    font-size: 1.1rem; font-weight: 900; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ''; width: 18px; height: 18px; flex: none; transition: transform 0.3s var(--ease);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faq[open] summary::after { transform: rotate(180deg); }
.faq-a { padding: 0 1.5rem 1.2rem; font-size: 1.03rem; font-weight: 700; line-height: 1.6; color: var(--text); }
.faq-a a { color: var(--blue); font-weight: 800; }
.faq-a strong { color: var(--ink); font-weight: 900; }
.faq.flash { animation: faqFlash 1.4s var(--ease); }
@keyframes faqFlash { 0%, 40% { box-shadow: 0 0 0 3px var(--blue); } 100% { box-shadow: 0 8px 24px rgba(30,80,140,0.08); } }
/* The help form sits directly on the sky, so its fields are white rather than tinted */
.contact-form { max-width: 600px; margin: 0 auto 2rem; scroll-margin-top: 1rem; }
.contact-form .field input, .contact-form .field select, .contact-form .field textarea { background-color: white; }
#helpThanks { text-align: center; outline: none; }
#helpThanks h2 { font-size: 1.45rem; font-weight: 900; line-height: 1.2; letter-spacing: -0.025em; }
#helpThanks p { margin-top: 0.6rem; font-size: 1.05rem; font-weight: 700; line-height: 1.6; color: var(--text); text-wrap: balance; }
#helpThanks a { color: var(--blue); font-weight: 800; }
/* Browsers stop balancing long paragraphs, so narrow screens need this to avoid a lone last word */
@media (max-width: 400px) { #helpThanks p { text-wrap: pretty; } }

/* === SIGN-UP WIZARD === */
/* One big left-aligned question per step, with one big answer below it */
.wizard { display: flex; flex-direction: column; justify-content: center; max-width: 800px; min-height: 0; padding-top: 2rem; padding-bottom: 4rem; }
.step { display: none; animation: rise 0.55s var(--ease) both; }
.step.active { display: block; }
.step h1 { margin-bottom: 1.6rem; font-size: clamp(2.2rem, 5.5vw, 3.8rem); line-height: 1.1; text-wrap: pretty; }
.step h1 label { display: block; }
.big-input {
    display: block; width: 100%; padding: 1.1rem 1.6rem; background: white; border: 3px solid transparent; border-radius: 26px; outline: none;
    font-family: inherit; font-size: clamp(1.3rem, 3.2vw, 1.9rem); font-weight: 800; color: var(--ink); box-shadow: 0 22px 50px rgba(30,80,140,0.14);
    transition: border-color 0.15s;
}
.big-input::placeholder { color: #a3aab6; font-weight: 700; }
.big-input:focus { border-color: var(--blue); }
.big-input.bad { border-color: #dc2626; }
.step .form-error { margin: 1.1rem 0 0; }
.step > .pill { margin-top: 1.5rem; }
.step h1 { font-weight: 800; letter-spacing: 0.02em; }
.step-note { max-width: 36rem; margin-top: -0.4rem; font-size: 1.15rem; font-weight: 700; line-height: 1.5; color: var(--text); }
/* The plan name: the select sits invisibly on top, so clicking anywhere on it opens the dropdown */
.plan-pick { position: relative; display: inline-flex; align-items: center; gap: 0.22em; color: var(--blue); white-space: nowrap; border-radius: 12px; }
.plan-pick svg { flex: none; width: 0.48em; height: 0.9em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.plan-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 700; }
.plan-pick:hover { color: var(--blue-deep); }
.plan-pick:focus-within { outline: 3px solid var(--blue); outline-offset: 4px; }
/* The main button, with a quieter text link beside it */
.step-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 1.5rem; }
.back-btn { background: rgba(255,255,255,0.72); border-color: transparent; color: var(--ink); }
.back-btn:hover { background: white; border-color: transparent; }
.step-link { padding: 0; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 1.05rem; font-weight: 800; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.step-link:hover { color: var(--blue); }
/* The picked domain: long names may wrap anywhere rather than run off the screen */
.domain-chosen { display: inline-flex; align-items: flex-start; gap: 0.2em; max-width: 100%; font-size: 0.82em; color: var(--blue); overflow-wrap: anywhere; }
.domain-chosen svg { flex: none; width: 0.8em; height: 0.8em; margin-top: 0.17em; fill: none; stroke: #15803d; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.domain-chosen span { min-width: 0; }
.step-text { max-width: 42rem; font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 700; line-height: 1.45; color: var(--text); }
.transfer-card { margin: 0 0 1.5rem; text-align: left; }
.transfer-card .pill { margin-top: 1.1rem; }
.wizard .dc-search { max-width: none; margin: 0 0 1.25rem; }
.wizard .dc-results, .wizard .dc-error { max-width: none; margin: 0 0 1.5rem; text-align: left; }
.wizard .dc-name { font-size: 1.1rem; }
.wizard .dc-status, .wizard .dc-price { flex-basis: 6.5rem; }
.wizard .dc-action { flex-basis: 8.5rem; }
.wizard-note { max-width: 42rem; margin: 1.25rem 0 0; font-size: 0.9rem; font-weight: 700; line-height: 1.5; color: var(--text); }
.wizard-note a { color: var(--blue); font-weight: 800; }
@media (max-width: 720px) {
    .cards-two { grid-template-columns: minmax(0, 1fr); }
    .card { padding: 1.4rem 1.3rem; border-radius: 24px; }
}

/* What else */
/* === PAGEWORKS PAGE === */
.pw-head { margin-bottom: 3.25rem; }
.pw-head > p { max-width: 38rem; margin-left: auto; margin-right: auto; text-wrap: balance; }
.pw-rolodex { display: block; width: clamp(110px, 16vw, 150px); height: auto; margin: 0 auto 0.5rem; }
.pw-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 1.5rem; }
/* Floating PageWorks elements, scattered around the headline. Everything is sized in em and the
   stage's font size follows its width, so the arrangement scales as one. Hidden on narrower screens,
   which have no room beside the headline. Each piece has its own tilt and
   drift. The drift uses the separate translate property so the two don't clash. */
.pw-scatter { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: calc(min(100vw - 20px, 1560px) * 38 / 90); margin-bottom: 3rem; }
.pw-scatter .pw-head { position: relative; z-index: 1; margin-bottom: 0; }
.pw-float { position: absolute; top: 0; left: 50%; translate: -50% 0; width: min(100vw - 20px, 1560px); container-type: inline-size; pointer-events: none; }
.pf-stage { position: relative; height: 38em; font-size: 16px; font-size: calc(100cqw / 90); }
.pf {
    position: absolute; left: var(--x); top: var(--y); width: var(--w); rotate: var(--r, 0deg); box-sizing: border-box;
    font-size: 1em; font-weight: 700; line-height: 1.3; color: var(--ink); box-shadow: 0 1.2em 2.6em rgba(30,80,140,0.2);
    animation: pfDrift var(--t, 7s) ease-in-out var(--d, 0s) infinite;
}
@keyframes pfDrift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -0.8em; } }
.pf b { font-weight: 800; }
.pf small { font-size: 0.82em; font-weight: 600; }
.pf-row { display: flex; justify-content: space-between; gap: 0.8em; }
.pf-btn { padding: 0.9em 1em; text-align: center; color: white; font-weight: 800; }
.pf-aqua { --x: 8em; --y: 1em; --w: 14em; --r: -3deg; --t: 7s; --d: -1s; padding: 1em; text-shadow: 0 1px 1px rgba(0,0,0,0.35); background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.34) 42%, rgba(255,255,255,0.06) 56%, rgba(255,255,255,0.28) 100%), linear-gradient(180deg, #4cbcef 0%, #0ea5e9 52%, #0c8bc4 100%); border: 1px solid #086087; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -9px 14px -8px rgba(255,255,255,0.7), 0 0.5em 1.2em rgba(30,80,140,0.3); }
.pf-chunky { --x: 12em; --y: 30.5em; --w: 13.5em; --r: 2deg; --t: 6.5s; --d: -3s; background: #2563eb; border-radius: 0.9em; box-shadow: 0 0.35em 0 #1a3fa8, 0 1.2em 2.4em rgba(30,80,140,0.2); }
.pf-nav { --x: 37em; --y: 34.2em; --w: 16em; --r: -1deg; --t: 7.5s; --d: -5s; display: flex; justify-content: center; gap: 0.4em; box-shadow: none; }
.pf-nav span { padding: 0.5em 0.8em; background: #5eead4; border-radius: 999px; font-weight: 800; font-size: 0.92em; white-space: nowrap; box-shadow: 0 0.8em 1.6em rgba(30,80,140,0.2); }
.pf-menu { --x: 2.5em; --y: 7.5em; --w: 18.5em; --r: 2deg; --t: 8.5s; --d: -2s; padding: 1.1em 1.25em; background: #fff1f2; border-radius: 1.3em; font-family: 'Fraunces', Georgia, serif; }
.pf-menu b { color: #9f1239; font-weight: 700; }
.pf-menu small { color: rgba(13,21,38,0.62); }
.pf-row-next { margin-top: 0.6em; padding-top: 0.6em; border-top: 1px solid rgba(13,21,38,0.12); }
/* The plus sits on the menu's corner, and drifts with the same timing so the two stay together */
.pf-plus { --x: 19em; --y: 16.3em; --w: 3.2em; --r: -6deg; --t: 8.5s; --d: -2s; z-index: 1; height: 3.2em; background: #e11d48; border-radius: 1em; }
.pf-plus::before, .pf-plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 1.3em; height: 0.26em; margin: -0.13em 0 0 -0.65em; background: white; border-radius: 1em; }
.pf-plus::after { transform: rotate(90deg); }
.pf-chat { --x: 67.5em; --y: 0.8em; --w: 17em; --r: 1.5deg; --t: 7s; --d: -4s; display: flex; flex-direction: column; gap: 0.6em; box-shadow: none; }
.pf-chat span { width: fit-content; padding: 0.6em 1em; font-weight: 600; border-radius: 1.2em; box-shadow: 0 0.8em 1.6em rgba(30,80,140,0.18); }
.pf-them { background: linear-gradient(180deg, #f8fafc, #d7dfe8); border-bottom-left-radius: 0.2em !important; }
.pf-you { align-self: flex-end; background: linear-gradient(180deg, #bae6fd, #38bdf8); border-bottom-right-radius: 0.2em !important; }
.pf-status { --x: 1.5em; --y: 22.5em; --w: 17.5em; --r: -2deg; --t: 9s; --d: -6s; display: flex; gap: 0.7em; padding: 0.9em 1em; background: white; border-radius: 1.1em; }
.pf-status small { color: rgba(13,21,38,0.6); }
.pf-status > div > span { font-size: 0.9em; font-weight: 600; }
.pf-status-pic { flex: none; width: 2.8em; height: 2.8em; background: linear-gradient(135deg, #a7f3d0, #14b8a6); border-radius: 50%; }
.pf-ticker { --x: 66em; --y: 33em; --w: 20em; --r: 1.5deg; --t: 6s; --d: -1.5s; overflow: hidden; padding: 0.75em 0; background: #fffbeb; border-radius: 0.8em; }
.pf-ticker-in { display: flex; align-items: center; gap: 0.7em; width: max-content; font-weight: 800; white-space: nowrap; animation: pfTick 18s linear infinite; }
.pf-ticker i { font-style: normal; opacity: 0.4; }
@keyframes pfTick { to { transform: translateX(-50%); } }
.pf-round { --x: 71em; --y: 8.8em; --w: 13.5em; --r: -2.5deg; --t: 7s; --d: -1s; color: var(--ink); background: var(--sun); border-radius: 999px; font-weight: 900; }
.pf-event { --x: 68.5em; --y: 14.5em; --w: 18em; --r: 1.5deg; --t: 8s; --d: -4.5s; display: flex; flex-direction: column; gap: 0.1em; padding: 1em 1.2em; background: white; border-radius: 1.1em; border-left: 0.35em solid #2563eb; }
.pf-event small { color: var(--blue); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.pf-event .pf-where { color: rgba(13,21,38,0.62); font-weight: 700; letter-spacing: 0; text-transform: none; }
.pf-btn.pf-square { --x: 27.5em; --y: 33.5em; --w: 8.5em; --r: 3deg; --t: 6.5s; --d: -5.5s; background: #f43f5e; border-radius: 0; }
.pf-qa { --x: 66.5em; --y: 22.5em; --w: 22em; --r: -1.5deg; --t: 9s; --d: -2s; padding: 0.3em 1.3em; background: #f2fbf7; border-radius: 1.2em; }
.pf-q { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.8em 0; }
.pf-q + .pf-q { border-top: 1px solid rgba(13,21,38,0.12); }
.pf-q i { flex: none; width: 0.5em; height: 0.5em; margin-top: -0.2em; border: solid #4a5263; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (min-width: 1200px) {
    /* The headline block shrinks along with the pieces, so it keeps clear of them on smaller laptops */
    .pw-scatter .pw-head h1 { font-size: min(4.4vw, 4.4rem); }
    .pw-scatter .pw-head > p { max-width: 30rem; font-size: min(1.45vw, 1.3rem); }
    .pw-scatter .pw-rolodex { width: min(8.5vw, 150px); }
}
/* No room around the headline on narrower screens, so the pieces simply aren't shown */
@media (max-width: 1199px) {
    .pw-float { display: none; }
    .pw-scatter { display: block; min-height: 0; margin-bottom: 0; }
    .pw-scatter .pw-head { margin-bottom: 3.25rem; }
}
/* The three examples lean like the plan cards */
.pw-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-bottom: 4rem; }
.pw-examples figure { transition: transform 0.45s var(--bounce); }
.pw-examples figure:nth-child(1) { transform: rotate(-1.4deg); }
.pw-examples figure:nth-child(2) { transform: rotate(0.9deg); }
.pw-examples figure:nth-child(3) { transform: rotate(-0.7deg); }
.pw-examples figure:hover { transform: translateY(-6px); }
.pw-examples img { display: block; width: 100%; height: auto; border-radius: 30px; box-shadow: 0 22px 50px rgba(30,80,140,0.2); }
.pw-examples figcaption { margin-top: 1rem; text-align: center; font-size: 1.1rem; font-weight: 800; line-height: 1.35; }
/* The editor, peeking up from the bottom of a white card. The image's shadow is part of the file. */
.pw-editor { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 4rem; padding: 0 2rem 0 2.75rem; background: var(--paper); border-radius: 48px; box-shadow: 0 22px 50px rgba(30,80,140,0.14); overflow: hidden; }
.pw-editor-copy { flex: 1 1 340px; padding: 2.4rem 0; }
.pw-editor h2, .pw-blocks h2 { font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.12; letter-spacing: -0.03em; }
.pw-editor p { max-width: 30rem; margin-top: 0.6rem; font-size: 1.1rem; font-weight: 700; line-height: 1.5; color: var(--text); }
.pw-editor-shot { flex: 0 1 580px; min-width: 0; align-self: flex-end; margin-top: 1.25rem; }
.pw-editor-shot img { display: block; width: 100%; height: auto; }
/* Blocks: the blue panel, as on the options page */
.pw-blocks { margin-bottom: 4rem; padding: 2.4rem 2.75rem; background: var(--blue); color: white; border-radius: 48px; box-shadow: 0 22px 50px rgba(30,80,140,0.2); }
.pw-blocks ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1.4rem 0 1.2rem; list-style: none; }
.pw-blocks li { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1.1rem; background: white; border-radius: 20px; font-size: 1.05rem; font-weight: 800; line-height: 1.2; color: var(--ink); }
.pw-blocks li img { flex: none; width: 22px; height: 22px; }
.pw-blocks p { font-size: 1.1rem; font-weight: 700; line-height: 1.45; color: rgba(255,255,255,0.88); }
@media (max-width: 900px) {
    .pw-examples { gap: 1rem; }
    .pw-examples img { border-radius: 20px; }
    .pw-examples figcaption { font-size: 0.95rem; }
    .pw-editor { flex-direction: column; align-items: flex-start; gap: 0; padding: 0 1.5rem; border-radius: 36px; }
    .pw-editor-copy { flex: none; padding: 1.9rem 0 0; }
    .pw-editor-shot { flex: none; align-self: center; width: min(100%, 560px); }
    .pw-blocks { padding: 1.9rem 1.5rem; border-radius: 36px; }
    .pw-blocks ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .pw-examples { grid-template-columns: minmax(0, 1fr); gap: 2rem; max-width: 340px; margin-left: auto; margin-right: auto; }
    .pw-examples figure:nth-child(n) { transform: none; }
    .pw-blocks li { padding: 0.7rem 0.8rem; font-size: 0.95rem; }
}

.extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-bottom: 1rem; }
.extras h3 { margin-bottom: 0.35rem; font-size: 1.25rem; font-weight: 900; letter-spacing: -0.01em; }
.extras p { font-size: 1.05rem; font-weight: 700; line-height: 1.5; color: var(--text); }

/* === RESPONSIVE === */
@media (min-width: 1500px) {
    .foot { max-width: 1400px; }
}
@media (max-width: 860px) {
    .home h1 { font-size: clamp(2.5rem, 11vw, 4.2rem); }
    .actions { gap: 0.9rem; }
    :root { --pc-w: min(86vw, 440px); }
    .plans { --tilt-k: 0.5; grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-left: auto; margin-right: auto; }
    .extras { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
    .domains { padding: 1.9rem 1.5rem; border-radius: 36px; }
    .plan .sticker { top: -12px; right: -6px; width: 76px; height: 76px; }
}
@media (max-width: 480px) {
    .top { margin-top: 1rem; }
    .capsule-link { gap: 0.3rem; padding: 0.4rem 0.65rem; font-size: 0.86rem; }
    .capsule-link img { width: 16px; height: 16px; }
    .options, .foot { padding-left: 1rem; padding-right: 1rem; }
    .pill { font-size: 1.1rem; padding: 0.85rem 1.4rem; }
    .domain-search button { padding: 0.65rem 1rem; }
}
/* Tightened so all four tabs fit on small phones, even with the longer German labels */
@media (max-width: 400px) {
    .capsule { padding: 3px; }
    .capsule-link { padding: 0.35rem 0.5rem; font-size: 0.8rem; }
}
@media (max-width: 465px) {
    .top { padding: 0 0.5rem; }
    .capsule-link { gap: 0.25rem; padding: 0.35rem 0.35rem; font-size: 0.76rem; }
    .capsule-link img { width: 15px; height: 15px; }
}
@media (max-width: 385px) {
    .top { padding: 0 0.5rem; }
    .capsule { border-radius: 20px; }
    .capsule-link img[src$="icon-pageworks.png"] { margin-left: 0; }
    .capsule-link { flex-direction: column; gap: 1px; padding: 0.3rem 0.5rem; border-radius: 16px; font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}