/* ==========================================================
   HANDL — HANDLER ACCOUNT v1.1.0 — FULLSCREEN FIX
   Reference composition: 1536 x 1024.
   The existing HANDL/Homey header + footer remain global.
   All rules are scoped to .handl-hra / body class.
   ========================================================== */

body.handl-handler-account-page{
    overflow-x:hidden;
}

body.handl-handler-account-page .page-title,
body.handl-handler-account-page .page-title-wrap,
body.handl-handler-account-page .breadcrumb-wrap,
body.handl-handler-account-page .breadcrumbs{
    display:none !important;
}

.handl-hra,
.handl-hra *{
    box-sizing:border-box;
}

.handl-hra{
    --hra-orange:#ff5a0a;
    --hra-orange-2:#ff6a00;
    --hra-orange-dark:#ed4b00;
    --hra-orange-soft:#fff7f2;
    --hra-orange-pale:#fff3ea;
    --hra-ink:#101116;
    --hra-text:#353238;
    --hra-muted:#6f6c72;
    --hra-border:#e2dedc;
    --hra-field:#d8d6d5;
    --hra-card:#ffffff;
    position:relative;
    isolation:isolate;
    width:100vw;
    max-width:100vw;
    min-height:850px;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    overflow:hidden;
    padding:
        clamp(24px,2.2vw,36px)
        clamp(22px,4vw,72px)
        clamp(28px,3vw,48px);
    background:
        radial-gradient(circle at 52% 15%,rgba(255,90,10,.035),transparent 36%),
        linear-gradient(180deg,#fffefd 0%,#fffdfb 100%);
    color:var(--hra-ink);
    font-family:inherit;
}

.handl-hra__shell{
    position:relative;
    z-index:2;
    width:100%;
    max-width:none;
    margin:0;
}

/* ---------------- Decorative geometry ---------------- */
.handl-hra__decor,
.handl-hra__dots{
    position:absolute;
    z-index:0;
    pointer-events:none;
}

.handl-hra__decor--top-left{
    top:-215px;
    left:-170px;
    width:560px;
    height:560px;
    border:58px solid rgba(255,90,10,.13);
    border-radius:50%;
    box-shadow:
        0 0 0 28px rgba(255,90,10,.08),
        0 0 0 58px rgba(255,90,10,.035);
}

.handl-hra__decor--top-left::after{
    content:"";
    position:absolute;
    inset:55px;
    border-radius:50%;
    background:linear-gradient(140deg,#ff5a0a 0%,#ff7a16 50%,rgba(255,122,22,.05) 50.2%);
    opacity:.98;
}

.handl-hra__decor--right{
    top:176px;
    right:-175px;
    width:400px;
    height:620px;
    border-radius:49% 0 0 49%;
    background:
        radial-gradient(ellipse at 25% 42%,rgba(255,157,91,.47) 0%,rgba(255,179,126,.30) 34%,rgba(255,215,185,.12) 64%,transparent 70%);
}

.handl-hra__dots{
    width:170px;
    height:115px;
    opacity:.55;
    background-image:radial-gradient(circle,rgba(255,90,10,.32) 1.7px,transparent 1.9px);
    background-size:17px 17px;
}

.handl-hra__dots--left{
    top:53px;
    left:54px;
}

.handl-hra__dots--right{
    top:42px;
    right:51px;
}

/* ---------------- Hero ---------------- */
.handl-hra__hero{
    position:relative;
    z-index:2;
    margin:0 auto 34px;
    text-align:center;
}

.handl-hra__role-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin:0 auto 20px;
    color:var(--hra-orange);
}

.handl-hra__role-mark svg{
    width:51px;
    height:51px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.15;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.handl-hra__role-mark span{
    font-size:24px;
    font-weight:700;
    line-height:1;
    letter-spacing:.012em;
}

.handl-hra__hero h1{
    margin:0;
    color:#0e1014;
    font-size:clamp(36px,3vw,46px);
    font-weight:800;
    line-height:1.08;
    letter-spacing:-.035em;
}

.handl-hra__hero p{
    max-width:760px;
    margin:18px auto 0;
    color:#69666b;
    font-size:18px;
    font-weight:400;
    line-height:1.38;
}

/* ---------------- Main grid ---------------- */
.handl-hra__grid{
    display:grid;
    grid-template-columns:minmax(360px,34%) minmax(0,66%);
    gap:clamp(18px,2vw,34px);
    align-items:stretch;
}

.handl-hra-card{
    position:relative;
    min-width:0;
    overflow:hidden;
    border:1px solid rgba(31,28,31,.14);
    border-radius:16px;
    background:rgba(255,255,255,.97);
    box-shadow:0 8px 24px rgba(44,31,25,.10);
}

.handl-hra-card__inner{
    position:relative;
    height:100%;
}

.handl-hra-card--login .handl-hra-card__inner{
    display:flex;
    min-height:638px;
    flex-direction:column;
    padding:35px 40px 31px;
}

.handl-hra-card--join .handl-hra-card__inner{
    min-height:638px;
    padding:34px 28px 27px;
}

.handl-hra__eyebrow,
.handl-hra__join-eyebrow{
    display:block;
    color:var(--hra-orange);
    font-size:17px;
    font-weight:700;
    line-height:1.2;
}

.handl-hra__eyebrow{
    margin-bottom:27px;
}

.handl-hra__join-eyebrow{
    margin-bottom:10px;
    text-align:center;
}

.handl-hra-card h2{
    margin:0;
    color:#101116;
    font-weight:800;
    letter-spacing:-.028em;
}

.handl-hra-card--login h2{
    font-size:31px;
    line-height:1.16;
}

.handl-hra-card--join h2{
    font-size:32px;
    line-height:1.12;
    text-align:center;
}

/* ---------------- Alert ---------------- */
.handl-hra-alert{
    margin:19px 0 -1px;
    padding:12px 14px;
    border:1px solid #ffc7aa;
    border-radius:10px;
    background:#fff7f2;
    color:#8f360f;
    font-size:13px;
    line-height:1.45;
}

.handl-hra-alert a{
    color:var(--hra-orange-dark);
    font-weight:700;
    text-decoration:underline;
}

/* ---------------- Login form ---------------- */
.handl-hra-login{
    margin-top:30px;
}

.handl-hra-field + .handl-hra-field{
    margin-top:23px;
}

.handl-hra-field label{
    display:block;
    margin:0 0 8px;
    color:#17171b;
    font-size:15px;
    font-weight:600;
    line-height:1.25;
}

.handl-hra-input-wrap{
    position:relative;
    display:flex;
    width:100%;
    height:50px;
    align-items:center;
}

.handl-hra-input-wrap input{
    width:100% !important;
    height:50px !important;
    margin:0 !important;
    padding:0 45px 0 49px !important;
    border:1px solid var(--hra-field) !important;
    border-radius:7px !important;
    outline:0 !important;
    background:#fff !important;
    box-shadow:none !important;
    color:#1d1c20 !important;
    font:inherit !important;
    font-size:15px !important;
    font-weight:400 !important;
    line-height:50px !important;
    transition:border-color .18s ease,box-shadow .18s ease !important;
}

.handl-hra-input-wrap input::placeholder{
    color:#85818a;
    opacity:1;
}

.handl-hra-input-wrap input:focus{
    border-color:rgba(255,90,10,.70) !important;
    box-shadow:0 0 0 3px rgba(255,90,10,.10) !important;
}

.handl-hra-input-icon{
    position:absolute;
    z-index:2;
    left:13px;
    top:50%;
    width:25px;
    height:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:translateY(-50%);
    color:#8c898e;
    pointer-events:none;
}

.handl-hra-input-icon svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.handl-hra-password-toggle{
    position:absolute !important;
    z-index:3;
    top:50% !important;
    right:9px !important;
    width:35px !important;
    height:35px !important;
    min-width:35px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#949095 !important;
    transform:translateY(-50%) !important;
    cursor:pointer;
}

.handl-hra-password-toggle:hover,
.handl-hra-password-toggle:focus{
    background:#fff6ef !important;
    color:var(--hra-orange) !important;
}

.handl-hra-eye{
    position:absolute;
    top:50%;
    left:50%;
    width:19px;
    height:19px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
    transform:translate(-50%,-50%);
}

.handl-hra-eye--closed{
    display:none;
}

.handl-hra-password-toggle.is-visible .handl-hra-eye--open{
    display:none;
}

.handl-hra-password-toggle.is-visible .handl-hra-eye--closed{
    display:block;
}

.handl-hra-forgot{
    display:inline-block;
    margin-top:17px;
    color:var(--hra-orange) !important;
    font-size:14px;
    font-weight:500;
    line-height:1.2;
    text-decoration:none !important;
}

.handl-hra-forgot:hover{
    color:var(--hra-orange-dark) !important;
    text-decoration:underline !important;
}

.handl-hra-signin,
.handl-hra-create{
    appearance:none;
    -webkit-appearance:none;
    display:flex !important;
    align-items:center;
    justify-content:center;
    border:0 !important;
    color:#fff !important;
    background:linear-gradient(90deg,#ff6200 0%,#ff5600 100%) !important;
    box-shadow:none !important;
    font-family:inherit !important;
    font-weight:700 !important;
    cursor:pointer;
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease !important;
}

.handl-hra-signin:hover,
.handl-hra-create:not(:disabled):hover{
    filter:brightness(.98);
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(255,90,10,.22) !important;
}

.handl-hra-signin:focus-visible,
.handl-hra-create:focus-visible,
.handl-hra-type:focus-within{
    outline:3px solid rgba(255,90,10,.22) !important;
    outline-offset:3px !important;
}

.handl-hra-signin{
    width:100% !important;
    height:55px !important;
    margin:26px 0 0 !important;
    padding:0 24px !important;
    border-radius:7px !important;
    gap:14px;
    font-size:16px !important;
}

.handl-hra-signin svg{
    width:25px;
    height:25px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.handl-hra-security-note{
    display:flex;
    gap:10px;
    align-items:center;
    margin-top:auto;
    padding-top:32px;
    color:#66636a;
}

.handl-hra-security-note > span{
    flex:0 0 auto;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--hra-orange);
}

.handl-hra-security-note svg{
    width:29px;
    height:29px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.handl-hra-security-note p{
    margin:0;
    font-size:12px;
    line-height:1.4;
}

/* ---------------- Handler type cards ---------------- */
.handl-hra-join-form{
    margin-top:27px;
}

.handl-hra-types{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);
    gap:17px;
    align-items:stretch;
    margin:0;
    padding:0;
    border:0;
}

.handl-hra-type{
    position:relative;
    min-width:0;
    min-height:250px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:20px 22px 18px;
    border:1px solid rgba(255,90,10,.27);
    border-radius:12px;
    background:linear-gradient(180deg,#fffaf7 0%,#fffdfb 100%);
    color:#151419;
    text-align:center;
    cursor:pointer;
    transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease;
}

.handl-hra-type:hover{
    border-color:rgba(255,90,10,.62);
    box-shadow:0 9px 22px rgba(255,90,10,.09);
    transform:translateY(-1px);
}

.handl-hra-type.is-selected{
    border-color:var(--hra-orange);
    background:#fff8f3;
    box-shadow:0 0 0 2px rgba(255,90,10,.10),0 10px 24px rgba(255,90,10,.10);
}

.handl-hra-type__icon{
    width:74px;
    height:74px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:11px;
    color:var(--hra-orange);
}

.handl-hra-type__icon svg{
    width:74px;
    height:74px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.handl-hra-type__name{
    color:var(--hra-orange);
    font-size:20px;
    font-weight:800;
    line-height:1.18;
}

.handl-hra-type__subtitle{
    min-height:40px;
    margin-top:6px;
    color:#111116;
    font-size:14px;
    font-weight:600;
    line-height:1.25;
}

.handl-hra-type__rule{
    width:82%;
    height:1px;
    margin:14px 0 13px;
    background:rgba(255,90,10,.20);
}

.handl-hra-type__copy{
    color:#2e2b30;
    font-size:14px;
    font-weight:400;
    line-height:1.35;
}

.handl-hra-type__check{
    position:absolute;
    top:12px;
    right:12px;
    width:25px;
    height:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--hra-orange);
    color:#fff;
    opacity:0;
    transform:scale(.75);
    transition:opacity .18s ease,transform .18s ease;
}

.handl-hra-type__check svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.handl-hra-type.is-selected .handl-hra-type__check{
    opacity:1;
    transform:scale(1);
}

.handl-hra-types__or{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--hra-orange);
    font-size:13px;
    font-weight:600;
}

.handl-hra-types__or::before{
    content:"";
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:50%;
    width:1px;
    background:#d9d5d3;
    transform:translateX(-50%);
}

.handl-hra-types__or::after{
    content:"";
    position:absolute;
    z-index:-1;
    width:39px;
    height:39px;
    border:1px solid rgba(255,90,10,.22);
    border-radius:50%;
    background:#fff8f3;
}

.handl-hra-create{
    width:min(480px,100%) !important;
    height:60px !important;
    margin:22px auto 0 !important;
    padding:0 25px !important;
    border-radius:8px !important;
    gap:12px;
    font-size:17px !important;
}

.handl-hra-create svg{
    width:30px;
    height:30px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.handl-hra-create:disabled{
    cursor:not-allowed;
    opacity:.58;
    filter:saturate(.65);
}

.handl-hra-type-help{
    min-height:18px;
    margin:8px auto 0;
    color:#817b7a;
    font-size:11px;
    line-height:1.35;
    text-align:center;
}

/* ---------------- Benefits ---------------- */
.handl-hra-benefits{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:0;
    margin-top:13px;
    padding-top:25px;
    border-top:1px solid #e7dfdb;
}

.handl-hra-benefit{
    min-width:0;
    display:grid;
    grid-template-columns:55px minmax(0,1fr);
    gap:8px;
    align-items:center;
    padding:0 14px;
}

.handl-hra-benefit + .handl-hra-benefit{
    border-left:1px solid #e8dfda;
}

.handl-hra-benefit__icon{
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,90,10,.15);
    border-radius:50%;
    background:#fff8f2;
    color:var(--hra-orange);
}

.handl-hra-benefit__icon svg{
    width:38px;
    height:38px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.handl-hra-benefit strong{
    display:block;
    margin:0 0 5px;
    color:#17161a;
    font-size:14px;
    font-weight:700;
    line-height:1.18;
}

.handl-hra-benefit p{
    margin:0;
    color:#666268;
    font-size:12px;
    line-height:1.45;
}

/* ---------------- Bottom trust line ---------------- */
.handl-hra__trust-line{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:31px auto 0;
    color:#6f6c72;
    font-size:14px;
    line-height:1.35;
    text-align:center;
}

.handl-hra__trust-line svg{
    flex:0 0 auto;
    width:24px;
    height:24px;
    fill:none;
    stroke:#818086;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ==========================================================
   LAPTOP — 1024 to 1279
   Keep two-column composition, compress typography/spacing.
   ========================================================== */
@media (min-width:1024px) and (max-width:1279px){
    .handl-hra{
        min-height:760px;
        padding:25px 22px 30px;
    }

    .handl-hra__shell{
        width:100%;
        max-width:none;
    }

    .handl-hra__hero{
        margin-bottom:27px;
    }

    .handl-hra__role-mark{
        margin-bottom:14px;
    }

    .handl-hra__role-mark svg{
        width:43px;
        height:43px;
    }

    .handl-hra__role-mark span{
        font-size:24px;
    }

    .handl-hra__hero h1{
        font-size:38px;
    }

    .handl-hra__hero p{
        margin-top:13px;
        font-size:16px;
    }

    .handl-hra__grid{
        grid-template-columns:minmax(315px,34%) minmax(0,66%);
        gap:18px;
    }

    .handl-hra-card--login .handl-hra-card__inner,
    .handl-hra-card--join .handl-hra-card__inner{
        min-height:570px;
    }

    .handl-hra-card--login .handl-hra-card__inner{
        padding:30px 31px 27px;
    }

    .handl-hra-card--join .handl-hra-card__inner{
        padding:29px 22px 24px;
    }

    .handl-hra__eyebrow,
    .handl-hra__join-eyebrow{
        font-size:17px;
    }

    .handl-hra__eyebrow{
        margin-bottom:21px;
    }

    .handl-hra-card--login h2{
        font-size:28px;
    }

    .handl-hra-card--join h2{
        font-size:28px;
    }

    .handl-hra-login{
        margin-top:25px;
    }

    .handl-hra-type{
        min-height:234px;
        padding:17px 14px 15px;
    }

    .handl-hra-type__icon,
    .handl-hra-type__icon svg{
        width:61px;
        height:61px;
    }

    .handl-hra-type__name{
        font-size:19px;
    }

    .handl-hra-type__subtitle,
    .handl-hra-type__copy{
        font-size:12.5px;
    }

    .handl-hra-create{
        height:55px !important;
        font-size:16px !important;
    }

    .handl-hra-benefit{
        grid-template-columns:45px minmax(0,1fr);
        padding:0 9px;
    }

    .handl-hra-benefit__icon{
        width:45px;
        height:45px;
    }

    .handl-hra-benefit__icon svg{
        width:31px;
        height:31px;
    }

    .handl-hra-benefit strong{
        font-size:12.5px;
    }

    .handl-hra-benefit p{
        font-size:10.5px;
    }
}

/* ==========================================================
   TABLET — 768 to 1023
   Stack main cards; retain Perso / Pro side-by-side.
   ========================================================== */
@media (min-width:768px) and (max-width:1023px){
    .handl-hra{
        min-height:0;
        padding:28px 28px 38px;
    }

    .handl-hra__shell{
        width:100%;
        max-width:none;
    }

    .handl-hra__hero{
        margin-bottom:25px;
    }

    .handl-hra__role-mark{
        margin-bottom:14px;
    }

    .handl-hra__role-mark svg{
        width:44px;
        height:44px;
    }

    .handl-hra__role-mark span{
        font-size:24px;
    }

    .handl-hra__hero h1{
        font-size:35px;
    }

    .handl-hra__hero p{
        font-size:17px;
    }

    .handl-hra__desktop-break{
        display:none;
    }

    .handl-hra__grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .handl-hra-card--login .handl-hra-card__inner,
    .handl-hra-card--join .handl-hra-card__inner{
        min-height:0;
        padding:32px 36px;
    }

    .handl-hra-card--login h2{
        font-size:30px;
    }

    .handl-hra-card--join h2{
        font-size:30px;
    }

    .handl-hra-login{
        max-width:590px;
    }

    .handl-hra-security-note{
        margin-top:24px;
        padding-top:0;
    }

    .handl-hra-type{
        min-height:255px;
    }

    .handl-hra__decor--right{
        right:-260px;
        opacity:.65;
    }
}

/* ==========================================================
   MOBILE — <= 767
   Single column, full-width cards, touch-friendly controls.
   ========================================================== */
@media (max-width:767px){
    .handl-hra{
        min-height:0;
        padding:22px 14px 32px;
    }

    .handl-hra__decor--top-left{
        top:-235px;
        left:-270px;
        width:470px;
        height:470px;
        opacity:.56;
    }

    .handl-hra__decor--right{
        top:260px;
        right:-240px;
        width:330px;
        height:500px;
        opacity:.52;
    }

    .handl-hra__dots{
        display:none;
    }

    .handl-hra__hero{
        margin-bottom:21px;
    }

    .handl-hra__role-mark{
        gap:10px;
        margin-bottom:13px;
    }

    .handl-hra__role-mark svg{
        width:38px;
        height:38px;
    }

    .handl-hra__role-mark span{
        font-size:20px;
    }

    .handl-hra__hero h1{
        font-size:29px;
        line-height:1.12;
    }

    .handl-hra__hero p{
        max-width:480px;
        margin-top:10px;
        font-size:14px;
        line-height:1.5;
    }

    .handl-hra__desktop-break{
        display:none;
    }

    .handl-hra__grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .handl-hra-card{
        border-radius:15px;
    }

    .handl-hra-card--login .handl-hra-card__inner,
    .handl-hra-card--join .handl-hra-card__inner{
        min-height:0;
        padding:24px 19px 22px;
    }

    .handl-hra__eyebrow,
    .handl-hra__join-eyebrow{
        font-size:15px;
    }

    .handl-hra__eyebrow{
        margin-bottom:16px;
    }

    .handl-hra-card--login h2,
    .handl-hra-card--join h2{
        font-size:26px;
        line-height:1.14;
    }

    .handl-hra-login{
        margin-top:23px;
    }

    .handl-hra-field + .handl-hra-field{
        margin-top:18px;
    }

    .handl-hra-input-wrap,
    .handl-hra-input-wrap input{
        height:54px !important;
    }

    .handl-hra-input-wrap input{
        line-height:54px !important;
        font-size:15px !important;
    }

    .handl-hra-signin{
        height:56px !important;
        margin-top:23px !important;
    }

    .handl-hra-security-note{
        margin-top:24px;
        padding-top:0;
    }

    .handl-hra-join-form{
        margin-top:22px;
    }

    .handl-hra-types{
        grid-template-columns:1fr;
        gap:12px;
    }

    .handl-hra-types__or{
        height:33px;
    }

    .handl-hra-types__or::before{
        top:50%;
        right:0;
        bottom:auto;
        left:0;
        width:100%;
        height:1px;
        transform:none;
    }

    .handl-hra-types__or::after{
        width:36px;
        height:36px;
    }

    .handl-hra-type{
        min-height:0;
        padding:20px 18px;
    }

    .handl-hra-type__icon,
    .handl-hra-type__icon svg{
        width:66px;
        height:66px;
    }

    .handl-hra-type__name{
        font-size:20px;
    }

    .handl-hra-type__subtitle{
        min-height:0;
        font-size:13px;
    }

    .handl-hra-type__copy{
        font-size:13px;
    }

    .handl-hra-type__rule{
        margin:12px 0 11px;
    }

    .handl-hra-create{
        height:57px !important;
        margin-top:18px !important;
        font-size:17px !important;
    }

    .handl-hra-benefits{
        grid-template-columns:1fr;
        gap:0;
        margin-top:15px;
        padding-top:8px;
    }

    .handl-hra-benefit{
        grid-template-columns:51px minmax(0,1fr);
        padding:15px 2px;
    }

    .handl-hra-benefit + .handl-hra-benefit{
        border-top:1px solid #e8dfda;
        border-left:0;
    }

    .handl-hra-benefit__icon{
        width:46px;
        height:46px;
    }

    .handl-hra-benefit__icon svg{
        width:32px;
        height:32px;
    }

    .handl-hra-benefit strong{
        font-size:14px;
    }

    .handl-hra-benefit p{
        font-size:12px;
    }

    .handl-hra-benefit p br{
        display:none;
    }

    .handl-hra__trust-line{
        align-items:flex-start;
        margin-top:24px;
        padding:0 8px;
        font-size:12px;
        text-align:left;
    }
}

/* ==========================================================
   SMALL MOBILE — <= 390
   ========================================================== */
@media (max-width:390px){
    .handl-hra{
        padding-inline:10px;
    }

    .handl-hra__hero h1{
        font-size:27px;
    }

    .handl-hra__hero p{
        font-size:13px;
    }

    .handl-hra-card--login .handl-hra-card__inner,
    .handl-hra-card--join .handl-hra-card__inner{
        padding:22px 15px 20px;
    }

    .handl-hra-card--login h2,
    .handl-hra-card--join h2{
        font-size:24px;
    }

    .handl-hra-type__copy br{
        display:none;
    }

    .handl-hra-create{
        padding-inline:14px !important;
        font-size:16px !important;
    }
}

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


/* ==========================================================
   FULLSCREEN / LARGE DESKTOP — v1.1.0
   Uses the actual live HANDL Handler Account selectors.
   ========================================================== */
@media (min-width:1280px){
    .handl-hra{
        width:100vw;
        max-width:100vw;
        margin-left:calc(50% - 50vw);
        margin-right:calc(50% - 50vw);
    }

    .handl-hra__shell{
        width:100%;
        max-width:none;
    }

    .handl-hra__grid{
        grid-template-columns:minmax(360px,34%) minmax(0,66%);
    }

    .handl-hra-card--login .handl-hra-card__inner,
    .handl-hra-card--join .handl-hra-card__inner{
        min-height:620px;
    }
}

@media (min-width:1600px){
    .handl-hra{
        padding-left:clamp(54px,4.5vw,96px);
        padding-right:clamp(54px,4.5vw,96px);
    }

    .handl-hra__grid{
        grid-template-columns:minmax(420px,32%) minmax(0,68%);
        gap:clamp(24px,2.2vw,42px);
    }

    .handl-hra-card--login .handl-hra-card__inner{
        padding-left:clamp(38px,2.5vw,52px);
        padding-right:clamp(38px,2.5vw,52px);
    }

    .handl-hra-card--join .handl-hra-card__inner{
        padding-left:clamp(30px,2.4vw,50px);
        padding-right:clamp(30px,2.4vw,50px);
    }
}

@media (max-width:1023px){
    .handl-hra{
        width:100vw;
        max-width:100vw;
        margin-left:calc(50% - 50vw);
        margin-right:calc(50% - 50vw);
    }
}