/* COMLUK Profile product page
   Product-specific presentation only. Corporate legal/static pages remain on site.css. */

.profile-product-page {
  --profile-blue: #1764f6;
  --profile-blue-2: #0d51d8;
  --profile-navy: #07111d;
  --profile-navy-2: #0c1928;
  --profile-charcoal: #131820;
  --profile-paper: #fbfcfe;
  --profile-paper-2: #f4f7fb;
  --profile-line: #dce3ed;
  --profile-muted: #66717f;
  background: var(--profile-paper);
}

/* Header ------------------------------------------------------------------ */
.profile-header.site-header {
  height: 78px;
  padding: 0 clamp(20px, 3.4vw, 54px);
  color: var(--ink);
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #e2e6ec;
  backdrop-filter: blur(14px);
}

.profile-brand-lockup {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 17px;
}

.profile-corporate-brand,
.profile-product-brand {
  display: inline-flex;
  align-items: center;
}

.profile-corporate-brand img { width: 136px; }
.profile-product-brand img { width: 150px; max-height: 42px; object-fit: contain; }
.profile-brand-divider { width: 1px; height: 34px; background: #d8dde5; }

.profile-desktop-nav { gap: 2px; }
.profile-nav-link {
  min-height: 38px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #242a32;
  font-size: .82rem;
  font-weight: 650;
  cursor: pointer;
}
.profile-nav-link:hover,
.profile-nav-link:focus-visible { color: var(--profile-blue); outline: none; }
.profile-nav-link.is-current { color: var(--profile-blue); border-bottom-color: var(--profile-blue); }
.profile-nav-placeholder { opacity: .92; }

.profile-login-button,
.profile-start-button {
  min-height: 40px;
  padding: 0 17px;
  border-radius: 4px;
  font-size: .82rem;
  font-weight: 750;
}
.profile-login-button {
  margin-left: 8px;
  border: 1px solid #cfd6df;
  background: #fff;
  color: #5d6671;
  cursor: default;
}
.profile-login-button:disabled { opacity: .72; }
.profile-start-button {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--profile-blue);
  background: var(--profile-blue);
  color: #fff;
}
.profile-start-button:hover,
.profile-start-button:focus-visible { background: var(--profile-blue-2); outline: none; }

/* Hero -------------------------------------------------------------------- */
.profile-hero {
  position: relative;
  min-height: 0;
  padding: 116px 24px 54px;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 40%, rgba(23,100,246,.14), transparent 30%),
    linear-gradient(118deg, #060d16 0%, #0b1623 55%, #101823 100%);
}
.profile-hero::before,
.profile-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: .34;
}
.profile-hero::before {
  inset: 0 42% 0 auto;
  width: 440px;
  background: linear-gradient(135deg, transparent 0 47%, rgba(23,100,246,.12) 47% 47.5%, transparent 47.5% 62%, rgba(23,100,246,.08) 62% 62.5%, transparent 62.5%);
}
.profile-hero::after {
  right: -130px;
  top: 90px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(23,100,246,.14);
  transform: rotate(32deg);
}

.profile-hero-shell {
  position: relative;
  z-index: 2;
  width: min(1260px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,.96fr) minmax(450px,1.04fr);
  gap: clamp(10px,2.4vw,34px);
  align-items: center;
}
.profile-hero-copy { max-width: 590px; position:relative; z-index:5; }
.profile-hero-logo { width: min(245px, 60vw); margin: 0 0 22px; }
.profile-hero h1 {
  margin: 0;
  font-size: clamp(3.1rem,5.4vw,6rem);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 700;
}
.profile-hero h1 span { color: #f7f9fc; }
.profile-hero-copy > p {
  max-width: 535px;
  margin: 21px 0 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(1rem,1.35vw,1.18rem);
  line-height: 1.72;
}
.profile-hero-actions { display:flex; gap:13px; margin-top:26px; }
.profile-hero-actions-mobile { display:none; }
.profile-button {
  min-height: 49px;
  padding: 0 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 4px;
  font-weight: 750;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}
.profile-button:hover,
.profile-button:focus-visible { transform: translateY(-1px); outline: none; }
.profile-button-primary { min-width: 168px; background: var(--profile-blue); border: 1px solid var(--profile-blue); color: #fff; }
.profile-button-primary:hover { background: var(--profile-blue-2); border-color: var(--profile-blue-2); }
.profile-button-secondary { min-width: 160px; border: 1px solid rgba(255,255,255,.48); color: #fff; background: rgba(255,255,255,.025); }
.profile-button-secondary:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.profile-button .ui-icon { width: 18px; height: 18px; }


/* Hero product composition */
.profile-hero-visual {
  position: relative;
  min-height: 445px;
  display: grid;
  place-items: center;
  transform: translateX(-28px);
}
.profile-phone {
  position: relative;
  z-index: 4;
  width: 220px;
  aspect-ratio: 9 / 18.8;
  padding: 8px;
  border-radius: 37px;
  background: linear-gradient(145deg,#8a8f96 0%,#1e2228 17%,#07090c 55%,#7c838c 100%);
  box-shadow: 0 28px 62px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.18) inset;
  transform: rotate(-2.4deg) translateX(-58px);
}
.profile-phone::after {
  content:"";
  position:absolute;
  inset:7px;
  border-radius:31px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  pointer-events:none;
}
.profile-phone-speaker {
  position:absolute;
  z-index:8;
  top:13px;
  left:50%;
  width:68px;
  height:19px;
  border-radius:20px;
  background:#030405;
  transform:translateX(-50%);
}
.profile-phone-screen {
  position:relative;
  height:100%;
  border-radius:30px;
  overflow:hidden;
  color:#f8e6b7;
  background:#030303;
  font-size:8px;
}
.profile-phone-cover {
  position:relative;
  height:102px;
  background:
    linear-gradient(35deg, transparent 44%, rgba(201,175,112,.32) 45% 48%, transparent 49%) 0 0 / 76px 56px,
    linear-gradient(-35deg, transparent 44%, rgba(201,175,112,.22) 45% 48%, transparent 49%) 22px 12px / 86px 64px,
    radial-gradient(circle at 72% 28%, rgba(217,188,119,.14), transparent 42%),
    #0a0907;
}
.profile-phone-cover::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:36px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));
}
.profile-phone-verified {
  position:absolute;
  z-index:2;
  top:20px;
  left:12px;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#051728;
  background:#29a2ff;
  transform:rotate(-4deg);
  box-shadow:0 2px 8px rgba(0,0,0,.24);
}
.profile-phone-verified svg { width:20px; height:20px; fill:currentColor; stroke:#031220; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.profile-phone-verified svg path:last-child { fill:none; stroke:#fff; stroke-width:2; }
.profile-phone-profile {
  position:relative;
  z-index:3;
  width:calc(100% - 22px);
  margin:-38px auto 0;
  padding:0 10px 9px;
  display:grid;
  justify-items:center;
  text-align:center;
  background:#030303;
  border-radius:28px 28px 0 0;
}
.profile-phone-avatar-ring {
  width:74px;
  height:74px;
  padding:5px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#c9a95e;
  box-shadow:0 0 0 5px rgba(201,169,94,.16);
}
.profile-phone-avatar-ring img { width:100%; height:100%; border-radius:50%; background:#e8e6df; object-fit:cover; }
.profile-phone-profile strong { margin-top:8px; color:#f0d79c; font-size:16px; line-height:1; font-weight:500; letter-spacing:.015em; }
.profile-phone-profile > span { margin-top:5px; color:#fff; font-size:6.8px; letter-spacing:.19em; }
.profile-phone-panel-row {
  width:calc(100% - 30px);
  min-height:38px;
  margin:0 auto;
  padding:0 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-radius:16px 16px 0 0;
  color:#f0d79c;
  background:#171717;
}
.profile-phone-panel-row strong { font-size:9.5px; letter-spacing:.08em; }
.profile-phone-panel-row > span { font-size:18px; line-height:1; font-weight:300; }
.profile-phone-socials {
  margin:8px auto 11px;
  display:flex;
  justify-content:center;
  gap:16px;
}
.profile-phone-socials > span,
.profile-phone-contact-icon {
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#302715;
  background:#d4b66d;
}
.profile-phone-socials > span { width:30px; height:30px; }
.profile-phone-socials svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.profile-phone-socials .profile-phone-icon-fill { fill:currentColor; stroke:none; }
.profile-phone-contact-title {
  margin:0 0 7px 20px;
  color:#f0d79c;
  font-size:11px;
  letter-spacing:.02em;
  font-weight:700;
}
.profile-phone-contact-list { width:calc(100% - 30px); margin:0 auto; }
.profile-phone-contact-row {
  min-height:34px;
  display:grid;
  grid-template-columns:29px minmax(0,1fr);
  gap:8px;
  align-items:center;
  color:#fff;
  border-bottom:1px solid rgba(212,182,109,.28);
}
.profile-phone-contact-icon { width:25px; height:25px; }
.profile-phone-contact-icon svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.profile-phone-contact-row > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:7.4px; }
.profile-phone-panel-row-bottom { margin-top:10px; border-radius:0; background:transparent; border-top:1px solid rgba(212,182,109,.24); }

.profile-card-picture {
  position:absolute;
  z-index:3;
  width:min(610px,72%);
  right:-1%;
  top:5%;
  transform:rotate(1.5deg);
  filter:drop-shadow(0 28px 38px rgba(0,0,0,.38));
}
.profile-metal-cards { width:100%; height:auto; }

/* What is Profile --------------------------------------------------------- */
.profile-intro {
  padding: clamp(58px,7vw,92px) 24px;
  background: #fff;
  border-bottom:1px solid var(--profile-line);
}
.profile-copy-shell { width:min(850px,100%); margin:0 auto; text-align:center; }
.profile-kicker { display:block; color:var(--profile-blue); font-size:.75rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.profile-copy-shell h2,
.profile-section-heading h2,
.profile-final-cta h2 { margin:10px 0 0; letter-spacing:-.04em; line-height:1.04; }
.profile-copy-shell h2 { font-size:clamp(2rem,4vw,3.6rem); }
.profile-copy-shell p { max-width:780px; margin:20px auto 0; color:var(--profile-muted); font-size:clamp(.98rem,1.35vw,1.08rem); line-height:1.8; }

/* Why it matters ---------------------------------------------------------- */
.profile-why { padding: clamp(58px,7.5vw,100px) 24px; background: var(--profile-paper); }
.profile-section-shell { width:min(1240px,100%); margin:0 auto; }
.profile-section-heading { text-align:center; }
.profile-section-heading h2 { font-size:clamp(2rem,3.6vw,3.35rem); }
.profile-benefit-flow {
  margin-top:55px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr) 54px minmax(0,1fr) 54px minmax(0,1fr);
  gap:16px;
  align-items:start;
}
.profile-benefit { text-align:center; }
.profile-benefit-icon {
  width:72px;
  height:72px;
  margin:0 auto 20px;
  display:grid;
  place-items:center;
  border:1px solid #cfdae8;
  border-radius:50%;
  background:#fff;
  color:var(--profile-blue);
}
.profile-benefit-icon .ui-icon { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.profile-benefit h3 { margin:0; font-size:1rem; letter-spacing:-.015em; }
.profile-benefit p { max-width:240px; margin:9px auto 0; color:var(--profile-muted); font-size:.84rem; line-height:1.65; }
.profile-flow-line { height:1px; margin-top:36px; background:linear-gradient(90deg,#d8e0e9 0 80%,transparent 80%); background-size:8px 1px; position:relative; }
.profile-flow-line::after { content:""; position:absolute; right:-1px; top:-3px; border-left:6px solid #c7d2df; border-top:3.5px solid transparent; border-bottom:3.5px solid transparent; }

/* CTA --------------------------------------------------------------------- */
.profile-final-cta {
  position:relative;
  overflow:hidden;
  padding: clamp(46px,6vw,74px) 24px;
  color:#fff;
  background: linear-gradient(110deg,#0e57e4,#1764f6 60%,#0d52df);
}
.profile-final-cta::before,
.profile-final-cta::after {
  content:"";
  position:absolute;
  width:250px;
  height:250px;
  border:1px solid rgba(255,255,255,.16);
  transform:rotate(45deg);
}
.profile-final-cta::before { left:-130px; bottom:-170px; }
.profile-final-cta::after { right:-120px; top:-160px; }
.profile-final-cta-inner {
  position:relative;
  z-index:2;
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:50px;
  align-items:center;
}
.profile-final-cta .profile-kicker { color:rgba(255,255,255,.68); }
.profile-final-cta h2 { font-size:clamp(2rem,4vw,3.5rem); }
.profile-final-cta p { max-width:700px; margin:14px 0 0; color:rgba(255,255,255,.78); line-height:1.7; }
.profile-final-actions { display:flex; gap:12px; }
.profile-button-light { min-width:150px; background:#fff; border:1px solid #fff; color:#0d52df; }
.profile-button-outline-light { min-width:135px; border:1px solid rgba(255,255,255,.7); color:#fff; }
.profile-button-outline-light:hover { background:rgba(255,255,255,.1); border-color:#fff; }

/* Preserve the existing Profile legal footer, just remove the cluttered brand block. */
.profile-legal-footer.site-footer { padding-top:0; background:var(--paper-2); }
.profile-legal-footer .footer-inner { grid-template-columns:minmax(0,1fr) auto; gap:24px; }
.profile-legal-footer .footer-links { justify-content:flex-start; }
.profile-legal-footer .copyright { white-space:nowrap; }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1180px) {
  .profile-header.site-header { padding-inline:22px; }
  .profile-corporate-brand img { width:118px; }
  .profile-product-brand img { width:132px; }
  .profile-brand-lockup { gap:12px; }
  .profile-desktop-nav { gap:0; }
  .profile-nav-link { padding-inline:7px; font-size:.77rem; }
  .profile-login-button,.profile-start-button { padding-inline:13px; }
  .profile-hero-shell { grid-template-columns:minmax(0,.96fr) minmax(430px,1.04fr); gap:18px; }
  .profile-hero-visual { transform:translateX(-16px); }
  .profile-card-picture { right:0; width:70%; }
}

@media (max-width: 1040px) {
  .profile-header .desktop-nav { display:none; }
  .profile-header .menu-toggle { width:44px; height:44px; display:grid; place-content:center; gap:5px; border:0; background:transparent; }
  .profile-header .menu-toggle span { width:24px; height:2px; background:#111820; }
  .profile-header .mobile-nav {
    display:block;
    position:absolute;
    top:78px;
    left:auto;
    right:18px;
    width:min(360px,calc(100vw - 36px));
    max-height:calc(100vh - 96px);
    overflow:auto;
    padding:8px;
    background:#fff;
    color:#1a2028;
    border:1px solid #dce3eb;
    box-shadow:0 18px 45px rgba(8,18,29,.16);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:.2s ease;
  }
  .profile-header .mobile-nav.is-open { opacity:1; visibility:visible; transform:none; }
  .profile-header .menu-toggle { cursor:pointer; }
  .profile-header .menu-toggle span { transition:.2s ease; }
  .profile-header .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .profile-header .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .profile-header .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .profile-mobile-nav > a,
  .profile-mobile-placeholder { display:flex; min-height:46px; padding:0 14px; align-items:center; justify-content:space-between; color:#1a2028; }
  .profile-mobile-nav > a:hover { background:#0b1420; color:#fff; }
  .profile-mobile-nav .is-current { color:var(--profile-blue); font-weight:800; }
  .profile-mobile-placeholder { color:#69727e; border-bottom:1px solid #eef1f4; }
  .profile-mobile-placeholder small { font-size:.66rem; color:#9aa2ac; text-transform:uppercase; letter-spacing:.08em; }
}

@media (max-width: 900px) {
  .profile-hero { min-height:0; padding:112px 22px 58px; }
  .profile-hero-shell { grid-template-columns:1fr; gap:40px; }
  .profile-hero-copy { max-width:650px; }
  .profile-hero-visual { min-height:430px; transform:none; }
  .profile-phone { transform:rotate(-2deg) translateX(-50px); }
  .profile-card-picture { width:min(560px,70vw); right:3%; top:7%; }
  .profile-benefit-flow { grid-template-columns:1fr 32px 1fr; row-gap:42px; }
  .profile-benefit-flow .profile-flow-line:nth-of-type(3) { display:none; }
  .profile-final-cta-inner { grid-template-columns:1fr; gap:28px; }
}

@media (max-width: 700px) {
  .profile-header.site-header {
    height:70px;
    padding:0 18px;
    background:rgba(5,12,20,.92);
    border-bottom-color:rgba(255,255,255,.08);
  }
  .profile-corporate-brand,
  .profile-brand-divider { display:none; }
  .profile-product-brand img { width:145px; }
  .profile-header .menu-toggle span { background:#fff; }
  .profile-header .mobile-nav { top:70px; }

  .profile-hero { padding:96px 20px 42px; }
  .profile-hero::before,.profile-hero::after { display:none; }
  .profile-hero-shell { gap:24px; }
  .profile-hero-logo { display:none; }
  .profile-hero h1 { font-size:clamp(2.55rem,12.2vw,4.25rem); }
  .profile-hero-copy > p { margin-top:19px; line-height:1.65; }
  .profile-hero-actions-desktop { display:none; }
  .profile-hero-actions-mobile {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:10px;
    width:100%;
    margin-top:0;
  }
  .profile-hero-actions-mobile .profile-button { width:100%; min-width:0; min-height:46px; padding-inline:12px; gap:8px; font-size:.83rem; }

  .profile-hero-visual { min-height:345px; margin-top:-2px; transform:none; }
  .profile-phone { width:174px; border-radius:31px; transform:rotate(-1.8deg) translateX(-36px); }
  .profile-phone-screen { border-radius:25px; }
  .profile-phone-speaker { top:12px; width:57px; height:17px; }
  .profile-phone-cover { height:101px; }
  .profile-phone-profile { margin-top:-40px; }
  .profile-phone-avatar-ring { width:70px; height:70px; padding:5px; }
  .profile-phone-profile strong { margin-top:7px; font-size:15px; }
  .profile-phone-profile > span { margin-top:5px; font-size:6.2px; }
  .profile-phone-panel-row { min-height:36px; padding-inline:11px; border-radius:15px 15px 0 0; }
  .profile-phone-panel-row strong { font-size:9px; }
  .profile-phone-panel-row > span { font-size:17px; }
  .profile-phone-socials { margin:8px auto 11px; gap:14px; }
  .profile-phone-socials > span { width:28px; height:28px; }
  .profile-phone-socials svg { width:15px; height:15px; }
  .profile-phone-contact-title { margin:0 0 7px 18px; font-size:10px; }
  .profile-phone-contact-list { width:calc(100% - 24px); }
  .profile-phone-contact-row { min-height:32px; grid-template-columns:27px minmax(0,1fr); gap:7px; }
  .profile-phone-contact-icon { width:23px; height:23px; }
  .profile-phone-contact-icon svg { width:13px; height:13px; }
  .profile-phone-contact-row > span:last-child { font-size:6.7px; }
  .profile-phone-panel-row-bottom { margin-top:10px; }
  .profile-card-picture { width:57%; right:1%; top:12%; transform:rotate(5deg); }

  .profile-intro { padding:52px 20px; }
  .profile-copy-shell { text-align:left; }
  .profile-copy-shell h2 { font-size:clamp(2rem,9vw,3rem); }
  .profile-copy-shell p { margin-left:0; }

  .profile-why { padding:52px 20px 60px; }
  .profile-section-heading { text-align:left; }
  .profile-benefit-flow { margin-top:36px; display:grid; grid-template-columns:1fr; gap:0; }
  .profile-flow-line { display:none !important; }
  .profile-benefit {
    min-height:116px;
    padding:20px 0;
    display:grid;
    grid-template-columns:60px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:16px;
    text-align:left;
    border-bottom:1px solid var(--profile-line);
  }
  .profile-benefit:first-child { border-top:1px solid var(--profile-line); }
  .profile-benefit-icon { grid-row:1 / span 2; width:52px; height:52px; margin:0; align-self:center; }
  .profile-benefit-icon .ui-icon { width:24px; height:24px; }
  .profile-benefit h3 { align-self:end; }
  .profile-benefit p { max-width:none; margin:6px 0 0; font-size:.85rem; }

  .profile-final-cta { padding:48px 20px; text-align:center; }
  .profile-final-cta .profile-kicker { text-align:center; }
  .profile-final-cta p { margin-inline:auto; }
  .profile-final-actions { display:grid; grid-template-columns:1fr; width:min(100%,360px); margin:0 auto; }

  .profile-legal-footer.site-footer { padding:0 18px 28px; }
  .profile-legal-footer .footer-inner { grid-template-columns:1fr; gap:18px; }
  .profile-legal-footer .footer-links { display:grid; gap:10px; }
  .profile-legal-footer .copyright { white-space:normal; }
}

@media (max-width: 420px) {
  .profile-hero-visual { min-height:320px; }
  .profile-phone { width:162px; transform:rotate(-1.8deg) translateX(-31px); }
  .profile-card-picture { width:58%; right:-2%; top:14%; }
  .profile-hero-actions-mobile { gap:8px; }
  .profile-hero-actions-mobile .profile-button { font-size:.77rem; padding-inline:8px; }
}

/* Companion resources ------------------------------------------------------ */
.profile-resources {
  padding: clamp(54px,7vw,88px) 24px;
  background:#fff;
  border-top:1px solid var(--profile-line);
}
.profile-resources-heading { max-width:820px; margin:0 auto; }
.profile-resources-heading p {
  max-width:680px;
  margin:14px auto 0;
  color:var(--profile-muted);
  font-size:.96rem;
  line-height:1.7;
}
.profile-resource-grid {
  width:min(940px,100%);
  margin:38px auto 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.profile-resource-card {
  min-height:158px;
  padding:20px;
  display:grid;
  grid-template-columns:74px minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  text-align:left;
  border:1px solid var(--profile-line);
  border-radius:8px;
  background:#fff;
  color:var(--profile-charcoal);
  cursor:pointer;
  box-shadow:0 12px 34px rgba(16,28,42,.055);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.profile-resource-card:hover,
.profile-resource-card:focus-visible {
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(16,28,42,.09);
  outline:none;
}
.profile-resource-card-quickcard:hover,
.profile-resource-card-quickcard:focus-visible { border-color:#f39a32; }
.profile-resource-card-addons:hover,
.profile-resource-card-addons:focus-visible { border-color:var(--profile-blue); }
.profile-resource-brand {
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:10px;
  background:#f4f6f9;
}
.profile-resource-brand img { width:100%; height:100%; object-fit:cover; }
.profile-resource-copy { display:grid; gap:7px; min-width:0; }
.profile-resource-copy strong { font-size:1.12rem; letter-spacing:-.02em; }
.profile-resource-copy small { color:var(--profile-muted); font-size:.82rem; line-height:1.55; }
.profile-resource-action {
  align-self:end;
  color:var(--profile-blue);
  font-size:.75rem;
  font-weight:800;
  white-space:nowrap;
}
.profile-resource-card-quickcard .profile-resource-action { color:#d96c00; }

/* Profile companion modals ------------------------------------------------- */
.profile-modal[hidden] { display:none; }
.profile-modal {
  position:fixed;
  inset:0;
  z-index:300;
  display:grid;
  place-items:center;
  padding:26px;
}
.profile-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(3,9,16,.78);
  backdrop-filter:blur(6px);
}
.profile-modal-dialog {
  position:relative;
  z-index:1;
  width:min(940px,100%);
  max-height:min(780px,calc(100vh - 52px));
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  overflow:hidden;
  border:1px solid #dbe2eb;
  border-radius:10px;
  background:#fff;
  color:#151b23;
  box-shadow:0 38px 110px rgba(0,0,0,.38);
}
.profile-modal-dialog-quickcard { grid-template-rows:auto minmax(0,1fr) auto; }
.profile-modal-dialog-addons { grid-template-rows:auto auto auto minmax(0,1fr) auto; }
.profile-modal-header {
  min-height:86px;
  padding:20px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--profile-line);
  background:#fff;
}
.profile-modal-header h2 { margin:4px 0 0; font-size:clamp(1.7rem,3vw,2.45rem); letter-spacing:-.045em; }
.profile-modal-kicker {
  display:block;
  color:var(--profile-blue);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.profile-modal-kicker-orange { color:#d96c00; }
.profile-addon-definition {
  margin:0;
  padding:16px 24px 14px;
  border-bottom:1px solid var(--profile-line);
  background:#f8faff;
  color:#5d6877;
  font-size:.86rem;
  line-height:1.65;
}
.profile-modal-close {
  width:42px;
  height:42px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border:1px solid #d8dfe8;
  border-radius:50%;
  background:#fff;
  color:#1c232b;
  font-size:1.7rem;
  line-height:1;
  cursor:pointer;
}
.profile-modal-close:hover,
.profile-modal-close:focus-visible { border-color:#9faab8; background:#f5f7fa; outline:none; }
.profile-modal-scroll { min-height:0; overflow:auto; }
.profile-modal-feature,
.profile-addon-panel {
  padding:28px;
  display:grid;
  grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr);
  gap:34px;
  align-items:start;
}
.profile-modal-media {
  min-height:300px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid #dce3ed;
  border-radius:8px;
  background:linear-gradient(145deg,#f2f6ff,#e8eef8);
}
.profile-modal-media-orange { background:linear-gradient(145deg,#fff7ee,#ffe4c7); }
.profile-modal-media img { width:100%; height:100%; object-fit:cover; }

/* Add-on artwork uses its native aspect ratio instead of a fixed crop. */
.profile-addon-panel .profile-modal-media {
  min-height:0;
  height:auto;
  overflow:hidden;
  background:#fff;
}
.profile-addon-panel .profile-modal-media img {
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
}
.profile-modal-copy { padding:6px 4px 0; }
.profile-modal-label {
  color:var(--profile-blue);
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.profile-modal-feature-quickcard .profile-modal-label { color:#d96c00; }
.profile-modal-copy h3 { margin:9px 0 14px; font-size:clamp(1.6rem,3vw,2.35rem); line-height:1.06; letter-spacing:-.045em; }
.profile-modal-copy p { margin:0 0 14px; color:#5f6975; font-size:.93rem; line-height:1.72; }
.profile-modal-list { margin:20px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.profile-modal-list li {
  position:relative;
  padding-left:22px;
  color:#37404a;
  font-size:.88rem;
  line-height:1.55;
}
.profile-modal-list li::before {
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--profile-blue);
}
.profile-modal-feature-quickcard .profile-modal-list li::before { background:#ef8b24; }
.profile-modal-footer {
  min-height:78px;
  padding:14px 22px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  border-top:1px solid var(--profile-line);
  background:#f9fbfd;
}
.profile-modal-primary,
.profile-modal-secondary {
  min-height:44px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  font-size:.82rem;
  font-weight:800;
}
.profile-modal-primary { border:1px solid var(--profile-blue); background:var(--profile-blue); color:#fff; }
.profile-modal-primary:hover,.profile-modal-primary:focus-visible { background:var(--profile-blue-2); outline:none; }
.profile-modal-primary-orange { border-color:#ef8b24; background:#ef8b24; }
.profile-modal-primary-orange:hover,.profile-modal-primary-orange:focus-visible { background:#d97009; }
.profile-modal-secondary { border:1px solid #cfd7e1; background:#fff; color:#343d47; cursor:pointer; }
.profile-modal-secondary:hover,.profile-modal-secondary:focus-visible { background:#eef2f6; outline:none; }
.profile-addon-tabs {
  min-height:55px;
  display:flex;
  align-items:stretch;
  overflow-x:auto;
  border-bottom:1px solid var(--profile-line);
  background:#f7f9fc;
  scrollbar-width:thin;
}
.profile-addon-tab {
  flex:1 0 150px;
  min-height:54px;
  padding:0 18px;
  border:0;
  border-right:1px solid #e3e8ef;
  border-bottom:3px solid transparent;
  background:transparent;
  color:#5e6874;
  font-size:.8rem;
  font-weight:800;
  cursor:pointer;
}
.profile-addon-tab:hover,.profile-addon-tab:focus-visible { color:#17202a; outline:none; background:#eef3f9; }
.profile-addon-tab.is-active,
.profile-addon-tab[aria-selected="true"] { color:var(--profile-blue); border-bottom-color:var(--profile-blue); background:#fff; }
.profile-addon-panel[hidden] { display:none; }
.profile-addon-panel.is-active { display:grid; }
body.profile-modal-open { overflow:hidden; }

/* Downloads hand-off callout can be re-used from Profile modals. */
.profile-download-note {
  margin-top:18px;
  padding:12px 14px;
  border-left:3px solid #ef8b24;
  background:#fff7ee;
  color:#5f5141;
  font-size:.82rem;
  line-height:1.55;
}

@media (max-width: 700px) {
  .profile-resources { padding:46px 14px 52px; }
  .profile-resources-heading { text-align:left; }
  .profile-resources-heading p { margin-left:0; }
  .profile-resource-grid { margin-top:26px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .profile-resource-card {
    min-height:176px;
    padding:13px;
    grid-template-columns:1fr;
    grid-template-rows:52px minmax(0,1fr) auto;
    gap:8px;
    align-content:start;
  }
  .profile-resource-brand { width:52px; height:52px; border-radius:8px; }
  .profile-resource-copy { gap:5px; }
  .profile-resource-copy strong { font-size:.92rem; }
  .profile-resource-copy small { font-size:.69rem; line-height:1.42; }
  .profile-resource-action { align-self:auto; font-size:.66rem; white-space:normal; }

  .profile-modal { padding:0; place-items:end stretch; }
  .profile-modal-dialog {
    width:100%;
    max-height:94vh;
    border:0;
    border-radius:14px 14px 0 0;
  }
  .profile-modal-header { min-height:72px; padding:15px 16px; }
  .profile-modal-close { width:38px; height:38px; }
  .profile-addon-tabs { min-height:51px; }
  .profile-addon-tab { flex:0 0 auto; min-width:116px; min-height:50px; padding-inline:14px; }
  .profile-modal-feature,
  .profile-addon-panel { padding:18px 16px 24px; grid-template-columns:1fr; gap:20px; }
  .profile-modal-media { min-height:190px; max-height:250px; }
  .profile-addon-panel .profile-modal-media { min-height:0; max-height:none; }
  .profile-modal-copy { padding:0; }
  .profile-modal-copy h3 { margin-top:7px; font-size:1.55rem; }
  .profile-modal-copy p { font-size:.88rem; }
  .profile-modal-list li { font-size:.82rem; }
  .profile-modal-footer { min-height:72px; padding:12px 14px; display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .profile-modal-primary,.profile-modal-secondary { min-height:44px; padding-inline:14px; }
}

@media (max-width: 390px) {
  .profile-resource-grid { gap:8px; }
  .profile-resource-card { min-height:184px; padding:11px; }
  .profile-resource-copy strong { font-size:.86rem; }
  .profile-resource-copy small { font-size:.65rem; }
}

/* Core features ------------------------------------------------------------ */
.profile-features {
  padding:clamp(54px,7vw,92px) 24px;
  background:#fff;
  border-top:1px solid var(--profile-line);
  border-bottom:1px solid var(--profile-line);
  scroll-margin-top:96px;
}
.profile-features-heading { max-width:860px; margin:0 auto; }
.profile-features-heading p {
  max-width:720px;
  margin:14px auto 0;
  color:var(--profile-muted);
  font-size:.96rem;
  line-height:1.72;
}
.profile-feature-grid {
  width:min(1040px,100%);
  margin:38px auto 0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.profile-feature-card {
  min-height:220px;
  padding:24px 22px;
  border:1px solid var(--profile-line);
  border-radius:8px;
  background:var(--profile-paper);
}
.profile-feature-icon {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--profile-blue);
  background:#eaf1ff;
}
.profile-feature-icon svg {
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.profile-feature-card h3 {
  margin:18px 0 8px;
  color:var(--profile-charcoal);
  font-size:1.05rem;
  letter-spacing:-.025em;
}
.profile-feature-card p {
  margin:0;
  color:var(--profile-muted);
  font-size:.84rem;
  line-height:1.62;
}

/* Template + process modals ------------------------------------------------ */
.profile-modal-dialog-templates { grid-template-rows:auto auto auto minmax(0,1fr) auto; }
.profile-modal-dialog-process { grid-template-rows:auto minmax(0,1fr) auto; width:min(860px,100%); }
.profile-template-definition,
.profile-process-intro {
  margin:0;
  color:#5d6877;
  font-size:.88rem;
  line-height:1.68;
}
.profile-template-definition {
  padding:16px 24px 14px;
  border-bottom:1px solid var(--profile-line);
  background:#f8faff;
}
.profile-template-tabs {
  min-height:55px;
  display:flex;
  align-items:stretch;
  overflow-x:auto;
  border-bottom:1px solid var(--profile-line);
  background:#f7f9fc;
  scrollbar-width:thin;
}
.profile-template-tab {
  flex:1 0 160px;
  min-height:54px;
  padding:0 18px;
  border:0;
  border-right:1px solid #e3e8ef;
  border-bottom:3px solid transparent;
  background:transparent;
  color:#5e6874;
  font-size:.8rem;
  font-weight:800;
  cursor:pointer;
}
.profile-template-tab:hover,
.profile-template-tab:focus-visible { color:#17202a; outline:none; background:#eef3f9; }
.profile-template-tab.is-active,
.profile-template-tab[aria-selected="true"] { color:var(--profile-blue); border-bottom-color:var(--profile-blue); background:#fff; }
.profile-template-panel {
  padding:28px;
  display:grid;
  grid-template-columns:minmax(300px,.95fr) minmax(0,1.05fr);
  gap:34px;
  align-items:start;
}
.profile-template-panel[hidden] { display:none; }
.profile-template-panel.is-active { display:grid; }
.profile-template-media { min-height:330px; background:#eef3fb; }
.profile-template-media img { object-fit:cover; }
.profile-process-scroll { padding:26px 28px 30px; }
.profile-process-intro {
  max-width:760px;
  padding:0 0 22px;
}
.profile-process-list {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  border-top:1px solid var(--profile-line);
}
.profile-process-list li {
  padding:20px 0;
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:18px;
  border-bottom:1px solid var(--profile-line);
}
.profile-process-number {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--profile-blue);
  background:#eaf1ff;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
}
.profile-process-list h3 { margin:1px 0 6px; font-size:1.06rem; letter-spacing:-.025em; }
.profile-process-list p { margin:0; color:#5f6975; font-size:.87rem; line-height:1.65; }
.profile-process-note {
  margin-top:24px;
  padding:17px 18px;
  display:grid;
  gap:5px;
  border-left:3px solid var(--profile-blue);
  background:#f0f5ff;
  color:#3d4855;
  font-size:.86rem;
  line-height:1.6;
}
.profile-process-note strong { color:#152033; }

/* Mobile nav buttons are real navigation controls now, not placeholders. */
@media (max-width: 1040px) {
  .profile-mobile-nav > button {
    width:100%;
    min-height:46px;
    padding:0 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:0;
    border-bottom:1px solid #eef1f4;
    background:#fff;
    color:#1a2028;
    font:inherit;
    text-align:left;
    cursor:pointer;
  }
  .profile-mobile-nav > button:hover,
  .profile-mobile-nav > button:focus-visible { background:#0b1420; color:#fff; outline:none; }
}

@media (max-width: 900px) {
  .profile-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .profile-feature-card { min-height:205px; }
}

@media (max-width: 700px) {
  .profile-features { padding:48px 14px 54px; }
  .profile-features-heading { text-align:left; }
  .profile-features-heading p { margin-left:0; }
  .profile-feature-grid { margin-top:28px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .profile-feature-card { min-height:186px; padding:16px 14px; }
  .profile-feature-icon { width:40px; height:40px; }
  .profile-feature-icon svg { width:20px; height:20px; }
  .profile-feature-card h3 { margin-top:14px; font-size:.9rem; }
  .profile-feature-card p { font-size:.72rem; line-height:1.48; }

  .profile-template-definition { padding:13px 16px; font-size:.8rem; }
  .profile-template-tabs { min-height:51px; }
  .profile-template-tab { flex:0 0 auto; min-width:110px; min-height:50px; padding-inline:14px; }
  .profile-template-panel { padding:18px 16px 24px; grid-template-columns:1fr; gap:20px; }
  .profile-template-media { min-height:205px; max-height:270px; }
  .profile-process-scroll { padding:18px 16px 24px; }
  .profile-process-intro { font-size:.84rem; }
  .profile-process-list li { grid-template-columns:44px minmax(0,1fr); gap:12px; padding:17px 0; }
  .profile-process-number { width:38px; height:38px; font-size:.64rem; }
  .profile-process-list h3 { font-size:.94rem; }
  .profile-process-list p { font-size:.79rem; line-height:1.55; }
  .profile-process-note { font-size:.79rem; }
}

@media (max-width: 390px) {
  .profile-feature-card { min-height:194px; padding:14px 12px; }
  .profile-feature-card p { font-size:.68rem; }
}

/* Template preview refinements -------------------------------------------- */
.profile-button[type="button"] {
  font:inherit;
  cursor:pointer;
}

/* Three template choices should always share the available width equally. */
.profile-template-tabs {
  overflow-x:hidden;
}
.profile-template-tab {
  flex:1 1 0;
  min-width:0;
}
.profile-template-tab:last-child {
  border-right:0;
}

.profile-template-media {
  position:relative;
}
.profile-template-preview-button {
  position:relative;
  width:100%;
  height:100%;
  min-height:inherit;
  padding:0;
  display:block;
  overflow:hidden;
  border:0;
  background:transparent;
  cursor:zoom-in;
}
.profile-template-preview-button img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:top center;
  transition:transform .2s ease;
}
.profile-template-preview-button:hover img,
.profile-template-preview-button:focus-visible img {
  transform:scale(1.015);
}
.profile-template-preview-button:focus-visible {
  outline:3px solid rgba(20,91,255,.45);
  outline-offset:-3px;
}
.profile-template-preview-hint {
  position:absolute;
  left:12px;
  bottom:12px;
  min-height:32px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  background:rgba(7,14,24,.82);
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.025em;
  pointer-events:none;
}

/* Full template image viewer / lightbox ----------------------------------- */
.profile-image-viewer {
  position:fixed;
  inset:0;
  z-index:520;
  display:grid;
  place-items:center;
  padding:18px;
}
.profile-image-viewer[hidden] { display:none !important; }
.profile-image-viewer-backdrop {
  position:absolute;
  inset:0;
  background:rgba(2,7,13,.9);
  backdrop-filter:blur(7px);
}
.profile-image-viewer-dialog {
  position:relative;
  z-index:1;
  width:min(1100px,100%);
  height:min(94vh,980px);
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:#0b1017;
  box-shadow:0 34px 90px rgba(0,0,0,.55);
}
.profile-image-viewer-toolbar {
  min-height:70px;
  padding:12px 14px 12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:#111823;
}
.profile-image-viewer-toolbar .profile-modal-kicker { color:#74a1ff; }
.profile-image-viewer-toolbar h2 {
  margin:3px 0 0;
  color:#fff;
  font-size:1rem;
  letter-spacing:-.02em;
}
.profile-image-viewer-actions {
  display:flex;
  align-items:center;
  gap:6px;
}
.profile-image-viewer-actions button {
  min-width:38px;
  height:38px;
  padding:0 10px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:4px;
  background:#1a2330;
  color:#fff;
  font:inherit;
  font-size:.83rem;
  font-weight:800;
  cursor:pointer;
}
.profile-image-viewer-actions button:hover,
.profile-image-viewer-actions button:focus-visible {
  border-color:#6899ff;
  background:#25344a;
  outline:none;
}
.profile-image-viewer-actions .profile-image-viewer-close {
  margin-left:4px;
  font-size:1.45rem;
  line-height:1;
}
.profile-image-viewer-viewport {
  min-width:0;
  min-height:0;
  overflow:auto;
  padding:18px;
  display:block;
  background:#080c12;
  overscroll-behavior:contain;
  touch-action:pan-x pan-y pinch-zoom;
  scrollbar-gutter:stable both-edges;
}
.profile-image-viewer-viewport img {
  width:100%;
  max-width:none;
  height:auto;
  display:block;
  margin:0 auto;
  background:#fff;
  box-shadow:0 12px 36px rgba(0,0,0,.32);
  transform-origin:top center;
}

@media (max-width:700px) {
  .profile-template-tabs {
    width:100%;
    min-height:51px;
  }
  .profile-template-tab {
    flex:1 1 0;
    min-width:0;
    min-height:50px;
    padding:0 8px;
    text-align:center;
  }

  .profile-image-viewer {
    padding:0;
  }
  .profile-image-viewer-dialog {
    width:100%;
    height:100dvh;
    max-height:none;
    border:0;
    border-radius:0;
  }
  .profile-image-viewer-toolbar {
    min-height:66px;
    padding:10px 10px 10px 14px;
  }
  .profile-image-viewer-toolbar h2 {
    max-width:140px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.88rem;
  }
  .profile-image-viewer-actions { gap:4px; }
  .profile-image-viewer-actions button {
    min-width:34px;
    height:34px;
    padding:0 8px;
    font-size:.72rem;
  }
  .profile-image-viewer-actions .profile-image-viewer-close {
    margin-left:2px;
    font-size:1.3rem;
  }
  .profile-image-viewer-viewport {
    padding:10px;
  }
  .profile-template-preview-hint {
    left:9px;
    bottom:9px;
    min-height:28px;
    padding-inline:9px;
    font-size:.62rem;
  }
}