/* ============================================================
   /security (internal/pages/security): a centred hero with four
   facts, a row of jump links, then one section per thing a visitor protects
   (account, messages, data, safety, kids, AI tools). Each section pairs a
   product moment - the app's own screen, drawn here on the app's dark
   palette with its own labels - with four cards. Then the vulnerability
   card, the FAQ and a closing panel. Everything is scoped under .sec-.
   ============================================================ */

/* ---- Hero ---- */
.sec-hero{padding:140px 0 26px;text-align:center}
.sec-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 14px;border-radius:980px;background:rgba(51,117,77,.1);color:var(--green-700);font-size:13.5px;font-weight:700}
.sec-eyebrow i{font-size:12px}
.sec-hero h1{font-size:clamp(42px,5.6vw,72px);line-height:1.02;margin:18px auto 18px;max-width:880px;color:var(--w-ink)}
.sec-sub{font-size:18px;line-height:1.6;color:var(--w-mut);margin:0 auto 30px;max-width:640px}
.sec-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.sec-actions .btn-f{gap:10px}
.sec-actions .btn-f-primary{box-shadow:var(--shadow-glow)}

.sec-facts{list-style:none;margin:54px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;text-align:left}
.sec-fact{display:flex;align-items:flex-start;gap:13px;padding:18px;border-radius:18px;background:var(--w-panel);border:1px solid var(--w-line);box-shadow:rgba(31,35,33,.05) 0 6px 22px}
.sec-fact b{display:block;font-size:15px;line-height:1.3;color:var(--w-ink);margin-bottom:3px}
.sec-fact span:last-child{font-size:13.5px;line-height:1.45;color:var(--w-mut)}
.sec-fact-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--green-600);color:var(--brand-contrast);font-size:15px}

/* ---- Jump links ---- */
.sec-jump{padding:30px 0 0}
.sec-jump-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.sec-jump-link{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:980px;background:rgba(255,253,244,.6);border:1px solid var(--w-line2);color:var(--w-ink2);font-size:14px;font-weight:600;text-decoration:none;transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.sec-jump-link i{font-size:12.5px;color:var(--green-600)}
.sec-jump-link:hover{background:var(--w-panel);border-color:var(--green-300);color:var(--w-ink)}
.sec-jump-link:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-focus)}

/* ---- A theme ---- */
.sec-theme{padding:96px 0 0;scroll-margin-top:90px}
.sec-theme-head{display:flex;align-items:flex-start;gap:20px;max-width:760px;margin:0 0 34px}
.sec-theme-icon{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:17px;background:linear-gradient(145deg,var(--green-500),var(--green-700));color:var(--brand-contrast);font-size:22px;box-shadow:0 10px 22px rgba(38,95,62,.25)}
.sec-theme-head .eyebrow-d{margin:0}
.sec-theme-head h2{font-size:clamp(30px,3.6vw,44px);line-height:1.06;margin:6px 0 12px;color:var(--w-ink)}
.sec-lead{font-size:17px;line-height:1.6;color:var(--w-mut);margin:0}
.sec-lead a,.sec-card a,.sec-qa a,.sec-end-panel a:not(.btn-f),.sec-disclose-card p a{color:var(--green-700);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

.sec-theme-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:stretch}
.sec-theme-flip .sec-stage{order:2}

/* The stage the product moment stands on */
/* It stays in view beside a tall column of cards instead of floating in an
   empty panel (static again once the two columns stack) */
.sec-stage{margin:0;align-self:start;position:sticky;top:96px;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:34px 30px 22px;border-radius:24px;background:radial-gradient(circle at 18% 12%,rgba(111,211,155,.26),transparent 55%),radial-gradient(circle at 90% 100%,rgba(176,141,87,.18),transparent 50%),#e2dbc6;border:1px solid var(--w-line);overflow:hidden}
.sec-stage figcaption{font-size:13px;font-weight:600;color:var(--w-mut);text-align:center}

.sec-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sec-card{display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;border-radius:20px;background:var(--bg-card);border:1px solid var(--w-line);box-shadow:var(--shadow-sm);transition:box-shadow var(--dur-slow) var(--ease-standard),transform var(--dur-slow) var(--ease-standard)}
.sec-card:hover{box-shadow:rgba(31,35,33,.09) 0 12px 30px;transform:translateY(-2px)}
.sec-card-icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:6px;border-radius:12px;background:rgba(51,117,77,.11);color:var(--green-600);font-size:16px}
.sec-card h3{margin:0;font-size:17px;font-weight:700;line-height:1.3;color:var(--w-ink)}
.sec-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--w-mut)}
/* An odd card out takes the whole row instead of leaving a hole */
.sec-card:last-child:nth-child(odd){grid-column:1/-1}
.sec-theme-more{margin:18px 0 0;text-align:right}
.sec-theme-more a{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--green-700);text-decoration:underline;text-underline-offset:3px}
.sec-theme-more i{font-size:12px}

/* ---- The app, small (dark, like the desktop app) ---- */
.sec-app{width:100%;max-width:470px;margin:0 auto;border-radius:16px;background:#1e1f23;color:#dfe0e2;box-shadow:0 30px 60px -24px rgba(20,26,22,.55),0 0 0 1px rgba(255,255,255,.06) inset;overflow:hidden;font-family:var(--font-sans);text-align:left;user-select:none}
.sec-app-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#26272c;border-bottom:1px solid #313238}
.sec-app-bar span{width:10px;height:10px;border-radius:50%;background:#4a4b51}
.sec-app-bar span:nth-child(1){background:#ff5f57}
.sec-app-bar span:nth-child(2){background:#febc2e}
.sec-app-bar span:nth-child(3){background:#28c840}
.sec-app-bar b{margin-left:10px;font-size:12.5px;font-weight:600;color:#b5bac1}
.sec-app-body{padding:16px}
.sec-app-split{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.sec-pane-label{margin-bottom:8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9b9ca2}
.sec-pane-desc{margin:-4px 0 10px;font-size:12.5px;color:#9b9ca2}
.sec-pane-note{display:flex;align-items:flex-start;gap:8px;margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(111,211,155,.08);border:1px solid rgba(111,211,155,.16);font-size:12.5px;line-height:1.45;color:#b9dcc6}
.sec-pane-note i{margin-top:2px;font-size:11px;color:#7fd3a0}

.sec-rows{display:flex;flex-direction:column;gap:6px}
.sec-row{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:11px;background:#2a2b30}
.sec-row-icon{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#34353b;color:#c9cbd0;font-size:13px}
.sec-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sec-row-text b{font-size:13.5px;font-weight:600;color:#eceef0;line-height:1.25}
.sec-row-text small{font-size:12px;color:#9b9ca2;line-height:1.3}
.sec-row-action{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:#9b9ca2;font-size:12px;background:#34353b}
.sec-you{margin-left:6px;padding:1px 6px;border-radius:5px;background:#3f7f58;color:#e9f6ee;font-size:10px;font-weight:700;font-style:normal;letter-spacing:.04em;vertical-align:1px}
.sec-badge{flex:none;padding:3px 9px;border-radius:980px;background:rgba(111,211,155,.14);color:#8fdcae;font-size:11.5px;font-weight:700}

.sec-status{flex:none;padding:3px 9px;border-radius:980px;font-size:11.5px;font-weight:700}
.sec-status-open{background:rgba(254,188,46,.14);color:#f5c96a}
.sec-status-removed{background:rgba(111,211,155,.14);color:#8fdcae}
.sec-status-kept{background:rgba(255,255,255,.08);color:#b5bac1}

/* The locked chat */
.sec-lock-stage{position:relative;min-height:400px;display:grid;place-items:center;padding:20px;background:#2c2d32}
.sec-blur{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:22px;filter:blur(7px);opacity:.75}
.sec-blur-bubble{align-self:flex-start;max-width:70%;padding:9px 13px;border-radius:14px;background:#414248;color:#dfe0e2;font-size:13px}
.sec-blur-mine{align-self:flex-end;background:#3f7f58}
.sec-lock-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;padding:20px 24px 16px;border-radius:20px;background:rgba(40,40,48,.62);border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.sec-lock-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:16px}
.sec-lock-title{font-size:16px;font-weight:600;color:#fff}
.sec-lock-sub{margin-top:-4px;font-size:12.5px;color:rgba(255,255,255,.6)}
.sec-lock-dots{display:flex;gap:13px;margin:2px 0 4px}
.sec-lock-dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35)}
.sec-lock-dots i.on{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.92)}
.sec-keypad{display:grid;grid-template-columns:repeat(3,44px);grid-auto-rows:44px;gap:8px}
.sec-key{display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);color:#fff;font-size:17px}
.sec-key-blank{background:transparent;border-color:transparent}
.sec-lock-touch{margin-top:4px;padding:7px 13px;border-radius:980px;background:rgba(255,255,255,.08);font-size:12px;font-weight:600;color:#e7e8ea}

/* Where the data lives: a fact sheet on paper, not in the app */
.sec-sheet{width:100%;max-width:440px;margin:0 auto;padding:22px 24px 18px;border-radius:18px;background:#fffdf6;border:1px solid var(--w-line2);box-shadow:0 26px 50px -26px rgba(31,35,33,.35);text-align:left}
.sec-sheet-head{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px dashed var(--w-dash)}
.sec-sheet-head .sec-row-text b{font-size:17px;color:var(--w-ink)}
.sec-sheet-head .sec-row-text small{font-size:13px;color:var(--w-mut)}
.sec-sheet-flag{flex:none;display:flex;flex-direction:column;width:44px;height:32px;border-radius:6px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.sec-sheet-flag i{flex:1}
.sec-sheet-flag i:nth-child(1){background:#ae1c28}
.sec-sheet-flag i:nth-child(2){background:#fff}
.sec-sheet-flag i:nth-child(3){background:#21468b}
.sec-sheet-rows{margin-top:6px}
.sec-sheet-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--w-line)}
.sec-sheet-row span{font-size:13.5px;color:var(--w-mut)}
.sec-sheet-row b{font-size:14px;font-weight:700;color:var(--w-ink);text-align:right}
.sec-sheet-foot{display:flex;align-items:flex-start;gap:8px;margin-top:14px;font-size:12.5px;line-height:1.45;color:var(--green-700)}
.sec-sheet-foot i{margin-top:2px}

/* Parent Center */
.sec-child{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:#2a2b30}
.sec-av{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:hsl(var(--h),38%,42%);color:#fff;font-size:12px;font-weight:700}
.sec-av-lg{width:40px;height:40px;border-radius:11px;font-size:16px}
.sec-kid-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
.sec-kid-tile{padding:12px;border-radius:12px;background:#2a2b30}
.sec-avs{display:flex;flex-wrap:wrap;gap:5px}
.sec-bars{display:flex;align-items:flex-end;gap:5px;height:48px}
.sec-bars i{flex:1;border-radius:3px 3px 1px 1px;background:#4a5d50}
.sec-bars i.today{background:#6fd39b}

/* MCP switches */
.sec-switches{gap:2px}
.sec-switch-row{display:flex;align-items:center;gap:14px;padding:10px 4px;border-bottom:1px solid #2f3035}
.sec-switch-row:last-child{border-bottom:0}
.sec-switch{flex:none;position:relative;width:36px;height:21px;border-radius:980px;background:#4a4b51}
.sec-switch::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sec-switch.on{background:#3f7f58}
.sec-switch.on::after{left:17px}
.sec-token{display:flex;align-items:center;gap:11px;margin-top:12px;padding:10px 11px;border-radius:11px;background:#2a2b30}
.sec-token-btn{flex:none;padding:6px 11px;border-radius:8px;background:rgba(237,66,69,.14);color:#ff8a8a;font-size:12px;font-weight:600}

/* ---- Found a vulnerability ---- */
.sec-disclose{padding:100px 0 0}
.sec-disclose-card{display:flex;align-items:center;gap:26px;padding:34px 40px;border-radius:24px;background:radial-gradient(circle at 10% 50%,rgba(111,211,155,.22),transparent 55%),#202327;color:#fff;box-shadow:0 18px 44px rgba(20,32,24,.2)}
.sec-disclose-icon{flex:none;display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:rgba(111,211,155,.14);color:#7fd3a0;font-size:24px}
.sec-disclose-text{flex:1;min-width:0}
.sec-disclose-eyebrow{margin:0 0 4px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7fd3a0}
.sec-disclose-card h2{margin:0 0 6px;font-size:26px;color:#fff}
.sec-disclose-card p{margin:0;font-size:15px;line-height:1.6;color:rgba(255,255,255,.76);max-width:640px}
.sec-disclose-card p a{color:#9fe0b9}
.sec-disclose-card .btn-f{flex:none}

/* ---- FAQ ---- */
.sec-faq{padding:100px 0 0}
.sec-faq-head{text-align:center;margin:0 auto 30px;max-width:640px}
.sec-faq-head .eyebrow-d{margin:0}
.sec-faq-head h2{font-size:clamp(30px,3.6vw,44px);line-height:1.08;margin:8px 0 0;color:var(--w-ink)}
.sec-qas{display:flex;flex-direction:column;gap:10px;max-width:820px;margin:0 auto}
.sec-qa{border-radius:16px;background:var(--bg-card);border:1px solid var(--w-line);box-shadow:var(--shadow-sm);transition:border-color var(--dur-base) var(--ease-standard)}
.sec-qa[open]{border-color:var(--green-200)}
.sec-qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;cursor:pointer;list-style:none;font-size:16px;font-weight:600;line-height:1.4;color:var(--w-ink)}
.sec-qa summary::-webkit-details-marker{display:none}
.sec-qa summary h3{margin:0;font:inherit;color:inherit}
.sec-qa summary i{flex:none;font-size:13px;color:var(--green-600);transition:transform var(--dur-base) var(--ease-standard)}
.sec-qa[open] summary i{transform:rotate(180deg)}
.sec-qa summary:focus-visible{outline:none;border-radius:16px;box-shadow:0 0 0 3px var(--w-focus)}
.sec-qa p{margin:0;padding:0 22px 20px;font-size:15px;line-height:1.65;color:var(--w-mut)}

/* ---- Closing panel ---- */
.sec-end{padding:90px 0 100px}
.glass-tile.sec-end-panel{text-align:center;padding:60px 40px}
.sec-end-panel h2{font-size:clamp(30px,3.8vw,46px);line-height:1.06;margin:0 0 12px;color:var(--w-ink)}
.sec-end-panel p{font-size:17px;line-height:1.6;color:var(--w-mut);max-width:600px;margin:0 auto 26px}

/* ---- Narrower screens ---- */
@media (max-width:1060px){
  .sec-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .sec-hero{padding-top:120px}
  .sec-theme{padding-top:80px}
  .sec-theme-body{grid-template-columns:minmax(0,1fr)}
  .sec-theme-flip .sec-stage{order:0}
  .sec-stage{position:static}
  .sec-disclose-card{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .sec-hero{padding-top:104px}
  .sec-sub{font-size:16.5px}
  .sec-actions .btn-f{flex:1 1 100%;justify-content:center}
  .sec-facts{grid-template-columns:minmax(0,1fr);margin-top:38px}
  .sec-jump-row{justify-content:flex-start}
  .sec-jump-link{padding:8px 13px;font-size:13.5px}
  .sec-theme{padding-top:64px}
  .sec-theme-head{flex-direction:column;gap:14px;margin-bottom:24px}
  .sec-theme-icon{width:48px;height:48px;border-radius:14px;font-size:19px}
  .sec-lead{font-size:16px}
  .sec-cards{grid-template-columns:minmax(0,1fr);gap:12px}
  /* On a phone the icon sits beside the title, which saves a line per card */
  .sec-card{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;column-gap:12px;row-gap:8px;padding:18px 18px 20px}
  .sec-card-icon{width:36px;height:36px;margin:0;border-radius:10px;font-size:14px}
  .sec-card p{grid-column:1/-1}
  .sec-stage{padding:22px 14px 16px;border-radius:20px}
  .sec-app-body{padding:12px}
  .sec-lock-stage{min-height:360px;padding:14px}
  .sec-theme-more{text-align:left}
  .sec-disclose,.sec-faq{padding-top:72px}
  .sec-disclose-card{padding:26px 22px}
  .sec-disclose-card .btn-f{align-self:stretch;justify-content:center}
  .sec-qa summary{padding:16px 18px;font-size:15.5px}
  .sec-qa p{padding:0 18px 18px}
  .glass-tile.sec-end-panel{padding:40px 22px}
  .sec-end{padding-bottom:70px}
}
@media (prefers-reduced-motion:reduce){
  .sec-card,.sec-qa summary i{transition:none}
  .sec-card:hover{transform:none}
}