/* Habka Book design system  ---------------------------------------------- */
:root{
  --ink:#1b2722; --muted:#5f6b63; --cream:#faf4e8; --card:#ffffff;
  --navy:#0d2b34;   /* Daybreak retired the teal; --indigo / --indigo-2 below are the deep inks */
  --gold:#dd9a2c; --gold-soft:#f3c879; --gold-ink:#3a2708; --gold-deep:#8a4f12;
  /* Daybreak sky (decided 2026-07-27): night at the top, cream where the reading happens */
  --sky-1:#a9c9ee; --sky-2:#c9dcf1; --sky-3:#e6e7ea; --sky-4:#f8efdf;
  --indigo:#1c2a55; --indigo-2:#2f3a60; --star:#c98a1e;
  --line:#ece2cf; --line-2:#e6ddca;
  --shadow-sm:0 8px 22px -16px rgba(13,43,52,.5);
  --shadow:0 22px 48px -26px rgba(13,43,52,.55);
  --radius:18px; --radius-lg:26px;
  --fe-head:'Fraunces',Georgia,serif; --fe-body:'Inter',system-ui,sans-serif;
  --fa-head:'Amiri','Times New Roman',serif; --fa-body:'Tajawal',sans-serif;
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Daybreak: every page opens on a band of sky that settles into cream, so the interior pages
   belong to the same world as the home hero (which paints its own, taller sky over this). */
body{background:linear-gradient(180deg,var(--sky-1) 0,var(--sky-2) 90px,var(--sky-3) 190px,var(--sky-4) 300px,var(--cream) 420px) no-repeat,var(--cream);
  color:var(--ink);font-family:var(--fe-body);line-height:1.62;-webkit-font-smoothing:antialiased}
/* an interior page's first section sits ON that sky, so it must not paint cream over it */
.section:first-of-type{background:transparent}
body.rtl{font-family:var(--fa-body)}
img{max-width:100%}
a{color:inherit}

/* bilingual visibility */
.ar{display:none}
body.rtl .en{display:none}
body.rtl .ar{display:inline}
.en.block{display:block}
body.rtl .ar.block{display:block}
.ar{font-family:var(--fa-body)}
h1 .ar,h2 .ar,h3 .ar,.brand .ar,.ar.head,.display .ar{font-family:var(--fa-head)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.center{text-align:center}

/* typography */
h1{font-family:var(--fe-head);font-weight:600;font-size:clamp(2.3rem,5.4vw,3.8rem);line-height:1.06;letter-spacing:-.015em;color:var(--indigo)}
h2{font-family:var(--fe-head);font-weight:600;font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.12;color:var(--indigo)}
h3{font-family:var(--fe-head);font-weight:600;font-size:1.25rem;color:var(--ink)}
body.rtl h1,body.rtl h2,body.rtl h3{font-family:var(--fa-head)}
.eyebrow{font-family:var(--fe-body);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--gold)}
.page-head .eyebrow,.section-head .eyebrow,.hero .eyebrow{display:block;margin-bottom:10px}
body.rtl h1,body.rtl h2{line-height:1.45}
body.rtl .eyebrow{letter-spacing:0;font-family:var(--fa-body)}
.lead{font-size:1.14rem;color:var(--muted);max-width:660px;margin-inline:auto}

/* buttons */
.btn{display:inline-block;font:inherit;font-weight:600;font-size:1.04rem;padding:14px 30px;border-radius:999px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .18s,background .18s,box-shadow .18s}
.btn-gold{background:var(--gold);color:var(--gold-ink);box-shadow:var(--shadow-sm)}
.btn-gold:hover{transform:translateY(-2px);background:var(--gold-soft);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--indigo)}
/* Secondary CTA that still reads as a button. 'See pricing' sat in .btn-ghost beside the gold
   primary, where a hairline border on cream made it look like decoration rather than a link. */
.btn-outline{background:#fff;border:2px solid var(--indigo);color:var(--indigo);font-weight:700}
.btn-outline:hover{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.btn-ghost:hover{background:#fff;border-color:var(--gold)}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.44);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.55);transition:background .25s,border-color .25s}
/* once it leaves the sky it needs a solid ground, or the blur sits on nothing */
.nav.scrolled{background:rgba(253,246,232,.93);border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:1.62rem;color:var(--indigo);text-decoration:none}
.brand .ar.head{font-size:1.86rem}
.brand svg{width:44px;height:44px;flex:0 0 auto}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{text-decoration:none;color:var(--ink);font-weight:500;font-size:.98rem;opacity:.85;transition:.18s}
.nav-links a:hover{opacity:1;color:var(--indigo)}
.nav-right{display:flex;align-items:center;gap:12px}
.signin{font-weight:600;font-size:.92rem;color:var(--indigo);text-decoration:none;padding:8px 6px;opacity:.85;transition:.18s;white-space:nowrap}
.signin:hover{opacity:1;text-decoration:underline}
.langbtn{font:inherit;font-weight:600;font-size:.92rem;color:var(--indigo);background:#fff;border:1px solid var(--line-2);padding:8px 16px;border-radius:999px;cursor:pointer;transition:.18s}
.langbtn:hover{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--indigo);margin:5px 0;border-radius:2px}

/* hero */
/* ── Daybreak sky: night at the top resolving into cream where the reading happens ── */
.hero{position:relative;overflow:hidden;padding:88px 0 76px;
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 22%,var(--sky-3) 48%,var(--sky-4) 76%,var(--cream) 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(46% 40% at 78% 14%,rgba(255,225,150,.5),rgba(250,244,232,0) 70%)}
.pattern{position:absolute;inset:0;z-index:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 2l8 20 20 8-20 8-8 20-8-20-20-8 20-8z' fill='none' stroke='%231c2a55' stroke-width='1'/%3E%3C/svg%3E")}

/* star field — populated by app.js, only in the sky half */
.stars{position:absolute;inset:0 0 42% 0;z-index:0;pointer-events:none;overflow:hidden}
.stars i,.stars b{position:absolute;animation:twinkle var(--dur,4s) ease-in-out infinite;animation-delay:var(--dl,0s)}
.stars i{display:block;border-radius:50%;background:var(--star);width:var(--sz,3px);height:var(--sz,3px);
  box-shadow:0 0 5px var(--star),0 0 12px rgba(224,150,40,.5);opacity:.45}
.stars b{color:var(--star);font-size:var(--fs,13px);line-height:1;opacity:.55;
  text-shadow:0 0 8px rgba(224,150,40,.75);animation-name:sparkle}
@keyframes twinkle{0%,100%{opacity:.22;transform:scale(.7)}50%{opacity:1;transform:scale(1.3)}}
/* the four-point stars also turn, so they read as glinting rather than just fading */
@keyframes sparkle{
  0%,100%{opacity:.3;transform:scale(.72) rotate(-18deg)}
  50%{opacity:1;transform:scale(1.24) rotate(18deg)}}

/* the crescent, drifting — with a slow halo pulse and a shimmer that crosses its face */
.moon{position:absolute;top:58px;right:7%;z-index:0;pointer-events:none;animation:moonfloat 8s ease-in-out infinite}
.moon svg{position:relative;z-index:1;filter:drop-shadow(0 0 10px rgba(240,180,85,.75))}
.moon::before{content:"";position:absolute;inset:-70%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,222,150,.5),transparent 68%);animation:moonglow 5.4s ease-in-out infinite}
.moon::after{content:"";position:absolute;inset:-24%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,240,205,.6),transparent 60%);
  animation:moonglow 5.4s ease-in-out infinite reverse;opacity:.5}
@keyframes moonfloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes moonglow{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.9;transform:scale(1.12)}}

/* ── the comet ── a bright head dragging a tapered streak along its own flight path.
   The tail is ROTATED to the travel vector (--ang, set in app.js from dx/dy): a horizontal
   streak under a diagonal flight is what made the old one look pasted on. Gold, not white —
   a white streak vanishes against a pale morning sky. */
.shooter{position:absolute;z-index:0;pointer-events:none;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle,#fff8e8 0 30%,#f0b23d 70%,rgba(240,178,61,0) 100%);
  box-shadow:0 0 12px 4px rgba(240,178,61,.8),0 0 26px 10px rgba(224,150,40,.35);opacity:0;
  animation:shoot var(--sdur,11s) cubic-bezier(.25,.6,.35,1) infinite;animation-delay:var(--sdl,3s)}
.shooter::after{content:"";position:absolute;right:2px;top:50%;width:var(--tail,150px);height:3px;
  transform-origin:right center;transform:translateY(-50%) rotate(var(--ang,0deg));
  border-radius:0 3px 3px 0;
  background:linear-gradient(270deg,rgba(255,244,222,.95),rgba(240,178,61,.7) 18%,rgba(224,150,40,.3) 55%,transparent);
  filter:blur(.4px)}
/* a second, fainter and longer streak gives the tail its wispy edge */
.shooter::before{content:"";position:absolute;right:2px;top:50%;width:calc(var(--tail,150px)*1.55);height:8px;
  transform-origin:right center;transform:translateY(-50%) rotate(var(--ang,0deg));
  border-radius:0 8px 8px 0;opacity:.4;filter:blur(3px);
  background:linear-gradient(270deg,rgba(255,225,170,.75),rgba(224,150,40,.18) 50%,transparent)}
@keyframes shoot{
  0%,68%{opacity:0;transform:translate3d(0,0,0) scale(.5)}
  71%{opacity:1;transform:translate3d(calc(var(--dx,-620px)*.06),calc(var(--dy,300px)*.06),0) scale(1)}
  88%{opacity:.95}
  96%,100%{opacity:0;transform:translate3d(var(--dx,-620px),var(--dy,300px),0) scale(.55)}}

/* Phone: one comet, kept short and high so it never crosses the headline. The shorter path keeps
   almost the same angle (~162deg), so the tail stays aligned without recomputing --ang. */
@media (max-width:760px){
  .shooter.extra{display:none}
  .shooter{top:2%!important;left:82%!important;--dx:-150px;--dy:48px;--tail:72px}
}
@media (prefers-reduced-motion: reduce){
  .stars i,.stars b,.moon,.moon::before,.moon::after{animation:none}
  .stars i,.stars b{opacity:.7}
  .shooter{display:none}
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{margin-top:14px;color:var(--indigo)}
.hero .sub{font-size:clamp(1.08rem,2.2vw,1.32rem);color:var(--indigo-2);opacity:.86;max-width:560px;margin-top:18px}
.hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.hero-note{margin-top:16px;font-size:.92rem;color:var(--indigo-2);opacity:.78}

/* book spread mock */
.spread{position:relative;background:linear-gradient(150deg,#fffdf7,#f6ead2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);padding:26px;display:grid;grid-template-columns:1fr 1fr;gap:6px;transform:rotate(-1.2deg)}
.spread::after{content:"";position:absolute;inset-block:24px;inset-inline-start:50%;width:2px;background:rgba(15,61,62,.12)}
.spread-page{padding:16px;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end}
.spread-art{flex:1;border-radius:12px;background:radial-gradient(circle at 50% 38%,#fceec8,#f3d79a);position:relative;margin-bottom:12px;overflow:hidden}
.spread-art svg{position:absolute;inset:0;margin:auto}
.spread-text{font-family:var(--fe-head);font-size:1rem;color:var(--indigo);line-height:1.4}
body.rtl .spread-text{font-family:var(--fa-head)}
/* the lantern glow: the first spread art breathes a soft golden light */
.spread-page:first-child .spread-art::before{content:"";position:absolute;inset:-30%;border-radius:50%;
  background:radial-gradient(circle,rgba(243,178,69,.42),transparent 62%);animation:lanternGlow 3.6s ease-in-out infinite}
@keyframes lanternGlow{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:.85;transform:scale(1.06)}}
/* page-turn shimmer when the hero toggle switches the example lines */
.spread-text.flip{animation:pageFlip .5s ease}
@keyframes pageFlip{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .spread-page:first-child .spread-art::before{animation:none;opacity:.5}
  .spread-text.flip{animation:none}
}
.hero-toggle{display:inline-flex;gap:6px;background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:5px;margin-bottom:18px;flex-wrap:wrap}
.hero-toggle button{font:inherit;font-size:.86rem;font-weight:600;border:0;background:transparent;color:var(--muted);padding:7px 14px;border-radius:999px;cursor:pointer;transition:.18s}
.hero-toggle button.active{background:var(--indigo);color:#fff}

/* sections */
.section{padding:74px 0}
.section.alt{background:#fff;border-block:1px solid var(--line)}
.section-head{max-width:680px;margin:0 auto 44px;text-align:center}
.section-head .lead{margin-top:14px}
/* balanced line breaks: no orphaned last words in centered headings/leads */
.section-head h2,.page-head h2,.section-head .lead,.page-head .lead{text-wrap:balance}

/* steps */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);transition:.2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--indigo);color:#fff;font-weight:600;font-family:var(--fe-body);margin-bottom:14px}
.card h3{margin-bottom:6px}
.card p{color:var(--muted)}

/* style swatches */
.styles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.styles-grid.six{grid-template-columns:repeat(3,1fr)}
.style-card{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);transition:.2s}
.style-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
a.style-card{display:block;text-decoration:none;color:inherit;cursor:pointer}
img.style-swatch{width:100%;aspect-ratio:1;height:auto;object-fit:cover;display:block}
.style-card .lbl{padding:12px 14px;font-weight:600;color:var(--ink);font-size:.98rem}
.sw-water{background:linear-gradient(135deg,#cfe8e3,#f4d7a8 70%)}
.sw-classic{background:linear-gradient(135deg,#f0e2c4,#d8b27a)}
.sw-cartoon{background:linear-gradient(135deg,#ffd9a0,#ff9d76)}
.sw-3d{background:linear-gradient(135deg,#bcd9ff,#9aa7ff)}
.sw-paper{background:linear-gradient(135deg,#e8d6f0,#f6b9c6)}
.sw-night{background:linear-gradient(135deg,#13314a,#2c6e8f)}

/* trust / features */
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:880px;margin:0 auto}
.trust-item{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px}
.tick{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#e8f2ec;color:var(--indigo-2);display:flex;align-items:center;justify-content:center;font-weight:700;margin-top:2px}
.trust-item p{color:var(--ink);font-weight:500}
.trust-item small{display:block;color:var(--muted);font-weight:400;margin-top:3px}

/* pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.price-card.popular{border-color:var(--gold);box-shadow:var(--shadow)}
.badge{position:absolute;inset-block-start:-13px;inset-inline-start:50%;transform:translateX(-50%);background:var(--gold);color:var(--gold-ink);font-weight:600;font-size:.78rem;padding:5px 14px;border-radius:999px;white-space:nowrap}
body.rtl .badge{transform:translateX(50%)}
.price-name{font-family:var(--fe-head);font-size:1.3rem;color:var(--indigo)}
body.rtl .price-name{font-family:var(--fa-head)}
.price-amt{font-size:2.4rem;font-weight:600;color:var(--ink);margin:10px 0 2px}
.price-amt span{font-size:1rem;color:var(--muted);font-weight:400}
.price-list{list-style:none;margin:18px 0 26px;display:flex;flex-direction:column;gap:10px}
.price-list li{display:flex;gap:10px;color:var(--muted)}
.price-list li::before{content:"✓";color:var(--indigo-2);font-weight:700}
.price-card .btn{margin-top:auto}

/* forms */
.form-wrap{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:38px;box-shadow:var(--shadow-sm)}
.form-step{margin-bottom:30px}
.form-step h3{margin-bottom:4px}
.form-step .hint{color:var(--muted);font-size:.92rem;margin-bottom:14px}
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:.95rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;padding:13px 15px;border:1px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink)}
body.rtl .field input,body.rtl .field select,body.rtl .field textarea{font-family:var(--fa-body)}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold-soft);border-color:var(--gold)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;cursor:pointer;border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:10px 18px;font-weight:500;font-size:.95rem;color:var(--ink);transition:.16s;user-select:none}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip:hover{border-color:var(--gold)}
.chip:has(input:checked){background:var(--indigo);color:#fff;border-color:var(--indigo)}
.chip.gold:has(input:checked){background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.submit-row{margin-top:8px}
.form-note{font-size:.85rem;color:var(--muted);margin-top:10px;text-align:center}
.form-success{display:none;background:#e8f2ec;border:1px solid #cfe7d6;color:var(--indigo);border-radius:16px;padding:26px;font-weight:600;text-align:center;font-size:1.05rem}

/* safety */
.safety-list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.safety-item{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.safety-item .ic{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:#eef5f0;display:flex;align-items:center;justify-content:center;color:var(--indigo-2);font-size:1.2rem}
.safety-item h3{font-size:1.1rem;margin-bottom:4px}
.safety-item p{color:var(--muted)}

/* cta band */
.cta-band{background:var(--indigo);border-radius:var(--radius-lg);padding:52px;text-align:center;color:#f4ecdd;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 2l8 20 20 8-20 8-8 20-8-20-20-8 20-8z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E")}
.cta-band h2{color:#fff;position:relative}
.cta-band p{color:#d7e5dd;max-width:560px;margin:14px auto 26px;position:relative}
.cta-band .btn{position:relative}

/* footer */
.footer{padding:48px 0;border-top:1px solid var(--line);color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.footer a{text-decoration:none;opacity:.85}
.footer a:hover{opacity:1;color:var(--indigo)}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}

/* reveal animation */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* responsive */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .spread{max-width:440px;margin:0 auto}
  .grid3{grid-template-columns:1fr}
  .styles-grid{grid-template-columns:1fr 1fr}
  .pricing-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .nav-links{position:fixed;inset:70px 0 auto 0;background:var(--cream);flex-direction:column;align-items:flex-start;
    gap:0;padding:8px 24px 18px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none}
  .nav-links.open{display:flex}
  .nav-links a{width:100%;padding:12px 0;border-bottom:1px solid var(--line)}
  .menu-toggle{display:block}
  .section{padding:54px 0}
  .trust-grid{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .cta-band,.form-wrap{padding:30px}
}
@media(max-width:520px){
  .styles-grid{grid-template-columns:1fr 1fr}
  .footer-inner{flex-direction:column;text-align:center}
}

/* ---- expanded components (multi-page) ---- */
/* footer columns */
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.footer-brand .bd{font-size:.92rem;margin-top:8px;max-width:280px}
.footer-col h4{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--indigo);margin-bottom:12px}
body.rtl .footer-col h4{letter-spacing:0;font-family:var(--fa-body)}
.footer-col a{display:block;padding:5px 0;font-size:.95rem;text-decoration:none}
.socials{display:flex;gap:10px;margin-top:16px}
.socials a{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--indigo);transition:.18s}
.socials a:hover{background:var(--indigo);color:#fff;border-color:var(--indigo)}
.footer-bottom{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.88rem}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;text-align:start}}

/* faq accordion */
.faq{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.faq-q{width:100%;text-align:start;font:inherit;font-weight:600;font-size:1.05rem;color:var(--ink);background:none;border:0;padding:18px 22px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
body.rtl .faq-q{font-family:var(--fa-body)}
.faq-q .chev{flex:0 0 auto;transition:transform .2s;color:var(--gold);font-size:.9rem}
.faq-item.open .faq-q .chev{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;color:var(--muted)}
.faq-item.open .faq-a{max-height:420px}
.faq-a .inner{padding:0 22px 18px}

/* ideas gallery */
.idea-top{height:84px;border-radius:12px;margin-bottom:16px}
.idea-card .btn{margin-top:16px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start;max-width:960px;margin:0 auto}
.contact-info{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-sm)}
.contact-info .row{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.contact-info .ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:#eef5f0;display:flex;align-items:center;justify-content:center;color:var(--indigo-2)}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}

/* legal prose */
.legal{max-width:780px;margin:0 auto}
.legal h3{margin:28px 0 8px;font-size:1.2rem;color:var(--indigo)}
.legal p,.legal li{color:var(--muted);margin-bottom:10px}
.legal ul{padding-inline-start:20px;margin-bottom:10px}
.legal .updated{color:var(--muted);font-size:.9rem;margin-bottom:18px}
.legal .note{background:#fff7e6;border:1px solid #f0dcae;border-radius:12px;padding:14px 16px;font-size:.92rem;color:#6b5a2e;margin-bottom:24px}

/* simple page header reuse */
.page-head{max-width:720px;margin:0 auto 40px;text-align:center}
.page-head .lead{margin-top:14px}

/* art-style gallery (styles.html) */
.stylegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
@media(max-width:760px){.stylegrid{grid-template-columns:1fr}}
.stylecard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:.22s;display:flex;flex-direction:column}
.stylecard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.stylecard img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#f2ead9}
.sc-body{padding:22px 24px 26px}
.sc-body h3{margin-bottom:6px}
.sc-body p{color:var(--muted);margin-bottom:16px}

/* local-currency approximation shown beside the charged USD price (see HK.price in app.js) */
.ccy-approx{font-size:.62em;font-weight:600;color:var(--muted);white-space:nowrap;letter-spacing:0}
.price-amt .ccy-approx{display:block;margin-top:4px;font-size:.42em}

/* E2: the hero chooser shows a REAL composed sample page (bubbles included), large enough to read */
.sample-live{display:block;max-width:500px;margin-inline:auto}
.sample-live img{width:100%;display:block;border-radius:14px;border:1px solid var(--line);box-shadow:0 26px 50px -20px rgba(28,42,85,.45)}
.sample-live .sample-src{margin-top:10px;font-size:.85rem;color:var(--muted);text-align:center}