/* ---------------------------------------------------------------------------
 * Bizwave — landing page
 *
 * Ported from the approved design (reference/poe-preview (1).html). Two rules
 * govern this file, and both matter:
 *
 * 1. Every selector is scoped under `.landing`, and the palette lives on
 *    `.landing` rather than `:root`. The design defines its own --ink, --line
 *    and --radius, and `app.css` defines different values for the same names —
 *    scoping keeps the two apart, so the Bootstrap pieces that still render on
 *    this page (the flash toast stack, #confirmModal) keep their app.css look.
 *
 * 2. Only this page loads the file, so document-level rules (html, the
 *    reduced-motion reset) may stay unscoped.
 *
 * The design's generic class names (.btn, .section, .header, .field, .arrow)
 * are deliberately kept: nothing else lives inside `.landing`, so the scope is
 * what stops them reaching Bootstrap's own .btn/.modal markup.
 *
 * The design's contact dialog was renamed .modal -> .contact-modal, because
 * `.modal` is Bootstrap's.
 * --------------------------------------------------------------------------- */

.landing {
    --orange: #ff8100;
    --orange-dark: #bd5400;
    --orange-light: #fff0de;
    --ink: #20241f;
    --muted: #73766f;
    --paper: #fcfaf7;
    --line: #e8e6df;
    --white: #ffffff;
    --radius: 24px;
    /* Inter leads for Latin, Noto Sans TC for Chinese — both already loaded by
       head.php for the rest of the app. */
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;

    color: var(--ink);
    background: var(--paper);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    /* Short pages (an article, the article index) must still paint the paper
       colour to the bottom of the window, not leave the body's grey showing. */
    min-height: 100vh;
}

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

.landing *,
.landing *::before,
.landing *::after { box-sizing: border-box; }

.landing button,
.landing input,
.landing select { font: inherit; }
.landing button,
.landing a { -webkit-tap-highlight-color: transparent; }
.landing button { cursor: pointer; }
.landing a { color: inherit; text-decoration: none; }
.landing svg { display: block; }
.landing button:focus-visible,
.landing a:focus-visible,
.landing input:focus-visible,
.landing select:focus-visible {
    outline: 3px solid #ffac58;
    outline-offset: 5px;
}
.landing ::selection { background: #ffd3a1; color: var(--ink); }

.landing .wrap { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.landing .icon {
    width: 22px; height: 22px; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.landing .arrow { font-size: 21px; line-height: 1; }
.landing .eyebrow {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 750; letter-spacing: 2px;
    text-transform: uppercase; color: var(--orange-dark);
}
.landing .eyebrow::before {
    content: ""; width: 7px; height: 7px;
    border-radius: 50%; background: var(--orange);
}
.landing .btn {
    min-height: 50px; padding: 14px 23px;
    display: inline-flex; justify-content: center; align-items: center;
    gap: 24px; border-radius: 9px;
    font-weight: 650; font-size: 14px;
    border: 1px solid transparent;
    transition: transform .2s, background .2s, box-shadow .2s;
}
.landing .btn:hover { transform: translateY(-2px); }
.landing .btn-primary { background: var(--orange); color: #20170d; }
.landing .btn-primary:hover { background: #ff9529; box-shadow: 0 8px 25px #ff810025; }
.landing .btn-dark { background: var(--ink); color: white; }
.landing .btn-dark:hover { background: #383e35; }
.landing .btn-outline { background: transparent; border-color: #d6d6cd; }
.landing .btn-outline:hover { background: white; }
.landing .section { padding-block: 104px; }
.landing .section-title {
    font-size: clamp(30px, 3.6vw, 46px);
    line-height: 1.35; font-weight: 700;
    letter-spacing: -1.8px; margin: 21px 0 18px;
}
.landing .section-copy { color: var(--muted); font-size: 15px; line-height: 1.95; }

/* Navigation */
.landing .header {
    position: sticky; top: 0; z-index: 20;
    border-bottom: 1px solid #e8e6dfb0;
    background: #fcfaf7ec; backdrop-filter: blur(18px);
}
.landing .nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 28px; height: 88px; }
.landing .brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 12px; }
/* .brand-logo, not app.css's .brand-mark: that class carries display, gap,
   font-weight and letter-spacing meant for a text lockup, and scoping does not
   stop a lower-specificity rule from adding properties this one omits. */
.landing .brand-logo { display: block; width: auto; height: 52px; }
.landing .nav-links { display: flex; gap: 28px; align-items: center; font-size: 13px; }
.landing .nav-links > a { color: #666a61; white-space: nowrap; }
.landing .nav-links > a:hover,
.landing .nav-links > a[aria-current="page"] { color: var(--orange-dark); }
/* The nav-link colour above is more specific than .btn-dark, so restore the
   button text colours here. */
.landing .nav-links > a.btn-outline { color: var(--ink); }
.landing .nav-links > a.btn-dark,
.landing .nav-links > a.btn-dark:hover { color: #fff; }
.landing .nav .btn { min-height: 41px; padding: 10px 17px; font-size: 12px; gap: 18px; white-space: nowrap; }
.landing .menu-toggle {
    display: none; border: 1px solid var(--line);
    border-radius: 8px; background: transparent; padding: 9px;
}

/* Language switch — plain links, not Bootstrap's dropdown: the design's nav
   has no room for it, and this keeps Bootstrap out of the wrapper entirely. */
.landing .lang-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; white-space: nowrap; }
.landing .lang-switch a { color: #85877e; white-space: nowrap; }
.landing .lang-switch a:hover { color: var(--orange-dark); }
.landing .lang-switch a.is-active { color: var(--ink); font-weight: 650; }
.landing .lang-switch .sep { color: #cfd2c8; }

/* Hero */
.landing .hero { padding-top: 72px; overflow: hidden; }
.landing .hero-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: center; gap: 28px; min-height: 565px;
}
.landing .hero-copy { padding-bottom: 25px; position: relative; z-index: 2; }
.landing .hero-label {
    display: inline-flex; gap: 8px; align-items: center;
    font-size: 11px; letter-spacing: 1.1px; font-weight: 650;
    padding: 8px 11px; border: 1px solid #efdcca;
    border-radius: 6px; background: #fff8ef; color: #a25012;
}
.landing .hero-label .icon { width: 15px; height: 15px; }
.landing h1 {
    font-size: clamp(42px, 4.9vw, 65px); line-height: 1.25;
    letter-spacing: -3px; font-weight: 750; margin: 25px 0;
}
.landing h1 .accent { color: var(--orange); }
.landing .hero-description { font-size: 16px; color: #777a71; line-height: 1.95; margin: 0; }
.landing .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.landing .hero-meta {
    display: flex; gap: 18px; flex-wrap: wrap;
    margin-top: 25px; color: #7c7f74; font-size: 11px;
}
.landing .hero-meta span { display: inline-flex; gap: 6px; align-items: center; }
.landing .hero-meta .icon { width: 14px; height: 14px; color: #858c7a; }

/* Product illustration */
.landing .visual { position: relative; height: 540px; isolation: isolate; }
.landing .orb {
    position: absolute; width: 435px; height: 435px;
    border-radius: 50%; background: #fff0dc;
    top: 38px; left: 55px; z-index: -2;
}
.landing .orbit {
    position: absolute; width: 490px; height: 490px;
    top: 10px; left: 28px; border: 1px solid #eddac2;
    border-radius: 50%; z-index: -1;
}
.landing .orbit::after {
    content: ""; position: absolute; width: 8px; height: 8px;
    background: var(--orange); border: 5px solid var(--paper);
    box-sizing: content-box; border-radius: 50%; top: 52px; right: 67px;
}
.landing .float-label {
    position: absolute; display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #eeece6; border-radius: 12px;
    padding: 11px 15px; box-shadow: 0 10px 35px #29291808;
    font-size: 11px; z-index: 5;
}
.landing .float-label .icon { color: var(--orange); width: 19px; height: 19px; }
.landing .label-top { top: 38px; left: 0; transform: rotate(-5deg); }
.landing .label-bottom { bottom: 49px; right: 2px; transform: rotate(4deg); }
.landing .label-bottom strong { display: block; font-size: 11px; margin-bottom: 3px; }
.landing .label-bottom small { color: var(--muted); font-size: 9px; }

.landing .phone {
    position: absolute; width: 220px; height: 435px;
    top: 51px; right: 35px; background: #272a26;
    border-radius: 34px; padding: 7px;
    box-shadow: 20px 25px 45px #3b331b22, inset 0 0 0 2px #66665f;
    transform: rotate(8deg); z-index: 2;
}
.landing .phone-screen { height: 100%; background: #fff; border-radius: 28px; overflow: hidden; position: relative; }
.landing .phone-status {
    display: flex; justify-content: space-between;
    padding: 13px 17px 9px; font-size: 8px; font-weight: 700; height: 37px;
    background: #f8f5ed;
}
.landing .island {
    width: 64px; height: 16px; background: #242724;
    position: absolute; top: 8px; left: 50%;
    transform: translateX(-50%); border-radius: 20px;
}
.landing .profile-cover {
    height: 76px; background: #f8f5ed;
    position: relative; overflow: hidden;
}
.landing .cover-ring {
    position: absolute; width: 165px; height: 165px;
    border: 1px solid #e3d8c4; border-radius: 50%;
    right: -22px; top: -80px;
}
.landing .cover-ring:nth-child(2) { width: 125px; height: 125px; right: -2px; top: -60px; }
.landing .cover-ring:nth-child(3) { width: 85px; height: 85px; right: 18px; top: -40px; }
.landing .phone-profile { padding: 0 17px; position: relative; }
.landing .avatar {
    width: 52px; height: 52px; background: #e6eadf; color: #506247;
    border: 4px solid white; border-radius: 50%;
    margin-top: -26px; display: grid; place-items: center;
    font-size: 15px; font-weight: 650; position: relative;
}
.landing .profile-name { font-size: 20px; letter-spacing: -.6px; margin: 9px 0 3px; }
.landing .profile-role { font-size: 8px; color: #787c73; }
.landing .profile-company { font-size: 8px; margin-top: 5px; letter-spacing: 1.2px; font-weight: 700; }
.landing .profile-bio { color: #8c9087; font-size: 8px; line-height: 1.8; margin: 13px 0; }
.landing .save-contact {
    width: 100%; background: var(--orange); border: 0; border-radius: 6px;
    font-weight: 650; font-size: 9px; padding: 10px 5px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.landing .save-contact .icon { width: 12px; height: 12px; }
.landing .phone-links { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.landing .phone-link {
    padding: 9px 2px; border: 1px solid #eceee7;
    border-radius: 7px; text-align: center; font-size: 7px; color: #7b8174;
}
.landing .phone-link .icon { width: 14px; height: 14px; margin: 0 auto 5px; color: #525b4b; }
.landing .phone-credit { text-align: center; margin-top: 21px; color: #a6aa9f; font-size: 7px; }
.landing .phone-credit b { color: var(--orange); font-weight: 650; }
.landing .home-indicator {
    position: absolute; bottom: 7px; width: 72px;
    height: 3px; border-radius: 3px; background: #282b24; left: 50%;
    transform: translateX(-50%);
}
.landing .business-card {
    position: absolute; top: 230px; left: -5px;
    width: 284px; height: 171px; background: #252923;
    border-radius: 12px; z-index: 3; padding: 22px;
    color: white; overflow: hidden; transform: rotate(-13deg);
    box-shadow: 0 24px 35px #25292335;
    transition: transform .6s;
}
.landing .card-brand { font-size: 20px; font-weight: 400; letter-spacing: -1px; color: var(--orange); }
.landing .card-brand span { font-weight: 250; color: white; }
.landing .card-nfc { position: absolute; top: 25px; right: 23px; color: #c0c5b8; }
.landing .card-nfc .icon { width: 23px; height: 23px; }
.landing .card-person { position: absolute; bottom: 25px; left: 23px; z-index: 1; }
.landing .card-person strong { display: block; font-size: 12px; font-weight: 550; }
.landing .card-person small { display: block; font-size: 7px; color: #b2b8a8; margin-top: 5px; letter-spacing: 1px; }
.landing .card-ring {
    position: absolute; height: 240px; width: 240px;
    border: 1px solid #555d492e; border-radius: 50%; right: -90px; bottom: -145px;
}
.landing .card-ring.r2 { width: 190px; height: 190px; bottom: -120px; right: -65px; }
.landing .card-ring.r3 { width: 140px; height: 140px; bottom: -95px; right: -40px; }
.landing .tap-point {
    position: absolute; z-index: 4; top: 201px; left: 215px;
    width: 48px; height: 48px; display: grid; place-items: center;
    border-radius: 50%; background: var(--orange); color: white;
    box-shadow: 0 0 0 9px #ff810018;
}
.landing .tap-point::after {
    content: ""; position: absolute; inset: -10px;
    border: 1px solid #ff810055; border-radius: 50%;
    animation: pulse 2.5s infinite;
}
.landing .visual.is-tapping .business-card { transform: translate(32px, -35px) rotate(-7deg); }
.landing .visual.is-tapping .tap-point { background: #617955; }
.landing .visual-caption {
    position: absolute; bottom: 4px; width: 100%;
    text-align: center; font-size: 10px; color: #96998f;
    letter-spacing: .5px;
}
@keyframes pulse {
    0% { transform: scale(.8); opacity: .8; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* Transition strip */
.landing .intro-strip {
    display: flex; align-items: center; justify-content: space-between;
    gap: 25px; padding: 30px 0; border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line); margin-top: 36px;
}
.landing .strip-label { font-size: 10px; letter-spacing: 1.6px; color: #919489; line-height: 1.8; }
.landing .strip-item { display: flex; align-items: center; gap: 11px; font-size: 13px; color: #636a5c; }
.landing .strip-item .icon { color: #7a846f; width: 20px; height: 20px; }

/* Benefits */
.landing .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 38px; }
.landing .section-head .section-title { margin-bottom: 0; }
.landing .section-head .section-copy { max-width: 320px; margin-bottom: 4px; }
.landing .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.landing .feature {
    padding: 31px; background: white; border: 1px solid var(--line);
    border-radius: 16px; transition: transform .25s, box-shadow .25s;
}
.landing .feature:hover { transform: translateY(-5px); box-shadow: 0 15px 35px #29291806; }
.landing .feature-icon {
    height: 45px; width: 45px; border-radius: 12px;
    background: #fff4e7; color: var(--orange-dark);
    display: grid; place-items: center; margin-bottom: 28px;
}
.landing .feature-num { float: right; color: #b5b7af; font-size: 10px; letter-spacing: 1px; }
.landing .feature h3 { font-size: 19px; margin: 0 0 13px; letter-spacing: -.5px; font-weight: 650; }
.landing .feature p { font-size: 13px; color: var(--muted); line-height: 1.9; margin: 0; }
.landing .feature-tag {
    display: inline-block; margin-top: 26px; padding: 6px 9px;
    background: #f6f7f2; color: #7e8674; border-radius: 5px;
    font-size: 9px; letter-spacing: .7px;
}

/* Demo section */
.landing .experience { background: #f1f2ec; border-block: 1px solid #e5e7dc; }
.landing .experience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; align-items: center; }
.landing .demo-panel {
    min-height: 350px; background: #e8ebe0; border: 1px solid #dde1d1;
    border-radius: 20px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 35px 24px;
    position: relative; overflow: hidden;
}
.landing .demo-panel::before,
.landing .demo-panel::after {
    content: ""; position: absolute; width: 330px; height: 330px;
    border: 1px solid #d6ddc7; border-radius: 50%; pointer-events: none;
}
.landing .demo-panel::after { width: 440px; height: 440px; }
.landing .demo-card {
    width: 242px; height: 148px; border: 0;
    background: #fafbf6; border-radius: 12px; padding: 22px;
    text-align: left; position: relative; z-index: 2;
    box-shadow: 0 18px 35px #5d68451c; transform: rotate(-7deg);
    transition: transform .35s;
}
.landing .demo-card:hover { transform: rotate(-2deg) translateY(-5px); }
.landing .demo-card .card-brand { font-size: 23px; }
.landing .demo-card .card-brand span { color: #424a38; }
.landing .demo-card .card-person { bottom: 22px; }
.landing .demo-card .card-person strong { color: #4a5340; font-size: 11px; }
.landing .demo-card .card-person small { color: #9ba18f; }
.landing .demo-card > .icon { position: absolute; right: 21px; top: 25px; color: #7a8867; }
.landing .demo-instruction { z-index: 2; margin: 29px 0 0; font-size: 11px; color: #68745b; }
.landing .demo-status {
    z-index: 2; min-height: 35px; margin-top: 15px; text-align: center;
    font-size: 12px; line-height: 1.6; color: #4d6440;
}
.landing .steps { margin-top: 29px; display: grid; gap: 23px; }
.landing .step { display: flex; gap: 16px; }
.landing .step-no {
    width: 28px; height: 28px; flex-shrink: 0;
    border: 1px solid #cfd4c5; border-radius: 50%;
    display: grid; place-items: center; font-size: 10px; color: #758368;
}
.landing .step h3 { margin: 2px 0 5px; font-size: 15px; font-weight: 650; }
.landing .step p { margin: 0; font-size: 12px; line-height: 1.8; color: var(--muted); }
.landing .compatibility { font-size: 10px; line-height: 1.8; color: #8d9385; margin-top: 26px; }

/* Pricing — the one section the design does not carry. Same language, real
   rows from the plans table. */
.landing .plan-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
    gap: 18px; margin-top: 40px;
}
.landing .plan-tile {
    padding: 26px 24px; border-radius: 16px;
    border: 1px solid var(--line); background: #f5f4ee;
    position: relative; display: flex; flex-direction: column;
}
.landing .plan-tile.is-featured { background: #292e26; color: white; border-color: #292e26; }
.landing .plan-flag {
    align-self: flex-start; margin-bottom: 14px; padding: 5px 9px;
    background: var(--orange); color: #20170d; border-radius: 5px;
    font-size: 9px; font-weight: 700; letter-spacing: 1px;
}
.landing .plan-tile h3 { margin: 0 0 7px; font-size: 20px; font-weight: 650; letter-spacing: -.6px; }
.landing .plan-tile .plan-desc { margin: 0 0 18px; font-size: 12px; line-height: 1.75; opacity: .64; }
/* Wraps rather than overflowing: "$1,680 HKD" is wide enough to push the cycle
   label out of a five-across grid, and a wrapped cycle reads better than one
   stranded at the far right. */
.landing .plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
.landing .plan-price strong { font-size: 26px; font-weight: 700; letter-spacing: -1.2px; white-space: nowrap; }
.landing .plan-cycle { font-size: 11px; opacity: .6; }
.landing .plan-savings {
    margin: 7px 0 0; font-size: 12px; font-weight: 650; line-height: 1.5;
    color: var(--orange);
}
.landing .plan-tile.is-featured .plan-savings { color: #ffb45e; }
.landing .plan-limit {
    margin-top: 12px; align-self: flex-start;
    padding: 5px 8px; border-radius: 5px; font-size: 9px; letter-spacing: .7px;
    background: #ffffff; color: #7e8674; border: 1px solid #e3e4da;
}
.landing .plan-tile.is-featured .plan-limit {
    background: #3a4034; color: #d6dcc9; border-color: #454c3e;
}
.landing .plan-features { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 10px; }
.landing .plan-features li { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.6; opacity: .78; }
.landing .plan-features .icon { width: 15px; height: 15px; margin-top: 2px; color: var(--orange); }
/* margin-top:auto keeps the button on the floor of every tile, however much
   copy the plan carries. */
.landing .plan-tile .btn { margin-top: auto; width: 100%; gap: 12px; }
.landing .plan-tile.is-featured .btn-outline { border-color: #565f4c; color: white; }
.landing .plan-tile.is-featured .btn-outline:hover { background: #3a4034; }
.landing .plan-empty { text-align: center; color: var(--muted); margin-top: 40px; }

/* Currency / billing-cycle switches. Hidden until landing.js has applied the
   stored preference, so a no-JS visitor never sees a dead control. */
.landing .plan-switches {
    display: none; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 28px;
}
.landing .plan-switches.is-ready { display: flex; }
.landing .segmented {
    display: inline-flex; gap: 2px; padding: 3px;
    border: 1px solid var(--line); border-radius: 9px; background: #f5f4ee;
}
.landing .segment {
    border: 0; background: transparent; border-radius: 6px;
    padding: 7px 13px; font-size: 11px; font-weight: 650; letter-spacing: .3px;
    color: #777a71; transition: background .18s, color .18s;
}
.landing .segment:hover { color: var(--ink); }
.landing .segment.is-active,
.landing .segment[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* Use cases */
.landing .use-head { text-align: center; }
.landing .use-head .eyebrow { justify-content: center; }
.landing .use-head .section-copy { margin-top: 0; }
.landing .use-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 20px; margin-top: 40px; }
.landing .use-card {
    min-height: 260px; padding: 28px; border-radius: 16px;
    border: 1px solid var(--line); background: #f5f4ee;
    position: relative; display: flex; flex-direction: column;
}
.landing .use-card:first-child { background: #292e26; color: white; border-color: #292e26; }
.landing .use-card:nth-child(2) { background: #fff0df; border-color: #f5e3cd; }
.landing .use-top { display: flex; align-items: center; justify-content: space-between; }
.landing .use-top span { font-size: 9px; letter-spacing: 1.4px; opacity: .5; }
.landing .use-top .icon { width: 26px; height: 26px; opacity: .7; }
.landing .use-card h3 { margin: auto 0 9px; padding-top: 43px; font-size: 22px; font-weight: 600; letter-spacing: -.7px; }
.landing .use-card p { margin: 0; font-size: 12px; line-height: 1.8; opacity: .64; }

/* Clients — logos are managed in the admin Landing page */
.landing .clients-section { padding-block: 0 64px; }
.landing .client-strip {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 18px 46px; padding-block: 28px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.landing .client-logo {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 34px; color: #8b9083;
    font-size: 13px; font-weight: 650; letter-spacing: .4px;
    transition: color .18s, opacity .18s;
}
.landing .client-logo img {
    display: block; max-width: 190px; max-height: 60px;
    width: auto; height: auto; object-fit: contain;
    opacity: 1; transition: opacity .18s;
}
.landing .client-logo a:hover img { opacity: .78; }
.landing .client-logo a:hover { color: var(--ink); }

/* Testimonials */
.landing .testimonials-section { padding-top: 30px; }
.landing .testimonial-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px; margin-top: 34px;
}
.landing .testimonial-card {
    margin: 0; padding: 30px 28px 26px; border-radius: 16px;
    border: 1px solid var(--line); background: #f7f6f1;
    display: flex; flex-direction: column; gap: 24px;
}
.landing .testimonial-card:nth-child(3n + 2) { background: #fff0df; border-color: #f5e3cd; }
.landing .testimonial-card:nth-child(3n + 3) { background: #292e26; border-color: #292e26; color: #fff; }
.landing .testimonial-card blockquote {
    margin: 0; font-size: 15px; line-height: 1.9; letter-spacing: -.15px;
}
.landing .testimonial-card figcaption {
    margin-top: auto; display: flex; align-items: center; gap: 12px;
}
.landing .testimonial-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    object-fit: cover; flex: none;
}
.landing .testimonial-initial {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--orange); color: #fff;
    font-size: 16px; font-weight: 700;
}
.landing .testimonial-person { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.landing .testimonial-person strong { font-size: 13px; font-weight: 650; letter-spacing: -.1px; }
.landing .testimonial-person small { font-size: 10px; line-height: 1.5; opacity: .58; }

/* Articles — the public writing page, sharing this layout with the landing */
.landing .articles-hero { padding-block: 78px 26px; }
.landing .articles-heading {
    margin: 20px 0 16px; font-size: clamp(44px, 6.2vw, 82px);
    line-height: .98; letter-spacing: -3px; font-weight: 700;
}
.landing .articles-lead { max-width: 600px; font-size: 15px; }
.landing .articles-list { padding-top: 26px; }
.landing .articles-empty {
    padding: 56px 0; color: var(--muted); font-size: 14px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.landing .article-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}
.landing .article-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    transition: transform .25s, box-shadow .25s;
}
.landing .article-card:hover {
    transform: translateY(-4px); box-shadow: 0 18px 42px #20241f12;
}
.landing .article-cover {
    display: block; aspect-ratio: 16 / 9; overflow: hidden;
    background: #292e26;
}
.landing .article-cover img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .55s;
}
.landing .article-card:hover .article-cover img { transform: scale(1.04); }
.landing .article-cover-fallback {
    height: 100%; display: flex; align-items: center; justify-content: center;
    color: var(--orange); font-size: 25px; font-weight: 600; letter-spacing: -1px;
}
.landing .article-cover-fallback span { color: #8b9083; font-weight: 350; }
.landing .article-card-body {
    display: flex; flex-direction: column; flex: 1;
    padding: 24px 24px 22px;
}
.landing .article-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 10px; font-weight: 650; letter-spacing: 1.3px;
    text-transform: uppercase; color: #91968a;
}
.landing .article-card h2 {
    margin: 12px 0 10px; font-size: 21px; line-height: 1.42;
    letter-spacing: -.6px; font-weight: 650;
}
.landing .article-card h2 a { transition: color .18s; }
.landing .article-card h2 a:hover { color: var(--orange-dark); }
.landing .article-card p {
    margin: 0; font-size: 13px; line-height: 1.85; color: var(--muted);
}
.landing .article-more {
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .2px;
}
.landing .article-more span { transition: transform .18s; }
.landing .article-more:hover span { transform: translate(2px, -2px); }

/* One article */
.landing .article-page { padding-top: 46px; max-width: 780px; }
.landing .article-back {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 650; color: var(--muted);
    transition: color .18s;
}
.landing .article-back:hover { color: var(--ink); }
.landing .article-head { margin-top: 34px; }
.landing .article-head h1 {
    margin: 18px 0 16px; font-size: clamp(36px, 5vw, 62px);
    line-height: 1.08; letter-spacing: -2.2px; font-weight: 700;
}
.landing .article-meta-detail {
    font-size: 10px; letter-spacing: 1.1px; color: #8b9083;
}
.landing .article-hero-cover {
    margin: 38px 0 0; border-radius: 18px; overflow: hidden;
    background: #292e26;
}
.landing .article-hero-cover img {
    display: block; width: 100%; max-height: 520px; object-fit: cover;
}
.landing .article-body {
    margin: 46px 0 0;
    color: #33382f; font-size: 17px; line-height: 1.95;
}
.landing .article-body p { margin-bottom: 1.5rem; }
.landing .article-body h2 {
    margin: 2.6rem 0 1rem; font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.3; letter-spacing: -0.5px; font-weight: 700; color: var(--ink);
}
.landing .article-body .bio-figure { margin: 34px 0; }
.landing .article-body .bio-figure img { border-radius: 14px; }
.landing .article-body .bio-video { margin: 34px 0 8px; border-radius: 14px; }
.landing .article-body .bio-link a {
    color: var(--orange-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.landing .article-footer {
    margin: 54px 0 0; padding-top: 26px;
    border-top: 1px solid var(--line);
}
.landing .article-preview-banner {
    padding: 12px 20px; text-align: center;
    background: #fff0df; color: #7a4a10;
    font-size: 12px; font-weight: 650;
}

/* CTA & footer */
.landing .cta { padding-bottom: 75px; }
.landing .cta-box {
    padding: 54px 58px; border-radius: 20px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 30px; background: #ff8100; position: relative; overflow: hidden;
}
.landing .cta-box::after {
    content: ""; position: absolute; width: 370px; height: 370px;
    border: 1px solid #ffffff30; border-radius: 50%;
    right: -75px; top: -140px; pointer-events: none;
}
.landing .cta-kicker { font-size: 10px; letter-spacing: 2px; color: #6e3908; margin-bottom: 12px; font-weight: 700; }
.landing .cta h2 { font-size: clamp(27px, 3vw, 38px); letter-spacing: -1.5px; margin: 0 0 13px; font-weight: 700; }
.landing .cta p { margin: 0; font-size: 13px; color: #713d0e; line-height: 1.8; }
.landing .cta .btn { position: relative; z-index: 1; white-space: nowrap; }
.landing .footer { border-top: 1px solid var(--line); }
.landing .footer-main { padding: 30px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.landing .footer-logo { display: block; width: auto; height: 38px; }
.landing .footer-links { display: flex; gap: 26px; font-size: 11px; color: #737a69; }
.landing .footer-bottom {
    border-top: 1px solid var(--line); padding: 18px 0;
    display: flex; gap: 14px; justify-content: space-between;
    font-size: 9px; color: #979c8e; letter-spacing: .4px;
}

/* Contact dialog (design's .modal, renamed: Bootstrap owns .modal) */
.landing .contact-modal[hidden] { display: none; }
.landing .contact-modal {
    position: fixed; inset: 0; z-index: 100; padding: 24px;
    background: #1d241c80; backdrop-filter: blur(7px);
    display: flex; align-items: center; justify-content: center;
}
.landing .contact-box {
    width: 100%; max-width: 470px; max-height: 90dvh; overflow-y: auto;
    padding: 35px; background: var(--paper);
    border-radius: 20px; position: relative; box-shadow: 0 25px 90px #0002;
}
.landing .contact-close {
    position: absolute; top: 17px; right: 17px;
    border: 0; background: #eeeee7; border-radius: 50%;
    padding: 7px; color: #606857;
}
.landing .contact-close .icon { width: 17px; height: 17px; }
.landing .contact-box h2 { font-size: 27px; letter-spacing: -1px; margin: 17px 0 10px; }
.landing .modal-intro { font-size: 13px; line-height: 1.8; color: var(--muted); }
.landing .field { margin-top: 18px; }
.landing .field label { display: block; font-size: 12px; font-weight: 650; margin-bottom: 8px; }
.landing .field input,
.landing .field select {
    display: block; width: 100%; padding: 12px;
    border: 1px solid #dfe2d7; background: white; border-radius: 7px;
    font-size: 14px; color: var(--ink);
}
.landing .contact-box .submit-btn { margin-top: 23px; width: 100%; }
.landing .form-note { font-size: 10px; color: #93998a; line-height: 1.8; margin-bottom: 0; }
.landing .form-result { font-size: 13px; line-height: 1.8; color: #596b4a; }
.landing .form-result:empty { display: none; }

/* FAQ */
.landing .faq-hero { padding-block: 78px 26px; }
.landing .faq-heading {
    margin: 20px 0 16px; font-size: clamp(44px, 6.2vw, 82px);
    line-height: .98; letter-spacing: -3px; font-weight: 700;
}
.landing .faq-lead { max-width: 620px; font-size: 15px; }
.landing .faq-list { padding-top: 26px; }
.landing .faq-empty {
    padding: 56px 0; color: var(--muted); font-size: 14px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.landing .faq-item {
    border-top: 1px solid var(--line);
}
.landing .faq-item:last-child { border-bottom: 1px solid var(--line); }
.landing .faq-item summary {
    display: flex; align-items: center; gap: 24px;
    padding: 25px 4px; cursor: pointer; list-style: none;
    font-size: clamp(17px, 2vw, 21px); font-weight: 600;
    letter-spacing: -.35px; line-height: 1.45;
}
.landing .faq-item summary::-webkit-details-marker { display: none; }
.landing .faq-item summary:hover .faq-question { color: var(--orange-dark); }
.landing .faq-question { flex: 1; transition: color .18s; }
.landing .faq-toggle {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--line); position: relative;
    transition: transform .25s, background .25s, border-color .25s;
}
.landing .faq-toggle::before,
.landing .faq-toggle::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 13px; height: 1.5px; background: var(--ink);
    transform: translate(-50%, -50%); transition: opacity .2s;
}
.landing .faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.landing .faq-item[open] .faq-toggle {
    background: var(--orange); border-color: var(--orange); transform: rotate(45deg);
}
.landing .faq-item[open] .faq-toggle::before,
.landing .faq-item[open] .faq-toggle::after { background: #fff; }
.landing .faq-answer {
    max-width: 900px; padding: 0 62px 29px 4px;
    color: var(--muted); font-size: 14px; line-height: 1.95;
}
.landing .faq-cta { padding-top: 0; padding-bottom: 50px; }
.landing .faq-cta-box {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 34px;
    padding: 40px 44px; border-radius: var(--radius);
    background: #f1efe8; border: 1px solid var(--line);
}
.landing .faq-cta-box h2 {
    margin: 13px 0 10px; font-size: clamp(28px, 3.2vw, 40px);
    letter-spacing: -1.4px; line-height: 1.1;
}
.landing .faq-cta-box .section-copy { margin-bottom: 0; max-width: 620px; }
.landing .faq-cta-box .btn { flex: none; }
.landing .reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    .js .landing .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s, transform .65s; }
    .js .landing .reveal.visible { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1350px) {
    .landing .hero { padding-top: 85px; }
    .landing .hero-grid { min-height: 590px; }
}
@media (max-width: 1250px) {
    /* The Sign in button needs a little more room, so the nav tightens. */
    .landing .nav-links { gap: 22px; }
}
@media (max-width: 1130px) {
    .landing .nav-links { gap: 16px; }
}
@media (max-width: 1000px) {
    .landing .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
    .landing h1 { font-size: 48px; }
    .landing .hero-description { font-size: 14px; }
    .landing .visual { transform: scale(.85); transform-origin: center right; margin-left: -65px; }
    .landing .experience-grid { gap: 45px; }
    .landing .feature { padding: 25px; }
    .landing .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing .cta-box { padding: 42px; }
}
@media (max-width: 1060px) {
    /* Collapse the full nav before the buttons start crowding the brand.
       The 760px block below repeats these declarations with the shorter
       mobile header height. */
    .landing .menu-toggle { display: block; }
    .landing .nav-links {
        display: none; position: absolute; top: 88px;
        left: 0; right: 0; padding: 25px 20px;
        background: var(--paper); border-bottom: 1px solid var(--line);
        box-shadow: 0 15px 20px #2221; align-items: stretch;
    }
    .landing .nav-links.open { display: flex; flex-direction: column; gap: 23px; }
    .landing .nav-links > a { padding: 3px 0; }
}
@media (max-width: 760px) {
    html { scroll-padding-top: 85px; }
    .landing .wrap { width: calc(100% - 40px); }
    .landing .nav { height: 74px; }
    .landing .brand-logo { height: 42px; width: auto; }
    .landing .menu-toggle { display: block; }
    .landing .nav-links {
        display: none; position: absolute; top: 74px;
        left: 0; right: 0; padding: 25px 20px;
        background: var(--paper); border-bottom: 1px solid var(--line);
        box-shadow: 0 15px 20px #2221; align-items: stretch;
    }
    .landing .nav-links.open { display: flex; flex-direction: column; gap: 23px; }
    .landing .nav-links > a { padding: 3px 0; }
    .landing .hero { padding-top: 43px; }
    /* minmax(0, 1fr), not 1fr: the illustration below is a fixed 480px, and a
       plain 1fr track cannot shrink below its item's min-content — the track
       would widen to 480px and drag the hero copy out past the screen edge with
       it. Zero lets the track stay the width of the screen and the artwork
       bleed, which is what `.hero { overflow: hidden }` is there for. */
    .landing .hero-grid { grid-template-columns: minmax(0, 1fr); }
    .landing .hero-copy { padding-bottom: 0; }
    .landing h1 { font-size: clamp(40px, 9.2vw, 60px); letter-spacing: -2px; margin: 23px 0; }
    .landing .hero-description { font-size: 14px; }
    .landing .hero-label { font-size: 10px; }
    .landing .hero-actions { margin-top: 26px; }
    .landing .hero-actions .btn { flex: 1; font-size: 13px; padding-inline: 15px; gap: 14px; }
    .landing .hero-meta { gap: 13px; font-size: 10px; }
    .landing .visual {
        width: 480px; max-width: none; height: 510px;
        margin: -12px auto -37px;
        transform: scale(.85); transform-origin: center center;
        justify-self: center;
    }
    .landing .phone { right: 35px; }
    .landing .orb { left: 22px; }
    .landing .orbit { left: -5px; }
    .landing .business-card { left: 0; width: 264px; }
    .landing .tap-point { left: 205px; }
    .landing .label-top { left: 10px; top: 55px; }
    .landing .label-bottom { right: 10px; bottom: 40px; }
    .landing .intro-strip { margin-top: 0; flex-wrap: wrap; gap: 21px; padding-block: 24px; }
    .landing .strip-label { width: 100%; font-size: 9px; }
    .landing .strip-label br { display: none; }
    .landing .strip-item { font-size: 11px; gap: 7px; }
    .landing .strip-item .icon { width: 17px; height: 17px; }
    .landing .section { padding-block: 67px; }
    .landing .section-head { display: block; margin-bottom: 28px; }
    .landing .section-head .section-copy { margin-top: 18px; max-width: none; font-size: 14px; }
    .landing .section-title { font-size: 32px; letter-spacing: -1px; }
    .landing .feature-grid { grid-template-columns: 1fr; gap: 13px; }
    .landing .feature { padding: 26px; }
    .landing .feature-icon { margin-bottom: 20px; }
    .landing .feature-tag { margin-top: 18px; }
    .landing .experience-grid { grid-template-columns: 1fr; gap: 35px; }
    .landing .experience-copy { order: -1; }
    .landing .demo-panel { min-height: 320px; }
    .landing .plan-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 29px; }
    .landing .plan-tile { padding: 24px 22px; }
    .landing .use-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 29px; }
    .landing .use-card { min-height: 220px; }
    .landing .use-head { text-align: left; }
    .landing .clients-section { padding-bottom: 44px; }
    .landing .client-strip { gap: 14px 28px; padding-block: 22px; justify-content: flex-start; }
    .landing .client-logo img { max-width: 104px; max-height: 34px; }
    .landing .testimonial-grid { grid-template-columns: 1fr; gap: 13px; margin-top: 26px; }
    .landing .testimonial-card { padding: 24px 22px 22px; gap: 18px; }
    .landing .articles-hero { padding-block: 46px 18px; }
    .landing .articles-heading { letter-spacing: -2px; margin-top: 15px; }
    .landing .faq-hero { padding-block: 46px 18px; }
    .landing .faq-heading { letter-spacing: -2px; margin-top: 15px; }
    .landing .faq-item summary { padding-block: 20px; gap: 16px; }
    .landing .faq-answer { padding: 0 2px 23px; }
    .landing .faq-cta-box { display: block; padding: 30px 24px; }
    .landing .faq-cta-box .btn { margin-top: 22px; }
    .landing .article-grid { grid-template-columns: 1fr; gap: 15px; }
    .landing .article-card-body { padding: 20px 20px 18px; }
    .landing .article-page { padding-top: 30px; }
    .landing .article-head { margin-top: 24px; }
    .landing .article-head h1 { letter-spacing: -1.2px; }
    .landing .article-hero-cover { margin-top: 26px; border-radius: 12px; }
    .landing .article-body { margin-top: 30px; font-size: 16px; line-height: 1.9; }
    .landing .article-footer { margin-top: 36px; }
    .landing .use-head .eyebrow { justify-content: flex-start; }
    .landing .use-card h3 { padding-top: 30px; }
    .landing .cta { padding-top: 0; padding-bottom: 50px; }
    .landing .cta-box { padding: 34px 26px; display: block; }
    .landing .cta h2 { font-size: 29px; }
    .landing .cta .btn { margin-top: 25px; }
    .landing .footer-main { align-items: flex-start; }
    .landing .footer-links { flex-direction: column; gap: 15px; text-align: right; }
    .landing .footer-bottom { flex-direction: column; line-height: 1.7; gap: 5px; }
}
@media (max-width: 390px) {
    .landing .visual { transform: scale(.72); margin-top: -37px; margin-bottom: -65px; }
    .landing .hero-actions { flex-direction: column; }
    .landing .hero-meta { font-size: 9px; gap: 10px; }
    .landing .contact-box { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .landing *,
    .landing *::before,
    .landing *::after {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 760px) {
    .landing .plan-switches.is-ready { display: flex; flex-direction: column; align-items: stretch; }
    .landing .segmented { display: flex; }
    .landing .segment { flex: 1; }
}