/* =========================================================
   RK TIFFIN CENTER — PLANS & PRICING PAGE
   File : /assets/css/plans.css
   Standalone — sirf is page ki CSS. Colours header.css ke :root se.
========================================================= */

/* =========================================================
   0. BASE
========================================================= */
.rk-pl{
    color:var(--rk-ink);
    background:var(--rk-cream);
    overflow-x:clip;
}

.rk-pl *{ box-sizing:border-box; }

.rk-pl h1,
.rk-pl h2,
.rk-pl h3{
    font-family:var(--rk-font-display);
    color:var(--rk-ink);
    line-height:1.15;
    letter-spacing:-.01em;
}

.rk-pl p{ color:var(--rk-ink-2); }

.rk-pl img{
    display:block;
    width:100%;
    height:auto;
    object-fit:cover;
    background:linear-gradient(135deg,#FCE3CF,#FFF1DA);
    color:transparent;
}

.pl-container{
    max-width:1180px;
    margin:0 auto;
    padding:0 24px;
}

.pl-section{ padding:88px 0; }

.pl-heading{
    max-width:760px;
    margin:0 auto 44px;
    text-align:center;
}

.pl-heading h2,
.pl-math-copy h2,
.pl-rules-copy h2,
.pl-start-copy h2{
    font-size:clamp(28px,3.3vw,40px);
    font-weight:800;
    margin-bottom:16px;
}

.pl-heading p{
    font-size:16.5px;
    line-height:1.75;
}

.pl-kicker{
    display:inline-block;
    margin-bottom:14px;
    padding:6px 14px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--rk-brand-dark);
    background:var(--rk-brand-soft);
}

.pl-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:52px;
    padding:0 26px;
    border-radius:999px;
    font-size:15px;
    font-weight:600;
    white-space:nowrap;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.pl-btn-primary{
    color:#fff;
    background:linear-gradient(135deg,var(--rk-brand),#D9381E);
    box-shadow:0 14px 28px -12px rgba(180,35,24,.7);
}

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

.pl-btn-outline{
    color:var(--rk-brand-dark);
    border:2px solid var(--rk-brand);
}

.pl-btn-outline:hover{
    color:#fff;
    background:var(--rk-brand);
}

.pl-btn-white{
    color:var(--rk-brand-dark);
    background:#fff;
    box-shadow:0 12px 24px -10px rgba(31,26,23,.4);
}

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

.pl-btn-ghost{
    color:#fff;
    border:2px solid rgba(255,255,255,.75);
}

.pl-btn-ghost:hover{ background:rgba(255,255,255,.14); }

/* =========================================================
   1. HERO + PLAN CARDS
========================================================= */
.pl-hero{
    position:relative;
    padding:56px 0 80px;
    overflow:hidden;
    background:
        radial-gradient(50% 50% at 0% 0%,rgba(233,160,25,.2),transparent 60%),
        radial-gradient(45% 50% at 100% 20%,rgba(30,107,82,.12),transparent 60%),
        linear-gradient(180deg,#FFF3E6 0%,var(--rk-cream) 100%);
}

.pl-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(180,35,24,.09) 1.2px,transparent 1.2px);
    background-size:22px 22px;
    mask-image:linear-gradient(180deg,#000,transparent 60%);
    -webkit-mask-image:linear-gradient(180deg,#000,transparent 60%);
    pointer-events:none;
}

.pl-hero-head{
    position:relative;
    max-width:780px;
    margin:0 auto 48px;
    text-align:center;
}

.pl-breadcrumb{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-bottom:22px;
    font-size:13.5px;
    color:var(--rk-muted);
}

.pl-breadcrumb a{
    color:var(--rk-brand-dark);
    font-weight:600;
}

.pl-hero h1{
    font-size:clamp(34px,4.6vw,56px);
    font-weight:800;
    margin-bottom:18px;
}

.pl-hero h1 span{
    position:relative;
    color:var(--rk-brand);
    white-space:nowrap;
}

.pl-hero h1 span::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:.05em;
    height:.22em;
    border-radius:4px;
    background:rgba(233,160,25,.35);
    z-index:-1;
}

.pl-lead{
    font-size:17px;
    line-height:1.8;
}

.pl-cards{
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
    max-width:980px;
    margin:0 auto;
}

.pl-cards--one{
    grid-template-columns:1fr;
    max-width:940px;
}
.pl-cards--one .pl-card{ flex-direction:row; }
.pl-cards--one .pl-card-media{ flex:0 0 46%; }
.pl-cards--one .pl-card-media img{ height:100%; aspect-ratio:auto; object-fit:cover; }
.pl-cards--one .pl-card-body{ flex:1; }

.pl-card{
    scroll-margin-top:110px;
    display:flex;
    flex-direction:column;
    border-radius:28px;
    background:#fff;
    border:1px solid var(--rk-border);
    box-shadow:var(--rk-shadow-md);
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease;
}

.pl-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--rk-shadow-lg);
}

.pl-card.is-featured{
    border:2px solid var(--rk-brand);
}

.pl-card-media{ position:relative; }

.pl-card-media img{ aspect-ratio:16/10; }

.pl-card-tag{
    position:absolute;
    left:18px;
    top:18px;
    padding:6px 14px;
    border-radius:999px;
    font-size:12.5px;
    font-weight:700;
    color:#fff;
    background:var(--rk-leaf);
    box-shadow:0 8px 18px -8px rgba(0,0,0,.4);
}

.pl-card.is-featured .pl-card-tag{ background:var(--rk-brand); }

.pl-card-body{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:28px 30px 30px;
}

.pl-card h2{
    font-size:24px;
    font-weight:800;
    margin-bottom:10px;
}

.pl-price{
    display:flex;
    align-items:baseline;
    gap:6px;
}

.pl-price strong{
    font-family:var(--rk-font-display);
    font-size:48px;
    font-weight:800;
    line-height:1;
    color:var(--rk-brand-dark);
}

.rk-pl .pl-price span{
    font-size:15px;
    color:var(--rk-muted);
}

.rk-pl .pl-per-meal{
    display:inline-block;
    align-self:flex-start;
    margin:12px 0 16px;
    padding:6px 12px;
    border-radius:10px;
    font-size:13.5px;
    color:var(--rk-leaf-dark);
    background:var(--rk-leaf-soft);
}

.pl-card-desc{
    font-size:15px;
    line-height:1.7;
    margin-bottom:18px;
}

.pl-card-list{
    list-style:none;
    margin-bottom:26px;
    flex-grow:1;
}

.pl-card-list li{
    position:relative;
    padding:9px 0 9px 28px;
    font-size:14.5px;
    color:var(--rk-ink-2);
    border-top:1px dashed var(--rk-border);
}

.pl-card-list li::before{
    content:"";
    position:absolute;
    left:2px;
    top:14px;
    width:12px;
    height:7px;
    border-left:2.5px solid var(--rk-leaf);
    border-bottom:2.5px solid var(--rk-leaf);
    transform:rotate(-45deg);
}

.pl-card .pl-btn{ width:100%; }

.pl-trust{
    position:relative;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 26px;
    margin-top:34px;
}

.pl-trust li{
    position:relative;
    padding-left:26px;
    font-size:14.5px;
    font-weight:600;
    color:var(--rk-ink);
}

.pl-trust li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:11px;
    color:#fff;
    background:var(--rk-leaf);
}

/* =========================================================
   2. MATH
========================================================= */
.pl-math{ background:#fff; }

.pl-math-card{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:44px;
    align-items:center;
    padding:46px 50px;
    border-radius:var(--rk-radius-lg);
    background:
        radial-gradient(circle at 100% 0%,rgba(233,160,25,.25),transparent 45%),
        var(--rk-accent-soft);
    border:1px solid #F7DFA6;
}

.pl-math-card .pl-kicker{ background:#fff; }

.pl-math-copy p{
    font-size:16px;
    line-height:1.8;
}

.pl-math-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.pl-math-item{
    padding:24px 20px;
    border-radius:var(--rk-radius-md);
    text-align:center;
    background:#fff;
    border:1px solid var(--rk-border);
    box-shadow:var(--rk-shadow-sm);
}

.pl-math-item span{
    display:block;
    margin-bottom:8px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--rk-leaf-dark);
}

.pl-math-item.is-alt span{ color:var(--rk-brand-dark); }

.pl-math-item strong{
    display:block;
    font-family:var(--rk-font-display);
    font-size:22px;
    color:var(--rk-ink);
}

.pl-math-item em{
    display:inline-block;
    margin-top:8px;
    padding:4px 12px;
    border-radius:999px;
    font-style:normal;
    font-size:15px;
    font-weight:700;
    color:#fff;
    background:var(--rk-leaf);
}

.pl-math-item.is-alt em{ background:var(--rk-brand); }

/* =========================================================
   3. COMPARE TABLE
========================================================= */
.pl-table{
    max-width:900px;
    margin:0 auto;
    border-radius:var(--rk-radius-lg);
    overflow:hidden;
    border:1px solid var(--rk-border);
    background:#fff;
    box-shadow:var(--rk-shadow-sm);
}

.pl-row{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
}

.pl-row + .pl-row{ border-top:1px solid var(--rk-border); }

.pl-row span{
    padding:16px 20px;
    font-size:15px;
    color:var(--rk-ink-2);
}

.pl-row span:first-child{
    font-weight:600;
    color:var(--rk-ink);
    background:#FFFCF8;
}

.pl-row-head span{
    font-family:var(--rk-font-display);
    font-size:16px;
    font-weight:700;
    color:#fff !important;
    background:var(--rk-ink) !important;
}

.pl-row-head span:last-child{ background:var(--rk-brand-dark) !important; }

.rk-pl .pl-yes{ color:var(--rk-leaf-dark); font-weight:600; }
.rk-pl .pl-no{ color:var(--rk-muted); }

/* =========================================================
   4. INSIDE
========================================================= */
.pl-inside{ background:#fff; }

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

.pl-inside-card{
    padding:30px 26px;
    border-radius:var(--rk-radius-lg);
    background:var(--rk-cream);
    border:1px solid var(--rk-border);
    transition:transform .2s ease, box-shadow .2s ease;
}

.pl-inside-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--rk-shadow-md);
}

.pl-inside-num{
    display:inline-block;
    margin-bottom:14px;
    padding:6px 14px;
    border-radius:12px;
    font-family:var(--rk-font-display);
    font-size:18px;
    font-weight:800;
    color:#fff;
    background:linear-gradient(135deg,var(--rk-brand),var(--rk-accent));
}

.pl-inside-card:nth-child(3) .pl-inside-num{ background:linear-gradient(135deg,#B45309,var(--rk-brand-dark)); }

.pl-inside-card h3{
    font-size:20px;
    font-weight:700;
    margin-bottom:10px;
}

.pl-inside-card p{
    font-size:14.5px;
    line-height:1.75;
}

/* =========================================================
   5. RULES
========================================================= */
.pl-rules-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:56px;
    align-items:start;
}

.pl-rules-copy{
    position:sticky;
    top:110px;
}

.pl-rules-copy p{
    font-size:16px;
    line-height:1.8;
    margin-bottom:22px;
}

.pl-rules-list{
    display:grid;
    gap:14px;
}

.pl-rule{
    position:relative;
    padding:22px 24px 22px 70px;
    border-radius:var(--rk-radius-md);
    background:#fff;
    border:1px solid var(--rk-border);
    counter-increment:rule;
}

.pl-rules-list{ counter-reset:rule; }

.pl-rule::before{
    content:counter(rule,decimal-leading-zero);
    position:absolute;
    left:22px;
    top:22px;
    font-family:var(--rk-font-display);
    font-size:24px;
    font-weight:800;
    line-height:1;
    color:var(--rk-brand);
}

.pl-rule h3{
    font-size:18px;
    font-weight:700;
    margin-bottom:6px;
}

.pl-rule p{
    font-size:14.5px;
    line-height:1.7;
}

/* =========================================================
   6. WHO
========================================================= */
.pl-who{ background:#fff; }

.pl-who-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    max-width:980px;
    margin:0 auto;
}

.pl-who-card{
    padding:32px 30px;
    border-radius:var(--rk-radius-lg);
    background:var(--rk-leaf-soft);
    border:1px solid rgba(30,107,82,.25);
}

.pl-who-card.is-alt{
    background:var(--rk-brand-soft);
    border-color:rgba(180,35,24,.25);
}

.pl-who-card h3{
    font-size:22px;
    font-weight:800;
    margin-bottom:16px;
}

.pl-who-card ul{
    list-style:none;
    display:grid;
    gap:10px;
    margin-bottom:20px;
}

.pl-who-card li{
    position:relative;
    padding-left:26px;
    font-size:15px;
    line-height:1.55;
    color:var(--rk-ink-2);
}

.pl-who-card li::before{
    content:"";
    position:absolute;
    left:4px;
    top:8px;
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--rk-leaf);
}

.pl-who-card.is-alt li::before{ background:var(--rk-brand); }

.pl-who-link{
    font-weight:700;
    color:var(--rk-leaf-dark);
}

.pl-who-card.is-alt .pl-who-link{ color:var(--rk-brand-dark); }

/* =========================================================
   7. START
========================================================= */
.pl-start{ padding-bottom:40px; }

.pl-start-card{
    position:relative;
    display:grid;
    grid-template-columns:1.3fr 1fr;
    align-items:center;
    gap:40px;
    padding:48px 52px;
    border-radius:var(--rk-radius-lg);
    overflow:hidden;
    background:
        radial-gradient(circle at 92% 20%,rgba(255,255,255,.18) 0 70px,transparent 71px),
        linear-gradient(120deg,var(--rk-brand) 0%,#D9381E 55%,var(--rk-accent) 100%);
    box-shadow:var(--rk-shadow-lg);
}

.pl-start-card::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.2px);
    background-size:18px 18px;
    pointer-events:none;
}

.pl-start-copy,
.pl-start-actions{ position:relative; }

.rk-pl .pl-start-copy h2{ color:#fff; }

.pl-start-copy .pl-kicker{
    background:rgba(255,255,255,.2);
    color:#fff;
}

.pl-steps{
    list-style:none;
    counter-reset:st;
    display:grid;
    gap:12px;
}

.pl-steps li{
    counter-increment:st;
    position:relative;
    padding-left:44px;
    font-size:15.5px;
    line-height:1.6;
    color:#FFF4EA;
}

.pl-steps li::before{
    content:counter(st);
    position:absolute;
    left:0;
    top:-2px;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-family:var(--rk-font-display);
    font-weight:800;
    color:var(--rk-brand-dark);
    background:#fff;
}

.pl-steps b{ color:#fff; }

.pl-start-actions{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.pl-start-actions .pl-btn{ width:100%; }

/* =========================================================
   8. FAQ
========================================================= */
.pl-faq{
    background:#fff;
    padding-bottom:120px;
}

.pl-faq-list{
    max-width:840px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.pl-faq-item{
    border-radius:var(--rk-radius-md);
    background:var(--rk-cream);
    border:1px solid var(--rk-border);
    transition:border-color .2s ease, box-shadow .2s ease;
}

.pl-faq-item[open]{
    background:#fff;
    border-color:var(--rk-brand);
    box-shadow:var(--rk-shadow-sm);
}

.pl-faq-item summary{
    position:relative;
    list-style:none;
    cursor:pointer;
    padding:20px 60px 20px 24px;
    font-family:var(--rk-font-display);
    font-size:17px;
    font-weight:700;
    color:var(--rk-ink);
}

.pl-faq-item summary::-webkit-details-marker{ display:none; }

.pl-faq-item summary::after{
    content:"+";
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:20px;
    font-weight:600;
    color:var(--rk-brand-dark);
    background:var(--rk-brand-soft);
}

.pl-faq-item[open] summary::after{
    content:"−";
    color:#fff;
    background:var(--rk-brand);
}

.pl-faq-answer{ padding:0 24px 22px; }

.pl-faq-answer p{
    font-size:15px;
    line-height:1.75;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:960px){
    .pl-section{ padding:70px 0; }
    .pl-hero{ padding:40px 0 64px; }

    .pl-math-card{ grid-template-columns:1fr; padding:36px 30px; gap:26px; }

    .pl-inside-grid{ grid-template-columns:1fr 1fr; }
    .pl-inside-card:last-child{ grid-column:1 / -1; }

    .pl-rules-grid{ grid-template-columns:1fr; gap:32px; }
    .pl-rules-copy{ position:static; }

    .pl-start-card{ grid-template-columns:1fr; padding:38px 30px; }
}

@media (max-width:720px){
    .pl-cards{ grid-template-columns:1fr; max-width:520px; }
    .pl-cards--one .pl-card{ flex-direction:column; }
    .pl-cards--one .pl-card-media img{ height:auto; aspect-ratio:16/10; }
    .pl-who-grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
    .pl-container{ padding:0 16px; }
    .pl-section{ padding:56px 0; }
    .pl-heading{ margin-bottom:30px; }
    .pl-heading p{ font-size:15.5px; }

    .pl-hero h1 span{ white-space:normal; }
    .pl-lead{ font-size:16px; }

    .pl-card-body{ padding:22px 20px 24px; }
    .pl-price strong{ font-size:40px; }

    .pl-trust{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .pl-trust li{ font-size:13.5px; }

    .pl-math-card{ padding:28px 18px; }
    .pl-math-item{ padding:18px 12px; }
    .pl-math-item strong{ font-size:18px; }
    .pl-math-item em{ font-size:13.5px; }

    .pl-row span{ padding:12px 10px; font-size:13px; }
    .pl-row-head span{ font-size:13.5px; }

    .pl-inside-grid{ grid-template-columns:1fr; }

    .pl-rule{ padding:18px 18px 18px 60px; }
    .pl-rule::before{ left:16px; top:20px; font-size:20px; }

    .pl-start-card{ padding:30px 20px; }

    .pl-faq-item summary{ font-size:15.5px; padding:17px 54px 17px 18px; }
    .pl-faq-answer{ padding:0 18px 18px; }
}

@media (prefers-reduced-motion:reduce){
    .rk-pl *{ transition:none !important; animation:none !important; }
}