/* ============================================================
   TaKo Studio additions on top of the Landio template.
   Structural bits the original template didn't have: the logo
   lockup, a mobile menu, the extra footer link columns, feature
   icon circles, legal-page text styling, and the pricing/compare
   table. Colors here intentionally match color.css - if you
   change a brand color there, mirror it here too.
   ============================================================ */

/* ---------- Brand font ---------- */
/* TaKo Studio's brand font is Nunito (same as the app) - overrides the
   template's default Epilogue, loaded via Google Fonts in head.php. */
body, p {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* The reference template leans on 800/900 weight for nearly everything -
   reads as very heavy with a rounder font like Nunito. Dialing the most
   common heavy spots back to 700 (the vendor CSS sets these per-selector
   in dozens of places at higher specificity than a plain override, so
   !important is the deliberate, maintained exception here rather than
   duplicating every single selector). */
h1, h2, h3, h4, h5, h6,
.btn, .badge-pill, .popular-badge,
.heading span, .section-lede span,
.footer-links h4, .common-features h5 {
    font-weight: 700 !important;
}

/* Line-height was tuned for the vendor's own heavier type - with Nunito
   at 700 instead of 800/900 it read as too loose. */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2 !important;
}
p {
    line-height: 1.65 !important;
}

/* h1 had no responsive sizing at all in the vendor CSS (it only scaled
   h2 down per breakpoint) - every h1 on the site (Pricing/Features/FAQ/
   About/legal pages) was a flat 60px even on a small phone. */
h1 {
    font-size: 46px !important;
}
@media (max-width: 767px) {
    h1 { font-size: 34px !important; }
}
@media (max-width: 480px) {
    h1 { font-size: 28px !important; }
}

/* ---------- Logo lockup (icon + wordmark), used in nav + footer ---------- */
.brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.brand-logo img {
    width: 36px;
    height: 36px;
}
.brand-logo .brand-tako {
    font-weight: 700 !important;
    font-size: 20px;
    color: #000;
}
.brand-logo .brand-studio {
    font-weight: 500 !important;
    font-size: 20px;
    color: #000;
}

/* ---------- Header layout tweaks ---------- */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.top-bar nav {
    flex: 1;
    display: flex;
    justify-content: center;
}
.top-bar nav ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.btn.nav-cta {
    padding: 12px 26px;
    white-space: nowrap;
}
nav ul li a.active {
    color: #5C3FA8;
}
/* Login + Get Started grouped together on the right, separate from
   the Features/Pricing/FAQ links which stay centered. */
.nav-auth {
    display: flex;
    align-items: center;
    gap: 18px;
}
.nav-login {
    font-weight: 700;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
}
.nav-login:hover {
    color: #5C3FA8;
}
/* Beside the hamburger on mobile, match its compact size instead of the
   full desktop button padding/border-weight. */
@media (max-width: 991px) {
    .nav-login {
        display: inline-flex;
        align-items: center;
        height: 36px;
        padding: 0 16px !important;
        border-width: 2px !important;
        font-size: 14px;
    }
}

/* Shorter sticky header - the vendor default (20px top+bottom padding)
   reads as quite tall once combined with the logo/nav row. */
header {
    padding-top: 12px;
    padding-bottom: 12px;
}
/* The decorative pale panel + divider line behind the CTA area was sized
   (30%) for a single "Get Started" button - now that Log in sits
   there too, it was too narrow and the divider cut through the Log in
   button. */
header:before {
    width: 40%;
}

/* ---------- Mobile menu ---------- */
.mobile-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    border: 2px solid #000;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    padding: 0;
}
.mobile-nav-toggle span {
    display: block;
    width: 16px;
    height: 2px;
    background: #000;
    margin: 0 auto;
}
/* Anchor point for the mobile dropdown below - so opening it overlays the
   page instead of pushing content down. */
header .container {
    position: relative;
}
.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 12px;
    padding: 14px 16px 18px;
    background: #fff;
    border: 3px solid #000;
    border-radius: 16px;
    box-shadow: 6px 6px 0px 0px rgba(0,0,0,1);
    z-index: 40;
    /* Closed state: invisible and non-interactive, but still laid out so
       the open state can transition smoothly instead of popping in. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .22s ease-out, transform .22s ease-out, visibility .22s;
}
.mobile-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.mobile-nav a {
    padding: 12px 6px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #000;
}
.mobile-nav a.active {
    color: #5C3FA8;
}
.mobile-nav a.btn {
    text-align: center;
    border-radius: 37px;
    margin-top: 10px;
    border-bottom: none;
}
.mobile-nav a.btn:not(.btn-outline) {
    color: #fff;
}
.mobile-nav a.btn-outline {
    color: #000;
    margin-top: 14px;
}
.mobile-nav.open {
    display: flex;
}
@media (min-width: 992px) {
    .mobile-nav { display: none !important; }
}
@media (max-width: 991px) {
    .top-bar nav { display: none; }
    .btn.nav-cta { display: none; }
    .mobile-nav-toggle { display: flex; }
}

/* ---------- Feature icon circles (Font Awesome based) ---------- */
.feature-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #000;
    border-radius: 50%;
    background: #5C3FA8;
    color: #fff;
    font-size: 22px;
}
.feature-icon.gold {
    background: #D6A13F;
}

/* ---------- Home: feature grid ---------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.feature-card {
    background: #fff;
    border: 3px solid #000;
    border-radius: 20px;
    padding: 30px;
}
.feature-card h4 {
    margin: 18px 0 10px;
    font-weight: 800;
}
@media (max-width: 991px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .feature-grid { grid-template-columns: 1fr; }
}

/* ---------- Home / Features: screenshot mockup frame ---------- */
.screen-frame {
    border: 3px solid #000;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);
    background: #fff;
    transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.screen-frame:hover {
    transform: translate(-3px, -3px);
    box-shadow: 11px 11px 0px 0px rgba(0,0,0,1);
}
.screen-frame img {
    display: block;
    width: 100%;
    height: auto;
}

/* Hero: gap between the CTA buttons and the screenshot once they stack
   on mobile (Bootstrap columns don't add their own vertical gap). */
@media (max-width: 991px) {
    .hero-section .row > div + div {
        margin-top: 36px;
    }
}

/* ---------- Partner logo carousel fix ----------
   The vendor CSS put 30-50px of padding directly on the <img>, which -
   combined with Owl Carousel's own fixed per-slide width - squeezed the
   actual logo down to almost nothing inside that padding. Layout/spacing
   already comes from .clients-slider .item above; the img itself should
   just be the logo. */
.clients-slider.owl-carousel img {
    padding: 0;
    border: none;
    border-radius: 0;
    margin: auto;
}
.clients-slider.owl-carousel img:hover {
    box-shadow: none;
}

/* ---------- Steps ("Powerful features") two-column layout ---------- */
.two-col-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.two-col-feature .mini-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 24px;
}
.mini-point {
    display: flex;
    gap: 10px;
}
.mini-point .feature-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 16px;
    border-width: 2px;
}
.mini-point h5 {
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 4px;
}
.mini-point p {
    font-size: 13px;
    margin: 0;
}
@media (max-width: 900px) {
    .two-col-feature { grid-template-columns: 1fr; }
}

/* ---------- Partner / studio logo strip ---------- */
.clients-slider .item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
}
.clients-slider img {
    max-height: 60px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* ---------- Pricing plan cards ---------- */
/* Row of cards: give the grid room above for the "Most popular" badge to
   poke out, and stretch all columns to equal height so the cards inside
   (flex column, see below) can equalize too. */
.pricing-plan .row {
    padding-top: 26px;
    align-items: stretch;
}
.pricing-plan .row > div {
    display: flex;
}
.pricing-plan-style {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: visible;
}
.pricing-plan-style.popular {
    border-width: 4px;
    box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);
    position: relative;
}
.popular-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background: #5C3FA8;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 7px 18px;
    border: 2px solid #000;
    border-radius: 20px;
    white-space: nowrap;
}
/* Push the Buy-now/Get-started button (comes last in the markup, after
   the module list) to the bottom of the card so it lines up across all
   3 cards regardless of how many modules each plan lists. Symmetric
   30px margin on both sides - the vendor's own .btn rule only sets a
   left margin, which left it flush against the card's right edge. */
.pricing-plan-style > a.btn {
    order: 3;
    margin-left: 30px !important;
    margin-right: 30px !important;
    margin-bottom: 10px !important;
    margin-top: auto !important;
}
.plan-modules {
    order: 2;
    text-align: left;
    padding: 0 30px;
    margin-top: 20px;
    flex: 1;
}
.plan-modules li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 10px;
    padding: 8px 0;
    font-size: 14px;
}
.plan-modules .module-note {
    flex-basis: 100%;
    font-size: 12px;
    color: #666;
    margin-left: 22px;
}

/* ---------- Compare-plans table ---------- */
.compare-table-wrap {
    background: #fff;
    border: 3px solid #000;
    border-radius: 20px;
    overflow: hidden;
    padding: 10px 0;
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
}
.compare-table th, .compare-table td {
    padding: 14px 18px;
    text-align: center;
    border-bottom: 1px solid #eee;
}
.compare-table th:first-child, .compare-table td:first-child {
    text-align: left;
}
.compare-table thead th {
    font-weight: 900;
}
.compare-table .module-note {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

/* Hollow-circle bullet - the reference theme's own "included" marker
   (used on the pricing cards and, here, the compare table), instead of a
   checkmark icon. */
.bolo {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 3px solid #000;
    border-radius: 50%;
    background: #fff;
    /* The vendor's own .pricing-plan-style ul li .bolo rule also sets a
       margin-right:10px - harmless on its own, but it was stacking with
       the column-gap already used for spacing here, silently doubling
       the gap and throwing off every aligned element below it. */
    margin-right: 0 !important;
}
.bolo-empty {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid #ddd;
    border-radius: 50%;
}
.common-features {
    padding: 24px 30px;
    border-top: 3px solid #000;
}
.common-features h5 {
    font-weight: 800;
    margin-bottom: 14px;
}
.common-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.common-features-grid div {
    font-size: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.common-features-grid i {
    color: #1F9D6C;
}
@media (max-width: 700px) {
    .common-features-grid { grid-template-columns: 1fr 1fr; }
    .compare-table { font-size: 13px; }
}

/* ---------- FAQ page: category grouping ---------- */
.faq-category {
    margin-bottom: 50px;
}
.faq-category h3 {
    font-weight: 900;
    margin-bottom: 20px;
}

/* ---------- Footer: extra link columns ---------- */
.footer-links {
    padding: 60px 0 20px;
    border-top: 3px solid #000;
    margin-top: 40px;
}
.footer-links-brand p {
    margin-top: 14px;
    font-size: 14px;
    color: #444;
    max-width: 320px;
}
.footer-links h4 {
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}
.footer-links a {
    display: block;
    font-size: 14px;
    color: #444;
    text-decoration: none;
    margin-bottom: 10px;
}
.footer-links a:hover {
    color: #5C3FA8;
}
.address i {
    font-size: 22px;
    color: #5C3FA8;
    margin-right: 20px;
    margin-top: 4px;
}
/* Equal-height contact cards - the row already stretches its columns
   (Bootstrap rows are flex by default), but the colored .address box
   inside each column only wrapped its own content, so a short "Phone"
   card had a shorter colored background than the longer "Address" one. */
.footer-address {
    display: flex;
    align-items: stretch;
}
.footer-address > div {
    display: flex;
}
.footer-address .address {
    height: 100%;
    width: 100%;
}

/* ---------- Services section (home page: modules left/right, mockup center) ---------- */
.services-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 30px;
    align-items: center;
}
.services-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.services-center {
    display: flex;
    justify-content: center;
}
.services-center .screen-frame {
    max-width: 260px;
}
.phone-mockup-img {
    width: 100%;
    max-width: 260px;
    height: auto;
    display: block;
}
@media (max-width: 991px) {
    .services-layout { grid-template-columns: 1fr; }
    .services-center { order: -1; margin-bottom: 10px; }
}

/* ---------- Real phone mockup (notch + home indicator), replacing a
   plain rectangular screenshot frame wherever a phone screen is shown ---------- */
.phone-frame {
    position: relative;
    width: 240px;
    max-width: 100%;
    aspect-ratio: 9 / 19.5;
    background: #000;
    border-radius: 34px;
    padding: 10px;
    box-shadow: 8px 8px 0px 0px rgba(0,0,0,1);
    border: 3px solid #000;
}
.phone-notch {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 46%;
    height: 20px;
    background: #000;
    border-radius: 0 0 14px 14px;
    z-index: 2;
}
.phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
}
.phone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}
.phone-home-indicator {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 34%;
    height: 4px;
    border-radius: 3px;
    background: #000;
    z-index: 2;
}
.phone-home-indicator.light {
    background: #fff;
}

/* ---------- Hand-drawn sketchy circle outline (how-it-works icons) ---------- */
.sketchy-circle {
    position: relative;
    border: none !important;
}
.sketchy-outline {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    pointer-events: none;
}

/* ---------- Hand-drawn connector arrows between "how it works" steps ---------- */
.how-it-works-wrap {
    position: relative;
}
.how-connector {
    display: none;
}
@media (min-width: 992px) {
    .how-connector {
        display: block;
        position: absolute;
        width: 26%;
        top: 60px;
    }
    .how-connector-1 { left: 21%; }
    .how-connector-2 { left: 53%; }
}

/* ---------- Decorative confetti shapes (inline SVG, brand colors) ---------- */
.confetti {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

/* ---------- Illustrated look for real product screenshots (item 6) ----------
   True hand-drawn illustration would mean replacing these with actual
   illustration assets - what's possible with CSS alone is a flatter,
   more graphic treatment (reduced depth/detail, brand-tinted shadows)
   rather than literal photographic screenshots. Toggle by adding/removing
   the "stylized" class on a .screen-frame img. */
.screen-frame img.stylized {
    filter: saturate(0.75) contrast(1.05) brightness(1.02);
}

/* ---------- Legal pages (Terms / Privacy / Refund) ---------- */
.legal-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 60px 20px 100px;
}
.legal-page h1 {
    font-weight: 900;
    margin-bottom: 6px;
}
.legal-page .legal-updated {
    color: #666;
    font-size: 14px;
    margin-bottom: 40px;
    display: block;
}
.legal-content h2 {
    font-weight: 800;
    font-size: 22px;
    margin: 36px 0 12px;
}
.legal-content p, .legal-content li {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
}
.legal-content ul {
    padding-left: 22px;
    margin-bottom: 16px;
}
.legal-content a {
    color: #5C3FA8;
    font-weight: 700;
}

/* ---------- Badge pill (small eyebrow chip with icon) ---------- */
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 30px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 20px;
}
.badge-pill i { color: #5c3fa8; }
.badge-pill.light {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}
.badge-pill.light i { color: #fff; }

/* ---------- Buttons ---------- */
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.btn-outline {
    background: transparent;
    color: #000;
}
.btn-outline:hover { color: #000; }
a.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }

/* ---------- App download band ---------- */
.app-download {
    background: linear-gradient(135deg, #3E2B6E 0%, #5C3FA8 60%, #B3842E 130%);
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
    color: #fff;
    padding-top: 90px;
    padding-bottom: 90px;
}
.app-download h2, .app-download p { color: #fff; }
.store-badges { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 2px solid rgba(255,255,255,0.4);
    background: rgba(0,0,0,0.2);
    border-radius: 16px;
    padding: 12px 18px;
    color: #fff;
}
.store-badge i { font-size: 24px; }
.store-badge small { display: block; font-size: 10px; text-transform: uppercase; opacity: 0.75; }
.store-badge span { font-weight: 800; font-size: 15px; }

/* ---------- Final CTA sections (bottom of every page) ---------- */
.final-cta h1, .final-cta h2 {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.final-cta p {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
.final-cta .btn, .final-cta a.btn {
    margin-top: 26px;
}

/* ---------- Small section helpers ---------- */
.section-lede {
    max-width: 640px;
    margin: 0 auto 50px;
    text-align: center;
}
.section-lede span {
    color: #5C3FA8;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
}
.section-lede h1, .section-lede h2 {
    font-weight: 900;
    margin: 12px 0;
}