/* ==========================================================================
   Usama Studio, shared styles
   Loaded by every page on the site. The product files (demo, guide) do not
   use this: they are standalone so they keep working offline after download.
   ========================================================================== */

:root{
  --paper:#F7F4EE; --card:#FFFFFF; --sur:#FBF9F5; --line:#E7E2D8; --line2:#F1EDE4;
  --ink:#191C1A; --muted:#6E7570; --dim:#9AA09A;
  --green:#1F4C39; --green-soft:#E9F1EC; --green-ink:#FFFFFF;
  --amber:#8A5F14; --amber-soft:#FBF2DF;
  --coral:#A8433D; --coral-soft:#FAEBEA;
  --plum:#5A4258; --plum-soft:#F2ECF0;
  --serif:"SourceSerif",Georgia,"Times New Roman",serif;
  --ui:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --sh:0 1px 2px rgba(25,28,26,.04),0 6px 20px rgba(25,28,26,.05);
  --sh-lg:0 2px 6px rgba(25,28,26,.05),0 18px 50px rgba(25,28,26,.09);
  --r:18px; --rs:12px;
}
html[data-theme="dark"]{
  --paper:#12140F; --card:#1A1D18; --sur:#20241E; --line:#2C312A; --line2:#242820;
  --ink:#EDEFE9; --muted:#9AA396; --dim:#6C7468;
  --green:#7FC9A3; --green-soft:#1B2A22; --green-ink:#12140F;
  --amber:#D8AC55; --amber-soft:#2A2314;
  --coral:#E08379; --coral-soft:#2C1A18;
  --plum:#C9A9C0; --plum-soft:#2A2129;
  --sh:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.22);
  --sh-lg:0 2px 6px rgba(0,0,0,.3),0 18px 50px rgba(0,0,0,.4);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ui);
  font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word;
  padding-bottom:env(safe-area-inset-bottom);transition:background .3s,color .3s;
  display:flex;flex-direction:column;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit;border:none;background:none}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:8px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.wrap{max-width:1060px;margin:0 auto;padding:0 20px;width:100%}
@media(min-width:900px){.wrap{padding:0 28px}}
main{flex:1 0 auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:99;background:var(--card);border:1px solid var(--green);
  border-radius:10px;padding:9px 15px;font-weight:800}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line2)}
.top .wrap{display:flex;align-items:center;gap:14px;min-height:66px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.word{font-family:var(--serif);font-size:1.42rem;font-weight:600;letter-spacing:-.015em;
  text-decoration:none;white-space:nowrap;line-height:1;margin-right:auto}
.word em{font-style:italic;color:var(--green)}
.nav{display:flex;gap:4px;order:3;width:100%;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
@media(min-width:700px){.nav{order:0;width:auto;gap:6px;overflow:visible}}
.nav a{font-size:.86rem;font-weight:700;color:var(--muted);text-decoration:none;
  padding:7px 12px;border-radius:99px;white-space:nowrap;transition:.16s}
.nav a:hover{color:var(--green);background:var(--card)}
.nav a[aria-current="page"]{color:var(--green);background:var(--green-soft)}
.ib{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);display:grid;place-items:center;box-shadow:var(--sh);
  transition:transform .13s,border-color .2s;flex-shrink:0}
.ib:active{transform:scale(.93)}
.ib:hover{border-color:var(--green)}
.ib svg{width:17px;height:17px;stroke:var(--muted);stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- type ---------- */
h1{font-family:var(--serif);font-weight:600;letter-spacing:-.022em;line-height:1.05;
  font-size:clamp(2.2rem,6.2vw,3.5rem);margin:.3em 0 .3em;min-width:0}
h1 em{font-style:italic;color:var(--green)}
h2{font-family:var(--serif);font-weight:600;letter-spacing:-.018em;line-height:1.12;
  font-size:clamp(1.55rem,4.2vw,2.2rem);margin:0 0 10px;min-width:0}
h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;font-size:1.18rem;margin:0 0 5px}
.eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--green)}
.lede{font-size:1.08rem;color:var(--muted);max-width:48ch;margin:0}
.intro{font-size:1.02rem;color:var(--muted);max-width:58ch;margin:0 0 26px}
.prose{max-width:60ch}
/* When .prose sits on the same element as .wrap, keep the page gutter and
   constrain the children instead, so text stays flush with the headings. */
.wrap.prose{max-width:1060px}
.wrap.prose > *{max-width:60ch}
.prose p{font-size:1.02rem;color:var(--muted);margin:0 0 15px}
.prose p b{color:var(--ink);font-weight:800}
.band{padding:50px 0}
@media(min-width:900px){.band{padding:66px 0}}
.band.alt{background:var(--sur);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.page-head{padding:44px 0 8px}
@media(min-width:900px){.page-head{padding:64px 0 10px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;
  padding:12px 20px;font-size:.92rem;font-weight:800;text-decoration:none;
  transition:transform .13s,opacity .16s,border-color .16s,color .16s}
.btn:active{transform:scale(.97)}
.btn.p{background:var(--green);color:var(--green-ink);box-shadow:var(--sh)}
.btn.p:hover{opacity:.9}
.btn.s{border:1px solid var(--line);background:var(--card);box-shadow:var(--sh)}
.btn.s:hover{border-color:var(--green);color:var(--green)}
.btn.off{opacity:.5;cursor:not-allowed;pointer-events:none}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.under{margin-top:12px;font-size:.82rem;color:var(--dim)}

/* ---------- lists ---------- */
.plain{margin:0;padding:0;list-style:none;max-width:60ch}
.plain li{position:relative;padding-left:26px;margin-bottom:10px;font-size:.98rem}
.plain li:before{content:"";position:absolute;left:8px;top:.68em;width:5px;height:5px;
  border-radius:99px;background:var(--green)}
.plain li b{font-weight:800}

/* ---------- feature cards ---------- */
.feat{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.f{background:var(--card);border:1px solid var(--line);border-radius:var(--rs);
  padding:20px;box-shadow:var(--sh)}
.f .k{font-family:var(--serif);font-size:.9rem;font-weight:600;color:var(--green);
  letter-spacing:.02em;display:block;margin-bottom:8px}
.f p{margin:0;font-size:.9rem;color:var(--muted);line-height:1.55}

/* ---------- app miniature ---------- */
.shot{background:var(--sur);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;box-shadow:var(--sh-lg)}
.mb{background:var(--card);border:1px solid var(--line);border-radius:var(--rs);
  padding:12px 13px;margin-bottom:9px}
.mb:last-child{margin-bottom:0}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mhead b{font-family:var(--serif);font-size:1rem;font-weight:600}
.mhead b em{font-style:italic;color:var(--green)}
.mdots{display:flex;gap:5px}
.mdots i{width:20px;height:20px;border-radius:7px;border:1px solid var(--line);
  background:var(--sur);display:grid;place-items:center;font-size:.55rem;font-style:normal;
  font-weight:800;color:var(--dim)}
.mtabs{display:flex;gap:3px;padding:3px;background:var(--sur);border:1px solid var(--line);border-radius:10px}
.mtab{flex:1;padding:6px 3px;border-radius:7px;font-size:.72rem;font-weight:800;
  color:var(--muted);text-align:center}
.mtab.on{background:var(--green);color:var(--green-ink)}
.mlab{font-size:.67rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.mnum{font-family:var(--serif);font-size:2.1rem;font-weight:600;letter-spacing:-.03em;
  line-height:1.05;margin:2px 0}
.msay{font-size:.77rem;color:var(--muted)}
.mpb{height:7px;border-radius:99px;background:var(--line2);position:relative;margin:10px 0 5px;overflow:hidden}
.mpb u{position:absolute;left:0;top:0;bottom:0;width:58%;background:var(--green);border-radius:99px}
.mpb s{position:absolute;top:-3px;bottom:-3px;left:71%;width:2px;background:var(--ink);opacity:.5}
.mrow{display:flex;justify-content:space-between;font-size:.68rem;font-weight:700;color:var(--dim)}
.mbank{display:flex;align-items:center;justify-content:space-between;gap:9px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line2)}
.mbank b{font-family:var(--serif);font-size:1rem;font-weight:600;display:block;line-height:1.1}
.mbank small{font-size:.66rem;color:var(--dim);display:block}
.mchip{flex-shrink:0;font-size:.7rem;font-weight:800;color:var(--green);
  border:1px solid var(--green);border-radius:99px;padding:4px 11px}

/* ---------- Can I? teaser ---------- */
.try{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--sh);max-width:520px}
.try h3{font-size:1.3rem;margin-bottom:3px}
.try .sub{margin:0 0 16px;font-size:.88rem;color:var(--muted)}
.tryin{display:flex;gap:8px;flex-wrap:wrap}
.tryin label{position:relative;flex:1 1 150px;min-width:0}
.tryin .cur{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  font-family:var(--serif);font-size:1.05rem;color:var(--dim);pointer-events:none}
.tryin input{width:100%;padding:12px 13px 12px 30px;border-radius:11px;border:1px solid var(--line);
  background:var(--sur);font-family:var(--serif);font-size:1.1rem;font-weight:600}
.tryin input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.tryin button{flex:0 0 auto;background:var(--green);color:var(--green-ink);
  border-radius:11px;padding:12px 20px;font-size:.9rem;font-weight:800}
.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.quick button{border:1px solid var(--line);border-radius:99px;padding:5px 13px;
  font-size:.78rem;font-weight:700;color:var(--muted);background:var(--sur)}
.quick button:hover{border-color:var(--green);color:var(--green)}
.verdict{margin-top:16px;border-radius:var(--rs);padding:14px 16px;border:1px solid transparent;display:none}
.verdict.show{display:block}
.verdict b{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:600;margin-bottom:3px}
.verdict p{margin:0;font-size:.88rem;line-height:1.5}
.verdict.g{background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 22%,transparent)}
.verdict.g b{color:var(--green)}
.verdict.a{background:var(--amber-soft);border-color:color-mix(in srgb,var(--amber) 26%,transparent)}
.verdict.a b{color:var(--amber)}
.verdict.c{background:var(--coral-soft);border-color:color-mix(in srgb,var(--coral) 26%,transparent)}
.verdict.c b{color:var(--coral)}

/* ---------- tool card ---------- */
.tools{display:grid;gap:20px}
.tool{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-lg);display:grid}
@media(min-width:860px){.tool{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:stretch}}
.tool .visual{background:var(--sur);border-bottom:1px solid var(--line2);padding:20px}
@media(min-width:860px){.tool .visual{border-bottom:none;border-right:1px solid var(--line2);
  display:flex;align-items:center}}
.tool .visual > *{width:100%}
.tool .body{padding:24px}
@media(min-width:900px){.tool .body{padding:30px}}
.tool .tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--green);background:var(--green-soft);
  border-radius:99px;padding:4px 11px;margin-bottom:12px}
.tool h2{font-size:1.75rem;margin-bottom:8px}
.tool .desc{font-size:.98rem;color:var(--muted);margin:0 0 18px;line-height:1.6}
.tool .meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.tool .meta span{font-size:.74rem;font-weight:700;color:var(--muted);background:var(--sur);
  border:1px solid var(--line);border-radius:99px;padding:5px 11px}
.tool .price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-top:18px;border-top:1px solid var(--line2)}
.tool .amt{font-family:var(--serif);font-size:2.3rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.tool .pnote{font-size:.8rem;color:var(--dim)}
.tool .pnote s{opacity:.85}
.tool .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.tool .acts .btn{flex:1 1 150px}
.tool .after{margin-top:12px;font-size:.8rem;color:var(--dim)}
.tool .after a{color:var(--green);font-weight:700}
.tool.soon .visual{opacity:.72}
.tool .tag.soon{color:var(--plum);background:var(--plum-soft)}
.tool .status{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-top:18px;border-top:1px solid var(--line2)}
.tool .status b{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--muted)}
.tool .status span{font-size:.8rem;color:var(--dim)}

/* ---------- contact ---------- */
.mail{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:13px 18px;font-weight:800;text-decoration:none;box-shadow:var(--sh);
  font-size:clamp(.82rem,3.4vw,1rem);max-width:100%;overflow-wrap:anywhere;transition:.16s}
.mail:hover{border-color:var(--green);color:var(--green)}

/* ---------- footer ---------- */
footer{flex-shrink:0;padding:26px 0 40px;font-size:.84rem;color:var(--dim)}
footer .wrap{text-align:center}
footer p{margin:0}

/* ---------- images ---------- */
.figure{margin:0;background:var(--sur);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.figure img,.figure svg{display:block;width:100%;height:100%;object-fit:cover}
.figure.portrait{aspect-ratio:4/5;width:100%;max-width:min(100%,320px);
  margin:0 auto;box-shadow:var(--sh-lg)}
.figure.wide{aspect-ratio:16/7;width:100%;margin:0 0 30px;box-shadow:var(--sh-lg)}
.figure.side{aspect-ratio:4/3;width:100%;margin:0;box-shadow:var(--sh-lg)}

/* ---------- two column page body ----------
   Flex with a basis again, so it sits side by side when there is room and
   stacks when there is not. No media query to keep in sync. */
.split{display:flex;flex-wrap:wrap;gap:34px 48px;align-items:flex-start}
.split > .col-art{flex:1 1 330px;min-width:0;order:2}
.split > .col-text{flex:1 1 380px;min-width:0;order:1}
@media(min-width:900px){.split > .col-art{position:sticky;top:92px}}

/* ---------- homepage hero ----------
   Flex with a basis, not a media query. The two halves sit side by side
   whenever there is room for both and stack when there is not, so this
   cannot collapse even if part of the stylesheet fails to load. */
.hgrid{display:flex;flex-wrap:wrap;gap:30px 50px;align-items:center}
.hgrid > *{flex:1 1 330px;min-width:0}
.hgrid > .portrait{flex:0 1 380px}

/* ---------- galleries ----------
   auto-fit does the reflowing, again with no media query involved. */
.gal{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.gal .figure{aspect-ratio:4/3}
.gal figcaption{font-size:.82rem;color:var(--muted);margin-top:9px;font-weight:700}
.gal .item{min-width:0}

/* ---------- centred section header ----------
   Add class="wrap centred" to a band to centre its heading, its intro line
   and any buttons under it. Body copy inside stays left aligned. */
.centred{text-align:center}
.centred > *,.wrap.centred > *{margin-left:auto;margin-right:auto}
.centred .intro{max-width:54ch}
.centred .cta{justify-content:center}
.centred .feat,.centred .gal{text-align:left}

/* ---------- faq ---------- */
.faq{max-width:64ch}
.qa{border-bottom:1px solid var(--line2)}
.qa summary{list-style:none;cursor:pointer;padding:15px 34px 15px 0;position:relative;
  font-weight:800;font-size:.97rem;line-height:1.45}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--green)}
.qa summary:after{content:"";position:absolute;right:8px;top:21px;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s}
.qa[open] summary:after{transform:rotate(-135deg)}
.qa[open] summary{color:var(--green)}
.qa .a{padding:0 0 16px;color:var(--muted);font-size:.94rem;line-height:1.6}
.qa .a p{margin:0 0 10px}
.qa .a p:last-child{margin:0}

/* ---------- worksheets tool miniature ----------
   A small, faithful copy of the real interface: dark settings panel on the
   left, the printable sheet on the right. Colours are fixed rather than
   themed, because it is standing in for a screenshot of the tool. */
.ws{display:flex;border-radius:var(--rs);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--sh);background:#E7E9ED;font-size:11px;line-height:1.3}
.ws .panel{flex:0 0 40%;background:#232830;color:#EDEFE9;padding:11px 10px;min-width:0}
.ws .brand{display:flex;align-items:center;gap:7px;margin-bottom:11px}
.ws .brand i{width:20px;height:20px;border-radius:6px;background:#57CFA2;color:#12140F;
  font-style:normal;font-weight:800;font-size:11px;display:grid;place-items:center;flex-shrink:0}
.ws .brand b{font-size:10.5px;font-weight:800;display:block;line-height:1.2}
.ws .brand span{font-size:8.5px;color:#9AA396;display:block}
.ws .lab{font-size:8px;font-weight:800;letter-spacing:.05em;color:#8C93A0;
  text-transform:uppercase;margin:9px 0 4px}
.ws .chips{display:flex;gap:5px}
.ws .chips u{flex:1;text-decoration:none;text-align:center;padding:5px 2px;border-radius:6px;
  background:#2E343E;font-size:9px;font-weight:700;color:#C7CCD4}
.ws .chips u.on{background:#57CFA2;color:#12140F}
.ws .field{background:#2E343E;border-radius:6px;padding:5px 7px;font-size:9px;
  color:#C7CCD4;margin-bottom:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ws .go{margin-top:10px;background:#57CFA2;color:#12140F;border-radius:7px;
  padding:6px;text-align:center;font-size:9.5px;font-weight:800}
.ws .sheet{flex:1;min-width:0;padding:10px;display:flex;align-items:flex-start;justify-content:center}
.ws .page{width:100%;background:#fff;border-radius:4px;padding:10px 9px;
  box-shadow:0 1px 6px rgba(20,24,30,.18)}
.ws .rule{display:flex;gap:8px;margin-bottom:8px}
.ws .rule span{font-size:7px;font-weight:800;color:#191C1A}
.ws .rule i{flex:1;border-bottom:1px solid #B9BEC6;display:block;height:7px}
.ws .page h5{margin:0;font-size:11px;font-weight:800;color:#111}
.ws .page small{display:block;font-size:7.5px;color:#555;margin-bottom:7px}
.ws .sums{display:grid;grid-template-columns:1fr 1fr;gap:5px 9px}
.ws .sums div{display:flex;align-items:baseline;gap:4px;font-size:8.5px;color:#111}
.ws .sums b{font-weight:800}
.ws .sums em{font-style:normal;color:#98A0AA;font-size:6.5px}
.ws .sums u{flex:1;text-decoration:none;border-bottom:1px solid #C3C8D0;height:7px}
@media(max-width:520px){.ws .panel{flex-basis:46%}.ws .sums{grid-template-columns:1fr}}