*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:   #080f1e;
      --green:  #00d084;
      --green2: #00b870;
      --muted:  #6b7a8d;
      --light:  #f7f9f8;
      --white:  #ffffff;
      --text:   #0f172a;
      --text2:  #374151;
      --text3:  #64748b;
      --border: #e2e8f0;
      --font-d: 'Fraunces', Georgia, serif;
      --font-b: 'Plus Jakarta Sans', sans-serif;
      --px: clamp(20px, 5vw, 56px);
    }

    body {
      font-family: var(--font-b);
      background: var(--white);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
    }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes scaleIn {
      from { opacity: 0; transform: scale(.96); }
      to   { opacity: 1; transform: scale(1); }
    }
    @keyframes floatY {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-6px); }
    }
    @keyframes pulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(0,208,132,.5); }
      70%      { box-shadow: 0 0 0 7px rgba(0,208,132,0); }
    }
    @keyframes fillBar {
      to { width: 68%; }
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Scroll reveal */
    .rv {
      opacity: 0; transform: translateY(20px);
      transition: opacity .6s ease, transform .6s ease;
    }
    .rv.on { opacity: 1; transform: translateY(0); }
    .rv.sc { transform: scale(.96); }
    .rv.sc.on { transform: scale(1); }
    .d1 { transition-delay: .07s !important; }
    .d2 { transition-delay: .15s !important; }
    .d3 { transition-delay: .23s !important; }
    .d4 { transition-delay: .31s !important; }

    /* ── NAV (from landing) ── */
    #navbar {
      position:fixed; top:0; left:0; right:0; z-index:100; height:68px;
      display:flex; align-items:center; justify-content:center;
      background:rgba(8,15,30,.55); backdrop-filter:blur(22px);
      border-bottom:1px solid rgba(255,255,255,.05); transition:background .3s;
    }
    #navbar.scrolled { background:rgba(8,15,30,.97); border-color:rgba(255,255,255,.09); }
    .nav-inner {
      width:100%; max-width:1360px;
      display:flex; align-items:center; justify-content:space-between;
      padding:0 clamp(20px,6%,80px);
    }
    .logo { display:flex; align-items:center; gap:9px; text-decoration:none; }
    .logo-dot { width:9px; height:9px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }
    .logo-name { font-family:var(--font-d); font-weight:900; font-size:22px; color:var(--white); letter-spacing:-.6px; }
    .logo-tld { color:var(--green); }
    .nav-links { display:flex; gap:36px; }
    .nav-links a { font-size:13px; font-weight:500; color:var(--muted); transition:color .2s; text-decoration:none; }
    .nav-links a:hover { color:var(--white); }
    .nav-right { display:flex; gap:10px; align-items:center; }
    .nav-login { font-size:13px; font-weight:600; color:rgba(255,255,255,.6); background:none; border:none; cursor:pointer; font-family:var(--font-b); transition:color .2s; }
    .nav-login:hover { color:var(--white); }
    .btn { border:none; border-radius:10px; cursor:pointer; font-family:var(--font-b); font-weight:700; transition:all .2s; }
    .btn-ghost { background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.3); padding:9px 18px; font-size:13px; }
    .btn-ghost:hover { border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.07); }
    .btn-primary { background:var(--green); color:var(--navy); padding:10px 18px; font-size:13px; }
    .btn-primary:hover { background:var(--green2); }
    .hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
    .hamburger span { display:block; width:22px; height:2px; background:var(--white); border-radius:2px; }
    #mobile-nav { display:none; position:fixed; top:68px; left:0; right:0; background:rgba(8,15,30,.98); backdrop-filter:blur(22px); border-bottom:1px solid rgba(255,255,255,.07); padding:20px var(--px) 28px; z-index:99; flex-direction:column; gap:4px; }
    #mobile-nav.open { display:flex; }
    #mobile-nav a { font-size:16px; font-weight:500; color:#94a3b8; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.05); transition:color .2s; text-decoration:none; }
    #mobile-nav a:last-of-type { border-bottom:none; }
    #mobile-nav a:hover { color:var(--white); }
    #mobile-nav .btn-primary { width:100%; justify-content:center; margin-top:14px; }

    /* ── FOOTER (from landing) ── */
    footer { background:#050b14; border-top:1px solid rgba(255,255,255,.06); }
    .foot-top { display:flex; align-items:center; justify-content:space-between; padding:44px var(--px) 36px; gap:24px; flex-wrap:wrap; max-width:1360px; margin:0 auto; }
    .foot-brand { display:flex; flex-direction:column; gap:10px; }
    .foot-desc { font-size:13px; color:var(--muted); line-height:1.6; max-width:360px; }
    .foot-nav { display:flex; gap:32px; align-items:center; flex-wrap:wrap; }
    .foot-nav a { font-size:13px; font-weight:500; color:var(--muted); transition:color .2s; white-space:nowrap; text-decoration:none; }
    .foot-nav a:hover { color:var(--white); }
    .foot-divider { height:1px; background:rgba(255,255,255,.05); }
    .foot-bottom { display:flex; align-items:center; justify-content:space-between; padding:20px var(--px); gap:14px; flex-wrap:wrap; max-width:1360px; margin:0 auto; }

    @media (max-width:900px) {
      .nav-links { display:none; }
      .hamburger { display:flex; }
      .btn-ghost { display:none; }
    }


    /* ── OUTER WRAP: title+sub always on top ── */
    .outer {
      max-width: 1100px; margin: 0 auto;
      padding: 108px var(--px) 80px;
    }

    /* Headline block — always full width on top */
    .headline {
      max-width: 560px;
      margin-bottom: 40px;
    }

    h1 {
      font-family: var(--font-d); font-weight: 900;
      font-size: clamp(28px, 4vw, 48px);
      line-height: 1.1; letter-spacing: -1.2px;
      color: var(--text); margin-bottom: 14px;
      animation: fadeUp .5s .08s ease both;
    }
    h1 em { font-style: italic; color: var(--green); }

    .sub {
      font-size: 16px; color: var(--text3);
      line-height: 1.7;
      animation: fadeUp .5s .16s ease both;
    }

    /* ── TWO-COLUMN: booking LEFT, social RIGHT ── */
    /*
      Desktop: [BOOKING CARD | SOCIAL PROOF]
      Mobile:  stacked, booking first
    */
    .two-col {
      display: grid;
      grid-template-columns: 420px 1fr;
      gap: 64px;
      align-items: start;
    }

    /* ── BOOKING CARD ── */
    .booking-col { }

    .booking {
      border: 1.5px solid var(--border);
      border-radius: 20px; overflow: hidden;
      background: var(--white);
      box-shadow: 0 4px 28px rgba(0,0,0,.07);
      animation: scaleIn .5s .22s ease both;
      transition: box-shadow .3s;
    }

    .booking:hover { box-shadow: 0 8px 40px rgba(0,0,0,.1); }

    .bk-head {
      padding: 22px 26px 0;
    }

    .bk-badge {
      display: inline-flex; align-items: center; gap: 7px;
      background: rgba(0,208,132,.1); color: var(--green2);
      font-size: 11px; font-weight: 700; letter-spacing: .3px;
      padding: 4px 12px; border-radius: 100px; margin-bottom: 14px;
    }

    .bk-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--green); animation: pulse 2s infinite;
    }

    .bk-head h2 {
      font-family: var(--font-d); font-weight: 900;
      font-size: 20px; letter-spacing: -.4px; color: var(--text);
      margin-bottom: 4px;
    }

    .bk-head p { font-size: 13px; color: var(--muted); margin-bottom: 20px; }

    .bk-body { padding: 0 26px 26px; }

    /* CALENDAR */
    .cal-nav {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 16px;
    }

    .cal-m { font-weight: 700; font-size: 14px; }

    .cal-btn {
      width: 28px; height: 28px; border-radius: 7px;
      border: 1.5px solid var(--border); background: none;
      cursor: pointer; font-size: 14px; color: var(--muted);
      display: flex; align-items: center; justify-content: center;
      transition: all .15s;
    }
    .cal-btn:hover { background: var(--light); color: var(--text); }

    .cal-grid {
      display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
      margin-bottom: 4px;
    }

    .ch {
      text-align: center; font-size: 10px; font-weight: 700;
      color: var(--muted); padding: 3px 0;
      text-transform: uppercase; letter-spacing: .5px;
    }

    .cd {
      aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
      font-size: 13px; border-radius: 7px; cursor: pointer;
      transition: all .18s cubic-bezier(.34,1.56,.64,1);
      color: var(--text); font-weight: 500; position: relative;
    }
    .cd:hover:not(.ep) { background: var(--light); transform: scale(1.12); }
    .cd.ep  { color: #d1d5db; cursor: default; font-weight: 400; }
    .cd.av { color: var(--text); font-weight: 600; }
    .cd.av::after {
      content: ''; width: 3px; height: 3px;
      background: var(--green); border-radius: 50%;
      position: absolute; bottom: 3px;
    }
    .cd.td  { color: var(--green); font-weight: 700; }
    .cd.sl  { background: var(--navy) !important; color: var(--white) !important; font-weight: 700; transform: scale(1.05); }

    /* SLOTS */
    .ts-wrap { display: none; padding-top: 16px; }
    .ts-wrap.show { display: block; animation: fadeInUp .3s ease; }

    .ts-label {
      font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
      text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
      padding-top: 14px; border-top: 1px solid var(--border);
    }

    .ts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }

    .ts {
      padding: 8px 4px; text-align: center;
      border: 1.5px solid var(--border); border-radius: 8px;
      font-size: 12px; font-weight: 600; cursor: pointer;
      transition: all .2s cubic-bezier(.34,1.56,.64,1); color: var(--text);
    }
    .ts:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }
    .ts.sl { background: var(--navy); border-color: var(--navy); color: var(--white); transform: scale(1.05); }

    /* FORM */
    .fm-wrap { display: none; }
    .fm-wrap.show { display: block; animation: fadeInUp .3s ease; }

    .fm-divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

    .fg { margin-bottom: 12px; }

    .fg label {
      display: block; font-size: 10px; font-weight: 700;
      letter-spacing: 1.2px; text-transform: uppercase;
      color: var(--muted); margin-bottom: 6px;
    }

    .fg input {
      width: 100%; padding: 10px 13px;
      border: 1.5px solid var(--border); border-radius: 9px;
      font-size: 14px; font-family: var(--font-b);
      color: var(--text); outline: none;
      transition: border-color .15s, transform .2s;
    }
    .fg input:focus { border-color: var(--green); transform: translateY(-1px); }
    .fg input::placeholder { color: #c4c9d4; }

    .cta {
      width: 100%; padding: 13px 20px;
      background: var(--green); color: var(--navy);
      border: none; border-radius: 10px;
      font-size: 14px; font-weight: 700;
      font-family: var(--font-b); cursor: pointer;
      transition: all .25s; letter-spacing: -.1px;
      margin-top: 2px; position: relative; overflow: hidden;
    }
    .cta::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%);
      background-size: 200% 100%; background-position: -200% center;
    }
    .cta:hover::after { background-position: 200% center; transition: background-position .5s ease; }
    .cta:hover { background: var(--green2); box-shadow: 0 6px 22px rgba(0,208,132,.4); transform: translateY(-2px); }
    .cta:active { transform: scale(.98); }

    .priv {
      text-align: center; font-size: 11px;
      color: var(--muted); margin-top: 10px; line-height: 1.5;
    }
    .priv a { color: var(--muted); text-decoration: underline; }

    /* SUCCESS */
    .ok-wrap { display: none; padding: 44px 26px; text-align: center; }
    .ok-wrap.show { display: block; animation: scaleIn .4s ease; }

    .ok-ico {
      width: 60px; height: 60px; border-radius: 50%;
      background: rgba(0,208,132,.1); margin: 0 auto 20px;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px;
    }

    .ok-wrap h3 {
      font-family: var(--font-d); font-weight: 900;
      font-size: 24px; letter-spacing: -.4px; margin-bottom: 10px;
    }
    .ok-wrap p { font-size: 14px; color: var(--text3); line-height: 1.7; }

    /* ── SOCIAL / PROOF COLUMN ── */
    .social-col { padding-top: 4px; }

    /* Social proof row */
    .sp-row {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 28px;
    }

    .avs { display: flex; }
    .av {
      width: 30px; height: 30px; border-radius: 50%;
      border: 2.5px solid var(--white); margin-left: -8px;
      font-size: 11px; font-weight: 700; color: var(--white);
      display: flex; align-items: center; justify-content: center;
    }
    .av:first-child { margin-left: 0; }
    .av1 { background: #4f46e5; }
    .av2 { background: #ec4899; }
    .av3 { background: #f59e0b; }
    .av4 { background: #10b981; }

    .sp-txt { font-size: 13px; color: var(--text3); line-height: 1.45; }
    .sp-txt strong { color: var(--text); }

    /* Testimonial */
    .testi {
      background: var(--light); border-radius: 16px;
      padding: 24px 26px; margin-bottom: 20px;
      position: relative;
      animation: floatY 6s 1.5s ease-in-out infinite;
      transition: box-shadow .3s, transform .3s;
    }
    .testi:hover { box-shadow: 0 16px 40px rgba(0,0,0,.09); animation-play-state: paused; transform: translateY(-3px); }

    .quote { font-family: var(--font-d); font-size: 60px; line-height: 1; color: var(--green); opacity: .2; position: absolute; top: 8px; left: 20px; }
    .stars { color: #f59e0b; font-size: 13px; margin-bottom: 10px; }

    .testi-txt {
      font-size: 14px; line-height: 1.75; color: var(--text2);
      margin-bottom: 16px; padding-top: 10px;
    }

    .testi-who { display: flex; align-items: center; gap: 10px; }

    .tav {
      width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, var(--navy), #1e3a8a);
      color: var(--white); font-weight: 700; font-size: 13px;
      display: flex; align-items: center; justify-content: center;
    }

    .tname { font-size: 13px; font-weight: 700; color: var(--text); }
    .trole { font-size: 11px; color: var(--muted); }

    /* Promises */
    .promises { display: flex; flex-direction: column; gap: 10px; }

    .promise {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 14px; color: var(--text2); line-height: 1.5;
      transition: transform .2s ease;
    }
    .promise:hover { transform: translateX(4px); }

    .chk {
      width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
      background: rgba(0,208,132,.12); color: var(--green);
      font-size: 10px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      margin-top: 2px;
      transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s;
    }
    .promise:hover .chk { transform: scale(1.25); background: rgba(0,208,132,.22); }

    /* ── MOCKUP SECTION ── */
    .mockup-section {
      background: var(--light);
      padding: 80px var(--px) 100px;
      border-top: 1px solid var(--border);
    }

    .mockup-inner { max-width: 1100px; margin: 0 auto; text-align: center; }

    .mk-label {
      font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
      text-transform: uppercase; color: var(--green); margin-bottom: 14px;
    }

    .mk-h2 {
      font-family: var(--font-d); font-weight: 900;
      font-size: clamp(26px, 3.5vw, 42px);
      letter-spacing: -1px; line-height: 1.1;
      color: var(--text); margin-bottom: 12px;
    }
    .mk-h2 em { font-style: italic; color: var(--green); }

    .mk-sub { font-size: 16px; color: var(--text3); margin-bottom: 44px; line-height: 1.6; }

    /* Shell */
    .shell {
      display: flex; background: var(--navy);
      border-radius: 20px; overflow: hidden;
      box-shadow: 0 24px 80px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.12);
      border: 1px solid rgba(255,255,255,.06);
      min-height: 460px; text-align: left;
    }

    /* Sidebar */
    .mk-sidebar {
      width: 170px; flex-shrink: 0;
      background: rgba(0,0,0,.22);
      border-right: 1px solid rgba(255,255,255,.05);
      padding: 22px 14px;
      display: flex; flex-direction: column; gap: 3px;
    }

    .mk-logo {
      font-family: var(--font-d); font-weight: 900;
      font-size: 16px; color: var(--white); letter-spacing: -.3px;
      margin-bottom: 18px; padding: 0 8px;
    }
    .mk-logo span { color: var(--green); }

    .mk-nav {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px; border-radius: 8px;
      font-size: 12px; font-weight: 500;
      color: rgba(255,255,255,.3); cursor: default;
    }
    .mk-nav.ac { background: rgba(255,255,255,.08); color: var(--white); }

    .mk-pipe {
      margin-top: auto; padding: 12px 10px;
      background: rgba(0,208,132,.06);
      border: 1px solid rgba(0,208,132,.12); border-radius: 10px;
    }
    .mk-pipe-lbl { font-size: 10px; color: rgba(255,255,255,.3); margin-bottom: 4px; }
    .mk-pipe-val { font-size: 16px; font-weight: 700; color: var(--green); margin-bottom: 8px; }
    .mk-pipe-bar { height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
    .mk-pipe-fill { height: 100%; width: 0; background: var(--green); border-radius: 2px; animation: fillBar 2s 1s ease forwards; }

    /* Main area */
    .mk-main { flex: 1; padding: 22px 22px; display: flex; flex-direction: column; gap: 13px; overflow: hidden; }

    .mk-topbar { display: flex; align-items: center; justify-content: space-between; }
    .mk-greet { font-size: 14px; font-weight: 600; color: var(--white); }
    .mk-greet span { color: rgba(255,255,255,.3); font-weight: 400; font-size: 12px; margin-left: 8px; }
    .mk-acts { display: flex; gap: 8px; }
    .mk-btn-s { padding: 6px 12px; border-radius: 7px; border: 1px solid rgba(255,255,255,.15); background: none; color: rgba(255,255,255,.55); font-size: 11px; font-weight: 600; font-family: var(--font-b); cursor: default; }
    .mk-btn-p { padding: 6px 14px; border-radius: 7px; border: none; background: var(--green); color: var(--navy); font-size: 11px; font-weight: 700; font-family: var(--font-b); cursor: default; }

    .mk-chips { display: flex; gap: 7px; flex-wrap: wrap; }
    .mk-chip {
      padding: 5px 12px; border-radius: 100px;
      border: 1px solid rgba(0,208,132,.2); background: rgba(0,208,132,.06);
      font-size: 11px; font-weight: 500; color: rgba(0,208,132,.8); cursor: default;
      opacity: 0; animation: fadeInUp .4s ease forwards;
    }
    .mk-chip:nth-child(1) { animation-delay: .7s; }
    .mk-chip:nth-child(2) { animation-delay: .9s; }
    .mk-chip:nth-child(3) { animation-delay: 1.1s; }

    .mk-ai {
      background: rgba(0,208,132,.06); border: 1px solid rgba(0,208,132,.14);
      border-radius: 10px; padding: 12px 14px;
      opacity: 0; animation: fadeInUp .4s 1.3s ease forwards;
    }
    .mk-ai-hd { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
    .mk-ai-tag { background: var(--green); color: var(--navy); font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 4px; }
    .mk-ai-bd { font-size: 11px; color: rgba(255,255,255,.32); line-height: 1.5; margin-bottom: 8px; }
    .mk-ai-cta { font-size: 11px; font-weight: 700; color: var(--green); background: none; border: none; cursor: default; font-family: var(--font-b); }

    .mk-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
    .mk-stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 11px 13px; }
    .mk-stat-v { font-size: 19px; font-weight: 700; color: var(--white); margin-bottom: 3px; letter-spacing: -.5px; }
    .mk-stat-l { font-size: 10px; color: rgba(255,255,255,.28); }

    .mk-thead { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; padding: 0 10px; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.18); }

    .mk-rows { display: flex; flex-direction: column; gap: 4px; }
    .mk-row {
      display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
      padding: 9px 10px;
      background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); border-radius: 8px;
      opacity: 0;
    }
    .mk-row:nth-child(1) { animation: fadeInUp .3s 1.5s ease forwards; }
    .mk-row:nth-child(2) { animation: fadeInUp .3s 1.65s ease forwards; }
    .mk-row:nth-child(3) { animation: fadeInUp .3s 1.8s ease forwards; }

    .mk-cl { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.65); }
    .mk-vl { font-size: 12px; font-weight: 700; color: var(--white); }
    .mk-bdg { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 100px; }
    .mk-bdg.op { background: rgba(0,208,132,.15); color: var(--green); }
    .mk-bdg.wt { background: rgba(245,158,11,.12); color: #f59e0b; }
    .mk-bdg.sg { background: rgba(99,102,241,.15); color: #818cf8; }

    .mk-notif {
      display: flex; align-items: center; gap: 10px;
      background: rgba(0,208,132,.08); border: 1px solid rgba(0,208,132,.2);
      border-radius: 10px; padding: 10px 14px;
      opacity: 0; animation: fadeInUp .5s 2.2s ease forwards;
    }
    .mk-notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: pulse 2s 2.2s infinite; }
    .mk-notif-body { flex: 1; }
    .mk-notif-t { font-size: 12px; font-weight: 700; color: var(--white); }
    .mk-notif-s { font-size: 10px; color: rgba(255,255,255,.32); margin-top: 2px; }
    .mk-notif-time { font-size: 10px; color: rgba(0,208,132,.7); font-weight: 600; white-space: nowrap; }

    /* ── RESPONSIVE ── */
    @media (max-width: 860px) {
      .two-col {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      /* booking card comes FIRST, social col comes after */
      .booking-col { order: 1; }
      .social-col  { order: 2; }

      .social-col { max-width: 560px; }
    }

    @media (max-width: 600px) {
      nav { padding: 14px 20px; }
      .outer { padding: 96px 20px 64px; }
      h1 { font-size: 27px; }
      .sub { font-size: 15px; }
      .headline { margin-bottom: 32px; }
      .bk-head { padding: 18px 18px 0; }
      .bk-body { padding: 0 18px 20px; }
      .ok-wrap { padding: 36px 18px; }
      .ts-grid { grid-template-columns: repeat(2, 1fr); }
      .mk-sidebar { display: none; }
      .mk-main { padding: 16px; }
      .mk-acts { display: none; }
      .mockup-section { padding: 60px 20px 72px; }
    }

    @media (max-width: 400px) {
      .ts-grid { grid-template-columns: repeat(2, 1fr); }
      h1 { font-size: 24px; }
    }