/* Soft layer (2026-11-08, live on the UPSC home): Marginalia Bold without the outline boxes.
   Loaded after home-marginalia.css + site.css. Same paper/ink/yellow palette and highlighter
   marks; separation comes from surface tint, rounded corners, soft shadows and space instead of
   2px ink outlines and hard offset shadows. Every component reads these tokens, so the next
   design change is a token edit, not a hunt through 150 rules. */

:root{
  --surface:#fff; --surface-2:#f3eee1; --tint:rgba(25,31,51,.06); --tint-strong:rgba(25,31,51,.1);
  --on-dark-tint:rgba(249,246,238,.1); --on-dark-tint-strong:rgba(249,246,238,.18);
  --r-sm:10px; --r:18px; --r-lg:26px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(25,31,51,.05),0 4px 14px -6px rgba(25,31,51,.12);
  --sh:0 2px 6px rgba(25,31,51,.05),0 18px 40px -14px rgba(25,31,51,.2);
  --sh-lg:0 4px 10px rgba(25,31,51,.06),0 34px 70px -24px rgba(25,31,51,.38);
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- buttons: filled shapes, no outlines ---------- */
.btn,.cw-login-btn,.cw-signup-btn,.cw-submit-btn{border:0;border-radius:var(--r-pill);box-shadow:none;
  position:relative;overflow:hidden;isolation:isolate;transition:transform .12s var(--ease),color .3s var(--ease);
  --fill:var(--ink);--fill-ink:var(--paper)}
/* hover: a second colour fills the button from left to right; the label colour follows */
.btn::before,.cw-login-btn::before,.cw-signup-btn::before,.cw-submit-btn::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  background:var(--fill);transform:scaleX(0);transform-origin:left center;transition:transform .38s var(--ease)}
.btn:hover,.cw-login-btn:hover,.cw-signup-btn:hover,.cw-submit-btn:hover{transform:none;box-shadow:none}
@media (hover:hover){
  .btn:hover::before,.cw-login-btn:hover::before,.cw-signup-btn:hover::before,.cw-submit-btn:hover::before{transform:scaleX(1)}
  /* !important: variant rules (.mk-hero .btn…, .p3.soon .btn.ghost) set colour with higher specificity */
  .btn:hover,.cw-login-btn:hover,.cw-signup-btn:hover,.cw-submit-btn:hover{color:var(--fill-ink)!important}
}
.btn:focus-visible::before{transform:scaleX(1)}
.btn:focus-visible{color:var(--fill-ink)!important}
@media (prefers-reduced-motion:reduce){.btn::before,.cw-login-btn::before,.cw-signup-btn::before,.cw-submit-btn::before{transition:none}}
.btn{background:var(--tint);color:var(--ink)}
.btn:active,.cw-login-btn:active,.cw-signup-btn:active,.cw-submit-btn:active{transform:scale(.97)}
.btn-solid{background:var(--ink);color:var(--paper);--fill:var(--hl);--fill-ink:var(--ink)}
.btn-hl{background:var(--hl);color:var(--ink);--fill:var(--paper);--fill-ink:var(--ink)}
.btn-ghost-dark{background:var(--on-dark-tint);color:var(--paper);--fill:var(--paper);--fill-ink:var(--ink)}
.cw-login-btn{background:var(--on-dark-tint);--fill:var(--paper);--fill-ink:var(--ink)}
.cw-signup-btn{--fill:var(--paper);--fill-ink:var(--ink)}
.cw-submit-btn{--fill:var(--hl);--fill-ink:var(--ink)}
/* on yellow bands a yellow fill would vanish: fill cream instead */
.finale .btn-solid,.buy-band .btn-solid{--fill:var(--paper);--fill-ink:var(--ink)}
.cw-login-btn:hover,.cw-signup-btn:hover{transform:none;box-shadow:none}
.cw-user-btn{border:0}

/* auth dropdown + modal */
.cw-user-dropdown{border:0;border-radius:var(--r);box-shadow:var(--sh-lg);padding:8px}
.cw-dropdown-item{border-radius:var(--r-sm)}
.cw-dropdown-divider{height:1px}
.cw-modal{border:0;border-radius:var(--r-lg);box-shadow:var(--sh-lg)}
.cw-form-group input{border:0;background:var(--surface);box-shadow:inset 0 0 0 1px var(--tint-strong);border-radius:12px}
.cw-form-group input:focus{box-shadow:inset 0 0 0 2px var(--ink)}

/* ---------- hero: its own dark band, flowing out of the header ---------- */
.mk-hero{background:var(--ink);color:var(--paper);border-radius:0 0 var(--r-lg) var(--r-lg);position:relative;isolation:isolate}
/* hero background: one faint wireframe globe (India marked) behind the content. The
   earlier scattered line art (colonnade, scales, book) was dropped 2026-11-08. */
.mk-hero::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 900' fill='none'%3E%3Cg transform='rotate%28-16 450 450%29' stroke='%23f9f6ee' stroke-opacity='.08'%3E%3Ccircle cx='450' cy='450' r='400'/%3E%3Cellipse cx='450' cy='450' rx='128' ry='400'/%3E%3Cellipse cx='450' cy='450' rx='248' ry='400'/%3E%3Cellipse cx='450' cy='450' rx='344' ry='400'/%3E%3Cpath d='M450 50V850'/%3E%3Cpath d='M250 796H650'/%3E%3Cpath d='M104 650H796'/%3E%3Cpath d='M50 450H850' stroke-dasharray='3 7'/%3E%3Cpath d='M104 250H796'/%3E%3Cpath d='M250 104H650'/%3E%3C/g%3E%3C/svg%3E") no-repeat 140% -200px/720px 720px}
@media(min-width:900px){.mk-hero::after{background-position:112% 75%;background-size:980px 980px}}
.mk-hero{overflow:hidden}
.mk-hero .kicker{color:var(--hl)}
/* headline: always three lines (measured at 360 to 1440 px) */
.mk-hero h1{font-size:clamp(27px,8.1vw,46px);letter-spacing:-.025em;max-width:10.8em;font-weight:700;color:#efe8d6}
.mk-hero h1 .h-soft{color:#cbbf9f}
@media(min-width:900px){.mk-hero-grid{grid-template-columns:1.05fr 1.15fr}.mk-hero h1{font-size:clamp(36px,3.5vw,50px)}}
.mk-hero .sub{color:rgba(249,246,238,.76)}
.mk-hero .sub strong{color:var(--paper)}
.mk-hero .mk-ticks li{color:rgba(249,246,238,.9)}
.mk-hero .mk-ticks .ic{color:var(--hl)}
/* the yellow marker: multiply blending would vanish on ink, so paint it behind dark text */
.mk-hero .mark{isolation:isolate;color:var(--ink)}
.mk-hero .mark::after{mix-blend-mode:normal;z-index:-1}
.mk-hero .btn-solid{background:var(--hl);color:var(--ink);--fill:var(--paper);--fill-ink:var(--ink)}
.mk-hero .btn:not(.btn-solid){background:var(--on-dark-tint);color:var(--paper);--fill:var(--paper);--fill-ink:var(--ink)}
/* depth on ink: a dark shadow alone disappears, so pair a deep drop shadow with a soft cream
   underglow (the same lift the light sections get from --sh-lg) */
.mk-hero .dev-laptop{box-shadow:0 0 0 1px rgba(249,246,238,.1),0 2px 6px rgba(0,0,0,.35),0 50px 80px -28px rgba(0,0,0,.9),0 46px 70px -24px rgba(249,246,238,.3)}
.mk-hero .dev-phone{background:#0d1122;box-shadow:0 0 0 1px rgba(249,246,238,.16),0 2px 6px rgba(0,0,0,.35),0 40px 60px -20px rgba(0,0,0,.9),0 38px 56px -18px rgba(249,246,238,.32)}
@media(min-width:900px){.mk-hero .duo .dev-phone{box-shadow:0 0 0 1px rgba(249,246,238,.16),0 2px 6px rgba(0,0,0,.35),0 40px 60px -20px rgba(0,0,0,.9),0 38px 56px -18px rgba(249,246,238,.32)}}
.mk-hero + .mk-sec.tight{padding-top:56px}
@media(min-width:900px){.mk-hero + .mk-sec.tight{padding-top:88px}}

/* ---------- device frames + clippings ---------- */
.dev-phone{border:0;box-shadow:var(--sh-lg)}
.dev-laptop{border:0;border-radius:14px;box-shadow:var(--sh-lg)}
.dev-laptop .bar{border-bottom:0;background:var(--surface-2)}
@media(min-width:900px){.duo .dev-phone{box-shadow:var(--sh-lg)}}
.clip{border:0;border-radius:var(--r);box-shadow:var(--sh)}

/* ---------- section markers ---------- */
.num-stamp{border:0;background:var(--hl);transform:none;box-shadow:none;width:36px;height:36px;font-size:15px}
.feat-list .n{border-radius:9px;transform:none}

/* ---------- cards: surfaces, not boxes ---------- */
.vs-card,.who-card,.pr,.inc-item,.assure2>div,.steps3 li{border:0;border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-sm)}
.pr:nth-child(2),.pr:nth-child(4),.who-card:nth-child(2){box-shadow:var(--sh-sm)}
.pr .ic,.who-card>.ic,.inc-item>.ic,.assure2 .ic{box-sizing:content-box;padding:9px;border-radius:12px;background:#fdecea}
.vs-top .badge{border:0;background:var(--hl-wash)}
.vs-join{border:0;border-radius:var(--r);box-shadow:var(--sh)}
.who-card .quote{border-left:0;border-radius:12px}
.inc-item.locked{border:0;background:var(--surface-2);box-shadow:none}
.steps3 li::before{border:0;border-radius:10px;transform:none}

/* time comparison */
.clock-tile{border:0;border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-sm)}
.clock-tile.us{background:var(--hl);box-shadow:0 18px 40px -16px rgba(214,160,0,.55)}
.clock-tile .bar{border:0;border-radius:var(--r-pill);background:var(--tint-strong);overflow:hidden}
.clock-tile.us .bar{background:rgba(25,31,51,.14)}
.clock-tile .bar i{border-radius:var(--r-pill)}

/* ---------- plans ---------- */
.p3{border:0;border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:30px 24px 26px}
.p3.live{box-shadow:var(--sh-lg);background:linear-gradient(180deg,var(--hl-wash),var(--surface) 46%)}
.p3.soon{box-shadow:var(--sh)}
@media(min-width:960px){.p3.live{transform:translateY(-10px)}}
.p3 .tag{border:0;border-radius:var(--r-pill);transform:none;top:-12px;padding:6px 13px}
.p3 .tag.t-free{background:var(--ink);color:var(--paper)}
.p3.soon .btn{background:var(--hl);color:var(--ink);--fill:var(--paper);--fill-ink:var(--ink)}
.p3.soon .btn.ghost{background:var(--on-dark-tint);color:var(--paper);--fill:var(--paper);--fill-ink:var(--ink)}
.p3 .more{text-decoration:none;color:var(--ink-soft)}
.p3 .more:hover{color:var(--ink)}
.p3 .more::after{content:" \2192"}

/* ---------- news rows ---------- */
.news a{border:0;border-radius:14px;background:var(--surface);box-shadow:var(--sh-sm);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.news a:hover{transform:translateY(-2px);box-shadow:var(--sh)}

/* ---------- course-page pieces (ready for the rollout) ---------- */
.price-chip{border:0;border-radius:var(--r);box-shadow:var(--sh-sm)}
.cmp-wrap{border:0;border-radius:var(--r);box-shadow:var(--sh-sm)}
.soon-banner{border:0;border-radius:var(--r-lg);box-shadow:var(--sh)}
.soon-banner .stamp{border:0;border-radius:var(--r-pill);transform:none}
.build{border:0;border-radius:14px}
.build-bar{border:0;border-radius:var(--r-pill);background:var(--on-dark-tint-strong);overflow:hidden}
.subj{border:0;border-radius:14px;background:var(--surface);box-shadow:var(--sh-sm)}
.subj.now{background:var(--hl);box-shadow:none}
.faq{border-top:0}
.faq details{border-bottom:1px solid var(--tint-strong)}
.buy-band{border:0;border-radius:var(--r-lg);box-shadow:none}

/* ---------- closing band ---------- */
.finale{border:0;border-radius:var(--r-lg);box-shadow:none;background:radial-gradient(70% 90% at 50% 0%,#ffe27a,var(--hl) 70%)}

/* =====================================================================================
   Public content pages (2026-11-08): articles, concepts, hubs, resources, legal.
   Same rules: no ink outlines or offset blocks; surfaces, radius, soft shadow, hairlines.
   ===================================================================================== */
/* cards */
.topic-card,.plain-card,.hub-card,.res-card,.list,.coming,.assure-card{border:0;border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-sm)}
.res-card:nth-child(2){box-shadow:var(--sh-sm)}
.topic-card,.list{overflow:hidden}
.facts-card{border:0;border-radius:var(--r);box-shadow:var(--sh);background:linear-gradient(180deg,var(--hl-wash),var(--surface) 60%)}
/* link cards: the shadow deepens on hover, nothing jumps */
.rel-grid a,.c-row,.next-nav a{border:0;border-radius:14px;background:var(--surface);box-shadow:var(--sh-sm);transition:box-shadow .2s var(--ease)}
.res-card{transition:box-shadow .2s var(--ease)}
.rel-grid a:hover,.c-row:hover,.next-nav a:hover,.res-card:hover{transform:none;box-shadow:var(--sh)}
/* current-affairs list rows */
.art{border-bottom:1px solid var(--tint);outline:0;transition:background .2s}
.art:hover{transform:none;outline:0;box-shadow:none;background:var(--hl-wash);border-bottom-color:var(--tint)}
.list .art:last-child{border-bottom:0}
/* labels and stickers become pills */
.chip{border:0;border-radius:var(--r-pill);background:var(--tint);padding:4px 10px}
.tab,.sec-tab{border-radius:var(--r-pill);transform:none;box-shadow:none}
.num{border:0;background:var(--tint)}
.num.cur{transform:none;box-shadow:none}
/* callouts */
.connect,.concept-upd{border:0;border-radius:12px}
.nudge,.after{border:0;border-radius:var(--r);box-shadow:none}
.after{border-radius:var(--r-lg)}
/* small yellow action buttons (Vault, concept link) */
.vault-btn,.concept-link a{border:0;border-radius:var(--r-pill);position:relative;overflow:hidden;isolation:isolate;transition:color .3s var(--ease),transform .12s var(--ease);--fill:var(--ink);--fill-ink:var(--hl)}
.vault-btn::before,.concept-link a::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--fill);transform:scaleX(0);transform-origin:left center;transition:transform .38s var(--ease)}
.vault-btn:hover,.concept-link a:hover{transform:none;box-shadow:none}
@media (hover:hover){.vault-btn:hover::before,.concept-link a:hover::before{transform:scaleX(1)}.vault-btn:hover,.concept-link a:hover{color:var(--fill-ink)!important}}
.vault-btn:active,.concept-link a:active{transform:scale(.97)}
/* dividers: hairlines instead of 1.5–2px rules */
.crumbs{border-bottom:0}
.pt,.tl-row{border-bottom:1px solid var(--tint)}
.tl,.concept-link{border-top:1px solid var(--tint)}
.body th,.body td{border:1px solid var(--tint-strong)}
/* concept body */
.concept-def .bx-h{border-top:0;padding-top:8px}
.concept-def ul>li::before,.body li::before{border:0;border-radius:50%;transform:none;width:8px;height:8px}
.concept-def .bx-h--confused+ul,.concept-def .bx-h--confused+p+ul{border:0;border-radius:var(--r);box-shadow:var(--sh-sm)}
.concept-def .bx-h--glossary+ul{border:0;border-radius:var(--r)}
.concept-def .bx-h--issues+ul,.concept-def .bx-h--issues+p+ul{border-left:0;border-radius:var(--r);background:#fbefeb}
.concept-def .cv img{border:0;border-radius:12px;box-shadow:var(--sh-sm)}
/* hero band on course pages: price chip + note read on ink */
.mk-hero .price-chip{background:var(--on-dark-tint);box-shadow:none}
.mk-hero .price-chip b{color:var(--paper)}
.mk-hero .price-chip span{color:rgba(249,246,238,.7)}
.mk-hero .mk-note{color:rgba(249,246,238,.66)}
.mk-hero .mk-note .ic{color:var(--hl)}
.ticker{border-bottom:0}

/* =====================================================================================
   Reading (2026-11-08): separation stays, in a modern form. Two dividers:
   section = a short highlighter stroke + a hairline fading right; row = a fading hairline.
   Body text one step larger now that the boxes are gone; the first paragraph is no
   longer bigger than the rest.
   ===================================================================================== */
:root{
  --sep-section:linear-gradient(var(--hl),var(--hl)) 0 0/44px 3px no-repeat,linear-gradient(90deg,rgba(25,31,51,.2),rgba(25,31,51,.03)) 0 1px/100% 1px no-repeat;
  --sep-row:linear-gradient(90deg,rgba(25,31,51,.15),rgba(25,31,51,.03)) 0 100%/100% 1px no-repeat;
}
.concept-def .bx-h{border-top:0;border-radius:0;padding-top:24px;background:var(--sep-section)}
.pt,.tl-row,.chg li,.faq details{border-bottom:0;background:var(--sep-row)}
.tl{border-top:0}
.faq{border-top:0}
.faq details:first-child{background:linear-gradient(90deg,rgba(25,31,51,.15),rgba(25,31,51,.03)) 0 0/100% 1px no-repeat,var(--sep-row)}
/* sizes */
.body p,.concept-def p{font-size:17.5px}
.pt p{font-size:17.5px}
.body li,.concept-def ul>li,.concept-def ol>li{font-size:17px}
.facts-card li{font-size:16.5px}
/* first paragraph: same size and colour as the rest */
.concept-def>p:first-child{font-size:17.5px;line-height:1.75;color:var(--body)}
.concept-def p:first-child::first-letter{font-weight:inherit;color:inherit}

/* =====================================================================================
   Typography: the device's own UI font for everything (Segoe UI on Windows, San Francisco
   on Apple, Roboto on Android). Inter + Literata were tried on 2026-11-08 and dropped the
   same day at the founder's request: the serif read like Cambria, not modern.
   ===================================================================================== */
:root{
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --read:var(--font);
}
.body p,.body li,.pt p,.concept-def p,.concept-def ul>li,.concept-def ol>li,.facts-card li,.connect p{
  font-family:var(--read);font-size:17px;line-height:1.72;color:#262f48}
.facts-card li,.connect p{font-size:16px}

/* Hero laptop clip is recorded at 4:3 (1024x768) so it reads larger; other laptop clips stay 1024x640 */
.mk-hero .dev-laptop video,.mk-hero .dev-laptop img{aspect-ratio:4/3}