@font-face {
    font-family:MyWords;
    src:url('assets/fonts/mywords-arabic.ttf') format('truetype');
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
}
@font-face {
    font-family:NotoArabic;
    src:url('assets/fonts/noto-arabic-regular.ttf') format('truetype');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
@font-face {
    font-family:NotoArabic;
    src:url('assets/fonts/noto-arabic-bold.ttf') format('truetype');
    font-weight:700;
    font-style:normal;
    font-display:swap;
}
:root {
    --blue:#174cce;
    --ink:#112750;
    --text:#445571;
    --paper:#fffefa;
    --pale:#edf3ff;
    --line:#dbe3ef;
    --yellow:#ffcf54;
    --radius:22px;
}
* {
    box-sizing:border-box;
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:100px;
}
body {
    margin:0;
    background:var(--paper);
    font-family:NotoArabic,Tahoma,sans-serif;
    color:var(--ink);
    line-height:1.8;
    font-size:17px;
}
body.gallery-open {
    overflow:hidden;
}
a {
    color:inherit;
    text-decoration:none;
}
button,input {
    font:inherit;
}
button,a {
    -webkit-tap-highlight-color:transparent;
}
button {
    cursor:pointer;
}
img {
    display:block;
    max-width:100%;
    height:auto;
}
p,h1,h2,h3,figure,blockquote {
    margin:0;
}
p {
    color:var(--text);
}
h1,h2,h3 {
    font-family:MyWords,NotoArabic,sans-serif;
    line-height:1.45;
    font-weight:700;
}
h1 {
    font-size:clamp(38px,4.2vw,60px);
    letter-spacing:-1.7px;
}
h2 {
    font-size:clamp(29px,3.2vw,43px);
    letter-spacing:-.7px;
}
h3 {
    font-size:23px;
}
.container {
    width:min(1160px,calc(100% - 64px));
    margin-inline:auto;
}
.section {
    padding-block:96px;
}
section[id] {
    scroll-margin-top:10px;
}
[hidden] {
    display:none!important;
}
:focus-visible {
    outline:3px solid #d58b00;
    outline-offset:5px;
    border-radius:5px;
}
a,button {
    touch-action:manipulation;
}
.skip-link {
    position:fixed;
    top:-100px;
    inset-inline-start:20px;
    z-index:100;
    background:var(--ink);
    color:var(--paper);
    padding:12px 20px;
}
.skip-link:focus {
    top:10px;
}
.site-header {
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,254,250,.97);
    border-bottom:1px solid var(--line);
}
.nav {
    min-height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.brand {
    font-family:MyWords,NotoArabic,sans-serif;
    display:flex;
    align-items:center;
    gap:11px;
    font-weight:700;
    font-size:25px;
    line-height:1.35;
}
.brand img {
    border-radius:11px;
    object-fit:contain;
}
.brand small {
    display:block;
    font-size:12px;
    font-weight:400;
    color:var(--text);
    margin-top:4px;
}
.nav-links {
    display:flex;
    align-items:center;
    gap:28px;
    font-size:15px;
}
.nav-links a:hover,.footer a:hover {
    text-decoration:underline;
    text-underline-offset:6px;
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    padding:14px 25px;
    border:1px solid var(--blue);
    border-radius:12px;
    background:var(--blue);
    color:#fffefa;
    font-weight:700;
    line-height:1.6;
    min-height:52px;
    transition:background .2s,transform .2s;
}
.button:hover {
    background:#103ca8;
    transform:translateY(-2px);
}
.button-small {
    padding:10px 19px;
    font-size:15px;
    min-height:44px;
    gap:14px;
}
.button-light {
    background:var(--pale);
    color:var(--blue);
    border-color:var(--line);
}
.button-light:hover {
    background:#dce8ff;
}
.text-link {
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:var(--blue);
    font-weight:700;
}
.text-link:hover {
    text-decoration:underline;
    text-underline-offset:6px;
}
.hero {
    display:grid;
    grid-template-columns:1.12fr 1fr;
    gap:70px;
    align-items:center;
    padding-block:72px 80px;
}
.eyebrow {
    color:var(--blue);
    font-weight:700;
    font-size:15px;
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:18px;
}
.little-star {
    color:#b47700;
    font-size:25px;
}
.hero h1 {
    margin-bottom:22px;
}
.underline {
    position:relative;
    display:inline-block;
    z-index:0;
}
.underline:after {
    content:'';
    position:absolute;
    inset-inline:0;
    bottom:10px;
    height:13px;
    background:var(--yellow);
    z-index:-1;
    border-radius:100% 20% 40% 30%;
    transform:rotate(-2deg);
}
.hero-lead {
    font-size:23px;
    color:var(--ink);
    margin-bottom:15px;
}
.intro {
    font-size:18px;
    max-width:540px;
}
.button-row {
    display:flex;
    align-items:center;
    gap:27px;
    flex-wrap:wrap;
    margin-top:29px;
}
.play-icon {
    display:grid;
    place-items:center;
    background:#e6edff;
    border-radius:50%;
    width:34px;
    height:34px;
    font-size:12px;
}
.hero-note {
    font-size:14px;
    margin-top:19px;
}
.hero-note strong {
    color:var(--blue);
}
.hero-art {
    position:relative;
    padding:10px 20px 30px;
}
.hero-art:before {
    content:'';
    position:absolute;
    width:107%;
    height:82%;
    background:#dee9ff;
    inset-inline-start:-7%;
    top:12%;
    border-radius:42% 58% 58% 42% / 46% 48% 52% 54%;
    transform:rotate(7deg);
}
.hero-picture {
    position:relative;
    background:#fff;
    border:1px solid #d5dff0;
    border-radius:24px;
    overflow:hidden;
    transform:rotate(-3deg);
    box-shadow:0 22px 48px -30px #174cce65;
}
.preview-heading {
    display:flex;
    align-items:center;
    gap:8px;
    padding:15px 18px;
    font-size:13px;
    background:#f7f9fd;
    border-bottom:1px solid var(--line);
}
.status-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#318965;
}
.preview-label {
    margin-inline-start:auto;
    font-size:11px;
    color:var(--text);
}
.hero-picture>video {
    display:block;
    background:#fff;
    width:100%;
    height:352px;
    object-fit:contain;
    object-position:center;
}
.sentence {
    display:flex;
    justify-content:center;
    gap:9px;
    padding:16px;
    background:#f7f9fd;
}
.sentence span {
    padding:5px 17px;
    border-radius:8px;
    background:#e5eeff;
    color:var(--blue);
    font-size:19px;
}
.sentence span:nth-child(2) {
    background:#fff0bd;
    color:#654300;
}
.floating-prompt {
    position:absolute;
    bottom:-42px;
    inset-inline-end:-17px;
    transform:rotate(3deg);
    background:var(--yellow);
    border:2px solid var(--paper);
    border-radius:16px;
    padding:12px 23px;
    font-size:20px;
    box-shadow:0 10px 30px -22px #112750;
}
.floating-prompt>span {
    font-size:37px;
    line-height:.8;
    vertical-align:middle;
}
.floating-prompt small {
    display:block;
    font-size:12px;
    color:#5b460c;
}
.art-spark {
    position:absolute;
    font-size:54px;
    line-height:1;
    z-index:2;
}
.spark-one {
    top:-5px;
    inset-inline-end:-6px;
    color:var(--blue);
    transform:rotate(12deg);
}
.spark-two {
    bottom:67px;
    inset-inline-start:-22px;
    color:#c68400;
}
.principles {
    background:var(--blue);
    color:var(--paper);
}
.principles-inner {
    display:flex;
    justify-content:space-around;
    gap:25px;
    padding-block:19px;
}
.principles p {
    color:inherit;
    display:flex;
    gap:14px;
    align-items:center;
    font-size:16px;
}
.principles p span {
    color:var(--yellow);
    font-size:23px;
}
.preview-section {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:95px;
    align-items:center;
}
.section-copy>p:not(.eyebrow) {
    margin-top:22px;
}
.section-copy>.text-link {
    margin-top:24px;
}
.soft-note {
    padding-inline-start:18px;
    border-inline-start:3px solid var(--yellow);
    font-size:15px;
}
.soft-note strong {
    display:block;
    color:var(--ink);
}
.video-preview {
    background:#f0f4fc;
    border-radius:var(--radius);
    padding:16px;
    border:1px solid var(--line);
}
.media-topline {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
    font-size:14px;
}
.demo-tag {
    background:#fff0bf;
    color:#69500d;
    font-size:11px;
    padding:2px 10px;
    border-radius:5px;
}
.video-preview video {
    display:block;
    background:#fff;
    width:100%;
    height:335px;
    object-fit:contain;
    border-radius:12px;
}
.video-preview figcaption {
    font-size:12px;
    color:var(--text);
    padding-top:12px;
    line-height:1.8;
}
.skills-section {
    background:#f1f5fe;
}
.section-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:50px;
    margin-bottom:40px;
}
.section-heading>p {
    max-width:410px;
    font-size:16px;
}
.skills-list {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:33px;
    margin-top:45px;
}
.skills-list>div {
    border-top:1px solid #c1d1ed;
    padding-top:22px;
}
.skills-list>div>span {
    font-family:Tahoma,sans-serif;
    font-size:14px;
    color:var(--blue);
}
.skills-list h3 {
    font-size:21px;
    margin-block:15px 10px;
}
.skills-list p {
    font-size:15px;
}
.demo-notice {
    display:inline-block;
    font-size:13px;
    color:#655222;
    background:#fff5d9;
    border-radius:7px;
    padding:7px 13px;
    margin-bottom:24px;
}
.filters {
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    margin:2px 0 15px;
}
.filter {
    background:transparent;
    border:1px solid var(--line);
    border-radius:30px;
    padding:9px 17px;
    color:var(--text);
    font-size:14px;
    min-height:44px;
}
.filter[aria-pressed=true] {
    background:var(--blue);
    border-color:var(--blue);
    color:var(--paper);
}
.filter:hover {
    border-color:var(--blue);
}
.activity-count {
    font-size:13px;
    margin:15px 0 25px;
}
.activity-grid {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:44px 26px;
}
.activity {
    grid-column:span 2;
    min-width:0;
}
.activity:nth-child(-n+2) {
    grid-column:span 3;
}
.activity-media {
    background:#f0f4fc;
    border-radius:var(--radius);
    overflow:hidden;
    position:relative;
    border:1px solid var(--line);
}
.image-link {
    display:block;
    position:relative;
    padding:14px;
}
.word-examples {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    min-height:260px;
    align-content:center;
    gap:8px;
    padding:14px 10px;
}
.word-example {
    min-width:0;
    text-align:center;
}
.word-example a {
    display:block;
    border-radius:10px;
}
.word-example img {
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
    object-fit:contain;
    background:#fff;
    border-radius:9px;
}
.word-example figcaption {
    padding-top:10px;
}
.word-example b {
    display:block;
    font-size:21px;
    color:var(--ink);
}
.word-example small {
    display:block;
    font-size:11px;
    color:var(--blue);
}
.word-example a:hover b {
    text-decoration:underline;
    text-underline-offset:4px;
}
.image-link>img {
    height:230px;
    width:100%;
    object-fit:contain;
    border-radius:9px;
    background:#fff;
    transition:transform .25s;
}
.activity:nth-child(-n+2) .image-link>img {
    height:300px;
}
.image-link:hover>img {
    transform:scale(1.025);
}
.image-count {
    position:absolute;
    bottom:23px;
    inset-inline-end:24px;
    background:#112750eb;
    color:#fff;
    padding:3px 11px;
    font-size:12px;
    border-radius:20px;
    pointer-events:none;
}
.image-count b {
    font-weight:400;
}
.thumbnails {
    display:flex;
    gap:7px;
    overflow:auto;
    padding:10px 2px 2px;
    scrollbar-width:thin;
}
.thumbnails a {
    flex:0 0 58px;
    border:1px solid var(--line);
    border-radius:7px;
    padding:3px;
    min-height:44px;
}
.thumbnails a:hover {
    border-color:var(--blue);
}
.thumbnails img {
    width:50px;
    height:40px;
    object-fit:contain;
    background:#fff;
    border-radius:3px;
}
.activity-copy {
    padding-top:17px;
}
.activity-label {
    font-size:12px;
    color:var(--blue);
}
.activity h3 {
    font-size:23px;
    margin-block:6px 11px;
}
.activity-copy>p {
    font-size:15px;
    min-height:81px;
}
.question {
    margin-top:17px;
    padding-top:13px;
    border-top:1px solid var(--line);
}
.question>span {
    font-size:11px;
    color:#73809a;
}
.question p {
    font-size:14px;
    margin-top:4px;
    color:var(--ink);
}
.catalogue-end {
    margin-top:42px;
    padding-top:25px;
    border-top:1px solid var(--line);
    font-size:14px;
}
.catalogue-end a {
    color:var(--blue);
    display:inline-block;
}
.example-section {
    background:#fff4d8;
}
.example-layout {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    align-items:center;
    gap:105px;
}
.example-picture {
    position:relative;
    background:#fffefb;
    border-radius:45% 45% 15% 15%;
    padding:20px 20px 65px;
    max-width:400px;
}
.example-picture video {
    display:block;
    background:#fff;
    height:400px;
    width:100%;
    object-fit:contain;
}
.example-sentence {
    position:absolute;
    bottom:14px;
    inset-inline:20px;
    text-align:center;
    padding:10px;
    border-radius:10px;
    background:#fffdf3;
    font-size:23px;
    border:1px solid #e9d7a4;
}
.example-sentence strong {
    color:var(--blue);
}
.example-layout h2 {
    margin-bottom:18px;
}
.example-steps {
    list-style:none;
    padding:0;
    counter-reset:steps;
    margin:28px 0 0;
}
.example-steps li {
    counter-increment:steps;
    position:relative;
    padding-inline-start:49px;
    margin-block:20px;
}
.example-steps li:before {
    content:counter(steps,decimal-leading-zero);
    position:absolute;
    inset-inline-start:0;
    top:3px;
    color:#8c6500;
    font-size:14px;
    border:1px solid #dfc685;
    width:31px;
    height:31px;
    border-radius:50%;
    display:grid;
    place-items:center;
    line-height:1;
}
.example-steps li>span {
    font-weight:700;
}
.example-steps p {
    font-size:14px;
}
.audience-columns {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
}
.audience-columns article {
    border-top:2px solid var(--line);
    padding-top:30px;
}
.audience-columns article:last-child {
    border-color:var(--yellow);
}
.audience-columns h3 {
    font-size:27px;
    margin-bottom:16px;
}
.audience-columns p {
    max-width:470px;
}
.reviews-section {
    background:#f0f5fd;
}
.reviews-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}
.review {
    display:flex;
    flex-direction:column;
    padding:26px 0;
    border-top:1px solid #c9d8ef;
}
.stars {
    color:#916100;
    letter-spacing:4px;
    font-size:18px;
}
.review blockquote {
    font-size:20px;
    line-height:1.9;
    padding-block:21px 30px;
    flex:1;
}
.review figcaption {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
}
.review figcaption small {
    display:block;
    color:var(--text);
    font-size:11px;
    margin-top:3px;
}
.review figcaption>a {
    margin-inline-start:auto;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    color:var(--blue);
    font-size:23px;
}
.avatar {
    background:#dce8fd;
    width:39px;
    height:39px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--blue);
}
.max-panel {
    background:#143faf;
    color:var(--paper);
    border-radius:30px;
    padding:54px;
    display:grid;
    grid-template-columns:1fr 1.04fr;
    gap:72px;
}
.max-panel p {
    color:#e0e8ff;
}
.max-panel h2 {
    font-size:45px;
    margin-bottom:22px;
}
.max-badge {
    display:inline-flex;
    align-items:center;
    gap:9px;
    border:1px solid #8ca8ef;
    border-radius:8px;
    padding:3px 12px;
    margin-bottom:24px;
}
.max-badge b {
    color:var(--yellow);
    font-family:Tahoma,sans-serif;
    letter-spacing:2px;
    font-size:14px;
}
.max-price {
    font-size:13px;
    border-top:1px solid #5273c8;
    margin-top:25px;
    padding-top:19px;
}
.start-guide ol {
    list-style:none;
    counter-reset:start;
    padding:0;
    margin:4px 0 27px;
}
.start-guide li {
    counter-increment:start;
    position:relative;
    padding-inline-start:49px;
    margin-bottom:23px;
}
.start-guide li:before {
    content:counter(start);
    position:absolute;
    inset-inline-start:0;
    background:#315cc6;
    color:#fff;
    width:31px;
    height:31px;
    border-radius:50%;
    text-align:center;
    line-height:31px;
    font-family:Tahoma,sans-serif;
    font-size:13px;
}
.start-guide li b {
    display:block;
    font-size:17px;
}
.start-guide li span {
    display:block;
    font-size:13px;
    color:#d0dcfc;
    margin-top:5px;
}
.store-buttons {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}
.store-buttons>a {
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--paper);
    color:var(--ink);
    border-radius:10px;
    padding:10px 17px;
    min-height:61px;
    flex:1;
    min-width:150px;
}
.store-buttons>a:hover {
    background:#e5edff;
}
.store-buttons>a>span:first-child {
    font-size:23px;
}
.store-buttons small {
    font-size:10px;
    display:block;
    line-height:1.4;
}
.store-buttons b {
    font-family:Tahoma,sans-serif;
    font-size:16px;
    display:block;
    line-height:1.6;
}
.already-have {
    margin-top:20px;
    font-size:13px;
}
.already-have summary {
    cursor:pointer;
    padding:8px 0;
}
.already-have p {
    margin-top:10px;
}
.faq-section {
    display:grid;
    grid-template-columns:.7fr 1.3fr;
    gap:95px;
    padding-top:10px;
}
.faq-section>div:first-child>p:not(.eyebrow) {
    margin:18px 0;
}
.faq-item {
    border-bottom:1px solid var(--line);
    padding-block:17px;
}
.faq-item:first-child {
    border-top:1px solid var(--line);
}
.faq-item summary {
    cursor:pointer;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    list-style:none;
    min-height:30px;
    font-size:17px;
}
.faq-item summary::-webkit-details-marker {
    display:none;
}
.faq-item summary:after {
    content:'+';
    font-size:23px;
    font-family:Tahoma,sans-serif;
    color:var(--blue);
    flex-shrink:0;
}
.faq-item[open] summary:after {
    content:'−';
}
.faq-item>p {
    font-size:15px;
    padding-top:16px;
    padding-inline-end:20px;
}
.closing {
    background:#eaf1ff;
    text-align:center;
}
.closing-star {
    color:#bd8109;
    font-size:52px;
    line-height:1;
}
.closing h2 {
    font-size:clamp(35px,4.7vw,58px);
    margin-block:10px 20px;
}
.closing p {
    margin-bottom:29px;
}
.footer {
    padding-block:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}
.footer nav {
    display:flex;
    gap:22px;
    font-size:13px;
}
.footer>p {
    font-size:12px;
    direction:ltr;
}
.mobile-start {
    display:none;
}
.messenger-help {
    position:fixed;
    inset-inline-end:24px;
    bottom:24px;
    z-index:18;
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px 18px;
    min-height:60px;
    border:2px solid var(--paper);
    border-radius:18px;
    background:#0866ff;
    color:var(--paper);
    box-shadow:0 6px 20px #11275026;
    transition:background .2s,transform .2s;
}
.messenger-help:hover {
    background:#0054df;
    transform:translateY(-2px);
}
.messenger-help svg {
    flex-shrink:0;
}
.messenger-help strong,.messenger-help small {
    display:block;
    line-height:1.65;
}
.messenger-help strong {
    font-size:15px;
}
.messenger-help small {
    font-size:12px;
}
.gallery-open .messenger-help {
    visibility:hidden;
}
dialog {
    padding:0;
    border:1px solid var(--line);
    border-radius:20px;
    width:min(1000px,calc(100% - 36px));
    max-height:92dvh;
    background:var(--paper);
    color:var(--ink);
}
dialog::backdrop {
    background:#0c1d41d9;
}
.gallery-shell {
    display:flex;
    flex-direction:column;
    max-height:89dvh;
}
.gallery-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 22px;
    border-bottom:1px solid var(--line);
    gap:15px;
}
.gallery-header h2 {
    font-size:20px;
}
.gallery-header p {
    font-size:12px;
}
.icon-button {
    border:1px solid var(--line);
    border-radius:50%;
    width:44px;
    height:44px;
    background:var(--pale);
    color:var(--ink);
    flex-shrink:0;
}
.gallery-image {
    min-height:0;
    background:#f1f4f9;
    padding:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1;
    overflow:auto;
}
.gallery-image img {
    width:100%;
    height:100%;
    max-height:64dvh;
    object-fit:contain;
}
.gallery-controls {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 20px;
    gap:10px;
}
.gallery-caption {
    text-align:center;
    padding:8px 16px;
    font-size:21px;
    color:var(--ink);
    flex-shrink:0;
}
.gallery-controls p {
    font-size:12px;
}
.gallery-controls button:disabled {
    opacity:.45;
    cursor:default;
    transform:none;
}
@media(min-width:1500px) {
    .hero {
        padding-block:95px;
    }
    .hero-picture>video {
        height:400px;
    }
}
@media(max-width:1000px) {
    .container {
        width:calc(100% - 44px);
    }
    .hero {
        gap:35px;
    }
    .hero-art {
        padding-inline:15px;
    }
    .hero-picture>video {
        height:300px;
    }
    .floating-prompt {
        inset-inline-end:0;
        font-size:17px;
        padding:10px 18px;
    }
    .nav-links {
        gap:18px;
        font-size:13px;
    }
    .preview-section,.example-layout {
        gap:50px;
    }
    .skills-list {
        gap:22px;
    }
    .skills-list h3 {
        font-size:19px;
    }
    .max-panel {
        padding:38px;
        gap:40px;
    }
    .max-panel h2 {
        font-size:37px;
    }
    .faq-section {
        gap:50px;
    }
    .activity-grid {
        gap:36px 20px;
    }
    .reviews-grid {
        gap:25px;
    }
    .review blockquote {
        font-size:18px;
    }
}
@media(max-width:760px) {
    html {
        scroll-padding-top:85px;
    }
    .container {
        width:calc(100% - 36px);
    }
    body {
        font-size:16px;
        padding-bottom:76px;
    }
    .section {
        padding-block:62px;
    }
    .nav {
        min-height:75px;
        gap:12px;
    }
    .brand {
        font-size:22px;
        gap:8px;
    }
    .brand img {
        width:37px;
        height:37px;
    }
    .brand small {
        font-size:10px;
    }
    .nav-links {
        display:none;
    }
    .nav>.button {
        font-size:12px;
        padding-inline:12px;
    }
    .hero {
        grid-template-columns:1fr;
        padding-block:43px 44px;
        gap:42px;
    }
    .hero-copy {
        max-width:570px;
    }
    .hero h1 {
        font-size:clamp(38px,8vw,57px);
        letter-spacing:-1px;
    }
    .hero-lead {
        font-size:21px;
    }
    .intro {
        font-size:16px;
    }
    .eyebrow {
        font-size:13px;
    }
    .hero-art {
        width:min(390px,100%);
        margin:auto;
        padding:6px 23px 32px;
    }
    .hero-art:before {
        width:100%;
        inset-inline-start:0;
        transform:none;
    }
    .hero-picture>video {
        height:300px;
    }
    .floating-prompt {
        inset-inline-end:0;
    }
    .spark-one {
        inset-inline-end:7px;
    }
    .spark-two {
        inset-inline-start:0;
        font-size:42px;
    }
    .hero-note {
        font-size:13px;
    }
    .principles-inner {
        flex-wrap:wrap;
        gap:9px 24px;
        justify-content:center;
        padding-block:17px;
    }
    .principles p {
        font-size:12px;
        gap:6px;
    }
    .principles p span {
        font-size:17px;
    }
    .preview-section {
        grid-template-columns:1fr;
        gap:30px;
    }
    .section-copy h2 br {
        display:none;
    }
    .video-preview {
        max-width:500px;
        width:100%;
        margin:auto;
    }
    .video-preview video {
        height:300px;
    }
    .section-heading {
        display:block;
        margin-bottom:30px;
    }
    .section-heading>p {
        margin-top:22px;
        max-width:540px;
        font-size:15px;
    }
    .skills-list {
        grid-template-columns:1fr 1fr;
        gap:30px 20px;
        margin-top:30px;
    }
    .skills-list h3 {
        font-size:20px;
    }
    .skills-list p {
        font-size:14px;
    }
    .filters {
        gap:7px;
    }
    .filter {
        font-size:12px;
        padding:7px 12px;
    }
    .activity-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:36px 19px;
    }
    .activity,.activity:nth-child(-n+2) {
        grid-column:span 1;
    }
    .image-link {
        padding:9px;
    }
    .image-link>img,.activity:nth-child(-n+2) .image-link>img {
        height:195px;
    }
    .word-examples {
        min-height:215px;
    }
    .activity h3 {
        font-size:20px;
    }
    .activity-copy>p {
        font-size:14px;
        min-height:0;
    }
    .image-count {
        inset-inline-end:15px;
        bottom:15px;
    }
    .question p {
        font-size:13px;
    }
    .activity-copy {
        padding-top:12px;
    }
    .example-layout {
        grid-template-columns:1fr;
        gap:35px;
    }
    .example-picture {
        width:min(330px,100%);
        margin:auto;
    }
    .example-picture video {
        height:300px;
    }
    .audience-columns {
        gap:30px;
    }
    .audience-columns h3 {
        font-size:22px;
    }
    .audience-columns p {
        font-size:14px;
    }
    .reviews-grid {
        grid-template-columns:1fr;
        gap:16px;
    }
    .review blockquote {
        padding-bottom:22px;
    }
    .max-panel {
        grid-template-columns:1fr;
        padding:30px 23px;
        gap:32px;
        border-radius:22px;
    }
    .max-panel h2 {
        font-size:36px;
    }
    .max-price {
        margin-top:20px;
    }
    .faq-section {
        grid-template-columns:1fr;
        gap:30px;
        padding-top:0;
    }
    .faq-item summary {
        font-size:16px;
    }
    .footer {
        justify-content:center;
        gap:24px;
    }
    .footer nav {
        gap:17px;
        justify-content:center;
        flex-wrap:wrap;
        width:100%;
    }
    .mobile-start {
        position:fixed;
        bottom:0;
        inset-inline:0;
        z-index:19;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        padding:12px 18px calc(12px + env(safe-area-inset-bottom));
        background:#fffefaf5;
        border-top:1px solid var(--line);
    }
    .mobile-start>span {
        font-size:12px;
    }
    .messenger-help {
        inset-inline-end:14px;
        bottom:calc(84px + env(safe-area-inset-bottom));
        padding:9px 14px;
        min-height:56px;
        border-radius:15px;
    }
    .messenger-help strong {
        font-size:13px;
    }
    .mobile-start b {
        color:var(--blue);
    }
    .mobile-start .button {
        font-size:13px;
        padding-inline:18px;
    }
    .gallery-header {
        padding:13px;
    }
    .gallery-header h2 {
        font-size:17px;
    }
    .gallery-controls {
        padding:11px;
    }
    .gallery-controls .button {
        font-size:12px;
        padding-inline:13px;
    }
    .gallery-controls p {
        display:none;
    }
    .gallery-image {
        padding:8px;
    }
}
@media(max-width:440px) {
    .activity-grid {
        grid-template-columns:1fr;
        gap:34px;
    }
    .image-link>img,.activity:nth-child(-n+2) .image-link>img {
        height:245px;
    }
    .word-examples {
        min-height:265px;
    }
    .activity-copy>p {
        min-height:0;
    }
    .activity h3 {
        font-size:23px;
    }
    .audience-columns {
        grid-template-columns:1fr;
    }
    .skills-list {
        gap:25px 17px;
    }
    .skills-list h3 {
        font-size:18px;
    }
    .hero h1 {
        font-size:39px;
    }
    .button-row {
        gap:19px;
    }
    .button-row>.button {
        padding:12px 19px;
    }
    .button-row .text-link {
        font-size:14px;
    }
    .hero-art {
        width:100%;
    }
    .hero-picture>video {
        height:275px;
    }
    .hero-picture .sentence span {
        font-size:17px;
        padding-inline:13px;
    }
    .store-buttons>a {
        padding-inline:12px;
        min-width:130px;
    }
    .store-buttons b {
        font-size:14px;
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto;
    }
    *,*:before,*:after {
        transition:none!important;
        animation:none!important;
    }
}