/* Metres layer over the engine's web/assets/site.css (loaded right after it).
   Colours, type, corners, shadows and curves come from the Pamuk design tokens
   (tokenlar.json; mobile/lib/designs/pamuk/theme/pamuk_tokens.dart): ground #F8F3EF,
   screen ground #F9EEE8, surface #FFF, ink #2A2230, muted #6F6375, one coral accent
   #CF432E, warm brown shadows, Plus Jakarta Sans.
   The design draws the light theme only. The dark theme below is built from the
   design's own dark surfaces (the ink card #2A2230, the match ground #24192A, the
   lens shadow #140C18, the soft corals #F4A28C / #F2775A, white text at 60 / 70 / 82 %)
   and follows the visitor's system setting.
   No inline styles: the site sends style-src 'self'. */

@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/PlusJakartaSans-500.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/PlusJakartaSans-600.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/PlusJakartaSans-700.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/PlusJakartaSans-800.ttf) format("truetype");font-weight:800;font-display:swap}

:root{
  color-scheme:light dark;
  --bg-deep:#F9EEE8;--bg:#F8F3EF;--surface:#FFFFFF;--surface-2:#F3ECE8;--surface-3:#FFE4DE;--aura:#FBE7E0;
  --primary:#CF432E;--primary-soft:#B0381F;--accent-display:#CF432E;
  --mint:#23704F;--gold:#8A5A07;--danger:#B3261E;--info:#5745B5;--lavender:#5745B5;--pink:#CF432E;--online:#3FAE7D;
  --ink:#FFFFFF;
  --text:#2A2230;--text-2:rgba(42,34,48,.84);--text-3:#6F6375;--text-4:#6F6375;
  --hairline:rgba(42,34,48,.12);--glass:rgba(42,34,48,.05);--card-edge:rgba(42,34,48,.06);
  --shadow:0 26px 50px -28px rgba(120,66,56,.45),0 2px 8px rgba(120,66,56,.06);
  --shadow-k:0 12px 26px -14px rgba(120,66,56,.5);
  --cta-shadow:0 14px 30px -10px rgba(207,67,46,.55);
  --head-bg:rgba(249,238,232,.98);
  --hero-glow:rgba(255,228,222,.95);--hero-glow-0:rgba(255,228,222,0);
  --halo:#FFFFFF;--halo-0:rgba(255,255,255,0);
  --band:#2A2230;--band-edge:rgba(42,34,48,0);
  --card-a:linear-gradient(180deg,#FFE4DE,#F4A28C);--sil-a:rgba(176,56,31,.34);
  --card-b:linear-gradient(180deg,#ECE7FF,#C8B6FF);--sil-b:rgba(87,69,181,.34);
  --shimmer:#EADFD9;
  --ease-out:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.35,.64,1);
  --display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;--body:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg-deep:#1B141F;--bg:#1F1724;--surface:#2A2230;--surface-2:#342A3B;--surface-3:#43262B;--aura:#2B1B26;
    --primary-soft:#F4A28C;--accent-display:#F2775A;
    --mint:#8FDDB9;--gold:#F2B544;--danger:#FF9A8B;--info:#C8B6FF;--lavender:#C8B6FF;--pink:#F4A28C;
    --text:#F8F3EF;--text-2:rgba(248,243,239,.82);--text-3:rgba(248,243,239,.7);--text-4:rgba(248,243,239,.6);
    --hairline:rgba(255,255,255,.14);--glass:rgba(255,255,255,.07);--card-edge:rgba(255,255,255,.07);
    --shadow:0 26px 50px -28px rgba(20,12,24,.9),0 2px 8px rgba(20,12,24,.35);
    --shadow-k:0 12px 26px -14px rgba(20,12,24,.9);
    --cta-shadow:0 14px 30px -12px rgba(207,67,46,.6);
    --head-bg:rgba(27,20,31,.98);
    --hero-glow:rgba(207,67,46,.2);--hero-glow-0:rgba(207,67,46,0);
    --halo:rgba(244,162,140,.2);--halo-0:rgba(244,162,140,0);
    --band:#24192A;--band-edge:rgba(255,255,255,.1);
    --card-a:linear-gradient(180deg,#5A2A2C,#8C3A2C);--sil-a:rgba(255,228,222,.3);
    --card-b:linear-gradient(180deg,#3A3160,#5745B5);--sil-b:rgba(236,231,255,.3);
    --shimmer:#40354A;
  }
}

body{font-size:16px}
h1,h2,h3{letter-spacing:-.025em}
.section h2,.doc-hero h1,.lost h1{font-weight:800}
.section h2 em{color:var(--accent-display)}
.kicker{color:var(--primary-soft);letter-spacing:.06em}

/* header and wordmark (the app's own: a small heart over the name) */
.site-head.scrolled{background:var(--head-bg);box-shadow:0 1px 0 var(--hairline)}
.logo{flex-direction:column;align-items:center;gap:3px;padding:6px 4px;font-weight:800;font-size:24px;letter-spacing:-.03em}
.logo .mark{width:13px;height:12px;flex:none}
.logo .mark path{fill:var(--primary)}

/* buttons */
.btn-primary{color:#fff;box-shadow:var(--cta-shadow)}
.btn-primary:hover{box-shadow:var(--cta-shadow),0 0 0 4px rgba(207,67,46,.16)}
.btn-ghost{background:var(--surface);box-shadow:inset 0 0 0 1px var(--hairline),var(--shadow-k)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:#B3261E;color:#fff}
.seg input:checked+span{color:var(--bg-deep)}

/* cards share the warm shadow instead of the engine's hairline */
.step,.safe,.faq details,.aside-card,.form,.state{background:var(--surface);box-shadow:inset 0 0 0 1px var(--card-edge),var(--shadow)}
.step{border-radius:24px}
.step .num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:14px;background:var(--surface-3);color:var(--primary-soft);font-weight:800;font-size:14px}
.step h3{font-size:22px;font-weight:800}
.safe h3,.faq summary,.aside-card h3{font-weight:800}
.ficon,.badge18{background:var(--surface-3);color:var(--primary-soft)}
.badge18{font-weight:800}
.glowcard::after{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(207,67,46,.08),rgba(207,67,46,0) 70%)}
.cursor-glow{display:none}

/* document pages */
.doc-hero{background:radial-gradient(50% 80% at 82% 0%,var(--hero-glow),var(--hero-glow-0) 70%),linear-gradient(180deg,var(--aura),var(--bg-deep))}
.prose h2{font-weight:800;scroll-margin-top:96px}
.prose h3{font-weight:700}
.callout{background:rgba(207,67,46,.08);box-shadow:inset 0 0 0 1px rgba(207,67,46,.28)}
.legal-line{box-shadow:0 -1px 0 var(--hairline)}
.skeleton i{background-image:linear-gradient(90deg,var(--surface-2) 0%,var(--shimmer) 50%,var(--surface-2) 100%)}
.site-foot{background:var(--bg)}
.safety{background:linear-gradient(180deg,var(--bg-deep),var(--bg) 40%,var(--bg-deep))}
.m-facts{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.m-facts li{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--card-edge),var(--shadow-k);font-size:14px;font-weight:700;color:var(--text-2)}
.m-toc{margin:0 0 32px;padding:22px 24px;border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--card-edge),var(--shadow)}
.prose .m-toc h2{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.m-toc ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.m-toc li{margin:0}
.m-toc a{display:flex;align-items:center;min-height:44px;color:var(--text);font-weight:700;text-decoration:none}
.m-toc a:hover{color:var(--primary-soft)}

/* ---------- landing ---------- */
.section{padding:clamp(56px,8vw,104px) 0}
.m-hero{position:relative;padding:clamp(120px,17vh,176px) 0 clamp(64px,11vh,120px);overflow:hidden;
  background:radial-gradient(55% 60% at 78% 40%,var(--hero-glow),var(--hero-glow-0) 70%),linear-gradient(180deg,var(--aura) 0%,var(--bg-deep) 80%)}
.m-hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.m-hero h1{font-size:clamp(40px,5.6vw,68px);line-height:1.02;font-weight:800;letter-spacing:-.035em;max-width:660px}
.m-hero h1 em{font-style:normal;color:var(--accent-display)}
.m-hero .lead{max-width:540px}
.m-tag{display:inline-flex;align-items:center;gap:8px;margin:0 0 20px;padding:8px 14px 8px 8px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--card-edge),var(--shadow-k);font-size:14px;font-weight:700;color:var(--text-2)}
.m-tag b{display:inline-grid;place-items:center;min-width:34px;height:24px;padding:0 6px;border-radius:999px;background:var(--surface-3);color:var(--primary-soft);font-size:12px;font-weight:800}

/* the meeting: two tilted cards and the heart between them (the app's welcome scene) */
.m-meet{position:relative;justify-self:center;width:min(100%,400px);height:400px}
.m-aura{position:absolute;left:50%;top:50%;width:380px;height:380px;margin:-190px 0 0 -190px;border-radius:50%;background:radial-gradient(circle,var(--halo) 0%,var(--halo-0) 70%)}
.m-card{position:absolute;top:44px;width:176px;height:236px;border-radius:26px;overflow:hidden;box-shadow:0 0 0 6px var(--surface),var(--shadow);animation:mFloat 7s ease-in-out infinite}
.m-card-a{left:calc(50% - 182px);rotate:-7deg;background:var(--card-a)}
.m-card-b{left:calc(50% + 6px);top:70px;rotate:6deg;background:var(--card-b);animation-delay:-3.5s}
.m-head,.m-body{position:absolute;left:50%;background:var(--sil-a)}
.m-card-b .m-head,.m-card-b .m-body{background:var(--sil-b)}
.m-head{top:52px;width:64px;height:64px;margin-left:-32px;border-radius:50%}
.m-body{top:128px;width:140px;height:150px;margin-left:-70px;border-radius:70px 70px 0 0}
.m-label{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:#fff;color:#2A2230;font-size:12px;font-weight:700}
.m-card-b .m-label{left:auto;right:12px}
.m-label i{width:8px;height:8px;border-radius:50%;background:var(--online)}
.m-badge{position:absolute;left:50%;top:232px;width:68px;height:68px;margin-left:-34px;display:grid;place-items:center;border-radius:50%;background:var(--primary);box-shadow:0 0 0 6px var(--surface),0 16px 28px -12px rgba(207,67,46,.7);animation:mBeat 2.8s var(--ease-out) infinite}
.m-badge svg{width:30px;height:28px}
.m-badge path{fill:#fff}
.m-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--card-edge),var(--shadow);font-size:14px;font-weight:700;color:var(--text);white-space:nowrap}
.m-chip svg{width:18px;height:18px;flex:none;color:var(--primary-soft)}
.m-chip.m-c1{left:0;top:0}
.m-chip.m-c2{right:0;bottom:22px}
.m-chip.m-c3{left:8px;bottom:0}
@keyframes mFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes mBeat{0%,100%{scale:1}12%{scale:1.08}24%{scale:1}36%{scale:1.05}}

/* the ink band: working principles */
.m-band{padding:clamp(28px,5vw,56px);border-radius:32px;background:var(--band);color:#fff;box-shadow:inset 0 0 0 1px var(--band-edge),var(--shadow)}
.m-band .kicker{color:#F4A28C}
.m-band h2{color:#fff}
.m-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:40px 0 0;padding:0;list-style:none}
.m-principles b{display:block;font-size:14px;font-weight:800;color:#F4A28C}
.m-principles h3{margin:10px 0 8px;font-size:21px;font-weight:800;color:#fff}
.m-principles p{margin:0;font-size:15px;font-weight:600;color:rgba(255,255,255,.72)}

/* trust centre: link cards */
.m-links{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:48px 0 0;padding:0;list-style:none}
.m-links a{position:relative;display:block;height:100%;padding:24px 24px 56px;border-radius:24px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--card-edge),var(--shadow);text-decoration:none;transition:translate 320ms var(--spring)}
.m-links a:hover{translate:0 -4px;box-shadow:inset 0 0 0 1.5px var(--primary),var(--shadow)}
.m-links h3{font-size:20px;font-weight:800}
.m-links p{margin:8px 0 0;font-size:15px;font-weight:600;color:var(--text-3)}
.m-links .go{position:absolute;left:24px;bottom:20px;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--surface-3);color:var(--primary-soft)}
.m-links .go svg{width:16px;height:16px}

.m-cta{padding:0 0 clamp(80px,12vw,120px)}
.m-cta .box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:clamp(28px,5vw,56px);border-radius:32px;background:var(--band);color:#fff;box-shadow:inset 0 0 0 1px var(--band-edge),var(--shadow)}
.m-cta h2{font-size:clamp(32px,4.4vw,52px);font-weight:800;line-height:1.04;max-width:560px}
.m-cta p{margin:12px 0 0;max-width:460px;color:rgba(255,255,255,.76);font-weight:600}

.lost .m-heart{width:96px;height:88px;margin:0 auto 26px}
.lost .m-heart path{fill:none;stroke:var(--accent-display);stroke-width:3}

@media (max-width:980px){
  .m-hero{padding-top:104px}
  .m-hero .wrap{grid-template-columns:1fr;gap:28px}
  .m-principles{grid-template-columns:1fr;gap:24px}
  .m-links{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .m-links{grid-template-columns:1fr}
  .m-toc ol{grid-template-columns:1fr}
  .m-cta .btn{width:100%}
}
@media (max-width:420px){
  .m-meet{height:340px}
  .m-aura{width:320px;height:320px;margin:-160px 0 0 -160px}
  .m-card{top:40px;width:146px;height:196px;border-radius:22px}
  .m-card-a{left:calc(50% - 150px)}
  .m-card-b{left:calc(50% + 4px);top:60px}
  .m-head{top:42px;width:54px;height:54px;margin-left:-27px}
  .m-body{top:106px;width:118px;margin-left:-59px}
  .m-badge{top:196px;width:60px;height:60px;margin-left:-30px}
  .m-chip{height:36px;font-size:13px;padding:0 12px}
  .m-chip.m-c2{bottom:20px}
}