:root {
  --ink: #2d1a10;
  --muted: #756357;
  --paper: #fffdf9;
  --surface: #f8f1e8;
  --brand: #a95f12;
  --brand-dark: #6d3a10;
  --leaf: #63702e;
  --line: #eadcc8;
  --shadow: 0 18px 50px rgba(71, 43, 21, 0.12);
  --radius-lg: 28px;
  --radius-md: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.top-strip { background: var(--ink); color: #f6ead8; text-align: center; font-size: 0.78rem; letter-spacing: .05em; padding: .65rem 1rem; }
.site-header { position: sticky; top: 0; z-index: 20; min-height: 74px; padding: 0 clamp(1rem, 4vw, 4rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: rgba(255,253,248,.94); border-bottom: 1px solid rgba(229,222,209,.8); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: white; font-family: Georgia, serif; font-weight: 700; background: var(--brand); box-shadow: 0 7px 20px rgba(169,95,18,.25); }
.brand-logo { display: block; object-fit: contain; object-position: center; border: 1px solid rgba(116,70,24,.16); background: #fffaf4; }
.brand strong { display: block; font-size: 1rem; white-space: nowrap; }
.brand small { color: var(--muted); display: block; font-size: .69rem; margin-top: 2px; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; color: #405149; font-size: .9rem; }
.nav-links a:hover { color: var(--brand); }
.cart-button { border: 0; border-radius: 999px; padding: .72rem 1rem; background: var(--brand); color: white; font-weight: 700; font-size: .9rem; }
.cart-button span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: .3rem; border-radius: 50%; background: white; color: var(--brand); font-size: .76rem; }
.hero { min-height: 590px; padding: clamp(4rem, 9vw, 7rem) clamp(1.1rem, 7vw, 8rem); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: clamp(1rem, 7vw, 7rem); align-items: center; overflow: hidden; background: radial-gradient(circle at 75% 30%, #f7dfb0 0, #f4e6c7 20%, transparent 48%), linear-gradient(135deg, #fffdf8 0%, #f6f1e6 100%); }
.eyebrow { margin: 0 0 .75rem; color: var(--brand); font-size: .74rem; font-weight: 800; letter-spacing: .13em; }
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; letter-spacing: -.035em; }
h1 { margin: 0; max-width: 690px; font-size: clamp(3rem, 6.3vw, 5.9rem); line-height: .98; }
h2 { margin: 0; font-size: clamp(2.05rem, 4vw, 3.45rem); line-height: 1.04; }
.hero-description { max-width: 560px; margin: 1.35rem 0 0; color: #506057; font-size: 1.12rem; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 1px solid transparent; border-radius: 999px; padding: .9rem 1.25rem; font-weight: 750; font-size: .92rem; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--brand); color: white; box-shadow: 0 12px 24px rgba(185,71,40,.2); }
.button.primary:hover { background: var(--brand-dark); }
.button.secondary { background: transparent; border-color: #cfc4b5; color: var(--ink); }
.button.secondary:hover { background: #fff; box-shadow: 0 10px 22px rgba(37,48,42,.08); }
.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 3rem; max-width: 620px; }
.trust-row div { padding-right: .7rem; border-right: 1px solid #d8d0c3; }
.trust-row div:last-child { border: 0; }
.trust-row strong, .trust-row span { display: block; }
.trust-row strong { font-size: .9rem; }
.trust-row span { margin-top: .22rem; color: var(--muted); font-size: .75rem; line-height: 1.25; }
.hero-art { position: relative; min-height: 430px; }
.plate { position: absolute; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffdf8 0 20%, #ead2aa 21% 24%, #b95e36 25% 55%, #74321f 56% 63%, #f4e2be 64% 100%); box-shadow: 0 32px 55px rgba(65,42,28,.25), inset 0 0 0 12px rgba(255,255,255,.35); }
.plate span { display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: inset 0 0 20px rgba(0,0,0,.08); }
.plate-large { width: min(34vw, 380px); height: min(34vw, 380px); right: 8%; top: 2%; transform: rotate(-9deg); }
.plate-large span { width: 61%; height: 61%; font-size: clamp(4rem, 9vw, 8.5rem); }
.plate-small { width: 155px; height: 155px; }
.plate-small span { width: 62%; height: 62%; font-size: 3rem; }
.plate-small.one { bottom: 5%; left: 5%; transform: rotate(14deg); }
.plate-small.two { bottom: 4%; right: 0; transform: rotate(-12deg); }
.floating-card { position: absolute; padding: .75rem .95rem; border: 1px solid rgba(255,255,255,.8); border-radius: 12px; background: rgba(255,253,248,.88); box-shadow: 0 15px 30px rgba(50,40,30,.13); font-size: .78rem; font-weight: 700; backdrop-filter: blur(8px); }
.card-one { top: 13%; left: 2%; }.card-two { bottom: 29%; right: -3%; }
.quick-info { max-width: 1180px; margin: -34px auto 0; position: relative; z-index: 2; padding: 1.15rem clamp(1rem, 3vw, 2rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; border: 1px solid #ebe4d9; border-radius: 18px; background: rgba(255,253,248,.95); box-shadow: var(--shadow); }
.quick-info > div { display: flex; align-items: center; gap: .75rem; padding: .3rem .8rem; }
.quick-info > div + div { border-left: 1px solid var(--line); }
.quick-info span { font-size: 1.5rem; }.quick-info p { margin: 0; }.quick-info strong, .quick-info small { display: block; }.quick-info strong { font-size: .88rem; }.quick-info small { margin-top: .18rem; color: var(--muted); font-size: .73rem; }
.section-wrap { width: min(1240px, calc(100% - 2rem)); margin: 0 auto; }
.menu-section { padding: 7rem 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.6rem; }.section-heading > div p:not(.eyebrow) { max-width: 600px; margin: .9rem 0 0; color: var(--muted); line-height: 1.55; }
.search-box { display: flex; align-items: center; gap: .4rem; min-width: 230px; padding: .72rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--muted); }.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); }
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }.filter-chip { border: 1px solid var(--line); border-radius: 999px; padding: .55rem .95rem; background: transparent; color: #4b5a52; font-size: .85rem; }.filter-chip.active, .filter-chip:hover { background: var(--ink); color: white; border-color: var(--ink); }
.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.menu-card { position: relative; min-height: 244px; padding: 1.25rem; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #ebe4d9; border-radius: var(--radius-md); background: white; transition: transform .22s ease, box-shadow .22s ease; }.menu-card:hover { transform: translateY(-4px); box-shadow: 0 18px 32px rgba(54,47,32,.1); }.menu-top { display: flex; justify-content: space-between; gap: .75rem; align-items: start; }.dish-icon { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 17px; background: #f8ead4; font-size: 2.1rem; }.diet { width: 16px; height: 16px; margin-top: .2rem; border: 1.5px solid currentColor; display: grid; place-items: center; }.diet::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }.diet.veg { color: var(--leaf); }.diet.nonveg { color: #b14e36; }.menu-card h3 { margin: 1rem 0 .45rem; font-size: 1.45rem; line-height: 1.05; }.menu-card p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }.badge { display: inline-flex; align-self: flex-start; margin-top: .75rem; padding: .25rem .5rem; border-radius: 999px; background: #fff0c6; color: #845d10; font-size: .68rem; font-weight: 800; }.menu-bottom { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }.price { font-size: 1.12rem; font-weight: 800; }.add-button { border: 0; border-radius: 999px; padding: .6rem .75rem; background: #edf2ed; color: #27523a; font-weight: 800; font-size: .8rem; }.add-button:hover { background: var(--leaf); color: white; }.empty-results { grid-column: 1 / -1; padding: 2rem; border-radius: var(--radius-md); background: var(--surface); color: var(--muted); text-align: center; }
.steps-section { padding: 6rem 0; background: var(--ink); color: white; }.steps-section .eyebrow { color: #f4c88e; }.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.2rem; }.steps-grid article { min-height: 210px; padding: 1.5rem; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-md); background: rgba(255,255,255,.04); }.steps-grid span { color: #f4c88e; font-size: 1rem; font-weight: 850; }.steps-grid h3 { margin: 2rem 0 .6rem; font-size: 1.55rem; }.steps-grid p { margin: 0; color: #c6d1cb; line-height: 1.55; font-size: .9rem; }
.contact-section { margin-top: 6rem; margin-bottom: 6rem; padding: clamp(2rem, 5vw, 4rem); display: flex; align-items: center; justify-content: space-between; gap: 2rem; border-radius: var(--radius-lg); background: #f0e6d5; }.contact-section > div > p:not(.eyebrow) { max-width: 540px; margin: 1rem 0 0; color: #566158; line-height: 1.6; }.contact-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
footer { padding: 2rem clamp(1rem, 4vw, 4rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }footer div { display: flex; gap: 1rem; align-items: center; }footer strong { color: var(--ink); }footer a:hover { color: var(--brand); }
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(12,20,16,.43); backdrop-filter: blur(3px); }.cart-panel { position: fixed; z-index: 60; top: 0; right: 0; width: min(440px, 100%); height: 100dvh; padding: 1.4rem; display: flex; flex-direction: column; background: var(--paper); box-shadow: -16px 0 48px rgba(17,28,21,.18); transform: translateX(105%); transition: transform .25s ease; }.cart-panel.open { transform: translateX(0); }.cart-header { display: flex; align-items: start; justify-content: space-between; }.cart-header h2 { font-size: 2rem; }.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--ink); font-size: 1.55rem; line-height: 1; }.cart-items { flex: 1; overflow: auto; margin: 1.3rem 0; }.cart-item { display: grid; grid-template-columns: 1fr auto; gap: .6rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }.cart-item strong { display: block; font-size: .96rem; }.cart-item span { display: block; margin-top: .2rem; color: var(--muted); font-size: .8rem; }.quantity-control { display: flex; justify-content: end; align-items: center; gap: .4rem; }.quantity-control button { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; background: white; }.quantity-control button:hover { color: white; background: var(--brand); border-color: var(--brand); }.cart-empty { padding: 2rem .5rem; color: var(--muted); text-align: center; }.cart-summary { border-top: 1px solid var(--line); padding-top: 1rem; }.cart-summary > div { display: flex; justify-content: space-between; margin: .45rem 0; font-size: .9rem; }.cart-summary .cart-total { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--line); font-size: 1.1rem; }.full-width { width: 100%; margin-top: 1rem; }.modal { position: fixed; z-index: 70; inset: 0; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(12,20,16,.5); overflow: auto; }.modal.open { display: flex; }.modal-card { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 2rem); overflow: auto; padding: clamp(1.4rem, 4vw, 2rem); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow); }.modal-card h2 { font-size: 2.3rem; }.modal-close { position: absolute; top: 1rem; right: 1rem; }.modal-note { color: var(--muted); font-size: .86rem; line-height: 1.5; }.modal form { display: grid; gap: .9rem; margin-top: 1.3rem; }.modal label { display: grid; gap: .38rem; color: #415047; font-size: .86rem; font-weight: 750; }.modal label span { color: var(--muted); font-weight: 500; }.modal input, .modal textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: .75rem .82rem; outline: 0; background: white; color: var(--ink); font-size: .92rem; }.modal textarea { min-height: 76px; resize: vertical; }.modal input:focus, .modal textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(185,71,40,.12); }.order-type { display: flex; gap: 1rem; padding: 0; border: 0; }.order-type legend { margin-bottom: .5rem; color: #415047; font-size: .86rem; font-weight: 750; }.order-type label { display: flex; align-items: center; gap: .4rem; }.order-type input { width: auto; }.checkout-total { padding: .8rem; border-radius: 10px; background: #f3ebdf; color: var(--ink); font-weight: 850; }.form-error { min-height: 1.1em; margin: 0; color: #a53b29; font-size: .8rem; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; min-height: auto; }.hero-art { min-height: 350px; max-width: 600px; width: 100%; margin: 0 auto; }.plate-large { width: 300px; height: 300px; right: 12%; }.quick-info { margin: 1rem; grid-template-columns: 1fr; }.quick-info > div + div { border-left: 0; border-top: 1px solid var(--line); padding-top: .9rem; }.menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.section-heading { align-items: start; flex-direction: column; }.search-box { width: 100%; }.steps-grid { grid-template-columns: 1fr; }.contact-section { align-items: start; flex-direction: column; } }
@media (max-width: 620px) { .nav-links { display: none; }.site-header { min-height: 68px; }.brand strong { max-width: 155px; overflow: hidden; text-overflow: ellipsis; }.cart-button { padding: .65rem .8rem; }.hero { padding-top: 3.5rem; }.hero-art { min-height: 300px; }.plate-large { width: 230px; height: 230px; top: 8%; right: 5%; }.plate-small { width: 114px; height: 114px; }.plate-small span { font-size: 2.3rem; }.card-two { right: 0; bottom: 17%; }.trust-row { grid-template-columns: 1fr; gap: .8rem; }.trust-row div { padding: 0 0 .8rem; border-right: 0; border-bottom: 1px solid #d8d0c3; }.trust-row div:last-child { border-bottom: 0; }.menu-grid { grid-template-columns: 1fr; }.menu-card { min-height: 220px; }.menu-section { padding: 5rem 0; }.contact-section { margin-top: 4rem; margin-bottom: 4rem; }.contact-actions { width: 100%; }.contact-actions .button { flex: 1; }.quick-info { margin: .75rem; }.quick-info > div { padding-left: .1rem; }.steps-section { padding: 4rem 0; }footer { flex-direction: column; align-items: flex-start; } }

/* Tiffin service and customer portal */
.header-actions { display: flex; align-items: center; gap: .6rem; }
.account-button { padding: .58rem .82rem; border: 1px solid var(--line); border-radius: 999px; color: #405149; font-size: .84rem; font-weight: 750; background: white; }
.account-button:hover { color: var(--brand); border-color: var(--brand); }
.tiffin-section { padding: 6.5rem 0; background: #f6f1e6; }
.tiffin-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tiffin-plan-card { min-height: 280px; display: flex; flex-direction: column; padding: 1.35rem; border: 1px solid #e8dcc8; border-radius: var(--radius-md); background: white; box-shadow: 0 10px 30px rgba(54,47,32,.06); }
.plan-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #f8ead4; font-size: 1.8rem; }
.plan-label { margin: 1rem 0 .35rem; color: var(--leaf); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.tiffin-plan-card h3 { margin: 0; font-family: Georgia, serif; font-size: 1.45rem; }
.tiffin-plan-card > p:not(.plan-label) { margin: .65rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.plan-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.plan-meta span { padding: .25rem .5rem; border-radius: 999px; background: #edf2ed; color: #27523a; font-size: .7rem; font-weight: 750; }
.plan-cta { text-decoration: none; }
.section-note { color: var(--muted); font-size: .84rem; margin: 1rem 0 0; }
.portal-body { min-height: 100vh; background: #f6f3ea; }
.portal-shell { width: min(1240px, calc(100% - 2rem)); margin: 0 auto; padding: 3.2rem 0 5rem; }
.auth-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(480px, 1.15fr); gap: 2rem; align-items: start; }
.portal-intro { padding: clamp(1.5rem, 4vw, 3.2rem); border-radius: var(--radius-lg); color: white; background: linear-gradient(145deg, #17231f, #28533a); box-shadow: var(--shadow); }
.portal-intro .eyebrow { color: #f4c88e; }
.portal-intro h1 { max-width: 520px; margin: .4rem 0 1rem; font-size: clamp(2.5rem, 5vw, 4.6rem); line-height: .96; }
.portal-intro > p:not(.eyebrow) { max-width: 520px; margin: 0; color: #d6e0d9; line-height: 1.65; }
.feature-list { display: grid; gap: .8rem; margin: 2rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid rgba(255,255,255,.18); list-style: none; color: #f3f5f2; font-size: .9rem; }
.auth-cards { display: grid; gap: 1rem; }
.portal-card, .portal-section { padding: 1.35rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: white; box-shadow: 0 10px 26px rgba(54,47,32,.05); }
.auth-card h2, .card-heading h2, .portal-section h2 { margin: 0; font-family: Georgia, serif; font-size: 1.8rem; }
.portal-form { display: grid; gap: .9rem; margin-top: 1rem; }
.portal-form label { display: grid; gap: .38rem; color: #415047; font-size: .84rem; font-weight: 750; }
.portal-form label span { color: var(--muted); font-weight: 500; }
.portal-form input, .portal-form textarea, .portal-form select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: .75rem .82rem; outline: 0; background: white; color: var(--ink); font-size: .92rem; }
.portal-form textarea { min-height: 72px; resize: vertical; }
.portal-form input:focus, .portal-form textarea:focus, .portal-form select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(185,71,40,.12); }
.portal-form input:disabled { color: var(--muted); background: #f6f3ea; }
.portal-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.3rem; }
.portal-heading h1 { margin: 0; font-size: clamp(2.3rem, 5vw, 3.8rem); }
.portal-heading p:not(.eyebrow) { margin: .55rem 0 0; color: var(--muted); }
.portal-message { margin: 0 0 1.2rem; padding: .9rem 1rem; border: 1px solid #d8d0c3; border-radius: 12px; background: #f7f1e6; color: #405149; font-size: .88rem; }
.portal-message.success { border-color: #b9d8c0; background: #edf7ef; color: #205d35; }
.portal-message.error { border-color: #e6c1b8; background: #fff0ed; color: #a53b29; }
.portal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; }
.portal-stats article { display: flex; align-items: center; gap: .8rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: white; }
.portal-stats article > span { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; background: #f8ead4; font-weight: 850; font-size: 1.2rem; }
.portal-stats p { margin: 0; }.portal-stats strong, .portal-stats small { display: block; }.portal-stats strong { font-size: 1.22rem; }.portal-stats small { margin-top: .15rem; color: var(--muted); font-size: .76rem; }
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.card-heading { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.compact-form { margin-top: 1rem; }
.selected-plan-info { padding: .8rem; display: grid; gap: .25rem; border-radius: 10px; background: #f3ebdf; color: #405149; font-size: .82rem; }
.selected-plan-info strong { color: var(--ink); }
.portal-section { margin-top: 1rem; }
.portal-section > .card-heading { margin-bottom: 1rem; }
.due-grid, .subscription-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.due-card, .subscription-card { padding: 1.05rem; border: 1px solid var(--line); border-radius: 14px; background: #fffdf8; }
.due-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }.due-card-top > strong { font-size: 1.18rem; }
.due-card h3, .subscription-card h3 { margin: .85rem 0 .42rem; font-size: 1.08rem; }
.due-card p, .subscription-card p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.due-details, .subscription-meta { display: grid; gap: .35rem; margin-top: .9rem; color: #5d6a63; font-size: .77rem; }
.status-pill { display: inline-flex; width: fit-content; padding: .23rem .46rem; border-radius: 999px; background: #eef0ed; color: #536057; font-size: .66rem; font-weight: 850; letter-spacing: .04em; }.status-pill.pending, .status-pill.partial, .status-pill.payment-pending { background: #fff0c6; color: #845d10; }.status-pill.paid, .status-pill.success, .status-pill.completed, .status-pill.active, .status-pill.confirmed { background: #e6f4e9; color: #22633a; }.status-pill.cancelled, .status-pill.failed { background: #fee9e3; color: #a0442c; }.status-pill.preparing, .status-pill.out-for-delivery, .status-pill.initiated { background: #eaf1f8; color: #2f6386; }.status-pill.paused, .status-pill.new { background: #eef0ed; color: #536057; }
.due-actions, .subscription-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }.due-actions .button, .subscription-actions .button { flex: 1; justify-content: center; min-width: 130px; }.text-button { padding: .5rem .1rem; border: 0; color: var(--brand); background: transparent; font-size: .8rem; font-weight: 800; }.text-button:hover { color: var(--brand-dark); text-decoration: underline; }
.portal-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 12px; }.portal-table { width: 100%; min-width: 670px; border-collapse: collapse; font-size: .83rem; }.portal-table th, .portal-table td { padding: .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }.portal-table th { background: #f8f5ee; color: #536057; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }.portal-table tr:last-child td { border-bottom: 0; }
@media (max-width: 1000px) { .auth-grid { grid-template-columns: 1fr; }.portal-intro { min-height: 0; }.tiffin-plan-grid, .due-grid, .subscription-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .header-actions .account-button { display: none; }.portal-shell { padding-top: 1.5rem; }.portal-heading { align-items: start; flex-direction: column; }.portal-stats, .portal-grid, .tiffin-plan-grid, .due-grid, .subscription-grid { grid-template-columns: 1fr; }.portal-stats article { min-height: 80px; }.portal-intro h1 { font-size: 2.9rem; }.auth-cards { gap: .8rem; }.due-actions .button, .subscription-actions .button { flex: auto; }.site-header .button.secondary { padding: .6rem .8rem; }.header-actions { gap: .35rem; } }


/* ========================================================================== 
   Professional customer portal — V3
   This section intentionally overrides only the customer portal experience.
   ========================================================================== */
.portal-v3-body {
  --portal-ink: #15251f;
  --portal-green: #5c531e;
  --portal-green-2: #826823;
  --portal-accent: #d25b35;
  --portal-accent-dark: #b74927;
  --portal-cream: #fbf9f4;
  --portal-mist: #f0eee7;
  --portal-line: #e8e2d8;
  --portal-muted: #66736d;
  background: linear-gradient(180deg, #f7f5ef 0%, #f3f0e9 100%);
}
.portal-v3-header {
  background: rgba(255, 253, 248, .97);
  box-shadow: 0 1px 0 rgba(22, 37, 31, .04);
}
.portal-v3-shell { width: min(1260px, calc(100% - 2rem)); padding: clamp(1.3rem, 3.5vw, 3.4rem) 0 5.5rem; }

/* Authentication experience */
.portal-auth-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); min-height: 660px; overflow: hidden; border: 1px solid rgba(23, 62, 49, .10); border-radius: 28px; background: white; box-shadow: 0 26px 68px rgba(35, 43, 33, .11); }
.portal-hero-card { position: relative; display: flex; min-height: 100%; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(2rem, 5vw, 4.5rem); color: #fbfaf6; background: linear-gradient(145deg, #3e2414 0%, #6b3a13 54%, #827126 100%); }
.portal-hero-card::after { position: absolute; inset: auto -15% -44% auto; width: 440px; height: 440px; content: ""; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.025), 0 0 0 115px rgba(255,255,255,.025); }
.hero-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); }
.hero-glow-one { width: 210px; height: 210px; right: 9%; top: 4%; background: rgba(241, 176, 102, .16); }
.hero-glow-two { width: 130px; height: 130px; left: 10%; bottom: 15%; background: rgba(205, 88, 50, .18); }
.portal-hero-content, .portal-service-preview { position: relative; z-index: 1; }
.portal-eyebrow { color: #f3ca91; }
.portal-hero-card h1 { max-width: 670px; margin: .4rem 0 1.25rem; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2.8rem, 5.1vw, 5.4rem); font-weight: 600; line-height: .98; letter-spacing: -.055em; }
.portal-hero-card h1 em { color: #f4c06c; font-weight: 400; }
.portal-hero-copy { max-width: 595px; margin: 0; color: rgba(252,252,247,.78); font-size: 1.02rem; line-height: 1.72; }
.portal-benefit-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; max-width: 700px; margin-top: clamp(2rem, 5vw, 4.5rem); }
.portal-benefit-list > div { min-width: 0; padding: .85rem .7rem .2rem 0; border-top: 1px solid rgba(255,255,255,.25); }
.benefit-icon { display: inline-grid; min-width: 30px; height: 24px; place-items: center; margin-bottom: .8rem; border-radius: 999px; color: #f4c06c; font-size: .67rem; font-weight: 800; letter-spacing: .08em; background: rgba(255,255,255,.09); }
.portal-benefit-list p { margin: 0; }
.portal-benefit-list strong, .portal-benefit-list small { display: block; }
.portal-benefit-list strong { font-size: .86rem; letter-spacing: -.01em; }
.portal-benefit-list small { margin-top: .3rem; color: rgba(252,252,247,.64); font-size: .74rem; line-height: 1.45; }
.portal-service-preview { width: min(100%, 490px); margin-top: 2.6rem; padding: 1rem 1.1rem .55rem; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(8, 23, 18, .22); backdrop-filter: blur(12px); }
.service-preview-header, .service-preview-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.service-preview-header { padding-bottom: .8rem; color: #f9faf4; font-size: .76rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.service-preview-header b { padding: .22rem .52rem; border-radius: 999px; color: #d9f1df; font-size: .64rem; background: rgba(91, 201, 129, .2); }
.service-preview-row { padding: .78rem 0; border-top: 1px solid rgba(255,255,255,.13); font-size: .78rem; }
.service-preview-row .service-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #f4c06c; box-shadow: 0 0 0 4px rgba(247,212,163,.12); }
.service-preview-row > span:nth-child(2) { flex: 1; color: rgba(255,255,255,.78); }
.service-preview-row strong { color: #f9faf4; font-size: .7rem; text-align: right; }
.portal-login-card { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(1.5rem, 4.3vw, 4rem); background: #fffefa; }
.portal-login-head { max-width: 440px; }
.login-badge { display: inline-flex; padding: .34rem .55rem; border-radius: 999px; color: var(--portal-green); font-size: .65rem; font-weight: 850; letter-spacing: .1em; background: #e9f1eb; }
.portal-login-card h2 { margin: 1rem 0 .55rem; color: var(--portal-ink); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(2rem, 3.7vw, 3.25rem); line-height: 1.02; letter-spacing: -.045em; }
.portal-login-head > p { margin: 0; color: var(--portal-muted); font-size: .9rem; line-height: 1.6; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; max-width: 440px; margin: 2rem 0 1.25rem; padding: .28rem; border: 1px solid var(--portal-line); border-radius: 13px; background: #f8f6f1; }
.auth-tab { min-height: 40px; border: 0; border-radius: 9px; color: #607068; font-size: .8rem; font-weight: 800; background: transparent; transition: .2s ease; }
.auth-tab.active { color: var(--portal-green); background: white; box-shadow: 0 3px 9px rgba(35,43,33,.09); }
.auth-panel { max-width: 440px; animation: portalFadeIn .24s ease; }
.auth-panel[hidden] { display: none; }
@keyframes portalFadeIn { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.portal-v3-form { gap: 1rem; }
.portal-v3-form label { color: #37483f; font-size: .78rem; }
.portal-v3-form input, .portal-v3-form textarea, .portal-v3-form select { min-height: 48px; border-color: #ded8cc; border-radius: 11px; padding: .78rem .9rem; background: #fff; font-size: .9rem; }
.portal-v3-form textarea { min-height: 78px; }
.portal-v3-form input:focus, .portal-v3-form textarea:focus, .portal-v3-form select:focus { border-color: var(--portal-accent); box-shadow: 0 0 0 4px rgba(210,91,53,.11); }
.portal-v3-form .button.primary { min-height: 50px; margin-top: .2rem; border-radius: 12px; background: var(--portal-accent); box-shadow: 0 10px 22px rgba(210,91,53,.2); }
.portal-v3-form .button.primary:hover { background: var(--portal-accent-dark); }
.form-footnote { margin: 1rem 0 0; color: #7b867f; font-size: .72rem; line-height: 1.45; }
.portal-login-support { display: flex; align-items: center; gap: .7rem; max-width: 440px; margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--portal-line); }
.portal-login-support > span { display: grid; flex: 0 0 26px; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #1d7a45; font-size: .75rem; font-weight: 900; background: #e9f5ed; }
.portal-login-support p { margin: 0; }
.portal-login-support strong, .portal-login-support small { display: block; }
.portal-login-support strong { color: #384940; font-size: .75rem; }
.portal-login-support small { margin-top: .18rem; color: #7a867f; font-size: .69rem; }

/* Logged-in dashboard */
.portal-dashboard-hero { display: grid; grid-template-columns: 1.25fr minmax(290px, .48fr); gap: 1rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 24px; color: white; background: linear-gradient(110deg, #5f3412, #88702b); box-shadow: 0 18px 43px rgba(23, 62, 49, .16); }
.dashboard-hero-main h1 { margin: .3rem 0 .7rem; font-size: clamp(2.6rem, 5vw, 4.7rem); line-height: .98; }
.dashboard-hero-main > p:not(.eyebrow) { max-width: 600px; margin: 0; color: rgba(255,255,255,.76); line-height: 1.62; font-size: .98rem; }
.dashboard-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.45rem; }
.dashboard-hero-actions .button { border-radius: 11px; }
.dashboard-hero-actions .button.primary { background: #f5c989; color: #183b2e; box-shadow: none; }
.dashboard-hero-actions .button.primary:hover { background: #f8d7a5; }
.dashboard-ghost-button { border-color: rgba(255,255,255,.32); color: white; background: transparent; }
.dashboard-ghost-button:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); box-shadow: none; }
.dashboard-payment-summary { display: flex; min-height: 180px; flex-direction: column; justify-content: center; padding: 1.45rem; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(3, 20, 13, .19); }
.dashboard-summary-label { color: #cce0d3; font-size: .63rem; font-weight: 850; letter-spacing: .12em; }
.dashboard-payment-summary strong { margin-top: .55rem; color: #fff7e9; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; }
.dashboard-payment-summary p { margin: .55rem 0 1.25rem; color: #d0e0d6; font-size: .78rem; }
.dashboard-summary-link { color: #f4c06c; font-size: .78rem; font-weight: 800; }
.portal-dashboard-nav { display: flex; overflow: auto; gap: .35rem; margin: 1rem 0; padding: .35rem; border: 1px solid var(--portal-line); border-radius: 13px; background: rgba(255,255,255,.78); }
.portal-dashboard-nav a { flex: 1 0 auto; min-width: max-content; padding: .68rem .9rem; border-radius: 9px; color: #647269; font-size: .78rem; font-weight: 800; text-align: center; }
.portal-dashboard-nav a:first-child, .portal-dashboard-nav a:hover { color: var(--portal-green); background: #edf2ed; }
.portal-message { border-color: #dfd7c9; background: #fff9e9; }
.portal-v3-stats { margin-bottom: 1rem; }
.portal-v3-stats article { position: relative; min-height: 125px; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: .2rem .8rem; overflow: hidden; padding: 1.15rem 1.2rem; border-color: var(--portal-line); border-radius: 17px; box-shadow: 0 7px 20px rgba(48,55,42,.04); }
.portal-v3-stats article::after { position: absolute; width: 80px; height: 80px; right: -23px; top: -22px; content: ""; border-radius: 50%; background: rgba(28,92,67,.05); }
.portal-v3-stats .payment-stat::after { background: rgba(210,91,53,.07); }
.portal-v3-stats .stat-icon { grid-row: span 2; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--portal-green); font-family: Georgia, serif; font-size: .9rem; font-weight: 800; background: #e9f1eb; }
.portal-v3-stats .payment-stat .stat-icon { color: var(--portal-accent-dark); background: #fff0ea; }
.portal-v3-stats p { min-width: 0; }
.portal-v3-stats strong { font-size: 1.25rem; }
.portal-v3-stats small { color: #6b7770; }
.portal-v3-stats a { grid-column: 2; color: var(--portal-accent-dark); font-size: .7rem; font-weight: 800; }
.portal-main-grid { display: grid; gap: 1rem; }
.portal-v3-section { padding: clamp(1.1rem, 2.5vw, 1.75rem); margin-top: 0; border-color: var(--portal-line); border-radius: 18px; box-shadow: 0 8px 23px rgba(48,55,42,.035); }
.section-heading-v3 { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--portal-line); }
.section-heading-v3 .eyebrow { margin-bottom: .5rem; }
.section-heading-v3 h2 { color: var(--portal-ink); font-size: clamp(1.65rem, 3vw, 2.3rem); }
.section-heading-v3 p:not(.eyebrow) { max-width: 690px; margin: .55rem 0 0; color: #728078; font-size: .84rem; line-height: 1.55; }
.section-number { display: grid; flex: 0 0 33px; width: 33px; height: 33px; place-items: center; border-radius: 50%; color: #7f8b84; font-size: .68rem; font-weight: 850; background: #f1f0eb; }
.portal-tiffin-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, .7fr); gap: 1rem; padding-top: 1.2rem; }
.subscription-grid-v3 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.subscription-grid-v3 .empty-results { min-height: 160px; display: grid; place-items: center; border: 1px dashed #d8ded7; background: #f9fbf8; color: #6d7c73; }
.new-tiffin-panel { padding: 1.15rem; border-radius: 15px; color: #f8faf5; background: linear-gradient(150deg, #5f3412, #7a6422); }
.new-tiffin-panel .panel-kicker { color: #f4c88e; font-size: .65rem; font-weight: 850; letter-spacing: .1em; }
.new-tiffin-panel h3 { margin: .7rem 0 .2rem; color: #fffdf8; font-size: 1.55rem; line-height: 1.05; }
.new-tiffin-panel .portal-form { margin-top: 1rem; }
.new-tiffin-panel .portal-form label { color: rgba(255,255,255,.82); }
.new-tiffin-panel .portal-form label span { color: rgba(255,255,255,.55); }
.new-tiffin-panel .portal-v3-form input, .new-tiffin-panel .portal-v3-form textarea, .new-tiffin-panel .portal-v3-form select { border-color: rgba(255,255,255,.19); color: #1c2d25; background: #fffefa; }
.new-tiffin-panel .selected-plan-info { border: 1px solid rgba(255,255,255,.13); color: #deeadf; background: rgba(255,255,255,.08); }
.new-tiffin-panel .selected-plan-info strong { color: #fffdf8; }
.new-tiffin-panel .button.primary { color: #183b2e; background: #f4c88e; }
.new-tiffin-panel .button.primary:hover { background: #f7d7a5; }
.due-grid-v3 { padding-top: 1.2rem; }
.due-card, .subscription-card { border-color: #e6e1d8; border-radius: 14px; background: #fffefa; transition: transform .2s ease, box-shadow .2s ease; }
.due-card:hover, .subscription-card:hover { transform: translateY(-2px); box-shadow: 0 13px 22px rgba(48,55,42,.07); }
.due-card h3, .subscription-card h3 { color: var(--portal-ink); font-size: 1.13rem; }
.due-card-top > strong { color: var(--portal-ink); }
.due-actions .button, .subscription-actions .button { border-radius: 9px; }
.due-actions .button.primary { background: var(--portal-accent); }
.due-actions .button.primary:hover { background: var(--portal-accent-dark); }
.payment-history-wrap { margin-top: 1.3rem; }
.subsection-title { margin-bottom: .75rem; color: #69766e; font-size: .74rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.portal-table-wrap { border-color: #e8e2d9; border-radius: 12px; }
.portal-table th { color: #69766e; background: #f8f6f0; }
.profile-form-v3 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1.2rem; }
.profile-form-v3 .profile-address-field { grid-column: 1 / -1; }
.profile-action-row { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 1rem; }
.profile-action-row .form-error { margin: 0; }
.profile-action-row .button { border-radius: 10px; }

@media (max-width: 1050px) {
  .portal-auth-layout { grid-template-columns: 1fr; }
  .portal-hero-card { min-height: 500px; }
  .portal-login-card { min-height: 620px; }
  .portal-tiffin-layout { grid-template-columns: 1fr; }
  .new-tiffin-panel { max-width: none; }
}
@media (max-width: 780px) {
  .portal-v3-shell { width: min(100% - 1.15rem, 1260px); padding-top: .75rem; }
  .portal-auth-layout { border-radius: 20px; }
  .portal-hero-card { min-height: auto; padding: 2.1rem 1.4rem; }
  .portal-hero-card h1 { font-size: clamp(2.65rem, 11vw, 4rem); }
  .portal-benefit-list { grid-template-columns: 1fr; gap: .4rem; margin-top: 2.2rem; }
  .portal-benefit-list > div { display: grid; grid-template-columns: auto 1fr; column-gap: .65rem; align-items: center; padding: .7rem 0; }
  .benefit-icon { grid-row: span 2; margin: 0; }
  .portal-benefit-list small { margin-top: .15rem; }
  .portal-service-preview { margin-top: 1.4rem; }
  .portal-login-card { min-height: auto; padding: 2rem 1.4rem; }
  .portal-dashboard-hero { grid-template-columns: 1fr; padding: 1.5rem; border-radius: 18px; }
  .dashboard-payment-summary { min-height: 150px; }
  .portal-v3-stats { grid-template-columns: 1fr; }
  .subscription-grid-v3 { grid-template-columns: 1fr; }
  .profile-form-v3 { grid-template-columns: 1fr; }
  .profile-action-row { grid-column: 1; align-items: stretch; flex-direction: column; }
  .profile-action-row .button { width: 100%; }
}
@media (max-width: 520px) {
  .portal-v3-header .brand small { display: none; }
  .portal-v3-header .brand-mark { width: 38px; height: 38px; }
  .portal-v3-header .account-button { padding: .55rem .7rem; }
  .portal-login-card h2 { font-size: 2.05rem; }
  .auth-tabs { margin-top: 1.55rem; }
  .portal-dashboard-nav { margin: .75rem 0; }
  .section-heading-v3 { gap: .75rem; }
  .portal-v3-section { border-radius: 15px; }
  .dashboard-hero-actions { flex-direction: column; }
  .dashboard-hero-actions .button { width: 100%; }
}

/* Customer PWA / app-mode upgrade */
.customer-app-body { min-height: 100dvh; overscroll-behavior-y: none; }
.app-topbar { padding-top: env(safe-area-inset-top); }
.app-topbar-actions { align-items: center; }
.app-install-button { display: inline-flex; align-items: center; gap: .36rem; min-height: 38px; padding: .45rem .66rem; border: 1px solid rgba(109,58,16,.14); border-radius: 999px; color: var(--portal-green); font: inherit; font-size: .75rem; font-weight: 800; background: #fff2d6; cursor: pointer; }
.app-install-button:hover { background: #f8e4b9; }
.app-install-icon { font-size: 1rem; line-height: 1; }
.app-install-notice { position: relative; display: flex; align-items: center; gap: .72rem; margin: 0 0 1rem; padding: .82rem 2.65rem .82rem .82rem; border: 1px solid rgba(109,58,16,.14); border-radius: 16px; color: #fffaf0; background: linear-gradient(125deg, #60340f, #866e24); box-shadow: 0 12px 26px rgba(96,52,15,.16); }
.app-install-notice[hidden] { display: none; }
.app-install-notice-icon { display: grid; flex: 0 0 37px; width: 37px; height: 37px; place-items: center; border-radius: 12px; color: #6b3a13; font-family: Georgia, serif; font-weight: 800; background: #f4c06c; }
img.app-install-notice-icon { display: block; object-fit: cover; border: 1px solid rgba(255,255,255,.46); background: #fffaf4; }
.app-install-notice strong, .app-install-notice span { display: block; }
.app-install-notice strong { font-size: .78rem; letter-spacing: .01em; }
.app-install-notice span { margin-top: .18rem; color: rgba(234,255,239,.76); font-size: .7rem; line-height: 1.35; }
.app-install-notice > button:not(.app-notice-dismiss) { flex: 0 0 auto; min-height: 33px; padding: .4rem .58rem; border: 0; border-radius: 9px; color: #6b3a13; font: inherit; font-size: .7rem; font-weight: 850; background: #f4c06c; cursor: pointer; }
.app-notice-dismiss { position: absolute; right: .55rem; top: .45rem; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; color: rgba(255,255,255,.82); font-size: 1.25rem; line-height: 1; background: rgba(255,255,255,.1); cursor: pointer; }
.mobile-app-nav, .app-offline-bar { display: none; }

@media (display-mode: standalone) {
  .app-install-button, .app-install-notice { display: none !important; }
  .customer-app-body { padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 780px) {
  .customer-app-body { background: #f2f3ef; }
  .app-topbar { position: sticky; top: 0; min-height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) .82rem 0; border-bottom: 1px solid rgba(23,62,49,.07); background: rgba(251,250,246,.96); box-shadow: 0 5px 18px rgba(23,62,49,.06); }
  .app-topbar .brand { gap: .5rem; }
  .app-topbar .brand strong { font-size: .93rem; }
  .app-topbar .brand small { font-size: .62rem; }
  .app-topbar .brand-mark { width: 36px; height: 36px; font-size: .78rem; }
  .app-topbar-actions { gap: .38rem; }
  .app-topbar .account-button { display: none; }
  .app-topbar .button.secondary { min-height: 35px; padding: .45rem .6rem; font-size: .7rem; }
  .app-install-button { min-height: 35px; padding: .42rem .54rem; font-size: .68rem; }
  .portal-v3-shell.app-main-shell { width: 100%; padding: .72rem .72rem calc(6.1rem + env(safe-area-inset-bottom)); }
  .app-install-notice { margin: 0 0 .7rem; border-radius: 14px; }
  .portal-auth-layout { min-height: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .portal-hero-card { min-height: 355px; padding: 1.5rem 1.35rem; border-radius: 22px; box-shadow: 0 12px 30px rgba(23,62,49,.14); }
  .portal-hero-card h1 { margin-top: .3rem; font-size: clamp(2.45rem, 12vw, 3.4rem); letter-spacing: -.055em; }
  .portal-hero-copy { font-size: .88rem; line-height: 1.55; }
  .portal-benefit-list { gap: .42rem; margin-top: 1.6rem; }
  .portal-benefit-list > div { padding-right: .38rem; }
  .portal-benefit-list small { display: none; }
  .benefit-icon { margin-bottom: .38rem; }
  .portal-service-preview { display: none; }
  .portal-login-card { margin-top: .8rem; padding: 1.45rem 1.1rem 1.18rem; border: 1px solid rgba(23,62,49,.07); border-radius: 22px; box-shadow: 0 8px 22px rgba(23,62,49,.05); }
  .portal-login-card h2 { font-size: 2rem; }
  .auth-tabs { margin: 1.35rem 0 1rem; }
  .portal-v3-form input, .portal-v3-form textarea, .portal-v3-form select { min-height: 50px; font-size: 16px; }
  .portal-dashboard-hero { margin-top: 0; padding: 1.3rem 1.15rem; border-radius: 22px; }
  .dashboard-hero-main h1 { font-size: 2.15rem; }
  .dashboard-hero-actions { gap: .52rem; }
  .dashboard-hero-actions .button { min-height: 43px; font-size: .76rem; }
  .dashboard-payment-summary { margin-top: 1rem; padding: .92rem; border-radius: 15px; }
  .portal-dashboard-nav { display: none; }
  .portal-v3-stats { gap: .68rem; margin-top: .72rem; }
  .portal-v3-stats article { min-height: 108px; padding: 1rem; border-radius: 17px; }
  .portal-main-grid { gap: .72rem; }
  .portal-v3-section { padding: 1.12rem .96rem; border-radius: 19px; }
  .section-heading-v3 { align-items: start; gap: .65rem; }
  .section-heading-v3 h2 { font-size: 1.6rem; }
  .section-heading-v3 > div > p:not(.eyebrow) { font-size: .79rem; line-height: 1.45; }
  .section-number { width: 30px; height: 30px; font-size: .68rem; }
  .portal-tiffin-layout { gap: .75rem; }
  .subscription-grid-v3, .due-grid-v3 { grid-template-columns: 1fr; }
  .subscription-card, .due-card { border-radius: 15px; }
  .new-tiffin-panel { border-radius: 17px; padding: 1rem; }
  .portal-table-wrap { border-radius: 13px; }
  .portal-table { min-width: 550px; }
  .mobile-app-nav { position: fixed; z-index: 55; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(4, 1fr); min-height: calc(63px + env(safe-area-inset-bottom)); padding: .36rem .42rem calc(.36rem + env(safe-area-inset-bottom)); border-top: 1px solid rgba(23,62,49,.1); background: rgba(255,254,250,.96); box-shadow: 0 -7px 20px rgba(23,62,49,.09); backdrop-filter: blur(16px); }
  .mobile-app-nav[hidden] { display: none; }
  .mobile-app-nav a { display: grid; place-items: center; align-content: center; gap: .2rem; min-height: 52px; border-radius: 12px; color: #6b776f; font-size: .63rem; font-weight: 750; text-decoration: none; }
  .mobile-app-nav a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; }
  .mobile-app-nav a.active { color: #6b3a13; background: #fff0d5; }
  .app-offline-bar { position: fixed; z-index: 70; left: 50%; bottom: calc(75px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 1.5rem); padding: .58rem .78rem; border-radius: 999px; color: white; font-size: .72rem; font-weight: 700; background: #283b32; box-shadow: 0 8px 24px rgba(0,0,0,.17); }
  .app-offline-bar[hidden] { display: none; }
}

@media (max-width: 390px) {
  .app-install-text { display: none; }
  .app-install-button { width: 34px; justify-content: center; padding: .35rem; }
  .portal-v3-shell.app-main-shell { padding-left: .55rem; padding-right: .55rem; }
  .portal-hero-card { padding: 1.28rem 1.05rem; }
  .portal-login-card { padding: 1.24rem .92rem 1rem; }
}

/* Official Rasoo.in brand mark */
.portal-hero-logo { display: block; width: 94px; height: 94px; margin: 0 0 1rem; object-fit: cover; border: 2px solid rgba(255,255,255,.28); border-radius: 28px; background: #fffaf4; box-shadow: 0 16px 36px rgba(23,12,4,.26); }
@media (max-width: 780px) { .portal-hero-logo { width: 72px; height: 72px; margin-bottom: .72rem; border-radius: 22px; } }

/* V9 checkout exact-location control */
.checkout-location-panel { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.78rem; border:1px solid #ead8ca; border-radius:12px; background:#fff8f1; }
.checkout-location-panel strong,.checkout-location-panel span{display:block}.checkout-location-panel strong{color:#44352b;font-size:.78rem}.checkout-location-panel span{max-width:280px;margin-top:.18rem;color:#7a675b;font-size:.69rem;line-height:1.4}.location-checkout-button{flex:0 0 auto;min-height:36px;padding:.45rem .65rem;border:1px solid #c2572d;border-radius:9px;color:#fff;font:inherit;font-size:.7rem;font-weight:800;background:#c2572d;cursor:pointer}.location-checkout-button:hover{background:#a94727}@media(max-width:520px){.checkout-location-panel{align-items:flex-start;flex-direction:column}.location-checkout-button{width:100%}}

/* V13 — Cash / UPI on Delivery */
.payment-method-field { margin: 0; }
.cod-payment-note { display: grid; gap: .2rem; padding: .78rem .85rem; border: 1px solid #ead8c7; border-radius: 11px; background: #fff8f0; color: #67442d; }
.cod-payment-note strong { font-size: .84rem; }.cod-payment-note span { color: #7b6555; font-size: .77rem; line-height: 1.4; }
.cod-terms-check { display: flex !important; align-items: flex-start; gap: .55rem; font-size: .78rem !important; font-weight: 600 !important; line-height: 1.42; }
.cod-terms-check input { width: auto !important; margin-top: .18rem; }.cod-terms-check a { color: var(--brand); font-weight: 800; }
.cod-collect-button { display: inline-flex; align-items: center; justify-content: center; margin-top: .4rem; padding: .42rem .58rem; border: 1px solid #d8b79e; border-radius: 8px; color: #843b1e; background: #fff4eb; font: inherit; font-size: .73rem; font-weight: 800; cursor: pointer; }
.cod-collect-button:hover { color: #fff; border-color: var(--brand); background: var(--brand); }
.payment-note-admin { display: inline-block; margin-top: .25rem; color: #7e5a44; font-size: .72rem; line-height: 1.35; }


/* V23 — supplied Rasoo.in chef mark + locally bundled menu visuals */
.homepage-brand-logo { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 0; object-fit: contain; object-position: center; box-shadow: 0 8px 20px rgba(104, 58, 18, .20); }
.menu-card { min-height: 330px; padding: 0; }
.menu-image-wrap { position: relative; height: 166px; overflow: hidden; background: #f3e6d3; }
.menu-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.menu-card:hover .menu-image { transform: scale(1.045); }
.menu-card .menu-top { position: absolute; z-index: 2; inset: 0 0 auto 0; padding: .75rem; align-items: flex-start; }
.menu-card .dish-icon { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,252,247,.93); box-shadow: 0 5px 16px rgba(47,28,14,.15); font-size: 1.2rem; }
.menu-card .diet { width: 20px; height: 20px; margin: 0; padding: 2px; border-radius: 4px; color: #2d7a40; background: rgba(255,255,255,.96); box-shadow: 0 5px 16px rgba(47,28,14,.15); }
.menu-card .diet.nonveg { color: #b14e36; }
.menu-card .menu-content { display: flex; flex: 1; flex-direction: column; padding: 1.05rem 1.25rem 1.2rem; }
.menu-card h3 { margin: 0 0 .45rem; font-size: 1.22rem; line-height: 1.12; }
.menu-card p { min-height: 2.55rem; }
.menu-card .badge { margin-top: .6rem; }
.menu-card .menu-bottom { padding-top: .8rem; }
@media (max-width: 620px) {
  .homepage-brand-logo { width: 47px; height: 47px; flex-basis: 47px; }
  .site-header { min-height: 75px; }
  .brand strong { max-width: 170px; font-size: .93rem; }
  .brand small { font-size: .64rem; }
  .menu-card { min-height: 314px; }
  .menu-image-wrap { height: 176px; }
}