SecureCompass Product Page Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Build a SecureCompass product/positioning page on the base2Services website at /products/securecompass/, plus update the V2 home benchmark partial to scope-honest copy and a SecureCompass-attributed credit line.

Architecture: Single-page HAML using the existing layout: base + type: service pattern (frontmatter-driven hero). All content sections live inline in products/securecompass/index.html.haml inside a .product-securecompass wrapper. Page-scoped SCSS in scss/site/_securecompass.scss, registered in scss/styles.scss. Brand assets and customer/standard logos copied from ~/development/base2dashboard/public/brand/ into images/products/securecompass/. The V2 home _partials/front_page/benchmark.html.haml is updated in place (copy + mockup labels) to match what SecureCompass actually does, and its credit line links to the new product page.

Tech Stack: Awestruct (HAML), Sass 3.4.22 (SCSS, ASCII-only), Gulp build (run by user, not the agent).

Source spec: docs/superpowers/specs/2026-04-27-securecompass-product-page-design.md

Project Conventions

These come from durable feedback memories — apply them throughout:

File Structure

New files:

Modified files:

Task 1: Copy brand and customer assets from base2dashboard

Files: - Create: images/products/securecompass/ (directory) - Create: images/products/securecompass/standards/ (directory) - Copy: 11 image files from ~/development/base2dashboard/public/brand/

bash mkdir -p images/products/securecompass/standards

bash cp ~/development/base2dashboard/public/brand/hero-landing.webp images/products/securecompass/hero-landing.webp cp ~/development/base2dashboard/public/brand/securecompass_logo.svg images/products/securecompass/securecompass_logo.svg

bash cp ~/development/base2dashboard/public/brand/IWT_logo.svg images/products/securecompass/iwt-logo.svg cp ~/development/base2dashboard/public/brand/PXB-logo.svg images/products/securecompass/pxb-logo.svg cp ~/development/base2dashboard/public/brand/imagemaster.png images/products/securecompass/imagemaster.png

bash cp ~/development/base2dashboard/public/brand/standards/gdpr.svg images/products/securecompass/standards/gdpr.svg cp ~/development/base2dashboard/public/brand/standards/hipaa.svg images/products/securecompass/standards/hipaa.svg cp ~/development/base2dashboard/public/brand/standards/nist.svg images/products/securecompass/standards/nist.svg cp ~/development/base2dashboard/public/brand/standards/pci.svg images/products/securecompass/standards/pci.svg cp ~/development/base2dashboard/public/brand/standards/soc2.svg images/products/securecompass/standards/soc2.svg

bash ls -la images/products/securecompass/ images/products/securecompass/standards/

Expected: 6 files in securecompass/ (hero-landing.webp, securecompass_logo.svg, iwt-logo.svg, pxb-logo.svg, imagemaster.png, plus the standards subdirectory) and 5 files in standards/.

bash git add images/products/securecompass/ git commit -m "assets: add SecureCompass brand and trust-strip images"

Task 2: Create the SecureCompass page with frontmatter and hero

Files: - Create: products/securecompass/index.html.haml

The hero comes from the existing layout: base chrome (banner image, banner_title, banner_sub) so no custom hero HAML is needed. Frontmatter populates everything.

Create products/securecompass/index.html.haml:

```haml

layout: base type: service description: SecureCompass is base2's AWS security scoring product. 228 controls against the AWS Well-Architected Security Pillar, public exposure scanning across 22 resource types, period-over-period trends with risk-ranked findings. title: SecureCompass | AWS security posture, scored | base2Services tags: [securecompass, aws security, well-architected, security pillar, public exposure, base2 product] banner: /images/products/securecompass/hero-landing.webp banner_title: See your AWS security posture, scored. banner_sub: 228 controls against the AWS Well-Architected Security Pillar. Public exposure across 22 resource types. Period-over-period trends with risk-ranked findings. meta_title: SecureCompass | AWS security posture scored | base2Services meta_description: SecureCompass is the AWS security scoring product built by base2Services. 228 controls against the Well-Architected Security Pillar, public exposure scanning, period-over-period trends. search: high flyout_active: false exit_popup_active: false —

content.page

.product-securecompass .product-hero-actions.container .product-hero-cta-row %a.product-hero-cta-primary{:href => "https://securecompass.io/auth?redirect=scanner", :target => "_blank", :rel => "noopener"} Run a free assessment %a.product-hero-cta-secondary{:href => "#built-by-base2"} How base2 uses it → ```

bash git add products/securecompass/index.html.haml git commit -m "feat: scaffold SecureCompass product page with hero CTAs"

Task 3: Add the headline-stat section

Files: - Modify: products/securecompass/index.html.haml

In products/securecompass/index.html.haml, append inside .product-securecompass (after .product-hero-actions.container):

haml .product-stat-section .product-stat-inner %p.product-stat-num 82% %p.product-stat-body of AWS accounts we assess have at least one publicly exposed resource. %p.product-stat-caveat Based on assessments across hundreds of AWS accounts. %a.product-stat-link{:href => "https://securecompass.io/public-exposure-scanner", :target => "_blank", :rel => "noopener"} Check your exposure →

bash git add products/securecompass/index.html.haml git commit -m "feat: add SecureCompass headline stat section"

Task 4: Add the two capability blocks (what it does)

Files: - Modify: products/securecompass/index.html.haml

Mockups built inline in HAML (matching _partials/front_page/benchmark.html.haml pattern). No external images for the dashboards.

In products/securecompass/index.html.haml, append inside .product-securecompass (after .product-stat-section):

```haml .product-capabilities .product-capabilities-inner

    .product-capability.product-capability--copy-left
      .product-capability-copy
        %h3.product-capability-name Security Pillar Assessment
        %p.product-capability-body 228 controls scored against the AWS Well-Architected Security Pillar. See which design principles pass, which fail, and track improvement over time.
        %ul.product-capability-list
          %li 10 security design principles evaluated
          %li Period-over-period comparison
          %li Per-service compliance breakdown
      .product-capability-mockup
        .product-mockup-frame
          .product-mockup-chrome
            %span.product-mockup-dot
            %span.product-mockup-dot
            %span.product-mockup-dot
            %span.product-mockup-url securecompass.io/dashboard
          .product-mockup-body
            .product-mockup-row.product-mockup-row--head
              %span.product-mockup-row-label Security Principles
              %span.product-mockup-row-meta 200 of 228 passing
            .product-mockup-row
              %span.product-mockup-row-label SEC01 Secure operations
              %span.product-mockup-row-pct.is-ok 92%
            .product-mockup-row
              %span.product-mockup-row-label SEC02 Identity management
              %span.product-mockup-row-pct.is-bad 42%
            .product-mockup-row
              %span.product-mockup-row-label SEC03 Permissions
              %span.product-mockup-row-pct.is-ok 97%

    .product-capability.product-capability--copy-right
      .product-capability-copy
        %h3.product-capability-name Public Exposure Scanner
        %p.product-capability-body Every publicly accessible resource in your AWS account. S3 buckets, EC2 instances, RDS databases, API endpoints, and 18 more resource types.
        %ul.product-capability-list
          %li 22 resource types scanned
          %li Risk-ranked findings with remediation guidance
          %li Acknowledge intentional exposures
      .product-capability-mockup
        .product-mockup-frame
          .product-mockup-chrome
            %span.product-mockup-dot
            %span.product-mockup-dot
            %span.product-mockup-dot
            %span.product-mockup-url securecompass.io/public-exposure-scanner
          .product-mockup-body
            .product-mockup-row.product-mockup-row--head
              %span.product-mockup-row-label Public Resources Found
              %span.product-mockup-row-meta.is-bad 3 critical
            .product-mockup-row
              %span.product-mockup-row-dot.is-critical
              %span.product-mockup-row-label S3 bucket with public read access
              %span.product-mockup-row-badge.is-critical Critical
            .product-mockup-row
              %span.product-mockup-row-dot.is-high
              %span.product-mockup-row-label RDS instance publicly accessible
              %span.product-mockup-row-badge.is-high High
            .product-mockup-row
              %span.product-mockup-row-dot.is-medium
              %span.product-mockup-row-label EC2 with open security group
              %span.product-mockup-row-badge.is-medium Medium ```

bash git add products/securecompass/index.html.haml git commit -m "feat: add SecureCompass capability blocks with inline mockups"

Task 5: Add the Built by base2Services section

Files: - Modify: products/securecompass/index.html.haml

In products/securecompass/index.html.haml, append inside .product-securecompass (after .product-capabilities):

haml %section#built-by-base2.product-builtby .product-builtby-inner %h2.product-builtby-heading Built by base2Services. %p.product-builtby-lead SecureCompass started as the tool we used to assess every new customer's AWS environment. We made it available as a SaaS so you can run the same instrument we run. %p.product-builtby-body base2Services is an AWS Advanced Consulting Partner specialising in platform engineering and DevOps. SecureCompass is part of how we work, not a side project. It plugs into our managed services so the score is more than a report. It's a prompt for engineers who can act on it. .product-builtby-marks %img.product-builtby-mark{:src => "/images/products/securecompass/securecompass_logo.svg", :alt => "SecureCompass"} %span.product-builtby-marks-sep × %img.product-builtby-mark.product-builtby-mark--b2s{:src => "/images/logos/base2services-white.svg", :alt => "base2Services"} %a.product-builtby-cta{:href => "/cloudmanagement/"} See how base2 manages AWS →

NOTE: the base2services-white.svg reference assumes that file already exists in /images/logos/. If it doesn't, run find images -iname "base2services*" to locate the existing white-on-dark base2 logo, OR copy ~/development/base2dashboard/public/brand/base2services-white.svg into images/products/securecompass/base2services-white.svg and reference that path. Verify before committing.

bash find images -iname "base2services*" -o -iname "b2s*"

If a usable white/dark-friendly base2 logo is found, update the HAML :src to that path. If not, copy the SVG from base2dashboard:

bash cp ~/development/base2dashboard/public/brand/base2services-white.svg images/products/securecompass/base2services-white.svg

And update the HAML to: :src => "/images/products/securecompass/base2services-white.svg".

bash git add products/securecompass/index.html.haml images/products/securecompass/ git commit -m "feat: add Built by base2Services brand-gravity section"

Task 6: Add the trust strip

Files: - Modify: products/securecompass/index.html.haml

In products/securecompass/index.html.haml, append inside .product-securecompass (after #built-by-base2.product-builtby):

```haml .product-trust .product-trust-inner

    .product-trust-row
      %p.product-trust-eyebrow Trusted by AWS teams at
      .product-trust-logos.product-trust-logos--customers
        %img.product-trust-logo{:src => "/images/products/securecompass/iwt-logo.svg", :alt => "IWT"}
        %img.product-trust-logo{:src => "/images/products/securecompass/pxb-logo.svg", :alt => "PXB"}
        %img.product-trust-logo{:src => "/images/products/securecompass/imagemaster.png", :alt => "Imagemaster"}

    .product-trust-row
      %p.product-trust-eyebrow Maps to
      .product-trust-logos.product-trust-logos--standards
        %img.product-trust-badge{:src => "/images/products/securecompass/standards/gdpr.svg", :alt => "GDPR"}
        %img.product-trust-badge{:src => "/images/products/securecompass/standards/hipaa.svg", :alt => "HIPAA"}
        %img.product-trust-badge{:src => "/images/products/securecompass/standards/nist.svg", :alt => "NIST"}
        %img.product-trust-badge{:src => "/images/products/securecompass/standards/pci.svg", :alt => "PCI"}
        %img.product-trust-badge{:src => "/images/products/securecompass/standards/soc2.svg", :alt => "SOC 2"} ```

NOTE: customer-logo clearance flag from the spec — verify with the user that IWT, PXB, and Imagemaster logos are cleared for use on base2's marketing site (not just on the SaaS landing). If any are not cleared, drop the <img> for that brand before committing.

bash git add products/securecompass/index.html.haml git commit -m "feat: add SecureCompass trust strip with customer and standards logos"

Task 7: Add the cross-sell strip

Files: - Modify: products/securecompass/index.html.haml

In products/securecompass/index.html.haml, append inside .product-securecompass (after .product-trust):

```haml .product-crosssell .product-crosssell-inner .product-crosssell-head %h2.product-crosssell-heading More than a score. %p.product-crosssell-sub SecureCompass tells you what's wrong. base2's managed services keep it right.

    .product-crosssell-cards
      %a.product-crosssell-card{:href => "/security/"}
        %h3.product-crosssell-card-name Compliance &amp; Reliability
        %p.product-crosssell-card-body ISO 27001, CPS 234, PCI DSS. Continuous posture monitoring. Audit-ready, always.
        %span.product-crosssell-card-link Learn more &rarr;
      %a.product-crosssell-card{:href => "/cloudmanagement/"}
        %h3.product-crosssell-card-name Cloud Management
        %p.product-crosssell-card-body 24/7 follow-the-sun ops. Findings shipped as PRs your team approves.
        %span.product-crosssell-card-link Learn more &rarr; ```

bash git add products/securecompass/index.html.haml git commit -m "feat: add SecureCompass cross-sell strip linking to managed services"

Task 8: Add the closing CTA section

Files: - Modify: products/securecompass/index.html.haml

In products/securecompass/index.html.haml, append inside .product-securecompass (after .product-crosssell):

haml .product-cta .product-cta-inner %h2.product-cta-heading Try it on your AWS account. %p.product-cta-sub 15 minutes from sign-up to first findings. Read-only AWS access. .product-cta-actions %a.product-cta-primary{:href => "https://securecompass.io/auth?redirect=scanner", :target => "_blank", :rel => "noopener"} Run a free assessment .product-cta-links %a{:href => "/contact/"} Talk to base2 %span.product-cta-sep &middot; %a{:href => "/cloudmanagement/"} See how base2 manages AWS %span.product-cta-sep &middot; %a{:href => "#built-by-base2"} Why we built it

NOTE: spec verification flags — confirm with the user that "Read-only AWS access" matches actual SecureCompass IAM permissions, and that "15 minutes from sign-up to first findings" matches actual time-to-value. Adjust the sub-line if either is inaccurate before committing.

bash git add products/securecompass/index.html.haml git commit -m "feat: add SecureCompass closing CTA"

Task 9: Create page-scoped SCSS scaffold (variables, hero CTAs, stat)

Files: - Create: scss/site/_securecompass.scss

All selectors are nested under .product-securecompass to scope styles to this page only. Match the existing service-modern aesthetic. ASCII-only.

Create scss/site/_securecompass.scss:

```scss // ============================================================ // SecureCompass product page (2026-04-27) // Scoped under .product-securecompass only. ASCII-only. // Uses base2 palette variables from global/_colours.scss. // ============================================================

.product-securecompass {

// --------------------------------------------------------
// HERO ACTIONS (under the layout banner)
// --------------------------------------------------------
.product-hero-actions {
    max-width: 1200px;
    margin: -2rem auto 0 auto;
    padding: 0 1.5rem 2.5rem 1.5rem;
    position: relative;
    z-index: 2;

    @media (min-width: 800px) {
        margin-top: -3rem;
        padding-bottom: 3rem;
    }
}

.product-hero-cta-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;

    @media (min-width: 600px) {
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
    }
}

.product-hero-cta-primary {
    display: inline-block;
    background: $base2-aqua;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.85rem 1.4rem;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 173, 187, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;

    &:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 24px rgba(0, 173, 187, 0.32);
        color: #fff;
        text-decoration: none;
    }
}

.product-hero-cta-secondary {
    color: $base2-blue-new;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;

    &:hover {
        color: $base2-aqua;
        text-decoration: none;
    }
}

// --------------------------------------------------------
// HEADLINE STAT SECTION
// --------------------------------------------------------
.product-stat-section {
    background: #f4f8f9;
    padding: 64px 24px;

    @media (min-width: 800px) {
        padding: 80px 32px;
    }
}

.product-stat-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.product-stat-num {
    font-size: clamp(3.5rem, 9vw, 6rem) !important;
    font-weight: 800 !important;
    color: $base2-aqua !important;
    line-height: 1 !important;
    margin: 0 0 0.75rem 0 !important;
    letter-spacing: -0.04em !important;
}

.product-stat-body {
    font-size: clamp(1.15rem, 2vw, 1.5rem) !important;
    font-weight: 700 !important;
    color: $base2-blue-new !important;
    line-height: 1.35 !important;
    margin: 0 0 0.75rem 0 !important;
}

.product-stat-caveat {
    font-size: 0.85rem !important;
    color: lighten($base2-gray, 10%) !important;
    margin: 0 0 1rem 0 !important;
}

.product-stat-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: $base2-aqua;
    text-decoration: none;

    &:hover {
        color: darken($base2-aqua, 8%);
        text-decoration: underline;
    }
} } ```

bash git add scss/site/_securecompass.scss git commit -m "style: scaffold SecureCompass page SCSS with hero CTAs and stat section"

Task 10: Wire SCSS into the build manifest

Files: - Modify: scss/styles.scss

In scss/styles.scss, find the line:

scss @import 'site/home-v2';

And add directly underneath:

scss @import 'site/securecompass';

Final excerpt should read:

scss @import 'site/home-modern'; @import 'site/home-v2'; @import 'site/securecompass'; @import 'site/service-modern';

bash git add scss/styles.scss git commit -m "build: register SecureCompass SCSS in styles manifest"

Task 11: Add SCSS for capability blocks and mockups

Files: - Modify: scss/site/_securecompass.scss

In scss/site/_securecompass.scss, append inside the .product-securecompass { ... } block (just before its closing }):

```scss // ——————————————————– // CAPABILITY BLOCKS (Section 3 - what it does) // ——————————————————– .product-capabilities { background: #fff; padding: 72px 24px;

    @media (min-width: 800px) {
        padding: 96px 32px;
    }
}

.product-capabilities-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4rem;

    @media (min-width: 800px) {
        gap: 6rem;
    }
}

.product-capability {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;

    @media (min-width: 900px) {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    &.product-capability--copy-right {
        @media (min-width: 900px) {
            .product-capability-copy {
                order: 2;
            }
            .product-capability-mockup {
                order: 1;
            }
        }
    }
}

.product-capability-name {
    font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
    font-weight: 800 !important;
    color: $base2-blue-new !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin: 0 0 1rem 0 !important;
}

.product-capability-body {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: $base2-gray !important;
    margin: 0 0 1.25rem 0 !important;
}

.product-capability-list {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
        position: relative;
        padding: 0.4rem 0 0.4rem 1.6rem;
        font-size: 0.95rem;
        color: $base2-gray;
        line-height: 1.5;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0.7rem;
            width: 6px;
            height: 11px;
            border-right: 2px solid $base2-aqua;
            border-bottom: 2px solid $base2-aqua;
            transform: rotate(45deg);
        }
    }
}

// Inline dashboard mockup
.product-mockup-frame {
    border: 1px solid #d9e3e7;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 40px rgba(3, 52, 59, 0.08);
}

.product-mockup-chrome {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: #f4f6f7;
    border-bottom: 1px solid #e6ecee;
}

.product-mockup-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d2dadc;
}

.product-mockup-url {
    margin-left: auto;
    margin-right: auto;
    font-size: 0.7rem;
    color: #8a9799;
    background: #e9eef0;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.product-mockup-body {
    padding: 1rem;
}

.product-mockup-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid #f1f4f5;
    font-size: 0.85rem;

    &:last-child {
        border-bottom: 0;
    }

    &.product-mockup-row--head {
        font-weight: 700;
        border-bottom: 1px solid #e6ecee;
        margin-bottom: 0.25rem;
    }
}

.product-mockup-row-label {
    color: $base2-blue-new;
    flex: 1;
}

.product-mockup-row-meta {
    color: lighten($base2-gray, 15%);
    font-size: 0.78rem;
    font-weight: 600;

    &.is-bad {
        color: #c83333;
    }
}

.product-mockup-row-pct {
    font-weight: 800;

    &.is-ok {
        color: #2f9e54;
    }

    &.is-bad {
        color: #c83333;
    }
}

.product-mockup-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;

    &.is-critical {
        background: #c83333;
    }

    &.is-high {
        background: #d28b1a;
    }

    &.is-medium {
        background: #2f8db5;
    }
}

.product-mockup-row-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;

    &.is-critical {
        color: #c83333;
        background: rgba(200, 51, 51, 0.1);
    }

    &.is-high {
        color: #d28b1a;
        background: rgba(210, 139, 26, 0.1);
    }

    &.is-medium {
        color: #2f8db5;
        background: rgba(47, 141, 181, 0.1);
    }
} ```

bash git add scss/site/_securecompass.scss git commit -m "style: add SecureCompass capability blocks and mockup styles"

Task 12: Add SCSS for Built by base2Services section

Files: - Modify: scss/site/_securecompass.scss

In scss/site/_securecompass.scss, append inside the .product-securecompass { ... } block (just before its closing }):

```scss // ——————————————————– // BUILT BY BASE2SERVICES (brand-gravity moment) // ——————————————————– .product-builtby { background: $base2-blue-new; color: #fff; padding: 80px 24px;

    @media (min-width: 800px) {
        padding: 100px 32px;
    }
}

.product-builtby-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.product-builtby-heading {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
    margin: 0 0 1.5rem 0 !important;
}

.product-builtby-lead {
    font-size: 1.1rem !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin: 0 0 1.25rem 0 !important;
}

.product-builtby-body {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    margin: 0 0 2rem 0 !important;
}

.product-builtby-marks {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.product-builtby-mark {
    height: 32px;
    width: auto;
    opacity: 0.95;

    &.product-builtby-mark--b2s {
        height: 28px;
    }
}

.product-builtby-marks-sep {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.25rem;
    font-weight: 300;
}

.product-builtby-cta {
    display: inline-block;
    color: $base2-aqua !important;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;

    &:hover {
        color: $base2-turquoise !important;
        text-decoration: none;
    }
} ```

bash git add scss/site/_securecompass.scss git commit -m "style: add Built by base2Services section styles"

Task 13: Add SCSS for trust strip

Files: - Modify: scss/site/_securecompass.scss

In scss/site/_securecompass.scss, append inside the .product-securecompass { ... } block (just before its closing }):

```scss // ——————————————————– // TRUST STRIP (customer logos + standards badges) // ——————————————————– .product-trust { background: #f4f8f9; padding: 56px 24px;

    @media (min-width: 800px) {
        padding: 72px 32px;
    }
}

.product-trust-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.product-trust-row {
    text-align: center;
}

.product-trust-eyebrow {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: lighten($base2-gray, 5%) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    margin: 0 0 1.25rem 0 !important;
}

.product-trust-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
}

.product-trust-logos--customers .product-trust-logo {
    max-height: 36px;
    max-width: 120px;
    width: auto;
    opacity: 0.7;
    filter: grayscale(1);
    transition: opacity 0.2s ease, filter 0.2s ease;

    &:hover {
        opacity: 1;
        filter: grayscale(0);
    }
}

.product-trust-logos--standards .product-trust-badge {
    max-height: 56px;
    max-width: 80px;
    width: auto;
} ```

bash git add scss/site/_securecompass.scss git commit -m "style: add SecureCompass trust strip styles"

Task 14: Add SCSS for cross-sell strip

Files: - Modify: scss/site/_securecompass.scss

In scss/site/_securecompass.scss, append inside the .product-securecompass { ... } block (just before its closing }):

```scss // ——————————————————– // CROSS-SELL STRIP (more than a score) // ——————————————————– .product-crosssell { background: #fff; padding: 72px 24px;

    @media (min-width: 800px) {
        padding: 88px 32px;
    }
}

.product-crosssell-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.product-crosssell-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem auto;
}

.product-crosssell-heading {
    font-size: clamp(1.6rem, 2.8vw, 2.25rem) !important;
    font-weight: 800 !important;
    color: $base2-blue-new !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    margin: 0 0 0.75rem 0 !important;
}

.product-crosssell-sub {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    color: $base2-gray !important;
    margin: 0 !important;
}

.product-crosssell-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;

    @media (min-width: 760px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

.product-crosssell-card {
    display: block;
    background: #fff;
    border: 1px solid #d9e3e7;
    border-radius: 12px;
    padding: 28px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 6px 20px rgba(3, 52, 59, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

    &:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 36px rgba(3, 52, 59, 0.12);
        border-color: $base2-aqua;
        text-decoration: none;

        .product-crosssell-card-link {
            color: $base2-turquoise;
        }
    }
}

.product-crosssell-card-name {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: $base2-blue-new !important;
    margin: 0 0 0.5rem 0 !important;
    line-height: 1.2 !important;
}

.product-crosssell-card-body {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    color: $base2-gray !important;
    margin: 0 0 1rem 0 !important;
}

.product-crosssell-card-link {
    color: $base2-aqua;
    font-weight: 700;
    font-size: 0.9rem;
    transition: color 0.2s ease;
} ```

bash git add scss/site/_securecompass.scss git commit -m "style: add SecureCompass cross-sell strip styles"

Task 15: Add SCSS for closing CTA section

Files: - Modify: scss/site/_securecompass.scss

In scss/site/_securecompass.scss, append inside the .product-securecompass { ... } block (just before its closing }):

```scss // ——————————————————– // CLOSING CTA SECTION // ——————————————————– .product-cta { background: $base2-blue-new; color: #fff; padding: 72px 24px;

    @media (min-width: 800px) {
        padding: 96px 32px;
    }
}

.product-cta-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.product-cta-heading {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
    margin: 0 0 0.75rem 0 !important;
}

.product-cta-sub {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0 0 2rem 0 !important;
}

.product-cta-actions {
    margin-bottom: 1.25rem;
}

.product-cta-primary {
    display: inline-block;
    background: $base2-aqua;
    color: #fff !important;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.9rem 1.6rem;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 173, 187, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;

    &:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 28px rgba(0, 173, 187, 0.38);
        color: #fff !important;
        text-decoration: none;
    }
}

.product-cta-links {
    font-size: 0.9rem;

    a {
        color: rgba(255, 255, 255, 0.78) !important;
        font-weight: 600;
        text-decoration: none;

        &:hover {
            color: $base2-aqua !important;
            text-decoration: none;
        }
    }
}

.product-cta-sep {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 0.5rem;
} ```

bash git add scss/site/_securecompass.scss git commit -m "style: add SecureCompass closing CTA section styles"

Task 16: Update V2 home benchmark partial copy

Files: - Modify: _partials/front_page/benchmark.html.haml

The current partial has these elements that change: - Line 5: %h2.benchmark-heading See your AWS environment, scored. - Line 6: %p.benchmark-body A continuously updated health score across IAM, cost, reliability, and compliance. Trend lines you can take to the board. Drift flagged before it becomes a finding. - Line 8: %p.benchmark-small Powered by SecureCompass. - Line 12: %span.benchmark-card-label Environment Snapshot - Line 17: Environment Health Score - Lines 27-38: stat grid items (IAM / Cost / Reliability / Compliance)

In _partials/front_page/benchmark.html.haml, replace:

haml %h2.benchmark-heading See your AWS environment, scored. %p.benchmark-body A continuously updated health score across IAM, cost, reliability, and compliance. Trend lines you can take to the board. Drift flagged before it becomes a finding. %a.benchmark-cta{:href => "/contact/"} Get your free 15-minute snapshot %p.benchmark-small Powered by SecureCompass.

With:

haml %h2.benchmark-heading See your AWS security posture, scored. %p.benchmark-body 228 controls against the AWS Well-Architected Security Pillar. Public exposure across 22 resource types. Trend lines you can take to the board. %a.benchmark-cta{:href => "/contact/"} Get your free 15-minute snapshot %p.benchmark-small A %a{:href => "/products/securecompass/"} SecureCompass product.

bash git add _partials/front_page/benchmark.html.haml git commit -m "copy: tighten V2 benchmark partial to SecureCompass scope"

Task 17: Update V2 home benchmark partial mockup labels

Files: - Modify: _partials/front_page/benchmark.html.haml

Hybrid approach: keep the big-score-and-sparkline visual structure, swap the labels and stat-grid items to scope-honest SecureCompass data.

In _partials/front_page/benchmark.html.haml, replace:

haml .benchmark-card-head %span.benchmark-card-label Environment Snapshot %span.benchmark-live Live

With:

haml .benchmark-card-head %span.benchmark-card-label Security Snapshot %span.benchmark-live Live

In the same file, replace:

haml .benchmark-score-label Environment Health Score %span.benchmark-delta &uarr; 6 points this month

With:

haml .benchmark-score-label Security Posture Score %span.benchmark-delta &uarr; 6 points this month

Replace the existing .benchmark-stat-grid block:

haml .benchmark-stat-grid .benchmark-stat .benchmark-stat-k IAM .benchmark-stat-v.ok 94 .benchmark-stat .benchmark-stat-k Cost .benchmark-stat-v.warn 71 .benchmark-stat .benchmark-stat-k Reliability .benchmark-stat-v.ok 88 .benchmark-stat .benchmark-stat-k Compliance .benchmark-stat-v.warn 76

With:

haml .benchmark-stat-grid .benchmark-stat .benchmark-stat-k SEC01 .benchmark-stat-v.ok 92 .benchmark-stat .benchmark-stat-k SEC02 .benchmark-stat-v.warn 42 .benchmark-stat .benchmark-stat-k SEC03 .benchmark-stat-v.ok 97 .benchmark-stat .benchmark-stat-k Exposure .benchmark-stat-v.warn 3

NOTE: the .warn modifier is reused for Exposure: 3 since 3 critical findings is a "warn" state visually, even though the existing .warn class is configured for percentage scores. If the existing CSS for .benchmark-stat-v.warn only colours numbers in a warning tint, this will still read correctly. If it expects a percentage-shaped value, we may need to drop the value or render it as a count-style number. Verify visually after build; adjust class name if styling needs a tweak.

bash git add _partials/front_page/benchmark.html.haml git commit -m "copy: align V2 benchmark mockup labels with SecureCompass scope"

Files: - Possibly modify: _partials/footer-home.html.haml, _partials/footer.html.haml

The footer already has a SecureCompass link pointing to securecompass.io. After this change, decide whether the footer should also (or instead) link to the new internal product page.

Two reasonable options:

A. Keep external link only. Footer continues to point at securecompass.io for SaaS-evaluators. Internal product page is reachable via the V2 home benchmark partial and any service-page cross-links.

B. Replace external link with internal page. Footer points to /products/securecompass/; the product page itself routes users to securecompass.io for trial.

Recommendation: B. The footer is base2's site, so a footer link should land on a base2-site page. The internal product page already exits to securecompass.io via two strong CTAs, so the funnel is preserved.

In _partials/footer-home.html.haml line 59 (and the equivalent line in _partials/footer.html.haml if mirrored), replace:

haml %a{:href => "https://securecompass.io", :target => "_blank", :rel => "noopener"} SecureCompass

With:

haml %a{:href => "/products/securecompass/"} SecureCompass

(Repeat for _partials/footer.html.haml if it carries the same line.)

bash git add _partials/footer-home.html.haml _partials/footer.html.haml git commit -m "nav: point footer SecureCompass link to internal product page"

Verification flags (recap from spec)

The spec called out three items for verification with the user before merging or shortly after:

  1. Customer logo clearance for IWT, PXB, and Imagemaster on base2's marketing site. If any are not cleared, drop the <img> for that brand from Task 6.
  2. "Read-only AWS access" in section 7 must match actual SecureCompass IAM permissions. Adjust the sub-line in Task 8 if write access is required for any feature.
  3. "15 minutes from sign-up to first findings" must match actual time-to-value. Adjust the sub-line in Task 8 if the real number differs.

Surface these to the user when this plan is executed. The simplest path is to merge with current copy and queue a follow-up tweak if any flag fails verification.

Out of scope (per spec)