Update FuelBoard onboarding copy, title formatting, key sheet card wrapping, and best-value button placement

The More info row went inside the Best Value card's `if let fuelSavings`, but the
Key sheet row was left ungated, so it stayed visible with Best Value switched off.
It is now gated on `fuelSavingsSettings.isConfigured` — exactly the condition
`savingsForStation` uses, i.e. the same gate as the card — so the two rows appear
and disappear together.

Verified on the simulator by toggling Best Value in Settings and scrolling the Key
sheet to its end (four drags, sheet still up and its footer in view each time):
- OFF: the row is absent at every scroll position, and the More info sheet shows
  neither the card nor the row;
- ON: the row is present, and the More info card and its row are both back.
210 tests pass; Release builds.

FuelBoard/FuelBoardApp.swift

@@ -21,7 +21,7 @@ struct FuelBoardApp: App {
 
     var body: some Scene {
         WindowGroup {
-            ContentView()
+            rootView
                 .onOpenURL(perform: handleOpenURL)
                 .onReceive(NotificationCenter.default.publisher(for: .fuelBoardWatchRefreshRequested)) { _ in
                     WatchSyncManager.shared.pushSnapshot()
@@ -32,6 +32,24 @@ struct FuelBoardApp: App {
         }
     }
 
+    /// QA hook (Debug builds only): `-qaScreenMarker` paints the whole screen a
+    /// flat magenta. A macOS capture of the Simulator window can then locate the
+    /// device-screen rectangle exactly, which yields a pixel-accurate mapping
+    /// from simulator screenshots to click coordinates. That is the only way to
+    /// drive REAL taps into the Simulator: `simctl` cannot, and this project has
+    /// no UI-test target. Everything else renders ContentView as normal.
+    @ViewBuilder private var rootView: some View {
+        #if DEBUG
+        if ProcessInfo.processInfo.arguments.contains("-qaScreenMarker") {
+            Color(red: 1, green: 0, blue: 1).ignoresSafeArea()
+        } else {
+            ContentView()
+        }
+        #else
+        ContentView()
+        #endif
+    }
+
     #if DEBUG
     private func startQALiveActivity(fuel: FuelType) {
         let state = FuelBoardLiveActivityAttributes.ContentState(

FuelBoard/FuelSavingsViews.swift

@@ -78,6 +78,7 @@ struct FuelSavingsSummaryView: View {
     /// Sizes the "extra return travel" caption in the user's own unit (the
     /// stored figure is miles) — used by both the row banner and the detail sheet.
     var distanceUnit: DistanceUnit = .miles
+    var showInfoAction: (() -> Void)? = nil
 
     var body: some View {
         switch availability {
@@ -166,6 +167,22 @@ struct FuelSavingsSummaryView: View {
                             .font(.caption2)
                             .foregroundStyle(.secondary)
                     }
+                    if let showInfoAction {
+                        Rectangle()
+                            .fill(Color(.separator))
+                            .frame(height: 0.5)
+                            .padding(.vertical, 4)
+                        Button(action: showInfoAction) {
+                            HStack(spacing: 8) {
+                                Text("How Best Value works")
+                                Spacer(minLength: 8)
+                                Image(systemName: "chevron.forward")
+                                    .font(.footnote.weight(.semibold))
+                                    .foregroundStyle(.tertiary)
+                            }
+                        }
+                        .buttonStyle(.plain)
+                    }
                 }
             }
         case .unavailable(let reason):

FuelBoard/HowBestValueSheet.swift

@@ -0,0 +1,69 @@
+import SwiftUI
+
+/// The "How Best Value works" explanation as its own sheet.
+///
+/// It used to sit inline in the Key sheet as a `Section`; it is one shared view
+/// now so the Key sheet and the More info sheet can both open it, and the copy is
+/// unchanged (the same `Localizable.strings` keys are reused — the old section
+/// header string is the sheet's title).
+struct HowBestValueSheet: View {
+    @Environment(\.dismiss) private var dismiss
+
+    var body: some View {
+        NavigationStack {
+            List {
+                Section {
+                    VStack(alignment: .leading, spacing: 10) {
+                        Text("Best Value compares each station with the closest one. It works out what you could save at the pump, then takes off the fuel used for the extra return journey.")
+                        Text("Your fill-up amount and MPG are used to show whether you could save overall.")
+                        Text("Results are marked “Approx.” until road distances are available.")
+                            .foregroundStyle(.secondary)
+                    }
+                    .font(.subheadline)
+                    .padding(.vertical, 4)
+                }
+            }
+            .navigationTitle("How Best Value works")
+            .navigationBarTitleDisplayMode(.inline)
+            .toolbar {
+                ToolbarItem(placement: .confirmationAction) {
+                    Button("Done") { dismiss() }
+                }
+            }
+        }
+        .presentationDetents([.fraction(0.42)])
+        .presentationBackground(Color(UIColor.systemGroupedBackground))
+    }
+}
+
+/// The row that opens `HowBestValueSheet`. A tappable row with a chevron, like
+/// the other rows in both sheets. `.buttonStyle(.plain)` keeps it from becoming a
+/// row-wide tap target that could swallow a neighbouring control (see the
+/// two-buttons-in-one-row rule).
+struct HowBestValueRow: View {
+    let action: () -> Void
+
+    var body: some View {
+        Button(action: action) {
+            HStack(spacing: 8) {
+                Text("How Best Value works")
+                Spacer(minLength: 8)
+                Image(systemName: "chevron.forward")
+                    .font(.footnote.weight(.semibold))
+                    .foregroundStyle(.tertiary)
+            }
+        }
+        .buttonStyle(.plain)
+    }
+}
+
+#if DEBUG
+/// QA hook support: `-showBestValueInfo` opens this sheet without a tap, so it can
+/// be screenshotted (simctl has no tap command) — the same pattern as
+/// `-showKeySheet` / `-showDetail`.
+enum BestValueInfoQA {
+    static var isRequested: Bool {
+        ProcessInfo.processInfo.arguments.contains("-showBestValueInfo")
+    }
+}
+#endif

FuelBoard/OnboardingView.swift

@@ -98,7 +98,7 @@ struct OnboardingView: View {
     private var welcomePage: some View {
         VStack(spacing: 0) {
             Spacer()
-            AnimatedOnboardingIcon(tint: .accentColor) {
+            AnimatedOnboardingIcon(tint: .accentColor, showsHalo: false) {
                 // The app icon itself, with the standard iOS rounded-corner
                 // treatment (~22% of the size), so onboarding matches the
                 // Home Screen.
@@ -108,10 +108,10 @@ struct OnboardingView: View {
                     .frame(width: 96, height: 96)
                     .clipShape(RoundedRectangle(cornerRadius: 21, style: .continuous))
             }
-            .padding(.bottom, 28)
+            .padding(.bottom, 16)
 
-            Text(String(localized: "Welcome to FuelBoard", comment: "Onboarding welcome title"))
+            Text(String(localized: "Welcome to\nFuelBoard", comment: "Onboarding welcome title"))
-                .font(.largeTitle.bold())
+                .font(.title.bold())
                 .multilineTextAlignment(.center)
 
             Text(String(localized: "The cheapest petrol, diesel and premium fuel near you — from the official UK Fuel Finder data.", comment: "Onboarding welcome subtitle"))
@@ -121,12 +121,13 @@ struct OnboardingView: View {
                 .padding(.horizontal, 32)
                 .padding(.top, 12)
 
-            featureRow(icon: "globe.europe.africa.fill", text: String(localized: "UK-wide prices — 8,000+ stations, updated twice a day", comment: "Onboarding feature row"))
+            featureRow(icon: "map.fill", title: String(localized: "Compare fuel prices near you", comment: "Onboarding feature row title"), subtitle: String(localized: "Over 8,000 stations across Great Britain, with prices updated daily.", comment: "Onboarding feature row subtitle"))
-            featureRow(icon: "scope", text: String(localized: "Cheapest within your chosen radius, or closest station first", comment: "Onboarding feature row"))
+            
-            featureRow(icon: "star.fill", text: String(localized: "Favourites with instant price comparison", comment: "Onboarding feature row"))
+            featureRow(icon: "chart.line.uptrend.xyaxis", title: String(localized: "See how much you could save", comment: "Onboarding feature row title"), subtitle: String(localized: "Compare fill-up costs and potential savings at different stations.", comment: "Onboarding feature row subtitle"))
-            featureRow(icon: "chart.bar.fill", text: String(localized: "Green/amber/red rating vs the best nearby price", comment: "Onboarding feature row"))
+            
-            featureRow(icon: "square.grid.2x2.fill", text: String(localized: "Home-screen widget showing the cheapest nearby", comment: "Onboarding feature row"))
+            featureRow(icon: "car.fill", title: String(localized: "Know if it's worth the drive", comment: "Onboarding feature row title"), subtitle: String(localized: "Factor in your journey and fuel costs to find the best value.", comment: "Onboarding feature row subtitle"))
-            featureRow(icon: "bell.fill", text: String(localized: "Alerts when you approach the cheapest station", comment: "Onboarding feature row"))
+            
+            featureRow(icon: "star.fill", title: String(localized: "Keep your favourites close", comment: "Onboarding feature row title"), subtitle: String(localized: "Save stations and quickly compare their latest prices.", comment: "Onboarding feature row subtitle"))
 
             Spacer()
         }
@@ -298,18 +299,23 @@ struct OnboardingView: View {
         OnboardingPrimaryButton(title: title, action: action)
     }
 
-    private func featureRow(icon: String, text: String) -> some View {
+    private func featureRow(icon: String, title: String, subtitle: String) -> some View {
-        HStack(spacing: 12) {
+        HStack(alignment: .top, spacing: 12) {
             Image(systemName: icon)
                 .font(.system(size: 20, weight: .semibold))
                 .foregroundStyle(Color.accentColor)
                 .frame(width: 32)
-            Text(text)
+            VStack(alignment: .leading, spacing: 2) {
-                .font(.subheadline)
+                Text(title)
+                    .font(.subheadline.bold())
+                Text(subtitle)
+                    .font(.subheadline)
+                    .foregroundStyle(.secondary)
+            }
             Spacer(minLength: 0)
         }
         .padding(.horizontal, 36)
-        .padding(.vertical, 10)
+        .padding(.vertical, 8)
     }
 
     private func permissionStatusLabel(granted: Bool, denied: Bool, deniedText: String) -> some View {
@@ -393,6 +399,9 @@ struct AnimatedOnboardingIcon<Content: View>: View {
 
     let tint: Color
     var motion: Motion = .gentle
+    /// The soft circle behind the glyph. The welcome page turns it off: it shows
+    /// the app icon itself and reads better with no container around it.
+    var showsHalo: Bool = true
     @ViewBuilder var content: Content
 
     @State private var settled = false
@@ -402,16 +411,18 @@ struct AnimatedOnboardingIcon<Content: View>: View {
 
     var body: some View {
         ZStack {
-            Circle()
+            if showsHalo {
-                .fill(tint.opacity(0.10))
+                Circle()
-                .frame(width: 108, height: 108)
+                    .fill(tint.opacity(0.10))
-                .scaleEffect(settled ? 1.0 : 0.94)
+                    .frame(width: 108, height: 108)
+                    .scaleEffect(settled ? 1.0 : 0.94)
 
-            Circle()
+                Circle()
-                .stroke(tint.opacity(0.18), lineWidth: 1)
+                    .stroke(tint.opacity(0.18), lineWidth: 1)
-                .frame(width: 118, height: 118)
+                    .frame(width: 118, height: 118)
-                .scaleEffect(settled ? 1.03 : 0.97)
+                    .scaleEffect(settled ? 1.03 : 0.97)
-                .opacity(settled ? 1.0 : 0.55)
+                    .opacity(settled ? 1.0 : 0.55)
+            }
 
             content
                 .scaleEffect(iconScale)

FuelBoard/StationDetailView.swift

@@ -29,6 +29,13 @@ struct StationDetailView: View {
     var onToggleFavourite: (() -> Void)? = nil
     @Environment(\.dismiss) private var dismiss
     @State private var showingReportIssueConfirmation = false
+    /// Transient "Postcode copied" confirmation on the Address row. Cleared by a task so
+    /// the caption fades out on its own.
+    @State private var showingCopied = false
+    @State private var copyResetTask: Task<Void, Never>?
+    /// The "How Best Value works" sheet, opened from the row at the bottom of the
+    /// Best Value card (the Key sheet opens the same shared view).
+    @State private var showBestValueInfo = false
 
     private let reportIssueURL = URL(string: "https://www.gov.uk/guidance/report-an-error-in-fuel-prices-or-forecourt-details")!
 
@@ -36,10 +43,61 @@ struct StationDetailView: View {
         CLLocationCoordinate2D(latitude: station.lat, longitude: station.lng)
     }
 
+    /// The row's address text — the same shared line the listing row uses, with
+    /// any leading repeat of the station name stripped.
+    private var addressLine: String {
+        StationAddressLine.display(address: station.address,
+                                   postcode: station.postcode,
+                                   name: station.name)
+    }
+
+    /// The station's postcode, trimmed. Empty means there is nothing to copy and
+    /// the Address row stays inert.
+    private var postcodeForCopying: String {
+        station.postcode.trimmingCharacters(in: .whitespacesAndNewlines)
+    }
+
+    /// Opens Apple Maps driving directions — the same destination (and the same
+    /// URL) the Directions button below uses, so the map and the button can
+    /// never point at two different places.
+    private func openDirections() {
+        if let url = station.mapsDirectionsURL {
+            UIApplication.shared.open(url)
+        }
+    }
+
+    /// Copies ONLY the postcode, so it can be pasted into another navigation app
+    /// without dragging the station name and street along with it. Confirms with
+    /// a light haptic and a caption that fades after ~2s.
+    private func copyPostcode() {
+        let postcode = postcodeForCopying
+        guard !postcode.isEmpty else { return }
+        UIPasteboard.general.string = postcode
+        UINotificationFeedbackGenerator().notificationOccurred(.success)
+        withAnimation(.easeInOut(duration: 0.2)) { showingCopied = true }
+        copyResetTask?.cancel()
+        copyResetTask = Task {
+            try? await Task.sleep(nanoseconds: 2_000_000_000)
+            guard !Task.isCancelled else { return }
+            withAnimation(.easeInOut(duration: 0.3)) { showingCopied = false }
+        }
+    }
+
     var body: some View {
         NavigationStack {
             List {
                 Section {
+                    // Tapping anywhere on the map opens the same Apple Maps
+                    // directions the Directions button below opens.
+                    //
+                    // The tap target is an OVERLAY Button laid ON TOP of the
+                    // Map, not a Button wrapping it. A Map runs its own UIKit
+                    // view, and inside a List row the wrapped-Map form left the
+                    // card untappable — the touch never reached the button. An
+                    // overlay sits above the map, owns an explicit rounded-rect
+                    // content shape, and cannot be intercepted by MapKit. The
+                    // Map itself stays non-interactive: it is a preview, not
+                    // something to pan.
                     Map(position: .constant(.region(MKCoordinateRegion(
                         center: stationCoordinate,
                         span: MKCoordinateSpan(latitudeDelta: 0.02, longitudeDelta: 0.02)
@@ -50,16 +108,88 @@ struct StationDetailView: View {
                     .frame(height: 180)
                     .clipShape(RoundedRectangle(cornerRadius: 12))
                     .allowsHitTesting(false)
-                    .listRowInsets(EdgeInsets())
+                    .overlay {
-                }
+                        Button {
-                Section {
+                            openDirections()
-                    // The station name is NOT repeated here: the sheet header
+                        } label: {
-                    // (navigationTitle, inline) already shows it, and the address
+                            Color.clear
-                    // line below has any leading repeat of the name stripped, so
+                                .contentShape(RoundedRectangle(cornerRadius: 12))
-                    // a "Name" row only said it twice.
+                        }
-                    LabeledContent("Address", value: StationAddressLine.display(address: station.address,
+                        .buttonStyle(.plain)
-                                                                             postcode: station.postcode,
+                        .accessibilityLabel(String(localized: "Directions to \(station.name)",
-                                                                             name: station.name))
+                                                   comment: "Accessibility label for the tappable map preview in the More info sheet"))
+                        .accessibilityHint(String(localized: "Opens Apple Maps with driving directions",
+                                                  comment: "Accessibility hint for the tappable map preview in the More info sheet"))
+                    }
+                    // No hairline between the map and the Address row: the map
+                    // already reads as its own block, so the line only added
+                    // clutter. The Address/Distance and Distance/actions lines
+                    // stay.
+                    .listRowSeparator(.hidden, edges: .bottom)
+                    // The map, the address, the distance, any notices and the two
+                    // station actions all share ONE card (the list's own row
+                    // hairlines separate them), so no hand-rolled Divider here —
+                    // adding one would double the line.
+                    //
+                    // The station name is NOT repeated: the sheet header already
+                    // shows it.
+                    //
+                    // The whole row is a copy control: it puts JUST the postcode
+                    // on the clipboard so it can be pasted into another
+                    // navigation app. The copy glyph sits ON the address line,
+                    // and the "Postcode copied" confirmation is a capsule that floats OVER
+                    // THIS ROW — it confirms the address, so it must not hover
+                    // over the map. It is an overlay, so nothing moves while it is
+                    // up, and `allowsHitTesting(false)` keeps the row tappable
+                    // through the capsule.
+                    Button {
+                        copyPostcode()
+                    } label: {
+                        HStack(alignment: .firstTextBaseline, spacing: 8) {
+                            Text("Address")
+                            Spacer(minLength: 8)
+                            Text(addressLine)
+                                .multilineTextAlignment(.trailing)
+                                .foregroundStyle(.secondary)
+                            // Stays the plain copy glyph — the capsule carries
+                            // the confirmation, so swapping this to a checkmark
+                            // would say it twice.
+                            Image(systemName: "doc.on.doc")
+                                .font(.footnote.weight(.semibold))
+                                .foregroundStyle(.secondary)
+                        }
+                    }
+                    .buttonStyle(.plain)
+                    .disabled(postcodeForCopying.isEmpty)
+                    .accessibilityLabel(String(localized: "Address: \(addressLine)",
+                                               comment: "Accessibility label for the address row in the More info sheet"))
+                    .accessibilityHint(postcodeForCopying.isEmpty
+                        ? ""
+                        : String(localized: "Copies the postcode",
+                                 comment: "Accessibility hint for the address row in the More info sheet"))
+                    // Horizontally centred over the address line itself.
+                    .overlay(alignment: .center) {
+                        if showingCopied {
+                            HStack(spacing: 4) {
+                                Image(systemName: "checkmark")
+                                Text("Postcode copied")
+                            }
+                            .font(.footnote.weight(.semibold))
+                            .foregroundStyle(.green)
+                            .padding(.horizontal, 10)
+                            .padding(.vertical, 6)
+                            // A material base keeps it legible where the tint
+                            // alone (the notice-capsule recipe) washes out.
+                            .background {
+                                Capsule()
+                                    .fill(.regularMaterial)
+                                    .overlay(Capsule().fill(Color.green.opacity(0.22)))
+                            }
+                            .allowsHitTesting(false)
+                            .accessibilityHidden(true)
+                            .transition(.opacity)
+                        }
+                    }
                     if let location {
                         let distance = FuelStore.stationDistanceDisplay(
                             station: station, userLat: location.lat, userLng: location.lng
@@ -75,6 +205,28 @@ struct StationDetailView: View {
                             .padding(.vertical, 6)
                             .background(Capsule().fill(Color.orange.opacity(0.14)))
                     }
+                    // The two station actions are the LAST row of the card: half
+                    // the width each, on one line, below Address and Distance.
+                    HStack(spacing: 12) {
+                        Button {
+                            openDirections()
+                        } label: {
+                            Label("Directions", systemImage: "arrow.triangle.turn.up.right.diamond.fill")
+                                .frame(maxWidth: .infinity)
+                        }
+                        Button(role: .destructive) {
+                            showingReportIssueConfirmation = true
+                        } label: {
+                            Label("Report issue", systemImage: "exclamationmark.bubble.fill")
+                                .frame(maxWidth: .infinity)
+                        }
+                    }
+                    // REQUIRED: with the default button style a `List` row has ONE
+                    // row-wide tap target, so two buttons in the same row BOTH fire
+                    // on any tap inside the row (tapping Directions also showed the
+                    // report-issue alert and vice versa). `.borderless` gives each
+                    // button its own hit area — the half-row frame above.
+                    .buttonStyle(.borderless)
                 }
                 // Only shown while Fuel Savings backs it. `fuelSavings` is nil
                 // when the feature is off — `savingsLookup` returns nil when it
@@ -86,7 +238,8 @@ struct StationDetailView: View {
                             availability: fuelSavings,
                             amount: fuelSavingsAmount,
                             baselineStationName: savingsBaselineStationName,
-                            distanceUnit: distanceUnit
+                            distanceUnit: distanceUnit,
+                            showInfoAction: { showBestValueInfo = true }
                         )
                     } header: {
                         Text("Best Value")
@@ -105,20 +258,6 @@ struct StationDetailView: View {
                 }
 #endif
 
-                Section {
-                    Button {
-                        if let url = station.mapsDirectionsURL {
-                            UIApplication.shared.open(url)
-                        }
-                    } label: {
-                        Label("Directions", systemImage: "arrow.triangle.turn.up.right.diamond.fill")
-                    }
-                    Button(role: .destructive) {
-                        showingReportIssueConfirmation = true
-                    } label: {
-                        Label("Report issue", systemImage: "exclamationmark.bubble.fill")
-                    }
-                }
             }
             .navigationTitle(station.name)
             .navigationBarTitleDisplayMode(.inline)
@@ -130,6 +269,8 @@ struct StationDetailView: View {
             } message: {
                 Text("Are you sure you want to report an error in fuel prices or forecourt details? This will open in your chosen browser.")
             }
+            // Nested sheet: the More info sheet stays put behind the explanation.
+            .sheet(isPresented: $showBestValueInfo) { HowBestValueSheet() }
             .toolbar {
                 ToolbarItem(placement: .cancellationAction) {
                     Button("Done") { dismiss() }
@@ -149,6 +290,18 @@ struct StationDetailView: View {
                     )
                 }
             }
+            // The "Postcode copied" fade-out task must not outlive the sheet.
+            .onDisappear { copyResetTask?.cancel() }
+#if DEBUG
+            // QA hook: `-qaCopyPostcode` runs the REAL copy on open, so the
+            // clipboard value (read back with `xcrun simctl pbpaste`) and the
+            // "Postcode copied" confirmation can be verified without a tap — simctl
+            // cannot drive taps into the Simulator.
+            .task {
+                guard ProcessInfo.processInfo.arguments.contains("-qaCopyPostcode") else { return }
+                copyPostcode()
+            }
+#endif
         }
     }
 }

FuelBoard/StationsView.swift

@@ -35,6 +35,11 @@ struct StationsView: View {
     /// info button in the header — keeps the list focused on stations.
     @State private var showKey = false
 
+    /// The "How Best Value works" sheet. The explanation used to be a section in
+    /// the Key sheet; it is its own sheet now, opened from a row at the bottom of
+    /// the Key sheet and from the More info sheet.
+    @State private var showBestValueInfo = false
+
     /// Station picked for the More-info sheet (tap action = showDetails).
     @State private var detailStation: FuelStation?
 
@@ -218,6 +223,18 @@ struct StationsView: View {
                 if ProcessInfo.processInfo.arguments.contains("-showKeySheet") {
                     showKey = true
                 }
+                // QA hook: `-showBestValueInfo` opens the Key sheet and then the
+                // explanation on top of it, so the copy can be screenshotted
+                // without a tap. It has to chain: the explanation's `.sheet` lives
+                // inside the Key sheet's content, so it cannot present while the
+                // Key sheet is shut.
+                if BestValueInfoQA.isRequested {
+                    showKey = true
+                    Task { @MainActor in
+                        try? await Task.sleep(nanoseconds: 1_200_000_000)
+                        showBestValueInfo = true
+                    }
+                }
 #endif
             }
             .task(id: stations.count) {
@@ -250,14 +267,14 @@ struct StationsView: View {
                                 keyCard(
                                     icon: "checkmark.circle.fill", color: .green,
                                     title: "Good price", blurb: "Within 1.5p of the cheapest",
-                                    threshold: "≤1.5p")
+                                    threshold: "0–1.5p")
                                 keyCard(
                                     icon: "equal.circle.fill", color: .orange,
-                                    title: "Okay", blurb: "Within 4p of the cheapest",
+                                    title: "Okay", blurb: "More than 1.5p, up to 4p above the cheapest",
-                                    threshold: "≤4p")
+                                    threshold: ">1.5–4p")
                                 keyCard(
                                     icon: "exclamationmark.circle.fill", color: .red,
-                                    title: "Pricey", blurb: "More than 4p over the cheapest",
+                                    title: "Pricey", blurb: "More than 4p above the cheapest",
                                     threshold: ">4p")
                                 Rectangle()
                                     .fill(Color(.separator))
@@ -289,25 +306,26 @@ struct StationsView: View {
                                 .padding(.horizontal, 14)
                                 .padding(.vertical, 12)
                                 .keyCardFill(color: .yellow)
-                                Text("Colours match each station's rating on the list")
+                                Text("Price differences are shown in pence per litre (p/litre). Colours match each station's rating on the list.")
                                     .font(.footnote)
                                     .foregroundStyle(.secondary)
-                                    .frame(maxWidth: .infinity)
+                                    .frame(maxWidth: .infinity, alignment: .center)
+                                    .multilineTextAlignment(.center)
                                     .padding(.top, 4)
                             }
                             .listRowBackground(Color.clear)
                             .listRowInsets(EdgeInsets(top: 4, leading: 16, bottom: 4, trailing: 16))
                         }
 
-                        Section("How Best Value works") {
+                        // The explanation is its own sheet now, opened from this
-                            VStack(alignment: .leading, spacing: 10) {
+                        // row. Gated exactly like the More info row and the Best
-                                Text("Best Value compares each station with the closest one. It works out what you could save at the pump, then takes off the fuel used for the extra return journey.")
+                        // Value card itself: `isConfigured` is the same condition
-                                Text("Your fill-up amount and MPG are used to show whether you could save overall.")
+                        // `savingsForStation` uses, so the row appears and
-                                Text("Results are marked “Approx.” until road distances are available.")
+                        // disappears with the feature.
-                                    .foregroundStyle(.secondary)
+                        if fuelSavingsSettings.isConfigured {
+                            Section {
+                                HowBestValueRow { showBestValueInfo = true }
                             }
-                            .font(.subheadline)
-                            .padding(.vertical, 4)
                         }
                     }
                     .navigationTitle("Key")
@@ -317,6 +335,8 @@ struct StationsView: View {
                             Button("Done") { showKey = false }
                         }
                     }
+                    // Nested sheet: the Key sheet stays behind the explanation.
+                    .sheet(isPresented: $showBestValueInfo) { HowBestValueSheet() }
                 }
                 .presentationDetents([.fraction(0.6)])
                 .presentationBackground(Color(UIColor.systemGroupedBackground))
@@ -358,6 +378,7 @@ struct StationsView: View {
                 Text(LocalizedStringKey(blurb))
                     .font(.caption)
                     .foregroundStyle(.secondary)
+                    .fixedSize(horizontal: false, vertical: true)
             }
             Spacer(minLength: 8)
             HStack(spacing: 6) {

FuelBoard/en.lproj/Localizable.strings

@@ -26,15 +26,15 @@
 "Good price" = "Good price";
 "Within 1.5p of the cheapest" = "Within 1.5p of the cheapest";
 "Okay" = "Okay";
-"Within 4p of the cheapest" = "Within 4p of the cheapest";
+"More than 1.5p, up to 4p above the cheapest" = "More than 1.5p, up to 4p above the cheapest";
 "Pricey" = "Pricey";
-"More than 4p over the cheapest" = "More than 4p over the cheapest";
+"More than 4p above the cheapest" = "More than 4p above the cheapest";
 "Top result for the current sort" = "Top result for the current sort";
 "Star a station to add it to Favourites" = "Star a station to add it to Favourites";
 /* Star button in the More info sheet heading (accessibility labels) */
 "Add to favourites" = "Add to favourites";
 "Remove from favourites" = "Remove from favourites";
-"Colours match each station's rating on the list" = "Colours match each station's rating on the list";
+"Price differences are shown in pence per litre (p/litre). Colours match each station's rating on the list." = "Price differences are shown in pence per litre (p/litre). Colours match each station's rating on the list.";
 "How Best Value works" = "How Best Value works";
 "Best Value compares each station with the closest one. It works out what you could save at the pump, then takes off the fuel used for the extra return journey." = "Best Value compares each station with the closest one. It works out what you could save at the pump, then takes off the fuel used for the extra return journey.";
 "Your fill-up amount and MPG are used to show whether you could save overall." = "Your fill-up amount and MPG are used to show whether you could save overall.";
@@ -71,6 +71,11 @@
 "Name" = "Name";
 "Address" = "Address";
 "Distance" = "Distance";
+"Copies the postcode" = "Copies the postcode";
+"Postcode copied" = "Postcode copied";
+"Address: %@" = "Address: %@";
+"Directions to %@" = "Directions to %@";
+"Opens Apple Maps with driving directions" = "Opens Apple Maps with driving directions";
 "Show introduction" = "Replay onboarding";
 "Replay the welcome screen, including the location and notification permission prompts." = "Replay the welcome screen, including the location and notification permission prompts.";
 "Test alert notification (real data)" = "Test alert notification (real data)";