/* ==========================================================
   ws-81forms-landing.css
   81 Forms landing page. Template-scoped.
   Owns ws81- classes and --ws81- tokens. Plugin owns form81-
   and --f81-, so an embedded form cannot collide with the page.
   Only main.css brand tokens shared.

   Westphal site style: full-width sections alternating white,
   paper and charcoal. One 81 Forms touch, the destination button.

   Radius exceptions, all inside pictures of other people's forms:
   gala 16, pizza 18, pills round, bold card square. Page chrome
   stays 3px.
   ========================================================== */

/* === Tokens. Landing only. === */
:root {
    --ws81-max: 1200px;
    --ws81-gutter: clamp(20px, 4vw, 40px);
    --ws81-pad: clamp(72px, 9vw, 112px);           /* Section top and bottom */
    --ws81-clear: 24px;                            /* Anchor clearance. Header not sticky on phones */
    --ws81-alt: var(--ws-paper, #F5F6F2);          /* Paper sections. Fallback until paper token ships */
    --ws81-hair: #E5E5EA;                          /* Section hairlines, lockup rule */
    --ws81-rail: #D9DAD5;                          /* Step tab rail. Light grey vanishes on paper */
    --ws81-lead: #333336;                          /* Lead copy. Softer than black, still 12.6:1 */
    --ws81-mock: #FFFFFF;                          /* Step mockup cards */
    --ws81-mock-shadow: 0 18px 40px rgba(28, 28, 30, 0.10);
    --ws81-haze: 255, 255, 255;                    /* Hero haze rgb. Dark swaps to charcoal */
    --ws81-lava-bg: var(--ws-paper, #F5F6F2);
    --ws81-band: var(--ws-accent);                 /* Highlighter ink */
    --ws81-foot: #1C1C1E;
    --ws81-foot-edge: transparent;                 /* Dark only. Strip must part from page */
    --ws81-ok: var(--ws-success, #2C7A3F);         /* Status labels in mockups only */
    --ws81-ok-wash: var(--ws-success-wash, #E6F4E4);

    /* Customer colors. Exception to the palette on purpose:
       demos and lava show the plugin styled for someone else's
       site. Never used on page chrome. */
    --ws81-gala-bg: #F7F4EC;
    --ws81-gala: #2C5F4A;
    --ws81-gala-line: #D6CFBF;
    --ws81-gala-ink: #1E2B25;
    --ws81-gala-quiet: #5B6B63;
    --ws81-pz-bg: #FFF6E9;
    --ws81-pz: #C8372D;
    --ws81-pz-ink: #3A1F14;
    --ws81-pz-line: #E3C9B5;
    --ws81-pz-quiet: #8A5A44;
    --ws81-pz-crust: #E9B872;
    --ws81-pz-sauce: #D2492F;
    --ws81-pz-cheese: #F6D58A;
    --ws81-pz-pep: #A8281E;
    --ws81-pz-mush: #CDB79E;
    --ws81-pz-basil: #3E7D3A;
    --ws81-sheet: #496D89;
    --ws81-sheet-bg: #EDF2F6;
}

/* Roles already flip. These are the locals that cannot. */
[data-theme="dark"] {
    --ws81-alt: #26262A;
    --ws81-hair: #3A3A40;
    --ws81-rail: #3A3A40;
    --ws81-lead: #D5D8DA;
    --ws81-mock: #1C1C1E;
    --ws81-mock-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    --ws81-haze: 28, 28, 30;
    --ws81-lava-bg: #1C1C1E;
    --ws81-band: rgba(195, 221, 34, 0.3);           /* Full lime under white type is 1.6:1 */
    --ws81-foot: #111113;
    --ws81-foot-edge: #3A3A40;
    --ws81-ok: var(--ws-success, #6FD68C);
    --ws81-ok-wash: var(--ws-success-wash, #1B3324);
}

@media (min-width: 760px) {
    :root { --ws81-clear: 96px; }
}


/* === Page shell === */

/* main.css flexes .ws-page only. Same here or footer floats up. */
.ws81-page { flex: 1 0 auto; }

.ws81-wrap {
    max-width: var(--ws81-max);
    margin: 0 auto;
    padding: 0 var(--ws81-gutter);
}

/* Anchor targets clear the sticky bar. On the target, not on html. */
.ws81-page [id] { scroll-margin-top: var(--ws81-clear); }

/* Parent theme and main.css style bare elements. Reset inside ours. */
.ws81-bar [hidden],
.ws81-page [hidden] { display: none !important; }
.ws81-page ul,
.ws81-page ol,
.ws81-bar ol { margin: 0; padding: 0; list-style: none; }
.ws81-page p { margin: 0; }

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

.ws81-center { text-align: center; }

/* Focus. Heading role flips black to white with the theme. */
.ws81-bar a:focus-visible,
.ws81-page a:focus-visible,
.ws81-page button:focus-visible,
.ws81-page summary:focus-visible {
    outline: 2px solid var(--ws-heading);
    outline-offset: 3px;
}
/* Parent theme rings every :focus, mouse clicks included. Keyboard keeps ours. */
.ws81-bar a:focus:not(:focus-visible),
.ws81-page a:focus:not(:focus-visible),
.ws81-page button:focus:not(:focus-visible),
.ws81-page summary:focus:not(:focus-visible) { outline: none; }


/* === Type === */
.ws81-eb {
    align-self: flex-start;
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ws-accent);
    font-family: var(--ws-font);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ws-muted);
}

.ws81-page .ws81-h1,
.ws81-page .ws81-h2,
.ws81-page .ws81-h3 {
    margin: 0;
    font-family: var(--ws-font);
    font-weight: 900;
    color: var(--ws-heading);
}
.ws81-page .ws81-h1 { font-size: clamp(42px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -0.02em; }
.ws81-page .ws81-h2 { font-size: clamp(32px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.01em; }
.ws81-page .ws81-h3 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; }

.ws81-page .ws81-lead { font-size: 19px; line-height: 1.55; color: var(--ws81-lead); }
.ws81-page .ws81-body { font-size: 17px; line-height: 1.55; color: var(--ws-muted); }
.ws81-page .ws81-body--lg { line-height: 1.6; color: var(--ws81-lead); }
.ws81-page .ws81-note { font-size: 13px; color: var(--ws-muted); }
.ws81-page .ws81-sub { font-size: 16px; color: var(--ws-muted); }

.ws81-page .ws81-code {
    padding: 0;
    background: none;
    border-radius: 0;
    font-family: var(--ws-code);
    font-size: 11px;
    color: var(--ws-muted);
}


/* === Lockup ===
   Every measure off tile height. One class sets the size. */
.ws81-lockup {
    --ws81-t: 36px;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--ws81-t) * 0.34);
    font-family: var(--ws-font);
    color: var(--ws-heading);
}
.ws81-lockup--t28 { --ws81-t: 28px; }
.ws81-lockup--t44 { --ws81-t: 44px; }
.ws81-lockup__tile { display: block; flex: none; width: var(--ws81-t); height: var(--ws81-t); }
.ws81-tile { display: block; width: 100%; height: 100%; }
.ws81-lockup__word {
    font-size: calc(var(--ws81-t) * 0.44);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    /* Trailing track would push the word off center */
    margin-right: -0.2em;
}
.ws81-lockup__by {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--ws81-t) * 0.34);
    margin-left: calc(var(--ws81-t) * 0.34);
    font-size: max(11px, calc(var(--ws81-t) * 0.34));
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    color: var(--ws-muted);
}
.ws81-lockup__rule { width: 1px; height: calc(var(--ws81-t) * 0.62); background: var(--ws81-hair); }

/* Charcoal strip. Same in both themes */
.ws81-lockup--dark { color: var(--ws-white); }
.ws81-lockup--dark .ws81-lockup__by { color: var(--ws-grey); }
.ws81-lockup--dark .ws81-lockup__rule { background: #3A3A40; }


/* === Destination button ===
   Site button plus arrow circle. Arrow direction is meaning:
   right goes, down jumps down, up jumps back.
   Hover colors restated: parent theme recolors a:hover. */
.ws81-btn,
.ws81-btn:hover,
.ws81-btn:focus {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 0 8px 0 22px;
    background: var(--ws-accent);
    color: var(--ws-black);
    border: 1px solid var(--ws-accent);
    border-radius: var(--ws-radius);
    font-family: var(--ws-font);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.ws81-btn__c {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ws-charcoal);
    color: var(--ws-accent);
    transition: transform 0.2s var(--ws-ease);
}
.ws81-btn__c svg { display: block; }
@media (hover: hover) {
    .ws81-btn[href]:hover .ws81-btn__c { transform: translateX(3px); }
    /* Nudge follows the arrow */
    .ws81-btn[href]:hover .ws81-i--down { transform: translateY(2px); }
    .ws81-btn[href]:hover .ws81-i--up { transform: translateY(-2px); }
    .ws81-btn[href]:hover:has(.ws81-i--down) .ws81-btn__c,
    .ws81-btn[href]:hover:has(.ws81-i--up) .ws81-btn__c { transform: none; }
}
.ws81-i { transition: transform 0.2s var(--ws-ease); }

/* White fill, lime edge, ringed circle */
.ws81-btn--line,
.ws81-btn--line:hover,
.ws81-btn--line:focus { background: var(--ws-bg); color: var(--ws-heading); border-color: var(--ws-accent); }
.ws81-btn--line .ws81-btn__c { background: transparent; box-shadow: inset 0 0 0 2px currentColor; color: inherit; }

/* On dark */
.ws81-btn--ghost,
.ws81-btn--ghost:hover,
.ws81-btn--ghost:focus { background: transparent; color: var(--ws-white); border-color: rgba(255, 255, 255, 0.6); }
.ws81-btn--ghost .ws81-btn__c { background: transparent; box-shadow: inset 0 0 0 2px var(--ws-white); color: var(--ws-white); }

.ws81-btn--dark,
.ws81-btn--dark:hover,
.ws81-btn--dark:focus { background: var(--ws-charcoal); color: var(--ws-white); border-color: var(--ws-charcoal); }
.ws81-btn--dark .ws81-btn__c { background: var(--ws-accent); color: var(--ws-charcoal); }
[data-theme="dark"] .ws81-btn--dark { border-color: #3A3A40; }

/* Header size */
.ws81-btn--sm,
.ws81-btn--sm:hover,
.ws81-btn--sm:focus { gap: 12px; min-height: 44px; padding: 0 7px 0 18px; }
.ws81-btn--sm .ws81-btn__c { width: 28px; height: 28px; }

/* No zip set. Visibly unset, never a dead link */
.ws81-btn:not([href]) { opacity: 0.45; cursor: not-allowed; }

.ws81-btns { display: flex; flex-wrap: wrap; gap: 12px; }


/* === Check list === */
.ws81-checks { display: flex; flex-direction: column; gap: 10px; }
.ws81-checks li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--ws-text);
}
.ws81-checks__c {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ws-accent);
    color: var(--ws-charcoal);
}
.ws81-checks--hero { gap: 12px; margin-top: 6px; }
.ws81-checks--hero li { font-size: 16px; }


/* === Shared toggle. Lava motion and fits rotation. ===
   Label carries state. Circle swaps pause for play. */
button.ws81-toggle,
button.ws81-toggle:hover,
button.ws81-toggle:focus {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    margin: 0;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ws-muted);
    font-family: var(--ws-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}
button.ws81-toggle:hover { color: var(--ws-heading); }
.ws81-toggle__c {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px currentColor;
}
.ws81-toggle__c .ws81-i--play { display: none; }
.ws81-toggle.is-paused .ws81-i--pause { display: none; }
.ws81-toggle.is-paused .ws81-i--play { display: block; }


/* === 81 Forms bar ===
   Light bar, hairline under. Sticky from 760 up. Wraps on phones. */
.ws81-bar {
    position: relative;
    z-index: 60;
    background: var(--ws-bg);
    border-bottom: 1px solid var(--ws81-hair);
}
.ws81-bar__inner {
    max-width: var(--ws81-max);
    margin: 0 auto;
    padding: 18px var(--ws81-gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.ws81-bar__home { display: inline-flex; min-width: 0; text-decoration: none; }
.ws81-bar__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
}
.ws81-bar__link,
.ws81-bar__link:hover,
.ws81-bar__link:focus {
    font-family: var(--ws-font);
    font-size: 14px;
    font-weight: 700;
    color: var(--ws-heading);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.2s var(--ws-ease);
}
@media (hover: hover) {
    .ws81-bar__link:hover { text-decoration-color: var(--ws-accent); }
}

@media (min-width: 760px) {
    .ws81-bar { position: sticky; top: 0; }
    /* Logged-in admin bar sits over the sticky top */
    .admin-bar .ws81-bar { top: 46px; }
}
@media (min-width: 783px) {
    .admin-bar .ws81-bar { top: 32px; }
}

/* Phones. Credit gives way before the nav does */
@media (max-width: 419.98px) {
    .ws81-bar .ws81-lockup__by { display: none; }
    .ws81-bar__nav { gap: 12px 20px; }
}


/* === Hero ===
   Layers back to front: lava, haze, copy, motion control. */
.ws81-hero {
    position: relative;
    overflow: hidden;
    /* Top holds the eyebrow where it sat under the old breadcrumb */
    padding: clamp(96px, 9.5vw, 136px) 0 clamp(88px, 10vw, 128px);
    background: var(--ws-bg);
}
.ws81-hero__inner { position: relative; z-index: 2; }

.ws81-hero__copy {
    max-width: 620px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ws81-hero__copy .ws81-btns { margin-top: 4px; }

button.ws81-hero__motion {
    position: absolute;
    right: var(--ws81-gutter);
    bottom: 20px;
    z-index: 3;
}


/* === Lava ===
   Seven blurred form cards drifting behind the haze. Blur is
   static, motion is transform only, so the GPU moves a texture
   rather than re-blurring each frame. Radius never animates. */
.ws81-lava {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--ws81-lava-bg);
    pointer-events: none;
}
.ws81-lv {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 30px 28px;
    overflow: hidden;
    filter: blur(16px) saturate(1.1);
    opacity: 0.82;
    box-shadow: 0 30px 60px rgba(28, 28, 30, 0.18);
    transform-origin: center;
    will-change: transform;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.ws81-lava.is-paused .ws81-lv,
.ws81-lava.is-off .ws81-lv { animation-play-state: paused; }

/* Shared bits */
.ws81-lv__t { flex: none; height: 16px; width: 58%; border-radius: 3px; }
.ws81-lv__l { flex: none; height: 8px; width: 40%; border-radius: 2px; }
.ws81-lv__f { flex: none; height: 32px; border-radius: 3px; }
.ws81-lv__b { flex: none; height: 36px; width: 48%; margin-top: 6px; border-radius: 3px; }
.ws81-lv__b--full { width: 100%; }
.ws81-lv__row { display: flex; gap: 10px; }
.ws81-lv__row--tight { gap: 8px; }
.ws81-lv__row--mid { align-items: center; }
.ws81-lv__row > .ws81-lv__f { flex: 1; }
.ws81-lv__col { flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* 1. Dark checkout */
.ws81-lv--1 { left: 50%; top: 2%; width: 320px; height: 300px; border-radius: 3px; background: var(--ws-charcoal); animation-name: ws81LavaA; animation-duration: 26s; animation-delay: -4s; }
.ws81-lv--1 .ws81-lv__t { background: var(--ws-white); }
.ws81-lv--1 .ws81-lv__f { background: #3A3A40; }
.ws81-lv--1 .ws81-lv__f--plan-on { height: 64px; background: none; border: 3px solid var(--ws-lime); }
.ws81-lv--1 .ws81-lv__f--plan { height: 64px; background: none; border: 2px solid var(--ws-dark-grey); }
.ws81-lv--1 .ws81-lv__b { background: var(--ws-lime); }

/* 2. Pizza */
.ws81-lv--2 { left: 73%; top: 30%; width: 300px; height: 360px; border-radius: 18px; background: var(--ws81-pz-bg); animation-name: ws81LavaB; animation-duration: 30s; animation-delay: -12s; }
.ws81-lv--2 .ws81-lv__t { background: var(--ws81-pz); }
.ws81-lv__pie { flex: none; width: 92px; height: 92px; border-radius: 50%; background: var(--ws81-pz-sauce); box-shadow: 0 0 0 9px var(--ws81-pz-crust); }
.ws81-lv--2 .ws81-lv__col .ws81-lv__f { height: 24px; border-radius: 999px; }
.ws81-lv--2 .ws81-lv__f--pill-on { background: var(--ws81-pz); }
.ws81-lv--2 .ws81-lv__f--pill { border: 2px solid var(--ws81-pz-line); }
.ws81-lv--2 .ws81-lv__f--chip-on,
.ws81-lv--2 .ws81-lv__f--chip { height: 26px; border-radius: 999px; }
.ws81-lv--2 .ws81-lv__f--chip-on { background: var(--ws81-pz-ink); }
.ws81-lv--2 .ws81-lv__f--chip { border: 2px solid var(--ws81-pz-line); }
.ws81-lv--2 .ws81-lv__b { background: var(--ws81-pz); border-radius: 999px; }

/* 3. Gala */
.ws81-lv--3 { left: 57%; top: 54%; width: 300px; height: 270px; border-radius: 14px; background: var(--ws81-gala-bg); animation-name: ws81LavaC; animation-duration: 24s; animation-delay: -8s; }
.ws81-lv--3 .ws81-lv__l { background: var(--ws81-gala); opacity: 0.6; }
.ws81-lv--3 .ws81-lv__t { background: var(--ws81-gala-ink); }
.ws81-lv--3 .ws81-lv__f { background: var(--ws-white); border: 2px solid var(--ws81-gala-line); border-radius: 9px; }
.ws81-lv--3 .ws81-lv__f--tall { height: 46px; }
.ws81-lv--3 .ws81-lv__b { background: var(--ws81-gala); border-radius: 999px; }

/* 4. Bold black and lime */
.ws81-lv--4 { left: 87%; top: 0; width: 250px; height: 250px; border-radius: 0; background: var(--ws-white); border: 4px solid var(--ws-black); animation-name: ws81LavaC; animation-duration: 22s; animation-delay: -15s; }
.ws81-lv--4 .ws81-lv__t { height: 18px; width: 72%; border-radius: 0; background: var(--ws-black); }
.ws81-lv--4 .ws81-lv__f { border: 3px solid var(--ws-black); border-radius: 0; }
.ws81-lv--4 .ws81-lv__b { background: var(--ws-lime); border: 3px solid var(--ws-black); border-radius: 0; }

/* 5. Slate */
.ws81-lv--5 { left: 36%; top: 60%; width: 280px; height: 250px; border-radius: 3px; background: var(--ws-white); border: 1px solid var(--ws-light-grey); animation-name: ws81LavaB; animation-duration: 28s; animation-delay: -2s; }
.ws81-lv--5 .ws81-lv__t { background: var(--ws-slate); }
.ws81-lv--5 .ws81-lv__f { border: 2px solid var(--ws-grey); }
.ws81-lv--5 .ws81-lv__b { background: var(--ws-slate); }

/* 6. Minimal underline */
.ws81-lv--6 { left: 28%; top: -6%; width: 260px; height: 240px; border-radius: 3px; background: var(--ws-white); animation-name: ws81LavaA; animation-duration: 32s; animation-delay: -20s; }
.ws81-lv--6 .ws81-lv__t { background: var(--ws-charcoal); }
.ws81-lv--6 .ws81-lv__f { border-bottom: 3px solid var(--ws-charcoal); border-radius: 0; }
.ws81-lv--6 .ws81-lv__b { background: var(--ws-charcoal); border-radius: 0; }

/* 7. Checkbox */
.ws81-lv--7 { left: 4%; top: 56%; width: 260px; height: 230px; border-radius: 3px; background: var(--ws-white); border: 1px solid var(--ws-light-grey); animation-name: ws81LavaC; animation-duration: 34s; animation-delay: -10s; }
.ws81-lv--7 .ws81-lv__t { background: var(--ws-dark-grey); }
.ws81-lv__box { flex: none; width: 18px; height: 18px; border: 3px solid var(--ws-charcoal); border-radius: 2px; }
.ws81-lv__box--on { background: var(--ws-lime); }
.ws81-lv--7 .ws81-lv__l { background: var(--ws-dark-grey); }
.ws81-lv__l--60 { width: 60%; }
.ws81-lv__l--50 { width: 50%; }
.ws81-lv--7 .ws81-lv__b { background: var(--ws-lime); }

/* Haze, back to front: wash, left-to-right white, bottom fade.
   Left stays near solid so the copy column reads clean. */
.ws81-lava__wash,
.ws81-lava__side,
.ws81-lava__fade { position: absolute; left: 0; right: 0; }
.ws81-lava__wash { top: 0; bottom: 0; background: rgba(245, 246, 242, 0.24); }
.ws81-lava__side {
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg,
        rgb(var(--ws81-haze)) 0%,
        rgba(var(--ws81-haze), 0.93) 32%,
        rgba(var(--ws81-haze), 0.5) 60%,
        rgba(var(--ws81-haze), 0.16) 100%);
}
.ws81-lava__fade {
    bottom: 0;
    height: 28%;
    background: linear-gradient(180deg, rgba(var(--ws81-haze), 0) 0%, rgb(var(--ws81-haze)) 100%);
}
[data-theme="dark"] .ws81-lava__wash { background: rgba(28, 28, 30, 0.24); }

@keyframes ws81LavaA {
    0%   { transform: perspective(900px) translate(0, 0) rotateX(8deg) rotateY(-12deg) scale(1); }
    33%  { transform: perspective(900px) translate(50px, -110px) rotateX(-6deg) rotateY(10deg) scale(1.06); }
    66%  { transform: perspective(900px) translate(-40px, 60px) rotateX(12deg) rotateY(4deg) scale(0.95); }
    100% { transform: perspective(900px) translate(0, 0) rotateX(8deg) rotateY(-12deg) scale(1); }
}
@keyframes ws81LavaB {
    0%   { transform: perspective(900px) translate(0, 0) rotateX(-10deg) rotateY(14deg) scale(1); }
    40%  { transform: perspective(900px) translate(-60px, 90px) rotateX(6deg) rotateY(-8deg) scale(1.08); }
    75%  { transform: perspective(900px) translate(30px, -70px) rotateX(-4deg) rotateY(-14deg) scale(0.94); }
    100% { transform: perspective(900px) translate(0, 0) rotateX(-10deg) rotateY(14deg) scale(1); }
}
@keyframes ws81LavaC {
    0%   { transform: perspective(900px) translate(0, 0) rotateX(5deg) rotateY(8deg) scale(1); }
    50%  { transform: perspective(900px) translate(40px, -120px) rotateX(-12deg) rotateY(-10deg) scale(1.1); }
    100% { transform: perspective(900px) translate(0, 0) rotateX(5deg) rotateY(8deg) scale(1); }
}

/* Phones. Three cards, not seven. Copy runs full width, so the
   haze goes even across instead of fading right. */
@media (max-width: 759.98px) {
    .ws81-lv--3,
    .ws81-lv--5,
    .ws81-lv--6,
    .ws81-lv--7 { display: none; }
    .ws81-lv--1 { left: 42%; top: 1%; }
    .ws81-lv--2 { left: 58%; top: 46%; }
    .ws81-lv--4 { left: -18%; top: 64%; }
    .ws81-lava__side { background: rgba(var(--ws81-haze), 0.8); }
    button.ws81-hero__motion { bottom: 16px; }
}


/* === Sections === */
.ws81-section {
    padding: var(--ws81-pad) 0;
    background: var(--ws-bg);
    border-top: 1px solid var(--ws81-hair);
}
.ws81-section--alt { background: var(--ws81-alt); }


/* === The form that fits your... === */
.ws81-fits__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 48px;
}
.ws81-fits__copy {
    flex: 1 1 400px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Rotating phrase. Own line, lime band low on the type. */
.ws81-fits__line { display: block; min-height: 1.1em; }
.ws81-fits__word {
    background-image: linear-gradient(var(--ws81-band), var(--ws81-band));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% 0.4em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0 0.04em;
}
/* Long phrase on a phone. Smaller type beats a two-line jump */
@media (max-width: 479.98px) {
    .ws81-fits .ws81-h2 { font-size: 29px; }
}

.ws81-fits .ws81-body { max-width: 460px; }

/* No script. Six phrases as a plain line */
.ws81-fits__plain { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 15px; font-weight: 700; color: var(--ws-heading); }
/* Dot trails its item, so a wrap never opens a line on a dot */
.ws81-fits__plain li:not(:last-child)::after { content: "\00B7"; margin: 0 10px; color: var(--ws-muted); }
.ws81-fits--live .ws81-fits__plain { display: none; }

.ws81-fits__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
button.ws81-fits__tab,
button.ws81-fits__tab:hover,
button.ws81-fits__tab:focus {
    min-height: 40px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--ws-grey);
    border-radius: 999px;
    background: transparent;
    color: var(--ws-heading);
    font-family: var(--ws-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}
button.ws81-fits__tab:hover { border-color: var(--ws-heading); }
button.ws81-fits__tab[aria-selected="true"] {
    background: var(--ws-accent);
    border-color: var(--ws-accent);
    color: var(--ws-black);
}

/* Stage. Six pictures in one cell, tallest sets the height,
   so rotation never shoves the page. */
.ws81-fits__stage {
    flex: 1 1 420px;
    min-width: 0;
    display: grid;
}
.ws81-fits__item {
    grid-area: 1 / 1;
    min-width: 0;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}
.ws81-fits__item.is-off { display: none; }
/* Phones stack copy over stage. Top-align, so spare height falls below, not above. */
@media (max-width: 759.98px) {
    .ws81-fits__item { min-height: 0; justify-content: flex-start; }
}
.ws81-fits--live .ws81-fits__item.is-off { display: flex; visibility: hidden; }

.ws81-fits__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws81-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ws81-chips li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--ws-grey);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ws-heading);
}
.ws81-chips__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ws-accent); }

/* Swap animations. Two names, alternated, so each change retriggers. */
.ws81-fits__line.is-in-a { animation: ws81WordA 380ms var(--ws-ease) both; }
.ws81-fits__line.is-in-b { animation: ws81WordB 380ms var(--ws-ease) both; }
.ws81-fits__item.is-in-a { animation: ws81LiftA 420ms var(--ws-ease) both; }
.ws81-fits__item.is-in-b { animation: ws81LiftB 420ms var(--ws-ease) both; }
@keyframes ws81WordA { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
@keyframes ws81WordB { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
@keyframes ws81LiftA { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ws81LiftB { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }


/* === Demo forms ===
   Pictures of forms for made-up customers. Real controls, fixed
   customer colors, same in both themes: they show someone else's
   site, not this one. Two-class selectors beat parent theme's
   input[type] rules. */
.ws81-d {
    display: flex;
    flex-direction: column;
    font-family: var(--ws-font);
    text-align: left;
}
.ws81-d .ws81-d__lb {
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ws81-d .ws81-d__why { font-weight: 400; letter-spacing: 0; text-transform: none; }
.ws81-d .ws81-d__in {
    display: block;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 0 12px;
    font-family: var(--ws-font);
    font-size: 15px;
    line-height: 1.2;
    color: inherit;
    background: var(--ws-white);
    border: 1px solid var(--ws-grey);
    border-radius: 3px;
    box-shadow: none;
    transition: none;
}
.ws81-d .ws81-d__ta { padding: 10px 12px; resize: none; min-height: 0; }
.ws81-d input[type="radio"],
.ws81-d input[type="checkbox"] { margin: 0; flex: none; }
.ws81-d__title { font-weight: 700; font-size: 22px; line-height: 1.2; }
.ws81-d__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ws-font);
    line-height: 1.2;
    text-align: center;
}
.ws81-d__row { display: flex; gap: 10px; }
.ws81-d__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ws81-d__col--2 { flex: 2; }
.ws81-d__col--3 { flex: 3; }
.ws81-d__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Contact. Underline fields, black square button */
.ws81-d--contact { gap: 18px; padding: 30px 30px 32px; background: var(--ws-white); color: var(--ws-black); border: 1px solid var(--ws-light-grey); }
.ws81-d--contact .ws81-d__in { margin-top: -12px; padding: 0; border: 0; border-bottom: 2px solid var(--ws-charcoal); border-radius: 0; }
.ws81-d--contact .ws81-d__ta { padding: 4px 0; }
.ws81-d--contact .ws81-d__go { align-self: flex-start; min-height: 44px; padding: 0 22px; background: var(--ws-charcoal); color: var(--ws-white); font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }

/* Checkout. Dark card, lime selection */
.ws81-d--checkout { gap: 16px; padding: 28px 28px 30px; background: var(--ws-charcoal); color: var(--ws-white); border-radius: 3px; }
.ws81-d--checkout .ws81-d__title { font-weight: 900; }
.ws81-d--checkout .ws81-d__lb { color: #D5D8DA; }
.ws81-d--checkout .ws81-d__lb + .ws81-d__row { margin-top: -8px; }
.ws81-d__plan { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--ws-dark-grey); border-radius: 3px; }
.ws81-d__plan.is-on { border: 2px solid var(--ws-lime); }
.ws81-d__radio { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ws81-d--checkout input { accent-color: var(--ws-lime); }
.ws81-d__price { font-size: 22px; font-weight: 900; }
.ws81-d--checkout .ws81-d__in { background: #26262A; border-color: var(--ws-dark-grey); color: var(--ws-white); }
.ws81-d__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid #3A3A3C; }
.ws81-d__total span { font-size: 14px; color: var(--ws-grey); }
.ws81-d__total strong { font-size: 24px; font-weight: 900; }
.ws81-d--checkout .ws81-d__go { min-height: 48px; background: var(--ws-lime); color: var(--ws-black); border-radius: 3px; font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.ws81-d__note { font-size: 12px; color: var(--ws-grey); text-align: center; }

/* Gala. Soft cream, green accent */
.ws81-d--gala { gap: 14px; padding: 30px 30px 32px; background: var(--ws81-gala-bg); color: var(--ws81-gala-ink); border-radius: 16px; }
.ws81-d__kicker { font-size: 13px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ws81-gala); }
.ws81-d--gala .ws81-d__title { font-size: 24px; }
.ws81-d--gala .ws81-d__in { border-color: var(--ws81-gala-line); border-radius: 10px; }
.ws81-d--gala .ws81-d__why { color: var(--ws81-gala-quiet); }
.ws81-d--gala .ws81-d__go { align-self: flex-start; min-height: 46px; padding: 0 26px; background: var(--ws81-gala); color: var(--ws-white); border-radius: 999px; font-size: 15px; font-weight: 700; }

/* One-sheet. Document thumbnail beside the form */
.ws81-d--onesheet { flex-direction: row; flex-wrap: wrap; background: var(--ws-white); color: var(--ws-black); border: 1px solid var(--ws-light-grey); }
.ws81-d__doc { flex: 1 1 150px; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--ws81-sheet-bg); }
.ws81-d__paper { width: 120px; height: 156px; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--ws-white); box-shadow: 0 8px 20px rgba(28, 28, 30, 0.14); }
.ws81-d__paper-t { font-size: 11px; font-weight: 900; line-height: 1.2; text-transform: uppercase; color: var(--ws81-sheet); }
.ws81-d__paper i { display: block; height: 4px; background: var(--ws-light-grey); }
.ws81-d__paper i:nth-of-type(1) { width: 80%; }
.ws81-d__paper i:nth-of-type(2) { width: 90%; }
.ws81-d__paper i:nth-of-type(3) { width: 70%; }
.ws81-d__paper i:nth-of-type(4) { width: 85%; }
.ws81-d__paper i:nth-of-type(5) { width: 60%; }
.ws81-d__paper b { display: block; height: 30px; margin-top: 6px; background: var(--ws81-sheet-bg); }
.ws81-d__body { flex: 1.4 1 240px; display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 28px; }
.ws81-d--onesheet .ws81-d__title { font-size: 20px; font-weight: 900; }
.ws81-d--onesheet .ws81-d__in { margin-top: -6px; }
.ws81-d__opt { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--ws-dark-grey); }
.ws81-d__opt input { margin-top: 2px; accent-color: var(--ws81-sheet); }
.ws81-d--onesheet .ws81-d__go { min-height: 46px; background: var(--ws81-sheet); color: var(--ws-white); border-radius: 3px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }

/* Volunteer. Bold, 3px black, square */
.ws81-d--volunteer { gap: 14px; padding: 26px 26px 28px; background: var(--ws-white); color: var(--ws-black); border: 3px solid var(--ws-black); }
.ws81-d--volunteer .ws81-d__title { font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; }
.ws81-d__sub { font-size: 14px; color: var(--ws-dark-grey); }
.ws81-d--volunteer .ws81-d__in { border: 2px solid var(--ws-black); border-radius: 0; }
.ws81-d__box { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
.ws81-d--volunteer input { accent-color: var(--ws-black); }
.ws81-d__box input { width: 18px; height: 18px; }
.ws81-d__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid var(--ws-black); font-weight: 700; }
.ws81-d__chip.is-on { background: var(--ws-lime); }
.ws81-d--volunteer .ws81-d__go { min-height: 50px; background: var(--ws-lime); color: var(--ws-black); border: 3px solid var(--ws-black); font-size: 15px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }

/* Pizza. Cream and tomato, round everything */
.ws81-d--pizza { gap: 14px; padding: 26px 26px 28px; background: var(--ws81-pz-bg); color: var(--ws81-pz-ink); border-radius: 18px; }
.ws81-d__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; }
.ws81-d--pizza .ws81-d__title { font-size: 26px; font-weight: 900; letter-spacing: -0.01em; color: var(--ws81-pz); }
.ws81-d--pizza .ws81-d__kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--ws81-pz-quiet); }
.ws81-d__row--pie { flex-wrap: wrap; align-items: center; gap: 18px; }
.ws81-d__row--pie .ws81-d__col { flex: 1 1 180px; gap: 10px; }
.ws81-d__pie { flex: none; width: 132px; height: 132px; }
.ws81-d__pie .p1 { fill: var(--ws81-pz-crust); }
.ws81-d__pie .p2 { fill: var(--ws81-pz-sauce); }
.ws81-d__pie .p3 { fill: var(--ws81-pz-cheese); }
.ws81-d__pie .p4 { fill: var(--ws81-pz-pep); }
.ws81-d__pie .p5 { fill: var(--ws81-pz-mush); }
.ws81-d__pie .p6 { fill: var(--ws81-pz-basil); }
.ws81-d--pizza .ws81-d__chips { gap: 6px; }
.ws81-d--pizza .ws81-d__chip { padding: 7px 12px; border: 2px solid var(--ws81-pz-line); border-radius: 999px; font-size: 14px; }
.ws81-d--pizza .ws81-d__chip.is-on { background: var(--ws81-pz); border-color: var(--ws81-pz); color: var(--ws-white); }
.ws81-d--pizza input { accent-color: var(--ws81-pz); }
.ws81-d--pizza .ws81-d__chip.is-on input { accent-color: var(--ws-white); }
.ws81-d--pizza .ws81-d__lb + .ws81-d__chips { margin-top: -6px; }
.ws81-d--pizza .ws81-d__why { color: var(--ws81-pz-quiet); }
.ws81-d--pizza .ws81-d__in { border: 2px solid var(--ws81-pz-line); border-radius: 10px; }
.ws81-d__top { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid var(--ws81-pz-line); border-radius: 999px; font-size: 13px; font-weight: 700; }
.ws81-d__top.is-on { background: var(--ws81-pz-ink); border-color: var(--ws81-pz-ink); color: var(--ws81-pz-bg); }
.ws81-d--pizza .ws81-d__go { min-height: 50px; background: var(--ws81-pz); color: var(--ws-white); border-radius: 999px; font-size: 16px; font-weight: 900; }


/* === Four steps === */
.ws81-steps .ws81-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ws81-steps__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 14px;
    border-bottom: 1px solid var(--ws81-rail);
}
button.ws81-steps__tab,
button.ws81-steps__tab:hover,
button.ws81-steps__tab:focus {
    position: relative;
    min-height: 48px;
    margin: 0 14px;
    padding: 0 4px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--ws-muted);
    font-family: var(--ws-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}
button.ws81-steps__tab:hover { color: var(--ws-heading); }
/* Four tabs on one rail down to 360 */
@media (max-width: 519.98px) {
    button.ws81-steps__tab,
    button.ws81-steps__tab:hover,
    button.ws81-steps__tab:focus { margin: 0 6px; padding: 0 2px; font-size: 14px; }
}
button.ws81-steps__tab[aria-selected="true"] { color: var(--ws-heading); border-bottom-color: var(--ws-accent); }

.ws81-steps__panels { width: 100%; }
.ws81-steps__panel {
    width: 100%;
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px 56px;
}
/* No script: four panels stack. Rule between them. */
.ws81-steps__panel + .ws81-steps__panel { padding-top: 36px; border-top: 1px solid var(--ws81-rail); }

/* Script: one cell, tallest panel sets the height. */
.ws81-steps--live .ws81-steps__panels { display: grid; }
.ws81-steps--live .ws81-steps__panel { grid-area: 1 / 1; padding-top: 0; border-top: 0; }
.ws81-steps--live .ws81-steps__panel.is-off { visibility: hidden; }
.ws81-steps__panel.is-in-a { animation: ws81LiftA 380ms var(--ws-ease) both; }
.ws81-steps__panel.is-in-b { animation: ws81LiftB 380ms var(--ws-ease) both; }

.ws81-steps__text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.ws81-steps__text .ws81-checks { margin-top: 4px; }
.ws81-steps__mock { flex: 1.15 1 440px; min-width: 0; }

.ws81-ask,
.ws81-ask:hover,
.ws81-ask:focus {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 48px;
    padding: 14px 22px;
    background: var(--ws81-mock);
    color: var(--ws-heading);
    border: 1px solid var(--ws81-hair);
    border-radius: var(--ws-radius);
    box-shadow: 0 6px 24px rgba(82, 88, 91, 0.10);
    font-family: var(--ws-font);
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
}
.ws81-ask strong {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--ws-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
@media (hover: hover) {
    .ws81-ask:hover { box-shadow: 0 8px 32px rgba(82, 88, 91, 0.16); }
}


/* === Step mockups === */
.ws81-m {
    display: flex;
    flex-direction: column;
    background: var(--ws81-mock);
    color: var(--ws-text);
    border: 1px solid var(--ws81-hair);
    border-radius: var(--ws-radius);
    box-shadow: var(--ws81-mock-shadow);
    font-family: var(--ws-font);
    font-size: 14px;
    line-height: 1.4;
}
.ws81-m__pair { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.ws81-m__stack { display: flex; flex-direction: column; gap: 14px; }
.ws81-m__stack .ws81-m__pair { gap: 14px; }
.ws81-m__h { font-size: 18px; font-weight: 700; color: var(--ws-heading); }
.ws81-m__h--sm { font-size: 14px; }
.ws81-m__muted { color: var(--ws-muted); }
.ws81-m__small { font-size: 12px; }
.ws81-m__cap { font-size: 10px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ws-muted); }
.ws81-m__lb { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ws81-m__lb--case { letter-spacing: 0; text-transform: none; }
.ws81-m__field { display: block; height: 34px; border: 1px solid var(--ws-grey); border-radius: 3px; }
.ws81-m__field--sm { height: 30px; }
.ws81-m__hr { display: block; height: 1px; background: var(--ws81-hair); }
.ws81-m__line { display: flex; justify-content: space-between; gap: 10px; }
.ws81-m__mono { font-family: var(--ws-code); font-size: 12px; }
.ws81-m__good { font-weight: 700; color: var(--ws81-ok); }

.ws81-m--form { flex: 1 1 220px; gap: 10px; padding: 22px; }
.ws81-m__send { align-self: flex-start; margin-top: 4px; padding: 9px 16px; background: var(--ws-charcoal); color: var(--ws-white); border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
[data-theme="dark"] .ws81-m__send { box-shadow: inset 0 0 0 1px #3A3A40; }
.ws81-m--list { flex: 1 1 220px; gap: 4px; padding: 18px; }
.ws81-m--list .ws81-m__cap { margin-bottom: 6px; }
.ws81-m__sub { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--ws81-hair); font-size: 13px; }

.ws81-m--editor { overflow: hidden; }
.ws81-m__crumb { padding: 10px 16px; background: var(--ws81-alt); border-bottom: 1px solid var(--ws81-hair); font-family: var(--ws-code); font-size: 11px; color: var(--ws-muted); }
.ws81-m__split { display: flex; flex-wrap: wrap; }
/* Not a <pre>: main.css unsets every pre child */
.ws81-m__json {
    flex: 1 1 220px;
    min-width: 0;
    padding: 16px;
    overflow-x: auto;
    background: var(--ws-charcoal);
    color: var(--ws-light-grey);
    font-family: var(--ws-code);
    font-size: 12px;
    line-height: 1.6;
    white-space: pre;
}
.ws81-m__preview { flex: 1 1 200px; display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.ws81-m__ok { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ws81-ok); }
.ws81-m__ok i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.ws81-m--mail { gap: 8px; padding: 20px 22px; }
.ws81-m--mail .ws81-m__hr { margin: 4px 0; }
.ws81-m__body { line-height: 1.55; color: var(--ws81-lead); }
.ws81-m--tile { flex: 1 1 200px; gap: 6px; padding: 16px 18px; font-size: 13px; }

.ws81-m--checkout { flex: 1 1 220px; gap: 10px; padding: 22px; }
.ws81-m__pay { margin-top: 4px; padding: 11px 0; text-align: center; background: var(--ws-lime); color: var(--ws-black); border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.ws81-m--receipt { flex: 1 1 200px; gap: 8px; padding: 18px; font-size: 12px; }
.ws81-m__status { align-self: flex-start; margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--ws81-ok-wash); color: var(--ws81-ok); font-weight: 700; }


/* === Questions === */
.ws81-wrap--faq { max-width: 900px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ws81-faq .ws81-h2 { font-size: clamp(32px, 3.8vw, 46px); }
.ws81-faq .ws81-sub { margin-bottom: 22px; }
.ws81-faq__list { width: 100%; }
.ws81-faq__item { border-bottom: 1px solid var(--ws81-hair); }
.ws81-faq__q {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 2px;
    list-style: none;
    cursor: pointer;
    font-family: var(--ws-font);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ws-heading);
}
.ws81-faq__q::-webkit-details-marker { display: none; }
.ws81-faq__q::marker { content: ""; }
.ws81-faq__q .ws81-i { flex: none; transition: transform 0.25s var(--ws-ease); }
.ws81-faq__item[open] .ws81-faq__q .ws81-i { transform: rotate(90deg); }
.ws81-faq__a p {
    margin: 0 0 20px 28px;
    max-width: 68ch;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ws-muted);
}


/* === Download === */
.ws81-dl { padding: 0 0 var(--ws81-pad); background: var(--ws-bg); }
.ws81-dl__box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px 40px;
    padding: clamp(32px, 5vw, 56px);
    background: var(--ws81-alt);
    border: 1px solid var(--ws81-hair);
    border-radius: var(--ws-radius);
}
.ws81-dl__copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ws81-page .ws81-dl__h { margin-top: 6px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: normal; }
.ws81-page .ws81-dl__meta { font-size: 16px; line-height: 1.55; color: var(--ws-muted); }


/* === Footer strip ===
   Only footer on the page. Charcoal in both themes.
   Same rows as the other plugin page, so the two line up:
   plugin and Westphal credit, a rule, then links left, copyright right. */
.ws81-foot {
    background: var(--ws81-foot);
    color: var(--ws-grey);
    border-top: 1px solid var(--ws81-foot-edge);
    font-family: var(--ws-font);
}
.ws81-foot__inner {
    max-width: var(--ws81-max);
    margin: 0 auto;
    padding: 40px var(--ws81-gutter) 32px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.ws81-foot p { margin: 0; }
.ws81-foot ul { margin: 0; padding: 0; list-style: none; }
.ws81-foot__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.ws81-foot__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
/* Phrase and logo move as one. */
.ws81-foot__by { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; white-space: nowrap; }
.ws81-foot__ws { display: inline-flex; flex: none; }
/* Full lockup minimum is 120px wide. 32px tall clears it. */
.ws81-foot__ws img { display: block; width: auto; height: 32px; }

.ws81-foot__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 22px;
    border-top: 1px solid #3A3A40;
}
.ws81-foot__links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.ws81-foot__legal { font-size: 14px; }
/* Hover colors restated: parent theme recolors a:hover. */
.ws81-foot__link,
.ws81-foot__link:hover,
.ws81-foot__link:focus {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    font-size: 14px;
    font-weight: 400;
    color: var(--ws-white);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s var(--ws-ease);
}
@media (hover: hover) {
    .ws81-foot__link:hover { text-decoration-color: var(--ws-accent); }
}
/* Inline in a sentence, so it keeps its underline. White on grey is
   1.9:1, too close to mark a link by color alone. */
.ws81-foot__link--legal,
.ws81-foot__link--legal:hover,
.ws81-foot__link--legal:focus { display: inline; min-height: 0; text-decoration-color: var(--ws-accent); }
/* Heading color is black in light. Black ring on charcoal vanishes. */
.ws81-foot a:focus-visible,
.ws81-foot button:focus-visible { outline: 2px solid var(--ws-white); outline-offset: 3px; }

/* Phones. Rows stack, copyright drops under the links. */
@media (max-width: 599.98px) {
    .ws81-foot__base { flex-direction: column; align-items: flex-start; }
}


/* === Reduced motion. Land on the finished state. === */
@media (prefers-reduced-motion: reduce) {
    .ws81-lv { animation: none; will-change: auto; }
    .ws81-lv--1, .ws81-lv--3, .ws81-lv--5, .ws81-lv--7 { transform: perspective(900px) rotateX(6deg) rotateY(-8deg); }
    .ws81-lv--2, .ws81-lv--4, .ws81-lv--6 { transform: perspective(900px) rotateX(-6deg) rotateY(8deg); }
    .ws81-fits__line.is-in-a, .ws81-fits__line.is-in-b,
    .ws81-fits__item.is-in-a, .ws81-fits__item.is-in-b,
    .ws81-steps__panel.is-in-a, .ws81-steps__panel.is-in-b { animation: none; }
    .ws81-btn__c, .ws81-i, .ws81-bar__link { transition: none; }
    .ws81-btn[href]:hover .ws81-btn__c,
    .ws81-btn[href]:hover .ws81-i { transform: none; }
}