/* Shared look of the Shop and Apps pages. Colours match the main page. */
:root { --sky:#0284c7; --sky-soft:#e2f3fd; --amber:#d97706; --amber-soft:#fff4dc; --card:#ffffff; --bg:#f6f7fc; --line:#e3e6f0; --ink:#0f172a; --dim:#55607a; --brand:#4f46e5; --brand-dark:#3730a3; --brand-soft:#eef0ff; --teal:#0d9488; --teal-soft:#e3f7f4; --shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 "Inter","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--brand); }
.wrap { max-width:1120px; margin:0 auto; padding:0 20px; }
.hero { background:radial-gradient(900px 420px at 85% -10%, #dfe3ff 0%, transparent 60%), radial-gradient(700px 380px at 0% 0%, #dcf7f2 0%, transparent 55%), #fff; border-bottom:1px solid var(--line); padding:56px 0 48px; }
.tag { display:inline-block; background:var(--brand-soft); color:var(--brand-dark); font-weight:700; font-size:13px; padding:6px 12px; border-radius:999px; margin-bottom:16px; }
h1 { font-size:clamp(30px,4.4vw,48px); line-height:1.1; letter-spacing:-.02em; margin:0 0 14px; max-width:800px; }
.lead { font-size:18px; color:var(--dim); margin:0; max-width:680px; }
section { padding:52px 0; } section.alt { background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.kicker { color:var(--brand); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; }
h2 { font-size:clamp(24px,3vw,32px); letter-spacing:-.01em; line-height:1.2; margin:6px 0 10px; } .sub { color:var(--dim); max-width:680px; margin:0 0 28px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .grid.g4 { grid-template-columns:repeat(4,1fr); }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.card h3 { font-size:18px; margin:12px 0 4px; } .card p { color:var(--dim); font-size:15px; margin:0 0 14px; flex:1; }
.pic { background:var(--bg); border-radius:10px; height:170px; display:grid; place-items:center; } .pic svg { height:140px; }
.soon { align-self:flex-start; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:3px 10px; margin-top:12px; }
.btn { display:inline-block; background:var(--brand); color:#fff; font-weight:700; border-radius:10px; padding:11px 18px; font-size:15px; text-decoration:none; text-align:center; }
.btn:hover { background:var(--brand-dark); } .btn.ghost { background:var(--brand-soft); color:var(--brand-dark); }
.quotes { display:flex; flex-wrap:wrap; gap:10px; } .quotes span { background:#0f172a; color:#fff; font-weight:700; border-radius:10px; padding:12px 16px; font-size:17px; letter-spacing:-.01em; }
ul.ticks { list-style:none; padding:0; margin:0 0 22px; display:grid; grid-template-columns:1fr 1fr; gap:10px 28px; } ul.ticks li { position:relative; padding-left:32px; color:var(--dim); }
ul.ticks li::before { content:"✓"; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:50%; background:var(--teal-soft); color:var(--teal); font-weight:800; font-size:13px; display:grid; place-items:center; }
ul.ticks b { color:var(--ink); }
.appico { width:60px; height:60px; border-radius:16px; display:block; object-fit:cover; box-shadow:0 2px 8px rgba(15,23,42,.14); }
footer { background:#0f172a; color:#aab3c8; font-size:13.5px; padding:32px 0 40px; } footer img { height:40px; margin-left:-5px; } footer a { color:#c7d2fe; text-decoration:none; margin-right:20px; } footer p { margin:10px 0 0; max-width:820px; }
@media (max-width:900px) { .grid, .grid.g4 { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .wrap { padding:0 12px; } .grid, .grid.g4, ul.ticks { grid-template-columns:1fr; } .card { padding:14px 10px; } .hero { padding:36px 0 32px; } section { padding:38px 0; } }
/* app detail pages */
.ahero { display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; }
.crumb { display:inline-block; color:var(--dim); text-decoration:none; font-size:14px; font-weight:600; margin-bottom:14px; }
.aname { display:flex; gap:16px; align-items:center; margin-bottom:10px; } .aname h1 { margin:0; } .aname .tag { margin-bottom:6px; } .aname .appico { width:72px; height:72px; border-radius:20px; font-size:30px; flex:none; }
.aline { font-size:clamp(20px,2.6vw,26px); font-weight:700; letter-spacing:-.01em; margin:6px 0 8px; }
.cta { margin:22px 0 0; display:flex; flex-wrap:wrap; gap:10px; } .mini { color:var(--dim); font-size:14px; margin:14px 0 0; font-weight:600; }
.ph { display:block; width:260px; max-width:100%; border:7px solid #0f172a; border-radius:30px; overflow:hidden; background:#0f172a; box-shadow:0 18px 40px rgba(15,23,42,.22); line-height:0; }
.ph img { width:100%; height:auto; display:block; } .hshot { display:grid; place-items:center; }
.notice { background:#fff4dc; border:1px solid #f6d99a; border-radius:12px; padding:14px 16px; color:#5b4310; font-size:15px; margin:24px 0 0; }
.feat { display:grid; grid-template-columns:300px 1fr; gap:44px; align-items:center; padding:26px 0; border-top:1px solid var(--line); } .feat:first-of-type { border-top:0; }
.feat:nth-of-type(even) { grid-template-columns:1fr 300px; } .feat:nth-of-type(even) .fimg { order:2; }
.fimg { display:grid; place-items:center; } .ftxt h3 { font-size:24px; margin:10px 0 8px; letter-spacing:-.01em; } .ftxt p { color:var(--dim); font-size:17px; margin:0; max-width:520px; }
.num { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-weight:800; }
.thumb { display:block; height:190px; overflow:hidden; border-radius:10px; background:var(--bg); margin-bottom:14px; border:1px solid var(--line); } .thumb img { width:100%; display:block; }
@media (max-width:900px) { .ahero { grid-template-columns:1fr; gap:28px; } .feat, .feat:nth-of-type(even) { grid-template-columns:1fr; gap:18px; text-align:left; } .feat:nth-of-type(even) .fimg { order:0; } .ph { width:230px; } }
/* "added since the first version": clips beside the list */
.cnt { display:inline-block; font-size:14px; font-weight:700; letter-spacing:0; color:var(--brand-dark); background:var(--brand-soft); border-radius:999px; padding:5px 12px; vertical-align:6px; margin-left:8px; }
.addgrid { display:grid; grid-template-columns:fit-content(520px) minmax(320px,1fr); gap:44px; align-items:start; }
.clips { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; position:sticky; top:84px; } .clip { margin:0; width:240px; } .clip .ph { width:240px; cursor:pointer; } .clip video { width:100%; height:auto; display:block; }
.clip figcaption { color:var(--dim); font-size:14px; text-align:center; margin-top:10px; } .clipnote { flex-basis:100%; text-align:center; color:var(--dim); font-size:13px; margin:0; }
.addlist { list-style:none; margin:0; padding:0; } .addlist li { display:grid; grid-template-columns:64px 1fr; gap:14px; padding:14px 0; border-top:1px solid var(--line); } .addlist li:first-child { border-top:0; padding-top:0; }
.ver { align-self:start; text-align:center; font-size:12px; font-weight:800; color:var(--teal); background:var(--teal-soft); border-radius:999px; padding:4px 0; }
.addlist b { display:block; font-size:17px; } .addlist span:not(.ver) { color:var(--dim); font-size:15px; }
@media (max-width:900px) { .addgrid { grid-template-columns:1fr; gap:26px; } .clips { position:static; } .clip, .clip .ph { width:210px; } }
@media (max-width:560px) { .clips { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:6px; } .clip { flex:none; } .clipnote { display:none; } .addlist li { grid-template-columns:54px 1fr; gap:10px; } }
/* example widgets on the Apps page: a home-screen wall of widget designs */
.wwall { background:radial-gradient(70% 90% at 90% 0%, #4f46e5 0%, transparent 60%), radial-gradient(60% 80% at 0% 100%, #0d9488 0%, transparent 60%), #0f172a; border-radius:26px; padding:26px; margin:0 0 12px; }
.wgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.wg { background:#fff; border-radius:22px; padding:16px; min-height:186px; display:flex; flex-direction:column; box-shadow:0 10px 30px rgba(0,0,0,.25); font-size:14px; color:var(--ink); }
.wg.wide { grid-column:span 2; } .wg.dark { background:#111a2e; color:#fff; } .wg.brand { background:linear-gradient(140deg,#4f46e5,#3730a3); color:#fff; } .wg.ai { background:linear-gradient(140deg,#fff,#eef0ff); }
.wt { font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); margin-bottom:8px; } .wg.dark .wt, .wg.brand .wt { color:#b9c2dd; }
.wfoot { margin-top:auto; padding-top:8px; font-size:12px; color:var(--dim); } .wg.dark .wfoot, .wg.brand .wfoot { color:#aab3c8; }
.wbig { font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.1; } .wup { color:var(--teal); font-weight:700; font-size:13px; margin:3px 0 8px; }
.wbars { display:flex; align-items:flex-end; gap:5px; height:44px; } .wbars i { flex:1; background:#dfe3ff; border-radius:4px 4px 0 0; } .wbars i:last-child { background:var(--brand); }
.wstat { font-weight:700; font-size:15px; margin-bottom:8px; display:flex; align-items:center; gap:8px; } .dot { width:10px; height:10px; border-radius:50%; background:#94a3b8; } .dot.ok { background:#34d399; box-shadow:0 0 0 4px #34d39933; }
.wrow { display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-top:1px solid #ffffff1f; } .wrow:first-of-type { border-top:0; } .wrow span { opacity:.85; } .wrow b { font-weight:700; } .wrow.hl b { color:#fbbf24; }
.wai { display:flex; gap:12px; align-items:flex-start; } .wai svg { flex:none; width:30px; height:30px; fill:#14b8a6; margin-top:2px; } .wai p { margin:0; font-size:16px; line-height:1.45; color:var(--ink); font-weight:500; }
.wppl div, .wdsp div { display:flex; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--line); } .wppl div:first-child, .wdsp div:first-child { border-top:0; }
.wppl i { flex:none; width:32px; height:32px; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-style:normal; font-weight:800; font-size:12px; display:grid; place-items:center; }
.wppl span, .wdsp span { flex:1; color:var(--dim); font-size:13px; line-height:1.3; } .wppl b, .wdsp b { display:block; color:var(--ink); font-size:14px; } .wppl em { font-style:normal; font-weight:800; color:var(--brand); }
.wdsp em { font-style:normal; font-size:12px; font-weight:800; border-radius:999px; padding:3px 9px; white-space:nowrap; } .wdsp em.g { background:var(--teal-soft); color:var(--teal); } .wdsp em.a { background:#fff4dc; color:#b45309; } .wdsp em.d { background:var(--bg); color:var(--dim); }
.wstk span { display:flex; justify-content:space-between; font-size:13px; color:var(--dim); margin-top:7px; } .wstk span:first-child { margin-top:0; } .wstk b { color:var(--ink); } .wstk u { display:block; height:7px; border-radius:4px; background:var(--bg); margin-top:4px; overflow:hidden; }
.wstk u i { display:block; height:100%; border-radius:4px; } .wstk .r { background:#e11d48; } .wstk .a { background:#f59e0b; } .wstk .g { background:var(--teal); }
.wrates { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .wrates div { background:#ffffff12; border-radius:14px; padding:10px 12px; } .wrates span { display:block; font-size:12px; color:#aab3c8; } .wrates b { display:block; font-size:21px; letter-spacing:-.01em; margin:2px 0; }
.wrates em { font-style:normal; font-size:12px; font-weight:700; color:#aab3c8; } .wrates em.up { color:#34d399; } .wrates em.dn { color:#fb7185; }
.wnote { color:var(--dim); font-size:14px; margin:0 0 26px; }
@media (max-width:900px) { .wgrid { grid-template-columns:repeat(2,1fr); } .wwall { padding:16px; border-radius:22px; } }
@media (max-width:560px) { .wgrid { gap:10px; } .wwall { padding:10px; } .wg { padding:12px; min-height:168px; border-radius:18px; } .wbig { font-size:24px; } .wrates { grid-template-columns:1fr; gap:6px; } .wrates div { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:8px 10px; } .wrates b { font-size:16px; margin:0; } .wai p { font-size:14.5px; } }
/* pricing page: the trading price cards (same rules as the main page) and the category cards */
.pgrid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pcard { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.phead { padding:16px 18px; color:#fff; } .phead h3 { margin:0; font-size:20px; } .phead p { margin:2px 0 0; font-size:14px; opacity:.92; }
.k1 .phead { background:linear-gradient(135deg,var(--sky),#0369a1); } .k2 .phead { background:linear-gradient(135deg,var(--brand),var(--brand-dark)); }
.tier { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:14px 18px; border-top:1px solid var(--line); }
.lv { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px; }
.k1 .lv { background:var(--sky-soft); color:var(--sky); } .k2 .lv { background:var(--brand-soft); color:var(--brand); }
.tn b { display:block; line-height:1.3; } .tn small { display:block; color:var(--dim); font-size:13px; line-height:1.35; margin-top:2px; }
.tp { text-align:right; line-height:1.15; } .tp small { display:block; color:var(--dim); font-size:12px; } .tp b { font-size:22px; font-weight:800; letter-spacing:-.01em; }
.quote { flex:none; font-size:14px; font-weight:700; color:var(--brand); background:var(--brand-soft); border-radius:999px; padding:8px 14px; text-decoration:none; white-space:nowrap; }
.quote:hover { background:#dfe2ff; }
.pother { margin-top:16px; display:flex; justify-content:space-between; align-items:center; gap:16px; background:#fff; border:1px dashed #c3c8f5; border-radius:14px; padding:14px 18px; }
.pother b { display:block; } .pother small { color:var(--dim); font-size:14px; }
.amount { font-size:34px; font-weight:800; letter-spacing:-.02em; line-height:1.2; } .amount.quote { font-size:22px; padding:8px 0; }
.punit { color:var(--dim); font-size:14px; margin-bottom:18px; }
.care { margin-top:20px; display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:center; }
.care h3 { margin-top:0; } .careprice { text-align:right; } .careprice .amount { font-size:24px; color:var(--brand-dark); } .careprice .punit { margin:0; }
.fine { color:var(--dim); font-size:14px; margin:16px 0 0; }
.jump { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0; } .jump a { background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 16px; font-weight:700; font-size:15px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow); }
.pc h3 { margin:0 0 6px; } .pchead { display:flex; gap:12px; align-items:center; margin-bottom:10px; } .pchead h3 { margin:0; } .pchead span { color:var(--dim); font-size:13px; }
ul.plain { list-style:none; margin:0 0 14px; padding:0; } ul.plain li { position:relative; padding:0 0 6px 22px; color:var(--dim); font-size:14.5px; } ul.plain li::before { content:"✓"; position:absolute; left:0; color:var(--teal); font-weight:800; }
.pcfoot { display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid var(--line); padding-top:12px; margin-top:auto; } .pcfoot b { font-size:15px; } .pcfoot .btn { padding:9px 14px; font-size:14px; }
.more { display:block; margin-top:10px; font-size:14px; font-weight:700; text-decoration:none; }
.fineprint { color:var(--dim); font-size:14px; margin:22px 0 0; max-width:760px; }
@media (max-width:900px) { .pgrid { grid-template-columns:1fr; } .care { grid-template-columns:1fr; } .careprice { text-align:left; } }
@media (max-width:560px) { .tier { grid-template-columns:auto 1fr; gap:10px; padding:12px 10px; } .tier .tp, .tier .quote { grid-column:2; justify-self:start; text-align:left; } .tp small { display:inline; } .tp b { margin:0 5px; } .phead { padding:12px 10px; } .pother { flex-direction:column; align-items:flex-start; padding:12px 10px; } }
/* landing page */
h1 em { font-style:normal; background:linear-gradient(90deg,var(--brand),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hhero { display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; } .hhero h1 { font-size:clamp(36px,5.4vw,60px); }
.hvis { display:grid; grid-template-columns:220px 1fr; gap:16px; align-items:center; } .hvis .ph { width:220px; } .hw { display:grid; gap:14px; } .hw .wg { min-height:0; box-shadow:var(--shadow); border:1px solid var(--line); } .hw .wg.dark { border:0; }
.cats { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cat { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:var(--shadow); text-decoration:none; color:var(--ink); transition:transform .15s, box-shadow .15s, border-color .15s; }
.cat:hover { transform:translateY(-3px); border-color:#c3c8f5; box-shadow:0 18px 44px rgba(15,23,42,.12); }
.catic { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; } .catic svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.catic.c1 { background:var(--sky-soft); color:var(--sky); } .catic.c2 { background:var(--brand-soft); color:var(--brand); } .catic.c3 { background:var(--teal-soft); color:var(--teal); } .catic.c4 { background:var(--amber-soft); color:var(--amber); }
.cat h3 { font-size:24px; margin:16px 0 4px; letter-spacing:-.01em; } .catline { font-weight:700; margin:0 0 8px; } .cat p { color:var(--dim); margin:0 0 12px; } .cat .catline { color:var(--ink); }
.cat ul { margin:0 0 16px; padding:0; list-style:none; color:var(--dim); font-size:15px; } .cat li { padding:0 0 5px 22px; position:relative; } .cat li::before { content:"✓"; position:absolute; left:0; color:var(--teal); font-weight:800; }
.caticons { display:flex; gap:10px; margin:0 0 16px; } .caticons img { width:46px; height:46px; border-radius:13px; object-fit:cover; box-shadow:0 2px 8px rgba(15,23,42,.14); }
.catgo { margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:12px; background:var(--brand); color:#fff; font-weight:700; font-size:15.5px; padding:7px 7px 7px 20px; border-radius:999px; box-shadow:0 6px 16px rgba(79,70,229,.25); transition:background .15s; }
.catgo i { font-style:normal; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#fff; color:var(--brand); font-weight:800; transition:transform .15s; }
.cat:hover .catgo { background:var(--brand-dark); } .cat:hover .catgo i { transform:translateX(3px); }
.founder { display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; flex-direction:unset; padding:22px; } .avatar { width:128px; height:128px; border-radius:50%; object-fit:cover; display:block; }
.founder h3 { margin:0; font-size:24px; } .role { color:var(--dim); margin:2px 0 12px; } .founder p { margin:10px 0 0; color:var(--dim); font-size:16px; flex:unset; }
.badge { display:inline-block; background:var(--brand-soft); color:var(--brand-dark); font-weight:700; font-size:14px; padding:6px 12px; border-radius:999px; margin:0 6px 6px 0; } .badge.t { background:var(--teal-soft); color:#0b6b62; }
.contact { display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:16px; font-weight:600; } .contact a { text-decoration:none; }
.endcta { text-align:center; } .endcta .sub { margin-left:auto; margin-right:auto; } .endcta .cta { justify-content:center; }
@media (max-width:900px) { .hhero { grid-template-columns:1fr; gap:30px; } .cats { grid-template-columns:1fr; } .hvis { grid-template-columns:180px 1fr; } .hvis .ph { width:180px; } }
@media (max-width:560px) { .catgo { align-self:stretch; justify-content:space-between; } .cat { padding:16px 12px; } .founder { grid-template-columns:1fr; padding:14px 10px; } .avatar { width:96px; height:96px; } .hw { width:100%; } }
/* phones: the hero pictures (phone screen, trading card, morning brief) are hidden; they only push the categories down (owner, 10 Oct 2026) */
@media (max-width:700px) { .hvis { display:none; } .hhero { gap:22px; } }   /* the carousel itself is styled in mobile.css */