/* Nandy Cyber Success — a personal teaching brand.
   Not a corporate security site: this one is a person talking to people starting
   out. Warm ink on soft paper, a serif with real character for headings, and a
   single teal accent. Editorial rather than salesy. */

:root{
  --paper:#FBF9F5;
  --card:#FFFFFF;
  --ink:#1F2430;
  --ink-2:#4C5567;
  --muted:#7A8496;
  --rule:#E1DCD2;
  --teal:#0F766E;
  --teal-dk:#0B5B55;
  --plum:#3B2F4A;

  --shell:72rem;
  --s--1:clamp(.85rem,.82rem + .13vw,.93rem);
  --s-0:clamp(1.02rem,.98rem + .2vw,1.12rem);
  --s-1:clamp(1.18rem,1.08rem + .5vw,1.45rem);
  --s-2:clamp(1.5rem,1.28rem + 1.05vw,2.1rem);
  --s-3:clamp(1.95rem,1.55rem + 2vw,3rem);
  --s-4:clamp(2.4rem,1.75rem + 3.2vw,4.1rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Karla,"Helvetica Neue",Arial,sans-serif;
  font-size:var(--s-0);line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  margin:0;font-family:Fraunces,Georgia,serif;font-weight:700;
  line-height:1.14;letter-spacing:-.012em;
}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
img,iframe{max-width:100%;display:block}
.shell{width:min(100% - 2.4rem,var(--shell));margin-inline:auto}
.narrow{width:min(100% - 2.4rem,44rem)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* -------------------------------------------------------------- header */
.masthead{background:var(--card);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:30}
.head-row{display:flex;align-items:center;gap:1.4rem;min-height:4.4rem}
.brand{
  font-family:Fraunces,Georgia,serif;font-weight:700;font-size:1.16rem;
  text-decoration:none;margin-right:auto;letter-spacing:-.02em;
}
.brand em{color:var(--teal);font-style:normal}
#nav{display:flex;align-items:center;gap:1.5rem}
#nav a{text-decoration:none;font-size:var(--s--1);font-weight:500;color:var(--ink-2)}
#nav a:hover{color:var(--teal)}
.nav-cta{
  background:var(--teal);color:#fff !important;font-weight:700 !important;
  padding:.5rem 1.05rem;border-radius:2rem;
}
.nav-cta:hover{background:var(--teal-dk)}
.menu-btn{
  display:none;background:none;border:1px solid var(--rule);color:var(--ink);
  font:inherit;font-size:var(--s--1);padding:.4rem .85rem;border-radius:.35rem;cursor:pointer;
}

/* --------------------------------------------------------------- hero */
.hero{padding:clamp(3rem,6vw,5.2rem) 0;border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;gap:2.6rem}
@media(min-width:56rem){.hero-grid{grid-template-columns:1.35fr .85fr;gap:4rem;align-items:start}}
.kicker{
  font-size:var(--s--1);color:var(--teal);font-weight:700;margin:0 0 .9rem;
}
.hero h1{font-size:var(--s-4)}
.hero .lead{margin:1.2rem 0 2rem;font-size:var(--s-1);color:var(--ink-2);max-width:46ch}
.hero-side{background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--teal);padding:1.6rem}
.hero-side-note{margin:1.2rem 0 0;font-size:var(--s--1);color:var(--muted)}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 1.4rem}
.stats strong{
  display:block;font-family:Fraunces,Georgia,serif;font-size:var(--s-2);
  line-height:1;letter-spacing:-.02em;
}
.stats span{display:block;font-size:var(--s--1);color:var(--muted);margin-top:.2rem;line-height:1.35}

.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:0}
.btn{
  display:inline-block;background:var(--teal);color:#fff;text-decoration:none;
  font-weight:700;font-size:var(--s-0);padding:.78rem 1.6rem;border-radius:2rem;
  border:0;cursor:pointer;font-family:inherit;
}
.btn:hover{background:var(--teal-dk)}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-line{background:transparent;color:var(--teal);box-shadow:inset 0 0 0 2px var(--teal)}
.btn-line:hover{background:rgba(15,118,110,.08)}

/* -------------------------------------------------------------- bands */
.band{padding:clamp(2.6rem,5vw,4.2rem) 0}
.band > h2,.band .shell > h2{font-size:var(--s-2);max-width:24ch}
.band-lead{color:var(--muted);margin:.8rem 0 2rem;max-width:56ch}
.band-tint{background:var(--card);border-block:1px solid var(--rule)}
.band-dark{background:var(--plum);color:#F3EFF6}
.band-dark h2{font-size:var(--s-2)}
.band-dark p{color:#CFC4D8}

/* -------------------------------------------------------------- offers */
.offers{display:grid;gap:1.4rem;margin-top:2rem}
@media(min-width:44rem){.offers{grid-template-columns:1fr 1fr}}
@media(min-width:68rem){.offers{grid-template-columns:repeat(4,1fr)}}
.offer{background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--teal);padding:1.4rem}
.offer h3{font-size:var(--s-1);margin-bottom:.55rem}
.offer h3 a{text-decoration:none}
.offer h3 a:hover{color:var(--teal)}
.offer p{margin:0;font-size:var(--s--1);color:var(--ink-2);line-height:1.55}
.offer em{font-style:italic}

/* ------------------------------------------------------------- reasons */
.reasons{display:grid;gap:1.6rem 2.4rem;margin-top:1.6rem}
@media(min-width:46rem){.reasons{grid-template-columns:1fr 1fr}}
@media(min-width:70rem){.reasons{grid-template-columns:repeat(3,1fr)}}
.reasons li{border-top:1px solid var(--rule);padding-top:1rem}
.reasons h3{font-size:var(--s-1);margin-bottom:.4rem}
.reasons p{margin:0;color:var(--ink-2);font-size:var(--s--1);line-height:1.55}

.plain{margin-top:1.2rem}
.plain li{
  padding:.6rem 0 .6rem 1.7rem;position:relative;border-bottom:1px solid var(--rule);
}
.plain li:last-child{border-bottom:0}
.plain li::before{content:"";position:absolute;left:0;top:1.2em;width:.8rem;height:2px;background:var(--teal)}

/* ------------------------------------------------------- lessons/chapters */
.lessons{counter-reset:none;margin-top:1.6rem;display:grid;gap:0}
.lesson{border-top:1px solid var(--rule);padding:1.3rem 0}
.lesson:last-child{border-bottom:1px solid var(--rule)}
.lesson-no{
  margin:0 0 .3rem;font-size:var(--s--1);font-weight:700;color:var(--teal);
  letter-spacing:.02em;
}
.lesson h3{font-size:var(--s-1);margin-bottom:.45rem}
.lesson p:last-child{margin:0;color:var(--ink-2);max-width:70ch}

/* ----------------------------------------------------------- resources */
.resources{display:grid;gap:1.4rem;padding:2.4rem 0 4rem}
@media(min-width:46rem){.resources{grid-template-columns:1fr 1fr}}
@media(min-width:72rem){.resources{grid-template-columns:repeat(3,1fr)}}
.resource{
  background:var(--card);border:1px solid var(--rule);padding:1.5rem;
  display:flex;flex-direction:column;
}
.res-type{
  margin:0 0 .7rem;font-size:.72rem;font-weight:700;color:var(--teal);
  border:1px solid var(--teal);border-radius:.2rem;padding:.1rem .4rem;align-self:flex-start;
}
.resource h3{font-size:var(--s-1);margin-bottom:.55rem}
.resource > p:nth-of-type(2){color:var(--ink-2);font-size:var(--s--1);line-height:1.55;flex:1}
.resource p:last-child{margin:1.1rem 0 0}

/* --------------------------------------------------------------- posts */
.post-cards{display:grid;gap:1.5rem;margin-top:1.8rem}
@media(min-width:48rem){.post-cards{grid-template-columns:repeat(3,1fr)}}
.post-cards-list{padding:2.4rem 0 3.4rem}
@media(min-width:48rem){.post-cards-list{grid-template-columns:1fr 1fr}}
.post-card{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--teal);padding:1.4rem}
.post-card h3{font-size:var(--s-1);margin-bottom:.55rem;line-height:1.2}
.post-card h3 a{text-decoration:none}
.post-card h3 a:hover{color:var(--teal)}
.post-card p{margin:0;font-size:var(--s--1);color:var(--ink-2);line-height:1.55}

/* ---------------------------------------------------------- page heads */
.page-head{background:var(--card);border-bottom:1px solid var(--rule);padding:clamp(2.4rem,5vw,3.8rem) 0}
.page-head h1{font-size:var(--s-3);max-width:24ch}
.page-head .lede{margin-top:1.1rem;font-size:var(--s-1);color:var(--ink-2);max-width:56ch;line-height:1.5}
.page-head .actions{margin-top:1.8rem}
.crumb{font-size:var(--s--1);color:var(--muted);margin:0 0 .9rem}
.crumb a{text-decoration:none;color:var(--muted)}
.crumb a:hover{color:var(--teal)}

.prose{padding:2.4rem 0 3.4rem}
.prose h2{font-size:var(--s-1);margin:2.2rem 0 .8rem}
.prose p{color:var(--ink-2);max-width:66ch}
.prose a{color:var(--teal)}
.article p{font-size:1.06rem;line-height:1.75}
.prose .stats{max-width:34rem;margin:1.4rem 0 0}

/* ------------------------------------------------------------ cta split */
.cta-split{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;align-items:center;justify-content:space-between}
.cta-split > div:first-child{max-width:44ch}
.cta-split p{margin:.6rem 0 0}

/* ------------------------------------------------------------- contact */
.contact-grid{display:grid;gap:3rem;padding:2.6rem 0 4rem}
@media(min-width:56rem){.contact-grid{grid-template-columns:1.4fr 1fr;gap:4rem}}
.contact-grid h2{font-size:var(--s-2);margin-bottom:1.4rem}
.field{margin:0 0 1.1rem}
.field label{display:block;font-size:var(--s--1);font-weight:700;margin-bottom:.35rem}
.field input[type=text],.field input[type=email],.field textarea{
  width:100%;font:inherit;font-size:var(--s-0);color:var(--ink);background:var(--card);
  border:1px solid var(--rule);border-radius:.35rem;padding:.7rem .85rem;
}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{
  border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(15,118,110,.14);
}
.field-row{display:grid;gap:0}
@media(min-width:38rem){.field-row{grid-template-columns:1fr 1fr;gap:0 1.1rem}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.direct dt{font-size:var(--s--1);color:var(--muted);margin-top:1.1rem}
.direct dt:first-child{margin-top:0}
.direct dd{margin:.15rem 0 0}
.direct a{color:var(--ink);text-decoration-color:var(--teal);text-underline-offset:3px}
.direct a:hover{color:var(--teal)}
.form-note{padding:2.4rem 0 4rem}

/* -------------------------------------------------------------- footer */
.footer{background:var(--ink);color:#A6AFC0;padding:3rem 0 2rem;font-size:var(--s--1)}
.footer-grid{display:grid;gap:2rem}
@media(min-width:46rem){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.footer h3{
  font-family:Karla,sans-serif;font-size:var(--s--1);color:#fff;
  margin-bottom:.8rem;font-weight:700;
}
.footer-mission p{color:#A6AFC0;max-width:34ch;margin:0}
.footer li{margin-bottom:.4rem}
.footer a{color:#A6AFC0;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-note{margin:2.4rem 0 0;padding-top:1.3rem;border-top:1px solid #333B4C;color:#78829A}

/* --------------------------------------------------------- mobile nav */
@media(max-width:62rem){
  .menu-btn{display:block}
  .head-row{position:relative}
  #nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem 1.2rem 1.2rem;
    border-bottom:1px solid var(--rule);box-shadow:0 8px 20px rgba(31,36,48,.08);
  }
  body.nav-open #nav{display:flex}
  #nav a{padding:.72rem 0;border-bottom:1px solid var(--rule)}
  .nav-cta{text-align:center;margin-top:.8rem;border-bottom:0 !important}
}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------- imagery */
.brand{display:flex;align-items:center;gap:.6rem}
.brand img{height:1.7rem;width:auto}
.brand span{display:none}
@media(min-width:34rem){.brand span{display:inline}}

.portrait{
  width:min(100%,16rem);height:auto;margin:0 auto 1.4rem;border-radius:1rem;
}
@media(min-width:56rem){.portrait{width:100%;max-width:none}}

.about-portrait{
  float:right;width:11rem;height:auto;border-radius:.9rem;
  margin:0 0 1.2rem 1.6rem;
}
@media(max-width:36rem){.about-portrait{float:none;margin:0 auto 1.4rem;width:12rem}}

/* press strip */
.press{background:var(--card);border-bottom:1px solid var(--rule);padding:1.8rem 0}
.press-label{
  margin:0 0 1rem;font-size:.74rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
}
.press-logos{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.6rem;
}
.press-logos img{
  height:1.9rem;width:auto;opacity:.5;filter:grayscale(1);
}
.press-logos img:hover{opacity:.8}

/* post cards with thumbnails */
.post-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.post-thumb{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--rule)}
.post-thumb img{width:100%;height:100%;object-fit:cover}
.post-body{padding:1.3rem 1.4rem}
.post-hero{
  width:100%;height:auto;border-radius:.6rem;margin:2rem 0 0;
  aspect-ratio:3/2;object-fit:cover;
}

/* resources with covers */
.resource{padding:0;overflow:hidden}
.res-cover{
  width:100%;aspect-ratio:1/1;object-fit:cover;
  border-bottom:1px solid var(--rule);background:var(--paper);
}
.res-body{padding:1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.res-body > p:nth-of-type(2){color:var(--ink-2);font-size:var(--s--1);line-height:1.55;flex:1}
.res-dl{margin:1.1rem 0 0 !important}

/* Post cards without thumbnails: a rule and generous type carry the hierarchy
   instead of stock photography. */
.post-card{border-left:3px solid var(--teal)}
.post-card .post-body{padding:1.4rem 1.5rem}
.post-cards-list .post-card h3{font-size:var(--s-1);line-height:1.25}

/* ============================================================ resources
   Landing pages and library index for the free resource library.
   Appended to the main nandycybersuccess stylesheet. */

.no-gate{
  margin:.7rem 0 0;font-size:var(--s--1);color:var(--teal);font-weight:700;
}

.res-grid{display:grid;gap:2.6rem;padding:2.6rem 0 3.4rem}
@media(min-width:56rem){.res-grid{grid-template-columns:1fr 17rem;gap:3.5rem}}

.res-summary{
  font-size:var(--s-1);line-height:1.6;color:var(--ink-2);
  padding-bottom:1.4rem;border-bottom:1px solid var(--rule);
}
.res-main h2{font-size:var(--s-1);margin:2rem 0 .9rem}
.res-main .actions{margin-top:2.2rem}

.tick{margin:0}
.tick li{
  position:relative;padding:.5rem 0 .5rem 1.7rem;
  border-bottom:1px solid var(--rule);color:var(--ink-2);
}
.tick li:last-child{border-bottom:0}
.tick li::before{
  content:"";position:absolute;left:0;top:1.1em;width:.8rem;height:2px;background:var(--teal);
}

.phase-list{counter-reset:none;margin:0}
.phase-list li{
  border-top:1px solid var(--rule);padding:1.1rem 0;
}
.phase-list li:last-child{border-bottom:1px solid var(--rule)}
.phase-n{
  display:block;font-size:.76rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal);margin-bottom:.25rem;
}
.phase-list strong{display:block;font-size:var(--s-1);font-family:Fraunces,Georgia,serif}
.phase-dur{display:block;font-size:var(--s--1);color:var(--muted);margin-top:.15rem}
.phase-list p{margin:.5rem 0 0;color:var(--ink-2);font-size:var(--s--1);line-height:1.55}

.res-side{
  align-self:start;background:var(--card);border:1px solid var(--rule);
  border-top:3px solid var(--teal);padding:1.4rem;
}
.res-side h2{font-size:var(--s-1);margin-bottom:1rem}
.res-facts{margin:0}
.res-facts dt{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:.9rem}
.res-facts dt:first-child{margin-top:0}
.res-facts dd{margin:.1rem 0 0;font-weight:500}
.res-id{
  margin:1.4rem 0 0;padding-top:.9rem;border-top:1px solid var(--rule);
  font-size:.72rem;color:var(--muted);letter-spacing:.04em;
}

/* library index */
.res-group{padding:clamp(1.8rem,3vw,2.6rem) 0}
.res-group h2{font-size:var(--s-2);margin-bottom:1.2rem}
.res-rows{border-top:1px solid var(--rule)}
.res-row{border-bottom:1px solid var(--rule)}
.res-row a{
  display:grid;grid-template-columns:auto 1fr auto;gap:0 1.1rem;
  align-items:baseline;padding:1.1rem .3rem 1.1rem 0;text-decoration:none;
  transition:background .12s ease,padding .12s ease;
}
.res-row a:hover{background:var(--card);padding-left:.6rem}
.res-type-tag{
  font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--teal);border:1px solid var(--teal);border-radius:.2rem;
  padding:.12rem .4rem;white-space:nowrap;
}
.res-row-name{
  display:block;font-family:Fraunces,Georgia,serif;font-weight:700;
  font-size:var(--s-1);line-height:1.2;letter-spacing:-.015em;
}
.res-row a:hover .res-row-name{color:var(--teal)}
.res-row-desc{
  display:block;margin-top:.3rem;font-size:var(--s--1);color:var(--muted);
  line-height:1.55;max-width:72ch;
}
.res-go{color:var(--rule);font-size:1.1rem;transition:color .12s ease,transform .12s ease}
.res-row a:hover .res-go{color:var(--teal);transform:translateX(3px)}
@media(max-width:34rem){
  .res-row a{grid-template-columns:1fr}
  .res-go{display:none}
  .res-type-tag{margin-bottom:.4rem;justify-self:start}
}

.phase-list li{display:block}
.phase-n{display:block !important}
.phase-list strong{display:block !important;margin:.1rem 0 0}
.phase-dur{display:block !important}
.brand img{height:1.7rem !important;width:auto !important}

/* ============================================================ resources
   Landing pages and library index for the free resource library.
   Appended to the main nandycybersuccess stylesheet. */

.no-gate{
  margin:.7rem 0 0;font-size:var(--s--1);color:var(--teal);font-weight:700;
}

.res-grid{display:grid;gap:2.6rem;padding:2.6rem 0 3.4rem}
@media(min-width:56rem){.res-grid{grid-template-columns:1fr 17rem;gap:3.5rem}}

.res-summary{
  font-size:var(--s-1);line-height:1.6;color:var(--ink-2);
  padding-bottom:1.4rem;border-bottom:1px solid var(--rule);
}
.res-main h2{font-size:var(--s-1);margin:2rem 0 .9rem}
.res-main .actions{margin-top:2.2rem}

.tick{margin:0}
.tick li{
  position:relative;padding:.5rem 0 .5rem 1.7rem;
  border-bottom:1px solid var(--rule);color:var(--ink-2);
}
.tick li:last-child{border-bottom:0}
.tick li::before{
  content:"";position:absolute;left:0;top:1.1em;width:.8rem;height:2px;background:var(--teal);
}

.phase-list{counter-reset:none;margin:0}
.phase-list li{
  border-top:1px solid var(--rule);padding:1.1rem 0;
}
.phase-list li:last-child{border-bottom:1px solid var(--rule)}
.phase-n{
  display:block;font-size:.76rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal);margin-bottom:.25rem;
}
.phase-list strong{display:block;font-size:var(--s-1);font-family:Fraunces,Georgia,serif}
.phase-dur{display:block;font-size:var(--s--1);color:var(--muted);margin-top:.15rem}
.phase-list p{margin:.5rem 0 0;color:var(--ink-2);font-size:var(--s--1);line-height:1.55}

.res-side{
  align-self:start;background:var(--card);border:1px solid var(--rule);
  border-top:3px solid var(--teal);padding:1.4rem;
}
.res-side h2{font-size:var(--s-1);margin-bottom:1rem}
.res-facts{margin:0}
.res-facts dt{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:.9rem}
.res-facts dt:first-child{margin-top:0}
.res-facts dd{margin:.1rem 0 0;font-weight:500}
.res-id{
  margin:1.4rem 0 0;padding-top:.9rem;border-top:1px solid var(--rule);
  font-size:.72rem;color:var(--muted);letter-spacing:.04em;
}

/* library index */
.res-group{padding:clamp(1.8rem,3vw,2.6rem) 0}
.res-group h2{font-size:var(--s-2);margin-bottom:1.2rem}
.res-rows{border-top:1px solid var(--rule)}
.res-row{border-bottom:1px solid var(--rule)}
.res-row a{
  display:grid;grid-template-columns:auto 1fr auto;gap:0 1.1rem;
  align-items:baseline;padding:1.1rem .3rem 1.1rem 0;text-decoration:none;
  transition:background .12s ease,padding .12s ease;
}
.res-row a:hover{background:var(--card);padding-left:.6rem}
.res-type-tag{
  font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--teal);border:1px solid var(--teal);border-radius:.2rem;
  padding:.12rem .4rem;white-space:nowrap;
}
.res-row-name{
  display:block;font-family:Fraunces,Georgia,serif;font-weight:700;
  font-size:var(--s-1);line-height:1.2;letter-spacing:-.015em;
}
.res-row a:hover .res-row-name{color:var(--teal)}
.res-row-desc{
  display:block;margin-top:.3rem;font-size:var(--s--1);color:var(--muted);
  line-height:1.55;max-width:72ch;
}
.res-go{color:var(--rule);font-size:1.1rem;transition:color .12s ease,transform .12s ease}
.res-row a:hover .res-go{color:var(--teal);transform:translateX(3px)}
@media(max-width:34rem){
  .res-row a{grid-template-columns:1fr}
  .res-go{display:none}
  .res-type-tag{margin-bottom:.4rem;justify-self:start}
}


/* phase rows: label, name and duration on their own lines */
.phase-list li{display:block}
.phase-n{display:block !important}
.phase-list strong{display:block !important;margin:.1rem 0 0}
.phase-dur{display:block !important}

/* the logo rule must win here too, since these pages load the shared sheet */
.brand img{height:1.7rem !important;width:auto !important}

/* ========================================================= /roadmap
   Assessment form and result page. Works without JavaScript; the
   numbering and generous spacing do the work a multi-step wizard
   would otherwise do. */

.rm-form-wrap{padding:2.6rem 0 4rem}
.rm-form fieldset{
  border:0;padding:0;margin:0 0 2.4rem;
  border-top:1px solid var(--rule);padding-top:1.4rem;
}
.rm-form legend{
  font-family:Fraunces,Georgia,serif;font-weight:700;font-size:var(--s-1);
  line-height:1.25;padding:0;margin-bottom:.9rem;
}
.q-n{
  display:inline-block;font-family:Karla,sans-serif;font-size:.78rem;
  font-weight:700;color:var(--teal);letter-spacing:.06em;margin-right:.6rem;
  vertical-align:.15em;
}
.opts{display:grid;gap:.5rem}
@media(min-width:40rem){.opts{grid-template-columns:1fr 1fr}}
.opts label{
  display:flex;align-items:flex-start;gap:.6rem;
  padding:.7rem .9rem;background:var(--card);
  border:1px solid var(--rule);border-radius:.4rem;
  font-size:var(--s--1);line-height:1.45;cursor:pointer;
  transition:border-color .12s ease,background .12s ease;
}
.opts label:hover{border-color:var(--teal)}
.opts input{margin-top:.2rem;accent-color:var(--teal);flex:none}
.opts input:checked + *,
.opts label:has(input:checked){
  border-color:var(--teal);background:rgba(15,118,110,.06);
}
.rm-submit{margin:2.6rem 0 1rem}
.rm-small{font-size:var(--s--1);color:var(--muted);max-width:56ch}

/* result page */
.rm-result{padding:2.4rem 0 1rem}
.rm-result h2{font-size:var(--s-1);margin:2rem 0 .9rem}
.rm-result h2:first-child{margin-top:0}
.rm-first{
  font-size:var(--s-1);line-height:1.6;color:var(--ink);
  padding:1.1rem 1.3rem;background:var(--card);
  border-left:3px solid var(--teal);margin:0 0 1.4rem;
}
.rm-note{font-size:var(--s--1);color:var(--muted);max-width:64ch;line-height:1.6}
.rm-note code{
  font-size:.8rem;background:var(--card);padding:.15rem .35rem;
  border:1px solid var(--rule);border-radius:.2rem;word-break:break-all;
}

/* ============================================================ hero
   Dark band at the top of an otherwise light site. All classes are
   prefixed .nhero / .nproof / .nbtn / .nlogo so nothing collides with
   the existing stylesheet. */

.nhero{
  --deep:#04171E;
  --deep-2:#072630;
  --spring:#2BE58B;
  --spring-2:#5CF0A8;
  --spring-dk:#17C173;
  --hair:rgba(140,200,210,.15);
  --dim:#9FBCC4;
  --line:rgba(140,200,210,.2);

  position:relative;
  background:
    radial-gradient(120% 95% at 76% 12%, #0C414C 0%, transparent 58%),
    linear-gradient(158deg, var(--deep) 0%, var(--deep-2) 52%, #05202A 100%);
  color:#EAF4F6;
  padding:clamp(2.2rem,4.5vw,3.4rem) 0 clamp(1.8rem,3.5vw,2.6rem);
  overflow:hidden;
}
.nhero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--hair) 1px,transparent 1px),
    linear-gradient(90deg,var(--hair) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(95% 75% at 72% 16%,#000 0%,transparent 72%);
  mask-image:radial-gradient(95% 75% at 72% 16%,#000 0%,transparent 72%);
  opacity:.55;
}
.nhero > *{position:relative;z-index:1}
.nhero svg{
  width:1.05em;height:1.05em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

.nhero-grid{display:grid;gap:1.6rem;align-items:center}
@media(min-width:62rem){.nhero-grid{grid-template-columns:1.12fr .88fr;gap:2rem}}

/* ------------------------------------------------------------ copy */
.nhero-eyebrow{
  margin:0 0 .9rem;font-size:.76rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--spring);
}
.nhero-eyebrow i{font-style:normal;margin:0 .5rem;opacity:.5}

.nhero-title{
  margin:0;font-family:Fraunces,Georgia,serif;font-weight:700;
  font-size:clamp(2.8rem,1.7rem + 4.8vw,5.2rem);line-height:1;
  letter-spacing:-.038em;color:#fff;
}
.nhero-title em{
  font-style:normal;
  background:linear-gradient(96deg,var(--spring) 10%,var(--spring-2) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.nhero-sub{
  margin:.75rem 0 0;font-family:Fraunces,Georgia,serif;font-weight:700;
  font-size:clamp(1.25rem,.95rem + 1.35vw,2.05rem);line-height:1.2;
  letter-spacing:-.022em;color:#fff;
}
.nhero-sub b{font-weight:700;color:#8FA9B2}
.nhero-sub em{font-style:normal;font-weight:700;color:var(--spring)}

.nhero-lead{
  margin:1rem 0 1.5rem;max-width:54ch;
  font-size:clamp(.98rem,.94rem + .2vw,1.08rem);line-height:1.62;color:#B4CCD3;
}

.nhero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.4rem}
.nbtn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(100deg,var(--spring) 0%,var(--spring-2) 100%);
  color:#04171E;text-decoration:none;font-weight:700;font-size:1rem;
  padding:.8rem 1.4rem;border-radius:.5rem;
  transition:filter .14s ease,transform .14s ease;
}
.nbtn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.nbtn span{margin-left:.15rem}
.nbtn-ghost{
  background:none;color:#EAF4F6;box-shadow:inset 0 0 0 1.5px rgba(43,229,139,.5);
}
.nbtn-ghost:hover{background:rgba(43,229,139,.1);filter:none}

.nhero-marks{display:flex;flex-wrap:wrap;gap:.55rem 1.7rem;margin:0;padding:0;list-style:none}
.nhero-marks li{
  display:flex;align-items:center;gap:.45rem;font-size:.9rem;color:#A8C3CB;
}
.nhero-marks svg{color:var(--spring)}

/* ---------------------------------------------------------- figure */
.nhero-figure{position:relative;justify-self:center;width:100%}
.nhero-figure img{
  width:min(100%,25rem);height:auto;display:block;margin:0 auto 0 0;
  -webkit-mask-image:
    linear-gradient(180deg,transparent 0,#000 8%,#000 76%,transparent 99%),
    linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
  mask-image:
    linear-gradient(180deg,transparent 0,#000 8%,#000 76%,transparent 99%),
    linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}

.nhero-sig{position:absolute;top:2%;right:0;text-align:center;z-index:2}
.nhero-sig-name{
  margin:0;font-family:Fraunces,Georgia,serif;font-style:italic;font-weight:500;
  font-size:2.1rem;line-height:1;color:#fff;
}
.nhero-sig-words{
  margin:.5rem 0 0;padding:0;list-style:none;
  font-size:.68rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#B4CCD3;line-height:1.9;
}

.nhero-quote{
  margin:0;position:absolute;right:0;bottom:20%;
  max-width:11.5rem;padding-left:.85rem;border-left:2px solid var(--spring);
  font-family:Fraunces,Georgia,serif;font-style:italic;
  font-size:1.02rem;line-height:1.4;color:#DCEEF1;
}
@media(max-width:62rem){
  .nhero-figure{order:-1;max-width:24rem}
  .nhero-figure img{width:min(100%,15rem)}
  .nhero-sig{top:2%;right:.5rem}
  .nhero-sig-name{font-size:1.6rem}
  .nhero-quote{display:none}
}
@media(max-width:34rem){.nhero-sig-words{display:none}}

/* ----------------------------------------------------------- proof */
.nproof{
  display:grid;gap:.85rem;margin:clamp(1.3rem,2.6vw,2rem) 0 0;padding:0;list-style:none;
}
@media(min-width:46rem){.nproof{grid-template-columns:1fr 1fr}}
@media(min-width:76rem){.nproof{grid-template-columns:1.5fr 1.05fr 1.05fr .85fr}}

.nproof-card{
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:.75rem;padding:.95rem 1.1rem 1.05rem;
}
.nproof-head{
  margin:0 0 .8rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
}

/* platform wordmarks, set in type rather than bitmap logos */
.nlogo{font-weight:800;letter-spacing:-.04em;line-height:1;font-size:1.3rem}
.nlogo-upwork{color:#fff}
.nlogo-upwork::first-letter{color:#14C57B}
.nlogo-fiverr{color:#fff}
.nlogo-fiverr i{font-style:normal;color:#1DBF73}
.nlogo-udemy{color:#fff}
.nlogo-udemy::first-letter{color:#A435F0}

.nproof-badge{
  display:inline-flex;align-items:center;gap:.32rem;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;
  color:#F5D060;background:rgba(245,208,96,.1);
  border:1px solid rgba(245,208,96,.3);border-radius:2rem;padding:.2rem .6rem;
}
.nproof-badge-blue{
  color:#5BB8F5;background:rgba(91,184,245,.1);border-color:rgba(91,184,245,.32);
}
.nproof-role{font-size:.85rem;color:var(--dim)}

.nproof-figs{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem}
.nproof-figs strong{
  display:block;font-size:1.42rem;font-weight:700;line-height:1.05;
  letter-spacing:-.025em;color:#fff;
}
.nproof-figs span{display:block;margin-top:.12rem;font-size:.76rem;color:var(--dim)}

.nproof-roles{
  display:flex;flex-direction:column;justify-content:center;gap:.75rem;
  padding:.3rem 0 .3rem 1.2rem;border-left:1px solid var(--line);
}
.nproof-roles span{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:#D3E6EA}
.nproof-roles svg{color:var(--dim)}
@media(max-width:76rem){
  .nproof-roles{
    flex-direction:row;flex-wrap:wrap;gap:.6rem 1.8rem;
    border-left:0;border-top:1px solid var(--line);padding:.9rem 0 0;
  }
}

.nhero-strip{
  margin:clamp(1.2rem,2.4vw,1.8rem) 0 0;text-align:center;
  font-size:.73rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:#6E939D;
}
.nhero-strip i{font-style:normal;margin:0 .6rem;color:rgba(43,229,139,.35)}
@media(max-width:48rem){.nhero-strip{letter-spacing:.08em;line-height:2.1}}

@media(prefers-reduced-motion:reduce){.nbtn{transition:none}}

/* ------------------------------------------- about page: portrait + proof
   The same portrait as the hero, but set in a dark panel so it belongs on
   a light page rather than fighting it. */

.nabout-figure{
  float:right;width:13rem;margin:.2rem 0 1.4rem 1.8rem;
  border-radius:.9rem;overflow:hidden;
  background:
    radial-gradient(110% 85% at 60% 15%, #0C414C 0%, transparent 62%),
    linear-gradient(158deg,#04171E 0%,#072630 55%,#05202A 100%);
}
.nabout-figure img{
  width:100%;height:auto;display:block;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
}
@media(max-width:40rem){
  .nabout-figure{float:none;margin:0 auto 1.6rem;width:11rem}
}

/* platform cards on a light background */
.nproof-light{
  --spring:#0F766E;
  --dim:#7A8496;
  --line:#E1DCD2;
  margin:1.2rem 0 2rem;
}
.nproof-light .nproof-card{
  background:#fff;border:1px solid var(--line);border-top:2px solid #0F766E;
}
.nproof-light .nlogo-upwork{color:#1F2430}
.nproof-light .nlogo-upwork::first-letter{color:#14A800}
.nproof-light .nlogo-fiverr{color:#1F2430}
.nproof-light .nlogo-fiverr i{color:#1DBF73}
.nproof-light .nlogo-udemy{color:#1F2430}
.nproof-light .nlogo-udemy::first-letter{color:#A435F0}
.nproof-light .nproof-badge{
  color:#8A6A00;background:rgba(245,208,96,.16);border-color:rgba(180,140,20,.35);
}
.nproof-light .nproof-badge-blue{
  color:#1B6CA8;background:rgba(91,184,245,.14);border-color:rgba(27,108,168,.3);
}
.nproof-light .nproof-figs strong{color:#1F2430}
.nproof-light .nproof-figs span{color:#7A8496}
.nproof-light .nproof-role{color:#7A8496}
.nproof-light svg{
  width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
@media(min-width:46rem){.nproof-light{grid-template-columns:1fr 1fr}}
@media(min-width:64rem){.nproof-light{grid-template-columns:1.5fr 1fr 1fr}}