/* ===== Inner pages ===== */
.page-hero.center { text-align: center; }
.page-hero.center h1, .page-hero.center .lede { margin-left: auto; margin-right: auto; }
.field textarea { font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: var(--radius-s); padding: 12px 14px; width: 100%; resize: vertical; min-height: 110px; }
.field textarea:focus { outline: none; box-shadow: 3px 3px 0 var(--blue); border-color: var(--blue); }

.jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.jump a { text-decoration: none; color: var(--ink); font-weight: 700; font-size: 15px; padding: 8px 16px; border: var(--stroke); border-radius: 999px; background: var(--white); box-shadow: 3px 3px 0 var(--ink); transition: transform 0.12s; }
.jump a:hover { transform: translate(-2px, -2px) rotate(-2deg); }
.jump a.y { background: var(--yellow); }
.jump a.r { background: var(--red); color: #fff; }
.jump a.b { background: var(--blue); color: #fff; }

.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 34px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border: 2.4px solid var(--ink); border-radius: 6px; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23141414' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 16px; }
.ticks li b { font-weight: 700; }

/* ===== Product features ===== */
.feature { padding: 70px 0; scroll-margin-top: 80px; }
.feature.alt { background: var(--white); border-top: var(--stroke); border-bottom: var(--stroke); }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feature.alt .feature-copy { order: 2; }
.word { display: inline-block; font-size: 22px; padding: 4px 16px; border: var(--stroke); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-3deg); }
.word.y { background: var(--yellow); }
.word.r { background: var(--red); color: #fff; }
.word.b { background: var(--blue); color: #fff; }
.feature-copy h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.02; margin-top: 18px; }
.feature-copy > p { margin-top: 16px; color: var(--ink-2); max-width: 34em; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; gap: 40px; } .feature.alt .feature-copy { order: 0; } }

.mock { position: relative; padding: 26px; }
.mock-title { font-size: 13px; font-weight: 700; color: var(--ink-3); margin-bottom: 16px; }
.mock-chat { display: flex; flex-direction: column; gap: 12px; transform: rotate(1.2deg); }
.b-cust, .b-me { max-width: 85%; padding: 12px 16px; border: 2px solid var(--ink); border-radius: 18px; font-family: "IBM Plex Sans Arabic", var(--body); font-size: 17px; box-shadow: 3px 3px 0 var(--ink); }
.b-cust { align-self: flex-end; background: var(--white); border-bottom-right-radius: 4px; }
.b-me { align-self: flex-start; background: var(--blue); color: #fff; border-bottom-left-radius: 4px; }
.b-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.b-chips span { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border: 2px solid var(--ink); border-radius: 999px; }
.b-chips .g { background: var(--green-soft); }
.b-chips .w { background: var(--yellow); }
.mock-note { position: relative; font-size: 22px; color: var(--red); margin-top: 6px; transform: rotate(-2deg); }
.mock-note svg { display: inline-block; width: 60px; height: 30px; vertical-align: middle; color: var(--red); transform: rotate(-150deg); margin-left: 6px; }

.mock-score { transform: rotate(-1.2deg); background: #fffbe6; }
.ms-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ms-top b { display: block; font-size: 17px; }
.ms-top div span { font-size: 13.5px; color: var(--ink-3); }
.ms-ring { flex: none; width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; border: var(--stroke); background: var(--green); color: #fff; font-size: 30px; box-shadow: 3px 3px 0 var(--ink); }
.ms-bars { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.ms-bars li { display: grid; grid-template-columns: 96px 1fr 32px; gap: 10px; align-items: center; font-size: 14.5px; font-weight: 500; }
.ms-bars i { height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: linear-gradient(90deg, var(--green) var(--w), #fff var(--w)); }
.ms-bars i.warn { background: linear-gradient(90deg, var(--yellow) var(--w), #fff var(--w)); }
.ms-bars em { font-style: normal; font-family: var(--marker); text-align: right; }
.ms-note { margin-top: 18px; padding: 12px 14px; background: var(--white); border: 2px solid var(--ink); border-radius: 10px; font-size: 14.5px; }
.ms-note b { color: var(--blue); margin-right: 4px; }
.ms-note span { display: block; margin-top: 6px; font-family: var(--hand); font-weight: 700; font-size: 20px; color: var(--green); }

.mock-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; transform: rotate(1deg); }
.mock-board .col { background: var(--paper); border: 2px dashed #bdb8a8; border-radius: 12px; padding: 10px; display: grid; gap: 10px; align-content: start; min-height: 220px; }
.mock-board h3 { font-family: var(--marker); font-weight: 400; font-size: 16px; }
.lead { background: var(--white); border: 2px solid var(--ink); border-radius: 10px; padding: 10px; box-shadow: 2px 2px 0 var(--ink); display: grid; gap: 2px; }
.lead b { font-size: 14.5px; }
.lead span { font-size: 12.5px; color: var(--ink-3); }
.lead em { justify-self: start; font-style: normal; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--yellow-soft); margin-top: 4px; }
.lead em.wa { background: var(--green-soft); }
.lead.hot { background: var(--yellow); transform: rotate(-2deg); }
.lead.won { background: var(--green-soft); }
@media (max-width: 520px) { .mock-board { grid-template-columns: 1fr; } .mock-board .col { min-height: 0; } }

.platform { padding: 80px 0 40px; }
.platform h2 { font-size: clamp(32px, 4vw, 48px); position: relative; display: inline-block; }
.platform .under-b { position: absolute; left: 0; bottom: -14px; width: 100%; height: 14px; color: var(--yellow); }
.plat-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: var(--stroke); border-radius: var(--radius-m); box-shadow: var(--pop); overflow: hidden; background-color: #fff; background-image: linear-gradient(#e7ebf5 1px, transparent 1px), linear-gradient(90deg, #e7ebf5 1px, transparent 1px); background-size: 22px 22px; }
.plat { padding: 26px; border-right: 2px dashed #c7c2b2; border-bottom: 2px dashed #c7c2b2; }
.plat:nth-child(3n) { border-right: 0; }
.plat:nth-last-child(-n+3) { border-bottom: 0; }
.plat h3 { font-family: var(--marker); font-weight: 400; font-size: 20px; }
.plat p { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 860px) {
  .plat-grid { grid-template-columns: 1fr 1fr; }
  .plat:nth-child(3n) { border-right: 2px dashed #c7c2b2; }
  .plat:nth-child(2n) { border-right: 0; }
  .plat:nth-last-child(-n+3) { border-bottom: 2px dashed #c7c2b2; }
  .plat:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 520px) { .plat-grid { grid-template-columns: 1fr; } .plat { border-right: 0 !important; border-bottom: 2px dashed #c7c2b2 !important; } .plat:last-child { border-bottom: 0 !important; } }

/* ===== Solutions ===== */
.sol-list { padding: 20px 0 50px; }
.sol-list .wrap { display: grid; gap: 34px; }
.sol { scroll-margin-top: 90px; border: var(--stroke); border-radius: var(--radius-l); box-shadow: 7px 7px 0 var(--ink); padding: 34px; }
.sol.y { background: var(--yellow); }
.sol.r { background: var(--red); }
.sol.b { background: var(--blue); }
.sol-head h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.02; }
.sol.r .sol-head h2, .sol.b .sol-head h2 { color: #fff; }
.sol-body { margin-top: 24px; display: grid; grid-template-columns: 1fr 1.1fr 1.2fr; gap: 22px; align-items: stretch; }
.sol .pain { transform: rotate(-1.5deg); align-self: start; }
.sol .pain span { color: var(--ink-3); }
.help { background: var(--white); border: var(--stroke); border-radius: var(--radius-m); padding: 22px; }
.help h3 { font-family: var(--marker); font-weight: 400; font-size: 19px; }
.help .ticks { margin-top: 12px; font-size: 15px; gap: 10px; }
.line-card { margin: 0; background: #fffbe6; background-image: linear-gradient(transparent 35px, #c9d3f2 35px, #c9d3f2 36px); background-size: 100% 36px; border: var(--stroke); border-radius: var(--radius-m); padding: 18px 22px; transform: rotate(1deg); box-shadow: 4px 4px 0 var(--ink); }
.line-card figcaption { font-size: 20px; color: var(--red); }
.line-card p { font-family: "IBM Plex Sans Arabic", var(--body); font-weight: 500; font-size: 20px; line-height: 1.75; margin-top: 6px; }
.line-card small { display: block; margin-top: 10px; font-size: 14px; color: var(--ink-2); }
@media (max-width: 1000px) { .sol-body { grid-template-columns: 1fr 1fr; } .line-card { grid-column: 1 / -1; } }
@media (max-width: 620px) { .sol { padding: 24px 18px; } .sol-body { grid-template-columns: 1fr; } }

/* ===== Pricing ===== */
.bill { display: inline-flex; margin-top: 30px; background: var(--white); border: var(--stroke); border-radius: 999px; padding: 4px; box-shadow: 3px 3px 0 var(--ink); }
.bill button { font: 700 15px var(--body); border: 0; background: none; color: var(--ink); padding: 10px 18px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.bill button[aria-pressed="true"] { background: var(--ink); color: var(--yellow); }
.bill .save { font-size: 12px; background: var(--red); color: #fff; padding: 2px 8px; border-radius: 999px; }
.plans-sec { padding: 20px 0 40px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: start; }
.plan { position: relative; background: var(--white); border: var(--stroke); border-radius: var(--radius-l); box-shadow: var(--pop); padding: 30px 26px; display: flex; flex-direction: column; }
.plan.pop { background: var(--yellow); transform: rotate(-1deg) translateY(-10px); box-shadow: 8px 8px 0 var(--ink); }
.plan.dark { background: var(--blue); color: #fff; }
.plan h2 { font-size: 30px; }
.plan .for { margin-top: 8px; font-size: 15px; min-height: 48px; }
.plan.dark .for { color: #dfe4ff; }
.price { margin: 18px 0 20px; display: flex; flex-direction: column; }
.price .amt { font-size: 48px; line-height: 1; }
.price .per { font-size: 14px; font-weight: 700; margin-top: 6px; }
.plan .btn { width: 100%; }
.plan .ticks { font-size: 15px; gap: 10px; }
.plan.dark .ticks li::before { background-color: #fff; }
.badge { position: absolute; top: -20px; right: 18px; background: var(--red); color: #fff; border: var(--stroke); border-radius: 999px; padding: 6px 14px; font-size: 15px; transform: rotate(6deg); }
.price-note { margin-top: 26px; text-align: center; font-size: 21px; color: var(--ink-3); }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } .plan.pop { transform: rotate(-1deg); } .plan .for { min-height: 0; } }

/* ===== About ===== */
.about-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.pad-stack { position: relative; height: 320px; }
.mini-sticky { position: absolute; width: 200px; padding: 22px 20px; border: var(--stroke); box-shadow: 4px 4px 0 var(--ink); font-size: 26px; line-height: 1.15; }
.mini-sticky u, .mini-sticky s { text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.s-a { left: 4%; top: 0; background: var(--yellow); transform: rotate(-6deg); }
.s-b { right: 4%; top: 70px; background: var(--white); transform: rotate(5deg); }
.s-c { left: 22%; bottom: 0; background: var(--blue-soft); transform: rotate(-2deg); }
@media (max-width: 900px) { .about-hero { grid-template-columns: 1fr; } .pad-stack { height: 300px; max-width: 460px; } }
@media (max-width: 420px) { .mini-sticky { width: 170px; font-size: 22px; } }

.story { padding: 40px 0 60px; }
.story-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: start; }
.letter { position: relative; border: var(--stroke); border-radius: 6px; box-shadow: var(--pop); padding: 40px 40px 32px; transform: rotate(-0.6deg); font-size: 17.5px; line-height: 32px; }
.letter p + p { margin-top: 32px; }
.letter .hello { font-size: 30px; }
.letter .sign { font-size: 28px; color: var(--blue); }
.facts { display: grid; gap: 18px; }
.fact { border: var(--stroke); border-radius: var(--radius-m); box-shadow: var(--pop); padding: 20px 22px; display: grid; gap: 2px; }
.fact b { font-size: 30px; font-weight: 400; line-height: 1.1; }
.fact span { font-weight: 500; }
.fact.y { background: var(--yellow); transform: rotate(1.5deg); }
.fact.b { background: var(--blue); color: #fff; transform: rotate(-1deg); }
.fact.r { background: var(--red); color: #fff; transform: rotate(1deg); }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; } .letter { padding: 32px 22px 26px; } }

.values { padding: 50px 0 40px; }
.values h2 { font-size: clamp(32px, 4vw, 48px); position: relative; display: inline-block; }
.values .under-b { position: absolute; left: 0; bottom: -14px; width: 100%; height: 14px; color: var(--red); }
.val-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.val { background: var(--white); border: var(--stroke); border-radius: var(--radius-m); box-shadow: var(--pop); padding: 24px 22px; }
.val:nth-child(even) { transform: rotate(1deg); }
.val:nth-child(odd) { transform: rotate(-1deg); }
.vi { width: 52px; height: 52px; margin-bottom: 14px; color: var(--ink); }
.val h3 { font-size: 20px; font-weight: 400; }
.val p { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 960px) { .val-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .val-grid { grid-template-columns: 1fr; } }

/* ===== Contact ===== */
.contact-sec { padding: 10px 0 80px; }
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 44px; align-items: start; }
.form-title { font-size: 28px; }
.contact-side { display: grid; gap: 20px; }
.c-card { display: block; text-decoration: none; color: var(--ink); border: var(--stroke); border-radius: var(--radius-m); box-shadow: var(--pop); padding: 22px 24px; transition: transform 0.12s; }
a.c-card:hover { transform: translate(-2px, -2px) rotate(-1deg); }
.c-card h3 { font-size: 22px; font-weight: 400; }
.c-card p { margin-top: 6px; font-weight: 500; }
.c-card.y { background: var(--yellow); }
.c-card.b { background: var(--blue); color: #fff; }
.c-card.ar { font-family: "IBM Plex Sans Arabic", var(--body); transform: rotate(1.5deg); }
.c-card.ar h3 { font-family: "IBM Plex Sans Arabic", var(--body); font-weight: 500; font-size: 22px; }
.side-hand { font-size: 24px; color: var(--blue); transform: rotate(-3deg); }
.side-hand svg { display: inline-block; width: 60px; height: 30px; vertical-align: middle; color: var(--blue); transform: rotate(200deg); margin-left: 6px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ===== Privacy ===== */
.legal-sec { padding: 0 0 80px; }
.legal-doc { max-width: 820px; padding: 40px 44px; }
.legal-doc h2 { font-family: var(--marker); font-weight: 400; font-size: 23px; margin-top: 30px; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc p, .legal-doc ul { margin-top: 10px; color: var(--ink-2); }
.legal-doc ul { padding-left: 22px; }
@media (max-width: 600px) { .legal-doc { padding: 28px 20px; } }

/* ===== 404 ===== */
.nf { padding: 90px 0 110px; }
.nf-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: center; }
.nf-art { position: relative; }
.nf-phone { width: min(360px, 90%); transform: rotate(-10deg); margin: 0 auto; }
.nf .kicker { font-size: 26px; color: var(--red); }
.nf h1 { font-size: clamp(46px, 6.4vw, 84px); line-height: 0.98; margin-top: 4px; }
.nf h1 .blue { color: var(--blue); }
.nf .lede { margin-top: 18px; font-size: 19px; color: var(--ink-2); }
.nf .ctas { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 800px) { .nf-grid { grid-template-columns: 1fr; } .nf { padding-top: 50px; } }
.c-card.ar p { font-family: "IBM Plex Sans Arabic", var(--body); font-size: 17px; font-weight: 500; line-height: 1.7; }