/* WordToResume v16 — glassmorphism theme (CSS only). The resume preview (#resume) is never styled here. */
:root{
  --gl:rgba(255,255,255,.58);        /* glass fill */
  --gl-strong:rgba(255,255,255,.78); /* inputs, readable areas */
  --gl-soft:rgba(255,255,255,.38);   /* nested items */
  --glb:rgba(255,255,255,.75);       /* glass edge */
  --gls:0 8px 32px rgba(40,60,140,.14),inset 0 1px 0 rgba(255,255,255,.85);
  --blur:blur(18px) saturate(1.6);
  --r:24px;
}
html{background:#E9F0FF}
body{background:transparent;color:#0A1424}

/* soft glowing colour blobs behind everything */
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(70px)}
body::before{width:56vmax;height:56vmax;left:-14vmax;top:-12vmax;background:radial-gradient(circle,rgba(60,125,255,.55),transparent 68%)}
body::after{width:50vmax;height:50vmax;right:-14vmax;bottom:-12vmax;background:radial-gradient(circle,rgba(176,110,255,.45),rgba(255,170,110,.28) 55%,transparent 72%)}
html::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(135deg,#E6EFFF 0%,#F3ECFF 50%,#FFF1E3 100%)}

/* ---------- header ---------- */
header{background:var(--gl)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--glb)!important;box-shadow:0 4px 24px rgba(40,60,140,.08)}
.logo img,.brand img{border-radius:10px;filter:drop-shadow(0 4px 10px rgba(22,100,217,.35))}
.btn{box-shadow:0 8px 22px rgba(22,100,217,.30)}
.btn.ghost{background:var(--gl-strong);border-color:rgba(22,100,217,.25);box-shadow:none}
.menu-toggle{background:var(--gl-strong)!important}

/* ---------- plain sections become see-through so the glow shows ---------- */
.hero,.work,.trustband,section.block,section.block.alt,.content,.content.soft,.faq,.page,.build{background:transparent!important}
.hero{padding-top:48px}
.heroicon{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 14px;border-radius:24px;background:var(--gl);border:1px solid var(--glb);box-shadow:var(--gls);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.heroicon img{width:56px;height:56px}
.eyebrow{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--gl);border:1px solid var(--glb);color:#0F4DAE}

/* 3 step pills */
.steps{gap:14px}
.steps li{padding:9px 22px 9px 10px;border-radius:999px;background:var(--gl);border:1px solid var(--glb);box-shadow:var(--gls);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);white-space:nowrap}

/* ---------- glass cards (home + inner pages) ---------- */
.panel,.chatbar,.ctrlpanel,.dlbar,.tablewrap,.card,.features article,.prompt,.notice,.prose,.tcard,.path-card,.toolcard,.stats li{
  background:var(--gl)!important;border:1px solid var(--glb)!important;border-radius:var(--r);box-shadow:var(--gls);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.panel{overflow:hidden}
.panel h2{background:transparent;border-bottom:1px solid rgba(255,255,255,.7)}

/* chat */
.chatbar{padding:28px 32px}
.chatbar h2{margin-bottom:14px}
.chatbar .box{background:var(--gl-strong);border:1.5px solid rgba(22,100,217,.22);box-shadow:inset 0 1px 3px rgba(40,60,140,.06),0 4px 16px rgba(40,60,140,.08)}
.chatbar .box:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,100,217,.15),0 4px 18px rgba(22,100,217,.18)}
.chatbar .msg.bot,.msg.bot{background:var(--gl-strong);border:1px solid var(--glb)}
.chatbar .quota{color:#34445E}

/* preview area: glass frame, paper stays white */
.stage{background:rgba(255,255,255,.32)}
#paperWrap{border-radius:6px;box-shadow:0 12px 40px rgba(31,50,120,.28)}
.page-nav button{background:var(--gl-strong)!important;border:1px solid var(--glb)!important}
.preview-help,.pageinfo,#pageCounter{color:#1B2B45}

/* style controls */
.ctrlpanel .tools{padding:20px 24px}
.tpls button{background:var(--gl-strong)!important;border:1.5px solid rgba(255,255,255,.9)!important;box-shadow:0 4px 14px rgba(40,60,140,.10)}
.tpls button[aria-pressed="true"]{border-color:var(--blue)!important;box-shadow:0 0 0 3px rgba(22,100,217,.30),0 6px 18px rgba(22,100,217,.18)}
.swatches button{border-color:rgba(255,255,255,.95)}
select{background:var(--gl-strong);border:1.5px solid rgba(22,100,217,.22)}

/* download bar (this was the broken one: no inner spacing) */
.dlbar{padding:18px 22px;gap:12px 14px}
.dlbar small{color:#1B2B45;font-weight:600}

/* ---------- logos / chips strip ---------- */
.trustband{padding:48px 0 40px;text-align:center;overflow:hidden}
.tbh{font-size:clamp(1.4rem,3vw,2rem);margin:0 0 20px}
.tbh2{font:600 1.05rem/1.4 Manrope,system-ui,sans-serif;margin:28px 0 14px;color:#34445E}
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq{display:flex;flex-shrink:0;min-width:100%;justify-content:space-around;align-items:center;gap:44px;margin:0;padding:8px 22px;list-style:none;animation:mq 40s linear infinite}
.mq li{font:800 1.5rem/1 Manrope,system-ui,sans-serif;color:#5C6C8C;white-space:nowrap}
.mq.chips{gap:14px;animation-duration:48s;animation-direction:reverse}
.mq.chips li{font:700 .95rem/1 Manrope,system-ui,sans-serif;color:#16315F;background:var(--gl);border:1px solid var(--glb);border-radius:999px;padding:11px 20px;box-shadow:var(--gls)}
.marquee:hover .mq{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-100%)}}
.tp{margin-top:30px}
.tpbtn{display:inline-flex;gap:8px;align-items:center;padding:13px 24px;border-radius:999px;background:var(--gl-strong);border:1.5px solid #00B67A;color:#0B1F3D;font-weight:800;text-decoration:none;box-shadow:var(--gls)}

/* ---------- path cards ---------- */
.path-grid{gap:18px}
.path-card{padding:26px 24px;transition:transform .25s,box-shadow .25s}
.path-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(40,60,140,.22),inset 0 1px 0 rgba(255,255,255,.9)}
.section-kicker{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--gl);border:1px solid var(--glb)}

/* ---------- content blocks: each text section sits on its own glass card ---------- */
section.block{padding:28px 0}
section.block .wrap.narrow{
  width:calc(100% - 32px);max-width:820px;margin:0 auto;padding:40px 44px;
  background:var(--gl);border:1px solid var(--glb);border-radius:28px;box-shadow:var(--gls);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
section.block>.wrap:not(.narrow){padding-bottom:6px}
.block h2{margin-bottom:16px}

/* table */
.tablewrap{margin-top:20px;padding:6px 8px 4px}
table{background:transparent}
th,td{border-top:1px solid rgba(22,100,217,.16)!important}
thead th{padding-top:14px!important;border-top:0!important}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0!important}
.us{background:rgba(22,100,217,.10)!important}

/* numbers: tiles inside the card */
.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.stats li{padding:20px 18px!important;border-top:3px solid var(--blue)!important;border-left:1px solid var(--glb)!important;background:var(--gl-soft)!important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:18px}
.stats strong{font-size:40px}

/* who it is for: lighter rows, no extra boxes */
.who div{border-top:1px solid rgba(22,100,217,.16)!important;border-bottom:0!important}
.who div:last-child{border-bottom:0!important}

/* FAQ */
details{background:var(--gl-soft);border:1px solid var(--glb)!important;border-radius:16px;padding:14px 20px!important;margin:10px 0}
details:last-of-type{border-bottom:1px solid var(--glb)!important}
details[open]{background:var(--gl-strong)}
summary{padding:2px 0}
.mail{overflow-wrap:anywhere}

/* ---------- footer ---------- */
footer{background:linear-gradient(135deg,rgba(11,31,61,.94),rgba(23,49,107,.92))!important;color:#fff!important;border-top:1px solid rgba(255,255,255,.25)!important;margin-top:28px}
footer a,footer p,footer .made{color:#fff!important}

/* ---------- cookie banner (it is made by analytics.js with inline styles, so !important is needed) ---------- */
div[role="dialog"][aria-label="Analytics choice"]{background:rgba(255,255,255,.82)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glb)!important;border-radius:22px!important;box-shadow:0 12px 40px rgba(40,60,140,.25),inset 0 1px 0 rgba(255,255,255,.9)!important}
#wtr-no{background:rgba(255,255,255,.7)!important;border:1.5px solid rgba(22,100,217,.25)!important}

/* ---------- small screens: lighter blur, firmer fill so text stays readable ---------- */
@media(max-width:900px){
  nav{background:rgba(255,255,255,.94)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
}
@media(max-width:700px){
  :root{--gl:rgba(255,255,255,.72);--blur:blur(10px) saturate(1.4);--r:20px}
  .chatbar{padding:18px}
  section.block .wrap.narrow{padding:26px 20px;width:calc(100% - 24px);border-radius:24px}
  .steps li{white-space:normal}
  .who div{grid-template-columns:1fr}
  .mq li{font-size:1.2rem}
  .dlbar{padding:16px}
  body::before,body::after{filter:blur(50px)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--gl:rgba(255,255,255,.92);--gl-strong:#fff;--gl-soft:rgba(255,255,255,.7)}
}
@media(prefers-reduced-transparency:reduce){
  :root{--gl:#fff;--gl-strong:#fff;--gl-soft:#F4F7FD}
  *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* ---------- gentle motion ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
.hero .wrap>*{animation:fu .7s both}
.hero .wrap>*:nth-child(2){animation-delay:.08s}.hero .wrap>*:nth-child(3){animation-delay:.16s}.hero .wrap>*:nth-child(n+4){animation-delay:.24s}
.heroicon{animation:fl 5s ease-in-out infinite}
@keyframes fu{from{opacity:0;transform:translateY(16px)}}
@keyframes fl{50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ---------- inner pages: keep the menu on one line ---------- */
header nav a,header .btn{white-space:nowrap}
header nav{gap:14px}
header nav a{font-size:13.5px}
.prose{padding-top:28px}
.prose>*:first-child{margin-top:0}

/* ---------- "More ways to build your resume" link cards (fixes the glitch) ---------- */
.toolgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:24px 0 0;padding:0;list-style:none}
a.toolcard{display:flex;flex-direction:column;gap:8px;padding:24px 22px;min-height:150px;text-decoration:none!important;color:#0A1424;transition:transform .25s,box-shadow .25s}
a.toolcard b{display:block;font:700 1.2rem/1.25 Newsreader,Georgia,serif;color:#0A1424;text-decoration:none}
a.toolcard span{display:block;font:500 .95rem/1.5 Manrope,system-ui,sans-serif;color:#34445E;text-decoration:none}
a.toolcard i{display:block;margin-top:auto;padding-top:8px;font-style:normal;font-weight:800;color:#1664D9;text-decoration:none}
a.toolcard:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(40,60,140,.22),inset 0 1px 0 rgba(255,255,255,.9)}
a.toolcard:hover i{text-decoration:underline}
@media(max-width:700px){a.toolcard{min-height:0}}