@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Libre+Baskerville:wght@400;700&display=swap');
:root {
    --bg:#070e14;
    --panel:#111c27;
    --panel2:#17232e;
    --orange:#ff772b;
    --gold:#ffab4b;
    --text:#f7f7f5;
    --muted:#a8b2bd;
    --line:#27313a
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:16px/1.55 'DM Sans',Arial,sans-serif
}

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

a:hover {
    color:var(--gold)
}

.shell {
    max-width:1320px;
    margin:auto;
    padding-left:34px;
    padding-right:34px
}

.skip {
    position:absolute;
    left:-999px;
    top:0
}

.skip:focus {
    left:10px;
    z-index:100;
    background:#fff;
    color:#000
}

.site-header {
    position:sticky;
    top:0;
    z-index:20;
    background:#081018ee;
    backdrop-filter:blur(16px);
    border-bottom:1px solid #29333a
}

.nav {
    display:flex;
    align-items:center;
    gap:22px;
    min-height:72px
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:7px;
    white-space:nowrap;
    font-size:24px;
    letter-spacing:-.6px
}

.brand img {
    width:44px;
    height:44px
}

.brand span,.orange {
    color:var(--orange)
}

nav {
    display:flex;
    align-items:center;
    gap:19px;
    margin:auto;
    font-size:13px
}

nav a {
    white-space:nowrap
}

nav a.active {
    color:var(--gold)
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 22px;
    border-radius:12px;
    border:1px solid #ff8a3c;
    background:linear-gradient(160deg,#ffad50,#ff651e);
    color:#101217;
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
    box-shadow:0 8px 28px #ff6a1e22
}

.btn:hover {
    color:#111;
    filter:brightness(1.12)
}

.btn.outline {
    background:#070d13b9;
    color:#fff;
    border-color:#b56c3b;
    box-shadow:none
}

.btn.outline:hover {
    color:var(--gold)
}

.btn-small {
    padding:10px 15px
}

.btn.disabled {
    opacity:.65;
    cursor:not-allowed;
    white-space:normal
}

.menu-toggle {
    display:none
}

.hero {
    min-height:490px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(90deg,#08111b 0%,#08111bc7 33%,#08111b26 75%),url('../img/hero_bkg.webp') center/cover
}

.hero:after {
    content:'';
    position:absolute;
    inset:auto 0 0;
    height:90px;
    background:linear-gradient(transparent,var(--bg));
    pointer-events:none
}

.hero-glow {
    position:absolute;
    right:7%;
    top:5%;
    width:48%;
    height:100%;
    background:radial-gradient(ellipse,#e66b1835,transparent 64%)
}

.hero-inner {
    min-height:490px;
    position:relative;
    display:flex;
    align-items:center
}

.hero-copy {
    position:relative;
    z-index:3;
    max-width:490px;
    padding:44px 0 48px
}

.eyebrow {
    font-size:12px;
    letter-spacing:3px;
    color:var(--gold);
    font-weight:700;
    margin:0 0 14px
}

h1,h2 {
    font-family:'Libre Baskerville',Georgia,serif;
    letter-spacing:-1.6px;
    line-height:1.13
}

h1 {
    font-size:clamp(42px,5.3vw,70px);
    margin:0 0 20px
}

h1 em,h2 em {
    color:var(--orange);
    font-style:normal
}

h2 {
    font-size:clamp(28px,3.1vw,42px);
    margin:0 0 15px
}

.lead {
    font-size:17px;
    color:#d5dce3;
    line-height:1.48
}

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

.micro {
    font-size:12px;
    color:#b7c1ca;
    margin:10px 0
}

.hero-art {
    position:absolute;
    inset:0;
    pointer-events:none
}

.hero-art .wolf {
    position:absolute;
    width:39%;
    max-width:490px;
    right:17%;
    top:5%;
    mix-blend-mode:lighten;
    mask-image:radial-gradient(ellipse,#000 45%,transparent 74%)
}

.hero-art .squirrel {
    position:absolute;
    width:23%;
    max-width:280px;
    right:0;
    bottom:6%;
    filter:drop-shadow(0 0 26px #ff7a2940)
}

.hero-aside {
    position:absolute;
    right:0;
    top:35px;
    font-size:11px;
    line-height:1.9;
    letter-spacing:2px;
    color:#ffe3cb;
    text-align:right
}

.features-strip {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:5px;
    padding-top:16px;
    padding-bottom:17px;
    border-bottom:1px solid var(--line)
}

.feature-tile {
    padding:10px 8px;
    text-align:center;
    border-right:1px solid #2a3440;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px
}

.feature-tile:last-child {
    border:1px solid #754a32;
    border-radius:12px;
    background:#24191444
}

.feature-tile strong {
    font-size:15px
}

.feature-tile small {
    font-size:11px;
    line-height:1.35;
    color:var(--muted);
    max-width:160px
}

.tile-icon {
    width:55px;
    height:55px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:linear-gradient(145deg,#25313d,#0c121a);
    color:var(--orange);
    font-size:29px;
    border:1px solid #35404c
}

.product-split {
    display:grid;
    grid-template-columns:1.55fr 1fr;
    gap:40px;
    padding-top:28px;
    padding-bottom:35px;
    align-items:center
}

.preview {
    position:relative;
    background:#101b25;
    border:2px solid #cf6926;
    border-radius:14px;
    box-shadow:0 0 40px #ff691522;
    overflow:hidden
}

.preview img {
    display:block;
    width:100%
}

.image-note {
    position:absolute;
    bottom:4px;
    right:8px;
    font-size:9px;
    background:#09121acc;
    padding:2px 5px;
    color:#bbc4ce
}

.product-copy .eyebrow {
    margin-bottom:8px
}

.benefit {
    display:flex;
    gap:16px;
    margin:16px 0
}

.benefit>b {
    color:var(--orange);
    font-size:30px;
    width:35px;
    flex:none
}

.benefit h3 {
    color:var(--gold);
    font-size:16px;
    margin:0 0 3px
}

.benefit p {
    color:var(--muted);
    font-size:13px;
    margin:0
}

.scenic {
    background:linear-gradient(90deg,#08111bed,#08111b88),url('../img/hero_bkg.webp') center/cover;
    border-block:1px solid #24333e
}

.band-inner {
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:50px;
    align-items:center;
    padding-top:40px;
    padding-bottom:40px
}

.band p {
    max-width:570px;
    color:#d3dbe2
}

.providers {
    text-align:center
}

.providers strong {
    font-size:12px;
    letter-spacing:2px
}

.providers p {
    font-size:20px;
    color:var(--gold)
}

.providers small {
    font-size:11px;
    color:#b6bec6
}

.community-home {
    background:linear-gradient(90deg,#071018ec,#09131b77),url('../img/hero_bkg.webp') center/cover
}

.community-inner {
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:80px;
    align-items:center;
    padding-top:45px;
    padding-bottom:55px
}

.community-inner p {
    max-width:620px
}

.glass {
    border:1px solid #87512f;
    border-radius:18px;
    background:#071019d9;
    padding:26px
}

.glass h3 {
    margin-top:0
}

.glass p {
    color:#b8c3cd
}

.text-links {
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    font-size:12px;
    text-decoration:underline;
    color:#c6d0da;
    margin-top:20px
}

.page-hero {
    background:linear-gradient(90deg,#09121af5,#09121ab0),url('../img/hero_bkg.webp') center/cover;
    padding:85px 0 75px;
    border-bottom:1px solid #29343d
}

.page-hero .lead {
    max-width:720px
}

.page-hero h1 {
    font-size:clamp(42px,5vw,66px)
}

.section {
    padding-top:65px;
    padding-bottom:80px
}

.feature-detail-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.detail-card {
    padding:28px;
    background:linear-gradient(150deg,#182530,#0c151e);
    border:1px solid #31404c;
    border-radius:16px
}

.detail-card h2 {
    font-family:'DM Sans',sans-serif;
    font-size:23px;
    letter-spacing:0;
    margin:12px 0
}

.detail-card p,.section>p {
    color:#bdc7d0
}

.detail-card a {
    color:var(--gold)
}

.note {
    margin-top:30px;
    font-size:13px
}

.two-col {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:50px
}

.assistant-hero {
    max-width:360px;
    width:80%;
    justify-self:center;
    filter:drop-shadow(0 0 30px #fa722b35)
}

.download-wolf {
    max-width:380px;
    width:100%;
    justify-self:center;
    mix-blend-mode:lighten;
    mask-image:radial-gradient(ellipse,#000 45%,transparent 75%)
}

.large-preview {
    margin:0 auto 28px;
    max-width:950px
}

.large-preview img {
    width:100%;
    border:2px solid var(--orange);
    border-radius:12px
}

.large-preview figcaption {
    color:var(--muted);
    font-size:12px;
    margin-top:8px
}

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

.footer {
    border-top:1px solid #303a43;
    background:#080f16;
    padding:48px 0 20px
}

.footer-grid {
    display:grid;
    grid-template-columns:2.4fr repeat(3,1fr);
    gap:25px
}

.footer-grid>div {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:9px
}

.footer-grid h3 {
    font-size:14px;
    margin:0 0 8px
}

.footer-grid a:not(.brand),.footer-grid p,.footer-grid small {
    font-size:13px;
    color:#aebbc5
}

.foot-bottom {
    display:flex;
    justify-content:space-between;
    border-top:1px solid #29313a;
    margin-top:40px;
    padding-top:18px;
    font-size:12px;
    color:#8d9ba7
}

@media(max-width:1100px) {
    .nav {
        gap:10px
    }
    .brand {
        font-size:20px
    }
    .brand img {
        width:36px
    }
    nav {
        gap:10px;
        font-size:12px
    }
    .hero-art .wolf {
        right:12%
    }
    .hero-aside {
        display:none
    }
}

@media(max-width:800px) {
    .shell {
        padding-left:20px;
        padding-right:20px
    }
    .menu-toggle {
        display:block;
        margin-left:auto;
        background:transparent;
        color:#fff;
        border:1px solid #59636c;
        border-radius:8px;
        padding:8px 12px
    }
    .header-cta {
        display:none
    }
    nav {
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:70px;
        background:#0b1620;
        padding:20px;
        flex-direction:column;
        align-items:stretch;
        gap:16px
    }
    nav.open {
        display:flex
    }
    .hero-inner {
        min-height:650px;
        align-items:flex-start
    }
    .hero-copy {
        padding-top:40px;
        max-width:540px
    }
    .hero-art .wolf {
        width:55%;
        right:10%;
        top:auto;
        bottom:1%;
        opacity:.65
    }
    .hero-art .squirrel {
        width:30%;
        right:1%;
        bottom:3%
    }
    .features-strip {
        grid-template-columns:repeat(3,1fr)
    }
    .product-split,.band-inner,.community-inner,.two-col {
        grid-template-columns:1fr;
        gap:25px
    }
    .feature-detail-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .footer-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .donation-grid {
        grid-template-columns:1fr
    }
}

@media(max-width:520px) {
    h1 {
        font-size:43px
    }
    .hero-inner {
        min-height:710px
    }
    .hero-art .wolf {
        width:80%;
        right:5%;
        bottom:2%
    }
    .hero-art .squirrel {
        width:37%;
        bottom:2%
    }
    .features-strip {
        grid-template-columns:repeat(2,1fr)
    }
    .feature-detail-grid,.footer-grid {
        grid-template-columns:1fr
    }
    .actions .btn {
        width:100%
    }
    .foot-bottom {
        display:block
    }
    .brand {
        font-size:19px
    }
}

/* Runehowl Visual Refresh v2: site-wide design layer */
:root {
    --bg:#050b11;
    --panel:#0c151e;
    --panel2:#14212b;
    --orange:#ff782c;
    --gold:#ffad60;
    --text:#fff9f3;
    --muted:#c1c9d1;
    --line:#35404a
}

body {
    background:#050b11;
    color:var(--text);
    letter-spacing:-.012em
}

.shell {
    max-width:1500px;
    padding-left:clamp(20px,3.5vw,58px);
    padding-right:clamp(20px,3.5vw,58px)
}

.site-header {
    background:#060d14f4;
    border-bottom:1px solid #ffffff14;
    box-shadow:0 8px 32px #0003
}

.nav {
    min-height:74px
}

.brand {
    font-weight:800;
    letter-spacing:-.045em
}

.brand img {
    width:48px;
    height:48px
}

nav a {
    padding:24px 3px 21px;
    border-bottom:2px solid transparent;
    transition:color .2s,border-color .2s
}

nav a:hover,nav a.active {
    border-bottom-color:var(--orange);
    color:#ffb47e
}

.btn {
    border-radius:8px;
    background:linear-gradient(180deg,#ffad53,#ff6b22);
    border-color:#ff8c3a;
    box-shadow:0 6px 20px #ff70151b;
    transition:transform .2s,filter .2s
}

.btn:hover {
    transform:translateY(-2px)
}

.btn.outline {
    background:#061018bd;
    border:1px solid #b87448
}

h1,h2 {
    font-family:'Libre Baskerville',Georgia,serif;
    letter-spacing:-.055em
}

h1 em,h2 em {
    font-style:normal;
    color:var(--orange)
}

.eyebrow {
    color:#ffa45e;
    font-size:11px;
    font-weight:800;
    letter-spacing:.25em
}

.hero {
    background:linear-gradient(90deg,#050b12 0%,#050b12e8 27%,#07111a33 70%),linear-gradient(0deg,#060e16 0%,transparent 33%),url('../img/hero_bkg.webp') 68% center/cover;
    isolation:isolate
}

.hero-glow {
    display:none
}

.hero-inner {
    min-height:540px;
    align-items:center
}

.hero-copy {
    position:relative;
    z-index:3;
    max-width:510px;
    padding-top:52px;
    padding-bottom:50px
}

.hero-copy h1 {
    font-size:clamp(46px,5.3vw,79px);
    line-height:1.02;
    text-shadow:0 3px 16px #0009
}

.hero-copy .lead {
    max-width:475px;
    color:#e4e8ec;
    text-shadow:0 2px 8px #000
}

.hero-art {
    display:none
}

.hero-aside {
    font-size:11px;
    letter-spacing:.16em;
    color:#f4e9df;
    text-shadow:0 2px 10px #000;
    top:35px;
    right:22px
}

.features-strip {
    position:relative;
    z-index:4;
    margin-top:-2px;
    gap:9px;
    padding-top:12px;
    padding-bottom:16px
}

.feature-tile {
    border:1px solid #ffffff1c;
    background:linear-gradient(155deg,#111d29ed,#060d16f5);
    border-radius:10px;
    min-height:150px;
    padding:17px 10px;
    transition:transform .2s,border-color .2s
}

.feature-tile:hover {
    transform:translateY(-4px);
    border-color:#ff853d88
}

.feature-tile strong {
    font-size:14px
}

.feature-tile small {
    font-size:11px;
    line-height:1.45;
    color:#c3cbd4
}

.tile-icon {
    color:var(--orange);
    background:linear-gradient(160deg,#23333f,#0b141d);
    border:1px solid #ffffff1b;
    box-shadow:0 5px 18px #0004
}

.product-split {
    grid-template-columns:1.4fr 1fr;
    gap:36px;
    padding-top:30px;
    padding-bottom:60px
}

.preview {
    border:1px solid #ef833e;
    border-radius:13px;
    box-shadow:0 15px 50px #0009,0 0 0 4px #ff7b1310
}

.product-copy h2 {
    font-size:clamp(33px,3.3vw,52px);
    line-height:1.13
}

.benefit {
    margin:20px 0
}

.benefit h3 {
    color:#ffa65e
}

.benefit p {
    line-height:1.5
}

.scenic,.community-home {
    background:linear-gradient(90deg,#050d17e8,#0915228a),url('../img/hero_bkg.webp') center/cover
}

.band-inner,.community-inner {
    padding-top:62px;
    padding-bottom:62px
}

.band h2,.community-home h2 {
    font-size:clamp(31px,3.4vw,51px)
}

.glass {
    background:#07111ce8;
    border:1px solid #a46b4088;
    border-radius:12px;
    box-shadow:0 15px 40px #0006
}

.page-hero {
    position:relative;
    isolation:isolate;
    min-height:350px;
    display:flex;
    align-items:center;
    background:linear-gradient(90deg,#050b13 0%,#06101be8 33%,#06101b44 78%),linear-gradient(0deg,#050b13,transparent 40%),url('../img/hero_bkg.webp') center 45%/cover;
    border-bottom:1px solid #ef7d343a;
    padding:65px 0
}

.page-hero .shell {
    width:100%
}

.page-hero h1 {
    font-size:clamp(44px,5vw,72px);
    line-height:1.08;
    max-width:780px;
    text-shadow:0 3px 20px #000b
}

.page-hero .lead {
    color:#e1e7ed;
    text-shadow:0 2px 9px #000;
    max-width:640px
}

.page-hero .assistant-hero {
    max-width:230px;
    filter:drop-shadow(0 8px 28px #0008)
}

.section {
    padding-top:70px;
    padding-bottom:90px
}

.feature-detail-grid {
    gap:17px
}

.detail-card {
    background:linear-gradient(145deg,#142331,#071019);
    border:1px solid #3c4a56;
    border-radius:11px;
    min-height:220px;
    transition:border-color .2s,transform .2s
}

.detail-card:hover {
    transform:translateY(-3px);
    border-color:#f8834188
}

.detail-card h2 {
    font-size:23px;
    font-family:'DM Sans',Arial,sans-serif;
    letter-spacing:-.03em
}

.detail-card p {
    line-height:1.7
}

.detail-card a {
    font-weight:700
}

.large-preview img {
    box-shadow:0 18px 60px #0009
}

.footer {
    background:#050a10;
    border-top:1px solid #ffffff1b
}

.footer-grid h3 {
    color:#fff
}

.foot-bottom {
    color:#a4adb7
}

@media(max-width:1000px) {
    .hero {
        background-position:62% center
    }
    .hero-copy {
        max-width:470px
    }
    .hero-aside {
        display:none
    }
    .page-hero {
        background-position:60% center
    }
}

@media(max-width:800px) {
    nav a {
        padding:3px;
        border:0
    }
    .hero {
        background:linear-gradient(90deg,#050b12e8,#050b1288),url('../img/hero_bkg.webp') 64% center/cover
    }
    .hero-inner {
        min-height:590px
    }
    .hero-copy {
        padding-top:48px
    }
    .hero-art {
        display:none
    }
    .page-hero {
        min-height:310px
    }
    .feature-detail-grid {
        grid-template-columns:repeat(2,1fr)
    }
}

@media(max-width:520px) {
    .hero-inner {
        min-height:600px
    }
    .hero-copy h1 {
        font-size:47px
    }
    .hero-copy {
        padding-bottom:40px
    }
    .features-strip {
        grid-template-columns:repeat(2,1fr)
    }
    .feature-detail-grid {
        grid-template-columns:1fr
    }
    .page-hero {
        background:linear-gradient(90deg,#050b12e8,#050b1299),url('../img/hero_bkg.webp') 62% center/cover
    }
    .page-hero h1 {
        font-size:43px
    }
    .page-hero .two-col {
        grid-template-columns:1fr
    }
    .page-hero .assistant-hero {
        max-width:170px
    }
}

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



/* ============================================================
   Runehowl responsive hero | consolidated release
   Background remains a separate image. Shading is CSS only.
   ============================================================ */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 0;
    background: #050b12 url('../img/hero_bkg.webp') center center / cover no-repeat;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(5, 11, 18, .96) 0%, rgba(5, 11, 18, .86) 25%, rgba(5, 11, 18, .38) 53%, rgba(5, 11, 18, .08) 80%);
}

.hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 64px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(0deg, #050b12, transparent);
}

.hero-glow {
    display: none;
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    min-height: 560px;
    gap: clamp(20px, 3vw, 50px);
}

.hero-copy {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 540px;
    padding: 50px 0 56px;
}

.hero-copy h1 {
    font-size: clamp(43px, 4.8vw, 76px);
    line-height: 1.07;
    margin-bottom: 20px;
}

.hero-copy .lead {
    max-width: 480px;
    color: #f1f2f3;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .75);
}

.hero-art {
    position: relative;
    inset: auto;
    z-index: 2;
    display: block;
    align-self: stretch;
    min-width: 0;
    pointer-events: none;
}

.hero-art .wolf,
.hero-art .squirrel {
    position: absolute;
    display: block;
    height: auto;
    max-width: none;
    object-fit: contain;
    opacity: 1;
    mix-blend-mode: normal;
    mask-image: none;
    -webkit-mask-image: none;
    background: transparent;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .36));
}

.hero-art .wolf {
    top: 16%;
    right: 22%;
    width: min(76%, 420px);
}

.hero-art .squirrel {
    right: 2%;
    bottom: 13%;
    width: min(40%, 215px);
}

.hero-aside {
    position: absolute;
    top: 25px;
    right: clamp(22px, 3.5vw, 58px);
    bottom: auto;
    left: auto;
    z-index: 6;
    display: block;
    width: 175px;
    margin: 0;
    padding: 0;
    color: #fff0df;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .12em;
    text-align: right;
    text-shadow: 0 2px 8px #000;
    pointer-events: none;
}

.features-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
}

.feature-tile {
    min-width: 0;
}

@media (max-width: 1100px) {
    .hero-aside {
        display: none;
    }

    .hero-art .wolf {
        right: 19%;
        width: min(78%, 350px);
    }

    .hero-art .squirrel {
        right: 1%;
        width: min(42%, 175px);
    }

    .features-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .hero {
        background-position: 57% center;
    }

    .hero::before {
        background: linear-gradient(180deg, rgba(5, 11, 18, .91) 0%, rgba(5, 11, 18, .80) 44%, rgba(5, 11, 18, .32) 78%, rgba(5, 11, 18, .23) 100%);
    }

    .hero-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        gap: 0;
        padding-top: 38px;
        padding-bottom: 20px;
    }

    .hero-copy {
        max-width: 650px;
        padding: 0;
    }

    .hero-copy h1 {
        font-size: clamp(40px, 6.8vw, 58px);
    }

    .hero-art {
        position: relative;
        flex: none;
        align-self: stretch;
        height: clamp(180px, 33vw, 265px);
        margin-top: 8px;
    }

    .hero-art .wolf {
        top: auto;
        right: 30%;
        bottom: 5px;
        width: min(38%, 240px);
    }

    .hero-art .squirrel {
        top: auto;
        right: 12%;
        bottom: 6px;
        width: min(23%, 140px);
    }

    .features-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 580px) {
    .hero-inner {
        padding-top: 28px;
        padding-bottom: 14px;
    }

    .hero-copy h1 {
        font-size: clamp(34px, 9vw, 48px);
        line-height: 1.09;
        letter-spacing: -.05em;
        margin-bottom: 18px;
    }

    .hero-copy .lead {
        font-size: 15px;
        line-height: 1.52;
    }

    .hero-copy .actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 20px;
    }

    .hero-copy .actions .btn {
        width: 100%;
        min-height: 48px;
    }

    .hero-copy .micro {
        font-size: 11px;
        line-height: 1.45;
    }

    .hero-art {
        height: clamp(160px, 44vw, 220px);
        margin-top: 6px;
    }

    .hero-art .wolf {
        right: 31%;
        width: min(48%, 210px);
    }

    .hero-art .squirrel {
        right: 10%;
        width: min(29%, 125px);
    }

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

    .feature-tile {
        padding: 16px 9px;
        min-height: 146px;
    }
}

@media (max-width: 360px) {
    .hero-copy h1 {
        font-size: 34px;
    }

    .hero-art {
        height: 150px;
    }
}

/* ==============================================================
   Runehowl hero finishing pass | 2026-10-19
   Only hero spacing, mascot positioning and responsive behavior.
   Do not alter the background asset, navigation, or feature cards.
   ============================================================== */

/* Keep characters comfortably inside the visual half of the hero. */
@media (min-width: 1101px) {
    .hero-art .wolf {
        top: 19%;
        right: 26%;
        width: min(68%, 375px);
    }

    .hero-art .squirrel {
        right: 5%;
        bottom: 16%;
        width: min(30%, 165px);
    }

    .hero-aside {
        right: clamp(32px, 4vw, 68px);
    }
}

/* Tablet: preserve clear space between the two characters. */
@media (min-width: 801px) and (max-width: 1100px) {
    .hero-inner {
        gap: clamp(22px, 3vw, 38px);
    }

    .hero-art .wolf {
        top: 23%;
        right: 29%;
        width: min(65%, 310px);
    }

    .hero-art .squirrel {
        right: 4%;
        bottom: 19%;
        width: min(30%, 135px);
    }
}

/* Stacked layouts: scale characters with the container, not the viewport. */
@media (max-width: 800px) {
    .hero-inner {
        gap: 0;
    }

    .hero-art {
        width: 100%;
        height: clamp(170px, 30vw, 235px);
        margin-top: 0;
        overflow: visible;
    }

    .hero-art .wolf {
        top: auto;
        right: 35%;
        bottom: 4px;
        width: min(36%, 215px);
    }

    .hero-art .squirrel {
        top: auto;
        right: 15%;
        bottom: 4px;
        width: min(21%, 125px);
    }
}

@media (max-width: 580px) {
    .hero-inner {
        padding-bottom: 8px;
    }

    .hero-copy .actions {
        margin-top: 16px;
    }

    .hero-copy .micro {
        margin-bottom: 0;
    }

    .hero-art {
        height: clamp(150px, 38vw, 190px);
        margin-top: 0;
    }

    .hero-art .wolf {
        right: 36%;
        width: min(42%, 195px);
    }

    .hero-art .squirrel {
        right: 14%;
        width: min(25%, 115px);
    }
}

@media (max-width: 360px) {
    .hero-art {
        height: 140px;
    }

    .hero-art .wolf {
        right: 38%;
        width: 42%;
    }

    .hero-art .squirrel {
        right: 14%;
        width: 25%;
    }

}

    /* Runehowl: targeted responsive repair for More Freedom / Less Friction.
   Append this block at the VERY END of assets/css/site.css.
   Does not modify desktop or hero styling. */
@media screen and (max-width: 900px) {
  .product-split.shell {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 26px !important;
    padding-top: 36px !important;
    padding-bottom: 44px !important;
  }
  .product-split > .product-copy {
    order: 1;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .product-split > .preview {
    order: 2;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 740px !important;
    margin: 0 auto !important;
  }
  .product-split .product-copy h2 {
    font-size: clamp(32px, 6vw, 48px) !important;
    line-height: 1.12 !important;
    overflow-wrap: normal;
    word-break: normal;
  }
  .product-split .benefit {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 20px 0;
  }
  .product-split .benefit > div {
    min-width: 0;
    flex: 1;
  }
  .product-split .benefit h3,
  .product-split .benefit p {
    overflow-wrap: normal;
    word-break: normal;
  }
  .product-split .preview img {
    display: block;
    width: 100%;
    height: auto;
  }
}
@media screen and (max-width: 520px) {
  .product-split.shell {
    gap: 22px !important;
    padding-top: 30px !important;
    padding-bottom: 36px !important;
  }
  .product-split .product-copy h2 {
    font-size: clamp(31px, 8vw, 41px) !important;
  }
  .product-split .benefit {
    gap: 12px;
    margin: 18px 0;
  }
}

/* Final small-screen polish: keep copy readable and preview full-width. */
@media screen and (max-width: 900px) {
  .product-split.shell > * { min-width: 0; }
  .product-split .product-copy { width: 100%; }
  .product-split .benefit { max-width: 660px; }
  .product-split .preview { align-self: center; }
}

/* Runehowl mobile footer refinement v3: footer only. */
@media screen and (max-width: 700px) {
  .footer { padding: 30px 0 16px; }
  .footer .footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    row-gap: 26px;
    align-items: start;
  }
  .footer .footer-grid > div { min-width: 0; gap: 7px; }
  .footer .footer-grid > div:first-child {
    grid-column: 1 / -1;
    gap: 9px;
    padding-bottom: 5px;
  }
  .footer .footer-grid > div:first-child .brand { margin-bottom: 3px; }
  .footer .footer-grid > div:first-child p,
  .footer .footer-grid > div:first-child small {
    margin: 0;
    line-height: 1.5;
  }
  .footer .footer-grid > div:nth-child(4) { grid-column: 1 / -1; }
  .footer .footer-grid > div:nth-child(4) a { display: inline-block; }
  .footer .footer-grid > div:nth-child(4) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 18px;
  }
  .footer .footer-grid > div:nth-child(4) h3 { grid-column: 1 / -1; }
  .footer .footer-grid h3 { margin: 0 0 5px; }
  .footer .footer-grid a:not(.brand) { line-height: 1.5; }
  .footer .foot-bottom {
    display: block;
    margin-top: 28px;
    padding-top: 15px;
    line-height: 1.6;
  }
  .footer .foot-bottom span { display: block; margin-top: 3px; }
}
@media screen and (max-width: 360px) {
  .footer .footer-grid { column-gap: 12px; }
}