/* ==========================================================
   Teen and Parent-Managed Accounts page only
   ----------------------------------------------------------
   Loaded by resources/views/teen-accounts.blade.php via
   @push('styles'), so it lands after site.css.

   Lifted out of the old page's inline <style> block
   unchanged; only the indentation was removed.
   ========================================================== */


.ta-intro-icon {
    width: 62px;
    height: 62px;
    margin-bottom: 18px;
}

.ta-divider {
    border-bottom: 2px solid #ff6015;
    margin-top: 14px;
    margin-bottom: 18px;
}

/* ---- platform chooser ---- */
.platform-card {
    display: block;
    border-radius: 30px;
    padding: 32px 26px;
    background-color: #fff;
    border: 1px dashed #cfd4e4;
    text-align: center;
    height: 100%;
    transition: .5s all ease;
}

.platform-card:hover {
    transform: translate(0, -10px);
    text-decoration: none;
}

.platform-card .platform-badge {
    width: 66px;
    height: 66px;
    line-height: 66px;
    border-radius: 50%;
    display: inline-block;
    font-size: 30px;
    color: #fff;
    margin-bottom: 16px;
}

.platform-card.wa {
    border-color: #9adcb6;
}

.platform-card.wa .platform-badge {
    background-color: #1da851;
}

.platform-card.ig {
    border-color: #eaa9d8;
}

.platform-card.ig .platform-badge {
    background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7);
}

.platform-card h3 {
    font-size: 22px;
    margin-bottom: 6px;
}

.platform-card .age-pill {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 30px;
    background-color: #f5f6fa;
    color: #302c51;
    margin-bottom: 12px;
}

.platform-card p {
    margin-bottom: 0;
}

/* ---- section banners for each platform ---- */
.platform-head {
    border-radius: 30px;
    padding: 34px 30px;
    color: #fff;
    margin-bottom: 40px;
}

.platform-head.wa {
    background: linear-gradient(120deg, #075e54, #1da851);
}

.platform-head.ig {
    background: linear-gradient(120deg, #6228d7, #ee2a7b 60%, #f9ce34);
}

.platform-head h2 {
    color: #fff;
    font-size: 34px;
    margin-bottom: 8px;
}

.platform-head p {
    margin-bottom: 0;
    opacity: .95;
}

.platform-head .head-icon {
    font-size: 44px;
    opacity: .9;
}

/* ---- pillar / setting cards ---- */
.safety-item {
    margin-bottom: 30px;
    border-radius: 30px;
    padding: 28px 22px;
    background-color: #fff;
    border: 1px dashed #82ca9c;
    transition: .5s all ease;
    height: calc(100% - 30px);
}

.safety-item:hover {
    transform: translate(0, -10px);
}

.safety-item.ig-tint {
    border-color: #f9ad81;
}

.safety-item i {
    font-size: 26px;
    color: #ff6015;
    margin-bottom: 14px;
    display: inline-block;
}

.safety-item h3 {
    font-size: 19px;
    margin-bottom: 10px;
}

.safety-item p {
    margin-bottom: 0;
    font-size: 15px;
}

/* ---- numbered steps ---- */
.ta-step {
    position: relative;
    background-color: #fff;
    border-radius: 20px;
    padding: 26px 26px 26px 86px;
    margin-bottom: 22px;
    box-shadow: 1px 2px 60px 0 rgba(0, 0, 0, .08);
    transition: .4s all ease;
}

.ta-step:hover {
    transform: translate(0, -6px);
}

.ta-step .step-no {
    position: absolute;
    left: 24px;
    top: 26px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    background-color: #ff6015;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}

.ta-step h3 {
    font-size: 20px;
    margin-bottom: 12px;
}

.ta-step ul {
    margin: 0;
    padding-left: 18px;
}

.ta-step ul li {
    margin-bottom: 8px;
    line-height: 1.7;
}

.ta-step ul li:last-child {
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .ta-step {
        padding: 74px 22px 24px;
    }

    .ta-step .step-no {
        top: 22px;
    }
}

/* ---- comparison table ---- */
.compare-wrap {
    overflow-x: auto;
    border-radius: 20px;
    box-shadow: 1px 2px 60px 0 rgba(0, 0, 0, .08);
    background-color: #fff;
}

.compare-table {
    width: 100%;
    min-width: 720px;
    margin-bottom: 0;
    border-collapse: collapse;
}

.compare-table th,
.compare-table td {
    padding: 16px 20px;
    vertical-align: top;
    border-bottom: 1px solid #eef0f6;
    font-size: 15px;
}

.compare-table thead th {
    background-color: #302c51;
    color: #fff;
    font-size: 16px;
    border-bottom: none;
}

.compare-table thead th:first-child {
    border-top-left-radius: 20px;
}

.compare-table thead th:last-child {
    border-top-right-radius: 20px;
}

.compare-table tbody tr:last-child td {
    border-bottom: none;
}

.compare-table tbody th {
    font-weight: 600;
    color: #302c51;
    background-color: #fafbfd;
    width: 26%;
}

/* ---- parent tips ---- */
.tip-item {
    display: flex;
    gap: 16px;
    margin-bottom: 26px;
}

.tip-item .tip-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 50%;
    background-color: #fff3ec;
    color: #ff6015;
    font-size: 18px;
}

.tip-item h4 {
    font-size: 18px;
    margin-bottom: 6px;
}

.tip-item p {
    margin-bottom: 0;
    font-size: 15px;
}

/* ---- learn more ---- */
.resource-box {
    border-radius: 24px;
    padding: 30px 26px;
    background-color: #fff;
    border: 1px dashed #cfd4e4;
    height: 100%;
    transition: .5s all ease;
}

.resource-box:hover {
    transform: translate(0, -8px);
}

.resource-box h4 {
    font-size: 19px;
    margin-bottom: 10px;
}

.resource-box a {
    word-break: break-word;
}

.ta-note {
    border-left: 4px solid #ff6015;
    background-color: #fafbfd;
    border-radius: 10px;
    padding: 18px 22px;
    font-size: 15px;
}


/* ==========================================================
   THEMED PAGE ONLY
   ----------------------------------------------------------
   Every rule below is scoped to body.home-premium, set by the
   @section in the Blade file, so deleting that one line puts
   the page back exactly as it was.

   This page was built on its own and shares none of the
   template markup the rest of the site uses, so the theme
   reaches almost nothing here by itself. Four things it does
   reach it gets wrong, and the rest is the page's own
   furniture being brought into the theme's language.
   ========================================================== */


/* ----------------------------------------------------------
   THE HEADINGS, UNCAPPED
   ----------------------------------------------------------
   The theme measures a .section-title at 760px, which suits a
   lead paragraph under a heading. This page's headings are
   long -- "What a Parent-Managed Account Comes With" -- and
   broke to two lines inside that measure.
   ---------------------------------------------------------- */
body.home-premium .section-title {
    max-width: none;
}


/* ----------------------------------------------------------
   THE PLATFORM BANDS KEEP THEIR WHITE TEXT
   ----------------------------------------------------------
   These two sit on a WhatsApp green and an Instagram gradient
   and are written in white. The theme recolours every main p
   to --ink-soft and every heading to --ink, which left both
   bands' copy as pale grey on a strong colour -- barely
   legible. Restated, nothing else changes about them.

   main is in the selector to carry the weight: the theme's
   rule is "main p:not([class*=btn])", three elements deep,
   and without it this rule loses on specificity and the
   paragraph stays grey.
   ---------------------------------------------------------- */
body.home-premium main .platform-head h2,
body.home-premium main .platform-head p {
    color: #fff;
}


/* ----------------------------------------------------------
   THE DIVIDERS
   ----------------------------------------------------------
   The theme turns an inline orange divider into a short
   gradient bar, but it recognises them by their inline style.
   This page uses a .ta-divider class instead, so its rules
   stayed 2px lines ruled the full width of the heading.

   Same declarations as the theme's own. The one in the intro
   column stays ranged left under its heading; the ones inside
   a .section-title centre with the heading above them.
   ---------------------------------------------------------- */
body.home-premium .ta-divider {
    border-bottom: 0;
    width: 72px;
    height: 5px;
    margin: 20px 0 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), #ffab74);
}

body.home-premium .section-title .ta-divider {
    margin-left: auto;
    margin-right: auto;
}


/* ----------------------------------------------------------
   THE CARDS
   ----------------------------------------------------------
   Platform chooser, the safety pillars, the resource boxes:
   all three were dashed outlines in a platform colour with no
   depth at all. They take the theme's card -- a hairline, the
   26px radius, a white surface and a soft shadow -- and the
   brand colour stays where it belongs, on the badge and the
   icon rather than in a dashed rule round the whole box.
   ---------------------------------------------------------- */
body.home-premium .platform-card,
body.home-premium .safety-item,
body.home-premium .resource-box {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

/* .platform-card.wa, .platform-card.ig and .safety-item.ig-tint
   each set their own border-colour further up the file. */
body.home-premium .platform-card.wa,
body.home-premium .platform-card.ig,
body.home-premium .safety-item.ig-tint {
    border-color: var(--line);
}

body.home-premium .ta-step,
body.home-premium .compare-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

body.home-premium .ta-note {
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
}


/* ----------------------------------------------------------
   THE HOVER, AND WHY IT IS translate AND NOT transform
   ----------------------------------------------------------
   Twenty of this page's cards carry data-aos on the card
   itself, and the theme pins

       [data-aos].aos-animate { transform: translate3d(0,0,0) !important }

   on everything it has revealed. A hover written as transform
   therefore cannot move them -- which is what happens to the
   lifts this page already had, the moment the theme is on.

   translate is a separate property from transform and the
   theme does not touch it, so the lift lands without a fight
   and without moving the reveal into a wrapper on twenty
   elements. transform: none is there for .platform-card, the
   one card with no data-aos, whose own :hover further up this
   file lifts it 10px -- without it the two would add up.
   ---------------------------------------------------------- */
body.home-premium .platform-card:hover,
body.home-premium .safety-item:hover,
body.home-premium .resource-box:hover,
body.home-premium .ta-step:hover {
    transform: none;
    translate: 0 -6px;
    border-color: transparent;
    box-shadow: var(--shadow-md);
}

/* The reveal keeps the theme's 1650ms on opacity and transform;
   translate, the shadow and the border run at hover speed. Per
   property, so the one transition serves both jobs. */
body.home-premium .safety-item,
body.home-premium .resource-box,
body.home-premium .ta-step {
    transition-property: opacity, transform, translate, box-shadow, border-color !important;
    transition-duration: 1650ms, 1650ms, 0.6s, 0.6s, 0.6s !important;
}


/* ----------------------------------------------------------
   THE STAGGER BELONGS TO THE ENTRANCE, NOT TO THE HOVER
   ----------------------------------------------------------
   So a row of cards arrives as a group, the theme delays the
   second, third and fourth of every row by 110, 220 and 330ms:

       [class*="col-"]:nth-of-type(2) [data-aos] {
           transition-delay: 110ms !important }

   One delay, applied to every property in the list -- so three
   cards in four also waited up to a third of a second before
   their hover began, and the same again before it let go. That
   is what made the hover feel slow here and nowhere else: on
   the other themed pages the reveal sits on the column, so the
   stagger lands there and never reaches the card.

   Saying it per property keeps the entrance exactly as the
   theme intends and starts the hover at once. These match the
   theme's own selectors, so they carry the same weight and win
   on being read later.
   ---------------------------------------------------------- */
body.home-premium [class*="col-"]:nth-of-type(2) .safety-item,
body.home-premium [class*="col-"]:nth-of-type(2) .resource-box {
    transition-delay: 110ms, 110ms, 0s, 0s, 0s !important;
}

body.home-premium [class*="col-"]:nth-of-type(3) .safety-item,
body.home-premium [class*="col-"]:nth-of-type(3) .resource-box {
    transition-delay: 220ms, 220ms, 0s, 0s, 0s !important;
}

body.home-premium [class*="col-"]:nth-of-type(4) .safety-item,
body.home-premium [class*="col-"]:nth-of-type(4) .resource-box {
    transition-delay: 330ms, 330ms, 0s, 0s, 0s !important;
}


/* ----------------------------------------------------------
   THE PILLAR ICONS, IN THE DISC THE THEME USES
   ----------------------------------------------------------
   The twelve .safety-item cards -- four under "What a
   Parent-Managed Account Comes With" and eight under "The
   Protections That Are On by Default" -- opened with a bare
   orange glyph set inline-block, sitting against the left edge
   of the card.

   Everywhere else on the themed site an icon of this kind sits
   in a disc: the four cards under "Why Advocacy Matters" are
   the same component, and the theme gives .benefit-item i a
   64px circle washed with the accent at 10 per cent, 18px of
   room beneath it and the glyph centred inside. Same figures
   here, so the two sections read as one design.

   The disc is a flex box in its own right, which both centres
   the glyph inside it and, with auto side margins, centres the
   disc over the card. The heading and the paragraph beneath
   are untouched and stay ranged left.
   ---------------------------------------------------------- */
body.home-premium .safety-item > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(255, 96, 21, 0.10);
}