/* ================================================================
   TERMS & CONDITIONS PAGE
   css/termsconditions.css

   Loaded by termsconditions.php via $pageCss, after header.css and
   before global-typography.css.

   The page reuses the existing site furniture rather than
   inventing any of it:

     header.php  - unchanged, supplies the topbar, logo, DigiLocker /
                   Pehchaan / API Setu badges, nav and $basePath
     footer.php  - unchanged, the dark footer with Useful Links,
                   Our Programmes, Address, social and the legal note
     banner      - the same two-part banner contact.php already uses:
                   navy panel with a Home / PAGE pill, a large heading
                   with a light-blue accent word, a short white rule
                   and a lead paragraph on the left, photo on the right
     cards       - the card style the sections on index.php use:
                   white, 1px #E4EAF8, 18px radius, soft shadow
     container   - the standard agreed across index.php:
                   92% capped at 1380px, then 94% <=1199, 90% <=767,
                   92% <=480, with 48px section padding

   NOTHING in this file edits any other page. Every selector is
   prefixed .tc- so it cannot reach the header, the footer or any
   other page's content.

   SPECIFICITY NOTE
   global-typography.css loads after this file and pins
   h1 { font-size: 46px; line-height: 1.2 } and
   p { font-size: 16px; line-height: 1.6 } with !important, so the
   banner h1 and every paragraph carry their own !important.
   ================================================================ */


/* ================================================================
   1.  BANNER
   Mirrors contact.php's recognition-and-validity-banner.
   ================================================================ */

.tc-banner {
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    background: #083C7C;
    font-family: Arial, Helvetica, sans-serif;
}

.tc-banner-content {
    width: 52%;
    padding: 80px 6% 80px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 5;
}

/* the Home / PAGE breadcrumb pill */
.tc-banner-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    margin-bottom: 25px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    white-space: nowrap;
}
.tc-banner-badge i {
    font-size: 15px;
    line-height: 1;
}

.tc-banner-content h1 {
    margin: 0 !important;
    max-width: 600px;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(42px, 4.5vw, 68px) !important;
    line-height: 1.08 !important;
    font-weight: 700;
    letter-spacing: -1.5px;
}
.tc-banner-content h1 span {
    color: #A9C7FF;
}

.tc-banner-line {
    width: 50px;
    height: 3px;
    margin: 25px 0 20px;
    background: #FFFFFF;
    border-radius: 5px;
}

.tc-banner-content p {
    max-width: 520px;
    margin: 0 !important;
    color: rgba(255, 255, 255, .90);
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    text-align: left !important;
}

/* photo half */
.tc-banner-image {
    width: 48%;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}
.tc-banner-photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.tc-banner-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .7s ease;
}
.tc-banner:hover .tc-banner-photo img {
    transform: scale(1.04);
}


/* ================================================================
   2.  SECTION + CONTAINER
   ================================================================ */

.tc-section {
    width: 100%;
    padding: 48px 0;
    background:
        radial-gradient(circle at 0% 100%, rgba(8, 103, 213, 0.07), transparent 26%),
        radial-gradient(circle at 100% 0%, rgba(8, 103, 213, 0.05), transparent 26%),
        #F5F8FC;
    font-family: Arial, Helvetica, sans-serif;
}

.tc-container {
    width: 92%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0;
}


/* ================================================================
   3.  CARDS
   ================================================================ */

.tc-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #E4EAF8;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(16, 42, 90, .06);
    padding: 30px 32px;
    margin-bottom: 24px;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.tc-card:hover {
    border-color: #C9D8F6;
    box-shadow: 0 12px 28px rgba(16, 42, 90, .10);
}

/* the two- and three-up rows */
.tc-grid,
.tc-grid-3 {
    display: grid;
    gap: 24px;
    align-items: start;
}
.tc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tc-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* in a row the cards manage their own bottom gap */
.tc-grid > .tc-card,
.tc-grid-3 > .tc-card {
    margin-bottom: 0;
}
.tc-grid + .tc-grid,
.tc-grid + .tc-subhead,
.tc-subhead + .tc-grid-3,
.tc-grid-3 + .tc-grid {
    margin-top: 24px;
}


/* ================================================================
   4.  TYPE INSIDE THE CARDS

   EVERY heading below carries !important on font-size, line-height
   and font-family, and that is not optional. global-typography.css
   loads after this file and pins every heading level with
   !important:

       h2  35px / 1.25    h3  30px / 1.3
       h4  25px / 1.35    h1  46px / 1.2

   A plain rule cannot outrank an !important, so without these the
   numbered headings rendered at 30px and the 3.1/3.2/3.3 headings at
   25px - nearly twice their intended size, which is what made them
   look wrong in the cards. Measured after the fix: h3 21px,
   h4 16px, matching the card headings on index.php.
   ================================================================ */

/* a numbered section heading */
.tc-card h3 {
    margin: 0 0 14px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
}

/* the sub headings inside 3 - 3.1, 3.2, 3.3 */
.tc-card h4 {
    margin: 0 0 12px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.2px !important;
}

/* the full-width heading above the three-up row */
.tc-subhead {
    /* margin: 0 0 18px !important; */
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.4px !important;
}

.tc-card p {
    margin: 0 0 14px !important;
    color: #5B6B85;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.65 !important;
    text-align: left !important;
}
.tc-card p:last-child {
    margin-bottom: 0 !important;
}

.tc-card strong {
    color: #0B1F4D;
    font-weight: 700;
}

.tc-card a {
    color: #0D6EFD;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: inherit !important;
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}
.tc-card a:hover {
    text-decoration: underline;
}

/* bullets - a navy dot, matching the card icons elsewhere

   !important is required on font-size, font-family and line-height
   because global-typography.css loads after this file and pins

       li { font-size: 16px; line-height: 1.6 }   with !important

   Without it every bullet silently rendered at 16px while the
   paragraph above it sat at 15px. */
.tc-card ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}
.tc-card ul:last-child {
    margin-bottom: 0;
}
.tc-card ul li {
    position: relative;
    margin: 0 0 9px;
    padding-left: 20px;
    color: #3A4A63;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.6 !important;
    text-align: left;
}
.tc-card ul li:last-child {
    margin-bottom: 0;
}
.tc-card ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0D6EFD;
}


/* ================================================================
   5.  INTRO CARD
   centred heading, rule, then the two opening paragraphs
   ================================================================ */

.tc-card-intro {
    text-align: center;
    padding: 36px 40px;
    margin-bottom: 24px;
}
.tc-card-intro h2 {
    margin: 0 0 4px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.6px !important;
}
.tc-card-intro .tc-rule {
    width: 100%;
    max-width: 620px;
    height: 1px;
    margin: 16px auto 24px;
    background: #E4EAF8;
}
.tc-card-intro p {
    max-width: 1080px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}


/* ================================================================
   6.  CONTACT CARD
   ================================================================ */

.tc-card-contact {
    margin-top: 24px;
    padding: 34px 36px 38px;
    text-align: center;
    /* a hairline in the brand navy along the top, as on the
       contact page's cards */
    border-top: 3px solid #0A56D8;
}
.tc-card-contact h2 {
    margin: 0 0 4px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
}
.tc-card-contact .tc-rule {
    width: 100%;
    max-width: 700px;
    height: 1px;
    margin: 16px auto 22px;
    background: #E4EAF8;
}
/* Scoped under .tc-card-contact on purpose. The bare .tc-contact-lead at
   (0,1,0) was being beaten by .tc-card p at (0,1,1) from line 262, which
   carries text-align:left !important and margin:0 0 14px !important.
   Higher specificity wins over source order even when the loser is
   !important and 135 lines earlier, so the centring and the auto margins were
   both discarded and the lead line sat flush left. Scoping to
   .tc-card-contact makes this (0,2,0), which is the same shape as the working
   .tc-card-intro p at line 361 and the .pp-card-contact equivalents in
   privacypolicy.css. */
.tc-card-contact .tc-contact-lead {
    max-width: 720px;
    margin: 0 auto 14px !important;
    color: #5B6B85 !important;
    text-align: center !important;
}

.tc-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    max-width: 900px;
    margin: 26px auto 0;
    text-align: left;
}
.tc-contact-block {
    padding: 20px 24px;
    background: #F7FAFF;
    border: 1px solid #E4EAF8;
    border-radius: 14px;
}
.tc-contact-block h4 {
    margin: 0 0 12px !important;
    color: #0B1F4D !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}
.tc-contact-block p {
    margin: 0 0 8px !important;
    color: #5B6B85;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 400;
    line-height: 1.6 !important;
}
.tc-contact-block p:last-child {
    margin-bottom: 0 !important;
}


/* ================================================================
   7.  RESPONSIVE
   The banner follows contact.php exactly - the photo is never
   removed, it stacks below the text on narrow screens:
       <=991px  both halves stay side by side, banner grows to 430px
       <=767px  banner becomes a column, photo becomes a 300px band
       <=480px  text 330px, photo 250px
   ================================================================ */

@media (max-width: 1199px) {
    .tc-container {
        width: 94%;
    }
}

@media (max-width: 991px) {

    .tc-banner {
        min-height: 430px;
    }

    .tc-banner-content {
        width: 52%;
        padding: 60px 35px;
    }

    .tc-banner-image {
        width: 48%;
        min-height: 430px;
    }

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

@media (max-width: 767px) {

    /* the photo moves under the text rather than disappearing */
    .tc-banner {
        flex-direction: column;
        min-height: auto;
    }

    .tc-banner-content {
        width: 100%;
        min-height: 360px;
        padding: 55px 25px 45px;
    }

    .tc-banner-content h1 {
        max-width: 100%;
        font-size: 38px !important;
        letter-spacing: -1px;
    }

    .tc-banner-content p {
        max-width: 100%;
        font-size: 15px !important;
    }

    .tc-banner-badge {
        font-size: 12px;
        padding: 8px 15px;
    }

    .tc-banner-image {
        width: 100%;
        height: 300px;
        min-height: 300px;
    }

    .tc-section {
        padding: 40px 0;
    }

    .tc-container {
        width: 90%;
    }

    .tc-grid,
    .tc-grid-3 {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .tc-card {
        padding: 24px 22px;
        border-radius: 16px;
        margin-bottom: 20px;
    }

    .tc-card h3,
    .tc-subhead {
        font-size: 19px !important;
    }

    .tc-card h4 {
        font-size: 15.5px !important;
    }

    .tc-card p,
    .tc-card ul li {
        font-size: 14.5px !important;
    }

    .tc-card-intro {
        padding: 28px 22px;
    }

    .tc-card-intro h2 {
        font-size: 22px !important;
    }

    .tc-card-contact {
        padding: 28px 22px 30px;
    }

    .tc-card-contact h2 {
        font-size: 21px !important;
    }

    .tc-contact-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .tc-contact-block p {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {

    .tc-container {
        width: 92%;
    }

    .tc-banner-content {
        min-height: 330px;
        padding: 45px 20px 40px;
    }

    .tc-banner-content h1 {
        font-size: 32px !important;
    }

    .tc-banner-image {
        height: 250px;
        min-height: 250px;
    }

    .tc-card {
        padding: 20px 18px;
    }

    .tc-card h3,
    .tc-subhead {
        font-size: 18px !important;
    }

    .tc-card p,
    .tc-card ul li {
        font-size: 14px !important;
    }

    .tc-card-intro h2,
    .tc-card-contact h2 {
        font-size: 20px !important;
    }

    .tc-contact-block {
        padding: 16px 18px;
    }
}

/* ================================================================
   8.  EVERY CARD IN A ROW IS THE SAME HEIGHT
   Appended at the end. Nothing above this line was edited.

   THE PROBLEM

   Line 185 declared the two row grids as

       .tc-grid,
       .tc-grid-3 {
           display: grid;
           gap: 24px;
           align-items: start;
       }

   align-items: start makes each card exactly as tall as its own content and
   no taller. The rows on this page hold very different amounts of text, so
   every row finished on a ragged bottom edge:

       1. Nature of Services        7 bullets   315px
       2. Accuracy of Information   6 bullets + a closing paragraph   265px

       3.1 Payments                 5 bullets                      315px
       3.2 Processing Fees          1 paragraph                    169px
       3.3 Payment Security         2 paragraphs                   208px

       4. Website Usage             4 bullets                      265px
       5. Intellectual Property     2 paragraphs                   216px

       6. Limitation of Liability   4 bullets                      265px
       7. Modifications to Terms    2 paragraphs                   191px

   THE FIX

   align-items: stretch, which is the grid default. Each row becomes as tall
   as its tallest card and every card in that row fills that height. The first
   card in each row is already the tallest one, so it does not move at all -
   card 2 becomes card 1's size, and 7 becomes 6's size.

   Only align-items changes. Not one of the following is touched: the white
   fill, the 1px #E4EAF8 border, the 18px radius, the shadow, the 30px 32px
   padding, the 24px gap, or any font-size, weight, colour or line-height.
   Content stays top-aligned, so the only thing that changes is the empty
   space at the bottom of the shorter cards.

   Both classes are needed: .tc-grid-3 carries the three-up row (3.1/3.2/3.3)
   and .tc-grid carries the two-up rows (1/2, 4/5, 6/7). Between them that is
   every card row on the page.

   <=767px both grids collapse to one column, so each row holds a single card
   and there is nothing to match - the rule has no effect there and needs no
   media query of its own.

   SCOPE

   .tc-grid, .tc-grid-3 and .tc-card appear in termsconditions.php and in this
   file only - checked across every PHP include and every stylesheet in the
   project. Nothing on any other page can match these selectors.
   ================================================================ */

.tc-grid,
.tc-grid-3 {
    align-items: stretch !important;
}

/* ================================================================
   7.  LEGAL STATUS MODEL - EQUAL CARDS, READ MORE, JUSTIFIED TEXT

   Appended at the end. Nothing above this line was edited.

   This block brings termsconditions.php onto the same model as
   legalstatus.php and privacypolicy.php, re-prefixed to tc- so none of
   the three pages can reach the others' rules. The three things it
   delivers are the same three things those pages needed:

      a. every card in a row held to ONE height, so cards of different
         content length no longer sit ragged against each other
      b. a Read more on any card whose content is taller than that box
      c. justified body text, so the right-hand edge is even

   The measurements below are the SAME VALUES AS THE OTHER TWO PAGES, and
   that is deliberate - the three pages are meant to read as one set.
   The base card is also the same underneath: .tc-card at line 169 is
   padding 30px 32px, h3 21px, h4 16px, p 15px/1.65, and 24px 22px then
   20px 18px of padding at the 767px and 480px breakpoints, which is
   exactly .pp-card and .ls-card. So one set of numbers fits all three.

   WHY A FIXED HEIGHT AND NOT align-items:stretch

   Stretch is the grid default, and .tc-grid already sets align-items:start
   (line 189). Stretch would make the boxes equal but each row would still
   grow to its tallest card, so a short card would carry a large empty area
   at the foot with its content stranded at the top. A fixed height is what
   puts all the content in the same box and makes a Read more the honest
   response to what does not fit.

   WHAT IS NOT CLAMPED

   Only the nine grid children. The opening card and the Contact
   Information card keep their natural height, matching legalstatus.php and
   privacypolicy.php: an address should not sit behind a Read more. The
   h2.tc-subhead above the three-up row is a full-width heading rather than
   a card, and is not matched by the grid-child selectors in any case.

   WHY THE FADE IS 104px AND RAMPS OVER THREE STOPS

   From legalstatus.css section 13, where it was arrived at by measurement.
   The control sits 16px to 44px above the card floor, and the gradient has
   to be SOLID from 50px above the floor up to the control, or the top of
   the label sits on a partly transparent wash with a line of text showing
   through it. 52% of a 104px band is 50px above the floor. Getting that
   percentage backwards is what made an earlier attempt fail, so the
   numbers are not rounded here.

   WHY inter-character AND NOT inter-word

   From legalstatus.css section 15, measured at four phone widths. Plain
   justify stretches only the spaces between words, which in a column this
   narrow opens 19px to 28px holes. inter-character shares the stretch
   between spaces and letter spacing, so the worst gap stays at 5px to 6px
   while the right edge still straightens by roughly 60px of the 99px it
   was off by. hyphens:auto is not used: it is honoured by the declaration
   and does nothing in this browser, which footer.css records separately.

   WHICH TEXT IS JUSTIFIED

   The nine grid cards only. The opening and Contact cards are centred or
   left-aligned by design. Bullets are deliberately excluded - see
   privacypolicy.css section 7 for the measurement; .tc-card ul li already
   sets text-align:left at line 318 and is left alone.

   Sizes, colours, leading, padding, the border and the shadow are all
   untouched. Only the height, the control and the alignment change.
   ================================================================ */

/* the grid no longer stretches, so one card can open without dragging its
   row partner taller with it. Needed again at the narrow widths, where the
   rows collapse to a single column and there is nothing to drag. */
.tc-grid,
.tc-grid-3 {
    align-items: start !important;
}

/* the box every grid policy card is held to */
.tc-card-clamp {
    height: var(--tc-clamp, 241px);
    overflow: hidden;
}

/* the white fade over the last of the clipped text */
.tc-card-more::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 104px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .55) 22%,
        rgba(255, 255, 255, .88) 38%,
        #FFFFFF 52%
    );
    pointer-events: none;
}

/* room below the text once the card is open and its height is auto again.
   This only matters in the open state: on a FIXED height card padding
   reserves nothing visible, because overflow clips at the padding box and
   text still paints all the way down to the floor. */
.tc-card-clamp.tc-card-open {
    height: auto;
    overflow: visible;
    padding-bottom: 30px;
}

/* no fade once the card is showing everything */
.tc-card-open.tc-card-more::after {
    display: none;
}

/* the control. left matches the card's own padding at each breakpoint -
   32px on the desktop padding, 22px at the 767px padding, 18px at the 480px
   padding - so the label sits on the text's left edge, not inside it. */
.tc-more {
    position: absolute;
    left: 32px;
    bottom: 13px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: #0D6EFD;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    text-decoration: none;
    cursor: pointer;
}

.tc-more:hover {
    text-decoration: underline;
}

.tc-more:focus-visible {
    outline: 2px solid #0D6EFD;
    outline-offset: 2px;
    border-radius: 4px;
}

.tc-more i {
    font-size: 12px;
    line-height: 1;
    transition: transform .18s ease;
}

/* the chevron turns over when the card is open, so the control reads as a
   toggle rather than as a link */
.tc-card-open .tc-more i {
    transform: rotate(180deg);
}

/* the same box, smaller at the narrower widths, so the proportion of the
   page a card occupies stays comparable. These are the values
   legalstatus.css and privacypolicy.css use at the same two breakpoints. */
@media (max-width: 767.98px) {
    :root {
        --tc-clamp: 232px;
    }
    .tc-more {
        left: 22px;
        bottom: 13px;
    }
}

@media (max-width: 480.98px) {
    :root {
        --tc-clamp: 224px;
    }
    .tc-more {
        left: 18px;
        bottom: 11px;
    }
}

/* justified body text

   .tc-card p at line 262 carries text-align:left !important, which is what
   does the left alignment. These selectors are .tc-grid > .tc-card p and
   .tc-grid-3 > .tc-card p - 0,2,1 against 0,1,1 - so on specificity they
   win, and both carry !important so source order never comes into it. */
.tc-grid > .tc-card p,
.tc-grid-3 > .tc-card p {
    text-align: justify !important;
    text-justify: inter-character !important;
}