/* About Segora - the public page that explains the platform (linked from the sign-in page). */
:root { --ink:#0d1b2a; --ink-2:#1b2b45; --teal:#19c3b1; --teal-dark:#0e8f82; --amber:#ffb547; --paper:#f6f8fb; --line:#dde3ec; --dim:#5d6b82; --text:#14213d; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; background:var(--paper); color:var(--text); line-height:1.55; }
a { color:var(--teal-dark); }
.wrap { max-width:1100px; margin:0 auto; padding:0 24px; }

/* header - the logo and name are styled here too, so this page looks right even if the shared brand.css is not loaded */
.top .sg-lockup { display:inline-flex; align-items:center; gap:10px; line-height:1; }
.top .sg-mark { height:34px; width:auto; flex:none; display:block; }
.top .sg-word { font-family:"Space Grotesk","Segoe UI",system-ui,-apple-system,Arial,sans-serif; font-weight:700; font-size:21px; letter-spacing:-.4px; color:#fff; }
.top .sg-section { font-weight:500; font-size:16px; color:#9fb3c8; }
.top .sg-section::before { content:"\00B7"; margin:0 8px 0 2px; color:#54D6C5; }

.top { background:linear-gradient(160deg,var(--ink),var(--ink-2)); color:#fff; padding:16px 28px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.top .home { text-decoration:none; }
.top nav { display:flex; align-items:center; gap:20px; font-size:14px; }
.top nav a { color:#cfe; text-decoration:none; }
.top nav a.signin { color:#04332e; background:var(--teal); font-weight:700; padding:8px 16px; border-radius:999px; }

/* hero */
.hero { background:radial-gradient(900px 500px at 10% 0%, #1d6f8f 0%, transparent 60%),
                   radial-gradient(800px 500px at 95% 100%, #0e8f82 0%, transparent 60%),
                   linear-gradient(160deg,var(--ink) 0%,var(--ink-2) 100%);
        color:#fff; padding:64px 0 72px; }
.kicker { margin:0 0 10px; font-family:"Space Grotesk","Segoe UI",sans-serif; font-weight:500; font-size:13px; letter-spacing:4px; text-transform:uppercase; color:#54D6C5; }
.hero h1 { margin:0 0 18px; font-size:clamp(30px,4.2vw,50px); line-height:1.08; letter-spacing:-1px; }
.hero h1 em { font-style:normal; color:var(--amber); }
.lead { max-width:720px; margin:0; font-size:18px; color:#c7d4e6; }
.cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.btn { display:inline-block; text-decoration:none; font-weight:700; font-size:15px; padding:12px 22px; border-radius:999px; background:var(--teal); color:#04332e; }
.btn:hover { filter:brightness(1.05); }
.btn.ghost { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45); }
.btn.ghost.dark { color:var(--teal-dark); border-color:var(--teal); }
/* hero: the big Getting started button, on the right above the Run step */
.hero .cta { align-items:center; }
.btn.start { margin-left:auto; display:inline-flex; align-items:center; gap:10px; font-size:17px; padding:14px 26px;
             background:#e8b874; color:var(--ink); box-shadow:0 6px 18px rgba(232,184,116,.18); transition:transform .15s, box-shadow .15s; }
.btn.start .arrow { font-size:19px; line-height:1; transition:transform .15s; }
.btn.start:hover { filter:none; transform:translateY(-1px); box-shadow:0 10px 24px rgba(232,184,116,.26); }
.btn.start:hover .arrow { transform:translateX(4px); }

/* how it works */
.steps3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:-36px 0 40px; }
.step { background:#fff; border-radius:14px; padding:22px; box-shadow:0 6px 20px rgba(13,27,42,.10); }
.step .n { display:inline-flex; width:30px; height:30px; border-radius:50%; align-items:center; justify-content:center; background:var(--ink); color:#54D6C5; font-weight:700; font-size:14px; }
.step h3 { margin:12px 0 6px; font-size:19px; }
.step p { margin:0; color:var(--dim); font-size:15px; }

/* why: the problem and the vision - a dark, high-contrast band so it stands out */
.why { position:relative; display:grid; grid-template-columns:1fr 1fr; border-radius:16px; overflow:hidden; margin:8px 0 22px;
       background:radial-gradient(700px 360px at 0% 0%, #1d6f8f 0%, transparent 60%), radial-gradient(700px 360px at 100% 100%, #0e8f82 0%, transparent 60%),
                  linear-gradient(160deg,var(--ink),var(--ink-2)); color:#fff; box-shadow:0 10px 30px rgba(13,27,42,.18); }
.why .why-col { padding:34px 36px 36px; background:transparent; }
.why-col + .why-col { border-left:1px solid rgba(255,255,255,.14); }
.why-label { display:inline-block; margin:0 0 12px; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:5px 12px; border-radius:999px; }
.why-col:first-child .why-label { background:rgba(255,138,61,.16); color:#FF8A3D; }
.why-col:last-child .why-label { background:rgba(84,214,197,.16); color:#54D6C5; }
.why h2 { margin:0 0 12px; font-size:27px; line-height:1.2; letter-spacing:-.4px; }
.why-col:last-child h2 { color:#54D6C5; }
.why p:not(.why-label) { margin:0; font-size:17px; line-height:1.6; color:#d3deec; }
.why::after { content:"\2192"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%;
              background:#54D6C5; color:#0d1b2a; font-size:22px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 6px rgba(13,27,42,.6); }

/* any industry */
.any { text-align:center; padding:30px 28px 32px; margin:0 0 40px; background:#fff; border:1.5px solid var(--line); border-top:4px solid var(--teal); border-radius:16px; }
.any h2 { margin:0 0 10px; font-size:26px; letter-spacing:-.3px; }
.any p { margin:0 auto; max-width:780px; font-size:16.5px; color:#3b4a63; }
.sectors { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:0; margin:18px 0 0; }
.sectors li { padding:7px 16px; border-radius:999px; background:#eefaf8; border:1px solid #c9ece6; color:var(--teal-dark); font-weight:600; font-size:14px; }

/* features */
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.feature { background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:22px 24px; }
.feature h2 { margin:0 0 8px; font-size:19px; }
.feature p { margin:0; color:#3b4a63; font-size:15px; }
.feature-wide { grid-column:1 / -1; }

/* works with your existing architecture */
.fits { margin:40px 0 0; padding:22px 26px; background:#fff; border:1.5px solid var(--line); border-left:5px solid var(--amber); border-radius:14px; }
.fits h2 { margin:0 0 6px; font-size:20px; }
.fits p { margin:0; color:#3b4a63; max-width:900px; }

/* privacy */
.privacy { margin:40px 0 0; display:flex; gap:20px; align-items:flex-start; background:linear-gradient(160deg,var(--ink),var(--ink-2)); color:#fff; border-radius:14px; padding:26px 28px; }
.privacy-icon { flex:none; width:52px; height:52px; border-radius:14px; background:rgba(84,214,197,.15); color:#54D6C5; display:flex; align-items:center; justify-content:center; }
.privacy-icon svg { width:28px; height:28px; }
.privacy h2 { margin:0 0 8px; font-size:22px; }
.privacy p { margin:0 0 8px; color:#c7d4e6; font-size:16px; max-width:860px; }
.privacy p:last-child { margin-bottom:0; }

/* savings */
.savings { margin:40px 0 0; background:#fff; border-radius:14px; padding:26px 28px; border-left:5px solid var(--teal); box-shadow:0 1px 3px rgba(13,27,42,.06); }
.savings h2 { margin:0 0 10px; font-size:22px; }
.savings p { margin:0 0 14px; font-size:16px; max-width:860px; }
.savings ul { margin:0; padding-left:20px; display:grid; grid-template-columns:repeat(2,1fr); gap:6px 28px; font-size:15px; }

/* closing call to action */
.close { text-align:center; margin:44px 0 30px; }
.close h2 { margin:0 0 6px; font-size:24px; }
.close p { margin:0; color:var(--dim); }
.close .cta { justify-content:center; }

.tm { text-align:center; font-size:11.5px; color:#8a97ab; margin:0 auto; padding:0 24px; max-width:900px; }
.legal-foot { text-align:center; font-size:12px; color:var(--dim); padding:12px 0 28px; }

@media (max-width:820px) {
  .steps3, .grid, .savings ul, .why { grid-template-columns:1fr; }
  .why-col + .why-col { border-left:0; border-top:1px solid rgba(255,255,255,.14); }
  .why::after { display:none; }
  .steps3 { margin-top:24px; }
  .top nav a:not(.signin) { display:none; }
  .btn.start { margin-left:0; }
}
/* demo notice under the hero */
.about-demo { margin:24px 0 0; }
html.sg-demo-mode .steps3 { margin-top:0; }
/* Built by implementers, for implementers: the story, between the three steps and the problem/vision band. */
.impl { display:block; margin:0 0 30px; padding:28px 30px;
  background:#fff; border:1.5px solid var(--line); border-radius:16px; }
.impl .why-label { color:var(--teal-dark); background:#eefaf8; }
.impl h2 { margin:4px 0 10px; font-size:clamp(22px,2.6vw,28px); line-height:1.15; color:var(--text); text-wrap:balance; }
.impl-text > p { margin:0 0 14px; color:var(--text); line-height:1.6; max-width:70ch; }
.impl-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.impl-list li { padding:12px 14px; border-radius:12px; background:#f7fafc; border:1px solid var(--line); font-size:14px; line-height:1.5; color:var(--dim); }
.impl-list b { display:block; color:var(--text); margin-bottom:3px; }
@media (max-width:820px) {
  .impl { padding:22px 20px; }
  .impl-list { grid-template-columns:1fr; }
}