/* TODO need to redo this vars to meaning rather than color */
:root {
    --main-background: #C3D153;
    --green: #C3D153;
    --dkgreen: #AFBC4A;
    --orange: #ED7A40;
    --ltblue: #E5F9FF;
    --dkblue: #0C7896;
    --dkrblue: #0b6980;
    --grblue: #446389;
    --vltgrey: #F7F9FA;
    --ltgrey: #DDDDDD;
    --dkgrey: #5D6662;
    --vdkgrey: #231F20;
    --cream: #F9FAED;

}

#html-body {
    font-family: "Source Sans Pro", sans-serif;
    color: var(--vdkgrey);
    font-size: 1.2rem;
}

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

html [id], body [id] {
    scroll-margin-top: 20px !important;
}

header {
    background-color: var(--main-background);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: inherit;
}

h1 { font-size: 38px; line-height: 1.2; }
h2 { font-size: 30px; line-height: 1.25; }
.blog-post-full h2 { font-size: 24px; line-height: 1.3; }
.blog-post-full h3 { font-size: 20px; line-height: 1.35; }
.blog-post-full h4 { font-size: 17px; line-height: 1.4; }
/* Embedded rich-text images/figures need breathing room from wrapping text. */
.blog-post-full figure,
.blog-post-full .align_left,
.blog-post-full .align_right,
.blog-post-full .align_center { margin-top: 1.5em; }
.blog-post-full .align_right { margin-left: 1.5em; margin-bottom: 1em; }
.blog-post-full .align_left { margin-right: 1.5em; margin-bottom: 1em; }

/* Break long unbreakable strings (e.g. DOI/full URLs) so they don't overflow the viewport on mobile.
   Set on #main and inherited by all descendants; `anywhere` lets the container shrink below the longest string. */
#main { overflow-wrap: anywhere; }
h3 { font-size: 24px; line-height: 1.3; }
h4 { font-size: 19px; line-height: 1.4; }
h5 { font-size: 16px; line-height: 1.4; }
h6 { font-size: 14px; line-height: 1.4; }

.notwhite h2 {
    color: #ffffff !important;
}

.card-title {
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 600;
}

em {
    color: inherit;
}

/*ul.ticklist {
    list-style-image: url('/site/templates/styles/images/tick.svg');
}
ul.ticklist li {
    padding-left: 10px;
}*/

/* hacky way to do it, but using list-style-image (above) doesn't let us vertically align the text with the custom bullet */
ul.ticklist li {
    background: url(/site/templates/styles/images/tick.svg) no-repeat left top;
    padding-left: 45px;
    list-style: none;
}

.ticklist_title {
    font-family: Montserrat;
    font-weight: 600;
    color:var(--vdkgrey);
    font-size: 1.5rem;
}


.tick_bullets {
    margin-left: 0px;
    padding-left: 0px;
}

ul.tick_bullets li {
    background: url(/site/templates/styles/images/tick.svg) no-repeat left top;
    background-size: 25px 25px;
    padding-left: 35px;
    margin-bottom: 20px;
    list-style: none;
}



blockquote {
    font-size: 18px;
    font-style: italic;
    margin: 0.25em 0;
    padding: 0.35em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
}

blockquote:before {
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: var(--green);
}

blockquote.notwhite:before {
    color: #ffffff;
}

.cta {
    color: #ffffff;
    /*font-weight: 600;*/
    font-size: 1.6rem;
    width: 175px;
}

.site-accent-background {
    background: var(--green);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Prevent accordion FOUC — non-open content uses [hidden] in markup so UIkit
   can manage the height transition (display:none would break the animation). */

/* Prevent grid vertical-gap FOUC — UIkit JS adds .uk-grid-margin to wrapped rows,
   but before JS loads there is no vertical spacing. This fallback applies row-gap
   only while no child has .uk-grid-margin yet; once UIkit JS processes the grid
   and adds that class to any child, :has() stops matching and row-gap drops to 0. */
.uk-grid:not(:has(> .uk-grid-margin)) { row-gap: 15px; }
.uk-grid.uk-grid-large:not(:has(> .uk-grid-margin)) { row-gap: 40px; }
@media (min-width: 1200px) {
    .uk-grid.uk-grid-large:not(:has(> .uk-grid-margin)) { row-gap: 70px; }
}

.uk-slidenav {
    color: #FFFFFF;
}

.uk-dotnav>*>* {
    background-color: #5D6662;
}

.uk-dotnav>.uk-active>* {
    background-color: #FFFFFF;
}

/* Press-kit sample-messages slider sits on a light background, so the global
   white arrows/active dot would be invisible — override with dark blue here. */
.press-kit-samples .uk-slidenav {
    color: var(--dkblue);
}

.press-kit-samples .uk-dotnav>*>* {
    background-color: rgba(93, 102, 98, 0.4);
}

.press-kit-samples .uk-dotnav>.uk-active>* {
    background-color: var(--dkblue);
}


.uk-navbar-nav {
    display: flex;
    align-items: center; /* vertically centers items in the navbar */
    margin: 0;           /* remove the fixed 30px */
}

.uk-navbar-nav>li>a {
    height: inherit; /* bit of a hack to fix the height of the YOUR STORY button even though the SIGN UP was working fine */
}

.uk-navbar-item,
.uk-navbar-nav > li > a,
.uk-navbar-toggle {
    font-family: "Montserrat", sans-serif;
    min-height: 40px;
    padding: 0 13px;
}

#masthead-navbar .uk-navbar-right {
    flex: 1 1 auto;
}
#masthead-navbar .uk-navbar-right > .uk-navbar-nav {
    width: 100%;
}
li.nav-button {
    margin-left: auto;
}

li.nav-search {
    margin-left: auto;
}

li.nav-search + li.nav-button,
li.nav-button + li.nav-button {
    margin-left: 8px;
}

.uk-tooltip {
    /* Wrap long tooltips (e.g. the undelivered-message sentence) within UIkit's max-width
       rather than forcing a single line, which gets clipped. Short tooltips such as the
       nav labels are well under the max-width, so they stay on one line regardless. */
    white-space: normal;
}

.user-icons {
    display: inline-flex;
    align-items: center;
}

.user-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--vdkgrey);
    border-radius: 50%;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.user-icons svg {
    width: 18px;
    height: 18px;
}

.user-icons a:hover,
.user-icons a:focus {
    background-color: rgba(35, 31, 32, 0.1);
    color: #000;
}

li.nav-button a {
    color: #fff !important;
    font-size: 17px !important;
}

/* Undo the global .uk-button-small.uk-border-pill rule for navbar buttons, which
   outranks the .uk-navbar-nav > li > a rule on min-height/padding and shrinks
   nav buttons from 40px to ~30px. */
li.nav-button a.uk-button-small.uk-border-pill {
    display: flex;
    align-items: center;
    line-height: 28px;
    padding: 0 13px;
    min-height: 48px;
    white-space: nowrap;
}

li.nav-button a.uk-button-secondary {
    background-color: var(--vdkgrey);
    border-color: var(--vdkgrey);
}

li.nav-button a.uk-button-secondary:hover,
li.nav-button a.uk-button-secondary:focus {
    background-color: #000;
    border-color: #000;
}

li.nav-button a.login-button {
    background-color: #fff;
    border-color: #fff;
    color: var(--vdkgrey) !important;
}

li.nav-button a.login-button:hover,
li.nav-button a.login-button:focus {
    background-color: var(--vdkgrey);
    border-color: var(--vdkgrey);
    color: #fff !important;
}

#masthead-logo img {
    width: 100px;
}

#edit-page {
    /* the edit page link that appears when page is editable */
    position: absolute;
    top: 10px;
    right: 10px;
}

.uk-offcanvas-bar {
    background-color: var(--vdkgrey);
    width: 320px;
}
@media (min-width: 640px) {
    .uk-offcanvas-bar {
        width: 400px;
    }
}
.uk-offcanvas-bar .uk-nav-default {
    font-size: 1.15rem;
}
.uk-offcanvas-bar .uk-nav-sub {
    font-size: 1rem;
}

.uk-nav-default {
    font-size: 1rem;
}
.uk-nav-default>li>a {
    color: #FFFFFF !important;
}

#offcanvas-toggle {
    position: absolute;
    top: 10px;
    left: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--vdkgrey);
    color: #fff;
    border-radius: 8px;
}

/* When the hamburger is visible (below @l breakpoint), push the site logo right to make room */
@media (max-width: 1199px) {
    #masthead-navbar .uk-navbar-left {
        margin-left: 60px !important;
    }
}

#offcanvas-toggle:hover,
#offcanvas-toggle:focus {
    background-color: #000;
    color: #fff;
}

#offcanvas-nav .uk-search-input {
    width: 100%;
}

img.uk-comment-avatar {
    width: 60px;
    height: 60px;
}

/****************************************************************
 * Bodycopy text and images
 *
 */

.uk-link,
a,
a:hover {
    color: var(--dkblue);
    text-decoration: none !important;
    cursor: pointer;
}

a.grey_link_color {
    color: #5e5e5e;
}

/* Links embedded in the consent sentence need a non-color cue (underline) so
   they're distinguishable from the surrounding text per WCAG 1.4.1. */
.agree a {
    text-decoration: underline !important;
}

.align_left {
    /* for images placed in rich text editor */
    float: left;
    margin: 0 1em 0.5em 0;
    position: relative;
    top: 0.5em;
    /*max-width: 50%;*/
}

.align_right {
    /* for images placed in rich text editor */
    float: right;
    margin: 0 0 0.5em 1em;
    /*max-width: 50%;*/
}

.align_center {
    /* for images placed in rich text editor */
    display: block;
    margin: 1em auto;
    position: relative;
    top: 0.5em;
}


figure {
    display: table;
    padding: 5px;
    font-size: smaller;
    line-height: 1.4em;
    margin: 0;
 }

 figure img {
    display: block;
    max-width: 100%;
    margin-bottom: 10px;
 }

 figcaption {
    display: table-caption;
    caption-side: bottom;
    padding: 0 5px 5px;
    color: var(--dkgrey);
    text-align: center;
 }

 .person-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
 }

 .person-card-link:hover,
 .person-card-link:focus-visible {
    color: inherit;
    text-decoration: none;
 }

 .person-card-link img.uk-border-circle {
    transition: transform 0.2s ease, box-shadow 0.2s ease, outline-color 0.2s ease;
    outline: 3px solid transparent;
    outline-offset: 3px;
 }

 .person-card-link:hover img.uk-border-circle,
 .person-card-link:focus-visible img.uk-border-circle {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    outline-color: var(--dkblue);
 }

 .person-card-link:hover figcaption span,
 .person-card-link:focus-visible figcaption span {
    color: var(--dkblue) !important;
 }

 .person-featured:has(.person-card-link:hover) img.uk-border-circle,
 .person-featured:focus-within img.uk-border-circle {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    outline-color: var(--dkblue);
 }

 .person-featured:has(.person-card-link:hover) .person-name,
 .person-featured:focus-within .person-name {
    color: var(--dkblue);
 }


.image-container {
	background-image: linear-gradient(45deg, var(--ltgrey) 25%, transparent 25%), linear-gradient(-45deg, var(--ltgrey) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--ltgrey) 75%), linear-gradient(-45deg, transparent 75%, var(--ltgrey) 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.image-container-thumb {
    padding: 0;
}

.img-overlay-wrap {
	position: relative;
	display: inline-block; /* <= shrinks container to image size */
	transition: transform 150ms ease-in-out;
}

.img-overlay-wrap img { /* <= optional, for responsiveness */
	/*display: block;*/
	max-width: 100%;
	height: auto;
}

.img-overlay-wrap svg {
	position: absolute;
	top: 10px;
	left: 10px;
}



/*********************************************************************
 * Media queries for responsive layout
 *
 */

@media only screen and (max-width: 767px) {
    /* mobile layout */

    .align_left,
    .align_right,
    .align_center {
        display: table;
        float: none;
        margin: 1em auto;
        max-width: 100%;
    }
}

/*@media only screen and (max-width: 959px) {
    #masthead {
        padding-bottom: 20px;
    }
}*/

/* push footer to the bottom if main too short */
body {
    display: flex;
    min-height: 100vh;
    height: 100%;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/********

*/

.uk-navbar-nav {
    gap: 5px;
}

.uk-navbar-item,
.uk-navbar-nav > li > a,
.uk-navbar-toggle {
    font-size: 1.1rem;
}

.uk-navbar-dropdown {
    top: 80px;
    width: auto;
    padding: 0;
    background-color: var(--green);
    box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

.uk-navbar-dropdown-nav>li {
    padding: 0 10px;
    margin: 0;
}

.uk-navbar-dropdown-nav>li>a {
    color: var(--vdkgrey);
    font-size: 17px;
    text-transform: uppercase;
    font-family: "Montserrat", sans-serif;
    white-space: nowrap;
}

.uk-navbar-dropdown-nav>li>a:hover {
    color: var(--vdkgrey) !important;
    text-decoration: underline !important;
}

[class*=uk-navbar-dropdown-bottom] {
    margin-top: 1px;
}

.Inputfield_mygccb {
    position: absolute;
    left: -9999px;
}

.Inputfield_group_subscription_id {
    position: absolute;
    left: -9999px;
}

.InputfieldCheckboxesStacked li {
    list-style: none;
}

.InputfieldCheckboxesStacked li label input {
    margin-right: 5px;
}

li.Inputfield {
    list-style-type: none;
}

.uk-form-label {
    font-size: 16px !important;
    color: #666666 !important;
}

ul.InputfieldCheckboxesStacked {
    padding-left: 0 !important;
}

.phone_col {
    float: left;
    margin-right: 15px;
}


.uk-card .uk-button {
    border-radius: 20px;
    margin-top: 10px;
    width: 100%;
}

/* Pricing-card CTAs are authored content with an inline font-size; override to the
   standard pill shape and 1rem semibold button font to match CTAs elsewhere. */
.pricing-cards .uk-card .uk-button {
    border-radius: 1000px;
    font-size: 1rem !important;
    font-weight: 600;
}

/* The button's wrapper span is the card's last child; push it to the bottom so all
   CTAs align across cards of differing content length (flex-column cards). */
.pricing-cards .uk-card > span:last-child {
    margin-top: auto;
}

.uk-card .uk-padding-small {
    padding: 10px;
}


.uk-button,
.uk-button-primary {
    background-color: var(--green);
    font-family: Montserrat;
    font-size: 1rem;
    border: 1px solid transparent;
    text-decoration: none !important;
    text-transform: none;
}

.uk-button-primary {
    color: var(--vdkgrey);
}

.uk-button:hover,
.uk-button-primary:hover {
    background-color: var(--dkgreen);
    color: var(--vdkgrey);
}

.uk-button.uk-active {
    cursor: default;
}

.uk-button-secondary.uk-active, .uk-button-secondary:active {
    background-color: var(--vdkgrey);
    color: #FFFFFF;
}

.uk-button-secondary {
    background-color: var(--dkblue);
    color: #FFFFFF;
}

.uk-button-secondary:hover {
    background-color: var(--dkrblue);
    color: #FFFFFF;
}

.uk-button-fullwidth {
    font-weight: 400;
    font-size: 18px;
    width: 100%;
    line-height: 1.75;
    padding: 5px 10px;
}

.uk-button-grey {
    background-color: var(--ltgrey);
}

.uk-button-green {
    background-color: var(--green);
}

.uk-button-small {
    font-size: 0.8rem !important;
}

.uk-button-text {
    padding: 0 3px 0 3px;
}

/* Pill buttons: allow long labels to wrap with normal line-height instead of UIKit's
   fixed line-height (38/53/28px per wrapped line, which creates a huge vertical gap).
   Flexbox keeps the label visually centered for both single-line and wrapped content. */
.uk-button.uk-border-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.4;
    padding-top: 8px;
    padding-bottom: 8px;
    height: auto;
    min-height: 38px;
    white-space: normal;
    text-align: center;
}
.uk-button-large.uk-border-pill {
    padding-top: 18px;
    padding-bottom: 18px;
    min-height: 58px;
}
.uk-button-small.uk-border-pill {
    padding-top: 3px;
    padding-bottom: 3px;
    min-height: 28px;
}

/* The Buy gift button renders via InputfieldSubmit (font: inherit), so it picks up
   the ambient form font-weight (a bold 600) instead of the normal weight the other
   pill buttons use. Force normal so it matches them. */
#gift_submit {
    font-weight: 400;
}

/* form styling */

.clear {
    clear: both;
}

input {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

.form-grey {
    color: #A3A3A3;
}

/*a:not(.button) {
    color: #3d3d3d;
    text-decoration: none;
}*/

.questions {
    display: block;
    margin: 0 auto;
    /*max-width: 800px;*/
}

#typeform {
    position: relative;
    font-family: "Source Sans Pro", sans-serif;
    z-index: 3;
}

#typeform .form {
    position: relative;
    z-index: 5;
}

#typeform .form .questions {
    position: relative;
    font-family: "Source Sans Pro", sans-serif;
    padding: 0;
}

@media only screen and (min-width: 800px) {
    #typeform .form .questions {
        padding: 0;
    }
}

#typeform .form .questions > li {
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -khtml-opacity: 0.4;
    -moz-opacity: 0.4;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    display: none;
}

#typeform .form .questions > li .wrapper {
    padding: 15px 20px 15px 0;
}

#typeform .form .questions > li.active {
    display: block;
}

#typeform .form .questions > li.visible .content {
    display: block;
}

#typeform .form .questions > li.focus {
    cursor: default;
    -khtml-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

#typeform .form .questions > li .content {
    display: none;
    position: relative;
    padding: 0;
}

.question {
    color: var(--vdkgrey); /* match the main body text color (was a lighter one-off #3d3d3d) */
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 400; /* override an inherited 600 so question labels/notes aren't bold */
    position: relative;
    padding: 0;
    cursor: default;
    padding-left: 0;
    line-height: 140%;
    text-align: left;
    font-size: 1.2rem;
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
/* Help-note (the inline-styled span under each question label) — lighter than the question. */
.question > span[style] {
    color: var(--dkgrey);
}

@media (max-width: 800px) {
    .question {
        font-size: 1.2rem;
    }
}

@media (max-width: 550px), (max-height: 450px) {
    .question {
        font-size: 1.2rem;
    }
}

.focus .message {
    visibility: visible;
}

#typeform ::-webkit-input-placeholder {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.2rem;
    color: #cccccc;
}

#typeform :-moz-placeholder {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.2rem;
    color: #cccccc;
}

#typeform ::-moz-placeholder {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.2rem;
    color: #cccccc;
}

#typeform :-ms-input-placeholder {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1.2rem;
    color: #cccccc;
}

input:-webkit-autofill {
    background-color: white !important;
    color: var(--dkgrey) !important;
    box-shadow: 0 0 0px 1000px #FFF inset !important; /* Ensure background color fills the field */
    -webkit-text-fill-color: var(--dkgrey) !important;
}

input:-webkit-autofill:focus {
    background-color: white !important;
    -webkit-text-fill-color: var(--dkgrey) !important;
}

input::placeholder {
    color: var(--ltgrey) !important;
}

/*@media (max-width: 800px) {
    ::-webkit-input-placeholder {
        font-size: 1.2rem;
    }

    #typeform :-moz-placeholder {
        font-size: 1.2rem;
    }

    #typeform ::-moz-placeholder {
        font-size: 1.2rem;
    }

    #typeform :-ms-input-placeholder {
        font-size: 1.2rem;
    }
}*/

/*
@media (max-width:550px),
(max-height:450px) {
#typeform ::-webkit-input-placeholder {
    font-size: 1.2rem;
}

#typeform :-moz-placeholder {
    font-size: 1.2rem;
}

#typeform ::-moz-placeholder {
    font-size: 1.2rem;
}

#typeform :-ms-input-placeholder {
    font-size: 1.2rem;
}
}
*/

#typeform input {
    display: block;
    color: var(--dkblue);
    /*width: 100%;*/
    resize: none;
    /*background: none;*/ /* was breaking date selectin on iOS*/
    background-color: #ffffff;
    outline: none;
    font-family: "Source Sans Pro", sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1.2rem;
    padding-left: 0px;
    margin: 0 !important;
    border: none;
    font-weight: 600;
}

.iti__search-input {
    padding-left: 30px !important;
}

@media (max-width: 800px) {
    input,
    .telPlus {
        font-size: 1.2rem;
        line-height: 35px;
    }
}

@media (max-width: 550px), (max-height: 450px) {
    input,
    .telPlus {
        font-size: 1.2rem;
        line-height: 30px;
    }
}

input::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input {
    /*border-bottom: 1px solid transparent*/
}

.ready input {
    border-color: var(--green);
    -moz-transition: border 0ms linear 600ms, border-radius 0ms linear 600ms;
    -webkit-transition: border 0ms linear 600ms, border-radius 0ms linear 600ms;
    -o-transition: border 0ms linear 600ms, border-radius 0ms linear 600ms;
    transition: border 0ms linear 600ms, border-radius 0ms linear 600ms;
}

.ready input:focus {
    border-color: transparent;
}

.message {
    position: relative;
    display: inline-block;
    display: none;
    z-index: 3;
    padding: 5px 8px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    background-color: #990000;
    margin-top: 20px;
}

.message span {
    font-family: Helvetica, Arial;
    color: #fff;
    font-size: 13px;
}

.message div {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #990000;
    position: absolute;
    top: -5px;
    left: 10px;
}

#typeform
    .form
    .questions
    > li.connected:not(.number, .textarea, .email, .textfield, .card-number, .card-expiry, .card-cvc)
    .wrapper {
    padding-top: 0;
}

#typeform
    .form
    .questions
    > li.connected:not(.number, .textarea, .email, .textfield, .card-number, .card-expiry, .card-cvc)
    .message {
    margin-top: 0;
}

/* Prevent outer div (.select) from clipping growing dropdown */
.select {
    overflow: visible !important;
}

.telPlus {
    font-family: "Source Sans Pro", sans-serif !important;
    font-size: 28px !important;
    color: var(--green) !important;
    display: inline-block !important;
}

.tel {
    display: inline-block !important;
}
.country {
    width: 60px;
}
.area_code {
    width: 90px;
}
.number {
    width: 160px;
}

.question span {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.Inputfield_profile_phone,
.Inputfield_register_phone {
    width: 100% !important;
}

.InputfieldFieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.InputfieldHeaderHidden {
    padding: 0 !important;
}

.label-hidden .InputfieldHeader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.InputfieldHeader, .InputfieldRadios ul li label {
    font-size: 1.1rem;
    color: var(--dkgrey);
}

.InputfieldHeader {
    display: block;
    padding-bottom: 6px;
}

.InputfieldColumnWidth {
    /* columns that are not 100% width */
    float: left;
    clear: none;
}
.InputfieldColumnWidthFirst {
    /* first column in a row of Inputfield columns */
    clear: both;
}
.InputfieldColumnWidth:not(.InputfieldColumnWidthFirst) {
    /* any column except first, in a row of Inputfield columns */
    margin-left: 1%;
}

.uk-navbar-nav li.uk-active > a,
.uk-nav li.uk-active > a {
    color: var(--vdkgrey);
}

.uk-navbar-nav > li > a {
    font-size: 17px;
    font-weight: 400;
    color: var(--vdkgrey);
}

/* Apply underline only to links whose parent li does NOT have button classes */
.uk-navbar-nav li.uk-active:not(.nav-button):not([class*="uk-button"]) > a,
.uk-nav li.uk-active:not(.nav-button):not([class*="uk-button"]) > a {
    text-decoration: underline !important;
}

.uk-navbar-nav > li:not(.nav-button) > a:hover,
.uk-navbar-nav > li:not(.nav-button):hover > a {
    color: var(--vdkgrey);
    text-decoration: underline !important;
}

.uk-nav-sub a {
    color: #FFFFFF !important;
}

.uk-section-secondary {
    background: var(--main-background);
}

.uk-input, .uk-select, .uk-textarea {
    font-size: 1rem;
    padding: 4px 8px;
    height: auto;
}

.uk-text-muted {
    color: #666 !important;
}

.headline {
    font-weight: bold;
}

.textblockhighlight {
    color: var(--green);
}

.text-overlay {
    width: 75%;
}

.text-overlay h1 {
    color: #ffffff;
    font-size: 3.5rem;
    text-shadow: 0 2px 0 #5e5e5e;
}

li.topic-control {
    display: inline-block;
    margin: 3px 1px;
    padding: 0;
}

li.topic-control a {
    color: #FFFFFF;
    display: block;
    padding: 0 10px;
}

@media (max-width: 800px) {
    .text-overlay h1 {
        font-size: 3rem;
    }
}

@media (max-width: 550px) {
    .text-overlay h1 {
        font-size: 2rem;
    }
}

@media (max-width: 400px) {
    .text-overlay h1 {
        font-size: 1.4rem;
    }
    .login-button {
        margin-bottom: 10px;
    }
}

i.arrow {
    border: solid var(--green);
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 15px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

img[data-sizes="auto"] {
    display: block;
    width: 100%;
}

/* Avatars carry square width/height for CLS; UIKit's img{max-width:100%!important}
   caps the width in narrow grid columns, so height must follow to stay circular. */
img.uk-border-circle[sizes] {
    height: auto;
}

.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-text-lead {
    font-family: "Montserrat", sans-serif;
}

.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge {
    font-weight: 600;
}

.uk-heading-medium {
    font-size: 3.5rem;
}

.uk-table {
    border-spacing: 10px;
    border-collapse: separate;
    font-size: 1.1rem;
}

.uk-table th {
    background-color: var(--dkblue);
    color: #FFFFFF;
    font-size: 1.2rem;
    text-transform: none;
    text-align: center;
}

.uk-table th a {
    color: #FFFFFF;
    text-decoration: underline !important;
}

.uk-table td {
    border-spacing: 5px;
    margin: 3px;
    background-color: #FFFFFF;
    color: var(--vdkgrey);
    text-align: left;
}

.uk-textarea {
    height: 250px;
}

.text-danger {
    font-size: 1rem;
    color: var(--green);
}

.enter-text {
    display: inline-block;
    padding-top: 5px;
}


.person_type,
.supporters_header {
    display: block;
    margin-top: 44px;
    margin-bottom: 8px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 700;
    font-size: 18px;
    padding: 12px 16px;
    background: var(--ltgrey);
    color: var(--vdkgrey);
    border-left: 4px solid var(--green);
    border-radius: 8px;
}

/* Story form: each section is a card with a header tab (curved top, flat bottom). */
.story-card {
    border: 1px solid var(--ltgrey);
    border-radius: 10px;
    margin-bottom: 24px;
}
/* Intro (greeting + paragraph) — indent text to line up with the card content
   (card border 1px + .questions padding 22px). */
.story-intro {
    padding-left: 23px;
    padding-right: 23px;
}
/* Self-help forms (health/wellbeing, longevity, healthcare worker) have no pre-subscriber
   "person" section, so their intro card renders with no questions — hide it when empty.
   Person forms (death, pet death, caregivers, etc.) always have deceased questions here. */
.story-card-intro:not(:has(li)) {
    display: none;
}
.story-card-header {
    background: var(--vltgrey);
    border-bottom: 1px solid var(--ltgrey);
    border-radius: 10px 10px 0 0;
    padding: 14px 22px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--vdkgrey);
}
/* The intro/deceased card has no header, so round its top via the card itself. */
#typeform .story-card .questions {
    padding: 14px 22px;
    margin: 0;
}
#typeform .story-card .questions > li .wrapper {
    padding-left: 0;
    padding-right: 0;
}

.story-card-body { padding: 14px 22px; }

input[type="date"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

.LoginRegisterLinksLogout {
    list-style: none;
}

#wrap_register_coupon {
    padding-bottom: 5px !important;
}

#wrap_coupon_apply_button {
    padding-bottom: 0 !important;
}

/* branded coupon hero */
.coupon-container {
    position: relative;
    width: 100%;
}

.coupon-container img {
    width: 100%;
    height: auto;
    max-height: 70vh;
    min-height: 25vh;
    object-fit: cover;
    display: block;
}

.coupon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    padding: clamp(0.75rem, 3vw, 3rem) clamp(1rem, 4vw, 3.5rem);
    width: 75%;
    box-sizing: border-box;
    margin-top: 5%;
    margin-left: 5%;
}

.coupon-overlay-text {
    margin: 0;
    font-family: Montserrat;
    font-size: clamp(1rem, 2.75vw, 3.25rem);
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    overflow-wrap: break-word;
}


@media (min-width: 960px) {
    .coupon-overlay {
        width: 50%;
    }
}


.Inputfield:not(.InputfieldSubmit) {
    background: none !important;
    border: none !important;
}

ul.LoginRegisterLinks {
    list-style: none;
    padding-left: 0;
}

.Inputfield {
    padding: 0 0 22px 0 !important;
}

#testimonial-form .Inputfields {
    padding-left: 0;
}

.emptydate {
    color: #ccc !important;
    width: 250px !important;
}

@media only screen and (max-width: 959px) {
    #tracyUserBar {
        left: 50px !important;
    }
}

.requiredCheck {
    color: #c0392b;
    font-weight: 600;
}

/* modal */
.modal-container {
    width: 300px;
    margin: 0px auto;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
    transition: all 0.3s ease;
    font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
    margin-top: 0;
    color: #b9d332;
}

.modal-body {
    margin: 20px 0;
}

.modal-default-button {
    background-color: var(--green);
    color: #ffffff;
    font-weight: bold;
    font-size: 1em;
    margin: 0 auto;
    padding: 10px;
    border: none;
    text-align: center;
    cursor: pointer;
}
.phone {
    width: 250px !important;
}

#typeform .phone {
    padding-left: 50px !important;
}

.uk-form-width-large {
    max-width: 300px !important;
}

#contact-form ul {
    padding-left: 0 !important;
}

.pwcmb-widget {
    background: #ffffff;
    border: 1px solid #555354;
}

.pwcmb-widget button {
    background-color: #b8d332;
    border: none;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-size: 17px;
    padding: 16px 31px;
    text-decoration: none;
}

.pwcmb-widget button:hover {
    background-color: #555354;
}

.uk-article-meta {
    font-size: 1rem;
    color: var(--dkgrey);
}



.textblockhighlightorange {
    color: var(--orange);
}

.textblockhighlightblue {
    color: var(--dkblue);
}

.videoquote:before {
    display: block;
    padding: 10px 0 0 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: 0px;
    top: -20px;
}

blockquote footer {
    font-size: 1rem;
}

.uk-margin-xxlarge-right {
    margin-right: 90px !important;
}

@media (min-width: 640px) {
    .uk-padding-right\@s {
        padding-right: 40px !important;
    }
    .uk-padding-left\@s {
        padding-left: 40px !important;
    }

    .uk-margin-remove-bottom\@s {
        margin-bottom: 0 !important;
    }

}


@media (min-width: 960px) {
    .uk-padding-remove\@m {
        padding: 0px !important;
    }
    .uk-padding-top\@m {
        padding-top: 40px !important;
    }
    .uk-padding-large-top\@m {
        padding-top: 40px !important;
    }
    .uk-padding-right\@m {
        padding-right: 40px !important;
    }
    .uk-padding-left\@m {
        padding-left: 40px !important;
    }
    .uk-margin-large-right\@m {
        margin-right: 50px !important;
    }

    .uk-margin-remove-top\@m {
        margin-top: 0 !important;
    }

    .uk-margin-remove-bottom\@m {
        margin-bottom: 0 !important;
    }
}

.uk-height-xlarge {
    height: 550px;
}

@media (min-width: 1920px) {
    .uk-height-xlarge {
        height: 950px;
    }
}

.uk-cover {
    max-width: none;
    position: absolute;
    left: initial;
    top: initial;
    transform: initial;
    right: 0;
}

@media only screen and (max-width: 767px) {
    .uk-cover {
        right: -130px;
    }
}

/* Alert treatment — one shape for all severities (soft tint background, dark
   readable text, colored left accent bar, rounded, spaced); only the COLOUR
   differs per severity (see per-type rules below). !important overrides UIKit's
   .uk-alert base plus the module's red .LoginRegisterError default in
   LoginRegister.css. .uk-alert-primary is intentionally excluded — it's the
   site banner (_main.php), not an error/notification. */
.LoginRegisterError,
.uk-alert-warning,
.uk-alert-success,
.uk-alert-danger {
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    margin: 0 0 12px !important;
    font-weight: normal !important;
}

.LoginRegisterError:last-child,
.uk-alert-warning:last-child,
.uk-alert-success:last-child,
.uk-alert-danger:last-child {
    margin-bottom: 0 !important;
}

/* Validation + warning — orange (#A4451A on #FDEEE4 ≈ 5.4:1, passes WCAG AA) */
.LoginRegisterError,
.uk-alert-warning {
    background-color: #FDEEE4 !important;
    color: #A4451A !important;
    border-left: 4px solid var(--orange) !important;
}

/* Success — green (#4F5A14 on #EEF3D8 ≈ 6.5:1, passes WCAG AA) */
.uk-alert-success {
    background-color: #EEF3D8 !important;
    color: #4F5A14 !important;
    border-left: 4px solid var(--dkgreen) !important;
}

/* Danger — red (#A12222 on #FBE6E6 ≈ 6.4:1, passes WCAG AA) */
.uk-alert-danger {
    background-color: #FBE6E6 !important;
    color: #A12222 !important;
    border-left: 4px solid #C0392B !important;
}

.LoginRegisterError a,
.uk-alert-warning a {
    color: #A4451A;
    text-decoration: underline !important;
}

.uk-alert-success a {
    color: #4F5A14;
    text-decoration: underline !important;
}

.uk-alert-danger a {
    color: #A12222;
    text-decoration: underline !important;
}

.subscribe-form {
    padding-top: 50px;
}

.subscribe-form p {
    font-size: 1.3rem;
    font-family: "Montserrat", sans-serif;
}

/* Plan card selector */
.plan-cards {
    display: flex;
    gap: 12px;
}

.plan-card-label {
    flex: 1;
    cursor: pointer;
}

.plan-card-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plan-card {
    position: relative;
    border: 2px solid var(--ltgrey);
    border-radius: 10px;
    padding: 14px 12px;
    text-align: center;
    background: #fff;
    transition: border-color 0.2s, background 0.2s;
}

.plan-card-label:hover .plan-card {
    border-color: var(--dkblue);
    background: rgba(16, 151, 184, 0.06);
}

.plan-card-label input[type="radio"]:checked + .plan-card {
    border-color: var(--dkblue);
    background: rgba(16, 151, 184, 0.06);
}

.plan-card-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dkgrey);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.plan-card-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--vdkgrey);
}

.plan-card-period {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--dkgrey);
}

.plan-card-original {
    font-size: 0.85em;
    font-weight: 400;
    color: var(--dkgrey);
    margin-right: 4px;
}

.plan-card-badge {
    position: absolute;
    top: -10px;
    right: -6px;
    background: var(--dkblue);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

@media (max-width: 400px) {
    .plan-cards {
        flex-direction: column;
    }
}

/* Support need card selector */
.sn-card-label {
    display: block;
    cursor: pointer;
}

.sn-card-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sn-card-label .sn-card {
    background: #fff;
    transition: border-color 0.2s, background 0.2s;
}

.sn-card-label:hover .sn-card {
    background: rgba(16, 151, 184, 0.06);
    border-color: var(--dkblue) !important;
}

.sn-card-label input[type="radio"]:checked + .sn-card {
    border-color: var(--dkblue) !important;
    background: rgba(16, 151, 184, 0.06) !important;
}

.sn-block-card {
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 639px) {
    .sn-block-card {
        white-space: normal;
    }
}
.sn-block-emoji {
    font-size: 1.4rem;
    margin-left: 12px;
    flex-shrink: 0;
}

.sn-block-card:hover {
    border-color: var(--dkblue) !important;
    box-shadow: inset 0 0 0 1px var(--dkblue) !important;
    color: inherit;
    text-decoration: none;
}

.faq-item {
    transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-item:hover {
    border-color: var(--dkblue) !important;
    box-shadow: inset 0 0 0 1px var(--dkblue) !important;
}

.support-needs-grid {
    display: flex;
    gap: 0 15px;
}

.support-needs-grid > div {
    flex: 1;
}

@media (max-width: 959px) {
    .support-needs-grid {
        flex-direction: column;
        gap: 0;
    }
}

.featured-items-group .uk-card {
    color: var(--vdkgrey);
}
.featured-items-group .uk-card-body p,
.featured-items-group .uk-text-center p:not(.eyebrow) {
    color: var(--dkgrey) !important;
}

.featured-items-group a.link-card,
.featured-items-group a.link-card:hover,
.featured-items-group a.link-card:focus {
    color: inherit;
}
.featured-items-group a.link-card {
    transition: box-shadow 0.2s;
}
.featured-items-group a.link-card:hover,
.featured-items-group a.link-card:focus {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    text-decoration: none;
}
.featured-items-group a.link-card:hover .link-card__more,
.featured-items-group a.link-card:focus .link-card__more {
    text-decoration: underline;
}

.uk-breadcrumb {
    display: inline-block;
    padding: 0 0 15px 0;
    list-style: none;
}

.uk-breadcrumb li {
    display: inline;
}

.uk-breadcrumb > :nth-child(n + 2):not(.uk-first-column)::before {
    content: "|";
    display: inline;
    margin: 0 10px;
}

.uk-breadcrumb > * > * {
    display: inline;
    font-size: 1rem;
    color: var(--dkgrey);
}

#CommentForm {
    display: none;
}

#newsletter-subscribe-form ul {
    padding-left: 0 !important;
}

#newsletter-subscribe-form .InputfieldContent {
    display: inline !important;
}

#newsletter-subscribe-form .Inputfield {
    display: inline;
}


aside.invite_panel button,
aside.invite_panel a {
    font-weight: bold;
}

aside.development {
    border-radius: 1em;
    padding: 1em;
    border: 2px solid var(--green);
}
aside.development details summary {
    font-weight: 600;
}

aside.development ul li,
aside.development ul {
    padding-left: 0;
}

a.inv_a {
    font-size: 1.2rem;
    border-bottom: 4px solid transparent;
}

strong.email_highlight {
    padding: 0.25rem 1rem;
    background-color: #fde0b0;
    border-radius: 10px;
    color: #333;
}

.InputfieldCheckbox.InputfieldStateRequired
    > .InputfieldContent
    > label
    > span.pw-no-select::after {
    content: "" !important;
}

/* Example Texts */
li.example_text_title {
    list-style-type: none;
    flex: inherit;
    padding-bottom: 10px;
    margin: 0;
}
li.example_text_title a {
    font-family: Montserrat !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}
/* UIKit's .uk-subnav default grey (#999) outranks .uk-button-secondary's white
   on specificity; force white so the pill labels stay legible. */
#example_texts_titles li.example_text_title a {
    color: #FFFFFF;
    padding: 10px 28px;
}
/* Selected pill button gets a dark fill to mark the active tab. */
#example_texts_titles > li.uk-active > a.uk-button-secondary {
    background-color: var(--vdkgrey);
    color: #FFFFFF;
}

.example_text {
    font-family: Montserrat !important;
    font-weight: 100 !important;
    font-size: 16px !important
}


/* Speech Bubbles */
.speech-bubble {
	position: relative;
    display: inline-block;
	background: #FFFFFF;
	border-radius: .4em;
    padding: 30px 30px 10px 30px;
    margin: 1em 0;
    color: var(--vdkgrey);
    font-weight: bold;
    font-size: 200%;
}

.speech-bubble h3 {
    font-size: 26px;
}

.speech-bubble-left {
    background-color: #FFFFFF;
}

.speech-bubble-left-blue {
    background-color: var(--ltblue);
}

.speech-bubble-right {
    background-color: var(--ltblue);
}

.speech-bubble:after {
	content: '';
	position: absolute;
	top: 75%;
	width: 0;
	height: 0;
	border: 25px solid transparent;
	border-bottom: 0;
	margin-top: -12.5px;
}

.speech-bubble-left:after {
	left: 0;
    border-right-color: #FFFFFF;
	border-left: 0;
    margin-left: -25px;
}

.speech-bubble-left-blue:after {
	left: 0;
    border-right-color:  var(--ltblue);
	border-left: 0;
    margin-left: -25px;
}

.speech-bubble-right:after {
	right: 0;
    border-left-color: var(--ltblue);
	border-right: 0;
    margin-right: -25px;
}

.cartoon_text_overlay {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 50px 40px 50px 60px;
    font-family: "Nanum Pen Script";
    font-size: 26px;
    color: var(--vdkgrey);
    line-height: 1
}

/* Fixed the ugly UIKIT RSS icon in the footer */
.uk-icon[uk-icon*="icon: rss"] svg path {
    stroke-width: 3.5;
    stroke-linecap: round;
}
.uk-icon[uk-icon*="icon: rss"] svg {
    transform: scale(0.85);
}
.uk-icon[uk-icon*="icon: rss"] svg circle {
    transform: scale(1.2);
    transform-origin: 0% 100%; /* Scale from the bottom-left corner */
}

.social_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    width: 44px;
    height: 44px;
    padding: 5px;
    margin-right: 5px;
    border-radius: 50%;
    box-sizing: border-box;
}

.social_icon > a {
    color: var(--green) !important;
}

.media_icon > svg,
.media_icon path {
    margin: 0 20px 10px 0;
    height: 30px;
    width: auto;
    fill: var(--dkgrey) !important;
    stroke: none !important;
}

.icon-responsive-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Align items vertically */
    gap: 25px 35px; /* Space between items */
}

.media_icon_grey {
    display: inline-flex; /* Allows alignment inside each logo's container */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    margin: 0;
    padding: 0;
    overflow: visible;
}
.media_icon_grey img {
    object-fit: contain;
}

.media_icon_grey path,
.media_icon_grey rect,
.media_icon_grey circle {
    fill: var(--dkgrey) !important;
    stroke: none !important;
}

@media (max-width: 768px) {
    .media_icon_grey {
        transform: scale(0.85);
        transform-origin: top left;
    }
    .icon-responsive-grid {
        gap: 20px 10px;
    }
}

@media (max-width: 480px) {
    .media_icon_grey {
        transform: scale(0.75);
        transform-origin: top left;
    }
}



@media (min-width: 960px) {
    .cartoon_text_overlay {
        font-size: 32px;
        padding: 60px 80px 60px 60px;
    }

    .speech-bubble h3 {
        font-size: 40px;
    }

    h1 { font-size: 50px; }
    h2 { font-size: 40px; }
    h3 { font-size: 32px; }
    h4 { font-size: 26px; }
    h5 { font-size: 20px; }
    h6 { font-size: 16px; }

    li.example_text_title a {
        font-size: 16px !important;
    }
    .example_text {
        font-size: 20px !important;
    }

}

/* On mobile the signup form column stacks under the intro body; UIkit adds a
   30px stacking gutter (.uk-grid-margin) which, on top of the intro's own
   bottom margin, leaves an oversized gap above the form. Drop the gutter so
   the form sits snugly under the intro. Only present when stacked (desktop
   keeps the columns side by side, no .uk-grid-margin). */
.signup-intro-grid > .uk-grid-margin {
    margin-top: 0;
}

/* Reset UIkit defaults and apply custom styling */
.buy-tabs.uk-tab {
    position: relative;
    border-bottom: 1px solid #dcdcdc;
    margin: 0 0 30px 0; /* Keep the uk-margin-medium-bottom spacing */
    padding: 0;
}

.buy-tabs.uk-tab::before {
    display: none; /* Remove UIkit's default bottom border */
}
/* All tabs */
.buy-tabs.uk-tab > li > a,
.buy-tabs.uk-tab > li > span {
    position: relative;
    padding: 10px 18px;
    color: var(--dkgrey);
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
    transition: background 0.2s ease, color 0.2s ease; /* Smooth transition */
}

/* Active tab */
.buy-tabs.uk-tab > li.uk-active > a,
.buy-tabs.uk-tab > li.uk-active > span {
    color: #000;
    font-weight: 700;
    border: 1px solid #dcdcdc;
    border-bottom: 1px solid #FFFFFF;
    border-radius: 4px 4px 0 0;
    position: relative;
    margin-bottom: -1px;
    z-index: 2;
}

/* Inactive hover */
.buy-tabs.uk-tab > li:not(.uk-active) > a:hover {
    color: #000;
    border-color: #e0e0e0;
    border-bottom: 1px solid #FFFFFF;
    border-radius: 4px 4px 0 0;
    margin-bottom: -1px;
}

/* ----------------------------------------------------------------
 * Topic filter panel — cream pill list (blog sidebar, experts page).
 * Supports both `.is-active` (custom) and `.uk-active` (UIKit Filter).
 * ---------------------------------------------------------------- */
.topic-filter {
    background: var(--cream);
    border: 1px solid var(--ltgrey);
    border-radius: 12px;
    padding: 18px;
}
.topic-filter__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.topic-filter__heading {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555;
}
.topic-filter__reset {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.8rem;
    line-height: 1.3;
    background: #fff;
    border: 1px solid var(--ltgrey);
    border-radius: 999px;
    color: var(--dkblue);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.topic-filter__reset:hover,
.topic-filter__reset:focus-visible {
    background: var(--dkblue);
    border-color: var(--dkblue);
    color: #fff;
    text-decoration: none;
}
.topic-filter__reset[aria-disabled="true"],
.topic-filter__reset.is-active,
.topic-filter__reset.uk-active {
    background: var(--dkblue);
    border-color: var(--dkblue);
    color: #fff;
}
.topic-filter__reset[aria-disabled="true"] {
    pointer-events: none;
}
.topic-filter__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.topic-filter__item {
    display: inline-block;
    padding: 5px 12px;
    font-size: 0.85rem;
    line-height: 1.3;
    background: #fff;
    border: 1px solid var(--ltgrey);
    border-radius: 999px;
    color: var(--dkblue);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.topic-filter__item:hover,
.topic-filter__item:focus-visible {
    background: var(--dkblue);
    border-color: var(--dkblue);
    color: #fff;
    text-decoration: none;
}
.topic-filter__item.is-active,
.topic-filter__item.uk-active {
    background: var(--dkblue);
    border-color: var(--dkblue);
    color: #fff;
}
/* When a pill is a li wrapping an anchor (UIKit Filter pattern), inherit colors */
.topic-filter__item > a {
    color: inherit;
    text-decoration: none;
}
/* Collapsible toggle: button wraps the heading + chevron. Behaves as static
 * text on desktop; clickable on mobile to expand/collapse the topic list. */
.topic-filter__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
}
.topic-filter__chevron {
    display: none;
    font-size: 0.7rem;
    color: #555;
    transition: transform 0.2s ease;
}
@media (max-width: 640px) {
    .topic-filter__toggle { cursor: pointer; }
    .topic-filter__chevron { display: inline-block; }
    .topic-filter[data-expanded="true"] .topic-filter__chevron { transform: rotate(180deg); }
    /* Collapsed by default: hide list, drop header margin */
    .topic-filter:not([data-expanded="true"]) .topic-filter__list { display: none; }
    .topic-filter:not([data-expanded="true"]) .topic-filter__header { margin-bottom: 0; }
    /* Collapsed but a topic is selected: show the list with only the active pill */
    .topic-filter:not([data-expanded="true"]) .topic-filter__list:has(.topic-filter__item.is-active, .topic-filter__item.uk-active) {
        display: flex;
    }
    .topic-filter:not([data-expanded="true"]):has(.topic-filter__item.is-active, .topic-filter__item.uk-active) .topic-filter__header {
        margin-bottom: 14px;
    }
    .topic-filter:not([data-expanded="true"]) .topic-filter__item:not(.is-active):not(.uk-active) {
        display: none;
    }
    /* Push the blog filter column above the posts column on mobile */
    .blog-page__filter { order: -1; }
}

/* ----------------------------------------------------------------
 * Sitewide pagination — circles for numbered pages, text+chevron for prev/next
 * Active page = filled dark-blue circle. Works with both pager configs:
 *   <li class="uk-active"><span aria-current="page">2</span></li>      (search)
 *   <li class="uk-active"><span><a href="...">2</a></span></li>        (blog)
 * ---------------------------------------------------------------- */
.uk-pagination { gap: 2px; align-items: center; flex-wrap: wrap; }
.uk-pagination > * { padding-left: 0; }
.uk-pagination > * > a,
.uk-pagination > * > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: 999px;
    color: var(--dkblue);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.uk-pagination > * > a:hover {
    background: var(--ltgrey);
    color: var(--dkblue);
    text-decoration: none;
}
.uk-pagination > .uk-active > a,
.uk-pagination > .uk-active > span {
    background: var(--dkblue);
    color: #fff;
}
/* Reset nested anchor inside active span (blog/ukPagination shape) so the
 * pill doesn't double up dimensions. */
.uk-pagination > .uk-active > span > a {
    display: inline;
    padding: 0;
    min-width: 0;
    height: auto;
    background: transparent;
    color: inherit;
    border-radius: 0;
}
.uk-pagination > .uk-disabled > * {
    color: var(--ltgrey);
    background: transparent;
}
/* Prev / Next: keep text + chevron, no full-circle background */
.uk-pagination > li:first-child > a,
.uk-pagination > li:last-child > a {
    border-radius: 4px;
    padding: 0 8px;
}
/* Narrow screens: modest tightening so the row doesn't wrap */
@media (max-width: 640px) {
    .uk-pagination > * > a,
    .uk-pagination > * > span {
        min-width: 28px;
        height: 28px;
        padding: 0 4px;
        font-size: 0.9rem;
    }
    .uk-pagination > li:first-child > a,
    .uk-pagination > li:last-child > a {
        padding: 0 6px;
    }
}

/* ===== Logged-in account area (tabbed app shell) ===== */
.account-nav {
    background: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 100;
}
.account-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 0 auto;
    max-width: 1200px;
    padding: 12px 24px;
}
.account-tabs li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    color: var(--dkgrey);
    text-decoration: none;
    font-family: Montserrat;
    font-size: 15px;
    white-space: nowrap;
}
.account-tabs li a:hover {
    background: #F4F6E8;
    color: var(--vdkgrey);
}
.account-tabs li.uk-active a {
    background: var(--green);
    color: var(--vdkgrey);
    font-weight: 600;
}
.account-tabs li a [uk-icon] {
    /* Reserve the icon box (ratio 0.85 × 20px = 17px) so the nav doesn't grow taller
       when uikit-icons.min.js (deferred) injects the SVGs. */
    display: inline-block;
    width: 17px;
    height: 17px;
}
.account-tabs:has([uk-icon]:not(.uk-icon)) li.uk-active a {
    /* Mobile hides the labels, so until UIkit upgrades the icons every tab is empty and
       the active tab's green pill shows alone as a stray blob. Hold the pill until the
       icons are present. UIkit adds .uk-icon on upgrade; browsers without :has() simply
       keep the original (pre-fix) behaviour. */
    background: transparent;
}
.account-avatar {
    position: relative;
    display: inline-block;
    cursor: pointer;
    line-height: 0;
}
.account-avatar-link {
    text-decoration: none;
}
.account-avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--vdkgrey);
    font-family: Montserrat;
    font-weight: 600;
}
/* The dropdown sits inside .uk-navbar-nav in the DOM, so reset the navbar anchor
   styling that otherwise makes these links invisible/oversized. */
.account-avatar-menu {
    /* Hide before UIkit's JS runs and adds .uk-drop (which carries display:none).
       Until then this element has no hiding rule and would flash on load. UIkit's
       .uk-drop.uk-open (0-2-0) still overrides this (0-1-0) when the menu opens. */
    display: none;
    min-width: 150px;
    padding: 8px 0;
    background-color: var(--green);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
.account-avatar-menu .uk-nav > li {
    padding: 0 10px;
    margin: 0;
}
.account-avatar-menu .uk-nav > li > a {
    color: var(--vdkgrey) !important;
    display: block;
    min-height: 0;
    line-height: 1.4;
    text-transform: uppercase;
    font-family: Montserrat;
    font-size: 17px;
    white-space: nowrap;
    padding: 6px 4px;
}
.account-avatar-menu .uk-nav > li > a:hover,
.account-avatar-menu .uk-nav > li > a:focus {
    color: var(--vdkgrey) !important;
    text-decoration: underline !important;
    background: transparent;
}
/* Mark "My Account" as the current page when viewing the account area (any tab).
   !important for the same reason the hover rule needs it — UIkit's navbar-anchor
   styling otherwise forces text-decoration: none on these links. */
.account-avatar-menu .uk-nav > li.account-menu-current > a {
    text-decoration: underline !important;
}
.account-home,
.account-texts-page,
.account-resources-page,
.account-subscription-page {
    /* Fill the full width of the parent uk-container (which already caps at 1200px and
       provides the side padding) — no extra max-width or horizontal padding here. */
    padding: 24px 0;
}
.account-home-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-top: 24px;
}
/* No resource picks (e.g. products with no tagged resources yet) — recent texts fill the width. */
.account-home-grid--single {
    grid-template-columns: 1fr;
}
.account-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}
.account-section-head h2 {
    font-size: 24px;
    margin: 0;
}
/* Keep the "View all" button on one line; let the heading take the remaining width. */
.account-section-head .uk-button {
    flex: 0 0 auto;
    white-space: nowrap;
}
/* "View all" sits at the bottom of the Home picks / texts sections, right-aligned. */
.account-viewall {
    margin-top: 16px;
    text-align: right;
}
.account-seeall {
    color: var(--dkgrey);
    text-decoration: none;
    font-size: 15px;
    white-space: nowrap;
}
.account-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.account-card-grid-wide {
    grid-template-columns: repeat(3, 1fr);
}
.account-card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    background: linear-gradient(135deg, #D7DEE6, #EDE7DF);
    margin-bottom: 10px;
}
.account-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--green);
    color: var(--vdkgrey);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    border-radius: 999px;
}
.account-card-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 2px;
}
.account-card-sub {
    color: var(--dkgrey);
    font-size: 15px;
    margin: 0;
}
/* The texts heading sits in an .account-section-head above this panel. The preview
   mirrors the Texts-tab conversation (grey incoming bubbles, no container box) so it reads
   the same in the narrow sidebar and when it fills the width (no-resources single-column).
   Capped so full-width doesn't stretch it into a full-page slab. */
.account-texts-panel {
    max-width: 640px;
}
/* Sidebar mode: a tinted "conversation surface" — the Texts tab's palette inverted
   (grey bubbles on the white page there; white bubbles on that same bubble grey
   here). The heading sits above it in the shared .account-section-head row, so the
   surface's top edge lines up with the resource cards across the gutter. Full-width
   no-resources mode keeps the plain grey bubble list (no surface wrapper). */
.account-texts-surface {
    background: #EDEFF5;
    border: 1px solid var(--ltgrey);
    border-radius: 14px;
    padding: 20px 22px;
}
.account-texts-surface .account-text-bubble {
    background: #fff;
}
/* The surface's own padding provides the top offset — drop the first date label's
   spacing margin so content starts flush at the aligned top edge. */
.account-texts-surface .account-text-meta:first-child {
    margin-top: 0;
}
.account-texts-sub {
    color: var(--dkgrey);
    font-size: 14px;
    margin: 0 0 16px;
}
/* Matches .account-msg-incoming .account-msg-bubble on the Texts tab: grey, rounded,
   content-hugging and left-aligned (an incoming message), not a full-width white bar. */
.account-text-bubble {
    width: fit-content;
    max-width: 90%;
    background: #EDEFF5;
    border-radius: 22px;
    padding: 12px 18px;
    color: var(--vdkgrey);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 10px;
}
.account-text-meta {
    color: var(--vdkgrey);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    margin: 24px 0 10px;
}
.account-texts-list { max-width: 640px; }

/* Texts tab — iMessage-style two-way conversation. Fills the full tab width. */
.account-msgs { width: 100%; padding-bottom: 2rem; }
/* Compose field (mockup) below the conversation. */
.account-send {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    bottom: 0;
    z-index: 90;
    background: transparent;
    padding: 12px 0;
}
.account-send-field {
    position: relative;
    /* Explicit width (not flex-grow) so the field can never extend under the send
       button: 36px button + 12px gap = 48px reserved on the right. */
    flex: 0 0 auto;
    width: calc(100% - 48px);
    min-width: 0;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    background: transparent;
}
.account-send-input {
    width: 100%;
    /* Without this the input is content-box: width:100% sizes the content to the
       field, then padding + border push the total ~64px wider, overflowing the field
       and sliding the pill under the send button. */
    box-sizing: border-box;
    border: 1px solid var(--ltgrey);
    border-radius: 999px;
    padding: 12px 44px 12px 18px;
    font-size: 15px;
    font-family: "Source Sans Pro", sans-serif;
    color: var(--vdkgrey);
    background: #FFFFFF;
    outline: none;
}
.account-send-emoji {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    font-size: 20px;
    line-height: 1;
}
/* Curated emoji popover — opens upward from the bottom-pinned compose, right-aligned
   near the trigger. Hidden by the [hidden] attribute until the script toggles it. */
.account-send-emojis {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    width: 296px;
    max-width: 80vw;
    max-height: 220px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid var(--ltgrey);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 95;
}
.account-send-emoji-option {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 6px 0;
    border-radius: 8px;
}
.account-send-emoji-option:hover,
.account-send-emoji-option:focus {
    background: #F4F6E8;
}
.account-send-input:focus {
    border-color: var(--dkblue);
}
.account-send-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--dkblue);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Sit above the relatively-positioned .account-send-field, which would otherwise
       paint over the button where they meet. */
    position: relative;
    z-index: 1;
}
.account-send-btn:hover {
    background: var(--dkrblue);
}
.account-msg {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 8px;
}
/* A reaction tapback is absolutely positioned 12px below its bubble (bottom: -12px),
   so the default 8px gap lets the next message overlap and cover it. Give rows that
   carry a reaction extra bottom clearance (regardless of what message follows). */
.account-msg:has(.account-msg-reaction) {
    margin-bottom: 32px;
}
.account-msg-incoming { justify-content: flex-start; }
.account-msg-outgoing { justify-content: flex-end; }
.account-msg-bubble {
    position: relative;
    max-width: 60%;
    padding: 12px 18px;
    border-radius: 22px;
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.account-msg-incoming .account-msg-bubble {
    background: #EDEFF5;
    color: var(--vdkgrey);
}
.account-msg-outgoing .account-msg-bubble {
    background: var(--dkblue);
    color: #FFFFFF;
}
.account-msg-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: Montserrat;
    font-weight: 600;
}
.account-msg-avatar-ht {
    background: #FFFFFF;
    overflow: hidden;
}
.account-msg-avatar-ht img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.account-msg-reaction {
    position: absolute;
    bottom: -12px;
    right: -6px;
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
/* "Not delivered" badge — top-right of a failed/undelivered bubble, mirroring the
   reaction tapback's pill appearance. */
.account-msg-error {
    position: absolute;
    top: -10px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-radius: 999px;
    color: #c0392b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    cursor: default;
}
.account-msg-error svg {
    width: 14px;
    height: 14px;
}
.account-msg-bubble-error {
    border: 1px solid rgba(192, 57, 43, 0.45);
}

.account-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--dkgrey);
    background: var(--cream);
    border: 1px dashed var(--ltgrey);
    border-radius: 14px;
}
.account-coming-soon [uk-icon],
.account-coming-soon [class*="uk-icon"] {
    color: var(--green);
}
.account-coming-soon p {
    margin: 0;
    max-width: 460px;
}
.account-coming-soon-large {
    padding: 72px 24px;
}
.account-coming-soon-large h2 {
    margin: 0;
    color: var(--vdkgrey);
}

/* Resources tab: read/unread flag on cards + spacing between sections. */
.account-resource {
    position: relative;
}
.account-resource .resource-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    /* content width — the card sits in a uk-grid-match flex cell, where an
       absolutely-positioned child with auto left + set right would otherwise
       stretch full-width (flex static-position resolution). */
    width: max-content;
    z-index: 2;
    background: rgba(0, 0, 0, 0.72); /* neutral charcoal — reads on any photo regardless of hue */
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .35); /* lift the pill off the photo so it reads on any image */
    pointer-events: none;
}
.account-resource-section + .account-resource-section {
    margin-top: 40px;
}

/* Subscription tab: each option (Pause, Switch, Cancel, Renew, status) is its own card. */
.account-sub-card {
    border: 1px solid var(--ltgrey);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 20px;
}
.account-sub-card > :first-child { margin-top: 0; }
/* Flush the last paragraph (e.g. a button) to the card bottom — but not when it's also the
   only paragraph (the renew card's heading), which still needs its gap before the form. */
.account-sub-card > p:last-of-type:not(:first-of-type) { margin-bottom: 0; }
/* Pause/Resume + Cancel sit side-by-side; each fills the row if the other is absent, and
   they wrap to stacked on narrow screens. */
.account-sub-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}
.account-sub-row > .account-sub-card,
.account-sub-row > .story-card {
    flex: 1 1 280px;
    margin-bottom: 0;
}

/* Payment-history table — clean, calm look inside the story-card body (avoids the
   global .uk-table dashboard styling with its teal headers). */
/* Payment-history table. A global ready.php hook force-adds `uk-table uk-table-small`
   to every <table>, so we override the global teal/gap .uk-table styling under the
   .account-sub-history wrapper rather than via the table's own class. */
.account-sub-history .uk-table {
    border-collapse: collapse; /* no gaps between cells */
    border-spacing: 0;
    font-size: 1rem;
    margin: 0;
}
.account-sub-history .uk-table th {
    background: var(--ltgrey); /* light grey header (not blue) */
    color: var(--vdkgrey);
    font-weight: 600;
    font-size: 1rem;
    text-align: left;
    text-transform: none;
    padding: 10px 12px;
}
.account-sub-history .uk-table td {
    background: transparent;
    color: var(--vdkgrey);
    text-align: left;
    padding: 10px 12px;
    vertical-align: top;
}
.account-sub-history .uk-table tbody tr:nth-child(even) td {
    background: var(--vltgrey); /* row striping */
}
.account-sub-txn {
    word-break: break-all; /* let the long Paddle txn id wrap; size/colour match the other cells */
}
/* Next-payment note below the Subscriptions table (active monthly-recurring only). */
.account-sub-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--vltgrey);
    border: 1px solid var(--ltgrey);
    border-radius: 8px;
    color: var(--vdkgrey);
    font-size: 0.95rem;
}
.account-sub-note-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--dkblue);
}

@media (max-width: 960px) {
    .account-home-grid { grid-template-columns: 1fr; }
    .account-card-grid-wide { grid-template-columns: 1fr 1fr; }
    .account-tab-label { display: none; }
    /* Reclaim width for the conversation on smaller screens. */
    .account-home,
    .account-texts-page,
    .account-resources-page,
    .account-subscription-page { padding: 16px 0; }
    /* Keep a clear offset on the far side so bubbles read as inset, not full-width. */
    .account-msg-bubble { max-width: 65%; }
}
/* Nav tab tooltips: labels are visible above 960px, so suppress the (now
   redundant) tooltip there. The cls is applied to the tooltip popup by UIkit. */
@media (min-width: 961px) {
    .uk-tooltip.account-tab-tip { display: none !important; }
}
@media (max-width: 640px) {
    .account-card-grid { grid-template-columns: 1fr; }
    .account-card-grid-wide { grid-template-columns: 1fr; }
    /* Icon-only tabs: tighten spacing so all tabs fit one row (no wrapped icon). */
    .account-tabs { gap: 2px; padding: 12px 8px; }
    .account-tabs li a { padding: 8px 10px; }
}

/* === Blog cards === (moved from blog.php's inline <style> so renderBlogCard() is
   styled everywhere it's used — the blog index/popular pages AND the account Home /
   Resources tabs.) */
.blog-grid { display:flex; flex-wrap:wrap; }
.blog-card { display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none; font-family:"Montserrat", sans-serif; transition:box-shadow 0.2s; }
.blog-card:hover, .blog-card:focus-visible { color:inherit; text-decoration:none; box-shadow:0 4px 16px rgba(0,0,0,0.08); }
.blog-card__img { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:8px; }
.blog-card__body { display:flex; flex-direction:column; flex:1; padding:16px 0 0; }
.blog-card--boxed { border:1px solid var(--ltgrey); border-radius:10px; overflow:hidden; background:#fff; }
.blog-card--boxed .blog-card__img { border-radius:0; aspect-ratio:1/1; }
.blog-card--boxed .blog-card__body { padding:16px; }
.blog-card__meta { display:flex; align-items:center; gap:12px; margin-bottom:10px; font-size:0.8rem; }
.blog-card__pill { border:1px solid var(--ltgrey); border-radius:999px; padding:2px 12px; font-weight:600; }
.blog-card__read { color:var(--dkgrey); font-weight:600; }
.blog-card__title { margin:0 0 8px; font-size:1.25rem; line-height:1.4; font-weight:600; }
.blog-card__summary { font-family:"Source Sans Pro", sans-serif; font-size:1rem; color:var(--dkgrey); margin:0 0 12px; }
.blog-card__more { font-weight:600; margin-top:auto; }
.blog-card:hover .blog-card__more { text-decoration:underline; }