/* Loaded only by index.html. The product pages and shared design tokens are unchanged. */
.showcase-home {
  --h-bg:#f7f8f7; --h-surface:#fff; --h-text:#182c31; --h-muted:#536568;
  --h-line:#d4dddd; --h-nav:#f7f8f7f2; --h-gold:#15565a; --h-gold-bright:#15565a;
  --h-font:"IBM Plex Sans Arabic",system-ui,sans-serif;
  background:var(--h-bg); overflow-x:visible;
}
html[data-theme="dark"] .showcase-home {
  --h-bg:#0e1b20; --h-surface:#17292e; --h-text:#eef4f2; --h-muted:#b7c9c9;
  --h-line:#3b5358; --h-nav:#0e1b20f2; --h-gold:#b1d9d6; --h-gold-bright:#b1d9d6;
}
.showcase-home .page-wrap { max-width:none; padding:0; }
.showcase-home .home-nav { padding:12px max(24px,calc((100% - 1240px)/2)); border-bottom:1px solid var(--h-line); box-shadow:none; }
.showcase-home .nav-brand { color:var(--h-text); }
.showcase-home .nav-brand-name { font-size:24px; }
.showcase-home .nav-brand-en { font-size:10px; letter-spacing:.14em; }
.showcase-home .nav-tools { gap:16px; }
.showcase-home .nav-links { gap:28px; }
.showcase-home .nav-links a { font-size:14px; }
.showcase-home .home-nav button { border-radius:8px; }
.showcase-home .skip-link { color:#fff; background:#15565a; }
.showcase-home :focus-visible { outline:3px solid #408b91; outline-offset:5px; }
.showcase-home main,.showcase-home section[id] { scroll-margin-top:120px; }
.showcase-intro { text-align:center; max-width:900px; margin:auto; padding:64px 24px 36px; }
.showcase-kicker { font-size:15px; font-weight:600; color:var(--h-muted); margin-bottom:16px; }
.showcase-intro h1 { font-family:var(--h-font); font-size:clamp(42px,5.3vw,78px); font-weight:600; line-height:1.32; letter-spacing:-.045em; margin:0; }
.showcase-intro h1 span { color:var(--h-gold); }
.showcase-lead { font-size:20px; line-height:1.8; color:var(--h-muted); margin:22px auto; }
.showcase-home .hero-actions { justify-content:center; align-items:center; gap:24px; margin:20px 0 0; }
.showcase-home .btn { border-radius:999px; padding:11px 26px; min-height:48px; font-size:16px; }
.showcase-text-link { color:var(--h-gold); display:inline-flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; font-weight:600; }
.showcase-text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.showcase-text-link span { display:inline-block; }
html[dir="rtl"] .showcase-text-link span { transform:scaleX(-1); }
.showcase-workbench { max-width:1120px; margin:0 auto; padding:0 24px; }
.showcase-tabs { display:flex; justify-content:center; gap:6px; margin:0 auto 24px; width:fit-content; max-width:100%; border-bottom:1px solid var(--h-line); }
.showcase-tabs button { font:inherit; font-size:14px; background:none; border:0; border-bottom:3px solid transparent; color:var(--h-muted); min-height:48px; padding:10px 20px; cursor:pointer; }
.showcase-tabs button[aria-selected="true"] { color:var(--h-text); border-bottom-color:var(--h-gold); font-weight:700; }
.showcase-panel { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:56px; padding:38px 52px; min-height:390px; background:var(--h-surface); border:1px solid var(--h-line); border-radius:24px; }
.showcase-panel-copy h2 { font-size:clamp(26px,3vw,38px); font-weight:600; line-height:1.5; letter-spacing:-.035em; margin-bottom:12px; }
.showcase-panel-copy>p:not(.showcase-kicker) { color:var(--h-muted); max-width:34ch; line-height:1.8; font-size:16px; }
.showcase-panel-copy .showcase-text-link { margin-top:14px; }
.showcase-example { min-width:0; width:100%; }
.showcase-example figcaption { text-align:center; color:var(--h-muted); font-size:12px; margin-bottom:14px; }
.receipt { border:1px solid var(--h-line); background:var(--h-bg); border-radius:12px; padding:20px 24px; box-shadow:0 16px 30px #12383e0a; }
.receipt-brand { display:flex; align-items:center; gap:12px; font-size:13px; padding-bottom:20px; border-bottom:1px dashed var(--h-line); }
.receipt-brand img { background:#e5eeea; border-radius:50%; padding:3px; }
.receipt dl>div { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.receipt dt { font-size:13px; }
.receipt dd { font-size:20px; font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }
.receipt small { font-size:11px; color:var(--h-muted); }
.receipt dl .receipt-total { border-top:1px solid var(--h-line); padding-top:14px; }
.receipt-total dd { font-size:30px; font-weight:600; }
.receipt>p { font-size:11px; color:var(--h-muted); margin-top:16px; }
.showcase-under-note { text-align:center; color:var(--h-muted); font-size:13px; margin:20px 20px 0; }
.file-example,.math-example { min-height:260px; background:var(--h-bg); border:1px solid var(--h-line); border-radius:12px; text-align:center; padding:28px; }
.file-pages { display:flex; justify-content:center; gap:10px; direction:ltr; }
.file-pages span { display:grid; place-items:center; width:58px; height:74px; border:1px solid var(--h-line); background:var(--h-surface); border-radius:6px; color:var(--h-gold); font-size:20px; }
.file-result { border-top:1px dashed var(--h-line); padding-top:20px; margin-top:20px; }
.file-result bdi { font-size:32px; letter-spacing:.08em; font-weight:600; }
.file-result p,.math-example>p:last-child { color:var(--h-muted); font-size:13px; }
.math-example>p:first-child { font-size:32px; font-weight:400; }
.math-example strong { display:block; font-size:76px; font-weight:500; line-height:1.5; color:var(--h-gold); }
.showcase-home .home-section { padding:72px 24px; border:0; }
.showcase-home .section-inner { max-width:1120px; margin:auto; }
.showcase-home .section-title { font-family:var(--h-font); font-size:clamp(27px,3vw,40px); font-weight:600; line-height:1.5; letter-spacing:-.035em; }
.showcase-home .section-eyebrow { color:var(--h-muted); font-size:14px; letter-spacing:0; }
.showcase-home .section-head { margin-bottom:30px; }
.showcase-home .task-grid { gap:32px; }
.showcase-home .task-card { border:0; border-radius:0; border-top:1px solid var(--h-line); background:transparent; box-shadow:none; padding:24px 0 0; min-height:0; }
.showcase-home .task-card:hover { transform:none; background:none; border-color:var(--h-gold); box-shadow:none; }
.showcase-home .task-icon { display:none; }
.showcase-home .task-tag { position:static; color:var(--h-muted); font-size:12px; }
.showcase-home .task-card h3 { font-size:20px; margin:10px 0; }
.showcase-home .task-card p { font-size:14px; color:var(--h-muted); line-height:1.9; }
.showcase-home .task-open { font-size:14px; margin-top:16px; color:var(--h-gold); }
.showcase-home .daily-section>.section-inner>.task-note { max-width:80ch; margin:24px 0 0; }
.showcase-home .showcase-products { background:var(--h-surface); }
.product-story { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:52px 48px; margin-top:24px; border-radius:20px; background:var(--h-bg); }
.product-story-copy h3 { font-size:clamp(30px,3.7vw,48px); font-weight:500; line-height:1.45; letter-spacing:-.035em; margin-bottom:18px; }
.product-story-copy>p:not(.showcase-kicker) { color:var(--h-muted); }
.product-story-copy .showcase-text-link { margin-top:18px; }
.product-story-copy .product-status { font-size:11px; line-height:1.9; margin-top:22px; max-width:40ch; }
.product-status a { color:inherit; text-underline-offset:4px; }
.product-portrait { min-height:340px; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; border-radius:160px 160px 20px 20px; overflow:hidden; padding:32px 16px; }
.faith-portrait { background:#dfeae4; color:#264c42; }
.faith-disc { width:110px; height:110px; border:1px solid #7ba08d; border-radius:50%; position:absolute; top:42px; }
.faith-disc:after { content:""; position:absolute; width:90px; height:90px; border:1px solid #7ba08d; border-radius:50%; top:9px; left:9px; }
.portrait-word { font-size:72px; font-weight:500; line-height:1.5; position:relative; margin-top:70px; }
.portrait-features { display:flex; justify-content:center; gap:22px; font-size:13px; margin-top:12px; }
.product-portrait figcaption { margin-top:28px; font-size:10px; position:relative; text-align:center; }
.play-portrait { background:#e7ddea; color:#513950; border-radius:20px; }
.play-portrait .portrait-word { margin-top:8px; }
.play-portrait>p { font-size:15px; }
.showcase-home #story { text-align:center; padding-block:88px; }
.showcase-home .story-block { max-width:720px; border:0; padding:0; background:none; }
.showcase-home #home-story { font-size:17px; color:var(--h-muted); line-height:2; }
.showcase-home .home-footer { max-width:1120px; margin:auto; border-top:1px solid var(--h-line); padding:40px 24px; }
.showcase-home .home-footer__top { gap:40px; }
@media(min-width:1000px) { .product-story-play .product-story-copy { grid-column:2;grid-row:1; } .product-story-play .product-portrait { grid-column:1;grid-row:1; } }
@media(max-width:760px) {
  .showcase-home .home-nav { padding:14px 20px; gap:14px; }
  .showcase-home .nav-brand { margin-inline-end:auto; }
  .showcase-home .nav-tools { width:auto; flex:1 1 100%; gap:10px; }
  .showcase-home .nav-tools nav { flex:1 1 100%; border-top:1px solid var(--h-line); padding-top:10px; }
  .showcase-home .nav-links { justify-content:space-between; gap:8px; }
  .showcase-intro { padding:40px 20px 30px; }
  .showcase-intro h1 { font-size:46px; }
  .showcase-lead { font-size:17px; }
  .showcase-home .hero-actions { gap:10px 20px; }
  .showcase-workbench { padding:0 16px; }
  .showcase-tabs { gap:0; width:100%; }
  .showcase-tabs button { padding:10px 7px; font-size:12px; flex:1; }
  .showcase-panel { grid-template-columns:1fr; gap:26px; padding:26px 22px; min-height:0; }
  .showcase-panel-copy h2 { font-size:30px; }
  .showcase-panel-copy>p:not(.showcase-kicker) { font-size:15px; }
  .showcase-panel-copy .showcase-kicker { margin-bottom:10px; }
  .receipt { padding:18px; }
  .receipt dd { font-size:19px; }
  .receipt-total dd { font-size:27px; }
  .receipt dt { font-size:12px; }
  .showcase-home .home-section { padding:52px 20px; }
  .showcase-home .task-grid { grid-template-columns:1fr; gap:24px; }
  .showcase-home .task-card { padding-top:20px; }
  .product-story { grid-template-columns:1fr; gap:30px; padding:28px 22px; margin-top:24px; }
  .product-story-copy h3 { font-size:35px; }
  .product-portrait { min-height:280px; }
  .portrait-word { font-size:64px; }
  .showcase-home #story { padding-block:56px; }
}
@media(max-width:360px) { .showcase-intro h1 { font-size:39px; } .showcase-panel { padding:24px 16px; } .receipt { padding:14px; } .receipt-brand { font-size:11px; } }
.showcase-text-link span { font-family:Arial,sans-serif; }
@media(max-width:760px) {
  .showcase-home .nav-tools { display:contents; }
  .showcase-home .home-nav { gap:10px; }
  .showcase-home .nav-brand-name { font-size:21px; }
  .showcase-home .nav-brand { gap:6px; }
  .showcase-home .nav-tools nav { width:100%; }
  .showcase-intro { padding-top:34px; }
}
@media(max-width:360px) {
  .showcase-home .home-nav { padding-inline:14px; gap:6px; }
  .showcase-home .home-nav button { font-size:12px; padding-inline:9px; }
  .showcase-home .nav-brand-name { font-size:19px; }
}
.showcase-home .nav-brand svg { color:var(--h-text); }
/* Text enlargement must reflow words instead of clipping product names. */
.showcase-intro h1,.portrait-word { max-width:100%; overflow-wrap:anywhere; }
.portrait-word { text-align:center; }
.portrait-features { flex-wrap:wrap; }
.showcase-panel>* ,.product-story>* { min-width:0; }
.showcase-home h2,.showcase-home h3 { overflow-wrap:anywhere; }
.showcase-tabs button { min-width:0; overflow-wrap:anywhere; }
.receipt dl>div { flex-wrap:wrap; }
.receipt dd { max-width:100%; white-space:normal; }
.receipt dd bdi { display:inline-block; }